From b189affd88d674c6f8853fe2cccedd880f6ecd46 Mon Sep 17 00:00:00 2001 From: w3bdesign <45217974+w3bdesign@users.noreply.github.com> Date: Mon, 30 Jun 2025 02:08:41 +0200 Subject: [PATCH 01/27] Add product filter and sort --- components/Products/ProductFilters.vue | 56 ++++++++++++++++++++++++++ components/Products/ProductSort.vue | 19 +++++++++ components/common/Button.vue | 0 components/common/Checkbox.vue | 10 +++++ components/common/RangeSlider.vue | 16 ++++++++ pages/products.vue | 20 ++++++++- 6 files changed, 120 insertions(+), 1 deletion(-) create mode 100644 components/Products/ProductFilters.vue create mode 100644 components/Products/ProductSort.vue create mode 100644 components/common/Button.vue create mode 100644 components/common/Checkbox.vue create mode 100644 components/common/RangeSlider.vue diff --git a/components/Products/ProductFilters.vue b/components/Products/ProductFilters.vue new file mode 100644 index 00000000..8eae255a --- /dev/null +++ b/components/Products/ProductFilters.vue @@ -0,0 +1,56 @@ + + + diff --git a/components/Products/ProductSort.vue b/components/Products/ProductSort.vue new file mode 100644 index 00000000..de2645ca --- /dev/null +++ b/components/Products/ProductSort.vue @@ -0,0 +1,19 @@ + + + diff --git a/components/common/Button.vue b/components/common/Button.vue new file mode 100644 index 00000000..e69de29b diff --git a/components/common/Checkbox.vue b/components/common/Checkbox.vue new file mode 100644 index 00000000..99c1bf14 --- /dev/null +++ b/components/common/Checkbox.vue @@ -0,0 +1,10 @@ + + + diff --git a/components/common/RangeSlider.vue b/components/common/RangeSlider.vue new file mode 100644 index 00000000..08104269 --- /dev/null +++ b/components/common/RangeSlider.vue @@ -0,0 +1,16 @@ + + + diff --git a/pages/products.vue b/pages/products.vue index 5d1dafdc..c1eaef4b 100644 --- a/pages/products.vue +++ b/pages/products.vue @@ -1,8 +1,26 @@ From 290e3ff2482671098f75f4175c2b949061dcb037 Mon Sep 17 00:00:00 2001 From: w3bdesign <45217974+w3bdesign@users.noreply.github.com> Date: Mon, 30 Jun 2025 02:23:49 +0200 Subject: [PATCH 05/27] Update ProductFilters.vue --- components/Products/ProductFilters.vue | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/components/Products/ProductFilters.vue b/components/Products/ProductFilters.vue index 3e075e7f..1770bf18 100644 --- a/components/Products/ProductFilters.vue +++ b/components/Products/ProductFilters.vue @@ -54,7 +54,5 @@ From 501a7786a41c27b14803f7d890407ad19c5d3167 Mon Sep 17 00:00:00 2001 From: w3bdesign <45217974+w3bdesign@users.noreply.github.com> Date: Mon, 30 Jun 2025 02:24:40 +0200 Subject: [PATCH 06/27] Show sliders --- components/common/Checkbox.vue | 9 +++++++-- components/common/RangeSlider.vue | 7 +++++-- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/components/common/Checkbox.vue b/components/common/Checkbox.vue index 99c1bf14..f6ed455b 100644 --- a/components/common/Checkbox.vue +++ b/components/common/Checkbox.vue @@ -1,10 +1,15 @@ diff --git a/components/common/RangeSlider.vue b/components/common/RangeSlider.vue index 08104269..38b4167d 100644 --- a/components/common/RangeSlider.vue +++ b/components/common/RangeSlider.vue @@ -1,5 +1,5 @@ From 660ba70f2e34a10b48a6f9391dd470cf7930b422 Mon Sep 17 00:00:00 2001 From: w3bdesign <45217974+w3bdesign@users.noreply.github.com> Date: Mon, 30 Jun 2025 02:28:37 +0200 Subject: [PATCH 07/27] Test filter --- components/Products/ProductFilters.vue | 9 +++------ pages/products.vue | 7 ++++--- 2 files changed, 7 insertions(+), 9 deletions(-) diff --git a/components/Products/ProductFilters.vue b/components/Products/ProductFilters.vue index 1770bf18..0f732588 100644 --- a/components/Products/ProductFilters.vue +++ b/components/Products/ProductFilters.vue @@ -1,5 +1,6 @@ - - + \ No newline at end of file diff --git a/pages/products.vue b/pages/products.vue index c1eaef4b..d515c775 100644 --- a/pages/products.vue +++ b/pages/products.vue @@ -2,11 +2,14 @@
+ ProductFilters:
-
+

