sitero 0.0.1 → 0.0.3

package/dist/src/cms/client/interfaces/components/resources/folder/file-manager/file-manager-list.js

@@ -0,0 +1,129 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useTranslator } from 'intor/react';
+import { useSearchParams } from 'next/navigation';
+import '../../../../../../../constants/paths/redirect.js';
+import '../../../../../../../core/client/infrastructure/contexts/admin/admin.js';
+import 'react';
+import '../../../../../../../core/client/infrastructure/react-query/client.js';
+import '@tanstack/react-query';
+import 'mime-types';
+import '../../../../../../../core/domain/resources/admin/constants.js';
+import { fileManagerDoubleClick } from '../../../../../../../core/domain/resources/folder/utils/file-manager-double-click.js';
+import '../../../../../../../core/domain/resources/user/constants.js';
+import 'clsx';
+import 'tailwind-merge';
+import { DO_NOT_FETCH_KEY } from '../../../../../../../shared/list-item.js';
+import 'sonner';
+import { useQuery } from '../../../../../../../core/client/infrastructure/react-query/use-query.js';
+import '../../../../../../../core/client/infrastructure/contexts/user/user.js';
+import { Accordion } from '../../../ui/features/accordion/accordion.js';
+import '@radix-ui/react-avatar';
+import '../../../shadcn/badge.js';
+import '../../../shadcn/button.js';
+import '@radix-ui/react-collapsible';
+import '@radix-ui/react-dialog';
+import 'lucide-react';
+import '@radix-ui/react-dropdown-menu';
+import '../../../shadcn/input-group.js';
+import '../../../shadcn/item.js';
+import '@radix-ui/react-label';
+import 'radix-ui';
+import '@radix-ui/react-select';
+import '@radix-ui/react-separator';
+import '../../../shadcn/sidebar/sidebar.js';
+import 'next-themes';
+import '@radix-ui/react-tabs';
+import '@radix-ui/react-tooltip';
+import 'next/link';
+import '../../../../../../../commerce/taiwan-address/constants.js';
+import 'next/image';
+import { FileManagerHeader } from './file-manager-header.js';
+
+function createFileManagerList({
+  folderFindFullAction,
+  FolderList,
+  FileList
+}) {
+  return function FileManagerList({
+    // Item states (Folder)
+    folderStates,
+    setFolderStates,
+    // Use In File Manager Page (Files)
+    showFiles,
+    fileStates,
+    setFileStates,
+    // Pick Mode (Folder List Modal)
+    pickedItems,
+    handleClick,
+    isInModal,
+    excludeId
+  }) {
+    const { t } = useTranslator();
+    const key = useSearchParams().get("folderKey") ?? "";
+    const { data: folder } = useQuery(
+      () => folderFindFullAction({ key }),
+      ["folderFindFullAction", key],
+      { select: (data) => data?.folder }
+    );
+    return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col gap-4", children: [
+      /* @__PURE__ */ jsx(FileManagerHeader, { folder: folder ?? null, folderKey: key }),
+      !folderStates && /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
+        FolderList,
+        {
+          parentFolderId: folder?.id ?? DO_NOT_FETCH_KEY,
+          setListItemStates: setFolderStates,
+          isInFileManager: true,
+          pickedItems,
+          handleClick,
+          handleDoubleClick: fileManagerDoubleClick,
+          excludeId,
+          isInModal
+        }
+      ) }),
+      folderStates && /* @__PURE__ */ jsx(
+        Accordion,
+        {
+          accordionHeaderProps: {
+            children: t("resources.folder.text"),
+            count: folderStates.count ?? 0
+          },
+          initialOpen: true,
+          deps: [folderStates.isFetching],
+          children: /* @__PURE__ */ jsx(
+            FolderList,
+            {
+              parentFolderId: folder?.id ?? DO_NOT_FETCH_KEY,
+              setListItemStates: setFolderStates,
+              isInFileManager: true,
+              pickedItems,
+              handleClick,
+              excludeId
+            }
+          )
+        }
+      ),
+      showFiles && /* @__PURE__ */ jsx(
+        Accordion,
+        {
+          accordionHeaderProps: {
+            children: t("resources.file.text"),
+            count: fileStates?.count ?? 0
+          },
+          initialOpen: true,
+          deps: [fileStates?.isFetching],
+          children: /* @__PURE__ */ jsx(
+            FileList,
+            {
+              folderId: folder?.id ?? DO_NOT_FETCH_KEY,
+              setListItemStates: setFileStates,
+              openNewTab: true
+            }
+          )
+        }
+      )
+    ] });
+  };
+}
+
+export { createFileManagerList };

