Search with image and dark theme
This commit is contained in:
@@ -20,6 +20,7 @@ import axios from "axios";
|
|||||||
import filterimg from "@/assets/eglass-filter.png";
|
import filterimg from "@/assets/eglass-filter.png";
|
||||||
import searchimg from "@/assets/search-icon.svg";
|
import searchimg from "@/assets/search-icon.svg";
|
||||||
import { settingsStore } from '../settingsStore.js';
|
import { settingsStore } from '../settingsStore.js';
|
||||||
|
import { FwbInput } from 'flowbite-vue';
|
||||||
|
|
||||||
|
|
||||||
const screenWidth = ref(screen.width)
|
const screenWidth = ref(screen.width)
|
||||||
@@ -442,61 +443,49 @@ const selectedRowClassNameFunction = (item) => {
|
|||||||
|
|
||||||
<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 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 p-4 w-full max-w-md max-h-full">
|
||||||
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
|
<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">
|
<button @click="hover=true" type="button"
|
||||||
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
|
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"
|
||||||
<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"/>
|
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>
|
</svg>
|
||||||
<span class="sr-only">Close modal</span>
|
<span class="sr-only">Close modal</span>
|
||||||
</button>
|
</button>
|
||||||
<div class="p-4 md:p-5 text-center">
|
<div class="p-4 md:p-5 text-center">
|
||||||
|
|
||||||
|
|
||||||
<img :src="hoverImage"/>
|
<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">
|
<!-- <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
|
Yes, I'm sure
|
||||||
</button> -->
|
</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>
|
<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>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col start-0 row-start-1">
|
<div class="flex flex-col start-0 row-start-1">
|
||||||
<div ref="googlemapbox"
|
<div ref="googlemapbox" class="justify-center rounded-md border-black border-8 max-h-[328px]">
|
||||||
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" />
|
||||||
<GChart :key="googlemapchart"
|
|
||||||
:events="gchartEvents"
|
|
||||||
:type="type"
|
|
||||||
:data="chart_coutries"
|
|
||||||
:options="options"
|
|
||||||
:settings="chart_settings"
|
|
||||||
:resizeDebounce="500"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="flex flex-col start-0">
|
<div class="flex flex-col start-0">
|
||||||
<span class="font-extrabold font-mono"
|
<span class="font-extrabold font-mono">Results <b v-if="itemCode">for {{ itemCode }}</b>
|
||||||
>Results <b v-if="itemCode">for {{ itemCode }}</b>
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<EasyTable
|
<EasyTable id="results" table-class-name="results" sortBy="countryName" :rows-per-page="30"
|
||||||
id="results"
|
:headers="hproducts" :items="tproducts" :body-row-class-name="bodyRowClassNameFunction"
|
||||||
table-class-name="results"
|
:hide-rows-per-page="true" :hide-footer="true" alternating>
|
||||||
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 }">
|
<template #item-countryName="{ countryName, url }">
|
||||||
<a class="underline" target="_blank" :href="url">{{
|
<a class="underline" target="_blank" :href="url">{{
|
||||||
countryName
|
countryName
|
||||||
@@ -504,7 +493,8 @@ const selectedRowClassNameFunction = (item) => {
|
|||||||
</template>
|
</template>
|
||||||
</EasyTable>
|
</EasyTable>
|
||||||
<div v-if="settingsStore.online == true">Online</div>
|
<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 v-else-if="'LAST_REFRESH_TIME' in settingsStore.settings">Last Refresh Time: {{
|
||||||
|
settingsStore.settings["LAST_REFRESH_TIME"] }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mr-auto">
|
<div class="mr-auto">
|
||||||
@@ -516,12 +506,17 @@ const selectedRowClassNameFunction = (item) => {
|
|||||||
<span class="font-extrabold font-mono">Search:</span>
|
<span class="font-extrabold font-mono">Search:</span>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<input
|
<fwb-input @input="async_search" v-model="settingsStore.text" :placeholder="settingsStore.online ? 'Code of product' : 'Description or name'"
|
||||||
class="rounded-md w-full"
|
size="md">
|
||||||
:placeholder="settingsStore.online ? 'Code of product' : 'Description or name'"
|
<template #suffix>
|
||||||
v-model="settingsStore.text"
|
<svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400"
|
||||||
@input="async_search"
|
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>
|
||||||
<div>
|
<div>
|
||||||
@@ -529,12 +524,9 @@ const selectedRowClassNameFunction = (item) => {
|
|||||||
<span class="font-extrabold font-mono">Online:</span>
|
<span class="font-extrabold font-mono">Online:</span>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<input
|
<input type="checkbox"
|
||||||
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"
|
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"
|
v-model="settingsStore.online" @input="clear_all" />
|
||||||
@input="clear_all"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -544,91 +536,50 @@ const selectedRowClassNameFunction = (item) => {
|
|||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
<div class="mt-5">
|
<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">
|
<input v-if="showDescLongFilter" placeholder="Search in long description"
|
||||||
<EasyTable
|
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"
|
||||||
class="none"
|
type="text" v-model="searchValue">
|
||||||
:rows-per-page="20"
|
<EasyTable class="none" :rows-per-page="20" :headers="hresults" :items="options_items"
|
||||||
:headers="hresults"
|
:search-field="searchField" :search-value="searchValue"
|
||||||
:items="options_items"
|
:body-row-class-name="selectedRowClassNameFunction" @click-row="showRow"
|
||||||
:search-field="searchField"
|
:filter-options="filterOptions" alternating>
|
||||||
:search-value="searchValue"
|
|
||||||
:body-row-class-name="selectedRowClassNameFunction"
|
|
||||||
@click-row="showRow"
|
|
||||||
:filter-options="filterOptions"
|
|
||||||
alternating
|
|
||||||
>
|
|
||||||
<template #item-img="{ code, img }">
|
<template #item-img="{ code, img }">
|
||||||
<img
|
<img v-on:mouseover="onHover" class="h-12" :src="img" :alt="code" />
|
||||||
v-on:mouseover="onHover"
|
|
||||||
class="h-12"
|
|
||||||
:src="img"
|
|
||||||
:alt="code"
|
|
||||||
/>
|
|
||||||
</template>
|
</template>
|
||||||
<template #header-item="header">
|
<template #header-item="header">
|
||||||
<div class="filter-column">
|
<div class="filter-column">
|
||||||
<img
|
<img :src="filterimg" class="filter-icon"
|
||||||
:src="filterimg"
|
@click.stop="showItemFilter = !showItemFilter" />
|
||||||
class="filter-icon"
|
|
||||||
@click.stop="showItemFilter = !showItemFilter"
|
|
||||||
/>
|
|
||||||
{{ header.text }}
|
{{ header.text }}
|
||||||
<div
|
<div class="filter-menu filter-sport-menu" v-if="showItemFilter">
|
||||||
class="filter-menu filter-sport-menu"
|
<multiselect v-model="productsCriteria" :options="uniqProducts"></multiselect>
|
||||||
v-if="showItemFilter"
|
|
||||||
>
|
|
||||||
<multiselect
|
|
||||||
v-model="productsCriteria"
|
|
||||||
:options="uniqProducts"
|
|
||||||
></multiselect>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template #header-descLong="header">
|
<template #header-descLong="header">
|
||||||
<div class="filter-column">
|
<div class="filter-column">
|
||||||
<img
|
<img :src="searchimg" class="filter-icon"
|
||||||
:src="searchimg"
|
@click.stop="showDescLongFilter = !showDescLongFilter" />
|
||||||
class="filter-icon"
|
|
||||||
@click.stop="showDescLongFilter = !showDescLongFilter"
|
|
||||||
/>
|
|
||||||
{{ header.text }}
|
{{ header.text }}
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template #header-desc="header">
|
<template #header-desc="header">
|
||||||
<div class="filter-column">
|
<div class="filter-column">
|
||||||
<img
|
<img :src="filterimg" class="filter-icon"
|
||||||
:src="filterimg"
|
@click.stop="showDescFilter = !showDescFilter" />
|
||||||
class="filter-icon"
|
|
||||||
@click.stop="showDescFilter = !showDescFilter"
|
|
||||||
/>
|
|
||||||
{{ header.text }}
|
{{ header.text }}
|
||||||
<div
|
<div class="filter-menu filter-sport-menu" v-if="showDescFilter">
|
||||||
class="filter-menu filter-sport-menu"
|
<multiselect v-model="descCriteria" :options="uniqDesc"></multiselect>
|
||||||
v-if="showDescFilter"
|
|
||||||
>
|
|
||||||
<multiselect
|
|
||||||
v-model="descCriteria"
|
|
||||||
:options="uniqDesc"
|
|
||||||
></multiselect>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template #header-units="header">
|
<template #header-units="header">
|
||||||
<div class="filter-column">
|
<div class="filter-column">
|
||||||
<img
|
<img :src="filterimg" class="filter-icon"
|
||||||
:src="filterimg"
|
@click.stop="showUnitsFilter = !showUnitsFilter" />
|
||||||
class="filter-icon"
|
|
||||||
@click.stop="showUnitsFilter = !showUnitsFilter"
|
|
||||||
/>
|
|
||||||
{{ header.text }}
|
{{ header.text }}
|
||||||
<div
|
<div class="filter-menu filter-menu-units" v-if="showUnitsFilter">
|
||||||
class="filter-menu filter-menu-units"
|
<multiselect v-model="unitsCriteria" :options="uniqUnits"></multiselect>
|
||||||
v-if="showUnitsFilter"
|
|
||||||
>
|
|
||||||
<multiselect
|
|
||||||
v-model="unitsCriteria"
|
|
||||||
:options="uniqUnits"
|
|
||||||
></multiselect>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
Reference in New Issue
Block a user