jaro/ikea
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Colored row in results

Browse Source
This commit is contained in:
Jaroslav Drzik
2024-01-21 08:33:32 +01:00
parent 5c3e2b89b8
commit 79b550ae3f
1 changed files with 12 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
resources/js/Pages/IkeaRoot.vue
View File

@@ -72,7 +72,9 @@ const tproducts = computed(() => {
return prod; return prod;
}) })
}) })
const bodyRowClassNameFunction = (item) => {
if (item.country == form.country.code) return 'result-country';
};
const filterOptions = computed(() => { const filterOptions = computed(() => {
const filterOptionsArray = []; const filterOptionsArray = [];
if (productsCriteria.value != 'All' && productsCriteria.value != null) { if (productsCriteria.value != 'All' && productsCriteria.value != null) {
@@ -381,7 +383,7 @@ watch(ccodes, (codes) => {
<span class="font-extrabold font-mono">Results <b v-if="itemCode">for {{ itemCode }}</b> </span> <span class="font-extrabold font-mono">Results <b v-if="itemCode">for {{ itemCode }}</b> </span>
</div> </div>
<div> <div>
<EasyTable :rows-per-page=25 :headers="hproducts" :items="tproducts" alternating> <EasyTable :rows-per-page=25 :headers="hproducts" :items="tproducts" :body-row-class-name="bodyRowClassNameFunction" alternating>
<template #item-countryName="{ countryName, url }"> <template #item-countryName="{ countryName, url }">
<a class="underline" target="_blank" :href="url">{{ countryName }}</a> <a class="underline" target="_blank" :href="url">{{ countryName }}</a>
</template> </template>
@@ -402,7 +404,7 @@ watch(ccodes, (codes) => {
<span class="font-extrabold font-mono">Country in which search product</span> <span class="font-extrabold font-mono">Country in which search product</span>
</div> </div>
<div> <div>
<multiselect :close-on-select="false" :multiple="false" v-model="form.country" :options="ccodes" <multiselect :close-on-select="true" :multiple="false" v-model="form.country" :options="ccodes"
label="country" track-by="code"> label="country" track-by="code">
</multiselect> </multiselect>
</div> </div>
@@ -503,6 +505,10 @@ watch(ccodes, (codes) => {
top: 40px; top: 40px;
width: 128px; width: 128px;
} }
:root .result-country {
--easy-table-body-row-background-color: yellow !important;
}
</style> </style>
<style src="vue-multiselect/dist/vue-multiselect.css"></style> <style src="vue-multiselect/dist/vue-multiselect.css"></style>