Merge remote-tracking branch 'origin/master' into todo/subprojects

src/App.vue

@@ -25,15 +25,17 @@
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
+import { EchoError } from "echofetch";
+import { CustomErrorOptions } from "@/api/error/types/CustomErrorOptions";
+import { Optional } from "@/types/Optional";
+import { ModalHandler } from "@/util/modal/ModalHandler";
 import Navigation from "@/components/layout/Navigation.vue";
 import Footer from "@/components/layout/Footer.vue";
 import ErrorPlaceholder from "@/components/error/ErrorPlaceholder.vue";
 import ErrorBus from "@/api/error/ErrorBus";
-import { EchoError } from "echofetch";
-import { CustomErrorOptions } from "@/api/error/types/CustomErrorOptions";
-import { Optional } from "@/types/Optional";
 import ModalPlaceholder from "@/components/layout/placeholders/ModalPlaceholder.vue";
 import SnackbarPlaceholder from "@/components/layout/placeholders/SnackbarPlaceholder.vue";
+import SearchModal from "@/components/search/SearchModal.vue";
 
 @Component({
     components: {
@@ -69,6 +71,19 @@ export default class App extends Vue {
         // Fetch dark theme preferences.
         this.$store.dispatch("theme/fetchDark");
 
+        // Listen to the CTRL + K keyboard event and open up the search modal.
+        document.addEventListener("keydown", event => {
+            // Encoding for CTRL + K
+            if (event.ctrlKey && event.code === "KeyK") {
+                ModalHandler.open({
+                    component: SearchModal
+                });
+
+                // Prevent any default browser behavior linked to this shortcut.
+                event.preventDefault();
+            }
+        });
+
         // Create a listener that will show an error when it is spawned.
         ErrorBus.$on("error", (error: EchoError, options: CustomErrorOptions) => {
             if (options.displayFullPage) {
@@ -80,6 +95,13 @@ export default class App extends Vue {
         this.$router.afterEach(() => {
             this.error = null;
         });
+
+        // Clear the current project when no longer on the project page.
+        this.$router.afterEach(to => {
+            if (to.name !== "Project") {
+                this.$store.dispatch("project/setCurrentProject", null);
+            }
+        });
     }
 }
 </script>

src/components/projects/cards/ProjectCard.vue

@@ -7,7 +7,11 @@
 
         <!-- Data -->
         <v-card v-else-if="project" class="fill-height d-flex flex-column" :to="`/projects/${project.id}`">
-            <v-img src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg" height="200px" />
+            <v-img :src="project.image" height="200px">
+                <template v-slot:placeholder>
+                    <img class="project__image" src="@/assets/img/logo--primary.svg" :alt="project.name" />
+                </template>
+            </v-img>
 
             <v-card-title>
                 {{ project.name }}
@@ -49,3 +53,17 @@ export default class ProjectCard extends Vue {
     project: Project;
 }
 </script>
+
+<style lang="scss" scoped>
+.project {
+    &__image {
+        height: 100%;
+        width: 100%;
+        background-color: rgba(255, 255, 255, 0.05);
+
+        path {
+            fill: var(--v-primary-base);
+        }
+    }
+}
+</style>

src/components/projects/items/context/Item.vue

@@ -9,7 +9,7 @@
 import { Component, Prop, Vue } from "vue-property-decorator";
 
 @Component
-export default class VItem extends Vue {
+export default class Item extends Vue {
     /**
      * If the item should change color when hovering.
      */

src/components/projects/tables/TagsTable.vue

@@ -9,14 +9,14 @@
             <!-- Actions -->
             <template v-slot:item.actions="{ item }">
                 <!-- Modify -->
-                <v-btn color="info" icon @click="modifyTag(item)">
+                <v-btn color="info" text @click="modifyTag(item)">
                     <v-icon>
                         mdi-pencil
                     </v-icon>
                 </v-btn>
 
                 <!-- Delete -->
-                <v-btn color="error" icon @click="deleteTag(item)">
+                <v-btn color="error" text @click="deleteTag(item)">
                     <v-icon>
                         mdi-delete
                     </v-icon>
@@ -77,7 +77,13 @@ export default class TagsTable extends Vue {
     tableHeaders = [
         {
             text: "Tag",
-            value: "tag"
+            value: "tag",
+            width: "0"
+        },
+
+        {
+            text: "Description",
+            value: "description"
         },
 
         {