Produkter (0)

@@ -19,8 +22,6 @@ From 4f9a0bac8f54bec51b238f58e78718f56fd9ac54 Mon Sep 17 00:00:00 2001 From: w3bdesign <45217974+w3bdesign@users.noreply.github.com> Date: Mon, 30 Jun 2025 02:41:46 +0200 Subject: [PATCH 12/27] Create ColorSwatch.vue --- components/common/ColorSwatch.vue | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 components/common/ColorSwatch.vue diff --git a/components/common/ColorSwatch.vue b/components/common/ColorSwatch.vue new file mode 100644 index 00000000..4ac5ed13 --- /dev/null +++ b/components/common/ColorSwatch.vue @@ -0,0 +1,20 @@ + + + From 441fbaf4333a119b1c655715cebb8ab3b7d88c12 Mon Sep 17 00:00:00 2001 From: w3bdesign <45217974+w3bdesign@users.noreply.github.com> Date: Mon, 30 Jun 2025 02:42:04 +0200 Subject: [PATCH 13/27] Update ProductFilters.vue --- components/Products/ProductFilters.vue | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/components/Products/ProductFilters.vue b/components/Products/ProductFilters.vue index e157b501..05c4e384 100644 --- a/components/Products/ProductFilters.vue +++ b/components/Products/ProductFilters.vue @@ -36,12 +36,7 @@

FARGE

- +
@@ -56,4 +51,5 @@ import Checkbox from '~/components/common/Checkbox.vue' import RangeSlider from '~/components/common/RangeSlider.vue' import CommonButton from '~/components/common/CommonButton.vue' +import ColorSwatch from '~/components/common/ColorSwatch.vue' From 3123771dde3e32b4f0a9bc38b071fe386f8dca5a Mon Sep 17 00:00:00 2001 From: w3bdesign <45217974+w3bdesign@users.noreply.github.com> Date: Mon, 30 Jun 2025 02:44:28 +0200 Subject: [PATCH 14/27] Remove imports --- components/Products/ProductFilters.vue | 7 ------- components/common/RangeSlider.vue | 4 ---- pages/products.vue | 3 --- 3 files changed, 14 deletions(-) diff --git a/components/Products/ProductFilters.vue b/components/Products/ProductFilters.vue index 05c4e384..4fe262db 100644 --- a/components/Products/ProductFilters.vue +++ b/components/Products/ProductFilters.vue @@ -46,10 +46,3 @@
- - diff --git a/components/common/RangeSlider.vue b/components/common/RangeSlider.vue index 38b4167d..1b0cfee1 100644 --- a/components/common/RangeSlider.vue +++ b/components/common/RangeSlider.vue @@ -13,7 +13,3 @@
- - diff --git a/pages/products.vue b/pages/products.vue index 652e861e..e575a72d 100644 --- a/pages/products.vue +++ b/pages/products.vue @@ -21,9 +21,6 @@ From 3223b9d292a057c1734fd65888b44aa34f3c899e Mon Sep 17 00:00:00 2001 From: w3bdesign <45217974+w3bdesign@users.noreply.github.com> Date: Mon, 30 Jun 2025 03:00:13 +0200 Subject: [PATCH 19/27] Update ProductsFilters.vue --- components/Products/ProductsFilters.vue | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/components/Products/ProductsFilters.vue b/components/Products/ProductsFilters.vue index 4fe262db..3a30e682 100644 --- a/components/Products/ProductsFilters.vue +++ b/components/Products/ProductsFilters.vue @@ -4,15 +4,15 @@

