Simplified delete

Pictalk-speech-made-easy · Jun 5, 2024 · b51ab51 · b51ab51
1 parent 09ebdc8
commit b51ab51
Showing 1 changed file with 21 additions and 11 deletions.
diff --git a/components/pictos/deleteItem.vue b/components/pictos/deleteItem.vue
@@ -11,20 +11,20 @@
       <img class="image" :src="object.image" :alt="object.meaning" width="40%" crossorigin="anonymous" style="" />
       <br />
       <br />
-      {{ $t("PleaseType1") }} <strong style="font-size:large; margin: 0 1rem;">{{ object.meaning[getUserLang]
+      {{ $t("PleaseType1") }} <strong style="font-size:large; margin: 0 1rem;">{{ name
         }}</strong> {{
           $t("PleaseType2") }}
       <b-field>
-        <b-input data-cy="delete-picto-meaning" v-model="meaningOrName" :placeholder="object.meaning[getUserLang]"
-          @keyup.native.enter="onSubmitted(meaningOrName)"></b-input>
+        <b-input data-cy="delete-picto-meaning" v-model="lowerCaseInput" :placeholder="name"
+          @keyup.native.enter="onSubmitted(lowerCaseInput)"></b-input>
       </b-field>
     </section>
     <footer class="modal-card-foot">
       <b-button class="button" type="button" @click="$parent.close()">{{
         $t("Close")
       }}</b-button>
       <b-button data-cy="delete-picto-button" class="button is-primary" :loading="loading"
-        @click="onSubmitted(meaningOrName)">{{ $t("Delete") }}</b-button>
+        @click="onSubmitted(lowerCaseInput)">{{ $t("Delete") }}</b-button>
     </footer>
   </div>
 </template>
@@ -39,20 +39,30 @@ export default {
       required: true,
     },
   },
+  computed: {
+    lowerCaseInput: {
+      get() {
+        return this.input;
+      },
+      set(value) {
+        this.input = value.trim().toLowerCase().replace(/\s/g, "-");
+      }
+    }
+  },
   data() {
     return {
-      meaningOrName: "",
+      input: "",
       loading: false,
+      name: ""
     };
   },
+  created() {
+    this.name = this.object.meaning[this.getUserLang].trim().toLowerCase().replace(/\s/g, "-");
+  },
   methods: {
-    async onSubmitted(name) {
+    async onSubmitted(input) {
       this.loading = true;
-      // We need to format name to compare it with the object name
-      // Remove trailing and leading spaces
-      name = name.trim();
-      // Remove leading < and trailing > characters
-      if (name == this.object.meaning[this.getUserLang].trim()) {
+      if (input == this.name) {
         try {
           if (this.object.collection) {
             const res = await this.$store.dispatch("removeCollection", {