Add priceUnit and salesPrice columns

lang/id.json

@@ -117,5 +117,6 @@
     "error: ziggy error: object passed as 'item' parameter is missing route model binding key 'undefined'.": "Error: Ziggy error: object passed as 'item' parameter is missing route model binding key 'undefined'.",
     "error: ziggy error: object passed as 'field' parameter is missing route model binding key 'undefined'.": "Error: Ziggy error: object passed as 'field' parameter is missing route model binding key 'undefined'.",
     "referenceerror: assignment to undeclared variable country": "ReferenceError: assignment to undeclared variable country",
-    "typeerror: can't access property \"map\", ccountry.value is undefined": "TypeError: can't access property \"map\", ccountry.value is undefined"
+    "typeerror: can't access property \"map\", ccountry.value is undefined": "TypeError: can't access property \"map\", ccountry.value is undefined",
+    "referenceerror: priceunit is not defined": "ReferenceError: priceUnit is not defined"
 }

package.json

@@ -30,6 +30,7 @@
         "vue-google-charts": "^1.1.0",
         "vue-multiselect": "^3.0.0-beta.3",
         "vue3-easy-data-table": "^1.5.47",
+        "vue3-multiselect-checkboxed": "^0.0.9",
         "vuedraggable": "^4.1.0"
     }
 }

resources/js/Components/DropDown/MobileFriendly.vue

@@ -0,0 +1,56 @@
+<template>
+    <div class="relative">
+      <button class="z-10 relative flex items-center focus:outline-none select-none" @click="open = !open">
+        <slot name="button"></slot>
+      </button>
+  
+      <!-- to close when clicked on space around it in desktop-->
+      <button class="fixed inset-0 h-full w-full cursor-default focus:outline-none" v-if="open" @click="open = false" tabindex="-1"></button>
+      <!--dropdown content: desktop-->
+      <transition enter-active-class="transition-all duration-200 ease-out" leave-active-class="transition-all duration-750 ease-in" enter-class="opacity-0 scale-75" enter-to-class="opacity-100 scale-100" leave-class="opacity-100 scale-100" leave-to-class="opacity-0 scale-75">
+        <div class="hidden md:block absolute shadow-lg border w-48 rounded py-1 px-2 text-sm mt-4 bg-white" :class="placement === 'right' ? 'right-0' : 'left-0'" v-if="open">
+          <slot name="content"></slot>
+        </div>
+      </transition>
+  
+      <!--dropdown content: mobile-->
+      <transition enter-active-class="transition-all duration-200 ease-out" leave-active-class="transition-all duration-750 ease-in" enter-class="opacity-0 scale-75" enter-to-class="opacity-100 scale-100" leave-class="opacity-100 scale-100" leave-to-class="opacity-0 scale-75">
+        <div class="md:hidden fixed inset-x-0 bottom-0 bg-white w-full z-20 px-2 py-2 shadow-2xl leading-loose" v-if="open">
+          <slot name="content"></slot>
+        </div>
+      </transition>
+      <!-- to close when clicked on space around it in mobile-->
+      <div class="md:hidden fixed w-full h-full inset-0 bg-gray-900 opacity-50 z-10" @click="open = false" v-if="open"></div>
+    </div>
+  </template>
+  
+  <script>
+    export default {
+      data() {
+        return {
+          open: false,
+        };
+      },
+      props: {
+        placement: {
+          type: String,
+          default: "right",
+          validator: (value) => ["right", "left"].indexOf(value) !== -1,
+        },
+      },
+      mounted() {
+        const onEscape = (e) => {
+          if (e.key === "Esc" || e.key === "Escape") {
+            this.open = false;
+          }
+        };
+  
+        document.addEventListener("keydown", onEscape);
+  
+        // this.$once("hook:beforeDestroy", () => {
+        //   document.removeEventListener("keydown", onEscape);
+        // });
+      },
+    };
+  </script>
+  

resources/js/Pages/IkeaRoot.vue