PRODUKT TYPE

- - - + + +

PRIS

- Date: Mon, 30 Jun 2025 03:02:11 +0200 Subject: [PATCH 20/27] Update ProductsFilters.vue --- components/Products/ProductsFilters.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Products/ProductsFilters.vue b/components/Products/ProductsFilters.vue index 3a30e682..f93c8880 100644 --- a/components/Products/ProductsFilters.vue +++ b/components/Products/ProductsFilters.vue @@ -36,7 +36,7 @@

FARGE

- +
From 8cd1bf168ee700f8dcd2ac93bc867f1a5a032c64 Mon Sep 17 00:00:00 2001 From: w3bdesign <45217974+w3bdesign@users.noreply.github.com> Date: Mon, 30 Jun 2025 03:13:21 +0200 Subject: [PATCH 21/27] Test filter live --- components/Products/ProductsFilters.vue | 57 ++++++++++++++---- components/Products/ProductsShowAll.vue | 14 +++-- pages/products.vue | 79 +++++++++++++++++++------ 3 files changed, 116 insertions(+), 34 deletions(-) diff --git a/components/Products/ProductsFilters.vue b/components/Products/ProductsFilters.vue index f93c8880..85bc25e5 100644 --- a/components/Products/ProductsFilters.vue +++ b/components/Products/ProductsFilters.vue @@ -4,9 +4,14 @@

PRODUKT TYPE

- - - +
@@ -17,18 +22,24 @@ label="Pris" :min="0" :max="1000" - :value="1000" - :startValue="0" - :formatValue="(v) => `kr ${v}`" - :disabled="true" + :value="priceRange[1]" + :startValue="priceRange[0]" + :disabled="false" + @input="(value) => setPriceRange([priceRange[0], value])" />

STØRRELSE

- - Large + + {{ size }}
@@ -36,13 +47,37 @@

FARGE

