feat: added filtering

FgForrest · Apr 1, 2024 · 12a743c · 12a743c
1 parent e60426e
commit 12a743c
Show file tree

Hide file tree

Showing 14 changed files with 5,157 additions and 4,460 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,3 +1,7 @@
 {
-    "vue3snippets.enable-compile-vue-file-on-did-save-code": true
+    "vue3snippets.enable-compile-vue-file-on-did-save-code": true,
+    "typescript.tsdk": "node_modules/typescript/lib",
+    "files.exclude": {
+        "**/.nuxt": true
+    }
 }
diff --git a/components/BrandSelector.vue b/components/BrandSelector.vue
@@ -1,15 +1,9 @@
 <template>
   <p class="title">Brand</p>
-  <Tree
-    v-model:selectionKeys="selectedKey"
-    :value="getNodes()"
-    selectionMode="checkbox"
-    class="no-border"
-  ></Tree>
+  <Tree :value="getNodes()" selectionMode="checkbox" class="no-border"></Tree>
 </template>
 
 <script setup lang="ts">
-const selectedKey = ref<any>(null);
 const { categoryId } = defineProps({
   categoryId: {
     type: Number,
@@ -19,7 +13,7 @@ const { categoryId } = defineProps({
 
 const { data } = await useAsyncGql("getBrands", { categoryId: categoryId });
 
-const getNodes = () => {
+function getNodes(): object[] {
   const brands: object[] = [];
   const rawBrands =
     data.value?.queryProduct.extraResults.facetSummary?.brand?.facetStatistics;
@@ -33,7 +27,7 @@ const getNodes = () => {
     }
   }
   return brands;
-};
+}
 </script>
 
 <style scoped>

diff --git a/components/ListSpecialItems.vue b/components/ListSpecialItems.vue
@@ -28,8 +28,8 @@
             {{ item.data.priceForSale.priceWithTax }},-Kč
           </div>
           <span>
-            <Button icon="pi pi-heart" severity="secondary" outlined />
-            <Button icon="pi pi-shopping-cart" class="ml-2" />
+            <Button icon="pi pi-heart" severity="secondary" outlined></Button>
+            <Button icon="pi pi-shopping-cart" class="ml-2"></Button>
           </span>
         </div>
       </div>

diff --git a/components/NavMenu.vue b/components/NavMenu.vue
@@ -2,7 +2,12 @@
   <div>
     <Menubar v-if="data && data.listCategory" :model="getItems()">
       <template #start>
-        <NuxtImg format="avif" height="40" src="/evitadb.png" alt="Icon EvitaDB" />
+        <NuxtImg
+          format="avif"
+          height="40"
+          src="/evitadb.png"
+          alt="Icon EvitaDB"
+        />
       </template>
       <template #item="{ item, props, hasSubmenu, root }">
         <NuxtLink
@@ -34,7 +39,13 @@
       </template>
       <template #end>
         <div class="flex align-items-center gap-2">
-          <InputText placeholder="Search" type="text" class="w-8rem sm:w-auto" />
+          <InputText
+            placeholder="Search"
+            type="text"
+            class="w-8rem sm:w-auto"
+          />
+          <Avatar image="/person.svg" shape="circle" />
+          <i class="pi pi-shopping-cart icon"></i>
         </div>
       </template>
     </Menubar>
@@ -44,15 +55,17 @@
 <script lang="ts" setup>
 const { data } = await useAsyncGql("listCategory");
 
-function getItems(): Object[] {
-  const menuItems: Object[] = [];
+function getItems(): object[] {
+  const menuItems: object[] = [];
   menuItems.push({
     label: "Home",
     icon: "pi pi-home",
     link: "/",
   });
   if (data.value) {
-    for (const menuItem of data.value?.listCategory.filter((x) => !x.parentPrimaryKey)) {
+    for (const menuItem of data.value?.listCategory.filter(
+      (x) => !x.parentPrimaryKey
+    )) {
       const subItemsNames = data.value?.listCategory.filter(
         (x) => x.parentPrimaryKey === menuItem.primaryKey
       );
@@ -68,7 +81,6 @@ function getItems(): Object[] {
         menuItems.push({
           label: menuItem.attributes?.name,
           items: subItems,
-          link: `/offer/${menuItem.primaryKey}/1`,
         });
       } else {
         menuItems.push({
@@ -99,4 +111,9 @@ ul li a {
   color: black;
   font-weight: bold;
 }
+
+.icon {
+  font-size: 1.5em;
+  color: black;
+}
 </style>
diff --git a/components/PageCounter.vue b/components/PageCounter.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="container">
     <div class="left-controls">
-      <button class="move" @click="moveStart()">
+      <button class="move" @click="moveStart()" :disabled="page === 1">
         <i class="pi pi-angle-double-left"></i>
       </button>
-      <button class="move" @click="movePrevious()">
+      <button class="move" @click="movePrevious()" :disabled="page === 1">
         <i class="pi pi-angle-left"></i>
       </button>
     </div>
@@ -18,10 +18,18 @@
       </ul>
     </div>
     <div class="right-controls">
-      <button class="move" @click="moveNext()">
+      <button
+        class="move"
+        @click="moveNext()"
+        :disabled="page === lastPageNumber"
+      >
         <i class="pi pi-angle-right"></i>
       </button>
-      <button class="move" @click="moveEnd()">
+      <button
+        class="move"
+        @click="moveEnd()"
+        :disabled="page === lastPageNumber"
+      >
         <i class="pi pi-angle-double-right"></i>
       </button>
     </div>
@@ -105,8 +113,9 @@ const getPages = () => {
 .active {
   font-weight: bold;
   border-radius: 50%;
-  background-color: #14b8a6;
-  color: white;
+  color: #ffffff;
+  background: #10b981;
+  border: 1px solid #10b981;
   display: block;
   width: 40px;
   height: 40px;
@@ -151,4 +160,7 @@ a {
   text-decoration: none;
   color: black;
 }
+button:disabled {
+  cursor: default;
+}
 </style>
diff --git a/components/PropertiesSelector.vue b/components/PropertiesSelector.vue
@@ -1,36 +1,49 @@
 <template>
   <p class="title">Properties</p>
   <Tree
+    v-model:selectionKeys="selectedKeys"
+    @change="update"
     :value="getNodes()"
     selectionMode="checkbox"
     class="w-full md:w-30rem no-border"
   ></Tree>
 </template>
 
 <script setup lang="ts">
-const { categoryId } = defineProps({
-  categoryId: {
-    type: Number,
+import { ref } from "vue";
+
+type Emits = {
+  (event: "filter", value: Number[]): void;
+};
+
+const emit = defineEmits<Emits>();
+const { selectedProps, data } = defineProps({
+  selectedProps: {
+    type: Array as () => Array<Number>,
+    required: false,
+  },
+  data: {
+    type: Array as () => Array<object>,
     required: true,
   },
 });
 
-const { data } = await useAsyncGql("getParametrs", { categoryId: categoryId });
-const getNodes = () => {
-  const properties: Object[] = [];
-  const rawProperties =
-    data.value?.queryProduct.extraResults.facetSummary?.parameterValues;
+const selectedKeys = ref<object>(getSelectedKeys());
+
+function getNodes(): object[] {
+  const properties: object[] = [];
+  const rawProperties = data;
   if (rawProperties) {
     for (let i = 0; i < rawProperties.length; i++) {
       let property = {
-        key: i,
+        key: "ignore-" + i,
         label: rawProperties[i].groupEntity?.attributes?.name,
-        data: rawProperties[i].groupEntity?.attributes?.name,
-        children: new Array<Object>(),
+        data: rawProperties[i].groupEntity?.attributes?.code,
+        children: new Array<object>(),
       };
       for (let j = 0; j < rawProperties[i].facetStatistics.length; j++) {
         property.children.push({
-          key: i + "-" + j,
+          key: rawProperties[i].facetStatistics[j].facetEntity?.primaryKey,
           label:
             rawProperties[i].facetStatistics[j].facetEntity?.attributes?.name,
           data: rawProperties[i].facetStatistics[j].facetEntity?.attributes
@@ -41,7 +54,30 @@ const getNodes = () => {
     }
   }
   return properties;
-};
+}
+
+function getSelectedKeys(): object {
+  let selected = {};
+  for(const num of selectedProps){
+    selected[`${num}`] = {
+      checked: true,
+      partialChecked: false
+    }
+  }
+  return {
+    /*108656: { checked: true, partialChecked: false }, 108701: { checked: true, partialChecked: false }*/
+  };
+}
+
+function update(): void {
+  const checked: Number[] = [];
+  for (const item in selectedKeys.value) {
+    if (!item.includes("ignore-")) {
+      checked.push(parseInt(item));
+    }
+  }
+  emit("filter", checked);
+}
 </script>
 
 <style scoped>

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -2,9 +2,6 @@
 import { resolve } from "path";
 
 export default defineNuxtConfig({
-  typescript: {
-    typeCheck: true,
-  },
   primevue: {
     usePrimeVue: true,
     options: {
@@ -14,7 +11,7 @@ export default defineNuxtConfig({
   css: [
     "primevue/resources/themes/lara-light-green/theme.css",
     "primeicons/primeicons.css",
-    "primeflex/primeflex.css",
+    "primeflex/primeflex.css"
   ],
   devtools: { enabled: true },
   modules: ["nuxt-graphql-client", "nuxt-primevue", "@nuxt/image"],