Extract form button

frontend/components/molecules/BaseCard.vue

@@ -12,7 +12,24 @@
     </v-container>
     <v-card-actions>
       <v-spacer />
-      <slot name="actions" />
+      <v-btn
+        class="text-capitalize"
+        text
+        color="primary"
+        data-test="cancel-button"
+        @click="cancel"
+      >
+        {{ cancelText }}
+      </v-btn>
+      <v-btn
+        class="text-none"
+        text
+        :disabled="disabled"
+        data-test="delete-button"
+        @click="agree"
+      >
+        {{ agreeText }}
+      </v-btn>
     </v-card-actions>
   </v-card>
 </template>
@@ -24,6 +41,29 @@ export default {
       type: String,
       default: '',
       required: true
+    },
+    cancelText: {
+      type: String,
+      default: '',
+      required: true
+    },
+    agreeText: {
+      type: String,
+      default: '',
+      required: true
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  methods: {
+    agree() {
+      this.$emit('agree')
+    },
+    cancel() {
+      this.$emit('cancel')
     }
   }
 }

frontend/components/organisms/MemberAdditionForm.vue

@@ -1,5 +1,12 @@
 <template>
-  <base-card title="Add Member">
+  <base-card
+    title="Add Member"
+    agree-text="Add"
+    cancel-text="Cancel"
+    :disabled="!valid"
+    @agree="create"
+    @cancel="cancel"
+  >
     <template #content>
       <v-form
         ref="form"
@@ -10,6 +17,7 @@
           :items="items"
           :loading="isLoading"
           :search-input.sync="username"
+          :rules="userRules"
           color="white"
           hide-no-data
           hide-selected
@@ -22,31 +30,12 @@
         <v-select
           v-model="role"
           :items="roles"
+          :rules="roleRules"
           label="Role"
           prepend-icon="mdi-account-card-details-outline"
         />
       </v-form>
     </template>
-    <template #actions>
-      <v-btn
-        class="text-capitalize"
-        text
-        color="primary"
-        data-test="cancel-button"
-        @click="cancel"
-      >
-        Cancel
-      </v-btn>
-      <v-btn
-        :disabled="!valid"
-        class="text-none"
-        text
-        data-test="create-button"
-        @click="create"
-      >
-        Add
-      </v-btn>
-    </template>
   </base-card>
 </template>
 
@@ -71,12 +60,18 @@ export default {
   },
   data() {
     return {
-      valid: true,
+      valid: false,
       username: '',
       role: null,
       isLoading: false,
       selectedUser: null,
-      roles: ['Admin', 'Member']
+      roles: ['Admin', 'Member'],
+      userRules: [
+        v => !!v || 'User is required'
+      ],
+      roleRules: [
+        v => !!v || 'Role is required'
+      ]
     }
   },
 

frontend/components/organisms/MemberDeletionForm.vue

@@ -1,5 +1,11 @@
 <template>
-  <base-card title="Remove Member">
+  <base-card
+    title="Remove Member"
+    agree-text="Yes, remove"
+    cancel-text="Cancel"
+    @agree="removeMember"
+    @cancel="cancel"
+  >
     <template #content>
       Are you sure you want to remove these members?
       <v-list dense>
@@ -10,25 +16,6 @@
         </v-list-item>
       </v-list>
     </template>
-    <template #actions>
-      <v-btn
-        class="text-capitalize"
-        text
-        color="primary"
-        data-test="cancel-button"
-        @click="cancel"
-      >
-        Cancel
-      </v-btn>
-      <v-btn
-        class="text-none"
-        text
-        data-test="delete-button"
-        @click="removeMember"
-      >
-        Yes, remove
-      </v-btn>
-    </template>
   </base-card>
 </template>
 

frontend/components/organisms/ProjectCreationForm.vue

@@ -1,5 +1,12 @@
 <template>
-  <base-card title="Add Project">
+  <base-card
+    title="Add Project"
+    agree-text="Create"
+    cancel-text="Cancel"
+    :disabled="!valid"
+    @agree="create"
+    @cancel="cancel"
+  >
     <template #content>
       <v-form
         ref="form"
@@ -33,26 +40,6 @@
         />
       </v-form>
     </template>
-    <template #actions>
-      <v-btn
-        class="text-capitalize"
-        text
-        color="primary"
-        data-test="cancel-button"
-        @click="cancel"
-      >
-        Cancel
-      </v-btn>
-      <v-btn
-        :disabled="!valid"
-        class="text-none"
-        text
-        data-test="create-button"
-        @click="create"
-      >
-        Create
-      </v-btn>
-    </template>
   </base-card>
 </template>
 
@@ -80,7 +67,7 @@ export default {
   },
   data() {
     return {
-      valid: true,
+      valid: false,
       name: '',
       description: '',
       projectType: null,

frontend/components/organisms/ProjectDeletionForm.vue

@@ -1,5 +1,11 @@
 <template>
-  <base-card title="Delete Project">
+  <base-card
+    title="Delete Project"
+    agree-text="Yes, delete"
+    cancel-text="Cancel"
+    @agree="deleteProject"
+    @cancel="cancel"
+  >
     <template #content>
       Are you sure you want to delete these projects?
       <v-list dense>
@@ -10,25 +16,6 @@
         </v-list-item>
       </v-list>
     </template>
-    <template #actions>
-      <v-btn
-        class="text-capitalize"
-        text
-        color="primary"
-        data-test="cancel-button"
-        @click="cancel"
-      >
-        Cancel
-      </v-btn>
-      <v-btn
-        class="text-none"
-        text
-        data-test="delete-button"
-        @click="deleteProject"
-      >
-        Yes, delete
-      </v-btn>
-    </template>
   </base-card>
 </template>