Many fixes n stuff

src/components/Feed.vue

@@ -1,22 +1,27 @@
 <template>
   <div>
     <q-list highlight inset-separator sparse no-border>
-      <q-list-header>Quoi de neuf</q-list-header>
+      <q-item-label header>Quoi de neuf</q-item-label>
       <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-section avatar>
-        <q-item-main>
+          <q-icon :name="history.image ? 'image' : 'chat'"></q-icon>
-          <q-item-tile lines="3" label>{{ history.text }}</q-item-tile>
+        </q-item-section>
-          <q-item-tile sublabel>
+        <q-item-section>
+          <q-item-label lines="3" label>{{ history.text }}</q-item-label>
+          <q-item-label caption>
             <span class="text-secondary">{{history.user}}</span>
             , au sujet de <b>{{ history.item.name}}</b> #{{history.ref}}
-          </q-item-tile>
+          </q-item-label>
-        </q-item-main>
+        </q-item-section>
-        <q-item-side right :stamp="timeAgo(history.timestamp)"/>
+
+        <q-item-section side top>
+          <q-item-label caption>{{timeAgo(history.created)}}</q-item-label>
+        </q-item-section>
       </q-item>
     </q-list>
   </div>
@@ -52,6 +57,7 @@ export default {
       return date.formatDate(timestamp, format)
     },
     timeAgo (timestamp) {
+      console.log('timestamp', timestamp)
       let date1 = new Date(timestamp)
       let date2 = Date.now()
       let hoursDiff = date.getDateDiff(date2, date1, 'hours')

src/layouts/DefaultLayout.vue

@@ -1,11 +1,12 @@
 <template>
-  <q-layout> <!-- Be sure to play with the Layout demo on docs -->
+  <q-layout v-if="!loading"> <!-- Be sure to play with the Layout demo on docs -->
-    <q-header class="no-shadow text-center">
+    <q-header class="no-shadow text-center bg-white">
       <q-toolbar color="secondary" inverted style="border-bottom:1px solid rgba(0,0,0,0.1)">
         <q-btn
           flat
           size="18px"
           icon="menu"
+          color="secondary"
           @click="leftDrawer = !leftDrawer"
         />
         <q-toolbar-title class="text-center">
@@ -30,20 +31,20 @@
                 no-border
                 inset-separator
         >
-          <q-item-label>Catégories</q-item-label>
+          <q-item-label header>Catégories</q-item-label>
           <q-item v-for="category in categories"
                   :key="category.code"
                   :to="'/category/' + category.code"
           >
+            <q-item-section>{{ category.name }}</q-item-section>
             <q-item-section>
-              {{ category.name }}
               <q-chip square
                       dense
                       color="secondary"
-                      class="q-ml-md"
+                      text-color="white"
               >{{ counters[category.name] }}</q-chip>
             </q-item-section>
-            <q-item-section>
+            <q-item-section side>
               <q-btn round
                      flat
                      size="md"
@@ -104,6 +105,7 @@ export default {
     }
   },
   created () {
+    this.loading = true
     this.$q.loading.setDefaults({
       spinner: QSpinnerBars,
       message: 'OK, laisse moi juste le temps de charger...',
@@ -153,9 +155,10 @@ export default {
   methods: {
     loadAppData () {
       this.$q.loading.show()
-      this.$store.dispatch('core/loadAppData').then(data => {
+      return this.$store.dispatch('core/loadAppData').then(data => {
         console.log(data)
         this.$q.loading.hide()
+        this.loading = false
       })
     },
     unsetUser () {
@@ -166,12 +169,12 @@ export default {
         ok: 'Bah oui, FDP',
         cancel: 'Ah non en fait'
       })
-        .then(() => {
+        .onOk(() => {
           this.$q.localStorage.remove('username')
           this.$router.push('/')
         })
     },
-    addItem (category) {
+    async addItem (category) {
       this.$q.loading.show()
       let newItem = {
         available: true,
@@ -184,37 +187,37 @@ export default {
         system: null
       }
       newItem.ref = `${category.code}-${String(this.counters[category.name] + 1).padStart(4, '0')}`
-      this.$store.dispatch('core/addToCollection', {
+      await this.$store.dispatch('core/addToCollection', {
         collection: 'stock',
         data: newItem
-      }).then(response => {
-        // Insert history record
-        this.$store.dispatch('core/addToCollection', {
-          collection: 'history',
-          data: {
-            ref: newItem.ref,
-            text: 'Entrée en stock',
-            user: this.$store.state.core.username,
-            timestamp: Date.now()
-          }
-        })
-
-        // Process to new item
-        this.$q.loading.hide()
-        this.$q.dialog({
-          title: `Item "${category.name}" créé`,
-          message: 'Tu veux aller éditer les détails de cet item ?',
-          color: 'primary',
-          ok: 'Oui, STP',
-          cancel: 'Osef'
-        })
-          .then(() => {
-            this.$router.push(`/item/${newItem.ref}`)
-          })
-          .catch(() => {
-            // Picked "Cancel" or dismissed
-          })
       })
+      // Insert history record
+      await this.$store.dispatch('core/addToCollection', {
+        collection: 'history',
+        data: {
+          ref: newItem.ref,
+          text: 'Entrée en stock',
+          user: this.$store.state.core.username,
+          timestamp: Date.now()
+        }
+      })
+      await this.loadAppData()
+
+      // Process to new item
+      this.$q.loading.hide()
+      this.$q.dialog({
+        title: `Item "${category.name}" créé`,
+        message: 'Tu veux aller éditer les détails de cet item ?',
+        color: 'primary',
+        ok: 'Oui, STP',
+        cancel: 'Osef'
+      })
+        .then(() => {
+          this.$router.push(`/item/${newItem.ref}`)
+        })
+        .catch(() => {
+          // Picked "Cancel" or dismissed
+        })
     }
   }
 }

src/pages/StockItem.vue

@@ -3,19 +3,18 @@
     <q-chip class="float-right text-white" color="secondary">{{item.ref}}</q-chip>
     <q-chip v-if="item.deleted" class="float-right q-mr-md" color="red">Supprimé</q-chip>
     <h2 class="q-ma-none" :class="{'text-faded': !item.name}">{{item.name || '---- -- ----'}}</h2>
-    <h4 class="q-ma-none q-pb-md text-light">{{item.type}}</h4>
+    <h4 class="q-ma-none q-pb-md text-grey">{{item.type}}</h4>
 
     <div class="q-py-md">
         <q-input v-model="item.name"
                  :disable="item.deleted"
                  type="text"
-                 standout
+                 outlined color="secondary"
                  stack-label label="Nom" class="q-mb-md"
-                 @input="changed = true"/>
+                 @update:model-value="changed = true"/>
         <q-input v-model="item.owner"
                  :disable="item.deleted"
-                 color="secondary"
+                 outlined color="secondary" stack-label label="Propriétaire" class="q-mb-md"
-                 standout stack-label label="Propriétaire" class="q-mb-md"
                  @input="changed = true"/>
       <q-field borderless stack-label label="Etat cosmétique" class="q-mb-md">
       <q-btn-toggle
@@ -41,6 +40,7 @@
             :disable="item.deleted"
             v-model="item.working"
             :toggle-color="item.working ? 'green' : 'red'"
+            text-color="black"
             :options="[
             {label: '✔', value: true},
             {label: '?', value: null},
@@ -55,6 +55,7 @@
           :disable="item.deleted"
           v-model="item.available"
           :toggle-color="item.available ? 'green' : 'red'"
+          text-color="black"
           :options="[
             {label: '✔', value: true},
             {label: '✘', value: false}
@@ -67,6 +68,7 @@
           no-caps
           v-model="item.deleted"
           :toggle-color="item.deleted ? 'green' : 'red'"
+          text-color="black"
           :options="[
             {label: 'Oui', value: true},
             {label: 'Non', value: false}
@@ -81,7 +83,7 @@
           type="textarea"
           :max-height="100"
           rows="4"
-          standout stack-label label="Commentaire" class="q-mb-md"
+          outlined color="secondary" stack-label label="Commentaire" class="q-mb-md"
           inverted
         />
       <q-btn :disabled="!changed || originalItem.deleted"
@@ -139,8 +141,8 @@
       </q-timeline-entry>
       <q-timeline-entry
         v-for="event in history.slice().reverse()"
-        :key="event.timestamp"
+        :key="event.created"
-        :subtitle="getDate(event.timestamp)"
+        :subtitle="getDate(event.created)"
         :title="event.user"
         side="left"
       >
@@ -216,10 +218,7 @@ export default {
     }
   },
   created: function () {
-    let item = this.stock.find(item => {
+    this.loadItem()
-      return (item) ? item.ref === this.itemRef : false
-    }) || []
-    this.item = { ...item }
   },
   mounted  () {
     this.username = this.$q.localStorage.getItem('username')
@@ -250,13 +249,15 @@ export default {
           timestamp: this.pendingHistoryDate
         }
       }).then(response => {
-        // this.$speech(`ooo history desu, arigato !`)
+        this.$store.dispatch('core/loadAppData').then(_ => {
-        this.showHistoryForm = false
+          this.loadItem()
-        this.pendingHistory = null
+          this.showHistoryForm = false
-        this.pendingHistoryDate = null
+          this.pendingHistory = null
-        this.hasFile = false
+          this.pendingHistoryDate = null
-        this.$refs.uploader.reset()
+          this.hasFile = false
-        this.$q.loading.hide()
+          this.$refs.uploader.reset()
+          this.$q.loading.hide()
+        })
       })
     },
     removeHistory (data) {
@@ -265,11 +266,16 @@ export default {
         message: "Il est possible que tu sois Meth, nous sommes donc légalement obligés de te demander : es-tu absolument sur d'être certain de vouloir effectuer cette action irréversible ?",
         ok: 'Supprimer',
         cancel: 'Annuler'
-      }).then(() => {
+      }).onOk(() => {
         this.$store.dispatch('core/removeFromCollection', {
           collection: 'history',
           data
-        }).then(_ => this.$q.notify('Supprimé !'))
+        }).then(_ => {
+          this.$store.dispatch('core/loadAppData').then(_ => {
+            this.loadItem()
+            this.$q.notify('Supprimé !')
+          })
+        })
       })
     },
     updateItem () {
@@ -282,12 +288,13 @@ export default {
         // this.$speech(`sugoï, domo arigato senpai !`)
         this.$q.notify({
           message: 'Enregistré !',
-          color: 'grey',
+          color: 'secondary',
-          avatar: '~assets/gyoza_logo_nobg.png',
+          avatar: '/gyoza_logo_nobg.png',
           timeout: 2000
         })
         this.changed = false
         this.$store.dispatch('core/loadAppData').then(_ => {
+          this.loadItem()
           this.$q.loading.hide()
         })
       })
@@ -299,6 +306,12 @@ export default {
     },
     getImageUrl (history, image) {
       return this.$pb.files.getURL(history, image, { thumb: '300x300f' })
+    },
+    loadItem () {
+      let item = this.stock.find(item => {
+        return (item) ? item.ref === this.itemRef : false
+      }) || []
+      this.item = { ...item }
     }
   }
 }

src/store/core/actions.js

@@ -27,6 +27,11 @@ export async function loadAppData (store) {
 //   })
 // }
 //
+
+export function addToCollection (store, data) {
+  return pb.collection(data.collection).create(data.data)
+}
+
 // export function removeFromCollection (store, data) {
 //   return Firebase.database().ref('/' + data.collection).once('value').then((snapshot) => {
 //     let index = snapshot.val().findIndex(item =>
@@ -35,15 +40,26 @@ export async function loadAppData (store) {
 //     return Firebase.database().ref('/' + data.collection + '/' + index).remove()
 //   })
 // }
+export function removeFromCollection (store, data) {
+  return pb.collection(data.collection).delete(data.data.id)
+}
 //
 // export function updateItem (store, data) {
 //   return Firebase.database().ref(`/${data.collection}/${data.itemId}`).set(data.data)
 // }
 //
+export function updateItem (store, data) {
+  return pb.collection(data.collection).update(data.data.id, data.data)
+}
+
 // export function deleteItem (store, data) {
 //   return Firebase.database().ref(`/${data.collection}/${data.itemId}`).set(null)
 // }
 //
+export function deleteItem (store, data) {
+  return pb.collection(data.collection).delete(data.data.id)
+}
+
 // export function uploadFile (store, file) {
 //   return Firebase.storage().ref().child(Date.now() + file.name).put(file)
 // }