@websolutespa/payload-plugin-bowl 2.0.1 → 3.0.1

package/dist/components/Category/CategoryTree.scss

@@ -0,0 +1,330 @@
+@use "sass:math";
+
+%scrollbar {
+
+  $size: 0;
+  $radius: 0;
+
+  &::-webkit-scrollbar {
+    width: $size;
+    height: $size;
+    border-radius: math.div($size, 2);
+  }
+
+  &::-webkit-scrollbar-button {
+    display: none;
+  }
+
+  &::-webkit-scrollbar-button:hover {
+    display: none;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.4);
+    box-shadow: none;
+    border-radius: $radius;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.4);
+    }
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+    border-radius: $radius;
+
+    &:hover {
+      background-color: transparent;
+    }
+  }
+
+}
+
+.data-tree {
+  &__item {
+    display: flex;
+    align-items: baseline;
+    gap: 0.8em;
+  }
+
+  // &__title {}
+  // &__extra {}
+}
+
+.category-tree {
+  &__actions {
+    flex-grow: 1;
+    position: sticky;
+    top: 0;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    column-gap: 10px;
+    padding: 13.5px 18.75px;
+
+    .btn {
+      margin: 0;
+      background-color: var(--theme-elevation-200);
+    }
+  }
+
+  &__foot {
+    display: flex;
+    gap: 2rem;
+
+    &>.btn,
+    &>.form-submit {
+      flex: 1 1 calc(50% - 1rem);
+
+      &>.btn {
+        width: 100%;
+      }
+    }
+  }
+}
+
+.category {
+  &__conflicts {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1em;
+    font-size: 11px;
+  }
+
+  &__conflict {
+    color: var(--theme-error-500);
+  }
+}
+
+.category-popup {
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    row-gap: 0.5rem;
+    max-height: 480px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    @extend %scrollbar;
+  }
+
+  &__card {
+    &>h4 {
+      display: flex;
+      justify-content: space-between;
+      align-items: baseline;
+      border-bottom: 2px solid var(--theme-elevation-150);
+
+      span {
+        font-size: 1.2rem;
+      }
+
+      small {
+        font-size: 0.8rem;
+        color: var(--theme-error-500);
+      }
+    }
+
+    &>ul {
+      list-style: none;
+      display: flex;
+      flex-direction: column;
+      row-gap: 1rem;
+      padding: 0;
+      margin: 0 0 1rem 0;
+
+      &>li {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        row-gap: 0.5rem;
+
+        .btn {
+          flex: 0;
+          display: flex;
+          justify-content: space-between;
+          align-items: baseline;
+          gap: 0.8em;
+          padding: 0.15em 0.75em;
+          background-color: var(--theme-bg);
+          box-shadow: inset 0 0 0 1px var(--theme-error-400);
+          font-size: 0.9rem;
+          line-height: 1;
+
+          &:hover {
+            box-shadow: inset 0 0 0 1px var(--theme-error-600);
+          }
+
+          span {
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+          }
+
+          small {
+            color: var(--theme-error-500);
+            font-size: 0.8rem;
+          }
+        }
+      }
+    }
+  }
+
+  &__url {
+    color: var(--theme-elevation-250);
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    margin: 0;
+  }
+
+}
+
+.category-edit {
+  &__modal {
+
+    &:before,
+    &:after {
+      content: " ";
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      pointer-events: none;
+    }
+
+    &:before {
+      background: var(--theme-bg);
+      opacity: 0.85;
+    }
+
+    &:after {
+      backdrop-filter: blur(5px);
+    }
+
+    .template-minimal {
+      display: flex;
+      width: 100%;
+      justify-content: center;
+      align-items: center;
+      padding: 1.9230769231rem;
+      margin-left: auto;
+      margin-right: auto;
+      min-height: 100%;
+      min-height: 100vh;
+      z-index: 1;
+      position: relative;
+
+      &__wrap {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+      }
+    }
+
+    .collection-edit {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      padding: 0;
+      margin: 0;
+      min-height: 0;
+      height: auto;
+
+      &__header {
+        width: 100%;
+      }
+
+      &__header-content {
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+        align-items: center;
+        margin: 0 0 2rem;
+
+        h2 {
+          margin: 0;
+        }
+
+        .icon--x {
+          width: 44px;
+          height: 44px;
+        }
+      }
+
+      &__edit {
+        padding: 0;
+        margin: 0;
+      }
+
+      &__main {
+        width: 100%;
+      }
+
+      &__form {
+        width: 100%;
+        height: auto;
+        z-index: 1000;
+      }
+    }
+  }
+
+  &__header {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    margin: 0 0 0.6rem 0;
+
+    h3 {
+      display: flex;
+      gap: 0.5em;
+      margin: 0;
+
+      svg {
+        width: 1em;
+        height: 1em;
+        fill: currentColor;
+      }
+    }
+  }
+
+  &__main {
+    .rich-text__editor {
+      overflow-x: hidden;
+      overflow-y: auto;
+      max-height: Max(160px, calc(100vh - 650px));
+    }
+  }
+
+  &__reference {
+    color: var(--theme-elevation-400);
+  }
+
+  &__preview {
+    margin: 0 0 0.6rem 0;
+    padding: 1em;
+    max-height: 150px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    border: 2px solid var(--theme-elevation-150);
+    border-radius: 4px;
+    color: var(--theme-elevation-400);
+  }
+
+  &__foot {
+    display: flex;
+    gap: 2rem;
+
+    &>.btn,
+    &>.form-submit {
+      flex: 1 1 calc(50% - 1rem);
+
+      &>.btn {
+        width: 100%;
+      }
+    }
+  }
+}

