updated deletion form

Pictalk-speech-made-easy · Jun 3, 2024 · 1dd0911 · 1dd0911
1 parent 6e38b7a
commit 1dd0911
Showing 1 changed file with 16 additions and 38 deletions.
diff --git a/components/pictos/deleteItem.vue b/components/pictos/deleteItem.vue
@@ -1,60 +1,34 @@
 <template>
   <div class="modal-card">
     <header class="modal-card-head">
-      <b-button
-        class="button"
-        type="is-danger"
-        icon-left="close"
-        @click="$parent.close()"
-      />
+      <b-button class="button" type="is-danger" icon-left="close" @click="$parent.close()" />
       <p align="center" class="modal-card-title">{{ $t("Delete") }}</p>
     </header>
     <section class="modal-card-body">
       {{ $t("DeleteItem") }}{{ object.meaning[getUserLang] }} ?
       <br />
       <br />
-      <img
-        class="image"
-        :src="object.image"
-        :alt="object.meaning"
-        width="40%"
-        crossorigin="anonymous"
-        style=""
-      />
+      <img class="image" :src="object.image" :alt="object.meaning" width="40%" crossorigin="anonymous" style="" />
       <br />
       <br />
-      <b-field
-        :label="
-          $t('PleaseType1') +
-          ' <' +
-          object.meaning[getUserLang] +
-          '> ' +
-          $t('PleaseType2')
-        "
-      >
-        <b-input
-        data-cy="delete-picto-meaning"
-          v-model="meaningOrName"
-          :placeholder="object.meaning[getUserLang]"
-          @keyup.native.enter="onSubmitted(meaningOrName)"
-        ></b-input>
+      {{ $t("PleaseType1") }} <strong style="font-size:large; margin: 0 1rem;">{{ object.meaning[getUserLang]
+        }}</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-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
-      >
+      <b-button data-cy="delete-picto-button" class="button is-primary" :loading="loading"
+        @click="onSubmitted(meaningOrName)">{{ $t("Delete") }}</b-button>
     </footer>
   </div>
 </template>
-<script >
+<script>
 import { SoundHelper } from "@/utils/sounds";
 import lang from "@/mixins/lang";
 export default {
@@ -74,7 +48,11 @@ export default {
   methods: {
     async onSubmitted(name) {
       this.loading = true;
-      if (name == this.object.meaning[this.getUserLang]) {
+      // 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()) {
         try {
           if (this.object.collection) {
             const res = await this.$store.dispatch("removeCollection", {