From 0afe5780b76d53492034c7121d6eb090c3d5cfaa Mon Sep 17 00:00:00 2001
From: laurell seville <laurellseville2000@gmail.com>
Date: Mon, 11 Nov 2024 22:47:19 +0000
Subject: [PATCH] feat, allow labels to be created when search results exist

---
 resources/js/Shared/Modules/Labels.vue | 26 ++++++++++++++++++--------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/resources/js/Shared/Modules/Labels.vue b/resources/js/Shared/Modules/Labels.vue
index d07b7d4708a..537a3980948 100644
--- a/resources/js/Shared/Modules/Labels.vue
+++ b/resources/js/Shared/Modules/Labels.vue
@@ -37,6 +37,14 @@
 
       <!-- labels in vault -->
       <ul class="label-list overflow-auto bg-white dark:bg-gray-900" :class="filteredLabels.length > 0 ? 'h-40' : ''">
+        <!-- case if the label does not exist and needs to be created -->
+        <li
+          v-if="showCreateNewLabel"
+          class="cursor-pointer border-b border-gray-200 px-3 py-2 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800"
+          @click="store()">
+          {{ $t('Create new label') }} <span class="italic">"{{ form.search }}"</span>
+        </li>
+
         <li
           v-for="label in filteredLabels"
           :key="label.id"
@@ -50,14 +58,6 @@
           <CheckedIcon v-if="label.taken" />
         </li>
 
-        <!-- case if the label does not exist and needs to be created -->
-        <li
-          v-if="filteredLabels.length === 0 && form.search.length !== ''"
-          class="cursor-pointer border-b border-gray-200 px-3 py-2 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800"
-          @click="store()">
-          {{ $t('Create new label') }} <span class="italic">"{{ form.search }}"</span>
-        </li>
-
         <!-- blank state when there is no label at all -->
         <li
           v-if="filteredLabels.length === 0 && form.search.length === ''"
@@ -120,6 +120,16 @@ export default {
   },
 
   computed: {
+    showCreateNewLabel() {
+      let searchTermAlreadyAdded = false;
+      if (this.filteredLabels.length) {
+        this.filteredLabels.forEach((label) => {
+          if (label.name.toLowerCase() === this.form.search.toLowerCase()) searchTermAlreadyAdded = true;
+        });
+      }
+
+      return (!searchTermAlreadyAdded || this.filteredLabels.length === 0) && this.form.search !== '';
+    },
     filteredLabels() {
       return this.localLabelsInVault.filter((label) => {
         return label.name.toLowerCase().indexOf(this.form.search.toLowerCase()) > -1;