Add Confirmation Dialog (#155)

src/App.vue

@@ -12,6 +12,7 @@
     >
       {{ snackbar.text }}
     </v-snackbar>
+    <DialogComponent />
   </v-app>
 </template>
 
@@ -20,6 +21,7 @@ import { invoke } from "@tauri-apps/api/core";
 import { listen, UnlistenFn } from "@tauri-apps/api/event";
 import { mapState } from "pinia";
 import { defineComponent, provide } from "vue";
+import DialogComponent from "./components/DialogComponent.vue";
 import SidebarComponent from "./components/SidebarComponent.vue";
 import TopbarComponent from "./components/TopbarComponent.vue";
 import { useAppStore } from "./stores/app";
@@ -31,6 +33,7 @@ export default defineComponent({
   components: {
     SidebarComponent,
     TopbarComponent,
+    DialogComponent
   },
   data() {
     return {

src/components/DialogComponent.vue

@@ -0,0 +1,15 @@
+<template>
+  <ConfirmationDialog />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import ConfirmationDialog from './Dialogs/ConfirmationDialog.vue';
+
+export default defineComponent({
+    name: 'DialogComponent',
+    components: {
+        ConfirmationDialog
+    }
+})
+</script>

src/components/Dialogs/ConfirmationDialog.vue

@@ -0,0 +1,51 @@
+<template>
+  <v-dialog
+    v-model="isShowing"
+    persistent
+  >
+    <v-card>
+      <v-card-title class="headline">
+        {{ confirmationDialog.title }}
+      </v-card-title>
+      <v-card-text>{{ confirmationDialog.message }}</v-card-text>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn
+          rounded
+          @click="isShowing = false"
+        >
+          Cancel
+        </v-btn>
+        <v-btn
+          rounded
+          @click="confirmationDialog.onConfirm"
+        >
+          Confirm
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useDialogStore } from '../../stores/dialogs';
+import { mapState } from 'pinia';
+
+export default defineComponent({
+    name: 'ConfirmationDialog',
+    computed: {
+        isShowing: {
+            get() {
+                return this.confirmationDialog.isOpen;
+            },
+            set(value: boolean) {
+                if (value === false) {
+                useDialogStore().closeConfirmationDialog();
+                }
+            }
+        },
+        ...mapState(useDialogStore, ["confirmationDialog"])
+    }
+})
+</script>

src/components/SidebarComponent.vue

@@ -36,36 +36,10 @@
         :subtitle="appVersion"
         append-icon="mdi-power"
         append-color="red"
-        @append-click="showExitDialog = true"
+        @append-click="confirmExit"
       />
     </v-list>
   </v-navigation-drawer>
-  <v-dialog
-    v-model="showExitDialog"
-    persistent
-  >
-    <v-card>
-      <v-card-title class="headline">
-        Exit Application
-      </v-card-title>
-      <v-card-text>Are you sure you want to exit the application?</v-card-text>
-      <v-card-actions>
-        <v-spacer />
-        <v-btn
-          rounded
-          @click="showExitDialog = false"
-        >
-          Cancel
-        </v-btn>
-        <v-btn
-          rounded
-          @click="exit(0)"
-        >
-          Exit
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
 </template>
 
 <script lang="ts">
@@ -76,6 +50,7 @@ import { defineComponent } from "vue";
 import { PrependVariant } from "../enums/prependVariant";
 import { useAppStore } from "../stores/app";
 import SidebarItem from "./Sidebar/SidebarItem.vue";
+import { useDialogStore } from "../stores/dialogs";
 
 export default defineComponent({
   name: "SidebarComponent",
@@ -122,7 +97,15 @@ export default defineComponent({
         console.error(e);
       }
     },
-    exit
+    confirmExit() {
+      useDialogStore().openConfirmationDialog({
+        title: "Exit",
+        message: "Are you sure you want to exit?",
+        onConfirm: () => {
+          exit();
+        },
+      });
+    }
   }
 });
 </script>

src/stores/app.ts

@@ -3,8 +3,17 @@ import { defineStore } from "pinia";
 import { IGitProject } from "../types/gitProject";
 import { DEFAULT_USER } from "../types/user";
 
+interface IAppState {
+    title: string;
+    user: typeof DEFAULT_USER;
+    projects: IGitProject[];
+    isNavbarOpen: boolean;
+    selectedProject: IGitProject | null;
+    appVersion: string;
+}
+
 export const useAppStore = defineStore('app', {
-    state: () => (
+    state: (): IAppState => (
         {
             title: "BranchWise",
             user: DEFAULT_USER,

src/stores/dialogs.ts

@@ -0,0 +1,33 @@
+import { defineStore } from "pinia";
+
+interface IDialogState {
+    confirmationDialog: {
+        isOpen: boolean;
+        title: string;
+        message: string;
+        onConfirm: () => void;
+    }
+}
+
+export const useDialogStore = defineStore('dialog', {
+    state: (): IDialogState => (
+        {
+            confirmationDialog: {
+                isOpen: false,
+                title: "",
+                message: "",
+                onConfirm: () => { }
+            }
+        }),
+    actions: {
+        openConfirmationDialog({title, message, onConfirm}: {title: string, message: string, onConfirm: () => void}) {
+            this.confirmationDialog.isOpen = true;
+            this.confirmationDialog.title = title;
+            this.confirmationDialog.message = message;
+            this.confirmationDialog.onConfirm = onConfirm;
+        },
+        closeConfirmationDialog() {
+            this.confirmationDialog.isOpen = false;
+        }
+    }
+});