From 5110851b06c81e236fe6ee77bc12f24ce66f45c4 Mon Sep 17 00:00:00 2001 From: NaMax66 Date: Mon, 15 Jul 2024 12:37:04 +0200 Subject: [PATCH] chore: separate builder.io components --- .../matcher/{ => builderIo}/builder-io.vue | 4 +- .../matcher/builderIo/customCompunents.ts | 221 ++++++++++++++++++ client-app/pages/matcher/matcher.vue | 9 +- .../shared/static-content/components/index.ts | 215 ----------------- 4 files changed, 228 insertions(+), 221 deletions(-) rename client-app/pages/matcher/{ => builderIo}/builder-io.vue (95%) create mode 100644 client-app/pages/matcher/builderIo/customCompunents.ts diff --git a/client-app/pages/matcher/builder-io.vue b/client-app/pages/matcher/builderIo/builder-io.vue similarity index 95% rename from client-app/pages/matcher/builder-io.vue rename to client-app/pages/matcher/builderIo/builder-io.vue index 59b85da7f..d9e8d821b 100644 --- a/client-app/pages/matcher/builder-io.vue +++ b/client-app/pages/matcher/builderIo/builder-io.vue @@ -11,8 +11,8 @@ import { onMounted, ref, shallowRef, watchEffect } from "vue"; import { onBeforeRouteUpdate } from "vue-router"; import { usePageHead } from "@/core/composables"; import { IS_DEVELOPMENT } from "@/core/constants"; -import { builderIOComponents } from "@/shared/static-content"; -import type { StateType } from "./priorityManager"; +import { builderIOComponents } from "./customCompunents"; +import type { StateType } from "../priorityManager"; import type { BuilderContent } from "@builder.io/sdk-vue"; interface IEmits { diff --git a/client-app/pages/matcher/builderIo/customCompunents.ts b/client-app/pages/matcher/builderIo/customCompunents.ts new file mode 100644 index 000000000..82c918a69 --- /dev/null +++ b/client-app/pages/matcher/builderIo/customCompunents.ts @@ -0,0 +1,221 @@ +import { defineAsyncComponent } from "vue"; +import type { Component } from "vue"; + +const Category = defineAsyncComponent(() => import("@/shared/catalog/components/category.vue")); +const Slider = defineAsyncComponent(() => import("@/shared/static-content/components/slider.vue")); +const ProductsBlock = defineAsyncComponent(() => import("@/shared/static-content/components/products-block.vue")); + +export const builderIOComponents: Array = [ + { + name: "Category", + component: Category, + inputs: [ + { + name: "title", + type: "string", + defaultValue: "Custom Category", + }, + { + name: "hideBreadcrumbs", + type: "boolean", + }, + { + name: "hideSidebar", + type: "boolean", + }, + { + name: "hideControls", + type: "boolean", + }, + { + name: "hideSorting", + type: "boolean", + }, + { + name: "viewMode", + type: "string", + defaultValue: "", + enum: ["", "grid", "list"], + helperText: "Fixing the View Mode", + showIf: `options.get('hideViewModeSelector') === false`, + }, + { + name: "filtersOrientation", + type: "string", + defaultValue: "vertical", + enum: ["vertical", "horizontal"], + helperText: "Show filters vertically or horizontally", + }, + { + name: "cardType", + type: "string", + defaultValue: "full", + helperText: "Card type for grid view mode", + enum: ["full", "short"], + }, + { + name: "columnsAmountTablet", + type: "string", + defaultValue: "3", + enum: ["3", "2"], + }, + { + name: "columnsAmountDesktop", + type: "string", + defaultValue: "4", + enum: ["4", "3"], + }, + { + name: "keyword", + type: "string", + }, + { + name: "filter", + type: "string", + helperText: + "On your website open Developer Tools(right-click a page and select 'Inspect'). Filter products that needed in the Catalog. Then go to Network -> graphql -> operationName: 'SearchProducts' -> variables -> copy filter", + }, + { + name: "countLimitation", + type: "boolean", + helperText: "Turn on to set up products count limitation", + onChange: "options.set('fixedProductsCount', 0)", + }, + { + showIf: `options.get('countLimitation') === true`, + name: "fixedProductsCount", + type: "number", + defaultValue: 0, + onChange: (options: Map) => { + const count = options.get("fixedProductsCount"); + if (typeof count !== "number") { + return; + } + if (count > 20) { + options.set("fixedProductsCount", 20); + alert("the maximum number of cards is 20"); + } + }, + }, + { + name: "hideTotal", + type: "boolean", + showIf: `options.get('countLimitation') === false`, + helperText: "hidden if Count Limitation is active", + }, + { + name: "allowSetMeta", + type: "boolean", + defaultValue: false, + helperText: "Allow the component to set SEO meta tags based on fetched category", + }, + ], + }, + { + name: "Products", + component: ProductsBlock, + inputs: [ + { + name: "title", + type: "string", + defaultValue: "Products Block", + }, + { + name: "cardType", + type: "string", + defaultValue: "full", + enum: ["full", "short"], + }, + { + name: "count", + type: "number", + defaultValue: 4, + friendlyName: "Cards amount", + onChange: (options: Map) => { + const count = options.get("count"); + if (typeof count !== "number") { + return; + } + if (count > 12) { + options.set("count", 12); + alert("the maximum number of cards is 12"); + } + }, + }, + { + name: "columnsAmountTablet", + type: "string", + defaultValue: "3", + enum: ["3", "2"], + }, + { + name: "columnsAmountDesktop", + type: "string", + defaultValue: "4", + enum: ["4", "3"], + }, + { + name: "query", + friendlyName: "Keyword", + type: "string", + }, + { + name: "filter", + type: "string", + helperText: + "On your website open Developer Tools(right-click a page and select 'Inspect'). Filter products that needed in the Catalog. Then go to Network -> graphql -> operationName: 'SearchProducts' -> variables -> copy filter", + }, + ], + }, + { + component: Slider, + name: "Slider", + inputs: [ + { + name: "title", + type: "string", + defaultValue: "Slider", + }, + { + name: "subtitle", + type: "string", + defaultValue: "Subtitle", + }, + { + name: "height", + type: "string", + defaultValue: "auto", + enum: ["small", "medium", "large", "auto"], + }, + { + name: "slides", + type: "list", + subFields: [ + { + id: "image", + name: "image", + type: "file", + allowedFileTypes: ["jpeg", "jpg", "png", "svg"], + }, + { + name: "title", + id: "title", + label: "Title", + type: "string", + }, + { + name: "text", + id: "text", + type: "string", + }, + ], + }, + ], + }, +]; + +type BuilderIOComponentType = { + component: Component; + inputs: Array; + name: string; +}; diff --git a/client-app/pages/matcher/matcher.vue b/client-app/pages/matcher/matcher.vue index 057591b01..857789f8a 100644 --- a/client-app/pages/matcher/matcher.vue +++ b/client-app/pages/matcher/matcher.vue @@ -25,14 +25,11 @@