Add recap page

src/layouts/DefaultLayout.vue

@@ -66,7 +66,15 @@
           <!--          PRINT STUFF-->
           <q-separator/>
           <q-item-label header>Utilitaires</q-item-label>
+          <q-item :to="'/tasks'"
+          >
+            <q-item-section>Tâches</q-item-section>
+            <q-item-section side>
+              <q-icon name="task"></q-icon>
+            </q-item-section>
+          </q-item>
           <q-item :to="'/print-settings'"
+                  disable
           >
             <q-item-section>Impression</q-item-section>
             <q-item-section side>

src/pages/StockItem.vue

@@ -230,7 +230,7 @@
             <span>{{ getDate(selectedHistory.created) }}</span>
           </div>
         </q-card-section>
-        <q-card-section>
+        <q-card-section v-if="selectedHistory.type === 'issue' && !selectedHistory.solved_at">
           <q-btn outline color="secondary" label="Marquer comme terminé" @click="setTaskDone(selectedHistory)"></q-btn>
         </q-card-section>
         <q-separator/>
@@ -391,10 +391,16 @@ export default {
         collection: 'history',
         itemId: history.id,
         data: {
-          ...history,
+          id: history.id,
           solved_at: new Date().toISOString(),
           solved_by: this.username
         }
+      }).then(_ => {
+        this.$store.dispatch('core/loadAppData').then(_ => {
+          this.loadItem()
+          this.showHistory = false
+          this.selectedHistory = null
+        })
       })
     },
     async uploadFile (file) {

src/pages/TasksPage.vue

@@ -0,0 +1,142 @@
+<template>
+  <q-page padding>
+    <h4 class="q-mt-none">Tâches</h4>
+
+    <q-list bordered separator class="rounded-borders">
+      <q-item clickable
+              v-for="issue in issues"
+              :key="issue.id"
+              @click="showHistory = true;selectedHistory = issue"
+      >
+        <q-item-section top thumbnail class="q-ml-none" style="margin:-8px 0 -8px -16px">
+          <img
+            :src="getImageUrl(issue, issue.image_file, true)"
+            alt="photo"
+            v-if="issue.image_file"
+          />
+        </q-item-section>
+        <q-item-section avatar>
+          <q-icon name="task"
+                  :color="issue.solved_at ? 'green' : 'grey'"
+          />
+        </q-item-section>
+        <q-item-section>
+          <q-item-label lines="3" v-html="issue.text.split('\n').join('</br>')"></q-item-label>
+          <q-item-label caption>
+            <span class="text-secondary">{{ issue.item.type }} / </span>
+            <span class="text-secondary q-mr-sm">{{ issue.item.name }}</span>
+            <span v-if="issue.item.ref">#{{ issue.item.ref }}</span>
+          </q-item-label>
+          <q-item-label caption>
+            <span class="text-capitalize">{{ issue.user }}</span>
+            <template v-if="issue.solved_at">
+              <q-icon name="arrow_right" size="sm"/>
+              fait par <span class="text-capitalize">{{ issue.solved_by }}</span> le {{ getDate(issue.solved_at) }}
+            </template>
+          </q-item-label>
+        </q-item-section>
+        <q-item-section side top>
+          <q-item-label caption>{{ getDate(issue.created) }}</q-item-label>
+        </q-item-section>
+      </q-item>
+    </q-list>
+
+    <q-dialog v-model="showHistory">
+      <q-card>
+        <img :src="getImageUrl(selectedHistory, selectedHistory.image_file)"
+             alt="photo"
+             v-if="selectedHistory.image_file"
+        />
+        <q-card-section>
+          <div v-html="selectedHistory.text.split('\n').join('</br>')"></div>
+          <div class="text-caption text-grey">
+            <span class="text-secondary">{{ selectedHistory.item.type }} / </span>
+            <span class="text-secondary q-mr-sm">{{ selectedHistory.item.name }}</span>
+            <span v-if="selectedHistory.item.ref">#{{ selectedHistory.item.ref }}</span>
+            <q-separator class="q-my-md"/>
+            <span class="text-capitalize q-mr-sm">{{ selectedHistory.user }}</span>
+            <template v-if="selectedHistory.solved_at">
+              <q-icon name="arrow_right" size="sm"/>
+              fait par <span class="text-capitalize">{{ selectedHistory.solved_by }}</span> le {{ getDate(selectedHistory.solved_at) }}
+            </template>
+<!--            <span>{{ getDate(selectedHistory.created) }}</span>-->
+          </div>
+        </q-card-section>
+        <q-card-section v-if="!selectedHistory.solved_at">
+          <q-btn outline color="secondary" label="Marquer comme terminé" @click="setTaskDone(selectedHistory)"></q-btn>
+        </q-card-section>
+        <q-separator/>
+        <q-card-actions align="right">
+          <q-btn flat color="red" @click.stop="removeHistory(selectedHistory)">Supprimer</q-btn>
+          <q-btn flat color="grey" @click.stop="showHistory = false;selectedHistory = null">Fermer</q-btn>
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
+
+<!--    <pre>{{ issues }}</pre>-->
+  </q-page>
+</template>
+
+<script>
+import { date, debounce } from 'quasar'
+
+export default {
+  name: 'TasksPage',
+  data () {
+    return {
+      showHistory: false,
+      selectedHistory: null
+    }
+  },
+  created () {
+  },
+  computed: {
+    rawIssues () {
+      return this.$store.state.core.firebase.history.filter(item => {
+        return item.type === 'issue'
+      }) || []
+    },
+    items () {
+      return this.$store.state.core.firebase.stock.filter(item => {
+        let refs = Array.from(new Set(this.rawIssues.map(issue => issue.ref)))
+        return refs.includes(item.ref)
+      }) || []
+    },
+    issues () {
+      return this.rawIssues.map(issue => {
+        let item = this.items.find(item => item.ref === issue.ref) || {}
+        return {
+          ...issue,
+          item
+        }
+      })
+    }
+
+  },
+  methods: {
+    getDate (timestamp) {
+      return date.formatDate(timestamp, 'DD/MM/YY - HH:mm')
+    },
+    setTaskDone (history) {
+      this.$store.dispatch('core/updateItem', {
+        collection: 'history',
+        itemId: history.id,
+        data: {
+          id: history.id,
+          solved_at: new Date().toISOString(),
+          solved_by: this.$store.state.core.username
+        }
+      }).then(_ => {
+        this.$q.notify('Terminé !')
+        this.$store.dispatch('core/loadAppData').then(_ => {
+          this.showHistory = false
+          this.selectedHistory = null
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style>
+</style>

src/router/routes.js

@@ -14,6 +14,7 @@ const routes = [
       { path: 'category/:categoryCode', props: true, component: () => import('pages/StockItems.vue') },
       { path: 'item/:itemRef', props: true, component: () => import('pages/StockItem.vue') },
       { path: 'print-settings', props: true, component: () => import('pages/PrintSettings.vue') },
+      { path: 'tasks', props: true, component: () => import('pages/TasksPage.vue') },
       { path: ':shortId', props: true, component: () => import('pages/StockItem.vue') }
     ]
   }