Add Long Desc filter and icon

resources/js/Pages/IkeaRoot.vue

@@ -19,6 +19,7 @@ import GuestLayout from "../Layouts/GuestLayout.vue";
 import { useForm } from "@inertiajs/inertia-vue3";
 import axios from "axios";
 import filterimg from "@/assets/eglass-filter.png";
+import searchimg from "@/assets/search-icon.svg";
 import Popper from "vue3-popper";
 
 const sdropdown = ref([
@@ -36,6 +37,7 @@ const countryHash = ref([]);
 const countryCurrency = ref({});
 const showItemFilter = ref(false);
 const showDescFilter = ref(false);
+const showDescLongFilter = ref(false);
 const showUnitsFilter = ref(false);
 const geoip = ref({});
 
@@ -535,7 +537,7 @@ watch(ccodes, (codes) => {
         </div>
         </form>
         <div class="mt-5">
-            <input placeholder="Search in Long Desc" class="mb-1 px-2 py-1 placeholder-blueGray-300 text-blueGray-600 relative bg-white bg-white rounded text-sm border border-blueGray-300 outline-none focus:outline-none focus:ring w-full" type="text" v-model="searchValue">
+            <input v-if="showDescLongFilter" placeholder="Search in Long Desc" class="mb-1 px-2 py-1 placeholder-blueGray-300 text-blueGray-600 relative bg-white bg-white rounded text-sm border border-blueGray-300 outline-none focus:outline-none focus:ring w-full" type="text" v-model="searchValue">
           <EasyTable
             class="none"
             :rows-per-page="20"
@@ -573,6 +575,16 @@ watch(ccodes, (codes) => {
                 </div>
               </div>
             </template>
+            <template #header-descLong="header">
+              <div class="filter-column">
+                <img
+                  :src="searchimg"
+                  class="filter-icon"
+                  @click.stop="showDescLongFilter = !showDescLongFilter"
+                />
+                {{ header.text }}
+              </div>
+            </template>
             <template #header-desc="header">
               <div class="filter-column">
                 <img

resources/js/assets/search-icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 50 50">
+<path d="M 21 3 C 11.621094 3 4 10.621094 4 20 C 4 29.378906 11.621094 37 21 37 C 24.710938 37 28.140625 35.804688 30.9375 33.78125 L 44.09375 46.90625 L 46.90625 44.09375 L 33.90625 31.0625 C 36.460938 28.085938 38 24.222656 38 20 C 38 10.621094 30.378906 3 21 3 Z M 21 5 C 29.296875 5 36 11.703125 36 20 C 36 28.296875 29.296875 35 21 35 C 12.703125 35 6 28.296875 6 20 C 6 11.703125 12.703125 5 21 5 Z"></path>
+</svg>