@@ -10,7 +10,8 @@ import GuestLayout from '../Layouts/GuestLayout.vue';
 
 import { useForm } from '@inertiajs/inertia-vue3'
 import axios from 'axios';
-import IkeaLogo from './Ikea/IkeaLogo.vue';
+import filterimg from '@/assets/eglass-filter.png';
+
 
 const props = defineProps({
   products: {
@@ -36,6 +37,7 @@ const sdropdown = ref([
 
 const products = ref([]);
 const countryHash = ref([]);
+const showItemFilter = ref(false);
 
 let tproducts = computed(() => {
   return products.value.map((prod) => {
@@ -45,6 +47,20 @@ let tproducts = computed(() => {
   })
 })
 
+let uniqProducts = computed(() => {
+       var output = [];
+       var keys = [];
+       options_items.value.forEach((element) => {
+            var key = element.item;
+            if (keys.indexOf(key) === -1) {
+                keys.push(key);
+                output.push(element.item);
+            }
+        });
+        console.log('OUT',output);
+        return output;
+});
+
 const type = 'GeoChart';
 const form = useForm({
   countries: '',
@@ -76,6 +92,8 @@ const hresults = ref([
   { text: "Code", value: "code", sortable: true },
   { text: "Name of product", value: "item", sortable: true },
   { text: "Description", value: "desc", sortable: true },
+  { text: "Units", value: "units", sortable: true },
+  { text: "Price", value: "price", sortable: true },
   { text: "Image", value: "img", sortable: false }
 ])
 const rates = ref([]);
@@ -183,7 +201,7 @@ const async_search = async () => {
     console.log('SEARCH', route('products.search', [form.field.value, form.text, country]));
     const response = await axios.get(route('products.search', [form.field.value, form.text, country]));
 
-    options_items.value = response.data.map((i) => { return { "item": i.name, "desc": i.typeName, "img": i.mainImageUrl, "code": i.code, "url": i.url } });
+    options_items.value = response.data.map((i) => { return { "item": i.name, "desc": i.typeName, "img": i.mainImageUrl, "code": i.code, "url": i.url, "price": i.salesPrice, "units": i.priceUnit } });
     console.log("VALUES=", options_items.value);
   } catch (e) {
     const response = await Swal.fire({
@@ -319,9 +337,18 @@ const submit = () => {
 
         </form>
         <div class="mt-5">
-          <EasyTable :rows-per-page=20 :headers="hresults" :items="options_items" @click-row="showRow" alternating>
+          <EasyTable class="none" :rows-per-page=20 :headers="hresults" :items="options_items" @click-row="showRow" alternating>
             <template #item-img="{ code, img }">
-              <img class="h-12" :src="img" alt="" />
+              <img class="h-12" :src="img" :alt="code" />
+            </template>
+            <template #header-item="header">
+              <div class="filter-column overflow-visible">
+                <img :src="filterimg" class="filter-icon" @click="showItemFilter = !showItemFilter" />
+                {{ header.text }}
+                <div class="filter-menu filter-sport-menu" v-if="showItemFilter">
+                  <multiselect :options="uniqProducts"></multiselect>
+                </div>
+              </div>
             </template>
           </EasyTable>
         </div>
@@ -359,5 +386,31 @@ const submit = () => {
 </template>
 <style>
 @import 'vue3-easy-data-table/dist/style.css';
-</style>
+
+
+.filter-column {
+  display: flex;
+  align-items: center;
+  justify-items: center;
+  position: relative;
+}
+
+.filter-icon {
+  cursor: pointer;
+  display: inline-block;
+  width: 15px !important;
+  height: 15px !important;
+  margin-right: 4px;
+}
+
+.filter-menu {
+  padding: 5px 5px;
+  z-index: 1;
+  position: absolute;
+  top: 40px;
+  width: 250px;
+  background-color: #fff;
+
+}</style>
 <style src="vue-multiselect/dist/vue-multiselect.css"></style>
+