cat list: add pdf build progress bars

cateditor/src/components/CatalogList.vue

@@ -54,6 +54,9 @@
                       <td class="px-2 py-0">{{ cats.item.seasonCode }}</td>
                       <td class="px-2 py-0">{{ cats.item.name }}</td>
                       <td class="px-2 py-0">{{ cats.item.updatedPretty }}</td>
+                      <td class="px-2 py-0">
+                        <PDFProgress :percentDone="cats.item.build_progress" />
+                      </td>
                     </tr>
                   </template>
 
@@ -106,6 +109,9 @@
                       <td class="px-2 py-0">{{ cats.item.ownerName }}</td>
                       <td class="px-2 py-0">{{ cats.item.name }}</td>
                       <td class="px-2 py-0">{{ cats.item.updatedPretty }}</td>
+                      <td class="px-2 py-0">
+                        <PDFProgress :percentDone="cats.item.build_progress" />
+                      </td>
                     </tr>
                   </template>
 
@@ -180,6 +186,12 @@
               <td>
                 <span class="group"><v-icon color="green">monetization_on</v-icon></span></td>
             </tr>
+            <tr v-if="selectedCatalog.build_progress < 100">
+              <td class="grey--text">PDF Build</td>
+              <td>
+                <PDFProgress :percentDone="selectedCatalog.build_progress" />
+              </td>
+            </tr>
           </table>
 
           <v-divider></v-divider>
@@ -199,9 +211,12 @@
 </template>
 
 <script>
+import { mapActions } from 'vuex'
+import PDFProgress from './PDFProgress'
 
 export default {
   components: {
+    PDFProgress,
   },
   data: () => ({
     activeTab: null,
@@ -231,6 +246,12 @@ export default {
         value: 'updated',
         class: 'px-2 py-0',
       },
+      {
+        text: '',
+        value: 'build_progress',
+        class: 'px-2 py-0',
+        width: '50px',
+      },
     ],
     pubHeaders: [
       {
@@ -267,7 +288,14 @@ export default {
         width: '20%',
         class: 'px-2 py-0',
       },
+      {
+        text: '',
+        value: 'build_progress',
+        class: 'px-2 py-0',
+        width: '50px',
+      },
     ],
+    interval: null,
   }),
   computed: {
     myCatalogs() {
@@ -287,13 +315,18 @@ export default {
     },
   },
   methods: {
+    ...mapActions([
+      'setSelectedCatalog',
+      'loadMyCatalogs',
+      'loadPublicCatalogs',
+    ]),
     selectCatalog: function(id) {
-      this.$store.dispatch('setSelectedCatalog', id)
-    }
+      this.setSelectedCatalog(id)
+    },
   },
   mounted: function() {
-    this.$store.dispatch('loadMyCatalogs')
-    this.$store.dispatch('loadPublicCatalogs')
+    this.loadMyCatalogs()
+    this.loadPublicCatalogs()
   }
 }
 </script>

cateditor/src/components/PDFProgress.vue

@@ -0,0 +1,21 @@
+<template>
+  <v-tooltip top>
+    <template v-slot:activator="{ on }">
+      <v-progress-linear
+        v-if="percentDone < 100"
+        v-model="percentDone"
+        v-on="on"
+        color="accent"
+      ></v-progress-linear>
+    </template>
+    <span>{{ percentDone }}% complete</span>
+  </v-tooltip>
+</template>
+
+<script>
+export default {
+  props: {
+    percentDone: Number,
+  },
+}
+</script>