package/dist/src/cms/client/interfaces/components/resources/folder/folder-card.js

@@ -1,14 +1,16 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { Lock } from 'lucide-react';
-import '../../../../../../core/domain/resources/admin/constants.js';
-import { isFolderLocked } from '../../../../../../core/domain/resources/folder/utils/is-folder-locked.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useTranslator } from 'intor/react';
+import { FolderIcon, Files } from 'lucide-react';
+import { CMS_PATHS } from '../../../../../../constants/paths/cms-paths.js';
+import '../../../../../../constants/paths/redirect.js';
 import 'mime-types';
-import { cn } from '../../../../../../shared/utils/cn.js';
-import { PATHS } from '../../../../../../constants/paths/index.js';
-import '../../../../../../constants/redirect-paths.js';
+import '../../../../../../core/domain/resources/admin/constants.js';
+import '../../../../../../core/domain/resources/user/constants.js';
+import 'clsx';
+import 'tailwind-merge';
+import { joinUrl } from '../../../../../../shared/utils/join-url.js';
 import { ResourceCard } from '../../ui/cards/resource-card/resource-card.js';
-import 'intor/react';
 import '@radix-ui/react-avatar';
 import '../../shadcn/badge.js';
 import '../../shadcn/button.js';
@@ -18,6 +20,7 @@ import '@radix-ui/react-dropdown-menu';
 import '../../shadcn/input-group.js';
 import '../../shadcn/item.js';
 import '@radix-ui/react-label';
+import 'radix-ui';
 import '@radix-ui/react-select';
 import '@radix-ui/react-separator';
 import '../../shadcn/sidebar/sidebar.js';
@@ -27,35 +30,54 @@ import '@radix-ui/react-tabs';
 import '@radix-ui/react-tooltip';
 import 'next/navigation';
 import 'react';
-import 'ua-parser-js';
+import '../../../../../../commerce/taiwan-address/constants.js';
 import 'next/link';
+import { FolderStateIcons } from './folder-state-icons.js';
 
-const WIDTH = "10rem";
-const HEIGHT = "10rem";
+const WIDTH = "160px";
 function FolderCard({
   folder,
-  // Link Props
-  openNewTab = false,
-  anchorProps,
   isInFileManager = false,
-  // Base
+  // link
+  openNewTab,
+  // pick
+  isPicked,
+  // base
+  anchorProps,
   className = ""
 }) {
-  const isLocked = isFolderLocked(folder) || folder?.isLocked;
-  const href = !isInFileManager ? `${PATHS.resources.folder.path}/${folder?.id}` : `${PATHS.main.fileManager.path}?folderKey=${folder?.key}`;
-  return /* @__PURE__ */ jsx(
+  const { t } = useTranslator();
+  const href = !isInFileManager ? joinUrl(CMS_PATHS.system.storage.folder.pathname, folder?.id) : `${CMS_PATHS.system.storage["file-manager"].pathname}?folderKey=${folder?.key}`;
+  return /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(
     ResourceCard,
     {
       className,
-      style: { width: WIDTH, height: HEIGHT },
+      style: { width: WIDTH },
       href,
       openNewTab,
       anchorProps,
-      cardStatusBarProps: { children: isLocked && /* @__PURE__ */ jsx(Lock, { className: "size-5" }) },
-      cardTextContentProps: { title: folder?.name },
-      children: /* @__PURE__ */ jsx("div", { className: cn("flex-center size-full", "absolute z-0"), children: /* @__PURE__ */ jsx("span", { className: cn("scale-[3]", "transition"), children: "\u{1F4C1}" }) })
+      isPicked,
+      modelIcon: /* @__PURE__ */ jsx(FolderIcon, {}),
+      statesChildren: /* @__PURE__ */ jsx(FolderStateIcons, { folder }),
+      titleChildren: folder?.name,
+      contentChildren: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5 opacity-75", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx(FolderIcon, {}),
+          /* @__PURE__ */ jsxs("p", { className: "truncate", children: [
+            ":\xA0",
+            folder && "subFolders" in folder ? folder.subFolders.length : /* @__PURE__ */ jsx("span", { className: "text-xs opacity-50", children: t("resources.see-in-details.text") })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx(Files, {}),
+          /* @__PURE__ */ jsxs("p", { className: "truncate", children: [
+            ":\xA0",
+            folder && "files" in folder ? folder.files.length : /* @__PURE__ */ jsx("span", { className: "text-xs opacity-50", children: t("resources.see-in-details.text") })
+          ] })
+        ] })
+      ] })
     }
