├── src
    ├── declarations.d.ts
    ├── pages
    │   ├── TableListing.vue
    │   ├── FormPage.vue
    │   ├── TableListingDetail.vue
    │   ├── DashboardPage.vue
    │   ├── AlertsPage.vue
    │   └── ComponentsPage.vue
    ├── assets
    │   └── logo.png
    ├── auto-imports.d.ts
    ├── types
    │   ├── index.ts
    │   └── Product.ts
    ├── mocks
    │   ├── top-categories.json
    │   ├── top-products.json
    │   ├── products.ts
    │   ├── roles.json
    │   └── products.json
    ├── components
    │   ├── ProductsListing
    │   │   ├── ProductDetail.vue
    │   │   ├── ProductsListing.unit.ts
    │   │   ├── ProductsPage.vue
    │   │   ├── PrdocutsListingBody
    │   │   │   ├── ProductsListingBody.css
    │   │   │   └── ProductsListingBody.vue
    │   │   ├── ProductsListing.css
    │   │   ├── ProductsListingHeader
    │   │   │   ├── ProductsListingHeader.vue
    │   │   │   └── ProductsListingFiltersModal.vue
    │   │   └── ProductsListing.vue
    │   ├── LoadingOverlay
    │   │   └── LoadingOverlay.vue
    │   ├── Breadcrumbs
    │   │   ├── LinkBreadcrumb.vue
    │   │   └── Breadcrumbs.vue
    │   ├── InputLabel
    │   │   └── InputLabel.vue
    │   ├── Statistics
    │   │   └── Statistics.vue
    │   ├── ColumnTemplates
    │   │   ├── ProductStockColumnTemplate.vue
    │   │   ├── StringColumnTemplate.vue
    │   │   ├── ImageColumnTemplate.vue
    │   │   ├── ProductActionsColumnTemplate.vue
    │   │   └── StatusColumnTemplate.vue
    │   ├── TopStatistics
    │   │   └── TopStatistics.vue
    │   ├── ImagePlaceholderWrapper
    │   │   └── ImagePlaceholderWrapper.vue
    │   └── UserForm
    │   │   └── UserForm.vue
    ├── composables
    │   ├── useAddonProperties.ts
    │   ├── useDeleteProductMutation.ts
    │   ├── useProductListingFilters.ts
    │   ├── useFetchTopProductsQuery.ts
    │   ├── useFetchTopCategoriesQuery.ts
    │   ├── useDeleteProductsMutation.ts
    │   └── useFetchProductsQuery.ts
    ├── standalone.ts
    ├── router.ts
    ├── vite-env.d.ts
    ├── app.css
    ├── add-on.ts
    ├── App.vue
    ├── vue-bootstrap.ts
    ├── utils.ts
    ├── index.html
    ├── manifest.ts
    ├── components.d.ts
    └── routes.ts
├── server-ssl
    ├── default.conf
    ├── README.md
    └── generate-ssl.sh
├── .lintstagedrc.cjs
├── postcss.config.cjs
├── .env.example
├── scripts
    └── prepare.sh
├── .editorconfig
├── tailwind.config.cjs
├── tsconfig.node.json
├── .gitignore
├── vitest-setup.ts
├── LICENSE
├── tsconfig.json
├── public
    └── vite.svg
├── renovate.json5
├── .eslintrc.cjs
├── vite-plugins
    ├── aboutYouAddonLoader.ts
    ├── aboutYouGlobalWindowEventLoader.ts
    ├── aboutYouVueStyleLoader.ts
    └── aboutYouStyleLoader.ts
├── README.md
├── package.json
└── vite.config.ts


/src/declarations.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.css';
2 | declare module 'dom-storage';
3 | 


--------------------------------------------------------------------------------
/src/pages/TableListing.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |     <router-view></router-view>
3 | </template>
4 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/scayle/demo-add-on-vite/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/server-ssl/default.conf:
--------------------------------------------------------------------------------
1 | [req]
2 | distinguished_name=req
3 | [SAN]
4 | subjectAltName=DNS:{{SERVER_HOST}}
5 | 


--------------------------------------------------------------------------------
/src/auto-imports.d.ts:
--------------------------------------------------------------------------------
1 | // Generated by 'unplugin-auto-import'
2 | export {}
3 | declare global {
4 | 
5 | }
6 | 


--------------------------------------------------------------------------------
/.lintstagedrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   '*.{ts,js,cjs,vue}': [
3 |       'bash -c "vue-tsc --noEmit"',
4 |       'eslint --fix'
5 |   ]
6 | }
7 | 


--------------------------------------------------------------------------------
/src/types/index.ts:
--------------------------------------------------------------------------------
1 | import { RouteDefinition } from "@scayle/add-on-utils";
2 | 
3 | export type GroupRouteDefinition = RouteDefinition | { isGroup: boolean }
4 | 


--------------------------------------------------------------------------------
/server-ssl/README.md:
--------------------------------------------------------------------------------
1 | The vite dev server looks in this folder for a default.crt and default.key file to use for https.
2 | 
3 | **To generate ssl certificate run** `npm run generate:ssl`
4 | 


--------------------------------------------------------------------------------
/postcss.config.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |     plugins: {
3 |         tailwindcss: {},
4 |         autoprefixer: {},
5 |         'postcss-logical': {},
6 |         'postcss-dir-pseudo-class': { preserve: true }
7 |     }
8 | };
9 | 


--------------------------------------------------------------------------------
/src/mocks/top-categories.json:
--------------------------------------------------------------------------------
1 | [{"id":1,"name":"Clothes","sold":120},
2 | {"id":2,"name":"Shoes","sold":88},
3 | {"id":3,"name":"Glasses","sold":55},
4 | {"id":4,"name":"Hats","sold":32},
5 | {"id":5,"name":"Watches","sold":15}]
6 | 


--------------------------------------------------------------------------------
/.env.example:
--------------------------------------------------------------------------------
1 | # ENV not exposed to application
2 | CONFIG_SERVER_HOST=demo-add-on.cloud-panel.aboutyou.test
3 | CONFIG_SERVER_PORT=8082
4 | 
5 | # ENV exposed application (with PANEL_, prefix)
6 | PANEL_ADDON_IDENTIFIER=demo
7 | PANEL_USE_SHADOW_DOM=true
8 | 


--------------------------------------------------------------------------------
/scripts/prepare.sh:
--------------------------------------------------------------------------------
 1 | #! /bin/bash
 2 | 
 3 | SCRIPT_DIR=$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )
 4 | ROOT_DIR=$SCRIPT_DIR/../
 5 | 
 6 | cd "$ROOT_DIR"
 7 | 
 8 | if ! [ -f ".env" ]; then
 9 |     cp .env.example .env
10 | fi
11 | 


--------------------------------------------------------------------------------
/src/components/ProductsListing/ProductDetail.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <h3>Product ID: {{ id }}</h3>
 3 | </template>
 4 | 
 5 | <script lang="ts" setup>
 6 | import { useRoute } from 'vue-router';
 7 | 
 8 | const id = useRoute().params.id;
 9 | </script>
10 | 


--------------------------------------------------------------------------------
/src/mocks/top-products.json:
--------------------------------------------------------------------------------
1 | [{"id":1,"name":"\"Tim\" Pullover","sold":55},
2 | {"id":2,"name":"\"Dan\" Sneaker","sold":50},
3 | {"id":3,"name":"\"Hermine\" Schal","sold":26},
4 | {"id":4,"name":"\"Susi\" Shirt","sold":18},
5 | {"id":5,"name":"\"Dana\" Sportshirt","sold":5}]
6 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | end_of_line = lf
 6 | insert_final_newline = true
 7 | indent_style = space
 8 | indent_size = 4
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.yml]
12 | indent_size = 2
13 | 
14 | [*.md]
15 | trim_trailing_whitespace = false
16 | 


--------------------------------------------------------------------------------
/src/types/Product.ts:
--------------------------------------------------------------------------------
 1 | export type ProductStatus = 'blocked' | 'problem' | 'live';
 2 | 
 3 | export type Product = {
 4 |     id: number;
 5 |     product_id: number;
 6 |     name: string,
 7 |     merchant: string;
 8 |     status: ProductStatus;
 9 |     image_hash: string;
10 |     stock: { stockCount: string; variantCount: number; }
11 | };
12 | 


--------------------------------------------------------------------------------
/src/composables/useAddonProperties.ts:
--------------------------------------------------------------------------------
1 | import { inject, InjectionKey } from 'vue';
2 | import { AddOnCustomProps } from '@scayle/add-on-utils';
3 | 
4 | export const ADDON_PROPERTIES_KEY: InjectionKey<AddOnCustomProps> = Symbol('addonPropertiesKey');
5 | 
6 | export default function useAddonProperties() {
7 |     return inject(ADDON_PROPERTIES_KEY);
8 | }
9 | 


--------------------------------------------------------------------------------
/src/standalone.ts:
--------------------------------------------------------------------------------
 1 | // This entrypoint is used to create a standalone version of the app as
 2 | // an alternative to loading it as an add-on
 3 | import { createApp } from 'vue';
 4 | import { initVuePlugins } from '@/vue-bootstrap';
 5 | import App from './App.vue';
 6 | 
 7 | const app = createApp(App);
 8 | 
 9 | initVuePlugins(app);
10 | 
11 | app.mount("#app");
12 | 


--------------------------------------------------------------------------------
/src/router.ts:
--------------------------------------------------------------------------------
 1 | import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
 2 | import { routes } from '@/routes';
 3 | import { BASE_URL } from './utils';
 4 | 
 5 | export default createRouter({
 6 |     routes: routes as RouteRecordRaw[],
 7 |     // Make sure to set the base because all add-on pages will be under add-ons/demo
 8 |     history: createWebHashHistory(BASE_URL),
 9 | });
10 | 
11 | 


--------------------------------------------------------------------------------
/src/components/LoadingOverlay/LoadingOverlay.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="spinner-overlay">
 3 |     <AySpinner />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |     name: 'LoadingOverlay',
10 | };
11 | </script>
12 | 
13 | <style scoped>
14 |     .spinner-overlay {
15 |         @apply absolute left-0 top-0 w-full h-full flex justify-center items-center z-10;
16 |     }
17 | </style>
18 | 


--------------------------------------------------------------------------------
/tailwind.config.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     presets: [require('@scayle/tailwind-base')],
 3 |     mode: 'jit',
 4 |     content: [
 5 |         'src/**/*.js',
 6 |         'src/**/*.ts',
 7 |         'src/**/*.vue',
 8 |         'src/**/*.html',
 9 |     ],
10 |     plugins: [
11 |         require('tailwindcss-logical'),
12 |         require('@scayle/tailwind-base/plugins/base.js'),
13 |         require('@scayle/tailwind-base/plugins/element-plus.js')
14 |     ],
15 | };
16 | 


--------------------------------------------------------------------------------
/src/composables/useDeleteProductMutation.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Internal dependencies.
 3 |  */
 4 | import { Product } from '@/types/Product';
 5 | import useDeleteProductsMutation from '@/composables/useDeleteProductsMutation';
 6 | 
 7 | export default function useDeleteProductMutation() {
 8 |     const { deleteProducts, ...rest } = useDeleteProductsMutation();
 9 |     const deleteProduct = (id: Product['id']) => deleteProducts([id]);
10 | 
11 |     return {
12 |         ...rest,
13 |         deleteProduct
14 |     };
15 | }
16 | 


--------------------------------------------------------------------------------
/src/composables/useProductListingFilters.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * External dependencies.
 3 |  */
 4 | 
 5 | import { ref } from 'vue';
 6 | 
 7 | /**
 8 |  * Internal dependencies.
 9 |  */
10 | import { ProductsFilters } from '@/composables/useFetchProductsQuery';
11 | 
12 | export default function useProductListingFilters() {
13 |     const page = ref(1);
14 |     const perPage = ref(30);
15 |     const filters = ref<ProductsFilters>({});
16 | 
17 |     return {
18 |         page,
19 |         perPage,
20 |         filters,
21 |     }
22 | }
23 | 


--------------------------------------------------------------------------------
/src/components/ProductsListing/ProductsListing.unit.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * External dependencies.
 3 |  */
 4 | import { mount } from '@vue/test-utils';
 5 | import { it, describe, expect } from 'vitest';
 6 | 
 7 | /**
 8 |  * Internal dependencies.
 9 |  */
10 | import ProductsListing from './ProductsListing.vue';
11 | 
12 | describe('ProductsListing.vue', () => {
13 |     it('can be render', () => {
14 |         const wrapper = mount(ProductsListing);
15 | 
16 |         expect(wrapper.find('.spinner').exists()).toBeTruthy();
17 |     });
18 | });
19 | 


--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
 1 | import type { AddOnCustomProps } from '@scayle/add-on-utils';
 2 | 
 3 | /// <reference types="vite/client" />
 4 | 
 5 | declare module '*.vue' {
 6 |   import type { DefineComponent } from 'vue'
 7 |   const component: DefineComponent<{}, {}, any>
 8 |   export default component
 9 | }
10 | 
11 | // TODO: Could this be added to the add-on-utils and added automatically?
12 | // How does vue-router do it?
13 | declare module '@vue/runtime-core' {
14 |     interface ComponentCustomProperties {
15 |         $addOn: AddOnCustomProps
16 |     }
17 | }
18 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "compilerOptions": {
 3 |         "composite": true,
 4 |         "module": "ESNext",
 5 |         "baseUrl": ".",
 6 |         "paths": {
 7 |             "@/*": [
 8 |                 "./src/*"
 9 |             ]
10 |         },
11 |         "moduleResolution": "Node",
12 |         "lib": [
13 |             "ESNext"
14 |         ],
15 |         "allowSyntheticDefaultImports": true
16 |     },
17 |     "include": [
18 |         "vite.config.ts",
19 |         "vite.add-on.config.ts",
20 |         "vitest-setup.ts",
21 |         "vite-plugins/**/*.ts",
22 | 		"src/declarations.d.ts"
23 |     ]
24 | }
25 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 
26 | server-ssl/*
27 | !server-ssl/README.md
28 | !server-ssl/generate-ssl.sh
29 | !server-ssl/default.conf
30 | 
31 | .env
32 | coverage
33 | junit.xml
34 | 
35 | # ignore types generated from unit tests (src are the vital ones)
36 | auto-imports.d.ts
37 | components.d.ts
38 | 


--------------------------------------------------------------------------------
/src/composables/useFetchTopProductsQuery.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * External dependencies.
 3 |  */
 4 | import { useQuery } from '@tanstack/vue-query';
 5 | 
 6 | /**
 7 |  * Internal dependencies.
 8 |  */
 9 | import { startTimeout } from '@/utils';
10 | 
11 | export default function useFetchTopProductsQuery() {
12 |     const {
13 |         data,
14 |         isLoading,
15 |     } = useQuery<any>(['top-products'], async () => {
16 |         await startTimeout(1000);
17 |         const { default: products } = await import('@/mocks/top-products.json');
18 | 
19 |         return products;
20 |     });
21 | 
22 |     return {
23 |         isLoading,
24 |         products: data,
25 |     }
26 | }
27 | 


--------------------------------------------------------------------------------
/src/composables/useFetchTopCategoriesQuery.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * External dependencies.
 3 |  */
 4 | import { useQuery } from '@tanstack/vue-query';
 5 | 
 6 | /**
 7 |  * Internal dependencies.
 8 |  */
 9 | import { startTimeout } from '@/utils';
10 | 
11 | export default function useFetchTopCategoriesQuery() {
12 |     const {
13 |         data,
14 |         isLoading,
15 |     } = useQuery<any>(['top-categories'], async () => {
16 |         await startTimeout(2000);
17 |         const { default: categories } = await import('@/mocks/top-categories.json');
18 | 
19 |         return categories;
20 |     });
21 | 
22 |     return {
23 |         isLoading,
24 |         categories: data,
25 |     }
26 | }
27 | 


--------------------------------------------------------------------------------
/src/app.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | .single-spa-container {
 6 |     height: 100%;
 7 |     overflow: hidden;
 8 | }
 9 | 
10 | .ay-input,
11 | .ay-input .ay-input__inner,
12 | .ay-input input {
13 |     width: 100%;
14 | }
15 | 
16 | .ay-select,
17 | .ay-select .ay-popper__reference {
18 |     width: 100%;
19 | }
20 | 
21 | /**
22 |     Temp fix until we use more than one selector
23 |     to style dashboard statistics icon
24 |     as it gets overriden by .icon
25 |  */
26 | .ay-dashboard-statistic .ay-dashboard-statistic__icon {
27 |     display: inline-flex;
28 |     height: 60px;
29 |     width: 60px;
30 | }
31 | 
32 | .single-spa-container {
33 |     --el-color-primary: #0dcc8d !important;
34 | }
35 | 


--------------------------------------------------------------------------------
/src/components/Breadcrumbs/LinkBreadcrumb.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <a
 3 |     :href="url"
 4 |     title="Shops"
 5 |     class="text-dark-grey hover:text-black hover:no-underline truncate"
 6 |   >
 7 |     {{ title }}
 8 |   </a>
 9 | </template>
10 | 
11 | <script lang="ts">
12 | /**
13 |  * External dependencies.
14 |  */
15 | import { defineComponent } from 'vue';
16 | 
17 | /**
18 |  * Internal dependencies.
19 |  */
20 | 
21 | export default defineComponent({
22 |     name: 'LinkBreadcrumb',
23 | 
24 |     props: {
25 |         title: {
26 |             type: String,
27 |             required: true,
28 |         },
29 | 
30 |         url: {
31 |             type: String,
32 |             required: true,
33 |         }
34 |     }
35 | });
36 | </script>
37 | 


--------------------------------------------------------------------------------
/src/add-on.ts:
--------------------------------------------------------------------------------
 1 | import { h, createApp } from 'vue';
 2 | import type { App } from 'vue';
 3 | 
 4 | import type { AddOnCustomProps } from '@scayle/add-on-utils';
 5 | 
 6 | import singleSpaVue from '@scayle/single-spa-vue';
 7 | 
 8 | import { initVuePlugins } from '@/vue-bootstrap';
 9 | import RootApp from './App.vue';
10 | 
11 | 
12 | const vueLifecycles = singleSpaVue<AddOnCustomProps, App>({
13 |     createApp,
14 |     shadow: import.meta.env.PANEL_USE_SHADOW_DOM === 'true',
15 |     appOptions: {
16 |         render() {
17 |             return h(RootApp);
18 |         },
19 |         el: '#app',
20 |     },
21 |     handleInstance(instance, props) {
22 |         initVuePlugins(instance, { addonCustomProps: props });
23 |     },
24 | });
25 | 
26 | export const { bootstrap, mount, unmount } = vueLifecycles;
27 | 


--------------------------------------------------------------------------------
/src/mocks/products.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * External dependencies.
 3 |  */
 4 | 
 5 | /**
 6 |  * Internal dependencies.
 7 |  */
 8 | import { Product } from '@/types/Product';
 9 | 
10 | let products: Product[] = [];
11 | /**
12 |  * We assume we load the products, before any module uses it
13 |  * Do not do this on production, use an API and do the requests on queries or mutations
14 |  */
15 | import('@/mocks/products.json').then((response) => replaceProducts(response.default.data as Product[]))
16 | 
17 | export const replaceProducts = (data: Product[]) => {
18 |     products = [...data];
19 | 
20 |     return products;
21 | }
22 | 
23 | export const removeProducts = (ids: (Product['id'])[]) => {
24 |     return replaceProducts(
25 |         products.filter(product => !ids.includes(product.id)),
26 |     );
27 | }
28 | 
29 | export default () => products;
30 | 


--------------------------------------------------------------------------------
/src/components/InputLabel/InputLabel.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <label
 3 |     :for="inputId"
 4 |     class="label"
 5 |   >
 6 |     <span class="label-text">
 7 |       {{ label }}
 8 |     </span>
 9 | 
10 |     <slot :input-id="inputId" />
11 |   </label>
12 | </template>
13 | 
14 | <script lang="ts">
15 | /**
16 |  * External dependencies.
17 |  */
18 | import { nanoid } from 'nanoid';
19 | import { defineComponent } from 'vue';
20 | 
21 | /**
22 |  * Internal dependencies.
23 |  */
24 | 
25 | export default defineComponent({
26 |     name: 'InputLabel',
27 | 
28 |     props: {
29 |       label: {
30 |           type: String,
31 |           required: true,
32 |       }
33 |     },
34 | 
35 |     setup() {
36 |         const inputId = 'input-' + nanoid();
37 | 
38 |         return {
39 |             inputId,
40 |         }
41 |     }
42 | });
43 | </script>
44 | 


--------------------------------------------------------------------------------
/vitest-setup.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * External dependencies.
 3 |  */
 4 | // This script is run to set up the environment for the unit tests
 5 | // We want to mock the $addOn data in components and also provide
 6 | // fake local and session storage APIs
 7 | import Storage from 'dom-storage';
 8 | import { config } from '@vue/test-utils';
 9 | import { VueQueryPlugin } from '@tanstack/vue-query';
10 | import { AddOnPropsPlugin, mockCustomProps }  from '@scayle/add-on-utils';
11 | 
12 | /**
13 |  * Internal dependencies.
14 |  */
15 | // @ts-ignore
16 | import router from './src/router';
17 | 
18 | (global as any).localStorage = new Storage(null, { strict: true });
19 | (global as any).sessionStorage = new Storage(null, { strict: true });
20 | 
21 | config.global.plugins = [
22 |     [AddOnPropsPlugin, {customProps: mockCustomProps()}],
23 |     [VueQueryPlugin],
24 |     [router]
25 | ];
26 | 


--------------------------------------------------------------------------------
/src/pages/FormPage.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Breadcrumbs
 3 |     title="Form"
 4 |     :breadcrumbs="breadcrumbs"
 5 |   />
 6 | 
 7 |   <UserForm />
 8 | </template>
 9 | 
10 | <script lang="ts">
11 | /**
12 |  * External dependencies.
13 |  */
14 | import { defineComponent } from 'vue';
15 | 
16 | /**
17 |  * Internal dependencies.
18 |  */
19 | import UserForm from '@/components/UserForm/UserForm.vue';
20 | import Breadcrumbs from '../components/Breadcrumbs/Breadcrumbs.vue';
21 | 
22 | export default defineComponent({
23 |     name: 'FormPage',
24 | 
25 |     components: { UserForm, Breadcrumbs },
26 | 
27 |     setup() {
28 |         const breadcrumbs = [
29 |             {
30 |                 title: 'General',
31 |             },
32 | 
33 |             {
34 |                 title: 'Form',
35 |             }
36 |         ];
37 | 
38 |         return {
39 |             breadcrumbs,
40 |         }
41 |     }
42 | });
43 | </script>
44 | 


--------------------------------------------------------------------------------
/src/components/Statistics/Statistics.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="bg-white p-4 rounded grid grid-cols-3 gap-5">
 3 |     <AyDashboardStatistic
 4 |       secondary-label="Revenue"
 5 |       value="€5100.34"
 6 |       color="gray"
 7 |     >
 8 |       <IconMoney />
 9 |     </AyDashboardStatistic>
10 | 
11 |     <AyDashboardStatistic
12 |       secondary-label="Orders"
13 |       value="3000"
14 |       color="gray"
15 |     >
16 |       <IconParcel />
17 |     </AyDashboardStatistic>
18 | 
19 |     <AyDashboardStatistic
20 |       secondary-label="New Customers"
21 |       value="4000"
22 |       color="gray"
23 |     >
24 |       <IconUser />
25 |     </AyDashboardStatistic>
26 |   </div>
27 | </template>
28 | 
29 | <script lang="ts">
30 | /**
31 |  * External dependencies.
32 |  */
33 | import { defineComponent } from 'vue';
34 | 
35 | /**
36 |  * Internal dependencies.
37 |  */
38 | 
39 | export default defineComponent({
40 |     name: 'Statistics'
41 | });
42 | </script>
43 | 


--------------------------------------------------------------------------------
/src/composables/useDeleteProductsMutation.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * External dependencies.
 3 |  */
 4 | 
 5 | import { useMutation, useQueryClient } from '@tanstack/vue-query';
 6 | 
 7 | /**
 8 |  * Internal dependencies.
 9 |  */
