Add control to filter out archived projects in ProjectList

lib/www/client/source/src/views/ProjectList.vue

@@ -1,14 +1,25 @@
 <template>
   <v-container fluid>
+
     <v-data-table
     :headers="headers"
-    :items="items"
+    :items="displayItems"
     :options.sync="options"
     :loading="loading"
     >
 
       <template v-slot:item.pid="{item, value}">
-        <a :href="`/projects/${item.pid}`">{{value}}</a>
+        <template v-if="item.archived">
+          <a class="secondary--text" title="This project has been archived" :href="`/projects/${item.pid}`">{{value}}</a>
+          <v-icon
+            class="ml-1 secondary--text"
+            small
+             title="This project has been archived"
+          >mdi-archive-outline</v-icon>
+        </template>
+        <template v-else>
+          <a :href="`/projects/${item.pid}`">{{value}}</a>
+        </template>
       </template>
 
       <template v-slot:item.shots="{item}">
@@ -27,6 +38,19 @@
         />
       </template>
 
+      <template v-slot:footer.prepend>
+        <v-checkbox
+          class="mr-3"
+          v-model="showArchived"
+          dense
+          hide-details
+          title="Projects that have been marked as archived by an administrator no longer receive updates from external sources, such as the project's file repository or the navigation system, but they may still be interacted with via Dougal, including adding or editing log comments."
+        >
+          <template v-slot:label>
+            <span class="subtitle-2">Show archived projects</span>
+          </template>
+        </v-checkbox>
+      </template>
 
     </v-data-table>
 
@@ -79,11 +103,20 @@ export default {
       ],
       items: [],
       options: {},
+
+      showArchived: true,
+
     }
   },
 
   computed: {
     ...mapGetters(['loading', 'serverEvent'])
+    displayItems () {
+      return this.showArchived
+        ? this.items
+        : this.items.filter(i => !i.archived);
+    },
+
   },
 
   watch: {