-  );
+  ) });
 }
 
 export { FolderCard };

package/dist/src/cms/client/interfaces/components/resources/folder/folder-full-path.js

@@ -1,6 +1,8 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import '@radix-ui/react-avatar';
 import 'mime-types';
+import '../../../../../../core/domain/resources/admin/constants.js';
+import '../../../../../../core/domain/resources/user/constants.js';
 import 'clsx';
 import 'tailwind-merge';
 import '../../shadcn/badge.js';
@@ -12,6 +14,7 @@ import '@radix-ui/react-dropdown-menu';
 import '../../shadcn/input-group.js';
 import '../../shadcn/item.js';
 import '@radix-ui/react-label';
+import 'radix-ui';
 import '@radix-ui/react-select';
 import '@radix-ui/react-separator';
 import '../../shadcn/sidebar/sidebar.js';

package/dist/src/cms/client/interfaces/components/resources/folder/folder-list.js

@@ -2,24 +2,25 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useTranslator } from 'intor/react';
 import { useState, useMemo, useEffect } from 'react';
+import '../../../../../../constants/paths/redirect.js';
+import '../../../../../../core/client/infrastructure/contexts/admin/admin.js';
+import '../../../../../../core/client/infrastructure/react-query/client.js';
+import '@tanstack/react-query';
+import 'mime-types';
 import '../../../../../../core/domain/resources/admin/constants.js';
 import { fileManagerDoubleClick } from '../../../../../../core/domain/resources/folder/utils/file-manager-double-click.js';
-import 'mime-types';
+import '../../../../../../core/domain/resources/user/constants.js';
 import { cn } from '../../../../../../shared/utils/cn.js';
 import { debounce } from '../../../../../../shared/utils/debounce.js';
 import { ensureArray } from '../../../../../../shared/utils/ensure-array.js';
-import { DO_NOT_FETCH_KEY } from '../../../../../../shared/list-items.js';
-import '../../../../../../constants/paths/auth.js';
-import '../../../../../../constants/paths/main.js';
-import '../../../../../../constants/paths/resources.js';
-import { CACHE_KEYS } from '../../../../../../constants/cache-keys.js';
-import '../../../../../../constants/redirect-paths.js';
-import '../../../../infrastructure/contexts/admin/admin.js';
-import '../../../../infrastructure/react-query/client.js';
-import '@tanstack/react-query';
+import { normalizeUnorderedCacheKey } from '../../../../../../shared/utils/normalize-unordered-cache-key.js';
+import { DO_NOT_FETCH_KEY } from '../../../../../../shared/list-item.js';
 import 'sonner';
-import { useQuery } from '../../../../infrastructure/react-query/use-query.js';
+import { useQuery } from '../../../../../../core/client/infrastructure/react-query/use-query.js';
+import '../../../../../../core/client/infrastructure/contexts/user/user.js';
 import 'lucide-react';
+import 'next/navigation';
+import '../../../../../../commerce/taiwan-address/constants.js';
 import '@radix-ui/react-avatar';
 import '../../shadcn/badge.js';
 import '../../shadcn/button.js';
@@ -29,38 +30,38 @@ import '@radix-ui/react-dropdown-menu';
 import '../../shadcn/input-group.js';
 import '../../shadcn/item.js';
 import '@radix-ui/react-label';
+import 'radix-ui';
 import '@radix-ui/react-select';
 import '@radix-ui/react-separator';
 import '../../shadcn/sidebar/sidebar.js';
 import 'next-themes';
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-tooltip';
-import 'next/navigation';
-import 'ua-parser-js';
-import { ListCardsContainer } from '../../ui/blocks/list-cards-container/list-cards-container.js';
-import 'next/link';
+import { ListContainer } from '../../ui/blocks/list-container/list-container.js';
 import { FieldBody } from '../../ui/form/field-body.js';
-import 'next/image';
-import { Tick } from '../../ui/features/tick.js';
 import { FolderCard } from './folder-card.js';