10 | import { startTimeout } from '@/utils';
11 | import { Product } from '@/types/Product';
12 | import { replaceProducts, removeProducts } from '@/mocks/products';
13 | 
14 | export default function useDeleteProductsMutation() {
15 |     const queryClient = useQueryClient();
16 |     const {
17 |         isLoading: isDeleting,
18 |         mutateAsync: deleteProducts,
19 |     } = useMutation({
20 |         mutationFn: async (ids: (Product['id'])[]) => {
21 |             await startTimeout(1000);
22 | 
23 |             removeProducts(ids);
24 |         },
25 |         onSuccess: () => {
26 |             return queryClient.invalidateQueries(['products']);
27 |         }
28 |     });
29 | 
30 |     return {
31 |         isDeleting,
32 |         deleteProducts,
33 |     };
34 | }
35 | 


--------------------------------------------------------------------------------
/src/components/ColumnTemplates/ProductStockColumnTemplate.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <span class="break-normal">
 4 |       {{ `${payload.stockCount} in stock for ${payload.variantCount} variants` }}
 5 |     </span>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script lang="ts">
10 | /**
11 |  * External dependencies.
12 |  */
13 | import { defineComponent, PropType } from 'vue';
14 | 
15 | /**
16 |  * Internal dependencies.
17 |  */
18 | import { Product } from '@/types/Product';
19 | 
20 | export default defineComponent({
21 |     name: 'ProductStockColumnTemplate',
22 | 
23 |     props: {
24 |         column: {
25 |             type: Object,
26 |             default() {
27 |                 return {};
28 |             },
29 |         },
30 | 
31 |         payload: {
32 |             type: Object as PropType<Product['stock']>,
33 |             required: true,
34 |         },
35 | 
36 |         fullPayload: {
37 |             type: Object,
38 |             required: true,
39 |         },
40 |     },
41 | });
42 | </script>
43 | 


--------------------------------------------------------------------------------
/src/components/ProductsListing/ProductsPage.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <Breadcrumbs
 3 |       title="Table Listing"
 4 |       :breadcrumbs="breadcrumbs"
 5 |     />
 6 | 
 7 |     <ProductsListing />
 8 |   </template>
 9 | 
10 |   <script lang="ts">
11 |   /**
12 |    * External dependencies.
13 |    */
14 |   import { defineComponent } from 'vue';
15 | 
16 |   /**
17 |    * Internal dependencies.
18 |    */
19 |   import Breadcrumbs from '@/components/Breadcrumbs/Breadcrumbs.vue';
20 |   import ProductsListing from '@/components/ProductsListing/ProductsListing.vue';
21 | 
22 |   export default defineComponent({
23 |       name: 'ProductsPage',
24 |       components: { Breadcrumbs, ProductsListing },
25 | 
26 |       setup() {
27 |           const breadcrumbs = [
28 |               {
29 |                   title: 'Listings',
30 |               },
31 |               {
32 |                   title: 'Table Listing',
33 |               }
34 |           ];
35 | 
36 |           return {
37 |               breadcrumbs,
38 |           }
39 |       }
40 |   });
41 |   </script>
42 | 


--------------------------------------------------------------------------------
/src/components/ProductsListing/PrdocutsListingBody/ProductsListingBody.css:
--------------------------------------------------------------------------------
 1 | .el-table :deep(.el-table__cell) {
 2 |     @apply text-black;
 3 |     font-size: 13px;
 4 |     padding: 12px 10px;
 5 |     border-top: none;
 6 |     border-bottom: none;
 7 |     vertical-align: middle;
 8 | }
 9 | 
10 | .el-table :deep(.el-scrollbar) {
11 |     @apply overflow-auto;
12 | }
13 | 
14 | .el-table :deep(.table-column-names-row th) {
15 |     @apply bg-light text-black;
16 | 
17 |     border-top: 1px solid #e9eaec;
18 |     border-bottom: none;
19 |     font-size: 13px;
20 |     font-weight: bold;
21 |     padding: 5px 10px;
22 | }
23 | 
24 | .el-table :deep(.table-column-names-row .cell) {
25 |     @apply inline-flex;
26 |     line-height: 1;
27 | }
28 | 
29 | .el-table :deep(.table-column-names-row .cell .column-name-wrapper) {
30 |     padding: 0;
31 |     line-height: 1.5;
32 |     width: 100%;
33 | }
34 | 
35 | .el-table :deep(.table-column-names-row .cell .column-name-wrapper .column-name) {
36 |     vertical-align: middle;
37 |     padding: 0;
38 |     line-height: 1.5;
39 | }
40 | 


--------------------------------------------------------------------------------
/src/components/ColumnTemplates/StringColumnTemplate.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <span
 3 |     class="break-normal"
 4 |     :class="column.extraClasses"
 5 |   >
 6 |     {{ content }}
 7 |   </span>
 8 | </template>
 9 | <script lang="ts">
10 | /**
11 |  * External dependencies.
12 |  */
13 | import { computed, defineComponent, toRefs } from 'vue';
14 | 
15 | /**
16 |  * Internal dependencies.
17 |  */
18 | 
19 | export default defineComponent({
20 |     name: 'StringColumnTemplate',
21 | 
22 |     props: {
23 |         column: {
24 |             type: Object,
25 |             default: () => ({}),
26 |         },
27 |         payload: {
28 |             type: [String, Number],
29 |             default: null,
30 |         },
31 |         fullPayload: {
32 |             type: Object,
33 |             required: true,
34 |         },
35 |     },
36 | 
37 |     setup(props){
38 |         const { payload, column } = toRefs(props);
39 |         const content = computed(() => payload.value ?? column.value.fallback);
40 | 
41 |         return {
42 |             content,
43 |         }
44 |     },
45 | });
46 | </script>
47 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 ABOUTYOU / Public
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "compilerOptions": {
 3 |         "target": "es2020",
 4 |         "module": "es2020",
 5 |         "moduleResolution": "node",
 6 |         "jsx": "preserve",
 7 |         "baseUrl": ".",
 8 |         "strict": true,
 9 |         "allowJs": true,
10 |         "sourceMap": true,
11 |         "noImplicitAny": true,
12 |         "noImplicitThis": true,
13 |         "resolveJsonModule": true,
14 |         "isolatedModules": true,
15 |         "allowSyntheticDefaultImports": true,
16 |         "paths": {
17 |             "@/*": [
18 |                 "./src/*"
19 |             ]
20 |         },
21 |         "lib": [
22 |             "ESNext",
23 |             "DOM"
24 |         ],
25 |         "types": [
26 |             "unplugin-icons/types/vue",
27 |             "vite/client"
28 |         ],
29 |         "noEmit": true,
30 |         "skipLibCheck": true
31 |     },
32 |     "include": [
33 |         "src/**/*.ts",
34 |         "src/**/*.d.ts",
35 |         "src/**/*.tsx",
36 |         "src/**/*.vue"
37 |     ],
38 |     "exclude": [
39 |         "node_modules",
40 |         "src/**/*.unit.ts"
41 |     ],
42 |     "references": [
43 |         {
44 |             "path": "./tsconfig.node.json"
45 |         }
46 |     ]
47 | }
48 | 


--------------------------------------------------------------------------------
/src/pages/TableListingDetail.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <Breadcrumbs
 3 |       :title="'Product ' + id"
 4 |       :breadcrumbs="breadcrumbs"
 5 |     />
 6 | 
 7 |     <ProductDetail />
 8 |   </template>
 9 | 
10 |   <script lang="ts">
11 |   /**
12 |    * External dependencies.
13 |    */
14 |   import { defineComponent } from 'vue';
15 | 
16 |   /**
17 |    * Internal dependencies.
18 |    */
19 |   import Breadcrumbs from '@/components/Breadcrumbs/Breadcrumbs.vue';
20 |   import ProductDetail from '@/components/ProductsListing/ProductDetail.vue';
21 | import { useRoute } from 'vue-router';
22 | 
23 |   export default defineComponent({
24 |       name: 'ProductDetailPage',
25 |       components: { Breadcrumbs, ProductDetail },
26 | 
27 |       setup() {
28 |           const id = useRoute().params.id;
29 | 
30 |           const breadcrumbs = [
31 |               {
32 |                   title: 'Listings',
33 |               },
34 |               {
35 |                   title: 'Table Listing',
36 |               },
37 |               {
38 |                   title: 'Product detail'
39 |               }
40 |           ];
41 | 
42 |           return {
43 |               breadcrumbs,
44 |               id
45 |           }
46 |       }
47 |   });
48 |   </script>
49 | 


--------------------------------------------------------------------------------
/src/pages/DashboardPage.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Breadcrumbs
 3 |     title="Dashboard"
 4 |     :breadcrumbs="breadcrumbs"
 5 |   />
 6 | 
 7 |   <div class="flex flex-col gap-5">
 8 |     <Statistics />
 9 |     <TopStatistics />
10 |   </div>
11 | </template>
12 | 
13 | <script lang="ts">
14 | /**
15 |  * External dependencies.
16 |  */
17 | import { defineComponent } from 'vue';
18 | 
19 | /**
20 |  * Internal dependencies.
21 |  */
22 | import useAddonProperties from '@/composables/useAddonProperties';
23 | import Breadcrumbs from '@/components/Breadcrumbs/Breadcrumbs.vue';
24 | import Statistics from '@/components/Statistics/Statistics.vue';
25 | import TopStatistics from '@/components/TopStatistics/TopStatistics.vue';
26 | 
27 | export default defineComponent({
28 |     name: 'DashboardPage',
29 | 
30 |     components: { TopStatistics, Statistics, Breadcrumbs },
31 | 
32 |     setup() {
33 |         const currentUserName = useAddonProperties()?.currentUser?.name;
34 |         const breadcrumbs = [
35 |             {
36 |                 title: 'Listings'
37 |             },
38 |             {
39 |                 title: 'Dashboard'
40 |             }
41 |         ];
42 | 
43 |         return {
44 |             breadcrumbs,
45 |             currentUserName
46 |         }
47 |     },
48 | });
49 | </script>
50 | 


--------------------------------------------------------------------------------
/src/mocks/roles.json:
--------------------------------------------------------------------------------
 1 | [{"id":1,"name":"Architect","userCount":63},
 2 | {"id":2,"name":"Construction Expeditor","userCount":10},
 3 | {"id":3,"name":"Surveyor","userCount":26},
 4 | {"id":4,"name":"Administrator","userCount":18},
 5 | {"id":5,"name":"Developer","userCount":82},
 6 | {"id":6,"name":"Developer Read Only","userCount":1},
 7 | {"id":7,"name":"Supervisor","userCount":87},
 8 | {"id":8,"name":"Estimator","userCount":23},
 9 | {"id":9,"name":"Key Account Manager","userCount":30},
10 | {"id":10,"name":"Product Shop Manager","userCount":59},
11 | {"id":11,"name":"Construction Foreman","userCount":63},
12 | {"id":12,"name":"Electrician","userCount":90},
13 | {"id":13,"name":"Engineer","userCount":66},
14 | {"id":14,"name":"Marketing Manager","userCount":44},
15 | {"id":15,"name":"Customer Manager","userCount":35},
16 | {"id":16,"name":"Business Manager","userCount":25},
17 | {"id":17,"name":"Quality Assurance","userCount":52},
18 | {"id":18,"name":"Project Manager","userCount":3},
19 | {"id":19,"name":"Campaign Marketing Manager","userCount":11},
20 | {"id":20,"name":"Construction Manager","userCount":75},
21 | {"id":21,"name":"Product Manager","userCount":92},
22 | {"id":22,"name":"Cashier","userCount":69},
23 | {"id":23,"name":"Designed","userCount":9},
24 | {"id":24,"name":"Engineer","userCount":35},
25 | {"id":25,"name":"Construction Worker","userCount":22}]
26 | 


--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container mx-auto flex flex-col h-full">
 3 |     <router-view />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script lang="ts">
 8 | /**
 9 |  * External dependencies.
10 |  */
11 | import { defineComponent, onBeforeMount, onBeforeUnmount } from 'vue';
12 | import componentStyles from '@scayle/components/dist/style.css';
13 | 
14 | /**
15 |  * Internal dependencies.
16 |  */
17 | import appStyles from './app.css';
18 | 
19 | export default defineComponent({
20 |     name: 'App',
21 | 
22 |     setup() {
23 |         const mountStyle = (styleSheet: { use: () => void } | string) => {
24 |             // the css is an object only when shadow dom is enabled
25 |             if (typeof styleSheet !== 'object') {
26 |                 return;
27 |             }
28 | 
29 |             styleSheet.use();
30 |         };
31 |         const unmountStyle = (styleSheet: { unuse: () => void } | string) => {
32 |             // the css is an object only when shadow dom is enabled
33 |             if (typeof styleSheet !== 'object') {
34 |                 return;
35 |             }
36 | 
37 |             styleSheet.unuse();
38 |         };
39 |         onBeforeMount(() => {
40 |             mountStyle(componentStyles);
41 |             mountStyle(appStyles);
42 |         });
43 | 
44 |         onBeforeUnmount(() => {
45 |             unmountStyle(componentStyles);
46 |             unmountStyle(appStyles);
47 |         });
48 |     },
49 | });
50 | </script>
51 | 


--------------------------------------------------------------------------------
/src/vue-bootstrap.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * External dependencies.
 3 |  */
 4 | import ScayleComponents from '@scayle/components';
 5 | import { VueQueryPlugin, VueQueryPluginOptions } from '@tanstack/vue-query';
 6 | import { AddOnCustomProps, AddOnPropsPlugin, mockCustomProps } from '@scayle/add-on-utils';
 7 | 
 8 | /**
 9 |  * Internal dependencies.
10 |  */
11 | import { App } from 'vue';
12 | import { minutesToMilliseconds } from '@/utils';
13 | import { ADDON_PROPERTIES_KEY } from '@/composables/useAddonProperties';
14 | import router from './router';
15 | 
16 | export type InitVuePluginsOptions = {
17 |     addonCustomProps?: AddOnCustomProps,
18 | };
19 | 
20 | export const initVuePlugins = (instance: App<Element>, {
21 |     addonCustomProps
22 | }: InitVuePluginsOptions = {}) => {
23 |     instance
24 |         // Add fake add-on custom props when in standalone mode
25 |         .use(AddOnPropsPlugin, {customProps: addonCustomProps || mockCustomProps()})
26 |         .use(router)
27 |         .use(ScayleComponents)
28 |         .use(VueQueryPlugin, {
29 |             queryClientConfig: {
30 |                 defaultOptions: {
31 |                     queries: {
32 |                         refetchOnMount: false, // do not refetch queries on mount
33 |                         staleTime: minutesToMilliseconds(1)
34 |                     }
35 |                 }
36 |             }
37 |         } as VueQueryPluginOptions);
38 | 
39 |     instance.provide(ADDON_PROPERTIES_KEY, instance.config.globalProperties.$addOn);
40 | }
41 | 


--------------------------------------------------------------------------------
/src/components/ProductsListing/ProductsListing.css:
--------------------------------------------------------------------------------
 1 | .products-listing {
 2 |     @apply flex flex-col w-full bg-white border relative overflow-hidden;
 3 |     border-radius: 5px;
 4 | }
 5 | 
 6 | .products-listing :deep(.products-listing__head) {
 7 |     @apply grid grid-cols-1 gap-2;
 8 | 
 9 |     padding: 15px 20px 15px 20px;
10 | }
11 | 
12 | .products-listing :deep(.products-listing__head-inner) {
13 |     @apply w-full flex justify-between items-center;
14 | }
15 | 
16 | 
17 | .products-listing :deep(.products-listing__meta) {
18 |     @apply text-dark-grey py-2 -mb-4;
19 | 
20 |     border-top: 1px solid #e9eaec;
21 | }
22 | 
23 | .products-listing :deep(.products-listing__filter) {
24 |     @apply p-1 mr-2 bg-dark font-base outline-0 rounded;
25 |     @apply inline-flex items-center;
26 | 
27 |     font-size: 13px;
28 | }
29 | 
30 | .products-listing :deep(.products-listing__filter .icon) {
31 |     @apply cursor-pointer;
32 | }
33 | 
34 | :deep(.products-listing__head .ay-search .ay-search__input) {
35 |     @apply accent-secondary h-[30px] rounded-full;
36 | }
37 | 
38 | .products-listing :deep(.products-listing__body) {
39 |     @apply flex flex-col justify-center overflow-hidden;
40 | }
41 | 
42 | .products-listing__footer :deep(.ay-pagination-layout) {
43 |     border: 0;
44 | }
45 | 
46 | .products-listing__footer :deep(.ay-pagination-layout .ay-pagination-layout__group .ay-select) {
47 |     @apply min-w-[130px] w-[130px];
48 | }
49 | 
50 | .products-listing__footer :deep(.ay-pagination-layout .ay-pagination-layout__group .ay-select__input) {
51 |     @apply min-w-[130px] w-[130px];
52 | }
53 | 


--------------------------------------------------------------------------------
/renovate.json5:
--------------------------------------------------------------------------------
 1 | {
 2 |     "$schema": "https://docs.renovatebot.com/renovate-schema.json",
 3 |     "extends": [
 4 |         "config:base"
 5 |     ],
 6 |     "enabledManagers": ["npm"],
 7 |     "rangeStrategy": "bump",
 8 |     "dependencyDashboard": false,
 9 |     "timezone": "Europe/Berlin",
10 |     "gitLabIgnoreApprovals": true,
11 |     "patch": {
12 |         "prPriority": 30
13 |     },
14 |     "minor": {
15 |         "prPriority": 20
16 |     },
17 |     "major": {
18 |         "prPriority": 10
19 |     },
20 |     "prConcurrentLimit": 12,
21 |     "packageRules": [
22 |         // Minor/patch updates
23 |         {
24 |             "matchUpdateTypes": ["minor", "patch"],
25 |             "labels": ["renovate-minor"],
26 |             "prHourlyLimit": 1,
27 |             "schedule": ["every weekend"],
28 |             "rebaseWhen": "never",
29 |             "groupName": "all non-major dependencies",
30 |             "groupSlug": "all-minor-patch"
31 |         },
32 |         // Major updates
33 |         {
34 |             "matchUpdateTypes": ["major"],
35 |             "labels": ["renovate-major"],
36 |             "schedule": null,
37 |             "rebaseWhen": "never",
38 |             "prHourlyLimit": 2
39 |         },
40 |         // Auto-merge JS deps which won't affect the build (e.g. lint)
41 |         {
42 |             "matchPackagePrefixes": ["eslint", "@types"],
43 |             "matchPackageNames": ["@vue/test-utils", "vitest", "@typescript-eslint/parser"],
44 |             "automerge": true,
45 |             "platformAutomerge": true,
46 |             "labels": ["renovate-auto"],
47 |             "schedule": null,
48 |             "reviewers": [],
49 |             "rebaseWhen": "auto",
50 |             "prHourlyLimit": 2
51 |         },
52 |     ],
53 | }
54 | 


--------------------------------------------------------------------------------
/src/components/ColumnTemplates/ImageColumnTemplate.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="preview-image-placeholder">
 3 |     <ImagePlaceholderWrapper
 4 |       alt=""
 5 |       class="data-table-image flex"
 6 |       :image-url="imageSrc as string"
 7 |     />
 8 |   </div>
 9 | </template>
10 | 
11 | <script lang="ts">
12 | /**
13 |  * External dependencies.
14 |  */
15 | import { computed, defineComponent, toRefs } from 'vue';
16 | 
17 | /**
18 |  * Internal dependencies.
19 |  */
20 | import ImagePlaceholderWrapper from '@/components/ImagePlaceholderWrapper/ImagePlaceholderWrapper.vue';
21 | 
22 | export default defineComponent({
23 |     components: {
24 |         ImagePlaceholderWrapper,
25 |     },
26 |     props: {
27 |         column: {
28 |             type: Object,
29 |             default() {
30 |                 return {};
31 |             },
32 |         },
33 |         payload: {
34 |             type: String,
35 |             default: '',
36 |         },
37 |         fullPayload: {
38 |             type: Object,
39 |             default: () => ({})
40 |         },
41 |     },
42 | 
43 |     setup(props) {
44 |         const { payload } = toRefs(props);
45 |         const imageSrc = computed(() => payload.value ? payload.value : null);
46 | 
47 |         return {
48 |             imageSrc
49 |         }
50 |     },
51 | });
52 | </script>
53 | 
54 | <style scoped>
55 |  .preview-image-placeholder {
56 |     @apply bg-dark;
57 | 
58 |     display: flex;
59 |      width: 29px;
60 |     height: 29px;
61 |     border-radius: 2px;
62 |     position: relative;
63 |  }
64 | 
65 |  .preview-image-placeholder svg {
66 |      width: 14px;
67 |      height: 14px;
68 |      margin: auto;
69 |  }
70 | 
71 |  .preview-image-placeholder svg path {
72 |      @apply fill-primary;
73 |  }
74 | </style>
75 | 


--------------------------------------------------------------------------------
/src/components/TopStatistics/TopStatistics.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="grid grid-cols-2 gap-5">
 3 |     <AyDashboardList
 4 |       :is-loading="isLoadingProducts"
 5 |       title="Top 5 products"
 6 |     >
 7 |       <AyDashboardListItem
 8 |         v-for="(product, index) in products"
 9 |         :key="index"
10 |         :value="product.sold.toString()"
11 |         :label="product.name"
12 |         :initials="getInitials(product.name)"
13 |       />
14 |     </AyDashboardList>
15 | 
16 |     <AyDashboardList
17 |       :is-loading="isLoadingCategories"
18 |       title="Top 5 categories"
19 |     >
20 |       <AyDashboardListItem
21 |         v-for="(category, index) in categories"
22 |         :key="index"
23 |         :value="category.sold.toString()"
24 |         :label="category.name"
25 |         :initials="getInitials(category.name)"
26 |       />
27 |     </AyDashboardList>
28 |   </div>
29 | </template>
30 | 
31 | <script lang="ts">
32 | /**
33 |  * External dependencies.
34 |  */
35 | import { defineComponent } from 'vue';
36 | 
37 | /**
38 |  * Internal dependencies.
39 |  */
40 | import { getInitials } from '@/utils';
41 | import useFetchTopProductsQuery from '@/composables/useFetchTopProductsQuery';
42 | import useFetchTopCategoriesQuery from '@/composables/useFetchTopCategoriesQuery';
43 | 
44 | export default defineComponent({
45 |     name: 'TopStatistics',
46 | 
47 |     setup() {
48 |         const { isLoading: isLoadingProducts, products } = useFetchTopProductsQuery();
49 |         const { isLoading: isLoadingCategories, categories } = useFetchTopCategoriesQuery();
50 | 
51 |         return {
52 |             products,
53 |             categories,
54 |             getInitials,
55 |             isLoadingProducts,
56 |             isLoadingCategories,
57 |         }
58 |     }
59 | });
60 | </script>
61 | 


--------------------------------------------------------------------------------
/src/utils.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * External dependencies.
 3 |  */
 4 | import { computed, ComputedRef, Ref } from 'vue';
 5 | 
 6 | /**
 7 |  * Internal dependencies.
 8 |  */
 9 | 
10 | // TODO: Eventually these will be passed as an argument in the config function
11 | export const ADD_ON_ID = import.meta.env.PANEL_ADDON_IDENTIFIER;
12 | export const BASE_URL = `/add-ons/${ADD_ON_ID}#`;
13 | 
14 | export const generateGroupName = (name: string) => ADD_ON_ID + '::' + name;
15 | 
16 | export const startTimeout = (timeout: number) => new Promise(resolve => setTimeout(resolve, timeout));
17 | 
18 | export const getInitials = function (value: string) {
19 |     const names = value.split(' ');
20 |     let initials = names[0].substring(0, 1).toUpperCase();
21 | 
22 |     if (names.length > 1) {
23 |         initials += names[names.length - 1].substring(0, 1).toUpperCase();
24 |     }
25 | 
26 |     return initials;
27 | };
28 | 
29 | export const firstLetterToUpper = (value: string) => value.slice(0, 1).toUpperCase() + value.slice(1);
30 | 
31 | export const wrapInRef = <T>(refObject: Ref<T> | undefined, defaultValue: T): ComputedRef<T> => {
32 |     if (refObject === undefined) {
33 |         return computed(() => defaultValue);
34 |     }
35 | 
36 |     return computed(() => refObject.value);
37 | }
38 | 
39 | export const daysToSeconds = (days: number) => hoursToSeconds(days * 24);
40 | 
41 | export const hoursToSeconds = (hours: number) => minutesToSeconds(hours * 60);
42 | 
43 | export const minutesToSeconds = (minutes: number) => minutes * 60;
44 | 
45 | export const hoursToMilliseconds = (hours: number) => secondsToMilliseconds(hoursToSeconds(hours));
46 | 
47 | export const minutesToMilliseconds = (minutes: number) => secondsToMilliseconds(minutesToSeconds(minutes));
48 | 
49 | export const secondsToMilliseconds = (seconds: number) => seconds * 1000;
50 | 


