Merge pull request #41 from socialblue/develop

Removes dependency

Author: mbroersen

composer.json

@@ -16,8 +16,7 @@
         }
     ],
     "require": {
-        "php": "^7.1",
-        "illuminate/support": "5.8.*"
+        "php": "^7.0"
     },
     "require-dev": {
         "orchestra/testbench": "^3.8"

resources/assets/js/components/side-panel.vue

@@ -10,16 +10,16 @@
                 <div class="rows">
                     <h3 class="subtitle">Order</h3>
                     <div class="field">
-                        <input class="is-checkradio" id="exampleRadioInline1" type="radio" name="exampleRadioInline" checked="checked">
-                        <label for="exampleRadioInline1">Default</label>
+                        <input class="is-checkradio" id="default" type="radio" value="time" name="sortField" v-model="sortField">
+                        <label for="default">Default</label>
                     </div>
                     <div class="field">
-                        <input class="is-checkradio" id="exampleRadioInline2" type="radio" name="exampleRadioInline">
-                        <label for="exampleRadioInline2">QueryTime</label>
+                        <input class="is-checkradio" id="querytime" type="radio" value="queryTime" name="sortField" v-model="sortField">
+                        <label for="querytime">QueryTime</label>
                     </div>
                     <div class="field">
-                        <input class="is-checkradio" id="exampleRadioInline3" type="radio" name="exampleRadioInline">
-                        <label for="exampleRadioInline3">Grouped Amount</label>
+                        <input class="is-checkradio" id="amount" type="radio" value="amount" name="sortField" v-model="sortField">
+                        <label for="amount">Grouped Amount</label>
                     </div>
                 </div>
             </div>
@@ -39,6 +39,19 @@
             }
         },
 
+        computed: {
+            sortField: {
+                get() {
+                    return this.$attrs['sort-field'];
+                },
+
+                set(field) {
+                    console.log(field);
+                    this.$emit('update:sort-field', field);
+                }
+            }
+        },
+
         beforeCreate() {
             window.EventBus.$on('show-filter-bar', () => {
                 this.active = true;

resources/assets/js/view/index.vue

@@ -32,20 +32,20 @@
                         <span class="tag is-medium is-primary">Start</span>
                     </header>
 
-                    <div class="timeline-item is-primary" v-for="(queries, key) in dataList">
+                    <div class="timeline-item is-primary" v-for="key in dataListKey">
                         <div class="timeline-marker is-icon button is-info">
                             <span v-on:click="toggleQueryGroup(key)" class="material-icons" title="expand">
                                     <template v-if="!showQueryGroup(key)">expand_more</template>
                                     <template v-if="showQueryGroup(key)">expand_less</template>
                             </span>
                         </div>
                         <div class="timeline-content">
-                            <p class="heading">{{groupTitle(key)}} ({{queries.length}})
+                            <p class="heading">{{groupTitle(key)}} ({{dataList[key].length}})
 
                             </p>
                             <div>
                                 <div class="columns is-multiline" v-if="showQueryGroup(key)">
-                                    <div class="column" v-for="(query) in queries" >
+                                    <div class="column" v-for="query in dataList[key]" >
                                         <query-block
                                                 :query="query"
                                         >
@@ -62,7 +62,7 @@
                 </div>
             </main>
         </div>
-        <side-panel />
+        <side-panel :sort-field.sync="sortKey"/>
         <page-footer />
         <notification />
     </div>
@@ -87,6 +87,8 @@
 
         data() {
             return {
+                sortKey: 'time',
+                sortDirection: 1,
                 listType: 'time',
                 cachedKeys: {},
                 showTime: []
@@ -102,6 +104,19 @@
                 return this.groupValuesByKey(this.listType);
             },
 
+            dataListKey() {
+                let list = this.dataList;
+
+                return Object.keys(list).sort((a, b) => {
+                    if (list[a][0][this.sortKey] === list[b][0][this.sortKey]) {
+                        return 0;
+                    } else if(list[a][0][this.sortKey] > list[b][0][this.sortKey]) {
+                        return -1 * this.sortDirection
+                    }
+                    return this.sortDirection;
+                });
+            },
+
             flattenedCachedKeys() {
                 return Object.values(this.cachedKeys).flat();
             },
@@ -184,7 +199,14 @@
             groupValuesByKey(key) {
                 let data = {};
                 this.getUniqueValuesByKey(key).forEach((uniqueValue) => {
-                    data[uniqueValue] = this.flattenedCachedKeys.filter(row => row[key] === uniqueValue);
+                    data[uniqueValue] = this.flattenedCachedKeys.filter(row => row[key] === uniqueValue).sort((a, b) => {
+                        if (a[this.sortKey] === b[this.sortKey]) {
+                            return 0;
+                        } else if(a[this.sortKey] > b[this.sortKey]) {
+                            return -1 * this.sortDirection
+                        }
+                        return this.sortDirection;
+                    });
                 });
                 return data;
             }