+import { FolderTable } from './folder-table.js';
 
 function createFolderList({
   folderFindListCardsAction
 }) {
   return function FolderList({
-    setItemStates,
-    // Fetch Condition
+    // search
     parentFolderId,
     folderIds,
-    // Link Props
+    excludeId,
+    // link
     openNewTab = false,
     isInFileManager = false,
-    // Pick Mode
+    // pick
     pickedItems,
     handleClick,
     isInModal = false,
     handleDoubleClick = fileManagerDoubleClick,
-    excludeId
+    // item states
+    setListItemStates,
+    // list
+    localKey = "file"
   }) {
     const { t } = useTranslator();
     const [page, setPage] = useState(1);
@@ -72,19 +73,19 @@ function createFolderList({
     );
     const { data, isFetching } = useQuery(
       () => folderFindListCardsAction({
-        page,
-        pageSize,
         searchString,
-        ...parentFolderId && { parentFolderId },
-        ...folderIds && { folderIds }
+        parentFolderId,
+        folderIds,
+        page,
+        pageSize
       }),
       [
-        CACHE_KEYS.findListCards("folder"),
-        page,
-        pageSize,
+        "folderFindListCardsAction",
         searchString,
         parentFolderId,
-        JSON.stringify(folderIds)
+        normalizeUnorderedCacheKey(folderIds),
+        page,
+        pageSize
       ],
       { enabled: parentFolderId !== DO_NOT_FETCH_KEY }
       // Use in File Manager
@@ -94,15 +95,17 @@ function createFolderList({
       [data?.items, excludeId]
     );
     useEffect(() => {
-      setItemStates?.({
+      setListItemStates?.({
         items: folders,
         count: data?.total ?? 0,
         isFetching
       });
-    }, [folders, data?.total, isFetching, setItemStates]);
+    }, [folders, data?.total, isFetching, setListItemStates]);
     return /* @__PURE__ */ jsx(
-      ListCardsContainer,
+      ListContainer,
       {
+        localKey,
+        setListItemStates,
         page,
         setPage,
         pageSize,
@@ -115,42 +118,45 @@ function createFolderList({
           "\u{1F4A1} ",
           t("resources.folder.click-hint.text")
         ] }),
-        children: folders.map((folder) => {
-          const isPicked = pickedItems?.some((item) => item.id === folder.id);
-          return /* @__PURE__ */ jsxs("div", { className: "relative w-fit", children: [
-            /* @__PURE__ */ jsx(
-              FolderCard,
-              {
-                folder,
-                openNewTab,
-                isInFileManager,
-                className: cn(pickedItems && !isPicked && "opacity-50"),
-                anchorProps: {
-                  ...handleClick ? {
-                    onClick: (e) => {
-                      e.preventDefault();
-                      handleClick(folder);
-                    }
-                  } : {},
-                  ...handleDoubleClick ? {
-                    onDoubleClick: (e) => {
-                      e.preventDefault();
-                      handleDoubleClick(folder);
-                    }
-                  } : {}
-                }
+        cardChildren: folders.map((folder) => {
+          const isPicked = !!pickedItems?.some((item) => item.id === folder.id);
+          return /* @__PURE__ */ jsx(
+            FolderCard,
+            {
+              folder,
+              openNewTab,
+              isPicked,
+              isInFileManager,
+              anchorProps: {
+                ...handleClick ? {
+                  onClick: (e) => {
+                    e.preventDefault();
+                    handleClick(folder);
+                  }
+                } : {},
+                ...handleDoubleClick ? {
+                  onDoubleClick: (e) => {
+                    e.preventDefault();
+                    handleDoubleClick(folder);
+                  }
+                } : {}
               },
-              folder.id
-            ),
-            pickedItems && /* @__PURE__ */ jsx(
-              Tick,
-              {
-                isPicked: isPicked || false,
-                className: "absolute top-2 right-2"
-              }
-            )
-          ] }, folder.id);
-        })
+              className: cn(pickedItems && !isPicked && "opacity-50")
+            },
+            folder.id
+          );
+        }),
+        tableChildren: /* @__PURE__ */ jsx(
+          FolderTable,
+          {
+            folders,
+            pickedItems,
+            handleClick,
+            handleDoubleClick,
+            isInFileManager,
+            openNewTab
+          }
+        )
       }
     );
   };

package/dist/src/cms/client/interfaces/components/resources/folder/folder-relations-section.js

@@ -1,7 +1,10 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useTranslator } from 'intor/react';
+import { useState } from 'react';
 import 'mime-types';
+import '../../../../../../core/domain/resources/admin/constants.js';
+import '../../../../../../core/domain/resources/user/constants.js';
 import 'clsx';
 import 'tailwind-merge';
 import { ensureArray } from '../../../../../../shared/utils/ensure-array.js';
@@ -9,12 +12,8 @@ import { Accordion } from '../../ui/features/accordion/accordion.js';
 import { AccordionContainer } from '../../ui/features/accordion/accordion-container.js';
 import 'lucide-react';
 import 'next/link';
-import '../../../../../../constants/paths/auth.js';
-import '../../../../../../constants/paths/main.js';
-import '../../../../../../constants/paths/resources.js';
-import '../../../../../../constants/redirect-paths.js';
+import '../../../../../../constants/paths/redirect.js';
 import 'next/navigation';
-import 'react';
 import '@radix-ui/react-avatar';
 import '../../shadcn/badge.js';
 import '../../shadcn/button.js';
@@ -24,6 +23,7 @@ import '@radix-ui/react-dropdown-menu';
 import '../../shadcn/input-group.js';
 import '../../shadcn/item.js';
 import '@radix-ui/react-label';
+import 'radix-ui';
 import '@radix-ui/react-select';
 import '@radix-ui/react-separator';
 import '../../shadcn/sidebar/sidebar.js';
@@ -31,11 +31,11 @@ import 'next-themes';
 import 'sonner';
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-tooltip';
-import 'ua-parser-js';
-import '../../../../../../core/domain/resources/admin/constants.js';
-import '../../../../infrastructure/contexts/admin/admin.js';
-import '../../../../infrastructure/react-query/client.js';
+import '../../../../../../commerce/taiwan-address/constants.js';
+import '../../../../../../core/client/infrastructure/contexts/admin/admin.js';
+import '../../../../../../core/client/infrastructure/react-query/client.js';
 import '@tanstack/react-query';
+import '../../../../../../core/client/infrastructure/contexts/user/user.js';
 import 'next/image';
 
 function createFolderRelationsSection({
@@ -48,6 +48,8 @@ function createFolderRelationsSection({
     const { t } = useTranslator();
     const subFolders = ensureArray(folder?.subFolders);
     const files = ensureArray(folder?.files);
+    const [folderStates, setFolderStates] = useState({});
+    const [fileStates, setFileStates] = useState({});
     return /* @__PURE__ */ jsxs(AccordionContainer, { children: [
       /* @__PURE__ */ jsx(
         Accordion,
@@ -58,7 +60,16 @@ function createFolderRelationsSection({
             isRelated: true,
             children: t("resources.folder.text")
           },
-          children: /* @__PURE__ */ jsx(FolderList, { folderIds: subFolders.map((p) => p.id), openNewTab: true })
+          deps: [folderStates.isFetching],
+          children: /* @__PURE__ */ jsx(
+            FolderList,
+            {
+              folderIds: subFolders.map((p) => p.id),
+              openNewTab: true,
+              setListItemStates: setFolderStates,
+              localKey: `folder-FolderRelationsSection`
+            }
+          )
         }
       ),
       /* @__PURE__ */ jsx(
@@ -70,7 +81,16 @@ function createFolderRelationsSection({
             isRelated: true,
             children: t("resources.file.text")
           },
-          children: /* @__PURE__ */ jsx(FileList, { fileIds: files.map((p) => p.id), openNewTab: true })
+          deps: [fileStates.isFetching],
+          children: /* @__PURE__ */ jsx(
+            FileList,
+            {
+              fileIds: files.map((p) => p.id),
+              openNewTab: true,
+              setListItemStates: setFileStates,
+              localKey: `file-FolderRelationsSection`
+            }
+          )
         }
       )
     ] });

package/dist/src/cms/client/interfaces/components/resources/folder/folder-state-icons.js

@@ -0,0 +1,16 @@
+import { jsx } from 'react/jsx-runtime';
+import { Lock } from 'lucide-react';
+import '../../../../../../core/domain/resources/admin/constants.js';
+import { isFolderLocked } from '../../../../../../core/domain/resources/folder/utils/is-folder-locked.js';
+import '../../../../../../core/domain/resources/user/constants.js';
+import 'mime-types';
+import { cn } from '../../../../../../shared/utils/cn.js';
+
+function FolderStateIcons({
+  folder
+}) {
+  const isLocked = isFolderLocked(folder) || folder?.isLocked;
+  return /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx(Lock, { className: cn(!isLocked && "opacity-10") }) });
+}
+
+export { FolderStateIcons };