Add link to item in tasks

Add working column in lists

src/pages/StockItem.vue

@@ -147,7 +147,9 @@
               <img
                 :src="getImageUrl(event, event.image_file, true)"
                 alt="photo"
+                style="object-fit: cover"
                 v-if="event.image_file"
+                class="full-height"
               />
             </q-item-section>
             <q-item-section>

src/pages/StockItems.vue

@@ -2,6 +2,8 @@
   <q-page padding>
     <h4 class="q-mt-none">{{category.name}}</h4>
     <q-table
+      flat
+      bordered
         :title="category.name"
         :rows="items"
         :columns="dynamicColumns"
@@ -40,17 +42,21 @@
           @click="goToDetail(props)"
           :class="{'cursor-pointer': true, 'text-red': props.row.deleted}">
           <q-td v-for="col in props.cols" :key="col.ref">
-            <div v-if="col.name === 'available'" class="text-center">
+            <div v-if="col.name === 'available'" class="text-center text-h6">
               <span v-if="col.value" class="text-green">✔</span>
               <span v-else class="text-red">✘</span>
             </div>
-            <div v-if="col.name === 'deleted'" class="text-center">
+            <div v-else-if="col.name === 'working'" class="text-center text-h6">
+              <span v-if="col.value" class="text-green">✔</span>
+              <span v-else class="text-red">✘</span>
+            </div>
+            <div v-else-if="col.name === 'deleted'" class=" text-center text-h6">
               <span v-if="col.value" class="text-red">✘</span>
             </div>
-            <div v-if="col.name === 'state'" class="text-center">
+            <div v-else-if="col.name === 'state'" class="text-center text-h6">
               <q-chip small :color="stateColor(col.value)" :title="col.value"></q-chip>
             </div>
-            <span v-if="col.name !== 'deleted' && col.name !== 'available'&& col.name !== 'state'">
+            <span v-else>
           {{ col.value }}
         </span>
           </q-td>
@@ -80,9 +86,10 @@ export default {
       columns: [
         { label: 'Référence', align: 'left', field: 'ref', sortable: true, name: 'ref' },
         { label: 'Nom', align: 'left', field: 'name', sortable: true, name: 'name' },
-        { label: 'Etat', align: 'left', field: 'state', sortable: true, name: 'state' },
+        { label: 'Etat', align: 'center', field: 'state', sortable: true, name: 'state' },
+        { label: 'Fonctionnel', align: 'center', field: 'working', sortable: true, name: 'working' },
+        { label: 'En stock', align: 'center', field: 'available', sortable: true, name: 'available' },
         { label: 'Propriétaire', align: 'left', field: 'owner', sortable: true, name: 'owner' },
-        { label: 'En stock', align: 'left', field: 'available', sortable: true, name: 'available' },
         { label: 'Supprimé', align: 'left', field: 'deleted', sortable: false, name: 'deleted', format: val => val ? '✔' : '' }
       ]
     }

src/pages/TasksPage.vue

@@ -8,18 +8,19 @@
               :key="issue.id"
               @click="showHistory = true;selectedHistory = issue"
       >
+        <q-item-section avatar>
+          <q-icon name="task"
+                  :color="issue.solved_at ? 'green' : 'grey'"
+          />
+        </q-item-section>
         <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"
+            style="object-fit: cover;height:100%"
             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>
@@ -43,16 +44,23 @@
 
     <q-dialog v-model="showHistory">
       <q-card>
-        <img :src="getImageUrl(selectedHistory, selectedHistory.image_file)"
+        <q-img :src="getImageUrl(selectedHistory, selectedHistory.image_file)"
                 alt="photo"
+               fit="cover"
              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>
+            <q-btn no-caps
-            <span class="text-secondary q-mr-sm">{{ selectedHistory.item.name }}</span>
+                   icon="exit_to_app"
+                   color="secondary"
+                   class="q-mt-sm"
+                   :to="`/item/${selectedHistory.ref}`">
+              <span class="q-ml-md">{{ selectedHistory.item.type }} / </span>
+              <span class="q-mx-sm">{{ selectedHistory.item.name }}</span>
               <span v-if="selectedHistory.item.ref">#{{ selectedHistory.item.ref }}</span>
+            </q-btn>
             <q-separator class="q-my-md"/>
             <span class="text-capitalize q-mr-sm">{{ selectedHistory.user }}</span>
             <template v-if="selectedHistory.solved_at">
@@ -94,7 +102,7 @@ export default {
     rawIssues () {
       return this.$store.state.core.firebase.history.filter(item => {
         return item.type === 'issue'
-      }) || []
+      }).reverse() || []
     },
     items () {
       return this.$store.state.core.firebase.stock.filter(item => {
@@ -133,6 +141,9 @@ export default {
           this.selectedHistory = null
         })
       })
+    },
+    getImageUrl (history, image, thumb = false) {
+      return this.$pb.files.getURL(history, image, { thumb: thumb ? '300x300f' : null })
     }
   }
 }