CleanUp

julix14 · Apr 28, 2024 · 243b058 · 243b058
1 parent 8d241da
commit 243b058
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 11 deletions.
diff --git a/components/multiSelect.vue b/components/multiSelect.vue
@@ -1,22 +1,24 @@
 <template>
-  <div class="flex flex-col">
+  <div class="flex flex-col w-fit">
     <p>Categories</p>
-    <div class="flex gap-x-2">
+    <div
+      class="flex gap-x-2 shadow-sm ring-1 ring-inset ring-gray-300 rounded-md border-0 bg-white px-2.5 py-1.5 focus:ring-2 focus:ring-primary-500">
       <div
-        class="flex items-center gap-x-2 bg-gray-200 p-2 rounded-md"
+        class="flex items-center gap-x-2 bg-gray-200 rounded-md"
         v-for="category in selectedCategories">
         <p>{{ category.name }}</p>
         <UIcon
           name="i-heroicons-x-mark"
           @click="removeCategory(category)" />
       </div>
       <input
+        id="search"
         type="text"
         v-model="search"
         @focus="showOptions = true"
-        @input="filterCategories"
         placeholder="Search categories" />
     </div>
+
     <select
       multiple
       v-if="showOptions">
@@ -40,9 +42,17 @@
   import { useCollection } from "vuefire";
   import { collection } from "firebase/firestore";
   import { v4 as uuidv4 } from "uuid";
-
   const emits = defineEmits(["category-selected", "category-removed"]);
 
+  function handleOutsideClick(event) {
+    const inputElement = event.target.closest('input[id="search"]');
+    const optionElements = event.target.closest("select");
+    if (!inputElement && !optionElements) {
+      showOptions.value = false;
+    }
+  }
+  addEventListener("click", handleOutsideClick);
+
   const { firestore } = useFirebaseClient();
   const categories = useCollection(
     collection(firestore, "categories").withConverter({
@@ -95,6 +105,9 @@
   }
 
   function createCategory() {
+    if (search.value.trim() === "") {
+      return;
+    }
     const newCategory = {
       id: uuidv4(),
       name: capitalizeFirstLetter(search.value.trim()),

diff --git a/pages/add-attraction.vue b/pages/add-attraction.vue
@@ -1,16 +1,16 @@
 <template>
-  <div>
+  <div class="m-2">
     <p class="font-bold text-xl">Add Attraction</p>
 
     <form @submit.prevent="addAttraction">
       <div class="flex flex-col gap-y-2 mb-2">
-        <div>
+        <div class="flex gap-x-2">
           <p>Is it in Berlin?</p>
-          <UToggle v-model="isBerlin" />
+          <UCheckbox v-model="isBerlin" />
         </div>
-        <div>
+        <div class="flex gap-x-2">
           <p>Is it regionally?</p>
-          <UToggle v-model="isRegional" />
+          <UCheckbox v-model="isRegional" />
         </div>
         <div>
           <p>Name</p>
@@ -97,7 +97,11 @@
             :opening-hours="openingHours.sunday" />
         </div>
       </div>
-      <UButton type="submit">Save</UButton>
+      <UButton
+        type="submit"
+        class="m-2"
+        >Save</UButton
+      >
     </form>
   </div>
 </template>