--------------------------------------------------------------------------------
/src/components/ImagePlaceholderWrapper/ImagePlaceholderWrapper.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <img
 3 |     v-if="imageUrl && !imageLoadError"
 4 |     :src="imageUrl"
 5 |     @error="imageLoadError = true"
 6 |     @load="imageLoadFinished = true"
 7 |   />
 8 | 
 9 |   <div
10 |     v-else
11 |     class="flex bg-primary/10"
12 |   >
13 |     <IconImageSingle
14 |       class="m-auto max-w-full max-h-full"
15 |       :class="svgClass"
16 |       :style="{ color: fillColor }"
17 |     />
18 |   </div>
19 | </template>
20 | 
21 | <script lang="ts">
22 | /**
23 |  * External dependencies.
24 |  */
25 | import { computed, defineComponent, PropType, ref, toRefs } from 'vue';
26 | 
27 | /**
28 |  * Internal dependencies.
29 |  */
30 | 
31 | export default defineComponent({
32 |     name: 'ImagePlaceholderWrapper',
33 | 
34 |     props: {
35 |         imageUrl: {
36 |             type: String,
37 |             default: null,
38 |         },
39 |         fillColor: {
40 |             type: String,
41 |             default: '#000',
42 |         },
43 |         iconSize: {
44 |             type: String as PropType<'sm' | 'md' | 'lg' | 'xl'>,
45 |             validate: (val: string) => ['sm', 'md', 'lg', 'xl'].includes(val),
46 |             default: 'md',
47 |         },
48 |     },
49 | 
50 |     setup(props) {
51 |         const { iconSize } = toRefs(props);
52 |       const imageLoadError =  ref(false);
53 |       const imageLoadFinished =  ref(false);
54 |       const svgClass = computed(() => {
55 |           const iconSizes: Record<string, string> = {
56 |               md: 'icon-md',
57 |               lg: 'icon-lg',
58 |               xl: 'icon-xl',
59 |           };
60 | 
61 |           return 'icon ' + (iconSizes[iconSize.value] || '');
62 |       });
63 | 
64 |       return {
65 |           svgClass,
66 |           imageLoadError,
67 |           imageLoadFinished,
68 |       }
69 |     },
70 | });
71 | </script>
72 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <head>
 4 |         <meta charset="utf-8">
 5 |         <title>Panel Add-On</title>
 6 |         <meta content="width=device-width, initial-scale=1" name="viewport">
 7 |     </head>
 8 |     <body dir="ltr">
 9 |         <div class="w-full flex">
10 |             <nav
11 |                 class="sticky z-10 h-screen flex"
12 |             >
13 |                 <ul class="p-4 min-w-[180px] bg-white shadow-[0_4px_12px_0_rgba(0,0,0,0.07),_0_2px_4px_rgba(0,0,0,0.05)]">
14 |                     <li class="relative mb-2 border-b-2">
15 |                         <a href="/#/">
16 |                             <span>Dashboard</span>
17 |                         </a>
18 |                     </li>
19 | 
20 |                     <li class="relative mb-2 border-b-2">
21 |                         <a href="/#/table-listing/list">
22 |                             <span>Table Listing</span>
23 |                         </a>
24 |                     </li>
25 | 
26 |                     <li class="relative mb-2 border-b-2">
27 |                         <a href="/#/form">
28 |                             <span>Form</span>
29 |                         </a>
30 |                     </li>
31 | 
32 |                     <li class="relative mb-2 border-b-2">
33 |                         <a href="/#/alerts">
34 |                             <span>Alerts</span>
35 |                         </a>
36 |                     </li>
37 | 
38 |                     <li class="relative mb-2 border-b-2">
39 |                         <a href="/#/components">
40 |                             <span>Components</span>
41 |                         </a>
42 |                     </li>
43 |                 </ul>
44 |             </nav>
45 | 
46 |             <div id="app" class="px-10 w-full"></div>
47 |         </div>
48 |         <script src="/standalone.ts" type="module"></script>
49 |     </body>
50 | </html>
51 | 


--------------------------------------------------------------------------------
/src/components/ColumnTemplates/ProductActionsColumnTemplate.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <AySpinner
 4 |       v-if="isDeleting"
 5 |       class="!m-0"
 6 |       size="md"
 7 |     />
 8 | 
 9 |     <button
10 |       v-else
11 |       class="btn btn-icon-only"
12 |       @click="modalVisible = true"
13 |     >
14 |       <IconTrash />
15 |     </button>
16 | 
17 |     <AyDangerousActionModal
18 |       hide-item-name
19 |       title="Delete product"
20 |       deleted-item-name="CONFIRM"
21 |       :visible="modalVisible"
22 |       @submit="onDelete"
23 |       @cancel="modalVisible = false"
24 |     />
25 |   </div>
26 | </template>
27 | 
28 | <script lang="ts">
29 | /**
30 |  * External dependencies.
31 |  */
32 | import { defineComponent, PropType, ref, toRefs } from 'vue';
33 | 
34 | 
35 | /**
36 |  * Internal dependencies.
37 |  */
38 | import { Product } from '@/types/Product';
39 | import useDeleteProductMutation from '@/composables/useDeleteProductMutation';
40 | 
41 | export default defineComponent({
42 |     name: 'ProductActionsColumnTemplate',
43 | 
44 |     props: {
45 |         column: {
46 |             type: Object,
47 |             default() {
48 |                 return {};
49 |             },
50 |         },
51 | 
52 |         fullPayload: {
53 |             type: Object as PropType<Product>,
54 |             required: true,
55 |         },
56 |     },
57 | 
58 |     setup(props) {
59 |         const { fullPayload } = toRefs(props);
60 |         const { deleteProduct, isDeleting } = useDeleteProductMutation();
61 |         const modalVisible = ref(false);
62 |         const onDelete = async () => {
63 |             modalVisible.value = false;
64 | 
65 |             if (isDeleting.value) {
66 |                 return;
67 |             }
68 | 
69 |             await deleteProduct(fullPayload.value.id);
70 |         }
71 | 
72 |         return {
73 |             onDelete,
74 |             isDeleting,
75 |             modalVisible,
76 |         }
77 |     }
78 | });
79 | </script>
80 | 


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     root: false,
 3 |     env: {
 4 |         browser: true,
 5 |         es6: true,
 6 |         node: true,
 7 |     },
 8 |     plugins: ['unicorn'],
 9 |     extends: [
10 |         'plugin:import/errors',
11 |         'plugin:import/warnings',
12 |         'plugin:vue/vue3-recommended',
13 |         'eslint:recommended',
14 |     ],
15 |     settings: {
16 |         'import/resolver': {
17 |             typescript: {},
18 |         },
19 |     },
20 |     parser: 'vue-eslint-parser',
21 |     parserOptions: {
22 |         parser: {
23 |             ts: '@typescript-eslint/parser',
24 |         },
25 |         sourceType: 'module',
26 |     },
27 |     rules: {
28 |         'vue/require-explicit-emits': [
29 |             'error',
30 |             {
31 |                 allowProps: false,
32 |             },
33 |         ],
34 |         'vue/attributes-order': 'error',
35 |         'vue/multi-word-component-names': 'off',
36 |         'vue/component-name-in-template-casing': ['error', 'PascalCase'],
37 |         'vue/html-self-closing': ['error', {
38 |             'html': {
39 |                 'void': 'always',
40 |                 'normal': 'always',
41 |                 'component': 'always'
42 |             },
43 |             'svg': 'always',
44 |             'math': 'always'
45 |         }],
46 |         'vue/html-closing-bracket-spacing': [
47 |             'error',
48 |             {
49 |                 startTag: 'never',
50 |                 endTag: 'never',
51 |                 selfClosingTag: 'always',
52 |             },
53 |         ],
54 |         // eslint-plugin-import
55 |         'import/first': 'error',
56 |         'import/order': [
57 |             'error',
58 |             {
59 |                 groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index', 'object'],
60 |             },
61 |         ],
62 |         'import/no-mutable-exports': 'error',
63 |         'import/no-unresolved': 'off',
64 |         'no-unused-vars': ['off'],
65 |     },
66 | };
67 | 


--------------------------------------------------------------------------------
/src/components/ColumnTemplates/StatusColumnTemplate.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <span
 3 |     class="bullet"
 4 |     :class="bulletClass"
 5 |   >
 6 |     {{ statusLabel }}
 7 |   </span>
 8 | </template>
 9 | 
10 | <script lang="ts">
11 | /**
12 |  * External dependencies.
13 |  */
14 | import { computed, defineComponent, toRefs } from 'vue';
15 | import { firstLetterToUpper } from '@/utils';
16 | 
17 | /**
18 |  * Internal dependencies.
19 |  */
20 | 
21 | export default defineComponent({
22 |     name: 'StatusColumnTemplate',
23 | 
24 |     props: {
25 |         payload: {
26 |             type: String,
27 |             default: 'live',
28 |         }
29 |     },
30 | 
31 |     setup(props) {
32 |         const { payload } = toRefs(props);
33 |         const statusLabel = computed(() => firstLetterToUpper(payload.value));
34 |         const bulletClass = computed(() => {
35 |             let status = '';
36 | 
37 |             if (!payload.value) {
38 |                 return 'bullet-secondary';
39 |             }
40 | 
41 |             switch (payload.value.toLowerCase()) {
42 |                 case 'active':
43 |                 case 'live':
44 |                     status = 'bullet-success';
45 |                     break;
46 |                 case 'approval':
47 |                 case 'inapproval':
48 |                 case 'draft':
49 |                 case 'inactive':
50 |                 case 'in_approval':
51 |                     status = 'bullet-secondary';
52 |                     break;
53 |                 case 'blocked':
54 |                     status = 'bullet-danger';
55 |                     break;
56 |                 case 'problem':
57 |                     status = 'bullet-warning';
58 |                     break;
59 |                 case 'new':
60 |                     status = 'bullet-blue';
61 |                     break;
62 |             }
63 | 
64 |             return status;
65 |         });
66 | 
67 |         return {
68 |             statusLabel,
69 |             bulletClass,
70 |         }
71 |     }
72 | });
73 | </script>
74 | 
75 | <style scoped>
76 | 
77 | </style>
78 | 


--------------------------------------------------------------------------------
/server-ssl/generate-ssl.sh:
--------------------------------------------------------------------------------
 1 | #! /bin/bash
 2 | 
 3 | which openssl
 4 | 
 5 | if [ "$?" -ne 0 ]; then
 6 |     echo "You do not have openssl CLI command installed"
 7 |     exit 1
 8 | fi
 9 | 
10 | SCRIPT_DIR=$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )
11 | ROOT_DIR=$SCRIPT_DIR/../
12 | 
13 | cd "$SCRIPT_DIR"
14 | 
15 | if [ -f "$ROOT_DIR"/.env ]; then
16 |     source "$ROOT_DIR"/.env
17 | fi
18 | 
19 | if [ -z "$CONFIG_SERVER_HOST" ]; then
20 |     SERVER_HOST=demo-add-on.cloud-panel.aboutyou.test
21 | else
22 |     SERVER_HOST=$CONFIG_SERVER_HOST
23 | fi
24 | 
25 | cp default.conf temp.conf
26 | 
27 | case "$(uname -sr)" in
28 |    Darwin*)
29 |         sed -i '' "s/{{SERVER_HOST}}/$SERVER_HOST/g" temp.conf
30 |      ;;
31 | 
32 |    *)
33 |         sed -i "s/{{SERVER_HOST}}/$SERVER_HOST/g" temp.conf
34 |      ;;
35 | esac
36 | 
37 | openssl genrsa -out default.key 2048
38 | openssl req -new -x509 -key default.key -out default.crt -days 3650 -subj /CN=$SERVER_HOST -extensions SAN -config temp.conf
39 | 
40 | echo "Generated certificate for: $SERVER_HOST"
41 | 
42 | case "$(uname -sr)" in
43 | 
44 |    Darwin*)
45 |         sudo security add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keychain default.crt
46 |      ;;
47 | 
48 |    Linux*)
49 |         source /etc/os-release
50 |         if [ "$ID_LIKE" == "debian" ] || [ "$ID" == "ubuntu" ]; then
51 |             apt-get install -y ca-certificates
52 |             sudo cp default.crt /usr/local/share/ca-certificates/default.crt
53 |             sudo update-ca-certificates
54 |         elif [ "$ID" == "fedora" ]; then
55 |             trust anchor default.crt
56 |             update-ca-trust
57 |         else
58 |             echo "Your OS is not supported. You will have to trust your certificate by yourself"
59 |         fi
60 |      ;;
61 | 
62 |    CYGWIN*|MINGW32*|MINGW*|MSYS*)
63 |         certutil -addstore -f "ROOT" new-root-certificate.crt
64 |      ;;
65 | 
66 |    *)
67 |         echo "Your OS is not supported. You will have to trust your certificate by yourself"
68 |      ;;
69 | esac
70 | 
71 | rm temp.conf
72 | 
73 | 


--------------------------------------------------------------------------------
/src/components/Breadcrumbs/Breadcrumbs.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     class="flex mb-6"
 4 |   >
 5 |     <div class="grow">
 6 |       <h2>
 7 |         {{ title }}
 8 |       </h2>
 9 | 
10 |       <ol
11 |         aria-label="app-header-breadcrumb"
12 |         class="flex pie-4 text-base bg-transparent rounded"
13 |       >
14 |         <li
15 |           v-for="(breadcrumb, index) in breadcrumbs"
16 |           :key="breadcrumb.title"
17 |           data-index="0"
18 |           aria-current="page"
19 |           class="flex overflow-hidden items-center max-w-48 text-dark-grey"
20 |           :class="{
21 |             'text-dark-grey': index !== breadcrumbs.length - 1, // any other item
22 |             'text-black font-bold': index === breadcrumbs.length - 1, // last item
23 |           }"
24 |         >
25 |           <LinkBreadcrumb
26 |             v-if="breadcrumb.url"
27 |             :url="breadcrumb.url"
28 |             :title="breadcrumb.title"
29 |           />
30 | 
31 |           <span
32 |             v-else
33 |             class="truncate"
34 |           >
35 |             {{ breadcrumb.title }}
36 |           </span>
37 | 
38 | 
39 |           <IconChevronRight
40 |             v-if="index !== breadcrumbs.length - 1"
41 |             class="icon icon-sm mx-1 text-dark-grey"
42 |           />
43 |         </li>
44 |       </ol>
45 |     </div>
46 |     <div class="self-center mis-auto" />
47 |   </div>
48 | </template>
49 | 
50 | <script lang="ts">
51 | /**
52 |  * External dependencies.
53 |  */
54 | import { defineComponent, PropType } from 'vue';
55 | import LinkBreadcrumb from '@/components/Breadcrumbs/LinkBreadcrumb.vue';
56 | 
57 | /**
58 |  * Internal dependencies.
59 |  */
60 | 
61 | export default defineComponent({
62 |     name: 'Breadcrumbs',
63 |     components: { LinkBreadcrumb },
64 |     props: {
65 |         title: {
66 |             type: String,
67 |             required: true,
68 |         },
69 | 
70 |         breadcrumbs: {
71 |             type: Array as PropType<{url?: string; title: string;}[]>,
72 |             required: true,
73 |         }
74 |     }
75 | });
76 | </script>
77 | 


--------------------------------------------------------------------------------
/src/manifest.ts:
--------------------------------------------------------------------------------
 1 | // This config function does nothing but return its input
 2 | // But it does provide some helpful type hints
 3 | import { config, RouteDefinition } from '@scayle/add-on-utils';
 4 | import { AddOnRoute, routes } from './routes';
 5 | import { GroupRouteDefinition } from './types';
 6 | import { ADD_ON_ID, generateGroupName } from './utils';
 7 | 
 8 | const applyDefaultRouteProps = (routes: RouteDefinition[]) => routes.map(route => ({...route, sidebar: route.sidebar === null ? null : ADD_ON_ID}));
 9 | 
10 | const mappedRoutes = routes.map(originalRoute => {
11 |     const route = JSON.parse(JSON.stringify(originalRoute)) as AddOnRoute;
12 |     const children = route.children;
13 |     const meta = route.meta as RouteDefinition;
14 | 
15 |     if(children && children.length && !meta.children) {
16 |         meta.children = children.map(childRoute => {
17 |             const pathArray = childRoute.path.split("/");
18 |             const pathForManifest = pathArray[pathArray.length - 1];
19 | 
20 |             // if the path for the manifest also contains the path of the parent,
21 |             // the active item highlighting in the sidebar does not work that's what the lines above are for
22 | 
23 |             return "/" + pathForManifest;
24 |         });
25 |     }
26 | 
27 |     return meta;
28 | });
29 | 
30 | const generalRoutes: GroupRouteDefinition[] = [
31 |     {
32 |         id: 'general-group',
33 |         name: {
34 |             'en': 'General',
35 |             'de': 'Allgemeines'
36 |         },
37 |         group: generateGroupName('general'),
38 |         isGroup: true,
39 |     },
40 |     ...mappedRoutes
41 | ];
42 | 
43 | const manifestRegistration = config(function (registerApplication, registerRoutes) {
44 |     registerApplication({
45 |         name: ADD_ON_ID,
46 |         // Make sure to use a dynamic import to create a code-split point
47 |         // and minimize the size of the manifest since it is loaded on every page
48 |         app: () => import('./add-on'),
49 |     });
50 | 
51 |     registerRoutes({
52 |         [ADD_ON_ID]: [
53 |             ...applyDefaultRouteProps(generalRoutes as RouteDefinition[]),
54 |         ]
55 |     })
56 | });
57 | 
58 | // !!!!!DO NOT CHANGE LINE BELOW
59 | // IT IS USED FOR HOT RELOADING ON CLOUD PANEL ADDON
60 | // AND WILL BREAK IF THE LINE BELOW IS CHANGED
61 | export default manifestRegistration;
62 | 


--------------------------------------------------------------------------------
/src/components/ProductsListing/PrdocutsListingBody/ProductsListingBody.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="products-listing__body">
 3 |     <ElTable
 4 |       stripe
 5 |       max-height="initial"
 6 |       header-row-class-name="table-column-names-row"
 7 |       :data="products"
 8 |       @select="$emit('selected', $event)"
 9 |       @select-all="$emit('selected', $event)"
10 |       @row-click="openDetail"
11 |     >
12 |       <ElTableColumn
13 |         type="selection"
14 |         show-overflow-tip
15 |       />
16 | 
17 |       <ElTableColumn
18 |         v-for="(column, index) in columns"
19 |         :key="1 + '-' + JSON.stringify(column) + '-' + index"
20 |         :width="column.hasOwnProperty('width') ? column.width : ''"
21 |         :min-width="100"
22 |         :prop="column.prop"
23 |         :label="column.label"
24 |         :row-index="1 + '-' + index"
25 |       >
26 |         <template #default="scope">
27 |           <component
28 |             :is="column.template"
29 |             :column="column"
30 |             :row-index="1 + '-' + index"
31 |             :full-payload="scope.row"
32 |             :payload="scope.row[column.prop]"
33 |           />
34 |         </template>
35 |       </ElTableColumn>
36 |     </ElTable>
37 |   </div>
38 | </template>
39 | 
40 | <script lang="ts">
41 | /**
42 |  * External dependencies.
43 |  */
44 | import { defineComponent, PropType } from 'vue';
45 | 
46 | /**
47 |  * Internal dependencies.
48 |  */
49 | 
50 | export type Column = {
51 |     prop: string,
52 |     label: string,
53 |     width?: number;
54 |     template: any;
55 | };
56 | export default defineComponent({
57 |     name: 'ProductsListingBody',
58 | 
59 |     props: {
60 |         products: {
61 |             type: Array,
62 |             required: true,
63 |         },
64 | 
65 |         columns: {
66 |             type: Array as PropType<Column[]>,
67 |             required: true,
68 |         }
69 |     },
70 | 
71 |     emits: {
72 |         selected(_selected: any[]) {
73 |             return true;
74 |         }
75 |     },
76 | 
77 |     methods: {
78 |         openDetail(row: any, col: any) {
79 |             if([0, 7].includes(col.no)) return;
80 | 
81 |             const id = row.product_id;
82 |             this.$router.push({ name: 'product-detail', params: { id } });
83 |         }
84 |     }
85 | });
86 | </script>
87 | 
88 | <style scoped src="./ProductsListingBody.css" />
89 | 


--------------------------------------------------------------------------------
/src/pages/AlertsPage.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Breadcrumbs
 3 |     title="Alerts"
 4 |     :breadcrumbs="breadcrumbs"
 5 |   />
 6 | 
 7 |   <div class="card">
 8 |     <div class="card-header">
 9 |       Alerts
10 |     </div>
11 |     <div class="card-body">
12 |       <div class="form-group space-y-5">
13 |         <div class="alert alert-info">
14 |           Here's a demo of sending alerts and toasts through the add-on API
15 |         </div>
16 |         <label class="label">
17 |           <span class="label-text is-required">Message</span>
18 |           <input
19 |             v-model="message"
20 |             type="text"
21 |             class="form-control"
22 |           />
23 |         </label>
24 | 
25 |         <label class="label">
26 |           <span class="label-text is-required">Type</span>
27 | 
28 |           <AySelect
29 |             v-model="type"
30 |           >
31 |             <AyOption value="info">Info</AyOption>
32 |             <AyOption value="warning">Warning</AyOption>
33 |             <AyOption value="success">Success</AyOption>
34 |             <AyOption value="error">Error</AyOption>
35 |           </AySelect>
36 |         </label>
37 |       </div>
38 |       <div class="btn-group">
39 |         <button
40 |           class="btn"
41 |           @click="sendToast"
42 |         >
43 |           Toast
44 |         </button>
45 |         <button
46 |           class="btn"
47 |           @click="sendAlert"
48 |         >
49 |           Alert
50 |         </button>
51 |       </div>
52 |     </div>
53 |   </div>
54 | </template>
55 | 
56 | <script lang="ts">
57 | import { defineComponent } from "vue";
58 | import Breadcrumbs from '@/components/Breadcrumbs/Breadcrumbs.vue';
59 | 
60 | export default defineComponent({
61 |     name: "AlertsPage",
62 | 
63 |     components: { Breadcrumbs },
64 | 
65 |     data(): { type: 'success' | 'info' | 'warning' | 'error', message: string, breadcrumbs: any[] } {
66 |         return {
67 |             type: 'success',
68 |             message: 'Hello, world!',
69 |             breadcrumbs: [
70 |                 {
71 |                     title: 'General',
72 |                 },
73 | 
74 |                 {
75 |                     title: 'Alerts',
76 |                 }
77 |             ],
78 |         };
79 |     },
80 | 
81 |     methods: {
82 |         sendToast() {
83 |             this.$addOn.sendToast(this.type, this.message);
84 |         },
85 |         sendAlert() {
86 |             this.$addOn.sendAlert(this.type, this.message);
87 |         },
88 |     }
89 | });
90 | </script>
91 | 


--------------------------------------------------------------------------------
/src/components.d.ts:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | /* prettier-ignore */
 3 | // @ts-nocheck
 4 | // Generated by unplugin-vue-components
 5 | // Read more: https://github.com/vuejs/core/pull/3399
 6 | import '@vue/runtime-core'
 7 | 
 8 | export {}
 9 | 
