feat(gui): add confirm dialog for project operations

Added confirm dialog for project delete,start,restart and stop operations

closes #255

Signed-off-by: Pranav C Balan <pranavxc@gmail.com>

packages/nc-gui/pages/projects/index.vue

@@ -36,7 +36,8 @@
                   @click="projectsLoad"
                   v-bind:tooltip="$t('home.reload_projects_tooltip')"
                 >
-                  mdi-refresh </x-icon
+                  mdi-refresh
+                </x-icon
                 >&nbsp;
                 <!--                </x-btn>-->
               </h1>
@@ -132,7 +133,8 @@
                       <v-tooltip right>
                         <template v-slot:activator="{ on }">
                           <v-icon v-on="on" x-small color="grey" class="ml-4"
-                            >mdi-information-outline</v-icon
+                          >mdi-information-outline
+                          </v-icon
                           >
                         </template>
                         <!-- Create a new project -->
@@ -163,7 +165,8 @@
                       <v-tooltip right>
                         <template v-slot:activator="{ on }">
                           <v-icon v-on="on" x-small color="grey" class="ml-4"
-                            >mdi-information-outline</v-icon
+                          >mdi-information-outline
+                          </v-icon
                           >
                         </template>
                         <!-- Supports MySQL, PostgreSQL, SQL Server & SQLite -->
@@ -313,7 +316,8 @@
                         <v-menu offset-y>
                           <template v-slot:activator="{ on }">
                             <x-icon v-on="on" color="grey"
-                              >mdi-dots-vertical</x-icon
+                            >mdi-dots-vertical
+                            </x-icon
                             >
                           </template>
                           <v-list dense>
@@ -435,7 +439,8 @@
                   @click="onCreateProject"
                 >
                   <v-icon color="white" class="blink_me">
-                    mdi-lightbulb-on </v-icon
+                    mdi-lightbulb-on
+                  </v-icon
                   >&nbsp;
                   <!-- New Project -->
                   {{ $t('home.create_new_project_button.text') }}
@@ -507,13 +512,15 @@
         >
           <v-list-item-icon>
             <v-icon class="ml-2" :color="textColors[3]"
-              >mdi-calendar-month</v-icon
+            >mdi-calendar-month
+            </v-icon
             >
           </v-list-item-icon>
           <!-- Book a Free DEMO -->
           <v-list-item-title>{{
               $t('home.show_community_message_2')
-          }}</v-list-item-title>
+            }}
+          </v-list-item-title>
         </v-list-item>
         <v-divider></v-divider>
         <v-list-item dense href="https://discord.gg/5RgZmkW" target="_blank">
@@ -523,7 +530,8 @@
           <!-- Get your questions answered -->
           <v-list-item-title>{{
               $t('home.show_community_message_3')
-          }}</v-list-item-title>
+            }}
+          </v-list-item-title>
         </v-list-item>
         <v-divider></v-divider>
         <v-list-item dense href="https://twitter.com/NocoDB" target="_blank">
@@ -533,7 +541,8 @@
           <!-- Follow NocoDB -->
           <v-list-item-title>{{
               $t('home.show_community_message_4')
-          }}</v-list-item-title>
+            }}
+          </v-list-item-title>
         </v-list-item>
       </v-list>
     </div>
@@ -664,6 +673,14 @@
   },
   methods: {
     async stopProject(project) {
+      this.dialogShow = true;
+      this.confirmMessage =
+        'Do you want to stop the project?';
+      this.confirmAction = async act => {
+        if (act === 'hideDialog') {
+          this.dialogShow = false;
+        } else {
+
           this.$set(project, 'status', 'stopping');
           const project_id = project.id;
           this.statusUpdatingProjectId = project_id;
@@ -683,8 +700,19 @@
           }
           await this.projectsLoad();
           this.projectStatusUpdating = false;
+          this.dialogShow = false;
+        }
+      }
     },
     async startProject(project) {
+      this.dialogShow = true;
+      this.confirmMessage =
+        'Do you want to start the project?';
+      this.confirmAction = async act => {
+        if (act === 'hideDialog') {
+          this.dialogShow = false;
+        } else {
+
           this.$set(project, 'status', 'starting');
           const project_id = project.id;
           this.statusUpdatingProjectId = project_id;
@@ -704,8 +732,18 @@
           }
           await this.projectsLoad();
           this.projectStatusUpdating = false;
+          this.dialogShow = false;
+        }
+      }
     },
     async restartProject(project) {
+      this.dialogShow = true;
+      this.confirmMessage =
+        'Do you want to restart the project?';
+      this.confirmAction = async act => {
+        if (act === 'hideDialog') {
+          this.dialogShow = false;
+        } else {
           this.$set(project, 'status', 'restarting');
           const project_id = project.id;
           this.statusUpdatingProjectId = project_id;
@@ -725,8 +763,18 @@
           }
           await this.projectsLoad();
           this.projectStatusUpdating = false;
+          this.dialogShow = false
+        }
+      }
     },
     async deleteProject(project) {
+      this.dialogShow = true;
+      this.confirmMessage =
+        'Do you want to delete the project?';
+      this.confirmAction = async act => {
+        if (act === 'hideDialog') {
+          this.dialogShow = false;
+        } else {
           this.$set(project, 'status', 'deleting');
           const project_id = project.id;
           this.statusUpdatingProjectId = project_id;
@@ -746,6 +794,10 @@
           }
           await this.projectsLoad();
           this.projectStatusUpdating = false;
+
+          this.dialogShow = false;
+        }
+      }
     },
     onCreateProject(xcdb) {
       if (xcdb === 'xcdb') {
@@ -754,7 +806,8 @@
         this.$router.push('/project/0');
       }
     },
-      async importProjectFromJSON() {},
+    async importProjectFromJSON() {
+    },
     onTourCompletion() {
       // this.$store.commit('windows/MutShowTour', {page: 'home'})
     },
@@ -820,13 +873,6 @@
         });
       }
     },
-      async projectRemove(project) {
-        this._project = project;
-        this.deleteBtnClicked = true;
-        this.dialog.title =
-          'Project will drop all databases and remove all migrations files in your local directory. Click submit to delete';
-        this.dialog.show = true;
-      },
     async projectEdit(project) {
       console.log('projectEdit');
       this.$router.push({
@@ -836,18 +882,7 @@
     async projectOpenFolder(project) {
       console.log('projectEdit');
     },
-      async _projectRemove(action) {
+
-        if (action === 'hideDialog') {
-          this.deleteBtnClicked = false;
-          this.dialog.show = false;
-        } else {
-          this.deleteBtnClicked = true;
-          await this.sqlMgr.projectRemove(this._project);
-          this.deleteBtnClicked = false;
-          this.projectsLoad();
-          this.dialog.show = false;
-        }
-      },
 
     async exportMetaZip(project_id) {
       this.dialogShow = true;