From b51ab513cb373786be625d0a29fd477a494c8a4b Mon Sep 17 00:00:00 2001
From: Alexandros SIDIRAS <alexandros.sidiras@laposte.net>
Date: Wed, 5 Jun 2024 15:10:00 +0200
Subject: [PATCH] Simplified delete

---
 components/pictos/deleteItem.vue | 32 +++++++++++++++++++++-----------
 1 file changed, 21 insertions(+), 11 deletions(-)

diff --git a/components/pictos/deleteItem.vue b/components/pictos/deleteItem.vue
index c441dfda..b7b8d413 100644
--- a/components/pictos/deleteItem.vue
+++ b/components/pictos/deleteItem.vue
@@ -11,12 +11,12 @@
       <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">
@@ -24,7 +24,7 @@
         $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", {