Extract dialog as BaseModal component

frontend/components/containers/MemberAdditionButton.vue

@@ -1,39 +1,33 @@
 <template>
-  <v-dialog
-    v-model="dialog"
-    width="800px"
+  <base-modal
+    text="Add Member"
+    :is-create="true"
   >
-    <template v-slot:activator="{ on }">
-      <v-btn
-        class="mb-2 text-capitalize"
-        color="primary"
-        @click="dialog=true"
-      >
-        Add Member
-      </v-btn>
+    <template v-slot="slotProps">
+      <member-addition-form
+        :add-member="addMember"
+        :items="items"
+        @close="slotProps.close"
+        @search-user="searchUser"
+      />
     </template>
-    <member-addition-form
-      :add-member="addMember"
-      :items="items"
-      @close="dialog=false"
-      @search-user="searchUser"
-    />
-  </v-dialog>
+  </base-modal>
 </template>
 
 <script>
 import { mapActions } from 'vuex'
+import BaseModal from '@/components/molecules/BaseModal'
 import MemberAdditionForm from '@/components/organisms/MemberAdditionForm'
 import UserService from '@/services/user.service'
 
 export default {
   components: {
+    BaseModal,
     MemberAdditionForm
   },
 
   data() {
     return {
-      dialog: false,
       items: []
     }
   },

frontend/components/containers/MemberDeletionButton.vue

@@ -1,41 +1,29 @@
 <template>
-  <v-dialog
-    v-model="dialog"
-    width="800px"
+  <base-modal
+    text="Remove"
+    :disabled="!isMemberSelected"
   >
-    <template v-slot:activator="{ on }">
-      <v-btn
-        class="mb-2 ml-2 text-capitalize"
-        outlined
-        :disabled="!isMemberSelected"
-        @click="dialog=true"
-      >
-        Remove
-      </v-btn>
+    <template v-slot="slotProps">
+      <member-deletion-form
+        :selected="selected"
+        @remove="handleRemoveMember(); slotProps.close()"
+        @close="slotProps.close"
+      />
     </template>
-    <member-deletion-form
-      :selected="selected"
-      @remove="handleRemoveMember"
-      @close="dialog=false"
-    />
-  </v-dialog>
+  </base-modal>
 </template>
 
 <script>
 import { mapState, mapGetters, mapActions } from 'vuex'
+import BaseModal from '@/components/molecules/BaseModal'
 import MemberDeletionForm from '@/components/organisms/MemberDeletionForm'
 
 export default {
   components: {
+    BaseModal,
     MemberDeletionForm
   },
 
-  data() {
-    return {
-      dialog: false
-    }
-  },
-
   computed: {
     ...mapState('members', ['selected']),
     ...mapGetters('members', ['isMemberSelected'])
@@ -47,7 +35,6 @@ export default {
     handleRemoveMember() {
       const projectId = this.$route.params.id
       this.removeMember(projectId)
-      this.dialog = false
     }
   }
 }

frontend/components/containers/ProjectCreationButton.vue

@@ -1,39 +1,28 @@
 <template>
-  <v-dialog
-    v-model="dialog"
-    width="800px"
+  <base-modal
+    text="Add Project"
+    :is-create="true"
   >
-    <template v-slot:activator="{ on }">
-      <v-btn
-        class="mb-2 text-capitalize"
-        color="primary"
-        @click="dialog=true"
-      >
-        Add Project
-      </v-btn>
+    <template v-slot="slotProps">
+      <project-creation-form
+        :create-project="createProject"
+        @close="slotProps.close"
+      />
     </template>
-    <project-creation-form
-      :create-project="createProject"
-      @close="dialog=false"
-    />
-  </v-dialog>
+  </base-modal>
 </template>
 
 <script>
 import { mapActions } from 'vuex'
+import BaseModal from '@/components/molecules/BaseModal'
 import ProjectCreationForm from '@/components/organisms/ProjectCreationForm'
 
 export default {
   components: {
+    BaseModal,
     ProjectCreationForm
   },
 
-  data() {
-    return {
-      dialog: false
-    }
-  },
-
   methods: {
     ...mapActions('projects', ['createProject'])
   }

frontend/components/containers/ProjectDeletionButton.vue

@@ -1,41 +1,29 @@
 <template>
-  <v-dialog
-    v-model="dialog"
-    width="800px"
+  <base-modal
+    text="Delete"
+    :disabled="!isProjectSelected"
   >
-    <template v-slot:activator="{ on }">
-      <v-btn
-        class="mb-2 ml-2 text-capitalize"
-        outlined
-        :disabled="!isProjectSelected"
-        @click="dialog=true"
-      >
-        Delete
-      </v-btn>
+    <template v-slot="slotProps">
+      <project-deletion-form
+        :selected="selected"
+        @delete="handleDeleteProject(); slotProps.close()"
+        @close="slotProps.close"
+      />
     </template>
-    <project-deletion-form
-      :selected="selected"
-      @delete="handleDeleteProject"
-      @close="dialog=false"
-    />
-  </v-dialog>
+  </base-modal>
 </template>
 
 <script>
 import { mapState, mapGetters } from 'vuex'
+import BaseModal from '@/components/molecules/BaseModal'
 import ProjectDeletionForm from '@/components/organisms/ProjectDeletionForm'
 
 export default {
   components: {
+    BaseModal,
     ProjectDeletionForm
   },
 
-  data() {
-    return {
-      dialog: false
-    }
-  },
-
   computed: {
     ...mapState('projects', ['selected']),
     ...mapGetters('projects', ['isProjectSelected'])
@@ -44,7 +32,6 @@ export default {
   methods: {
     handleDeleteProject() {
       this.$store.dispatch('projects/deleteProject')
-      this.dialog = false
     }
   }
 }

frontend/components/molecules/BaseModal.vue

@@ -0,0 +1,64 @@
+<template>
+  <v-dialog
+    v-model="dialog"
+    width="800px"
+  >
+    <template v-slot:activator="{ on }">
+      <v-btn
+        class="mb-2 text-capitalize"
+        :class="classObject"
+        :color="color"
+        :outlined="isOutlined"
+        :disabled="disabled"
+        @click="dialog=true"
+      >
+        {{ text }}
+      </v-btn>
+    </template>
+    <slot :close="close" />
+  </v-dialog>
+</template>
+
+<script>
+export default {
+  props: {
+    text: {
+      type: String,
+      default: '',
+      required: true
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    isCreate: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  data() {
+    return {
+      dialog: false
+    }
+  },
+
+  computed: {
+    classObject() {
+      return this.isCreate ? [] : ['ml-2']
+    },
+    color() {
+      return this.isCreate ? 'primary' : ''
+    },
+    isOutlined() {
+      return !this.isCreate
+    }
+  },
+
+  methods: {
+    close() {
+      this.dialog = false
+    }
+  }
+}
+</script>