Many fixes n stuff

3 months ago · 56a251b929
5 changed files with 105 additions and 67 deletions
--- a/src/assets/gyoza_logo_nobg.png
+++ b/src/assets/gyoza_logo_nobg.png
--- a/src/components/Feed.vue
+++ b/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-main>
-          <q-item-tile lines="3" label>{{ history.text }}</q-item-tile>
-          <q-item-tile sublabel>
+        <q-item-section avatar>
+          <q-icon :name="history.image ? 'image' : 'chat'"></q-icon>
+        </q-item-section>
+        <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-main>
-        <q-item-side right :stamp="timeAgo(history.timestamp)"/>
+          </q-item-label>
+        </q-item-section>
+
+        <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')
--- a/src/layouts/DefaultLayout.vue
+++ b/src/layouts/DefaultLayout.vue
@ -1,11 +1,12 @@
 <template>
-  <q-layout> <!-- Be sure to play with the Layout demo on docs -->
-    <q-header class="no-shadow text-center">
+  <q-layout v-if="!loading"> <!-- Be sure to play with the Layout demo on docs -->
+    <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()
-          }
-        })
+      })
+      // 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
-          })
+      // 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
+        })
    }
  }
 }
--- a/src/pages/StockItem.vue
+++ b/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"
-                 standout stack-label label="Propriétaire" class="q-mb-md"
+                 outlined color="secondary" 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"
-        :subtitle="getDate(event.timestamp)"
+        :key="event.created"
+        :subtitle="getDate(event.created)"
        :title="event.user"
        side="left"
      >
@ -216,10 +218,7 @@ export default {
    }
  },
  created: function () {
-    let item = this.stock.find(item => {
-      return (item) ? item.ref === this.itemRef : false
-    }) || []
-    this.item = { ...item }
+    this.loadItem()
  },
  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.showHistoryForm = false
-        this.pendingHistory = null
-        this.pendingHistoryDate = null
-        this.hasFile = false
-        this.$refs.uploader.reset()
-        this.$q.loading.hide()
+        this.$store.dispatch('core/loadAppData').then(_ => {
+          this.loadItem()
+          this.showHistoryForm = false
+          this.pendingHistory = null
+          this.pendingHistoryDate = null
+          this.hasFile = false
+          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',
-          avatar: '~assets/gyoza_logo_nobg.png',
+          color: 'secondary',
+          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 }
    }
  }
 }
--- a/src/store/core/actions.js
+++ b/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)
 // }