Merge pull request #41 from socialblue/develop

Removes dependency

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;
  }