10 | declare module '@vue/runtime-core' {
11 |   export interface GlobalComponents {
12 |     AyCountrySelect: typeof import('@scayle/components')['CountrySelect']
13 |     AyCurrencyBehavior: typeof import('@scayle/components')['CurrencyBehavior']
14 |     AyCurrencyInput: typeof import('@scayle/components')['CurrencyInput']
15 |     AyDangerousActionModal: typeof import('@scayle/components')['DangerousActionModal']
16 |     AyDashboardList: typeof import('@scayle/components')['DashboardList']
17 |     AyDashboardListItem: typeof import('@scayle/components')['DashboardListItem']
18 |     AyDashboardStatistic: typeof import('@scayle/components')['DashboardStatistic']
19 |     AyInput: typeof import('@scayle/components')['Input']
20 |     AyModal: typeof import('@scayle/components')['Modal']
21 |     AyOffCanvas: typeof import('@scayle/components')['OffCanvas']
22 |     AyOption: typeof import('@scayle/components')['Option']
23 |     AyPaginationLayout: typeof import('@scayle/components')['PaginationLayout']
24 |     AySearchInput: typeof import('@scayle/components')['SearchInput']
25 |     AySelect: typeof import('@scayle/components')['Select']
26 |     AySpinner: typeof import('@scayle/components')['Spinner']
27 |     AyTab: typeof import('@scayle/components')['Tab']
28 |     AyTabs: typeof import('@scayle/components')['Tabs']
29 |     ElTable: typeof import('element-plus/es')['ElTable']
30 |     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
31 |     ElTooltip: typeof import('element-plus/es')['ElTooltip']
32 |     IconArrowRight: typeof import('~icons/panel/arrow-right')['default']
33 |     IconChevronRight: typeof import('~icons/panel/chevron-right')['default']
34 |     IconClose: typeof import('~icons/panel/close')['default']
35 |     IconFilter: typeof import('~icons/panel/filter')['default']
36 |     IconImageSingle: typeof import('~icons/panel/image-single')['default']
37 |     IconMoney: typeof import('~icons/panel/money')['default']
38 |     IconParcel: typeof import('~icons/panel/parcel')['default']
39 |     IconQuestionFill: typeof import('~icons/panel/question-fill')['default']
40 |     IconTrash: typeof import('~icons/panel/trash')['default']
41 |     IconUser: typeof import('~icons/panel/user')['default']
42 |     RouterLink: typeof import('vue-router')['RouterLink']
43 |     RouterView: typeof import('vue-router')['RouterView']
44 |   }
45 | }
46 | 


