Basic UI rework

src/components/Feed.vue

@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <q-list highlight inset-separator sparse no-border>
+      <q-list-header>Quoi de neuf</q-list-header>
+      <q-item mulitline
+              link
+              v-for="history in lastHistory"
+              :key="history.timestamp"
+              :to="`item/${history.ref}`"
+      >
+        <q-item-side :icon="history.image ? 'image' : 'chat'" />
+        <q-item-main>
+          <q-item-tile lines="3" label>{{ history.text }}</q-item-tile>
+          <q-item-tile sublabel>
+            <span class="text-secondary">{{history.user}}</span>
+            , au sujet de <b>{{ history.item.name}}</b> #{{history.ref}}
+          </q-item-tile>
+        </q-item-main>
+        <q-item-side right :stamp="timeAgo(history.timestamp)"/>
+      </q-item>
+    </q-list>
+  </div>
+
+</template>
+
+<script>
+import { date } from 'quasar'
+
+export default {
+  name: 'ActivityFeed',
+  data () {
+    return { }
+  },
+  computed: {
+    stock () {
+      return this.$store.state.core.firebase.stock || []
+    },
+    history () {
+      return this.$store.state.core.firebase.history || []
+    },
+    username () { return this.$store.state.core.username },
+    lastHistory () {
+      let newHistory = JSON.parse(JSON.stringify(this.history)).slice(-15)
+      for (let history of newHistory) {
+        history.item = this.getStock(history.ref)
+      }
+      return newHistory.reverse()
+    }
+  },
+  methods: {
+    dateFormat (timestamp, format = 'DD/MM/YY - HH:ss') {
+      return date.formatDate(timestamp, format)
+    },
+    timeAgo (timestamp) {
+      let date1 = new Date(timestamp)
+      let date2 = Date.now()
+      let hoursDiff = date.getDateDiff(date2, date1, 'hours')
+      if (hoursDiff < 24) {
+        return `il y a ${hoursDiff} heure(s)`
+      } else {
+        let daysDiff = date.getDateDiff(date2, date1)
+        return `il y a ${daysDiff} jour(s)`
+      }
+    },
+    getStock (ref) {
+      return this.stock.find(item => {
+        return (item) ? item.ref === ref : false
+      }) || []
+    }
+  }
+}
+</script>
+
+<style>
+</style>

src/components/GlobalSearch.vue

@@ -0,0 +1,79 @@
+<template>
+  <div>
+    <q-input v-model="srcTxt"
+              @input="updateSearchUrl"
+              placeholder="Rechercher une référence ou un nom"
+              autofocus
+              clearable
+    />
+    <q-list highlight
+            no-border
+            v-if="searchResults.length > 0"
+            class="q-mb-lg"
+    >
+      <q-item-label>{{searchResults.length}} résultats de recherche pour "{{srcTxt}}"</q-item-label>
+      <q-item multiline
+              link
+              :class="{'text-red': result.deleted}"
+              v-for="result in searchResults"
+              :disabled="result.deleted"
+              :key="result.ref"
+              :to="`item/${result.ref}`"
+      >
+        <q-item-section>
+          <q-item-section label>{{ result.name }}</q-item-section>
+          <q-item-section sublabel>
+            #{{result.ref}}, dans <span class="text-secondary">{{result.type}}</span>
+          </q-item-section>
+        </q-item-section>
+        <q-item-section right :stamp="`Etat: ${result.state}`"/>
+      </q-item>
+<!--      <q-item-separator />-->
+    </q-list>
+
+  </div>
+</template>
+
+<script>
+import { date } from 'quasar'
+
+export default {
+  name: 'GlobalSearch',
+  data () {
+    return { srcTxt: null }
+  },
+  computed: {
+    stock () {
+      return this.$store.state.core.firebase.stock || []
+    },
+    searchResults () {
+      if (!this.srcTxt || this.srcTxt.length < 3) return []
+      return this.stock.filter(item => {
+        return (item.ref + (item.name + '').toLowerCase()).search(this.srcTxt.toLowerCase()) !== -1
+      }) || []
+    }
+  },
+  created () {
+    if (!this.srcTxt) this.srcTxt = this.$route.query.search || null
+  },
+  methods: {
+    timeAgo (timestamp) {
+      let date1 = new Date(timestamp)
+      let date2 = Date.now()
+      let hoursDiff = date.getDateDiff(date2, date1, 'hours')
+      if (hoursDiff < 24) {
+        return `il y a ${hoursDiff} heure(s)`
+      } else {
+        let daysDiff = date.getDateDiff(date2, date1)
+        return `il y a ${daysDiff} jour(s)`
+      }
+    },
+    updateSearchUrl () {
+      this.$router.replace({ path: this.$router.path, query: { search: this.srcTxt } })
+    }
+  }
+}
+</script>
+
+<style>
+</style>