From 503349d9d5a22721be3e71a06206781085b4e8c0 Mon Sep 17 00:00:00 2001
From: Jaroslav Drzik <jaro@ttx.sk>
Date: Sun, 21 Jan 2024 10:17:20 +0100
Subject: [PATCH] Fix color, sort order

---
 resources/js/Pages/IkeaRoot.vue | 15 ++++++---------
 resources/views/app.blade.php   |  1 +
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/resources/js/Pages/IkeaRoot.vue b/resources/js/Pages/IkeaRoot.vue
index 6c40a51..6f968ba 100644
--- a/resources/js/Pages/IkeaRoot.vue
+++ b/resources/js/Pages/IkeaRoot.vue
@@ -384,7 +384,7 @@ watch(ccodes, (codes) => {
           <span class="font-extrabold font-mono">Results <b v-if="itemCode">for {{ itemCode }}</b> </span>
         </div>
         <div>
-          <EasyTable id="results" :rows-per-page=25 :headers="hproducts" :items="tproducts" :body-row-class-name="bodyRowClassNameFunction" alternating>
+          <EasyTable id="results" table-class-name="results" sortBy="countryName" :rows-per-page=25 :headers="hproducts" :items="tproducts" :body-row-class-name="bodyRowClassNameFunction" alternating>
             <template #item-countryName="{ countryName, url }">
               <a class="underline" target="_blank" :href="url">{{ countryName }}</a>
             </template>
@@ -397,7 +397,7 @@ watch(ccodes, (codes) => {
             <span class="font-extrabold font-mono">Countries in which compare</span>
           </div>
           <div>
-            <multiselect :close-on-select="false" :multiple="true" v-model="form.countries" :options="ccountry_list"
+            <multiselect placeholder="All" :close-on-select="false" :multiple="true" v-model="form.countries" :options="ccountry_list"
               @select="selectCountry" @remove="selectCountry">
             </multiselect>
           </div>
@@ -405,7 +405,7 @@ watch(ccodes, (codes) => {
             <span class="font-extrabold font-mono">Country in which search product</span>
           </div>
           <div>
-            <multiselect :close-on-select="true" :multiple="false" v-model="form.country" :options="ccodes"
+            <multiselect placeholder="All" :close-on-select="true" :multiple="false" v-model="form.country" :options="ccodes"
               label="country" track-by="code">
             </multiselect>
           </div>
@@ -507,12 +507,9 @@ watch(ccodes, (codes) => {
   width: 128px;
 }
 
-.result-country {
-  --easy-table-body-row-background-color: yellow !important;
-}
-
-.even-row .result-country {
-  --easy-table-body-row-background-color: yellow !important;
+:root .result-country {
+  --easy-table-body-row-background-color: yellow;
+  --easy-table-body-even-row-background-color: yellow;
 }
 
 </style>
diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php
index 05696ea..102b4a4 100644
--- a/resources/views/app.blade.php
+++ b/resources/views/app.blade.php
@@ -18,6 +18,7 @@
         .gradient {
             background: linear-gradient(90deg, #d53369 0%, #daae51 100%);
         }
+
     </style>
     @routes
     @vite('resources/js/app.js')