--------------------------------------------------------------------------------
/vite-plugins/aboutYouAddonLoader.ts:
--------------------------------------------------------------------------------
 1 | import { nanoid } from 'nanoid';
 2 | import type { Plugin } from 'vite';
 3 | 
 4 | export default function aboutYouAddonLoader(): Plugin {
 5 |     const windowObjectName = `__VITE_ADDON_MANIFEST_REGISTRATION_${nanoid()}`;
 6 | 
 7 |     return {
 8 |         apply: 'serve',
 9 | 
10 |         enforce: 'post',
11 | 
12 |         name: 'aboutyou-addon-loader',
13 | 
14 |         configureServer(server) {
15 |             return () => {
16 |                 server.middlewares.use('/manifest.js', (req, res) => {
17 |                     const url = server?.resolvedUrls?.local[0] || server?.resolvedUrls?.network[0] || '';
18 |                     const code = `
19 |                         System.register([], function(exports, module) {
20 |                             "use strict";
21 | 
22 |                             return {
23 |                                 execute: function() {
24 |                                     exports('default', (registerApplication, registerRoutes) => {
25 |                                         const script = document.createElement('script');
26 | 
27 |                                         script.src = '${url}manifest.ts'
28 |                                         script.setAttribute('type', 'module');
29 |                                         document.body.appendChild(script);
30 | 
31 |                                         script.addEventListener('load', () => {
32 |                                             console.log('Add-On loaded');
33 |                                             window['${windowObjectName}'](registerApplication, registerRoutes);
34 |                                         });
35 | 
36 |                                         script.addEventListener('error', () => {
37 |                                             console.error('Cannot load Add-On');
38 |                                         });
39 |                                     });
40 |                                 }
41 |                             };
42 |                         });
43 |                     `;
44 |                     res.writeHead(200, {
45 |                         'Content-Type': 'application/javascript'
46 |                     });
47 |                     res.write(code);
48 |                     res.end();
49 |                 });
50 |             }
51 |         },
52 | 
53 |         transform(code, id) {
54 |             if (!/manifest\.ts($|\?)/.test(id)) {
55 |                 return
56 |             }
57 | 
58 |             return {
59 |                 code: code + `\nwindow['${windowObjectName}'] = manifestRegistration;\n`,
60 |                 moduleSideEffects: false,
61 |             };
62 |         }
63 |     };
64 | }
65 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ![scayle-logo-cr](https://cdn-prod.scayle.com/public/media/general/SCAYLE-Commerce-Engine-header.png)
 2 | 
 3 | <h1 align="center">
 4 |   SCAYLE Panel Demo Add-on
 5 | </h1>
 6 | 
 7 | <h4 align="center">
 8 |   <a href="https://scayle.dev">Documentation</a> |
 9 |   <a href="https://www.scayle.com/">Website</a>
10 | </h4>
11 | 
12 | <p align="center">
13 |   The SCAYLE <strong>Panel Demo Add-on</strong> is showcasing how to write an Add-on in combination with the SCAYLE Component Library.
14 | </p>
15 | 
16 | <p align="center">
17 |   <a href="#"><img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="SCAYLE's *Component Library* is released under the MIT license." /></a>
18 | </p>
19 | 
20 | 
21 | ## Getting Started
22 | 
23 | Visit the [Add-on Developer Guide](https://scayle.dev/en/dev/add-on/introduction) to learn more on how to use the Panel icons.
24 | 
25 | Visit the [Docs](https://scayle.dev) to learn more about our system requirements.
26 | 
27 | ## What is Scayle ?
28 | 
29 | [SCAYLE](https://scayle.com) is a full-featured e-commerce software solution that comes with flexible APIs. Within SCAYLE, you can manage all aspects of your shop, such as products, stocks, customers, and transactions.
30 | 
31 | Learn more about [Scayles’s architecture](https://scayle.dev/en/developer-guide/introduction/infrastructure) and [commerce modules](https://scayle.dev/en/getting-started) in the Docs.
32 | 
33 | 
34 | ## Installation
35 | 
36 | Before running the application, you need to configure your hosts file with the add-on's hostname. You'll also need to create an SSL key pair for this domain.
37 | 
38 | It's also recommended to install [Volta](https://volta.sh/) in order to use the correct versions of node.js and npm.
39 | 
40 | ```shell
41 | # Add 
42 | 127.0.0.1       {hostname from .env}` (replace everything including the {})  to `/etc/hosts`
43 | 
44 | # Execute
45 | npm ci
46 | 
47 | # !! Make sure you have openssl installed on your computer for this step. !! 
48 | # Generate a ssl certificates with the following command. The domain name (aka hostname) is retrieved from `CONFIG_SERVER_HOST` in `.env`. 
49 | npm run generate:ssl
50 | ```
51 | 
52 | ## Scripts
53 | 
54 | Build the production app:
55 | `npm run build`
56 | 
57 | Build the hot-reloading app:
58 | `npm run dev`
59 | 
60 | Run unit tests: `npm run unit`
61 | 
62 | Check types: `npm run typecheck`
63 | 
64 | ## Built With
65 | 
66 | [Tailwindcss](https://tailwindcss.com/)
67 | [Vue 3](https://vuejs.org/)
68 | [Vite](https://vitejs.dev/)
69 | [Vitest](https://vitest.dev/)
70 | [TypeScript](https://www.typescriptlang.org/)
71 | 
72 | ## Shadow DOM
73 | 
74 | To inject addon in it's own isolated container we can use [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM). To enable it you must set in .env `PANEL_USE_SHADOW_DOM=true`.
75 | 
76 | ## Other channels
77 | 
78 | - [LinkedIn](https://www.linkedin.com/company/scaylecommerce/)
79 | - [Jobs](https://www.scayle.com/company/career/)
80 | - [SCAYLE](https://scayle.com)
81 | 
82 | ## License
83 | Licensed under the [MIT](https://opensource.org/license/mit/)
84 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "demo-add-on-vite",
 3 |     "description": "The SCAYLE Panel Demo Add-On is showcasing how to write an Add-On in combination with the SCAYLE Component Library.",
 4 |     "homepage": "https://www.scayle.com/",
 5 |     "private": true,
 6 |     "version": "1.0.0",
 7 |     "type": "module",
 8 |     "scripts": {
 9 |         "dev": "vite",
10 |         "unit": "vitest run",
11 |         "coverage": "vitest run --coverage",
12 |         "typecheck": "vue-tsc --noEmit",
13 |         "preview": "vite preview",
14 |         "build": "vue-tsc --noEmit && vite build",
15 |         "build:watch": "vite build --watch --mode development",
16 |         "watch": "run-p build:watch preview",
17 |         "generate:ssl": "bash -c ./server-ssl/generate-ssl.sh",
18 |         "prepare": "bash -c ./scripts/prepare.sh",
19 |         "code-lint": "eslint --fix 'src/**/*.{ts,tsx,vue,js}'",
20 |         "lint-staged": "lint-staged"
21 |     },
22 |     "keywords": [
23 |         "scayle",
24 |         "scayle panel",
25 |         "panel",
26 |         "scayle panel components",
27 |         "panel components",
28 |         "scayle panel add-on",
29 |         "panel-add-on",
30 |         "add-on"
31 |     ],
32 |     "author": "SCAYLE",
33 |     "license": "MIT",
34 |     "dependencies": {
35 |         "@scayle/add-on-utils": "^2.0.0",
36 |         "@scayle/components": "^3.0.0",
37 |         "@scayle/panel-icons": "^2.2.0",
38 |         "@scayle/single-spa-vue": "^2.6.2",
39 |         "@scayle/tailwind-base": "^1.1.1",
40 |         "@tanstack/vue-query": "^4.14.3",
41 |         "@vueuse/core": "^9.4.0",
42 |         "element-plus": "^2.3.4",
43 |         "vue": "^3.2.41",
44 |         "vue-router": "^4.1.6"
45 |     },
46 |     "devDependencies": {
47 |         "@types/node": "^18.11.9",
48 |         "@typescript-eslint/parser": "^6.0.0",
49 |         "@vitejs/plugin-vue": "^3.2.0",
50 |         "@vitest/coverage-c8": "^0.24.5",
51 |         "@vue/test-utils": "^2.2.1",
52 |         "autoprefixer": "^10.4.13",
53 |         "dom-storage": "^2.1.0",
54 |         "eslint": "^8.27.0",
55 |         "eslint-import-resolver-typescript": "^3.5.2",
56 |         "eslint-plugin-import": "^2.26.0",
57 |         "eslint-plugin-unicorn": "^48.0.0",
58 |         "eslint-plugin-vue": "^9.7.0",
59 |         "husky": "^8.0.1",
60 |         "jsdom": "^20.0.2",
61 |         "lint-staged": "^13.0.3",
62 |         "magic-string": "^0.26.7",
63 |         "nanoid": "^4.0.0",
64 |         "npm-run-all": "^4.1.5",
65 |         "postcss": "^8.4.18",
66 |         "postcss-dir-pseudo-class": "^6.0.5",
67 |         "postcss-logical": "^5.0.4",
68 |         "tailwindcss": "3.2.2",
69 |         "tailwindcss-logical": "3.0.0",
70 |         "typescript": "^4.8.4",
71 |         "unplugin-auto-import": "^0.11.4",
72 |         "unplugin-icons": "^0.14.15",
73 |         "unplugin-vue-components": "^0.24.1",
74 |         "vite": "^3.2.2",
75 |         "vite-tsconfig-paths": "^3.5.2",
76 |         "vitest": "^0.24.5",
77 |         "vue-tsc": "^0.40.13"
78 |     },
79 |     "volta": {
80 |         "node": "18.12.1",
81 |         "npm": "9.1.1"
82 |     }
83 | }
84 | 


--------------------------------------------------------------------------------
/vite-plugins/aboutYouGlobalWindowEventLoader.ts:
--------------------------------------------------------------------------------
  1 | import type { Plugin } from 'vite';
  2 | import MagicString from 'magic-string';
  3 | 
  4 | export const generateWindowKeyFromAddon = (addOnId: string) => {
  5 |     let normalizedAddOnId = addOnId
  6 |         .replace('-', '_')
  7 |         .replace(' ', '_')
  8 | 
  9 |     return `__VITE_ADDON_EVENT_${normalizedAddOnId}__`;
 10 | }
 11 | 
 12 | const windowGlobalEventHandlerCode = (addOnId: string) => {
 13 |     const windowKey = generateWindowKeyFromAddon(addOnId);
 14 |     const windowObj = `window['${windowKey}']`;
 15 | 
 16 |     return `
 17 |         const initWindowGlobalHandler = () => {
 18 |             if (${windowObj}) {
 19 |                 return;
 20 |             }
 21 | 
 22 |             ${windowObj} = {
 23 |                 listeners: [],
 24 |                 listen(callback) {
 25 |                     this.listeners.push(callback);
 26 |                 },
 27 |                 async trigger() {
 28 |                     try {
 29 |                         for (const callback of this.listeners) {
 30 |                             callback();
 31 |                         }
 32 |                     } catch (e) {
 33 |                         // do nothing if an error happens
 34 |                     }
 35 |                 }
 36 |             };
 37 |         };
 38 |         initWindowGlobalHandler();
 39 | 
 40 |         onBeforeMount(() => ${windowObj}?.trigger());
 41 |     `;
 42 | };
 43 | 
 44 | const getSetupFunctionIndex = (code: string) => {
 45 |     const regex = /(setup\(.*\)\s*\{)/;
 46 |     const found = regex.exec(code);
 47 | 
 48 |     if (!found?.[0]) {
 49 |         return;
 50 |     }
 51 | 
 52 |     return found.index + found?.[0].length;
 53 | }
 54 | 
 55 | const getBeforeMountImportIndex = (code: string) => {
 56 |     const regex = /import\s*(\{).*from\s*'vue';/;
 57 |     const found = regex.exec(code);
 58 | 
 59 |     if (!found?.[0]) {
 60 |         return;
 61 |     }
 62 | 
 63 |     if (found?.[0].includes('onBeforeMount')) {
 64 |         return;
 65 |     }
 66 | 
 67 |     return found.index + found[0].search('{') + 1;
 68 | }
 69 | 
 70 | export default function aboutYouAddonLoader({
 71 |     addOnId
 72 | }: { addOnId: string }): Plugin {
 73 |     return {
 74 |         enforce: 'pre',
 75 | 
 76 |         name: 'about-you-global-window-event-loader',
 77 | 
 78 |         transform(code, id) {
 79 |             if (!/App\.vue($|\?)/.test(id)) {
 80 |                 return;
 81 |             }
 82 | 
 83 |             if (id.includes('type=style') || id.includes('type=script')) {
 84 |                 return;
 85 |             }
 86 | 
 87 |             const setupFunctionStartIndex = getSetupFunctionIndex(code);
 88 |             const onBeforeMountImportIndex = getBeforeMountImportIndex(code);
 89 | 
 90 |             if (!setupFunctionStartIndex) {
 91 |                 throw new Error('App.vue does not have a setup method! Please add a setup method.');
 92 |             }
 93 | 
 94 |             const newCode = new MagicString(code)
 95 | 
 96 |             newCode.appendLeft(setupFunctionStartIndex, windowGlobalEventHandlerCode(addOnId));
 97 | 
 98 |             if (onBeforeMountImportIndex) {
 99 |                 newCode.appendLeft(onBeforeMountImportIndex, 'onBeforeMount, ')
100 |             }
101 | 
102 |             return { code: newCode.toString()};
103 |         }
104 |     };
105 | }
106 | 


--------------------------------------------------------------------------------
/src/composables/useFetchProductsQuery.ts:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * External dependencies.
  3 |  */
  4 | import { Ref } from 'vue';
  5 | import { useQuery } from '@tanstack/vue-query';
  6 | 
  7 | /**
  8 |  * Internal dependencies.
  9 |  */
 10 | import { startTimeout, wrapInRef } from '@/utils';
 11 | import { Product, ProductStatus } from '@/types/Product';
 12 | import products from '@/mocks/products';
 13 | 
 14 | export type ProductsFilters = {
 15 |     search?: string,
 16 |     name?: string;
 17 |     status?: ProductStatus[];
 18 | };
 19 | 
 20 | export type ProductsPaginationData = {
 21 |     total: number;
 22 |     lastPage: number;
 23 |     currentPage: number;
 24 |     hasNextPage: boolean;
 25 |     products: Product[];
 26 | };
 27 | 
 28 | export type UseFetchProductsQueryOptions = {
 29 |     page?: Ref<number>;
 30 |     perPage?: Ref<number>;
 31 |     filters?: Ref<ProductsFilters>;
 32 | };
 33 | 
 34 | const applyFilters = (filters: ProductsFilters, data: Product[]) => {
 35 |     let localProducts = data;
 36 | 
 37 |     if (filters?.name) {
 38 |         localProducts = localProducts.filter(product => product.name.includes(filters.name as string));
 39 |     }
 40 | 
 41 |     if (filters?.search) {
 42 |         const search = filters.search;
 43 |         localProducts = localProducts.filter(
 44 |             product => product.name.includes(search) ||
 45 |                 product.id?.toString() == search ||
 46 |                 product.product_id?.toString() == search ||
 47 |                 product.merchant?.includes(search)
 48 |         )
 49 |     }
 50 | 
 51 |     if (filters?.status?.length) {
 52 |         localProducts = localProducts.filter((product) => filters?.status?.includes(product.status));
 53 |     }
 54 | 
 55 |     return localProducts;
 56 | }
 57 | 
 58 | export default function useFetchProductsQuery({ perPage, page, filters }: UseFetchProductsQueryOptions = {}) {
 59 |     const localPage = wrapInRef(page, 1);
 60 |     const localPerPage = wrapInRef(perPage, 15);
 61 |     const localFilters = wrapInRef<ProductsFilters>(filters, {});
 62 | 
 63 |     const {
 64 |         isLoading,
 65 |         isFetching,
 66 |         data
 67 |     } = useQuery<ProductsPaginationData>(['products', localFilters, localPage, localPerPage], async () => {
 68 |         await startTimeout(1000);
 69 | 
 70 |         let localProducts = [...products()];
 71 | 
 72 |         if (localFilters?.value) {
 73 |             localProducts = applyFilters(localFilters.value, localProducts);
 74 |         }
 75 | 
 76 |         const total = localProducts.length;
 77 |         const skipPagination = total <= localPerPage.value;
 78 |         const shouldHavePagination = !skipPagination;
 79 |         let hasNextPage = false;
 80 | 
 81 |         if (shouldHavePagination) {
 82 |             const start = (localPage.value - 1) * localPerPage.value
 83 |             const end = localPage.value * localPerPage.value;
 84 | 
 85 |             localProducts = localProducts.slice(start, end);
 86 | 
 87 |             hasNextPage = end < total;
 88 |         }
 89 | 
 90 |         return {
 91 |             total,
 92 |             hasNextPage,
 93 |             products: localProducts,
 94 |             lastPage: localPage.value,
 95 |             currentPage: localPage.value,
 96 |         };
 97 |     }, { keepPreviousData: true });
 98 | 
 99 |     return {
100 |         isLoading,
101 |         isFetching,
102 |         pagination: data,
103 |     };
104 | }
105 | 


--------------------------------------------------------------------------------
/src/routes.ts:
--------------------------------------------------------------------------------
  1 | import { RouteRecordRaw } from 'vue-router';
  2 | import { GroupRouteDefinition } from './types';
  3 | import { ADD_ON_ID, BASE_URL, generateGroupName } from './utils';
  4 | 
  5 | // Use dynamic imports to enable code-splitting
  6 | const DashboardPage = () => import('./pages/DashboardPage.vue');
  7 | const AlertsPage = () => import('./pages/AlertsPage.vue');
  8 | const FormPage = () => import('./pages/FormPage.vue');
  9 | const TableListing = () => import('./pages/TableListing.vue');
 10 | const ProductsPage = () => import('./components/ProductsListing/ProductsPage.vue');
 11 | const TableListingDetail = () => import('./pages/TableListingDetail.vue');
 12 | const ComponentsPage = () => import('./pages/ComponentsPage.vue');
 13 | 
 14 | export type AddOnRoute = Omit<RouteRecordRaw, "meta"> & { meta: GroupRouteDefinition };
 15 | 
 16 | export const routes: AddOnRoute[] = [
 17 |     {
 18 |         name: 'dashboard',
 19 |         path: '/',
 20 |         component: DashboardPage,
 21 |         meta: {
 22 |             id: 'dashboard',
 23 |             name: {
 24 |                 'en': 'Dashboard',
 25 |                 'de': 'Armaturenbrett'
 26 |             },
 27 |             icon: 'dashboard',
 28 |             path: BASE_URL + '/',
 29 |             sidebar: ADD_ON_ID,
 30 |             group: generateGroupName('general'),
 31 |         }
 32 |     },
 33 |     {
 34 |         path: '/table-listing',
 35 |         component: TableListing,
 36 |         redirect: { name: "products-page" },
 37 |         children: [
 38 |             {
 39 |                 name: "products-page",
 40 |                 path: "list",
 41 |                 component: ProductsPage,
 42 |             },
 43 |             {
 44 |                 name: "product-detail",
 45 |                 path: ":id",
 46 |                 component: TableListingDetail
 47 |             }
 48 |         ],
 49 |         meta: {
 50 |             id: 'table-listing',
 51 |             name: {
 52 |                 'en': 'Table Listing',
 53 |                 'de': 'Tabellenauflistung'
 54 |             },
 55 |             icon: 'data-table',
 56 |             path: BASE_URL + '/table-listing',
 57 |             sidebar: ADD_ON_ID,
 58 |             group: generateGroupName('general'),
 59 |         }
 60 |     },
 61 |     {
 62 |         path: '/form',
 63 |         component: FormPage,
 64 |         meta: {
 65 |             id: 'form',
 66 |             name: {
 67 |                 'en': 'Form',
 68 |                 'de': 'Form'
 69 |             },
 70 |             icon: 'search',
 71 |             path: BASE_URL + '/form',
 72 |             group: generateGroupName('general'),
 73 |         }
 74 |     },
 75 |     {
 76 |         path: '/alerts',
 77 |         component: AlertsPage,
 78 |         meta: {
 79 |             id: 'alerts',
 80 |             name: {
 81 |                 'en': 'Alerts',
 82 |                 'de': 'Alerts'
 83 |             },
 84 |             icon: 'warning',
 85 |             path: BASE_URL + '/alerts',
 86 |             group: generateGroupName('general'),
 87 |         }
 88 |     },
 89 |     {
 90 |         path: '/components',
 91 |         component: ComponentsPage,
 92 |         meta: {
 93 |             id: 'components',
 94 |             name: {
 95 |                 'en': 'Components',
 96 |                 'de': 'Components'
 97 |             },
 98 |             icon: 'ufo',
 99 |             path: BASE_URL + '/components',
100 |             group: generateGroupName('general'),
101 |         }
102 |     },
103 | ];
104 | 


--------------------------------------------------------------------------------
/src/components/ProductsListing/ProductsListingHeader/ProductsListingHeader.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="products-listing__head">
  3 |     <div class="products-listing__head-inner">
  4 |       <div class="flex items-center">
  5 |         <strong class="font-bold">Products</strong>
  6 | 
  7 |         <AySearchInput
  8 |           class="ml-2"
  9 |           @change="onSearchChange"
 10 |         />
 11 | 
 12 |         <button
 13 |           type="button"
 14 |           data-filter-count="0"
 15 |           class="mis-4 btn btn-icon-only"
 16 |           @click="showFiltersModal = true"
 17 |         >
 18 |           <IconFilter />
 19 |         </button>
 20 |       </div>
 21 | 
 22 | 
 23 |       <div>
 24 |         <button
 25 |           type="button"
 26 |           class="btn"
 27 |           :class="deleteDisabled ? '' : 'btn-danger'"
 28 |           :disabled="deleteDisabled"
 29 |           @click.prevent="$emit('delete')"
 30 |         >
 31 |           Delete
 32 |         </button>
 33 |       </div>
 34 |     </div>
 35 | 
 36 |     <div
 37 |       v-if="filters?.status?.length"
 38 |       class="products-listing__meta"
 39 |     >
 40 |       <div
 41 |         v-for="status in filters.status"
 42 |         :key="status"
 43 |         class="products-listing__filter"
 44 |       >
 45 |         {{ firstLetterToUpper(status) }}
 46 | 
 47 |         <IconClose
 48 |           class="icon icon-xs filter-tag-delete"
 49 |           @click="removeStatus(status)"
 50 |         />
 51 |       </div>
 52 |     </div>
 53 |   </div>
 54 | 
 55 |   <ProductsListingFiltersModal
 56 |     v-model:visible="showFiltersModal"
 57 |     :filters="filters"
 58 |     @filters-updated="$emit('filters-updated', $event)"
 59 |   />
 60 | </template>
 61 | 
 62 | <script lang="ts">
 63 | /**
 64 |  * External dependencies.
 65 |  */
 66 | import type { PropType } from 'vue';
 67 | import { defineComponent, ref, toRefs } from 'vue';
 68 | 
 69 | /**
 70 |  * Internal dependencies.
 71 |  */
 72 | import { firstLetterToUpper } from '@/utils';
 73 | import { ProductsFilters } from '@/composables/useFetchProductsQuery';
 74 | import ProductsListingFiltersModal from '@/components/ProductsListing/ProductsListingHeader/ProductsListingFiltersModal.vue';
 75 | 
 76 | export default defineComponent({
 77 |     name: 'ProductsListingHeader',
 78 | 
 79 |     components: { ProductsListingFiltersModal },
 80 | 
 81 |     props: {
 82 |         filters: {
 83 |           type: Object as PropType<ProductsFilters> ,
 84 |             required: true,
 85 |         },
 86 | 
 87 |         deleteDisabled: {
 88 |             type: Boolean,
 89 |             default: false,
 90 |         }
 91 |     },
 92 | 
 93 |     emits: {
 94 |         delete() {
 95 |             return true;
 96 |         },
 97 | 
 98 |         ['filters-updated'](_filters: ProductsFilters) {
 99 |             return true;
100 |         },
101 |     },
102 | 
103 |     setup(props, { emit }) {
104 |         const { filters } = toRefs(props);
105 |         const showFiltersModal = ref(false);
106 |         const removeStatus = (status: string) => {
107 |            emit('filters-updated', {
108 |                ...filters.value as ProductsFilters,
109 |                status: filters.value?.status?.filter((s) => s !== status),
110 |            })
111 |         };
112 |         const onSearchChange = (event: InputEvent) => {
113 |             const search = (event.target as HTMLInputElement).value;
114 | 
115 |             emit('filters-updated', {
116 |                 ...filters.value as ProductsFilters,
117 |                 search,
118 |             })
119 |         }
120 | 
121 |         return {
122 |             removeStatus,
123 |             onSearchChange,
124 |             showFiltersModal,
125 |             firstLetterToUpper,
126 |         }
127 |     },
128 | });
129 | </script>
130 | 


--------------------------------------------------------------------------------
/src/components/ProductsListing/ProductsListingHeader/ProductsListingFiltersModal.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <AyOffCanvas
  3 |     v-model:visible="modalVisible"
  4 |     title="Additional Filters"
  5 |     @submit="$emit('filters-updated', localFilters)"
  6 |   >
  7 |     <div class="input-row mb-4">
  8 |       <InputLabel label="Name">
  9 |         <template #default="{ inputId }">
 10 |           <AyInput
 11 |             :id="inputId"
 12 |             v-model="localFilters.name"
 13 |             class="w-full"
 14 |           />
 15 |         </template>
 16 |       </InputLabel>
 17 |     </div>
 18 | 
 19 |     <div class="input-row">
 20 |       <AySelect
 21 |         multiple
 22 |         clearable
 23 |         tag-clearable
 24 |         :model-value="localFilters.status"
 25 |         :get-label="firstLetterToUpper"
 26 |         label="Status"
 27 |         placeholder="Select a status"
 28 |         @update:model-value="onStatusUpdate"
 29 |       >
 30 |         <AyOption
 31 |           v-for="status in statuses"
 32 |           :key="status"
 33 |           :value="status"
 34 |           :label="firstLetterToUpper(status)"
 35 |         />
 36 |       </AySelect>
 37 |     </div>
 38 | 
 39 |     <template #footer="{ cancel, submit }">
 40 |       <div class="w-full flex justify-end">
 41 |         <button
 42 |           type="button"
 43 |           class="btn btn-lg off-canvas-footer-btn"
 44 |           @click="cancel"
 45 |         >
 46 |           Close
 47 |         </button>
 48 | 
 49 |         <button
 50 |           type="button"
 51 |           class="btn btn-primary btn-lg off-canvas-footer-btn mis-4"
 52 |           @click="submit"
 53 |         >
 54 |           Show Results
 55 |         </button>
 56 |       </div>
 57 |     </template>
 58 |   </AyOffCanvas>
 59 | </template>
 60 | 
 61 | <script lang="ts">
 62 | /**
 63 |  * External dependencies.
 64 |  */
 65 | import { useVModel } from '@vueuse/core';
 66 | import { defineComponent, PropType, ref, toRefs, watch } from 'vue';
 67 | 
 68 | /**
 69 |  * Internal dependencies.
 70 |  */
 71 | import InputLabel from '@/components/InputLabel/InputLabel.vue';
 72 | import { ProductsFilters } from '@/composables/useFetchProductsQuery';
 73 | import { firstLetterToUpper } from '@/utils';
 74 | 
 75 | export default defineComponent({
 76 |     name: 'ProductsListingFiltersModal',
 77 |     components: { InputLabel },
 78 |     props: {
 79 |         visible: {
 80 |             type: Boolean,
 81 |             required: true,
 82 |         },
 83 | 
 84 |         filters: {
 85 |             type: Object as PropType<ProductsFilters>,
 86 |             required: true,
 87 |         },
 88 |     },
 89 | 
 90 |     emits: {
 91 |         ['filters-updated'](_filters: ProductsFilters) {
 92 |             return true;
 93 |         },
 94 |         ['update:visible'](_value: boolean) {
 95 |             return true;
 96 |         }
 97 |     },
 98 | 
 99 |     setup(props, { emit }) {
100 |         const { filters } = toRefs(props);
101 |         const localFilters = ref<ProductsFilters>({
102 |             name: '',
103 |             status: [],
104 |         });
105 |         const modalVisible = useVModel(props, 'visible', emit);
106 |         const statuses = ['blocked', 'problem', 'live'];
107 |         const onStatusUpdate = (data: NonNullable<ProductsFilters['status']>) => {
108 |             localFilters.value = {
109 |                 ...localFilters.value,
110 |                 status: [...data],
111 |             };
112 |         };
113 | 
114 |         watch(filters, (newFilters?: ProductsFilters) => {
115 |             localFilters.value = {
116 |                 ...(newFilters || {})
117 |             };
118 |         }, { immediate: true });
119 | 
120 |         return {
121 |             statuses,
122 |             modalVisible,
123 |             localFilters,
124 |             onStatusUpdate,
125 |             firstLetterToUpper
126 |         }
127 |     }
128 | });
129 | </script>
130 | 


--------------------------------------------------------------------------------
/vite-plugins/aboutYouVueStyleLoader.ts:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * External dependencies.
  3 |  */
  4 | import path from 'path';
  5 | import { transform } from 'esbuild';
  6 | import MagicString from 'magic-string';
  7 | import type { Plugin, ResolvedConfig } from 'vite';
  8 | 
  9 | /**
 10 |  * Internal dependencies.
 11 |  */
 12 | import { AboutYouStyleLoaderOptions, generateCSSModuleCode } from './aboutYouStyleLoader';
 13 | 
 14 | export type AboutYouVueStyleLoaderOptions = Omit<AboutYouStyleLoaderOptions, 'external'> & {
 15 |     command: 'build' | 'serve',
 16 | };
 17 | 
 18 | // compile css with postcss only
 19 | const minifyCSS = async (code: string) => {
 20 |     const { code: css, warnings } = await transform(code, {
 21 |         loader: 'css',
 22 |         minify: true,
 23 |     })
 24 | 
 25 |     console.warn(warnings.join('\n'));
 26 | 
 27 |     return css;
 28 | };
 29 | 
 30 | // Since we are using shadow dom features
 31 | //
 32 | export default function aboutYouVueStyleLoader({
 33 |     addOnId,
 34 |     attributes = {},
 35 |     command = 'build',
 36 |     shadowDomContainerSelector = '.single-spa-container',
 37 | }: Partial<AboutYouVueStyleLoaderOptions> = {}): Plugin {
 38 |     let resolvedConfig: ResolvedConfig;
 39 |     const styles: Map<string, string> = new Map<string, string>()
 40 |     const plugin: Plugin = {
 41 |         name: 'aboutyou-vue-style-loader',
 42 | 
 43 |         configResolved(config) {
 44 |             resolvedConfig = config;
 45 |         },
 46 | 
 47 |         // this is called both on build and serve
 48 |         transform(code, id) {
 49 |             if (!/type=style/.test(id)) {
 50 |                 return;
 51 |             }
 52 | 
 53 |             styles.set(id, code);
 54 | 
 55 |             if (command === 'build') {
 56 |                 return;
 57 |             }
 58 | 
 59 |             let cssContents = JSON.stringify(code);
 60 |             cssContents = cssContents.replace('export default ', '');
 61 |             cssContents = JSON.parse(cssContents);
 62 |             cssContents = generateCSSModuleCode({
 63 |                 addOnId,
 64 |                 attributes,
 65 |                 moduleId: path.basename(id).split('?')[0],
 66 |                 css: cssContents,
 67 |                 mode: resolvedConfig.mode,
 68 |                 shadowDomContainerSelector,
 69 |                 command: resolvedConfig.command,
 70 |                 shouldInjectImmediately: true,
 71 |                 destroyOnHotReload: true,
 72 |             });
 73 | 
 74 |             return { code: cssContents };
 75 |         },
 76 | 
 77 |         // this is only called on build
 78 |         async renderChunk(code, chunk) {
 79 |             let chunkCSS = ''
 80 | 
 81 |             const ids = Object.keys(chunk.modules)
 82 |             for (const id of ids) {
 83 |                 if (styles.has(id)) {
 84 |                     chunkCSS += styles.get(id)
 85 |                 }
 86 |             }
 87 | 
 88 |             if (!chunkCSS) {
 89 |                 return null
 90 |             }
 91 | 
 92 | 
 93 |             // the legacy build should avoid inserting entry CSS modules here, they
 94 |             // will be collected into `chunk.viteMetadata.importedCss` and injected
 95 |             // later by the `'vite:build-html'` plugin into the `index.html`
 96 |             if (chunk.isEntry && !resolvedConfig.build.lib) {
 97 |                 return null
 98 |             }
 99 |             chunkCSS = await minifyCSS(chunkCSS)
100 |             const cssString = JSON.stringify(chunkCSS)
101 |             // might have to support assert urls
102 |             const injectCode = generateCSSModuleCode({
103 |                 addOnId,
104 |                 attributes,
105 |                 moduleId: '',
106 |                 css: cssString,
107 |                 shouldExport: false,
108 |                 mode: resolvedConfig.mode,
109 |                 shadowDomContainerSelector,
110 |                 command: resolvedConfig.command,
111 |                 shouldInjectImmediately: true,
112 |             });
113 |             const wrapIdx = code.indexOf('System.register')
114 |             const insertMark = '\'use strict\';'
115 |             const insertIdx = code.indexOf(insertMark, wrapIdx)
116 |             const s = new MagicString(code)
117 |             s.appendLeft(insertIdx + insertMark.length, injectCode)
118 | 
119 |             return { code: s.toString() }
120 |         }
121 |     };
122 | 
123 |     if (command === 'serve') {
124 |         plugin.enforce = 'post';
125 |     }
126 | 
127 |     return plugin;
128 | }
129 | 
130 | 


--------------------------------------------------------------------------------
/src/components/UserForm/UserForm.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <form
  3 |     class="card"
  4 |   >
  5 |     <div class="card-header">
  6 |       <div class="flex flex-wrap justify-between -mt-2 w-full">
  7 |         <div class="self-center mt-2">
  8 |           <h4>User settings</h4>
  9 |         </div>
 10 | 
 11 |         <div class="mt-2">
 12 |           <div class="card-header-action">
 13 |             <button
 14 |               type="button"
 15 |               data-e2e="user-delete-button"
 16 |               class="el-tooltip btn btn-icon-only"
 17 |               aria-describedby="el-tooltip-4183"
 18 |               tabindex="0"
 19 |             >
 20 |               <IconTrash />
 21 |             </button>
 22 | 
 23 |             <button
 24 |               type="reset"
 25 |               class="btn"
 26 |             >
 27 |               Cancel
 28 |             </button>
 29 | 
 30 |             <button
 31 |               type="submit"
 32 |               class="btn btn-primary"
 33 |             >
 34 |               Save
 35 |             </button>
 36 |           </div>
 37 |         </div>
 38 |       </div>
 39 |     </div>
 40 | 
 41 |     <div class="card-body grid overflow-auto gap-5 sm:grid-cols-2">
 42 |       <InputLabel label="Name">
 43 |         <template #default="{ inputId }">
 44 |           <AyInput :id="inputId" />
 45 |         </template>
 46 |       </InputLabel>
 47 | 
 48 |       <InputLabel label="Email">
 49 |         <template #default="{ inputId }">
 50 |           <AyInput :id="inputId" />
 51 |         </template>
 52 |       </InputLabel>
 53 | 
 54 |       <InputLabel label="Status">
 55 |         <AySelect
 56 |           model-value="active"
 57 |           :get-label="(value: any) => statuses?.find(option => option.value === value)?.name"
 58 |         >
 59 |           <AyOption
 60 |             v-for="status in statuses"
 61 |             :key="status.name"
 62 |             :value="status.value"
 63 |             :label="status.name"
 64 |           />
 65 |         </AySelect>
 66 |       </InputLabel>
 67 | 
 68 |       <InputLabel label="Roles">
 69 |         <AySelect
 70 |           model-value="developer"
 71 |           :get-label="(value: any) => roles?.find(option => option.value === value)?.name"
 72 |         >
 73 |           <AyOption
 74 |             v-for="role in roles"
 75 |             :key="role.name"
 76 |             :value="role.value"
 77 |             :label="role.name"
 78 |           />
 79 |         </AySelect>
 80 |       </InputLabel>
 81 | 
 82 |       <InputLabel label="Language">
 83 |         <AyCountrySelect
 84 |           :countries="['DE', 'US', 'GB']"
 85 |         />
 86 |       </InputLabel>
 87 | 
 88 |       <InputLabel
 89 |         ref="mobileNumberContainer"
 90 |         label="Mobile Number"
 91 |       >
 92 |         <template #default="{ inputId }">
 93 |           <AyInput
 94 |             :id="inputId"
 95 |             :autocomplete="false"
 96 |             type="tel"
 97 |             pattern="^ *1 *[5-7](\d *){8,10}"
 98 |             placeholder="15123456789"
 99 |           >
100 |             <template #prepend>
101 |               +49
102 |             </template>
103 | 
104 |             <template #append>
105 |               <ElTooltip
106 |                 v-if="mobileNumberContainer"
107 |                 :append-to="(mobileNumberContainer as any).$el"
108 |                 content="The phone number must be 10 or 11 digits long, and may only include numbers."
109 |               >
110 |                 <IconQuestionFill />
111 |               </ElTooltip>
112 |             </template>
113 |           </AyInput>
114 |         </template>
115 |       </InputLabel>
116 |     </div>
117 |   </form>
118 | </template>
119 | 
120 | <script lang="ts">
121 | /**
122 |  * External dependencies.
123 |  */
124 | import { defineComponent, ref } from 'vue';
125 | 
126 | /**
127 |  * Internal dependencies.
128 |  */
129 | import InputLabel from '@/components/InputLabel/InputLabel.vue';
130 | 
131 | export default defineComponent({
132 |     name: 'UserForm',
133 | 
134 |     components: { InputLabel },
135 | 
136 |     setup() {
137 |         const mobileNumberContainer = ref(null);
138 |         const statuses = [
139 |             {
140 |                 name: 'Active',
141 |                 value: 'active',
142 |             },
143 |             {
144 |                 name: 'Inactive',
145 |                 value: 'inactive',
146 |             }
147 |         ];
148 |         const roles = [
149 |             {
150 |                 name: 'Developer',
151 |                 value: 'developer',
152 |             },
153 |             {
154 |                 name: 'Panel Developer',
155 |                 value: 'panel-developer',
156 |             }
157 |         ];
158 | 
159 |         return {
160 |             roles,
161 |             statuses,
162 |             mobileNumberContainer,
163 |         }
164 |     }
165 | });
166 | </script>
167 | 


--------------------------------------------------------------------------------
/src/pages/ComponentsPage.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <Breadcrumbs
  3 |     title="Components"
  4 |     :breadcrumbs="breadcrumbs"
  5 |   />
  6 | 
  7 |   <div class="card overflow-hidden h-full">
  8 |     <div class="card-header">
  9 |       Component Playground
 10 |     </div>
 11 | 
 12 |     <div class="card-body overflow-auto">
 13 |       <AyTabs>
 14 |         <AyTab
 15 |           name="currency"
 16 |           label="Currency Inputs"
 17 |         >
 18 |           <div class="grid grid-cols-2 gap-5">
 19 |             <InputLabel label="Currency Input">
 20 |               <AyCurrencyInput
 21 |                 v-model="currencyValue"
 22 |                 currency="PLN"
 23 |               />
 24 |             </InputLabel>
 25 | 
 26 |             <InputLabel label="Currency Behaviour (Custom Input)">
 27 |               <AyCurrencyBehavior
 28 |                 v-slot="{componentBindings}"
 29 |                 v-model="currencyValue"
 30 |                 currency="USD"
 31 |               >
 32 |                 <AyInput v-bind="componentBindings">
 33 |                   <template #prepend>
 34 |                     $
 35 |                   </template>
 36 | 
 37 |                   <template #append>
 38 |                     Post
 39 |                   </template>
 40 |                 </AyInput>
 41 |               </AyCurrencyBehavior>
 42 |             </InputLabel>
 43 |           </div>
 44 |         </AyTab>
 45 | 
 46 |         <AyTab
 47 |           name="normal"
 48 |           label="Normal Inputs"
 49 |         >
 50 |           <div class="grid grid-cols-2 gap-5">
 51 |             <InputLabel label="Telephone Input">
 52 |               <AyInput
 53 |                 model-value="test"
 54 |                 type="tel"
 55 |               >
 56 |                 <template #prepend>
 57 |                   +49
 58 |                 </template>
 59 | 
 60 |                 <template #append>
 61 |                   <IconQuestionFill />
 62 |                 </template>
 63 |               </AyInput>
 64 |             </InputLabel>
 65 | 
 66 |             <InputLabel label="Number Input">
 67 |               <AyInput
 68 |                 model-value="1"
 69 |                 type="number"
 70 |               />
 71 |             </InputLabel>
 72 |           </div>
 73 |         </AyTab>
 74 | 
 75 |         <AyTab
 76 |           name="spinner"
 77 |           label="Spinner"
 78 |         >
 79 |           <div class="grid grid-cols-5 gap-5">
 80 |             <InputLabel label="Extra Small">
 81 |               <AySpinner size="xs" />
 82 |             </Inputlabel>
 83 | 
 84 |             <InputLabel label="Small">
 85 |               <AySpinner size="sm" />
 86 |             </Inputlabel>
 87 | 
 88 |             <InputLabel label="Medium">
 89 |               <AySpinner size="md" />
 90 |             </Inputlabel>
 91 | 
 92 |             <InputLabel label="Large">
 93 |               <AySpinner size="lg" />
 94 |             </Inputlabel>
 95 | 
 96 |             <InputLabel label="Extra Large">
 97 |               <AySpinner size="xl" />
 98 |             </Inputlabel>
 99 |           </div>
100 |         </AyTab>
101 | 
102 |         <AyTab
103 |           name="modals"
104 |           label="Modals"
105 |         >
106 |           <button
107 |             class="btn"
108 |             @click="showModal2 = !showModal2"
109 |           >
110 |             Open Modal
111 |           </button>
112 |           <button
113 |             class="btn"
114 |             @click="showModal = !showModal"
115 |           >
116 |             Open Off-Canvas
117 |           </button>
118 | 
119 |           <AyOffCanvas v-model:visible="showModal">
120 |             <div class="py-2 px-4">
121 |               Hello, Modal!
122 |             </div>
123 |           </AyOffCanvas>
124 | 
125 |           <AyModal v-model:visible="showModal2">
126 |             <div class="py-2 px-4">
127 |               Hello, Modal!
128 |             </div>
129 |           </AyModal>
130 |         </AyTab>
131 |       </AyTabs>
132 |     </div>
133 |   </div>
134 | </template>
135 | 
136 | <script lang="ts">
137 | import { defineComponent } from 'vue';
138 | import Breadcrumbs from '@/components/Breadcrumbs/Breadcrumbs.vue';
139 | import InputLabel from '@/components/InputLabel/InputLabel.vue';
140 | 
141 | export default defineComponent({
142 |     name: 'ComponentsPage',
143 | 
144 |     components: { InputLabel, Breadcrumbs },
145 | 
146 |     setup() {
147 |         const breadcrumbs = [
148 |             {
149 |                 title: 'General',
150 |             },
151 | 
152 |             {
153 |                 title: 'Components',
154 |             }
155 |         ];
156 | 
157 |         return {
158 |             breadcrumbs
159 |         }
160 |     },
161 | 
162 |     data() {
163 |         return {
164 |             showModal: false,
165 |             showModal2: false,
166 |             currencyValue: 12
167 |         }
168 |     },
169 | });
170 | </script>
171 | 


--------------------------------------------------------------------------------
/src/components/ProductsListing/ProductsListing.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <AySpinner v-if="isLoading " />
  3 | 
  4 |   <div
  5 |     v-else
  6 |     class="products-listing"
  7 |   >
  8 |     <LoadingOverlay v-if="isFetching || isDeleting" />
  9 | 
 10 |     <ProductsListingHeader
 11 |       :delete-disabled="isDeleteDisabled"
 12 |       :filters="filters"
 13 |       @delete="deleteModalVisible = true"
 14 |       @filters-updated="onFilterUpdate"
 15 |     />
 16 | 
 17 |     <ProductsListingBody
 18 |       :columns="columns"
 19 |       :products="products"
 20 |       @selected="onSelected"
 21 |     />
 22 | 
 23 |     <div class="products-listing__footer">
 24 |       <AyPaginationLayout
 25 |         v-if="!isLoading"
 26 |         v-model:currentPage="page"
 27 |         v-model:pageSize="perPage"
 28 |         :total="pagination?.total || 0"
 29 |       />
 30 |     </div>
 31 | 
 32 |     <AyDangerousActionModal
 33 |       hide-item-name
 34 |       title="Delete product"
 35 |       deleted-item-name="CONFIRM"
 36 |       :visible="deleteModalVisible"
 37 |       @submit="onDeleteProducts"
 38 |       @cancel="deleteModalVisible = false"
 39 |     />
 40 |   </div>
 41 | </template>
 42 | 
 43 | <script lang="ts">
 44 | /**
 45 |  * External dependencies.
 46 |  */
 47 | import type { Ref } from 'vue';
 48 | import { computed, defineComponent, ref, watch } from 'vue';
 49 | 
 50 | /**
 51 |  * Internal dependencies.
 52 |  */
 53 | import { Product } from '@/types/Product';
 54 | import useProductListingFilters from '@/composables/useProductListingFilters';
 55 | import useDeleteProductsMutation from '@/composables/useDeleteProductsMutation';
 56 | import ImageColumnTemplate from '@/components/ColumnTemplates/ImageColumnTemplate.vue';
 57 | import StringColumnTemplate from '@/components/ColumnTemplates/StringColumnTemplate.vue';
 58 | import StatusColumnTemplate from '@/components/ColumnTemplates/StatusColumnTemplate.vue';
 59 | import useFetchProductsQuery, { ProductsFilters } from '@/composables/useFetchProductsQuery';
 60 | import ProductStockColumnTemplate from '@/components/ColumnTemplates/ProductStockColumnTemplate.vue';
 61 | import LoadingOverlay from '@/components/LoadingOverlay/LoadingOverlay.vue';
 62 | import ProductsListingHeader from '@/components/ProductsListing/ProductsListingHeader/ProductsListingHeader.vue';
 63 | import ProductsListingBody from '@/components/ProductsListing/PrdocutsListingBody/ProductsListingBody.vue';
 64 | import ProductActionsColumnTemplate from '@/components/ColumnTemplates/ProductActionsColumnTemplate.vue';
 65 | 
 66 | export default defineComponent({
 67 |     name: 'ProductsListing',
 68 | 
 69 |     components: {
 70 |         ProductsListingBody,
 71 |         ProductsListingHeader,
 72 |         LoadingOverlay,
 73 |     },
 74 | 
 75 |     setup() {
 76 |         const columns = [
 77 |             {
 78 |                 prop: 'image_hash',
 79 |                 label: 'Image',
 80 |                 visible: true,
 81 |                 isSortable: false,
 82 |                 clickable: true,
 83 |                 template: ImageColumnTemplate,
 84 |                 width: 80,
 85 |             },
 86 |             {
 87 |                 prop: 'product_id',
 88 |                 label: 'Product Id',
 89 |                 visible: true,
 90 |                 template: StringColumnTemplate,
 91 |                 isSortable: false,
 92 |             },
 93 |             {
 94 |                 prop: 'name',
 95 |                 label: 'Name',
 96 |                 visible: true,
 97 |                 template: StringColumnTemplate,
 98 |                 clickable: false,
 99 |             },
100 |             {
101 |                 prop: 'merchant',
102 |                 label: 'Merchant',
103 |                 visible: true,
104 |                 template: StringColumnTemplate,
105 |                 isSortable: false,
106 |                 clickable: false,
107 |             },
108 |             {
109 |                 prop: 'status',
110 |                 label: 'Status',
111 |                 visible: true,
112 |                 template: StatusColumnTemplate,
113 |                 isSortable: false,
114 |                 width: 120,
115 |             },
116 |             {
117 |                 prop: 'stock',
118 |                 label: 'Stock',
119 |                 visible: true,
120 |                 template: ProductStockColumnTemplate,
121 |                 isSortable: false,
122 |             },
123 |             {
124 |                 prop: 'actions',
125 |                 label: 'Actions',
126 |                 visible: true,
127 |                 template: ProductActionsColumnTemplate,
128 |                 isSortable: false,
129 |             },
130 |         ];
131 |         const deleteModalVisible = ref(false);
132 |         const { page, perPage, filters, } = useProductListingFilters();
133 |         const selectedProducts: Ref<Product[]> = ref([]);
134 |         const {
135 |             isLoading,
136 |             isFetching,
137 |             pagination,
138 |         } = useFetchProductsQuery({ page, perPage, filters });
139 |         const {
140 |             isDeleting,
141 |             deleteProducts,
142 |         } = useDeleteProductsMutation();
143 |         const isDeleteDisabled = computed(() => isDeleting.value || !selectedProducts.value.length);
144 |         const onFilterUpdate = (newFilters: ProductsFilters) => {
145 |             // reset page
146 |             page.value = 1;
147 |             filters.value = newFilters;
148 |         }
149 |         const onSelected = (selection: Array<any>) => {
150 |             selectedProducts.value = [...selection];
151 |         }
152 |         const onDeleteProducts = async () => {
153 |             deleteModalVisible.value = false;
154 | 
155 |             if (isDeleteDisabled.value) {
156 |                 return;
157 |             }
158 | 
159 |             await deleteProducts(selectedProducts.value.map(product => product.id));
160 |             selectedProducts.value = [];
161 |         }
162 | 
163 |         watch(pagination, () => {
164 |             selectedProducts.value = [];
165 |         });
166 | 
167 |         return {
168 |             page,
169 |             perPage,
170 |             filters,
171 |             columns,
172 |             isLoading,
173 |             isFetching,
174 |             pagination,
175 |             onSelected,
176 |             onFilterUpdate,
177 |             selectedProducts,
178 |             isDeleting,
179 |             onDeleteProducts,
180 |             isDeleteDisabled,
181 |             deleteModalVisible,
182 |             products: computed(() => pagination.value?.products || []),
183 |         }
184 |     }
185 | });
186 | </script>
187 | 
188 | <style src="./ProductsListing.css" scoped />
189 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * External dependencies.
  3 |  */
  4 | import fs from 'fs';
  5 | import path from 'path';
  6 | import { createRequire } from 'module';
  7 | import vue from '@vitejs/plugin-vue'
  8 | import { defineConfig, loadEnv } from 'vite'
  9 | import IconsPlugin from 'unplugin-icons/vite';
 10 | import IconsResolver from 'unplugin-icons/resolver';
 11 | import tsconfigPathsPlugin from 'vite-tsconfig-paths';
 12 | import ComponentsPlugin from 'unplugin-vue-components/vite';
 13 | import AutoImport from 'unplugin-auto-import/vite';
 14 | import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 15 | 
 16 | /**
 17 |  * Internal dependencies.
 18 |  */
 19 | import aboutYouStyleLoader from './vite-plugins/aboutYouStyleLoader';
 20 | import aboutYouAddonLoader from './vite-plugins/aboutYouAddonLoader';
 21 | import aboutYouVueStyleLoader from './vite-plugins/aboutYouVueStyleLoader';
 22 | import aboutYouGlobalWindowEventLoader from './vite-plugins/aboutYouGlobalWindowEventLoader';
 23 | 
 24 | const require = createRequire(import.meta.url);
 25 | 
 26 | function generatePanelIcons() {
 27 |     const dir = path.join(path.dirname(require.resolve('@scayle/panel-icons')), 'icons');
 28 |     let icons: Record<string, string> = {};
 29 | 
 30 |     fs.readdirSync(dir).forEach(function (file: string) {
 31 |         const simpleName = file.replace('.svg', '');
 32 |         icons[simpleName] = fs.readFileSync(path.join(dir, file)).toString('utf8');
 33 |     });
 34 | 
 35 |     return icons;
 36 | }
 37 | 
 38 | const getHttpsOptions = () => {
 39 |     try {
 40 |         return {
 41 |             key: fs.readFileSync(path.resolve('./server-ssl/default.key')),
 42 |             cert: fs.readFileSync(path.resolve('./server-ssl/default.crt')),
 43 |         }
 44 |     } catch (e) {
 45 |         console.warn(
 46 |             'Private key and certificate were not found. These are required for hot-module replacement. See server-ssl/README.md'
 47 |         );
 48 | 
 49 |         return false;
 50 |     }
 51 | }
 52 | 
 53 | const generateFullURL =  ({ host, protocol, port }: { host: string; protocol: string; port: number}) => {
 54 |     const url = new URL('https://site.example');
 55 |     url.protocol = protocol;
 56 |     url.hostname = host;
 57 |     url.pathname = '/';
 58 |     url.port = port.toString();
 59 | 
 60 |     return url;
 61 | }
 62 | 
 63 | export default defineConfig(({ mode, command }) => {
 64 |     const env = loadEnv(mode, process.cwd(), ['CONFIG_', 'PANEL_']);
 65 |     const host = env.CONFIG_SERVER_HOST || 'demo-add-on.cloud-panel.aboutyou.test';
 66 |     const https = getHttpsOptions();
 67 |     const port = Number(env.CONFIG_SERVER_PORT || 8082);
 68 |     const serverOptions = {
 69 |         cors: {
 70 |             allowedHeaders: '*',
 71 |         },
 72 | 
 73 |         https,
 74 |         host,
 75 |         port,
 76 |     };
 77 |     const serverUrl = generateFullURL({
 78 |         host,
 79 |         port,
 80 |         protocol: https ? 'https' : 'http',
 81 |     });
 82 |     const shadowDomExclusivePlugins = () => {
 83 |         if (env.PANEL_USE_SHADOW_DOM !== 'true') {
 84 |             return [];
 85 |         }
 86 | 
 87 |         return [
 88 |             aboutYouGlobalWindowEventLoader({ addOnId: env.PANEL_ADDON_IDENTIFIER }),
 89 |             aboutYouVueStyleLoader({
 90 |                 command,
 91 |                 shadowDomContainerSelector: '.single-spa-container',
 92 |                 addOnId: env.PANEL_ADDON_IDENTIFIER,
 93 |                 attributes: {
 94 |                     'data-add-on': env.PANEL_ADDON_IDENTIFIER,
 95 |                 }
 96 |             }),
 97 |             aboutYouStyleLoader({
 98 |                 external: ['element-plus'],
 99 |                 shadowDomContainerSelector: '.single-spa-container',
100 |                 addOnId: env.PANEL_ADDON_IDENTIFIER,
101 |                 attributes: {
102 |                     'data-add-on': env.PANEL_ADDON_IDENTIFIER,
103 |                 },
104 |             }),
105 |         ];
106 |     }
107 | 
108 |     return {
109 |         base: serverUrl.href,
110 | 
111 |         // vitest has an issue where
112 |         // root option in test.root is ignored if this here is set
113 |         // @link: https://github.com/vitest-dev/vitest/issues/2050
114 |         root: mode === 'test' ? path.resolve(__dirname) : path.resolve(__dirname, 'src'),
115 | 
116 |         envPrefix: 'PANEL_',
117 |         envDir: path.resolve(__dirname),
118 | 
119 |         server: {
120 |             ...serverOptions,
121 | 
122 |             // Enable hot reloading
123 |             hmr: true,
124 |             origin: serverUrl.origin,
125 |         },
126 | 
127 |         preview: {
128 |             ...serverOptions
129 |         },
130 | 
131 |         plugins: [
132 |             tsconfigPathsPlugin({
133 |                 root: path.resolve(__dirname),
134 |             }),
135 |             vue({
136 |                 template: {
137 |                     compilerOptions: {
138 |                         whitespace: 'preserve',
139 |                     }
140 |                 }
141 |             }),
142 |             // our exclusive plugins must go after vue
143 |             ...shadowDomExclusivePlugins(),
144 |             aboutYouAddonLoader(),
145 |             AutoImport({
146 |                 resolvers: [ElementPlusResolver()],
147 |             }),
148 |             ComponentsPlugin({
149 |                 dts: true,
150 |                 resolvers: [
151 |                     ElementPlusResolver(),
152 |                     (componentName: string) => {
153 |                         if (componentName.startsWith('Ay')) {
154 |                             return {
155 |                                 name: componentName.slice(2),
156 |                                 from: '@scayle/components'
157 |                             };
158 |                         }
159 |                     },
160 |                     IconsResolver({
161 |                         prefix: '',
162 |                         alias: {
163 |                             icon: 'panel',
164 |                         },
165 |                         customCollections: [
166 |                             'panel',
167 |                         ]
168 |                     }),
169 |                 ],
170 |             }),
171 | 
172 |             // Autoload icons
173 |             IconsPlugin({
174 |                 compiler: 'vue3',
175 |                 defaultClass: 'icon',
176 |                 customCollections: {
177 |                     panel: generatePanelIcons()
178 |                 }
179 |             }),
180 |         ],
181 | 
182 |         define: {
183 |             'process.env.NODE_ENV': `'${mode}'`
184 |         },
185 | 
186 |         build: {
187 |             emptyOutDir: true,
188 |             manifest: true,
189 |             outDir: path.resolve(__dirname, 'dist'),
190 |             rollupOptions: {
191 |                 preserveEntrySignatures: 'strict',
192 |                 input: {
193 |                     manifest: path.resolve(__dirname, 'src/manifest.ts'),
194 |                 },
195 |                 output: {
196 |                     entryFileNames: '[name].js',
197 |                     format: 'system',
198 |                 },
199 |             },
200 |         },
201 | 
202 |         test: {
203 |             environment: 'jsdom',
204 |             deps: {
205 |                 inline: ['element-plus']
206 |             },
207 |             mockReset: true,
208 |             setupFiles: path.resolve(__dirname, 'vitest-setup.ts'),
209 |             include: ['src/**/*.unit.{js,ts}'],
210 |             outputFile: 'junit.xml',
211 |             reporters: ['default', 'junit'],
212 |             coverage: {
213 |                 reporter: ['cobertura', 'text'],
214 |                 reportsDirectory: 'coverage',
215 |                 exclude: ['src/**/*.unit.{js,ts}'],
216 |             },
217 |         },
218 |     };
219 | })
220 | 


--------------------------------------------------------------------------------
/vite-plugins/aboutYouStyleLoader.ts:
--------------------------------------------------------------------------------
  1 | import path from 'path';
  2 | import { nanoid } from 'nanoid';
  3 | import type { Plugin, ResolvedConfig } from 'vite';
  4 | import { generateWindowKeyFromAddon } from './aboutYouGlobalWindowEventLoader';
  5 | 
  6 | const commonjsProxyRE = /\?commonjs-proxy/;
  7 | const SPECIAL_QUERY_RE = /[?&](?:worker|sharedworker|raw|url)\b/
  8 | 
  9 | export type AboutYouStyleLoaderOptions = {
 10 |     external?: string[],
 11 |     attributes?: Record<string, string>,
 12 |     shadowDomContainerSelector?: string;
 13 |     addOnId: string;
 14 | };
 15 | 
 16 | export const generateCSSModuleCode = ({
 17 |         css,
 18 |         mode,
 19 |         command,
 20 |         moduleId,
 21 |         addOnId,
 22 |         attributes = {},
 23 |         shouldExport = true,
 24 |         destroyOnHotReload = false,
 25 |         shouldInjectImmediately = false,
 26 |         shadowDomContainerSelector = '.single-spa-container',
 27 |     }: {
 28 |         css: string;
 29 |         mode: string;
 30 |         moduleId: string;
 31 |         command: 'build' | 'serve'
 32 |         shouldExport?: boolean;
 33 |         destroyOnHotReload?: boolean; // destroy previous style tag, when hot reload on module ocurrs
 34 |         shouldInjectImmediately?: boolean;
 35 |         addOnId: AboutYouStyleLoaderOptions['addOnId'];
 36 |         attributes?: AboutYouStyleLoaderOptions['attributes'];
 37 |         shadowDomContainerSelector?: AboutYouStyleLoaderOptions['shadowDomContainerSelector'];
 38 |     }
 39 | ) => {
 40 |     // when we have shadow dom container selector
 41 |     // replace :root in css with that container
 42 |     // to define variables for elements inside the shadow DOM
 43 |     if (shadowDomContainerSelector) {
 44 |         css = css.replace(/:root/gi, shadowDomContainerSelector);
 45 |     }
 46 |     let hmrCode = '';
 47 |     let hmrDocumentCode = '';
 48 | 
 49 |     if (command === 'serve') {
 50 |         if (destroyOnHotReload) {
 51 |             hmrCode = `
 52 |                 import.meta.hot.accept((module) => {
 53 |                     styleDocument.destroy();
 54 |                 });
 55 |             `;
 56 |         } else {
 57 |             hmrCode = `
 58 |                 import.meta.hot.accept((module) => {
 59 |                     styleDocument.update(module.default.cssContent);
 60 |                     styleDocument.updateId(module.default.id);
 61 |                 });
 62 |             `;
 63 |         }
 64 | 
 65 |         hmrDocumentCode = `
 66 |             id: id,
 67 |             updateId(newId) {
 68 |                 const oldId = id;
 69 |                 id = newId;
 70 | 
 71 |                 const parent = getParent();
 72 |                 const element = parent.querySelector('#' + escapeCSSSelector(oldId));
 73 | 
 74 |                 if (!element) {
 75 |                     console.log('[ADDON_VITE_HMR] Element not found with id: ' + oldId);
 76 |                     return;
 77 |                 }
 78 | 
 79 |                 element.setAttribute('id', newId);
 80 |             },
 81 |             cssContent: ${css},
 82 |         `;
 83 |     }
 84 |     let styleId = `style-${nanoid()}`;
 85 | 
 86 |     if (mode === 'development') {
 87 |         const fileName = path.basename(moduleId);
 88 |         styleId += '-' + fileName;
 89 |     }
 90 | 
 91 |     let injectCode = '';
 92 | 
 93 |     if (shouldInjectImmediately) {
 94 |         const windowKey = generateWindowKeyFromAddon(addOnId);
 95 |         injectCode += `
 96 |             styleDocument.use();
 97 | 
 98 |             window['${windowKey}']?.listen(() => styleDocument.use());
 99 |         `;
100 |     }
101 | 
102 |     return `
103 |         const escapeCSSSelector = (selector) => {
104 |             if (!window.CSS) {
105 |                 return selector;
106 |             }
107 | 
108 |             return CSS.escape(selector);
109 |         };
110 |         const initDocumentCreation = () => {
111 |             let id = '${styleId}';
112 | 
113 |             const getParent = () => {
114 |                 let parent = document.querySelector('head');
115 |                 const shadowRoot = document.querySelector('.single-spa-shadow-dom-container')?.shadowRoot;
116 | 
117 |                 if (shadowRoot) {
118 |                     parent = shadowRoot.querySelector('.single-spa-container');
119 |                 }
120 | 
121 |                 return parent;
122 |             }
123 | 
124 |             return {
125 |                 use() {
126 |                     const parent = getParent();
127 |                     let element = parent.querySelector('#' + escapeCSSSelector(id));
128 | 
129 |                     // set the direction of the parent if it is not set
130 |                     if (!parent?.getAttribute('dir')) {
131 |                         const dir = document.querySelector('[dir]').getAttribute('dir') || 'ltr';
132 |                         parent.setAttribute('dir', dir);
133 |                     }
134 | 
135 |                     if (element && element?.sheet) {
136 |                         element.sheet.disabled = false;
137 | 
138 |                         return;
139 |                     }
140 | 
141 |                     element = document.createElement('style');
142 |                     element.setAttribute('id', id);
143 |                     ${
144 |                     Object.keys(attributes)
145 |                         .map((key) => `element.setAttribute('${key}', '${attributes[key]}');`)
146 |                         .join('\n')
147 |                     }
148 |                     element.appendChild(document.createTextNode(${css}));
149 | 
150 |                     parent.appendChild(element);
151 |                 },
152 |                 unuse() {
153 |                     const parent = getParent();
154 |                     const element = parent.querySelector('#' + escapeCSSSelector(id));
155 | 
156 |                     if (!element || !element?.sheet) {
157 |                         return;
158 |                     }
159 | 
160 |                     element.sheet.disabled = true;
161 |                 },
162 |                 destroy() {
163 |                     const parent = getParent();
164 |                     const element = parent.querySelector('#' + escapeCSSSelector(id));
165 | 
166 |                     if (!element || !element?.sheet) {
167 |                         return;
168 |                     }
169 | 
170 |                     element.parentElement.removeChild(element);
171 |                 },
172 |                 update(newCssContent) {
173 |                     const parent = getParent();
174 |                     let element = parent.querySelector('#' + escapeCSSSelector(id));
175 | 
176 |                     if (!element) {
177 |                         return;
178 |                     }
179 | 
180 |                     element.innerHTML = '';
181 |                     element.appendChild(document.createTextNode(newCssContent));
182 |                 },
183 |                 ${hmrDocumentCode}
184 |             }
185 |         };
186 | 
187 |         const styleDocument = initDocumentCreation();
188 | 
189 |         ${hmrCode}
190 | 
191 |         ${injectCode}
192 | 
193 |         ${shouldExport ? 'export default styleDocument;' : ''}
194 |     `;
195 | };
196 | 
197 | // There are not vite plugins that support features similar to webpack's `style-loader`
198 | // @link: https://github.com/vitejs/vite/issues/4222
199 | export default function aboutYouStyleLoader({
200 |     addOnId,
201 |     external = [],
202 |     attributes = {},
203 |     shadowDomContainerSelector = '.single-spa-container',
204 | }: Partial<AboutYouStyleLoaderOptions> = {}): Plugin {
205 |     let resolvedConfig: ResolvedConfig;
206 | 
207 |     return {
208 |         enforce: 'post',
209 | 
210 |         name: 'aboutyou-style-loader',
211 | 
212 |         configResolved(config) {
213 |             resolvedConfig = config;
214 | 
215 |             config.plugins.forEach((plugin) => {
216 |                 if (plugin.name === 'vite:css-post') {
217 |                     delete plugin['renderChunk'];
218 | 
219 |                     const oldPluginTransform = plugin.transform as Function;
220 |                     plugin.transform = (css, id, options) => {
221 |                         // add inline
222 |                         // to css files on serve mode
223 |                         // so that we do not transform the code in vite:css-post plugin
224 |                         if (config.command === 'serve') {
225 |                             id = id + '?inline';
226 |                         } else {
227 |                             let isExternalPackage = false;
228 |                             for (const externalPackage of external) {
229 |                                 // external packages are always under node_modules
230 |                                 if (id.includes('node_modules/' + externalPackage)) {
231 |                                     isExternalPackage = true;
232 |                                 }
233 |                             }
234 | 
235 |                             // add used id to external css packages
236 |                             if (isExternalPackage) {
237 |                                 id = id + '?used';
238 |                             }
239 |                         }
240 | 
241 | 
242 |                         return oldPluginTransform(css, id, options);
243 |                     }
244 |                 }
245 | 
246 |                 return plugin;
247 |             });
248 | 
249 |         },
250 | 
251 |         transform(code, id) {
252 |             // Checks retrieved from vite css plugin
253 |             // @link: https://github.com/vitejs/vite/blob/main/packages/vite/src/node/plugins/css.ts#L348
254 | 
255 |             if (
256 |                 !/\.css($|\?)/.test(id) ||
257 |                 /type=style/.test(id) ||
258 |                 commonjsProxyRE.test(id) ||
259 |                 SPECIAL_QUERY_RE.test(id)
260 |             ) {
261 |                 return
262 |             }
263 | 
264 |             let cssContents = JSON.stringify(code);
265 |             cssContents = cssContents.replace('export default ', '');
266 |             cssContents = JSON.parse(cssContents);
267 | 
268 |             let isExternalPackage = false;
269 |             for (const externalPackage of external) {
270 |                 // external packages are always under node_modules
271 |                 if (id.includes('node_modules/' + externalPackage)) {
272 |                     isExternalPackage = true;
273 |                 }
274 |             }
275 | 
276 |             return {
277 |                 code: generateCSSModuleCode({
278 |                     attributes,
279 |                     addOnId,
280 |                     moduleId: id,
281 |                     css: cssContents,
282 |                     mode: resolvedConfig.mode,
283 |                     shadowDomContainerSelector,
284 |                     command: resolvedConfig.command,
285 |                     shouldInjectImmediately: isExternalPackage,
286 |                 }),
287 |             };
288 |         }
289 |     };
290 | }
291 | 


--------------------------------------------------------------------------------
/src/mocks/products.json:
--------------------------------------------------------------------------------
1 | {"current_page":1,"data":[{"id":1,"product_id":1,"name":"Blaues Shirt","merchant":"Default","status":"blocked","image_hash":"images\/084dace7d7ff691e97982fa554113c29","stock":{"stockCount":"18","variantCount":1},"style_key":"M0001","attribute_group_1250":"Light blue<<delimiter>>Turquoise","attribute_group_1251":"Large","attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":2,"product_id":2,"name":"New name","merchant":"Default","status":"blocked","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/0000052a2bd9c5455f55f09cd3948be4","stock":{"stockCount":"26","variantCount":2},"style_key":"5551637243190","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":5,"product_id":5,"name":"H\u00fcftg\u00fcrtel-188079","merchant":"Default","status":"blocked","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000006a32bfa4f18f31a0fe9ad7a0a5d.jpeg","stock":{"stockCount":"10","variantCount":1},"style_key":"5551637243197","attribute_group_1250":"Matte black","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":6,"product_id":6,"name":"Hemd-Bluse-188080","merchant":"Default","status":"blocked","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000006bf7a6771d4a7ffda7c786f17c0.jpeg","stock":{"stockCount":"12","variantCount":1},"style_key":"5551637243199","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":9,"product_id":9,"name":"Cardigan-188083","merchant":"Default","status":"blocked","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000006bf7a6771d4a7ffda7c786f17c0.jpeg","stock":{"stockCount":"9","variantCount":1},"style_key":"5551637243206","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":11,"product_id":11,"name":"Jacke'Madison'-188085","merchant":"Default","status":"blocked","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000006bf7a6771d4a7ffda7c786f17c0.jpeg","stock":{"stockCount":"17","variantCount":1},"style_key":"5551637243211","attribute_group_1250":"Light blue<<delimiter>>Turquoise","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":13,"product_id":13,"name":"Wintermantel-188087","merchant":"Default","status":"blocked","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/0000234d38628e2c0876e4b1a37bb56e.jpg","stock":{"stockCount":"13","variantCount":1},"style_key":"5551637243214","attribute_group_1250":null,"attribute_group_1251":"Large","attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":14,"product_id":14,"name":"Kapuzenjacke-188088","merchant":"Default","status":"blocked","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/0000259fe0722e2bff3d0a208203ef55.jpeg","stock":{"stockCount":"114","variantCount":1},"style_key":"5551637243215","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":15,"product_id":15,"name":"Longsleeve-188089","merchant":"Default","status":"blocked","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000025d2a56343b91d778f672e86ef14.jpeg","stock":{"stockCount":"15","variantCount":1},"style_key":"5551637243216","attribute_group_1250":"Matte black","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":16,"product_id":16,"name":"Winterstiefel-188090","merchant":"Default","status":"blocked","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000027d0e20fb9ea39038b6dcbd44527","stock":{"stockCount":"16","variantCount":1},"style_key":"5551637243218","attribute_group_1250":"Light blue<<delimiter>>Turquoise","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":17,"product_id":17,"name":"Zubeh\u00f6r-188091","merchant":"Default","status":"blocked","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000028461fb717bc103308b7996217ca.jpg","stock":{"stockCount":"17","variantCount":1},"style_key":"5551637243219","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":18,"product_id":18,"name":"Kleid-188092","merchant":"Default","status":"blocked","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000028835d30fcfd535049515ce3d8be.jpg","stock":{"stockCount":"68","variantCount":1},"style_key":"5551637243220","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":20,"product_id":20,"name":"StrickCardigan-188094","merchant":"Default","status":"blocked","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/0000368e362f4d565e6f18d30af581a2.jpeg","stock":{"stockCount":"20","variantCount":1},"style_key":"5551637243223","attribute_group_1250":"Matte black","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":21,"product_id":21,"name":"Ohrringe'Baroque52'","merchant":"Default","status":"blocked","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000037668e663bb13204b9d81901ffe2","stock":{"stockCount":"21","variantCount":1},"style_key":"5551637243225","attribute_group_1250":"Light blue<<delimiter>>Turquoise","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":22,"product_id":22,"name":"Stiefelette-188096","merchant":"Default","status":"blocked","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/0000259fe0722e2bff3d0a208203ef55.jpeg","stock":{"stockCount":"22","variantCount":1},"style_key":"5551637243226","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":23,"product_id":23,"name":"Straight-Pant","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/0000467148e19a4954da268d7609b940.jpeg","stock":{"stockCount":"23","variantCount":1},"style_key":"5551637243227","attribute_group_1250":"Gold<<delimiter>>Yellow","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":24,"product_id":24,"name":"faltbareBallerinas-188098","merchant":"Default","status":"live","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/0000492011665cbc81c0c3e1bef9816f.jpeg","stock":{"stockCount":"24","variantCount":1},"style_key":"5551637243229","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":25,"product_id":25,"name":"Blazer-188099","merchant":"Default","status":"blocked","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000049eacc843be72094c013c9f96e65","stock":{"stockCount":"25","variantCount":1},"style_key":"5551637243230","attribute_group_1250":"Matte black","attribute_group_1251":"Large","attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":26,"product_id":26,"name":"Imported product name 2","merchant":"Default","status":"blocked","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/00000407352474373ac87aa27929c6a2.jpg","stock":{"stockCount":"26","variantCount":1},"style_key":"5551637243231","attribute_group_1250":"Light blue<<delimiter>>Turquoise","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":27,"product_id":27,"name":"Jeans'RANDO-AUTHENTICLINE'-188101","merchant":"Default","status":"blocked","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/0000052a2bd9c5455f55f09cd3948be4","stock":{"stockCount":"27","variantCount":1},"style_key":"5551637243233","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":28,"product_id":28,"name":"Sport-Jacke-188102","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/0000052a2bd9c5455f55f09cd3948be4","stock":{"stockCount":"28","variantCount":1},"style_key":"5551637243234","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":29,"product_id":29,"name":"Pullover 'Belwy'-188103","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/0000057c8b7ee3cb3bfb49a1079e58c0","stock":{"stockCount":"29","variantCount":1},"style_key":"W0sXZGC2Ug","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":30,"product_id":30,"name":"H\u00fcftg\u00fcrtel-188104","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000006a32bfa4f18f31a0fe9ad7a0a5d.jpeg","stock":{"stockCount":"30","variantCount":1},"style_key":"The0WieMBD","attribute_group_1250":"Matte black","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":31,"product_id":31,"name":"Hemd-Bluse-188105","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000006bf7a6771d4a7ffda7c786f17c0.jpeg","stock":{"stockCount":"31","variantCount":1},"style_key":"FcIDqJoR2i","attribute_group_1250":"Light blue<<delimiter>>Turquoise","attribute_group_1251":"Large","attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":32,"product_id":32,"name":"Sweatjacke 'RYLIE'-188106","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000009034102b549859cc90cff113147.jpg","stock":{"stockCount":"32","variantCount":1},"style_key":"7QumUCCBHT","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":33,"product_id":33,"name":"Oversized Pullover-188107","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/0000104a1e2fd07220be2b30f4deb328.jpeg","stock":{"stockCount":"33","variantCount":1},"style_key":"gkuEDpdTuI","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":34,"product_id":34,"name":"Cardigan-188108","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/00001bcbf69be6d8fe7e52596c95676f.jpeg","stock":{"stockCount":"34","variantCount":1},"style_key":"7y3nhdfViU","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":35,"product_id":35,"name":"Strickjacke 'ISABELLA'-188109","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/00001e44476df4e825881acf37aae44f.jpg","stock":{"stockCount":"35","variantCount":1},"style_key":"Wp3fBqyJFH","attribute_group_1250":"Matte black","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":36,"product_id":36,"name":"Jacke 'Madison'-188110","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/00002060a2ed818412e861fc316f75ec.jpg","stock":{"stockCount":"36","variantCount":1},"style_key":"CwLEqguIdb","attribute_group_1250":"Light blue<<delimiter>>Turquoise","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":37,"product_id":37,"name":"Pullover-188111","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000021daa86c2974ccde29bb305eb680","stock":{"stockCount":"37","variantCount":1},"style_key":"Oxr3Suk0CG","attribute_group_1250":null,"attribute_group_1251":"Large","attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":38,"product_id":38,"name":"Wintermantel-188112","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/0000234d38628e2c0876e4b1a37bb56e.jpg","stock":{"stockCount":"38","variantCount":1},"style_key":"tVFZuLga8g","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":39,"product_id":39,"name":"Kapuzenjacke-188113","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/0000259fe0722e2bff3d0a208203ef55.jpeg","stock":{"stockCount":"39","variantCount":1},"style_key":"ybz1P9Gnb4","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":40,"product_id":40,"name":"Longsleeve-188114","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000025d2a56343b91d778f672e86ef14.jpeg","stock":{"stockCount":"40","variantCount":1},"style_key":"efktKo40s3","attribute_group_1250":"Matte black","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":41,"product_id":41,"name":"Winterstiefel-188115","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000027d0e20fb9ea39038b6dcbd44527","stock":{"stockCount":"41","variantCount":1},"style_key":"W7ffqRfIEV","attribute_group_1250":"Light blue<<delimiter>>Turquoise","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":42,"product_id":42,"name":"Zubeh\u00f6r-188116","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000028461fb717bc103308b7996217ca.jpg","stock":{"stockCount":"42","variantCount":1},"style_key":"3NzOReZqdV","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":43,"product_id":43,"name":"Kleid-188117","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000028835d30fcfd535049515ce3d8be.jpg","stock":{"stockCount":"43","variantCount":1},"style_key":"XRcagmv6rm","attribute_group_1250":null,"attribute_group_1251":"Large","attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":44,"product_id":44,"name":"Winterstiefel-188118","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/0000342755a07dec90a189d78dbe6ac9","stock":{"stockCount":"44","variantCount":1},"style_key":"TAkovD8ElA","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":45,"product_id":45,"name":"Strick Cardigan-188119","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/0000368e362f4d565e6f18d30af581a2.jpeg","stock":{"stockCount":"45","variantCount":1},"style_key":"aLpj1qF1na","attribute_group_1250":"Matte black","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":46,"product_id":46,"name":"Ohrringe 'Baroque52'-188120","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000037668e663bb13204b9d81901ffe2","stock":{"stockCount":"46","variantCount":1},"style_key":"h1xEbAzSgE","attribute_group_1250":"Light blue<<delimiter>>Turquoise","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":47,"product_id":47,"name":"Stiefelette-188121","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000045224b8163888446a55b5c1136ec","stock":{"stockCount":"47","variantCount":1},"style_key":"PfopUEi6VQ","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":48,"product_id":48,"name":"Straight-Leg Jeans-188122","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/0000467148e19a4954da268d7609b940.jpeg","stock":{"stockCount":"48","variantCount":1},"style_key":"RoP9bbvB5A","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":49,"product_id":49,"name":"faltbare Ballerinas-188123","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/0000492011665cbc81c0c3e1bef9816f.jpeg","stock":{"stockCount":"49","variantCount":1},"style_key":"QdtWK2OfeR","attribute_group_1250":null,"attribute_group_1251":"Large","attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":50,"product_id":50,"name":"Blazer-188124","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000049eacc843be72094c013c9f96e65","stock":{"stockCount":"50","variantCount":1},"style_key":"j2eDgbCXw1","attribute_group_1250":"Matte black","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":52,"product_id":52,"name":"Blaues Shirt","merchant":"Default","status":"problem","image_hash":null,"stock":{"stockCount":"0","variantCount":0},"style_key":"5551637243187","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":64,"product_id":64,"name":"underware","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/0000052a2bd9c5455f55f09cd3948be4","stock":{"stockCount":"33","variantCount":3},"style_key":"pt-style-key-6","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":70,"product_id":70,"name":"Blaues Shirt","merchant":"Default","status":"problem","image_hash":null,"stock":{"stockCount":"0","variantCount":0},"style_key":"BCO4646-m1","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":71,"product_id":71,"name":"Blaues Shirt","merchant":"Default","status":"problem","image_hash":null,"stock":{"stockCount":"0","variantCount":0},"style_key":"M0001","attribute_group_1250":"Light blue<<delimiter>>Turquoise","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":72,"product_id":72,"name":"Rot Shirt","merchant":"Default","status":"problem","image_hash":null,"stock":{"stockCount":"0","variantCount":0},"style_key":"BCO4646-m2","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":73,"product_id":73,"name":"Rot Shirt","merchant":"Default","status":"problem","image_hash":null,"stock":{"stockCount":"0","variantCount":0},"style_key":"BCO4646-m2","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":79,"product_id":79,"name":"Schwarz Shirt","merchant":"Default","status":"problem","image_hash":null,"stock":{"stockCount":"0","variantCount":0},"style_key":"BCO4646-m2","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":81,"product_id":81,"name":"Rot Shirt","merchant":"Default","status":"problem","image_hash":null,"stock":{"stockCount":"0","variantCount":0},"style_key":"BCO4646-nurullah-m1","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":82,"product_id":82,"name":"Rot Shirt","merchant":"Default","status":"problem","image_hash":null,"stock":{"stockCount":"0","variantCount":0},"style_key":"BCO4646-nurullah-with-master-m1","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":83,"product_id":83,"name":"Rot Shirt","merchant":"Default","status":"problem","image_hash":null,"stock":{"stockCount":"0","variantCount":0},"style_key":"BCO4646-nurullah-with-master-m1","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":84,"product_id":84,"name":"Rot Shirt","merchant":"Default","status":"problem","image_hash":null,"stock":{"stockCount":"0","variantCount":0},"style_key":"BCO4646-nurullah-with-master-m2","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":85,"product_id":85,"name":"Rot Shirt","merchant":"Default","status":"problem","image_hash":null,"stock":{"stockCount":"0","variantCount":0},"style_key":"BCO4646-nurullah-with-master-m3","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":86,"product_id":86,"name":"Rot Shirt","merchant":"Default","status":"problem","image_hash":null,"stock":{"stockCount":"0","variantCount":0},"style_key":"BCO4646-nurullah-with-master-m3","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":87,"product_id":87,"name":"Rot Shirt","merchant":"Default","status":"problem","image_hash":null,"stock":{"stockCount":"0","variantCount":0},"style_key":"BCO4646-nurullah-with-master-m4","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":88,"product_id":88,"name":"Rot Shirt","merchant":"Default","status":"problem","image_hash":null,"stock":{"stockCount":"0","variantCount":0},"style_key":"BCO4646-nurullah-with-master-m4","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":89,"product_id":89,"name":"Rot Shirt","merchant":"Default","status":"problem","image_hash":null,"stock":{"stockCount":"0","variantCount":0},"style_key":"BCO4646-nurullah-with-master-m4","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":90,"product_id":90,"name":"Rot Shirt","merchant":"Default","status":"problem","image_hash":null,"stock":{"stockCount":"0","variantCount":0},"style_key":"BCO4646-m2","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":91,"product_id":91,"name":"Blaues Shirt","merchant":"Default","status":"problem","image_hash":null,"stock":{"stockCount":"0","variantCount":0},"style_key":"BCO4646-m11","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":92,"product_id":92,"name":"Blaues Shirt","merchant":"Default","status":"problem","image_hash":null,"stock":{"stockCount":"0","variantCount":0},"style_key":"BCO4646-m11","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":94,"product_id":94,"name":"Rot Shirt","merchant":"Default","status":"problem","image_hash":null,"stock":{"stockCount":"0","variantCount":0},"style_key":"BCO4646-m11","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":95,"product_id":95,"name":"Rot Shirt","merchant":"Default","status":"problem","image_hash":null,"stock":{"stockCount":"0","variantCount":0},"style_key":"BCO4646-m11","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":97,"product_id":97,"name":"Schwarz Shirt","merchant":"Default","status":"problem","image_hash":null,"stock":{"stockCount":"0","variantCount":0},"style_key":"BCO4646-m11","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":100,"product_id":100,"name":"Blaues Shirt","merchant":"Default","status":"problem","image_hash":null,"stock":{"stockCount":"0","variantCount":0},"style_key":"M0005","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":101,"product_id":101,"name":"Blaues Shirt","merchant":"Default","status":"problem","image_hash":null,"stock":{"stockCount":"0","variantCount":0},"style_key":"M0006","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":102,"product_id":102,"name":"Blaues Shirt","merchant":"Default","status":"problem","image_hash":null,"stock":{"stockCount":"0","variantCount":0},"style_key":"M0008","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":103,"product_id":103,"name":"Blaues Shirt update test","merchant":"Default","status":"problem","image_hash":null,"stock":{"stockCount":"0","variantCount":0},"style_key":"M0008","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":104,"product_id":104,"name":"Blaues Shirt update test","merchant":"Default","status":"problem","image_hash":null,"stock":{"stockCount":"0","variantCount":0},"style_key":"M0008","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":105,"product_id":105,"name":"Blaues Shirt update test","merchant":"Default","status":"problem","image_hash":null,"stock":{"stockCount":"0","variantCount":0},"style_key":"M0011","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":106,"product_id":106,"name":"Mein Produkt","merchant":"Default","status":"problem","image_hash":null,"stock":{"stockCount":"0","variantCount":0},"style_key":"myMasterReferenceKey","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":111,"product_id":111,"name":"Mein Produkt","merchant":"Default","status":"problem","image_hash":null,"stock":{"stockCount":"0","variantCount":0},"style_key":"myMasterReferenceKeyJava","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":114,"product_id":114,"name":"Mein Produkt","merchant":"Default","status":"problem","image_hash":null,"stock":{"stockCount":"0","variantCount":0},"style_key":"myMasterReferenceKeyJS","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":116,"product_id":116,"name":"Blaues Shirt","merchant":"Default","status":"problem","image_hash":null,"stock":{"stockCount":"0","variantCount":0},"style_key":"M0001-curl","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":117,"product_id":117,"name":"Blaues Shirt test key","merchant":"Default","status":"problem","image_hash":null,"stock":{"stockCount":"0","variantCount":0},"style_key":"M0001-update-test2","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":122,"product_id":122,"name":"Rot Shirt","merchant":"Default","status":"problem","image_hash":null,"stock":{"stockCount":"0","variantCount":0},"style_key":"BCO4646-nurullah-with-master-m6","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":123,"product_id":123,"name":"Rot Shirt","merchant":"Default","status":"problem","image_hash":null,"stock":{"stockCount":"0","variantCount":0},"style_key":"BCO4646-nurullah-with-master-m22","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":124,"product_id":124,"name":"Rot Shirt","merchant":"Default","status":"problem","image_hash":null,"stock":{"stockCount":"0","variantCount":0},"style_key":"BCO4646-nurullah-with-master-m24","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":125,"product_id":125,"name":"Rot Shirt","merchant":"Default","status":"problem","image_hash":null,"stock":{"stockCount":"0","variantCount":0},"style_key":"BCO4646-nurullah-with-master-m25","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":126,"product_id":126,"name":"Rot Shirt","merchant":"Default","status":"problem","image_hash":null,"stock":{"stockCount":"0","variantCount":0},"style_key":"BCO4646-nurullah-with-master-m28","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":127,"product_id":127,"name":"Rot Shirt","merchant":"Default","status":"problem","image_hash":null,"stock":{"stockCount":"0","variantCount":0},"style_key":"BCO4646-nurullah-with-master-m29","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":154,"product_id":154,"name":"Blaues Shirt","merchant":"Default","status":"problem","image_hash":"images\/6ead3a68f080e56cd804cbeb9d806a4b.png","stock":{"stockCount":"0","variantCount":0},"style_key":"M00111-test-status","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":155,"product_id":155,"name":"Blaues Shirt","merchant":"Default","status":"problem","image_hash":"images\/6ead3a68f080e56cd804cbeb9d806a4b.png","stock":{"stockCount":"0","variantCount":0},"style_key":"M00111-test-status","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":156,"product_id":156,"name":"Blaues Shirt","merchant":"Default","status":"problem","image_hash":"images\/6ead3a68f080e56cd804cbeb9d806a4b.png","stock":{"stockCount":"0","variantCount":0},"style_key":"M00111-test-without-variant","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":158,"product_id":158,"name":"Blaues Shirt","merchant":"Default","status":"problem","image_hash":null,"stock":{"stockCount":"0","variantCount":0},"style_key":"M00111-test-without-image","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":159,"product_id":159,"name":"Blaues Shirt","merchant":"Default","status":"problem","image_hash":"images\/6ead3a68f080e56cd804cbeb9d806a4b.png","stock":{"stockCount":"0","variantCount":0},"style_key":"M00111-test-without-mandatory-ag","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":160,"product_id":160,"name":"Blaues Shirt","merchant":"Default","status":"problem","image_hash":"images\/6ead3a68f080e56cd804cbeb9d806a4b.png","stock":{"stockCount":"0","variantCount":0},"style_key":"M00111-test-with-mandatory-ag","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":161,"product_id":161,"name":"Blaues Shirt","merchant":"Default","status":"problem","image_hash":"images\/6ead3a68f080e56cd804cbeb9d806a4b.png","stock":{"stockCount":"0","variantCount":0},"style_key":"M00111-test-with-differentiating-ag","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":162,"product_id":162,"name":"Blaues Shirt","merchant":"Default","status":"problem","image_hash":"images\/6ead3a68f080e56cd804cbeb9d806a4b.png","stock":{"stockCount":"0","variantCount":0},"style_key":"M00111-test-with-differentiating-ag","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":163,"product_id":163,"name":"Blaues Shirt","merchant":"Default","status":"problem","image_hash":"images\/6ead3a68f080e56cd804cbeb9d806a4b.png","stock":{"stockCount":"0","variantCount":0},"style_key":"master-test-without-variant","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":172,"product_id":172,"name":"T-Shirt Damen Gr\u00fcn-Blau","merchant":"Default","status":"problem","image_hash":null,"stock":{"stockCount":"35","variantCount":2},"style_key":"4uRoevldc3","attribute_group_1250":"Light blue<<delimiter>>Turquoise","attribute_group_1251":"Large","attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":173,"product_id":173,"name":"T-Shirt Herren Rot","merchant":"Default","status":"problem","image_hash":"images\/da0ff91a20ae8589580c37fc2b456c7e.png","stock":{"stockCount":"78","variantCount":3},"style_key":"k40bN8iwdC","attribute_group_1250":null,"attribute_group_1251":"Large","attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":174,"product_id":174,"name":"\"Maddison\" Hose","merchant":"Default","status":"problem","image_hash":null,"stock":{"stockCount":"73","variantCount":2},"style_key":"e7ehNVpbtg","attribute_group_1250":"Light blue<<delimiter>>Turquoise","attribute_group_1251":"Large","attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":175,"product_id":175,"name":"\"Jackson\" Hose","merchant":"Default","status":"problem","image_hash":null,"stock":{"stockCount":"54","variantCount":2},"style_key":"uz0q56YJ3J","attribute_group_1250":null,"attribute_group_1251":"Large","attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":176,"product_id":176,"name":"\"Lily\" Hose","merchant":"Default","status":"problem","image_hash":"images\/da0ff91a20ae8589580c37fc2b456c7e.png","stock":{"stockCount":"81","variantCount":2},"style_key":"kuZ4C5MkEP","attribute_group_1250":"Matte black","attribute_group_1251":"Large","attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":177,"product_id":177,"name":"\"Henry\" Pullover","merchant":"Default","status":"problem","image_hash":"images\/da0ff91a20ae8589580c37fc2b456c7e.png","stock":{"stockCount":"42","variantCount":1},"style_key":"g644R2Plr8","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":178,"product_id":178,"name":"Jacket Wei\u00df","merchant":"Default","status":"problem","image_hash":null,"stock":{"stockCount":"43","variantCount":1},"style_key":"AhOML9U078","attribute_group_1250":"Matte black","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":179,"product_id":179,"name":"Blazer","merchant":"Default","status":"problem","image_hash":"images\/da0ff91a20ae8589580c37fc2b456c7e.png","stock":{"stockCount":"51","variantCount":2},"style_key":"WO3nzAn2if","attribute_group_1250":null,"attribute_group_1251":"Large","attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":180,"product_id":180,"name":"Pumps 5cm","merchant":"Default","status":"problem","image_hash":null,"stock":{"stockCount":"19","variantCount":2},"style_key":"p8hXncVkUl","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":181,"product_id":181,"name":"Sportschuhe","merchant":"Default","status":"problem","image_hash":null,"stock":{"stockCount":"73","variantCount":3},"style_key":"gFZm29IDDF","attribute_group_1250":"Matte black","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":182,"product_id":182,"name":"blaue Hose","merchant":"Default","status":"problem","image_hash":null,"stock":{"stockCount":"21","variantCount":1},"style_key":"ZXzofEDRBb","attribute_group_1250":"Light blue<<delimiter>>Turquoise","attribute_group_1251":"Large","attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":183,"product_id":183,"name":"T-Shirt Damen Blau-Rot","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/00000407352474373ac87aa27929c6a2.jpg","stock":{"stockCount":"248","variantCount":8},"style_key":"WEVmr9CMCK","attribute_group_1250":"Gold<<delimiter>>Yellow","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":184,"product_id":184,"name":"T-Shirt Herren Gr\u00fcn-Rot","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/0000052a2bd9c5455f55f09cd3948be4","stock":{"stockCount":"32","variantCount":8},"style_key":"FMCakwI8fA","attribute_group_1250":"German Rot","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":185,"product_id":185,"name":"\"Maddison\" Hose","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/0000057b97c9aa524efa995192511938.jpg","stock":{"stockCount":"279","variantCount":8},"style_key":"Bohemian1","attribute_group_1250":"German Rot<<delimiter>>Gold<<delimiter>>Yellow","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":186,"product_id":186,"name":"\"Jackson\" Hose","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/0000057c8b7ee3cb3bfb49a1079e58c0","stock":{"stockCount":"272","variantCount":8},"style_key":"Petite1","attribute_group_1250":"Matte black","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":187,"product_id":187,"name":"\"Lily\" Hose","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000006a32bfa4f18f31a0fe9ad7a0a5d.jpeg","stock":{"stockCount":"88","variantCount":8},"style_key":"PlusSize1","attribute_group_1250":"German Rot<<delimiter>>Gold<<delimiter>>Matte black<<delimiter>>Yellow","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":188,"product_id":188,"name":"\"Henry\" Pullover","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000006bf7a6771d4a7ffda7c786f17c0.jpeg","stock":{"stockCount":"288","variantCount":8},"style_key":"lwXzoGcDru","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":189,"product_id":189,"name":"Jacket Wei\u00df","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000009034102b549859cc90cff113147.jpg","stock":{"stockCount":"296","variantCount":8},"style_key":"Bohemian1","attribute_group_1250":"Matte black","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":190,"product_id":190,"name":"Blazer","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/0000104a1e2fd07220be2b30f4deb328.jpeg","stock":{"stockCount":"120","variantCount":8},"style_key":"vyC1sV3aTT","attribute_group_1250":"German Rot","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":191,"product_id":191,"name":"Sneaker Mischfarben","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/00001bcbf69be6d8fe7e52596c95676f.jpeg","stock":{"stockCount":"312","variantCount":8},"style_key":"tN2TDyWBGs","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":192,"product_id":192,"name":"\"Run\" Sportschuhe","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/00001e44476df4e825881acf37aae44f.jpg","stock":{"stockCount":"320","variantCount":8},"style_key":"LQIR4rq13M","attribute_group_1250":"Matte black","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":193,"product_id":193,"name":"blaue Hose","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/00002060a2ed818412e861fc316f75ec.jpg","stock":{"stockCount":"328","variantCount":8},"style_key":"Petite1","attribute_group_1250":"Gold<<delimiter>>Yellow","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":194,"product_id":194,"name":"\"Lexi\" Hose","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000028461fb717bc103308b7996217ca.jpg","stock":{"stockCount":"168","variantCount":8},"style_key":"Bohemian1","attribute_group_1250":"Gold<<delimiter>>Yellow","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":195,"product_id":195,"name":"\"Lexi\" Hose","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000028835d30fcfd535049515ce3d8be.jpg","stock":{"stockCount":"248","variantCount":8},"style_key":"Petite1","attribute_group_1250":"German Rot","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":196,"product_id":196,"name":"\"Lexi\" Hose","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/0000368e362f4d565e6f18d30af581a2.jpeg","stock":{"stockCount":"88","variantCount":8},"style_key":"Bohemian1","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":197,"product_id":197,"name":"\"Susi\" Shirt","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000045224b8163888446a55b5c1136ec","stock":{"stockCount":"312","variantCount":8},"style_key":"YrrLsj0sb5","attribute_group_1250":"Gold<<delimiter>>Yellow","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":198,"product_id":198,"name":"\"Susi\" Shirt","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/0000467148e19a4954da268d7609b940.jpeg","stock":{"stockCount":"320","variantCount":8},"style_key":"uTPthHUr8n","attribute_group_1250":"German Rot","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":199,"product_id":199,"name":"\"Susi\" Shirt","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/0000492011665cbc81c0c3e1bef9816f.jpeg","stock":{"stockCount":"328","variantCount":8},"style_key":"p4fM00b1PH","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":200,"product_id":200,"name":"\"Susi\" Shirt","merchant":"Default","status":"live","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000049eacc843be72094c013c9f96e65","stock":{"stockCount":"333","variantCount":8},"style_key":"ClVRfiihRY","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":201,"product_id":201,"name":"\"Susi\" Shirt","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/00000407352474373ac87aa27929c6a2.jpg","stock":{"stockCount":"344","variantCount":8},"style_key":"rCNzn9vCmy","attribute_group_1250":"Matte black","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":202,"product_id":202,"name":"\"Clara\" Stiefel","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/0000052a2bd9c5455f55f09cd3948be4","stock":{"stockCount":"48","variantCount":8},"style_key":"I2ikNYEul5","attribute_group_1250":"Gold<<delimiter>>Yellow","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":203,"product_id":203,"name":"\"Clara\" Stiefel","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/0000057b97c9aa524efa995192511938.jpg","stock":{"stockCount":"356","variantCount":8},"style_key":"SYgxLlZCPc","attribute_group_1250":"German Rot","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":204,"product_id":204,"name":"\"Clara\" Stiefel","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/0000057c8b7ee3cb3bfb49a1079e58c0","stock":{"stockCount":"80","variantCount":8},"style_key":"7WBmDHGmKL","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":205,"product_id":205,"name":"\"Clara\" Stiefel","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000006a32bfa4f18f31a0fe9ad7a0a5d.jpeg","stock":{"stockCount":"72","variantCount":8},"style_key":"UJJFckgv7K","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":206,"product_id":206,"name":"\"Clara\" Stiefel","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000006bf7a6771d4a7ffda7c786f17c0.jpeg","stock":{"stockCount":"384","variantCount":8},"style_key":"qLdeJ8x77F","attribute_group_1250":"Matte black","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":207,"product_id":207,"name":"\"Silvia\" Jacke","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000009034102b549859cc90cff113147.jpg","stock":{"stockCount":"184","variantCount":8},"style_key":"SLUz2iSkJP","attribute_group_1250":"Gold<<delimiter>>Yellow","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":208,"product_id":208,"name":"\"Silvia\" Jacke","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/0000104a1e2fd07220be2b30f4deb328.jpeg","stock":{"stockCount":"16","variantCount":8},"style_key":"riaHCKFQeg","attribute_group_1250":"German Rot","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":209,"product_id":209,"name":"\"Silvia\" Jacke","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/00001bcbf69be6d8fe7e52596c95676f.jpeg","stock":{"stockCount":"168","variantCount":8},"style_key":"7lOyJ5TuIH","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":210,"product_id":210,"name":"\"Silvia\" Jacke","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/00001e44476df4e825881acf37aae44f.jpg","stock":{"stockCount":"248","variantCount":8},"style_key":"GpiMhbI5Yv","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":211,"product_id":211,"name":"\"Silvia\" Jacke","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/00002060a2ed818412e861fc316f75ec.jpg","stock":{"stockCount":"32","variantCount":8},"style_key":"Ju4kWL7owb","attribute_group_1250":"Matte black","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":212,"product_id":212,"name":"\"Dora\" Schal","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000021daa86c2974ccde29bb305eb680","stock":{"stockCount":"264","variantCount":8},"style_key":"PlusSize1","attribute_group_1250":"German Rot<<delimiter>>Gold<<delimiter>>Matte black<<delimiter>>Yellow","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":213,"product_id":213,"name":"\"Dora\" Schal","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/0000234d38628e2c0876e4b1a37bb56e.jpg","stock":{"stockCount":"272","variantCount":8},"style_key":"Bohemian1","attribute_group_1250":"German Rot","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":214,"product_id":214,"name":"\"Dora\" Schal","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/0000259fe0722e2bff3d0a208203ef55.jpeg","stock":{"stockCount":"88","variantCount":8},"style_key":"Bohemian1","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":215,"product_id":215,"name":"\"Dora\" Schal","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000025d2a56343b91d778f672e86ef14.jpeg","stock":{"stockCount":"288","variantCount":8},"style_key":"Petite1","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":216,"product_id":216,"name":"\"Dora\" Schal","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000027d0e20fb9ea39038b6dcbd44527","stock":{"stockCount":"296","variantCount":8},"style_key":"Bohemian1","attribute_group_1250":"Matte black","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":217,"product_id":217,"name":"\"J\u00f6rg\" G\u00fcrtel","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000028461fb717bc103308b7996217ca.jpg","stock":{"stockCount":"120","variantCount":8},"style_key":"Petite1","attribute_group_1250":"Gold<<delimiter>>Yellow","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":218,"product_id":218,"name":"\"J\u00f6rg\" G\u00fcrtel","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000028835d30fcfd535049515ce3d8be.jpg","stock":{"stockCount":"312","variantCount":8},"style_key":"PlusSize1","attribute_group_1250":"German Rot<<delimiter>>Gold<<delimiter>>Matte black<<delimiter>>Yellow","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":219,"product_id":219,"name":"\"J\u00f6rg\" G\u00fcrtel","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/0000342755a07dec90a189d78dbe6ac9","stock":{"stockCount":"320","variantCount":8},"style_key":"Bohemian1","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":220,"product_id":220,"name":"\"J\u00f6rg\" G\u00fcrtel","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/0000368e362f4d565e6f18d30af581a2.jpeg","stock":{"stockCount":"328","variantCount":8},"style_key":"Petite1","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":221,"product_id":221,"name":"\"J\u00f6rg\" G\u00fcrtel","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000037668e663bb13204b9d81901ffe2","stock":{"stockCount":"336","variantCount":8},"style_key":"PlusSize1","attribute_group_1250":"German Rot<<delimiter>>Gold<<delimiter>>Matte black<<delimiter>>Yellow","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":222,"product_id":222,"name":"\"Sophie\" Sonnenbrille","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000045224b8163888446a55b5c1136ec","stock":{"stockCount":"344","variantCount":8},"style_key":"Bohemian1","attribute_group_1250":"Gold<<delimiter>>Yellow","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":223,"product_id":223,"name":"\"Sophie\" Sonnenbrille","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/0000467148e19a4954da268d7609b940.jpeg","stock":{"stockCount":"48","variantCount":8},"style_key":"Bohemian1","attribute_group_1250":"German Rot","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":224,"product_id":224,"name":"\"Sophie\" Sonnenbrille","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/0000492011665cbc81c0c3e1bef9816f.jpeg","stock":{"stockCount":"360","variantCount":8},"style_key":"Petite1","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":225,"product_id":225,"name":"\"Sophie\" Sonnenbrille","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000049eacc843be72094c013c9f96e65","stock":{"stockCount":"80","variantCount":8},"style_key":"Bohemian1","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":226,"product_id":226,"name":"\"Sophie\" Sonnenbrille","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/00000407352474373ac87aa27929c6a2.jpg","stock":{"stockCount":"72","variantCount":8},"style_key":"Petite1","attribute_group_1250":"Matte black","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":227,"product_id":227,"name":"\"Marisa\" Hose","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/0000052a2bd9c5455f55f09cd3948be4","stock":{"stockCount":"384","variantCount":8},"style_key":"PlusSize1","attribute_group_1250":"German Rot<<delimiter>>Gold<<delimiter>>Matte black<<delimiter>>Yellow","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":228,"product_id":228,"name":"\"Marisa\" Hose","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/0000057b97c9aa524efa995192511938.jpg","stock":{"stockCount":"184","variantCount":8},"style_key":"Bohemian1","attribute_group_1250":"German Rot","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":229,"product_id":229,"name":"\"Marisa\" Hose","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/0000057c8b7ee3cb3bfb49a1079e58c0","stock":{"stockCount":"16","variantCount":8},"style_key":"Petite1","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":230,"product_id":230,"name":"\"Marisa\" Hose","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000006a32bfa4f18f31a0fe9ad7a0a5d.jpeg","stock":{"stockCount":"168","variantCount":8},"style_key":"PlusSize1","attribute_group_1250":"German Rot<<delimiter>>Gold<<delimiter>>Matte black<<delimiter>>Yellow","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":231,"product_id":231,"name":"\"Marisa\" Hose","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000006bf7a6771d4a7ffda7c786f17c0.jpeg","stock":{"stockCount":"248","variantCount":8},"style_key":"Bohemian1","attribute_group_1250":"Matte black","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":232,"product_id":232,"name":"\"Paulo\" Sporthose","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000009034102b549859cc90cff113147.jpg","stock":{"stockCount":"32","variantCount":8},"style_key":"Bohemian1","attribute_group_1250":"Gold<<delimiter>>Yellow","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":233,"product_id":233,"name":"\"Paulo\" Sporthose","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/0000104a1e2fd07220be2b30f4deb328.jpeg","stock":{"stockCount":"264","variantCount":8},"style_key":"Petite1","attribute_group_1250":"German Rot","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":234,"product_id":234,"name":"\"Paulo\" Sporthose","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/00001bcbf69be6d8fe7e52596c95676f.jpeg","stock":{"stockCount":"272","variantCount":8},"style_key":"PlusSize1","attribute_group_1250":"German Rot<<delimiter>>Gold<<delimiter>>Matte black<<delimiter>>Yellow","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":235,"product_id":235,"name":"\"Paulo\" Sporthose","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/00001e44476df4e825881acf37aae44f.jpg","stock":{"stockCount":"88","variantCount":8},"style_key":"Bohemian1","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":236,"product_id":236,"name":"\"Paulo\" Sporthose","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/00002060a2ed818412e861fc316f75ec.jpg","stock":{"stockCount":"288","variantCount":8},"style_key":"Petite1","attribute_group_1250":"Matte black","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":237,"product_id":237,"name":"\"David\" Sportshirt","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000021daa86c2974ccde29bb305eb680","stock":{"stockCount":"296","variantCount":8},"style_key":"biiVJf78CT","attribute_group_1250":"Gold<<delimiter>>Yellow","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":238,"product_id":238,"name":"\"David\" Sportshirt","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/0000234d38628e2c0876e4b1a37bb56e.jpg","stock":{"stockCount":"120","variantCount":8},"style_key":"HNiz88mJHd","attribute_group_1250":"German Rot","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":239,"product_id":239,"name":"\"David\" Sportshirt","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/0000259fe0722e2bff3d0a208203ef55.jpeg","stock":{"stockCount":"312","variantCount":8},"style_key":"mrLcQw8pL9","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":240,"product_id":240,"name":"\"David\" Sportshirt","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000025d2a56343b91d778f672e86ef14.jpeg","stock":{"stockCount":"320","variantCount":8},"style_key":"yJjZDnfxJK","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":241,"product_id":241,"name":"\"David\" Sportshirt","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000027d0e20fb9ea39038b6dcbd44527","stock":{"stockCount":"328","variantCount":8},"style_key":"OKoiM260Kj","attribute_group_1250":"Matte black","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":242,"product_id":242,"name":"\"Sabine\" Sporthose","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000028461fb717bc103308b7996217ca.jpg","stock":{"stockCount":"336","variantCount":8},"style_key":"PlusSize1","attribute_group_1250":"German Rot<<delimiter>>Gold<<delimiter>>Matte black<<delimiter>>Yellow","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":243,"product_id":243,"name":"\"Sabine\" Sporthose","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000028835d30fcfd535049515ce3d8be.jpg","stock":{"stockCount":"344","variantCount":8},"style_key":"Bohemian1","attribute_group_1250":"German Rot","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":244,"product_id":244,"name":"\"Sabine\" Sporthose","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/0000342755a07dec90a189d78dbe6ac9","stock":{"stockCount":"48","variantCount":8},"style_key":"Bohemian1","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":245,"product_id":245,"name":"\"Sabine\" Sporthose","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/0000368e362f4d565e6f18d30af581a2.jpeg","stock":{"stockCount":"360","variantCount":8},"style_key":"Bohemian1","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":246,"product_id":246,"name":"\"Sabine\" Sporthose","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000037668e663bb13204b9d81901ffe2","stock":{"stockCount":"80","variantCount":8},"style_key":"Petite1","attribute_group_1250":"Matte black","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":247,"product_id":247,"name":"\"Dana\" Sportshirt","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000045224b8163888446a55b5c1136ec","stock":{"stockCount":"72","variantCount":8},"style_key":"FJyF0coVDP","attribute_group_1250":"Gold<<delimiter>>Yellow","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":248,"product_id":248,"name":"\"Dana\" Sportshirt","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/0000467148e19a4954da268d7609b940.jpeg","stock":{"stockCount":"384","variantCount":8},"style_key":"TUVHGmAHau","attribute_group_1250":"German Rot","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":249,"product_id":249,"name":"\"Dana\" Sportshirt","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/0000492011665cbc81c0c3e1bef9816f.jpeg","stock":{"stockCount":"184","variantCount":8},"style_key":"SFOB1wXKyL","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":250,"product_id":250,"name":"\"Dana\" Sportshirt","merchant":"Default","status":"live","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000049eacc843be72094c013c9f96e65","stock":{"stockCount":"16","variantCount":8},"style_key":"BG0gGQkNRE","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":251,"product_id":251,"name":"\"Dana\" Sportshirt","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/00000407352474373ac87aa27929c6a2.jpg","stock":{"stockCount":"168","variantCount":8},"style_key":"rYBfn5M8dq","attribute_group_1250":"Matte black","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":252,"product_id":252,"name":"\"Tim\" Pullover","merchant":"Default","status":"live","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000009034102b549859cc90cff113147.jpg","stock":{"stockCount":"382","variantCount":8},"style_key":"4jJCJQAywK","attribute_group_1250":"Gold<<delimiter>>Yellow","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":253,"product_id":253,"name":"\"Tim\" Pullover","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/0000104a1e2fd07220be2b30f4deb328.jpeg","stock":{"stockCount":"184","variantCount":8},"style_key":"mS2BgX5Wnm","attribute_group_1250":"German Rot","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":254,"product_id":254,"name":"\"Tim\" Pullover","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/00001bcbf69be6d8fe7e52596c95676f.jpeg","stock":{"stockCount":"16","variantCount":8},"style_key":"TVzYypk3wg","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":255,"product_id":255,"name":"\"Tim\" Pullover","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/00001e44476df4e825881acf37aae44f.jpg","stock":{"stockCount":"16","variantCount":8},"style_key":"iOAzm87mny","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":256,"product_id":256,"name":"\"Tim\" Pullover","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/00002060a2ed818412e861fc316f75ec.jpg","stock":{"stockCount":"168","variantCount":8},"style_key":"XVm1lbHkRp","attribute_group_1250":"Matte black","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":257,"product_id":257,"name":"\"Run\" Laufschuhe","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000021daa86c2974ccde29bb305eb680","stock":{"stockCount":"168","variantCount":8},"style_key":"Ecbyhq6v4y","attribute_group_1250":"Gold<<delimiter>>Yellow","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":258,"product_id":258,"name":"\"Run\" Laufschuhe","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/0000234d38628e2c0876e4b1a37bb56e.jpg","stock":{"stockCount":"168","variantCount":8},"style_key":"j5IVWtN7am","attribute_group_1250":"German Rot","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":259,"product_id":259,"name":"\"Run\" Laufschuhe","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/0000259fe0722e2bff3d0a208203ef55.jpeg","stock":{"stockCount":"360","variantCount":8},"style_key":"zEhsfx2wah","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":260,"product_id":260,"name":"\"Run\" Laufschuhe","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000025d2a56343b91d778f672e86ef14.jpeg","stock":{"stockCount":"80","variantCount":8},"style_key":"0MhsFcWiLE","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":261,"product_id":261,"name":"\"Run\" Laufschuhe","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000027d0e20fb9ea39038b6dcbd44527","stock":{"stockCount":"72","variantCount":8},"style_key":"VfY0X3oE5i","attribute_group_1250":"Matte black","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":262,"product_id":262,"name":"\"Dan\" Sneaker","merchant":"Default","status":"live","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000028461fb717bc103308b7996217ca.jpg","stock":{"stockCount":"119","variantCount":8},"style_key":"SBe44JpBAr","attribute_group_1250":"Gold<<delimiter>>Yellow","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":263,"product_id":263,"name":"\"Dan\" Sneaker","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000028835d30fcfd535049515ce3d8be.jpg","stock":{"stockCount":"312","variantCount":8},"style_key":"vXZSzJJEtG","attribute_group_1250":"German Rot","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":264,"product_id":264,"name":"\"Dan\" Sneaker","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/0000342755a07dec90a189d78dbe6ac9","stock":{"stockCount":"320","variantCount":8},"style_key":"ZvhkU2EKYi","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":265,"product_id":265,"name":"\"Dan\" Sneaker","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/0000368e362f4d565e6f18d30af581a2.jpeg","stock":{"stockCount":"328","variantCount":8},"style_key":"TTAHY7d3hd","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":266,"product_id":266,"name":"\"Dan\" Sneaker","merchant":"Default","status":"live","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000037668e663bb13204b9d81901ffe2","stock":{"stockCount":"336","variantCount":8},"style_key":"fwBCHoiuVS","attribute_group_1250":"Matte black<<delimiter>>bordeaux","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":267,"product_id":267,"name":"Christmas Sweater Damen","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000045224b8163888446a55b5c1136ec","stock":{"stockCount":"343","variantCount":8},"style_key":"XHdLhBtT0K","attribute_group_1250":"Gold<<delimiter>>Yellow","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":268,"product_id":268,"name":"Christmas Sweater Damen","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/0000467148e19a4954da268d7609b940.jpeg","stock":{"stockCount":"48","variantCount":8},"style_key":"59ZRO8fynK","attribute_group_1250":"German Rot","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":269,"product_id":269,"name":"Christmas Sweater Damen","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/0000492011665cbc81c0c3e1bef9816f.jpeg","stock":{"stockCount":"360","variantCount":8},"style_key":"sVouiHx8Bo","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":270,"product_id":270,"name":"Christmas Sweater Damen","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000049eacc843be72094c013c9f96e65","stock":{"stockCount":"80","variantCount":8},"style_key":"oTVHTRwbZf","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":271,"product_id":271,"name":"Christmas Sweater Damen","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/00000407352474373ac87aa27929c6a2.jpg","stock":{"stockCount":"72","variantCount":8},"style_key":"bUHicBmYvE","attribute_group_1250":"Matte black","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":272,"product_id":272,"name":"Christmas Sweater Herren","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/0000052a2bd9c5455f55f09cd3948be4","stock":{"stockCount":"384","variantCount":8},"style_key":"fIdMOoHHpQ","attribute_group_1250":"Gold<<delimiter>>Yellow","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":273,"product_id":273,"name":"Christmas Sweater Herren","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/0000057b97c9aa524efa995192511938.jpg","stock":{"stockCount":"184","variantCount":8},"style_key":"WKqPrn0etO","attribute_group_1250":"German Rot","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":274,"product_id":274,"name":"Christmas Sweater Herren","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/0000057c8b7ee3cb3bfb49a1079e58c0","stock":{"stockCount":"48","variantCount":8},"style_key":"up0bUhII1S","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":275,"product_id":275,"name":"Christmas Sweater Herren","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000006a32bfa4f18f31a0fe9ad7a0a5d.jpeg","stock":{"stockCount":"360","variantCount":8},"style_key":"apMwaX7YWC","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":276,"product_id":276,"name":"Christmas Sweater Herren","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000006bf7a6771d4a7ffda7c786f17c0.jpeg","stock":{"stockCount":"80","variantCount":8},"style_key":"ky8QSiUjuZ","attribute_group_1250":"Matte black","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":277,"product_id":277,"name":"\"Zoey\" Sonnenbrille","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/000009034102b549859cc90cff113147.jpg","stock":{"stockCount":"72","variantCount":8},"style_key":"Bohemian1","attribute_group_1250":"Gold<<delimiter>>Yellow","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":278,"product_id":278,"name":"\"Zoey\" Sonnenbrille","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/0000104a1e2fd07220be2b30f4deb328.jpeg","stock":{"stockCount":"384","variantCount":8},"style_key":"Petite1","attribute_group_1250":"German Rot","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":279,"product_id":279,"name":"\"Zoey\" Sonnenbrille","merchant":"Default","status":"problem","image_hash":"https:\/\/cdn.aboutstatic.com\/file\/images\/00001bcbf69be6d8fe7e52596c95676f.jpeg","stock":{"stockCount":"184","variantCount":8},"style_key":"PlusSize1","attribute_group_1250":"German Rot<<delimiter>>Gold<<delimiter>>Matte black<<delimiter>>Yellow","attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null},{"id":280,"product_id":280,"name":"\"Zoey\" Sonnenbrille","merchant":"Default","status":"problem","image_hash":null,"stock":{"stockCount":"16","variantCount":8},"style_key":"Bohemian1","attribute_group_1250":null,"attribute_group_1251":null,"attribute_group_1257":null,"attribute_group_1260":null,"attribute_group_1392":null}],"first_page_url":"http:\/\/panel.global-dev.eu-01-i.scayle.cloud\/api\/frontend\/shops\/1104\/product?limit=200&order=id%7Cdesc&attributeGroupsAsColumns=1250%2C1251%2C1257%2C1260%2C1392&shopId=1104&hash=b0e5f1c6e387814ce63280457e9a0a0a&page=1","from":1,"next_page_url":"http:\/\/panel.global-dev.eu-01-i.scayle.cloud\/api\/frontend\/shops\/1104\/product?limit=200&order=id%7Cdesc&attributeGroupsAsColumns=1250%2C1251%2C1257%2C1260%2C1392&shopId=1104&hash=b0e5f1c6e387814ce63280457e9a0a0a&page=2","path":"http:\/\/panel.global-dev.eu-01-i.scayle.cloud\/api\/frontend\/shops\/1104\/product","per_page":"200","prev_page_url":null,"to":200}
2 | 


--------------------------------------------------------------------------------