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 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";
|
||||
|
||||
Reference in New Issue
Block a user