From f493d644a560cf083c67d2ebea900ad26a69f520 Mon Sep 17 00:00:00 2001
From: Jaroslav Drzik <jaro@ttx.sk>
Date: Wed, 27 Mar 2024 06:33:06 +0100
Subject: [PATCH] Search with image and dark theme

---
 resources/js/Pages/IkeaRoot.vue | 331 ++++++++++++++------------------
 1 file changed, 141 insertions(+), 190 deletions(-)

diff --git a/resources/js/Pages/IkeaRoot.vue b/resources/js/Pages/IkeaRoot.vue
index 22e4df2..032645f 100644
--- a/resources/js/Pages/IkeaRoot.vue
+++ b/resources/js/Pages/IkeaRoot.vue
@@ -20,6 +20,7 @@ import axios from "axios";
 import filterimg from "@/assets/eglass-filter.png";
 import searchimg from "@/assets/search-icon.svg";
 import { settingsStore } from '../settingsStore.js';
+import { FwbInput } from 'flowbite-vue';
 
 
 const screenWidth = ref(screen.width)
@@ -438,206 +439,156 @@ const selectedRowClassNameFunction = (item) => {
 
 </script>
 <template>
-  <GuestLayout>
+    <GuestLayout>
 
-    <div class="flex flex-wrap gap-2 justify-center align-middle">
+        <div class="flex flex-wrap gap-2 justify-center align-middle">
 
-            <div id="popup-modal" tabindex="-1" :class="'hidden'" class="absolute inset-y-1/3 left-1/3 sm:inset-10 sm:left-10 z-50 justify-center items-center w-full  max-h-full">
-    <div class="relative p-4 w-full max-w-md max-h-full">
-        <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
-            <button @click="hover=true" type="button" class="absolute top-3 end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="popup-modal">
-                <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
-                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
-                </svg>
-                <span class="sr-only">Close modal</span>
-            </button>
-            <div class="p-4 md:p-5 text-center">
+            <div id="popup-modal" tabindex="-1" :class="'hidden'"
+                class="absolute inset-y-1/3 left-1/3 sm:inset-10 sm:left-10 z-50 justify-center items-center w-full  max-h-full">
+                <div class="relative p-4 w-full max-w-md max-h-full">
+                    <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
+                        <button @click="hover=true" type="button"
+                            class="absolute top-3 end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
+                            data-modal-hide="popup-modal">
+                            <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+                                viewBox="0 0 14 14">
+                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                                    stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
+                            </svg>
+                            <span class="sr-only">Close modal</span>
+                        </button>
+                        <div class="p-4 md:p-5 text-center">
 
 
-                <img :src="hoverImage"/>
-                <!-- <button data-modal-hide="popup-modal" type="button" class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center">
+                            <img :src="hoverImage" />
+                            <!-- <button data-modal-hide="popup-modal" type="button" class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center">
                     Yes, I'm sure
                 </button> -->
-                <button @click="hover=true" data-modal-hide="popup-modal" type="button" class="py-2.5 px-5 mt-2 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">Close</button>
-            </div>
-        </div>
-    </div>
-
-        </div>
-      <div class="flex flex-col start-0 row-start-1">
-        <div ref="googlemapbox"
-          class="justify-center rounded-md border-black border-8 max-h-[328px]"
-        >
-          <GChart :key="googlemapchart"
-            :events="gchartEvents"
-            :type="type"
-            :data="chart_coutries"
-            :options="options"
-            :settings="chart_settings"
-            :resizeDebounce="500"
-          />
-        </div>
-
-
-        <div class="flex flex-col start-0">
-          <span class="font-extrabold font-mono"
-            >Results <b v-if="itemCode">for {{ itemCode }}</b>
-          </span>
-        </div>
-        <div>
-          <EasyTable
-            id="results"
-            table-class-name="results"
-            sortBy="countryName"
-            :rows-per-page="30"
-            :headers="hproducts"
-            :items="tproducts"
-            :body-row-class-name="bodyRowClassNameFunction"
-            :hide-rows-per-page="true"
-            :hide-footer="true"
-            alternating
-          >
-            <template #item-countryName="{ countryName, url }">
-              <a class="underline" target="_blank" :href="url">{{
-                countryName
-              }}</a>
-            </template>
-          </EasyTable>
-          <div v-if="settingsStore.online == true">Online</div>
-          <div v-else-if="'LAST_REFRESH_TIME' in settingsStore.settings">Last Refresh Time: {{ settingsStore.settings["LAST_REFRESH_TIME"] }}</div>
-        </div>
-      </div>
-      <div class="mr-auto">
-        <form @submit.prevent="submit">
-          <div>
-          <div class="flex flex-col start-0">
-            <div class="w-full">
-              <div>
-                <span class="font-extrabold font-mono">Search:</span>
-              </div>
-              <div>
-                <input
-                  class="rounded-md w-full"
-                  :placeholder="settingsStore.online ? 'Code of product' : 'Description or name'"
-                  v-model="settingsStore.text"
-                  @input="async_search"
-                />
-              </div>
-            </div>
-            <div>
-              <div>
-                <span class="font-extrabold font-mono">Online:</span>
-              </div>
-              <div>
-                <input
-                  type="checkbox"
-                  class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
-                  v-model="settingsStore.online"
-                  @input="clear_all"
-                />
-              </div>
-            </div>
-          </div>
-
-
-
-        </div>
-        </form>
-        <div class="mt-5">
-            <input v-if="showDescLongFilter" placeholder="Search in long description" 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"
-            :headers="hresults"
-            :items="options_items"
-            :search-field="searchField"
-            :search-value="searchValue"
-            :body-row-class-name="selectedRowClassNameFunction"
-            @click-row="showRow"
-            :filter-options="filterOptions"
-            alternating
-          >
-            <template #item-img="{ code, img }">
-                <img
-                v-on:mouseover="onHover"
-                class="h-12"
-                :src="img"
-                :alt="code"
-              />
-            </template>
-            <template #header-item="header">
-              <div class="filter-column">
-                <img
-                  :src="filterimg"
-                  class="filter-icon"
-                  @click.stop="showItemFilter = !showItemFilter"
-                />
-                {{ header.text }}
-                <div
-                  class="filter-menu filter-sport-menu"
-                  v-if="showItemFilter"
-                >
-                  <multiselect
-                    v-model="productsCriteria"
-                    :options="uniqProducts"
-                  ></multiselect>
+                            <button @click="hover=true" data-modal-hide="popup-modal" type="button"
+                                class="py-2.5 px-5 mt-2 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">Close</button>
+                        </div>
+                    </div>
                 </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
-                  :src="filterimg"
-                  class="filter-icon"
-                  @click.stop="showDescFilter = !showDescFilter"
-                />
-                {{ header.text }}
-                <div
-                  class="filter-menu filter-sport-menu"
-                  v-if="showDescFilter"
-                >
-                  <multiselect
-                    v-model="descCriteria"
-                    :options="uniqDesc"
-                  ></multiselect>
+
+            </div>
+            <div class="flex flex-col start-0 row-start-1">
+                <div ref="googlemapbox" class="justify-center rounded-md border-black border-8 max-h-[328px]">
+                    <GChart :key="googlemapchart" :events="gchartEvents" :type="type" :data="chart_coutries"
+                        :options="options" :settings="chart_settings" :resizeDebounce="500" />
                 </div>
-              </div>
-            </template>
-            <template #header-units="header">
-              <div class="filter-column">
-                <img
-                  :src="filterimg"
-                  class="filter-icon"
-                  @click.stop="showUnitsFilter = !showUnitsFilter"
-                />
-                {{ header.text }}
-                <div
-                  class="filter-menu filter-menu-units"
-                  v-if="showUnitsFilter"
-                >
-                  <multiselect
-                    v-model="unitsCriteria"
-                    :options="uniqUnits"
-                  ></multiselect>
+
+
+                <div class="flex flex-col start-0">
+                    <span class="font-extrabold font-mono">Results <b v-if="itemCode">for {{ itemCode }}</b>
+                    </span>
                 </div>
-              </div>
-            </template>
-          </EasyTable>
+                <div>
+                    <EasyTable id="results" table-class-name="results" sortBy="countryName" :rows-per-page="30"
+                        :headers="hproducts" :items="tproducts" :body-row-class-name="bodyRowClassNameFunction"
+                        :hide-rows-per-page="true" :hide-footer="true" alternating>
+                        <template #item-countryName="{ countryName, url }">
+                            <a class="underline" target="_blank" :href="url">{{
+                                countryName
+                                }}</a>
+                        </template>
+                    </EasyTable>
+                    <div v-if="settingsStore.online == true">Online</div>
+                    <div v-else-if="'LAST_REFRESH_TIME' in settingsStore.settings">Last Refresh Time: {{
+    settingsStore.settings["LAST_REFRESH_TIME"] }}</div>
+                </div>
+            </div>
+            <div class="mr-auto">
+                <form @submit.prevent="submit">
+                    <div>
+                        <div class="flex flex-col start-0">
+                            <div class="w-full">
+                                <div>
+                                    <span class="font-extrabold font-mono">Search:</span>
+                                </div>
+                                <div>
+                                    <fwb-input @input="async_search" v-model="settingsStore.text" :placeholder="settingsStore.online ? 'Code of product' : 'Description or name'"
+                                        size="md">
+                                        <template #suffix>
+                                            <svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400"
+                                                fill="none" stroke="currentColor" viewBox="0 0 24 24"
+                                                xmlns="http://www.w3.org/2000/svg">
+                                                <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                                                    stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
+                                            </svg>
+                                        </template>
+                                    </fwb-input>
+                                </div>
+                            </div>
+                            <div>
+                                <div>
+                                    <span class="font-extrabold font-mono">Online:</span>
+                                </div>
+                                <div>
+                                    <input type="checkbox"
+                                        class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+                                        v-model="settingsStore.online" @input="clear_all" />
+                                </div>
+                            </div>
+                        </div>
+
+
+
+                    </div>
+                </form>
+                <div class="mt-5">
+                    <input v-if="showDescLongFilter" placeholder="Search in long description"
+                        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" :headers="hresults" :items="options_items"
+                        :search-field="searchField" :search-value="searchValue"
+                        :body-row-class-name="selectedRowClassNameFunction" @click-row="showRow"
+                        :filter-options="filterOptions" alternating>
+                        <template #item-img="{ code, img }">
+                            <img v-on:mouseover="onHover" class="h-12" :src="img" :alt="code" />
+                        </template>
+                        <template #header-item="header">
+                            <div class="filter-column">
+                                <img :src="filterimg" class="filter-icon"
+                                    @click.stop="showItemFilter = !showItemFilter" />
+                                {{ header.text }}
+                                <div class="filter-menu filter-sport-menu" v-if="showItemFilter">
+                                    <multiselect v-model="productsCriteria" :options="uniqProducts"></multiselect>
+                                </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 :src="filterimg" class="filter-icon"
+                                    @click.stop="showDescFilter = !showDescFilter" />
+                                {{ header.text }}
+                                <div class="filter-menu filter-sport-menu" v-if="showDescFilter">
+                                    <multiselect v-model="descCriteria" :options="uniqDesc"></multiselect>
+                                </div>
+                            </div>
+                        </template>
+                        <template #header-units="header">
+                            <div class="filter-column">
+                                <img :src="filterimg" class="filter-icon"
+                                    @click.stop="showUnitsFilter = !showUnitsFilter" />
+                                {{ header.text }}
+                                <div class="filter-menu filter-menu-units" v-if="showUnitsFilter">
+                                    <multiselect v-model="unitsCriteria" :options="uniqUnits"></multiselect>
+                                </div>
+                            </div>
+                        </template>
+                    </EasyTable>
+                </div>
+            </div>
+            <div></div>
         </div>
-      </div>
-      <div></div>
-    </div>
-  </GuestLayout>
+    </GuestLayout>
 </template>
 <style>
 @import "vue3-easy-data-table/dist/style.css";