From 90f99cdbdd610b6d2b77c0d391b4aa7db7af971b Mon Sep 17 00:00:00 2001 From: Jaroslav Drzik Date: Mon, 8 Jan 2024 20:14:12 +0100 Subject: [PATCH] Add priceUnit and salesPrice columns --- lang/id.json | 3 +- package.json | 1 + .../js/Components/DropDown/MobileFriendly.vue | 56 +++++++++++++++ resources/js/Pages/IkeaRoot.vue | 67 ++++++++++++++++-- resources/js/assets/eglass-filter.png | Bin 0 -> 869 bytes 5 files changed, 119 insertions(+), 8 deletions(-) create mode 100644 resources/js/Components/DropDown/MobileFriendly.vue create mode 100644 resources/js/assets/eglass-filter.png diff --git a/lang/id.json b/lang/id.json index f714ece..f4ad8d1 100644 --- a/lang/id.json +++ b/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" } \ No newline at end of file diff --git a/package.json b/package.json index b45811b..c7aaa42 100644 --- a/package.json +++ b/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" } } diff --git a/resources/js/Components/DropDown/MobileFriendly.vue b/resources/js/Components/DropDown/MobileFriendly.vue new file mode 100644 index 0000000..0b78da7 --- /dev/null +++ b/resources/js/Components/DropDown/MobileFriendly.vue @@ -0,0 +1,56 @@ + + + + \ No newline at end of file diff --git a/resources/js/Pages/IkeaRoot.vue b/resources/js/Pages/IkeaRoot.vue index e1e6f14..1747837 100644 --- a/resources/js/Pages/IkeaRoot.vue +++ b/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({ @@ -257,7 +275,7 @@ const onSelectCurrency = () => { else currencyCoef.value = 1.0; products.value = products.value.map((product) => { product.salesPrice = (product.salesPrice * currencyCoef.value).toFixed(2); return product }); - + console.log('PROD-NEW', products.value); } } @@ -316,12 +334,21 @@ const submit = () => { - +
- + +
@@ -359,5 +386,31 @@ const submit = () => { + + +.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; + +} + diff --git a/resources/js/assets/eglass-filter.png b/resources/js/assets/eglass-filter.png new file mode 100644 index 0000000000000000000000000000000000000000..27559cf53cded5a3d53b6aa0b9ff9835183e7565 GIT binary patch literal 869 zcmV-r1DgDaP)Px&A4x<(RA@u(nMD0n9Pm!@vR$PnLiuw)&faO&-EXjC^bao&x09}FR7NGsmsTu;d18af% zz!>10hcqXqoo(V_z-eHHhbJonBY-<)F9 zz^?#y+5hW-ZF#st1;~d=+%({)h5U97$D=HDT3PQiJqO2clRN^tnRE3=k4(hJfC;D} zRMR%lPF$TY?*i=qg60t*0ySG#jp+n1J75CGfmwzh2V4uVErI40Afna44r5du-{+Xf zTtEdtV-2v=VN($jBS6Gj{h7ckU?`B4N;iSgz{x}uqBO(`mt?pXbUV)v;%3rRB2Ax7b*bH03DF89U+i_!L<^gW=~CD zR?FSk>uVm33)dTX=@3x%eo&1F#0b#bwTC36(zszQeF>%>1ULdv9#ROf3s2rX5ViWr z%@jivy9Z)?=jw%;I*bvZGOBkc-3Ka-yTHhLETaQ}$Bq!_lGCdm1+)Q{I8NgCz`=SH z;8^_1kfMwhWi&F0{&fm<0B%`JT}evWr^adsIBL)03jsaHmm6u_sJD#jqSU2URY-k) zcYE;CffFJ?SY0bqd;J8_SwL^6C8HV<@MdvZ1iZFoafN_@B`hLP?16xENrSfd6p|?Y v>Zu