package/dist/components/Category/CategoryTreeRoute.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DefaultTemplate } from '@payloadcms/next/templates';
+import { getTranslation } from '@payloadcms/translations';
+import { SetStepNav } from '@payloadcms/ui';
+import { redirect } from 'next/navigation';
+import React from 'react';
+import { options } from '../../options';
+import { CategoryTree } from './CategoryTree';
+export const CategoryTreeRoute = async (props)=>{
+    // const translatedTitle = getTranslation('general:title', i18n);
+    const { payload, locale, i18n, initPageResult, clientConfig, importMap, params, searchParams } = props;
+    const slug = options.slug.category;
+    const config = payload.config;
+    const { routes, collections } = config;
+    const collection = collections.find((x)=>x.slug === slug);
+    const user = initPageResult.req?.user || undefined;
+    const permissions = initPageResult.permissions;
+    const visibleEntities = initPageResult.visibleEntities;
+    // console.log('CategoryTreeRoute.permissions', permissions);
+    if (!user || user && !permissions.canAccessAdmin) {
+        redirect(`${routes.admin}/unauthorized`);
+    }
+    if (!collection) {
+        redirect(`${routes.admin}/not-found`);
+    }
+    const label = collection.labels.plural;
+    return /*#__PURE__*/ _jsxs(DefaultTemplate, {
+        i18n: initPageResult.req.i18n,
+        locale: initPageResult.locale,
+        params: params,
+        payload: payload,
+        permissions: permissions,
+        searchParams: searchParams,
+        user: user,
+        visibleEntities: visibleEntities,
+        children: [
+            /*#__PURE__*/ _jsx(SetStepNav, {
+                nav: [
+                    {
+                        label: getTranslation(label, i18n)
+                    }
+                ]
+            }),
+            /*#__PURE__*/ _jsx(CategoryTree, {
+                slug: slug
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=CategoryTreeRoute.js.map

package/dist/components/Category/CategoryTreeRoute.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Category/CategoryTreeRoute.tsx"],"sourcesContent":["import { DefaultTemplate } from '@payloadcms/next/templates';\r\nimport { getTranslation } from '@payloadcms/translations';\r\nimport { SetStepNav } from '@payloadcms/ui';\r\nimport { redirect } from 'next/navigation';\r\nimport type { AdminViewServerProps } from 'payload';\r\nimport React from 'react';\r\nimport { options } from '../../options';\r\nimport { CategoryTree } from './CategoryTree';\r\n\r\nexport const CategoryTreeRoute: React.FC<AdminViewServerProps> = async (props) => {\r\n  // const translatedTitle = getTranslation('general:title', i18n);\r\n  const { payload, locale, i18n, initPageResult, clientConfig, importMap, params, searchParams } = props;\r\n  const slug = options.slug.category;\r\n  const config = payload.config;\r\n  const { routes, collections } = config;\r\n  const collection = collections.find(x => x.slug === slug);\r\n  const user = initPageResult.req?.user || undefined;\r\n  const permissions = initPageResult.permissions;\r\n  const visibleEntities = initPageResult.visibleEntities;\r\n  // console.log('CategoryTreeRoute.permissions', permissions);\r\n\r\n  if (!user || (user && !permissions.canAccessAdmin)) {\r\n    redirect(`${routes.admin}/unauthorized`);\r\n  }\r\n\r\n  if (!collection) {\r\n    redirect(`${routes.admin}/not-found`);\r\n  }\r\n\r\n  const label = collection.labels.plural;\r\n\r\n  return (\r\n    <DefaultTemplate\r\n      i18n={initPageResult.req.i18n}\r\n      locale={initPageResult.locale}\r\n      params={params}\r\n      payload={payload}\r\n      permissions={permissions}\r\n      searchParams={searchParams}\r\n      user={user}\r\n      visibleEntities={visibleEntities}\r\n    >\r\n      <SetStepNav\r\n        nav={[\r\n          {\r\n            label: getTranslation(label, i18n),\r\n          },\r\n        ]}\r\n      />\r\n      <CategoryTree slug={slug} />\r\n    </DefaultTemplate>\r\n  );\r\n};\r\n"],"names":["DefaultTemplate","getTranslation","SetStepNav","redirect","React","options","CategoryTree","CategoryTreeRoute","props","payload","locale","i18n","initPageResult","clientConfig","importMap","params","searchParams","slug","category","config","routes","collections","collection","find","x","user","req","undefined","permissions","visibleEntities","canAccessAdmin","admin","label","labels","plural","nav"],"mappings":";AAAA,SAASA,eAAe,QAAQ,6BAA6B;AAC7D,SAASC,cAAc,QAAQ,2BAA2B;AAC1D,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,QAAQ,QAAQ,kBAAkB;AAE3C,OAAOC,WAAW,QAAQ;AAC1B,SAASC,OAAO,QAAQ,gBAAgB;AACxC,SAASC,YAAY,QAAQ,iBAAiB;AAE9C,OAAO,MAAMC,oBAAoD,OAAOC;IACtE,iEAAiE;IACjE,MAAM,EAAEC,OAAO,EAAEC,MAAM,EAAEC,IAAI,EAAEC,cAAc,EAAEC,YAAY,EAAEC,SAAS,EAAEC,MAAM,EAAEC,YAAY,EAAE,GAAGR;IACjG,MAAMS,OAAOZ,QAAQY,IAAI,CAACC,QAAQ;IAClC,MAAMC,SAASV,QAAQU,MAAM;IAC7B,MAAM,EAAEC,MAAM,EAAEC,WAAW,EAAE,GAAGF;IAChC,MAAMG,aAAaD,YAAYE,IAAI,CAACC,CAAAA,IAAKA,EAAEP,IAAI,KAAKA;IACpD,MAAMQ,OAAOb,eAAec,GAAG,EAAED,QAAQE;IACzC,MAAMC,cAAchB,eAAegB,WAAW;IAC9C,MAAMC,kBAAkBjB,eAAeiB,eAAe;IACtD,6DAA6D;IAE7D,IAAI,CAACJ,QAASA,QAAQ,CAACG,YAAYE,cAAc,EAAG;QAClD3B,SAAS,CAAC,EAAEiB,OAAOW,KAAK,CAAC,aAAa,CAAC;IACzC;IAEA,IAAI,CAACT,YAAY;QACfnB,SAAS,CAAC,EAAEiB,OAAOW,KAAK,CAAC,UAAU,CAAC;IACtC;IAEA,MAAMC,QAAQV,WAAWW,MAAM,CAACC,MAAM;IAEtC,qBACE,MAAClC;QACCW,MAAMC,eAAec,GAAG,CAACf,IAAI;QAC7BD,QAAQE,eAAeF,MAAM;QAC7BK,QAAQA;QACRN,SAASA;QACTmB,aAAaA;QACbZ,cAAcA;QACdS,MAAMA;QACNI,iBAAiBA;;0BAEjB,KAAC3B;gBACCiC,KAAK;oBACH;wBACEH,OAAO/B,eAAe+B,OAAOrB;oBAC/B;iBACD;;0BAEH,KAACL;gBAAaW,MAAMA;;;;AAG1B,EAAE"}

package/dist/components/Category/category.service.js

@@ -0,0 +1,32 @@
+export const ROOT_ITEM = '_root';
+export function getNewCategoriesFromChanges(categories, changes) {
+    const newCategories = categories.map((x)=>({
+            ...x
+        }));
+    const root = changes[ROOT_ITEM];
+    let order = 0;
+    const parseChildren = (parent)=>{
+        const parentIndex = parent.index;
+        parent.children?.forEach((childIndex)=>{
+            order += 10;
+            const category = newCategories.find((x)=>x.id === childIndex);
+            const child = changes[childIndex];
+            // console.log('RouteService.getNewCategoriesFromChanges', 'parentIndex', parentIndex, 'childIndex', childIndex, child);
+            if (category) {
+                category.category = parentIndex === ROOT_ITEM ? undefined : parentIndex;
+                category.order = order;
+            }
+            if (child) {
+                parseChildren(child);
+            }
+        });
+    };
+    if (root) {
+        parseChildren(root);
+    }
+    newCategories.sort((a, b)=>(a.order || 0) - (b.order || 0));
+    // console.log('RouteService.getNewCategoriesFromChanges', newCategories);
+    return newCategories;
+}
+
+//# sourceMappingURL=category.service.js.map

package/dist/components/Category/category.service.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Category/category.service.ts"],"sourcesContent":["import { ICategory, IRoute } from '@websolutespa/bom-core';\r\nimport { ReactNode } from 'react';\r\nimport { TreeItem, TreeItemIndex } from 'react-complex-tree';\r\nimport { TreeItems } from '../../components/DataTree/DataTree';\r\n\r\nexport const ROOT_ITEM = '_root';\r\n\r\nexport type CategoryTreeItem = {\r\n  title: string;\r\n  conflicts: IRoute[][];\r\n  extra?: ReactNode;\r\n};\r\n\r\nexport type CategoryTreeItems = TreeItems<CategoryTreeItem>;\r\n\r\nexport function getNewCategoriesFromChanges(categories: ICategory[], changes: CategoryTreeItems) {\r\n  const newCategories = categories.map(x => ({ ...x }));\r\n  const root = changes[ROOT_ITEM];\r\n  let order = 0;\r\n  const parseChildren = (parent: TreeItem<CategoryTreeItem>) => {\r\n    const parentIndex = parent.index;\r\n    parent.children?.forEach((childIndex: TreeItemIndex) => {\r\n      order += 10;\r\n      const category = newCategories.find(x => x.id === childIndex);\r\n      const child = changes[childIndex];\r\n      // console.log('RouteService.getNewCategoriesFromChanges', 'parentIndex', parentIndex, 'childIndex', childIndex, child);\r\n      if (category) {\r\n        category.category = parentIndex === ROOT_ITEM ? undefined : parentIndex;\r\n        category.order = order;\r\n      }\r\n      if (child) {\r\n        parseChildren(child);\r\n      }\r\n    });\r\n  };\r\n  if (root) {\r\n    parseChildren(root);\r\n  }\r\n  newCategories.sort((a, b) => (a.order || 0) - (b.order || 0));\r\n  // console.log('RouteService.getNewCategoriesFromChanges', newCategories);\r\n  return newCategories;\r\n}\r\n"],"names":["ROOT_ITEM","getNewCategoriesFromChanges","categories","changes","newCategories","map","x","root","order","parseChildren","parent","parentIndex","index","children","forEach","childIndex","category","find","id","child","undefined","sort","a","b"],"mappings":"AAKA,OAAO,MAAMA,YAAY,QAAQ;AAUjC,OAAO,SAASC,4BAA4BC,UAAuB,EAAEC,OAA0B;IAC7F,MAAMC,gBAAgBF,WAAWG,GAAG,CAACC,CAAAA,IAAM,CAAA;YAAE,GAAGA,CAAC;QAAC,CAAA;IAClD,MAAMC,OAAOJ,OAAO,CAACH,UAAU;IAC/B,IAAIQ,QAAQ;IACZ,MAAMC,gBAAgB,CAACC;QACrB,MAAMC,cAAcD,OAAOE,KAAK;QAChCF,OAAOG,QAAQ,EAAEC,QAAQ,CAACC;YACxBP,SAAS;YACT,MAAMQ,WAAWZ,cAAca,IAAI,CAACX,CAAAA,IAAKA,EAAEY,EAAE,KAAKH;YAClD,MAAMI,QAAQhB,OAAO,CAACY,WAAW;YACjC,wHAAwH;YACxH,IAAIC,UAAU;gBACZA,SAASA,QAAQ,GAAGL,gBAAgBX,YAAYoB,YAAYT;gBAC5DK,SAASR,KAAK,GAAGA;YACnB;YACA,IAAIW,OAAO;gBACTV,cAAcU;YAChB;QACF;IACF;IACA,IAAIZ,MAAM;QACRE,cAAcF;IAChB;IACAH,cAAciB,IAAI,CAAC,CAACC,GAAGC,IAAM,AAACD,CAAAA,EAAEd,KAAK,IAAI,CAAA,IAAMe,CAAAA,EAAEf,KAAK,IAAI,CAAA;IAC1D,0EAA0E;IAC1E,OAAOJ;AACT"}