Modify delete card to be like on figma

wbstack · Apr 15, 2024 · 0e1f271 · 0e1f271
1 parent e59fc11
commit 0e1f271
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 34 deletions.
diff --git a/src/components/Pages/ManageWiki/Cards/ConfirmDelete.vue b/src/components/Pages/ManageWiki/Cards/ConfirmDelete.vue
@@ -8,41 +8,16 @@
         Before you delete your wikibase instance, <br/>please let us know the reason for your deletion.<br/>
         Please select all that apply. </v-card-text>
       <v-card-text>
-        <v-checkbox
-          class="ma-0"
-          id="testing"
-          value="testing"
-          v-model="checkedNames"
-          @click="deletion_reason='Was only used for testing'"
-          label="Was only used for testing"/>
-        <v-checkbox
-          class="ma-0"
-          id="lackingFunctionality"
-          value="lackingFunctionality"
-          v-model="checkedNames"
-          @click="deletion_reason='Lacking essential functionality'"
-          label="Lacking essential functionality" />
-        <v-checkbox
-          class="ma-0"
-          id="tooComplex"
-          value="tooComplex"
-          v-model="checkedNames"
-          @click="deletion_reason='Too complex to work with'"
-          label="Too complex to work with" />
+        <v-checkbox class="ma-0" label="Was only used for Testing" @click="deletion_reason='Was only used for testing'"/>
+        <v-checkbox class="ma-0" label="Lacking essential functionality" @click="deletion_reason='Lacking essential functionality'"/>
+        <v-checkbox class="ma-0" label="Too complex to work with" @click="deletion_reason='Too complex to work with'"/>
         <div>
-          <v-checkbox
-            class="ma-0"
-            id="otherReason"
-            value="otherReason"
-            v-model="checkedNames"
-            @click="deletion_reason=''"
-            label="Other reasons (please specify)" />
+          <v-checkbox class="ma-0" label="Other reasons (plese specify)" @click="deletion_reason='Other Reason'"/>
           <p class="ma-0 pa-0 black--text">Please elaborate:</p>
           <v-text-field
             class="ma-0 pa-0"
             variant="outlined"
-            hide-details
-            single-line
+            v-model="inputReason"
             placeholder="e.g. ran out of space to create new wiki"
           ></v-text-field>
         </div>
@@ -64,14 +39,18 @@ export default {
   data () {
     return {
       deletion_reason: 'false',
-      open_dialog: true
+      open_dialog: true,
+      inputReason: ''
     }
   },
   methods: {
     doDelete () {
       const wiki = this.wikiId
-      const deletionReason = this.deletion_reason
+      let deletionReason = this.deletion_reason
 
+      if (deletionReason === 'Other Reason') {
+        deletionReason = this.inputReason
+      }
       this.$store
         .dispatch('deleteWiki', { wiki, deletionReason })
         .then(() => this.$router.push('/dashboard'))

diff --git a/src/components/Pages/ManageWiki/Cards/Delete.vue b/src/components/Pages/ManageWiki/Cards/Delete.vue
@@ -1,7 +1,7 @@
 <template>
   <v-card color="#fad1d0">
-    <v-card-title>Delete Site</v-card-title>
-    <v-card-text>
+    <v-card-title>Delete Wikibase Instance</v-card-title>
+    <v-card-text class="black--text">
       Selecting Confirm Deletion will permanently delete the selected Wikibase instance. All data associated <br/>
       with this instance will be purged permanently in 30 days. The domain will <strong>not</strong> be available for reuse.
     </v-card-text>