- +
- + Resett filter
+ + diff --git a/components/Products/ProductsShowAll.vue b/components/Products/ProductsShowAll.vue index b916c7cd..d1561e2c 100644 --- a/components/Products/ProductsShowAll.vue +++ b/components/Products/ProductsShowAll.vue @@ -37,14 +37,16 @@ const props = defineProps({ const config = useRuntimeConfig(); -const products = computed(() => { - return ( - allCategoryProducts.value?.productCategory?.products?.nodes || - allProducts.value?.products?.nodes || - [] - ); +const props = defineProps({ + products: { + type: Array, + required: true, + default: () => [], + }, }); +const products = computed(() => props.products); + /** * Returns the path and query parameters for a product link. * diff --git a/pages/products.vue b/pages/products.vue index 1aac9a07..e535ba6e 100644 --- a/pages/products.vue +++ b/pages/products.vue @@ -1,34 +1,79 @@ From 3652ad6656cc27ae3fd5566923b36422871c8884 Mon Sep 17 00:00:00 2001 From: Daniel Fjeldstad <45217974+w3bdesign@users.noreply.github.com> Date: Mon, 30 Jun 2025 03:15:11 +0200 Subject: [PATCH 22/27] Potential fix for code scanning alert no. 10: Assignment to constant Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com> --- components/Products/ProductsShowAll.vue | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/components/Products/ProductsShowAll.vue b/components/Products/ProductsShowAll.vue index d1561e2c..af829cff 100644 --- a/components/Products/ProductsShowAll.vue +++ b/components/Products/ProductsShowAll.vue @@ -33,11 +33,6 @@ import ProductPrice from "@/components/Products/ProductPrice.vue"; const props = defineProps({ categoryId: { type: String, required: false }, categorySlug: { type: String, required: false }, -}); - -const config = useRuntimeConfig(); - -const props = defineProps({ products: { type: Array, required: true, @@ -45,6 +40,8 @@ const props = defineProps({ }, }); +const config = useRuntimeConfig(); + const products = computed(() => props.products); /** From 235369550b093f39418aff1cfc377493f49497c2 Mon Sep 17 00:00:00 2001 From: w3bdesign <45217974+w3bdesign@users.noreply.github.com> Date: Mon, 30 Jun 2025 03:17:28 +0200 Subject: [PATCH 23/27] Update ProductsShowAll.vue --- components/Products/ProductsShowAll.vue | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/components/Products/ProductsShowAll.vue b/components/Products/ProductsShowAll.vue index af829cff..b916c7cd 100644 --- a/components/Products/ProductsShowAll.vue +++ b/components/Products/ProductsShowAll.vue @@ -33,16 +33,17 @@ import ProductPrice from "@/components/Products/ProductPrice.vue"; const props = defineProps({ categoryId: { type: String, required: false }, categorySlug: { type: String, required: false }, - products: { - type: Array, - required: true, - default: () => [], - }, }); const config = useRuntimeConfig(); -const products = computed(() => props.products); +const products = computed(() => { + return ( + allCategoryProducts.value?.productCategory?.products?.nodes || + allProducts.value?.products?.nodes || + [] + ); +}); /** * Returns the path and query parameters for a product link. From 5a8adef38fc3870744a450616db553a00d947357 Mon Sep 17 00:00:00 2001 From: w3bdesign <45217974+w3bdesign@users.noreply.github.com> Date: Mon, 30 Jun 2025 03:21:01 +0200 Subject: [PATCH 24/27] Enable action --- components/Products/ProductsFilters.vue | 5 ++--- components/common/Checkbox.vue | 12 +++++++++++- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/components/Products/ProductsFilters.vue b/components/Products/ProductsFilters.vue index 85bc25e5..58a84188 100644 --- a/components/Products/ProductsFilters.vue +++ b/components/Products/ProductsFilters.vue @@ -9,8 +9,8 @@ :key="type.id" :id="type.id" :label="type.name" - :checked="type.checked" - @change="() => toggleProductType(type.id)" + :modelValue="type.checked" + @change="(checked) => toggleProductType(type.id)" /> @@ -24,7 +24,6 @@ :max="1000" :value="priceRange[1]" :startValue="priceRange[0]" - :disabled="false" @input="(value) => setPriceRange([priceRange[0], value])" /> diff --git a/components/common/Checkbox.vue b/components/common/Checkbox.vue index f6ed455b..3ba2ddcc 100644 --- a/components/common/Checkbox.vue +++ b/components/common/Checkbox.vue @@ -1,6 +1,11 @@ @@ -11,5 +16,10 @@ defineProps({ type: String, default: '', }, + modelValue: { + type: Boolean, + default: false, + }, }); +defineEmits(['change']); From 31575adf8f17d0322e555843a195b2b80433bd1b Mon Sep 17 00:00:00 2001 From: w3bdesign <45217974+w3bdesign@users.noreply.github.com> Date: Mon, 30 Jun 2025 03:25:44 +0200 Subject: [PATCH 25/27] Update RangeSlider.vue --- components/common/RangeSlider.vue | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/components/common/RangeSlider.vue b/components/common/RangeSlider.vue index 1b0cfee1..575c2928 100644 --- a/components/common/RangeSlider.vue +++ b/components/common/RangeSlider.vue @@ -4,8 +4,7 @@ type="range" min="0" max="1000" - class="w-full accent-blue-600" - disabled + class="w-full accent-blue-600" />
kr 0 From 2027ad7ccf03678fbdf3670f4ef851b5cb144a4a Mon Sep 17 00:00:00 2001 From: w3bdesign <45217974+w3bdesign@users.noreply.github.com> Date: Mon, 30 Jun 2025 03:26:32 +0200 Subject: [PATCH 26/27] Update ProductsSort.vue --- components/Products/ProductsSort.vue | 1 - 1 file changed, 1 deletion(-) diff --git a/components/Products/ProductsSort.vue b/components/Products/ProductsSort.vue index c016c2ce..dace8e99 100644 --- a/components/Products/ProductsSort.vue +++ b/components/Products/ProductsSort.vue @@ -4,7 +4,6 @@