From b6c9bfe1f88bc26387da1edcb956b7568af28e4b Mon Sep 17 00:00:00 2001
From: JhumanJ <julien@nahum.net>
Date: Tue, 1 Nov 2022 14:43:14 +0100
Subject: [PATCH] improve tags

---
 app/Models/Forms/Form.php                            | 4 ++--
 resources/js/components/forms/components/VSelect.vue | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/Models/Forms/Form.php b/app/Models/Forms/Form.php
index d3a61d5..11b61c9 100644
--- a/app/Models/Forms/Form.php
+++ b/app/Models/Forms/Form.php
@@ -155,8 +155,8 @@ class Form extends Model
 
     public function setTagsAttribute($value)
     {
-        if ($value == null || $value == '') {
-            $value = '[]';
+        if ($value == '') {
+            $value = null;
         }
         $this->attributes['tags'] = json_encode($value);
     }
diff --git a/resources/js/components/forms/components/VSelect.vue b/resources/js/components/forms/components/VSelect.vue
index c95fba9..a93066d 100644
--- a/resources/js/components/forms/components/VSelect.vue
+++ b/resources/js/components/forms/components/VSelect.vue
@@ -61,14 +61,14 @@
               <slot name="option" :option="item" :selected="isSelected(item)" />
             </li>
           </template>
-          <p v-else-if="!loading" class="w-full text-gray-500 text-center py-2">
-            No option available.
+          <p v-else-if="!loading && !(allowCreation && searchTerm)" class="w-full text-gray-500 text-center py-2">
+            {{ (allowCreation ? 'Type something to add an option': 'No option available') }}.
           </p>
           <li v-if="allowCreation && searchTerm" role="option"
               class="text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9  cursor-pointer group hover:text-white hover:bg-nt-blue focus:outline-none focus:text-white focus:bg-nt-blue"
               @click="createOption(searchTerm)"
-            >
-              Create <b class="px-1 bg-gray-300 rounded group-hover:text-black">{{searchTerm}}</b>
+          >
+            Create <b class="px-1 bg-gray-300 rounded group-hover:text-black">{{ searchTerm }}</b>
           </li>
         </ul>
       </div>