sitero 0.2.0 → 0.4.0

package/dist/src/cms/client/interfaces/pages/dashboard/system/storage/file/create-many/page.js

@@ -3,22 +3,22 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useTranslator } from 'intor/react';
 import { Images } from 'lucide-react';
 import { useRouter } from 'next/navigation';
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import { toast } from 'sonner';
 import { CMS_PATHS } from '../../../../../../../../../constants/paths/cms-paths.js';
 import '../../../../../../../../../constants/paths/redirect.js';
 import '../../../../../../../../../constants/cms-locale.js';
-import 'ua-parser-js';
-import '../../../../../../../../../shared/client/react-query/client.js';
-import '@tanstack/react-query';
-import { useCommand } from '../../../../../../../../../shared/client/react-query/use-command.js';
 import 'mime-types';
 import 'sitero-domain';
 import { createBuildTranslations } from '../../../../../../../../../shared/translation/create-build-translations.js';
+import 'ua-parser-js';
+import '../../../../../../../../../shared/client/react-query/client.js';
+import '@tanstack/react-query';
 import 'clsx';
 import 'tailwind-merge';
-import 'zod';
-import { PageHeader } from '../../../../../../components/ui/blocks/page-header/page-header.js';
+import { getCmsFieldErrorMessageMap, getCmsLocalizedFieldErrors } from '../../../../../../../infrastructure/operation-result/presentation/message.js';
+import { useCmsCommand } from '../../../../../../../infrastructure/operation-result/use-cms-command.js';
+import { PageHeaderLayout } from '../../../../../../components/ui/blocks/page-header/page-header-layout.js';
 import '@radix-ui/react-avatar';
 import '../../../../../../components/shadcn/badge.js';
 import '../../../../../../components/shadcn/button.js';
@@ -34,13 +34,20 @@ import '../../../../../../components/shadcn/sidebar/sidebar.js';
 import 'next-themes';
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-tooltip';
+import 'next/link';
+import { ReturnButton } from '../../../../../../components/ui/buttons/return-button.js';
 import { Form } from '../../../../../../components/ui/form/form.js';
-import { Field } from '../../../../../../components/ui/form/field.js';
+import { FormField } from '../../../../../../components/ui/form/form-field.js';
 import { FieldsContainer } from '../../../../../../components/ui/form/containers/fields-container.js';
 import { MainFields } from '../../../../../../components/ui/form/containers/main-fields.js';
 import { SideFields } from '../../../../../../components/ui/form/containers/side-fields.js';
-import 'next/link';
+import '../../../../../../components/ui/inputs/input.js';
+import '../../../../../../components/ui/inputs/textarea.js';
+import '../../../../../../components/ui/inputs/switch-input.js';
+import '../../../../../../components/ui/inputs/password-input.js';
 import { ActionButtonsCard } from '../../../../../../components/ui/cards/action-buttons-card.js';
+import { getLocalFileError } from '../../../../../../components/ui/features/file/local-files.js';
+import { getRetryableFiles, transferFiles } from '../../../../../../components/ui/features/file/transfer-files.js';
 import '../../../../../../../infrastructure/admin-session/admin-context.js';
 import 'intor/next';
 import { ContentContainer } from '../../../../../../components/ui/layouts/content-container.js';
@@ -56,14 +63,20 @@ function createFileCreateManyPage({
 }) {
   const buildTranslations = createBuildTranslations({ locales: webLocales });
   return function FileCreateManyPage() {
-    const { t } = useTranslator();
     const router = useRouter();
-    const { execute, isPending } = useCommand(multiFilesUploadApi);
+    const { t, locale } = useTranslator();
+    const busy = useRef(false);
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [statuses, setStatuses] = useState({});
+    const {
+      execute: executeMultiFilesUploadApi,
+      isPending,
+      fieldErrors: uploadFieldErrors
+    } = useCmsCommand(multiFilesUploadApi, { clearAll: false });
     const [formData, setFormData] = useState({
-      blobFiles: [],
-      sizes: {}
+      blobFiles: []
     });
-    const { execute: createMany, isRedirecting } = useCommand(
+    const { execute: executeFileCreateManyAction } = useCmsCommand(
       ({ uploadResults }) => fileCreateManyAction({
         formData: {
           uploadResults: uploadResults.map((r) => ({
@@ -75,25 +88,59 @@ function createFileCreateManyPage({
           }))
         }
       }),
-      {
-        onSuccess: () => router.replace(CMS_PATHS.system.storage.file.pathname)
-      }
+      { clearAll: true }
     );
     async function handleSubmit() {
-      if (formData.blobFiles?.some((f) => f.size > maxFileSizeInBytes)) {
-        toast.error(
-          `${t("resources.file.file-size-warning.text")} ${maxFileSizeInMb} MB`
-        );
+      if (busy.current || formData.blobFiles.some((file) => file.isReadingMetadata))
+        return;
+      const pending = getRetryableFiles(formData.blobFiles, statuses);
+      if (!pending.length) return;
+      if (pending.some((file) => getLocalFileError(file, maxFileSizeInBytes))) {
+        toast.error(t("ui.blob-file.status.invalid.text"));
         return;
       }
-      const response = await execute(formData);
-      if (response) await createMany(response);
+      busy.current = true;
+      setIsSubmitting(true);
+      const completedStatuses = { ...statuses };
+      let isNavigating = false;
+      const update = (files, status) => {
+        for (const file of files) completedStatuses[file.id] = status;
+        setStatuses({ ...completedStatuses });
+      };
+      try {
+        await transferFiles({
+          files: pending,
+          upload: (blobFiles) => executeMultiFilesUploadApi({ blobFiles }),
+          register: executeFileCreateManyAction,
+          update
+        });
+        if (formData.blobFiles.every(
+          (file) => completedStatuses[file.id] === "success"
+        )) {
+          router.replace(CMS_PATHS.system.storage.file.pathname);
+          isNavigating = true;
+        }
+      } finally {
+        if (!isNavigating) {
+          busy.current = false;
+          setIsSubmitting(false);
+        }
+      }
     }
+    const isProcessing = isSubmitting || isPending || formData.blobFiles.some((file) => file.isReadingMetadata);
+    const pendingFiles = getRetryableFiles(formData.blobFiles, statuses);
+    const actionButtonProps = {
+      isDisabled: !pendingFiles.length,
+      ...pendingFiles.some((file) => statuses[file.id]) ? { children: t("ui.blob-file.status.retry.text") } : {}
+    };
+    const uploadFieldErrorMessages = getCmsFieldErrorMessageMap(
+      getCmsLocalizedFieldErrors(t, locale, uploadFieldErrors)
+    );
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
-        PageHeader,
+        PageHeaderLayout,
         {
-          variant: "createMany",
+          navigation: /* @__PURE__ */ jsx(ReturnButton, { useConfirm: true, replaceParent: true }),
           titleProps: {
             icon: Images,
             title: t("resources.file.text")
@@ -104,19 +151,22 @@ function createFileCreateManyPage({
         /* @__PURE__ */ jsxs(FieldsContainer, { children: [
           /* @__PURE__ */ jsxs(MainFields, { children: [
             /* @__PURE__ */ jsx(
-              Field,
+              FormField,
               {
+                controlId: "blobFiles",
                 label: t("resources.file.batch-create.multiple-files.text"),
                 isRequired: true,
-                hint: `${t("resources.file.file-size-warning.text")} ${maxFileSizeInMb} MB`,
-                children: /* @__PURE__ */ jsx(
+                description: `${t("resources.file.file-size-warning.text")} ${maxFileSizeInMb} MB`,
+                error: uploadFieldErrorMessages["blobFiles"],
+                children: (controlProps) => /* @__PURE__ */ jsx(
                   FilePicker,
                   {
+                    ...controlProps,
                     fieldName: "blobFiles",
                     formData,
                     setFormData,
-                    className: "max-h-64! min-h-64! w-full max-w-full",
-                    isDisabled: isRedirecting
+                    className: "max-h-64! min-h-64! w-full max-w-full lg:w-full",
+                    isDisabled: isProcessing
                   }
                 )
               }
@@ -124,21 +174,29 @@ function createFileCreateManyPage({
             /* @__PURE__ */ jsx(
               FilePreviewList,
               {
+                statuses,
                 fieldName: "blobFiles",
                 formData,
                 setFormData,
-                isDisabled: isRedirecting
+                isDisabled: isProcessing
               }
             )
           ] }),
           /* @__PURE__ */ jsx(SideFields, { children: /* @__PURE__ */ jsx("div", { className: "max-lg:hidden", children: /* @__PURE__ */ jsx(
             ActionButtonsCard,
             {
-              isProcessing: isRedirecting || isPending
+              isProcessing,
+              actionButtonProps
             }
           ) }) })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "fixed bottom-3 left-1/2 z-10 -translate-x-1/2 lg:hidden", children: /* @__PURE__ */ jsx(ActionButtonsCard, { isProcessing: isRedirecting || isPending }) })
+        /* @__PURE__ */ jsx("div", { className: "fixed bottom-3 left-1/2 z-10 -translate-x-1/2 lg:hidden", children: /* @__PURE__ */ jsx(
+          ActionButtonsCard,
+          {
+            isProcessing,
+            actionButtonProps
+          }
+        ) })
       ] }) })
     ] });
   };

package/dist/src/cms/client/interfaces/pages/dashboard/system/storage/file/delete-many/page.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useTranslator } from 'intor/react';
-import { Images } from 'lucide-react';
+import { Images, CopyCheck, CopyX, Trash2 } from 'lucide-react';
 import { useState } from 'react';
 import { toast } from 'sonner';
 import 'mime-types';
@@ -9,16 +9,16 @@ import 'sitero-domain';
 import 'ua-parser-js';
 import '../../../../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
-import { useCommand } from '../../../../../../../../../shared/client/react-query/use-command.js';
 import 'clsx';
 import 'tailwind-merge';
 import { ensureArray } from '../../../../../../../../../shared/utils/ensure-array.js';
-import 'zod';
 import { usePickItems } from '../../../../../../../applications/form/use-pick-items.js';
 import '../../../../../../../../../constants/paths/redirect.js';
 import '../../../../../../../../../constants/cms-locale.js';
 import 'next/navigation';
-import { PageHeader } from '../../../../../../components/ui/blocks/page-header/page-header.js';
+import 'zod';
+import { useCmsCommand } from '../../../../../../../infrastructure/operation-result/use-cms-command.js';
+import { PageHeaderLayout } from '../../../../../../components/ui/blocks/page-header/page-header-layout.js';
 import '@radix-ui/react-avatar';
 import '../../../../../../components/shadcn/badge.js';
 import '../../../../../../components/shadcn/button.js';
@@ -34,9 +34,15 @@ import '../../../../../../components/shadcn/sidebar/sidebar.js';
 import 'next-themes';
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-tooltip';
+import { ActionButton } from '../../../../../../components/ui/buttons/action-button.js';
+import 'next/link';
+import { ReturnButton } from '../../../../../../components/ui/buttons/return-button.js';
+import '../../../../../../components/ui/inputs/input.js';
+import '../../../../../../components/ui/inputs/textarea.js';
+import '../../../../../../components/ui/inputs/switch-input.js';
+import '../../../../../../components/ui/inputs/password-input.js';
 import '../../../../../../../infrastructure/admin-session/admin-context.js';
 import 'intor/next';
-import 'next/link';
 import { ContentContainer } from '../../../../../../components/ui/layouts/content-container.js';
 
 function createFileDeleteManyPage({
@@ -53,18 +59,49 @@ function createFileDeleteManyPage({
       pickedItems,
       setPickedItems
     });
-    const { execute, isPending } = useCommand(
+    const { execute, isPending } = useCmsCommand(
       () => fileSoftDeleteManyAction({
         formData: { ids: pickedItems.map((i) => i.id) }
       }),
       {
-        onSuccess: () => {
-          cancelAll();
+        onSuccess: (result) => {
+          if (!result) return;
+          setPickedItems(
+            (items) => items.filter(
+              (item) => result.failed.some((failure) => failure.id === item.id)
+            )
+          );
+          if (result.failed.length || result.skipped.length) {
+            const skippedMessages = {
+              FILE_NOT_FOUND: t("resources.file.delete-not-found.text"),
+              FILE_DELETE_ALREADY_DELETED: t(
+                "resources.file.delete-already-deleted.text"
+              ),
+              FILE_DELETE_LOCKED: t("resources.file.file-locked-warning.text"),
+              FILE_DELETE_IN_USE: t("resources.file.file-in-use-warning.text")
+            };
+            const reasons = [
+              ...new Set(
+                result.skipped.map((item) => skippedMessages[item.code])
+              )
+            ];
+            toast.warning(
+              [
+                result.deletedIds.length > 0 && `${t("resources.file.delete-completed.text")}: ${result.deletedIds.length}`,
+                result.skipped.length > 0 && `${t("resources.file.delete-skipped.text")}: ${result.skipped.length}`,
+                result.failed.length > 0 && `${t("resources.file.delete-failed.text")}: ${result.failed.length}`,
+                ...reasons
+              ].filter(Boolean).join(" \xB7 ")
+            );
+          }
+        },
+        onSettled: () => {
           void itemStates.refetch?.();
         }
       }
     );
     const handleClick = (file) => {
+      if (isPending) return;
       if (file.isLocked || file.isInUse) {
         toast.error(
           t(
@@ -77,29 +114,50 @@ function createFileDeleteManyPage({
     };
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
-        PageHeader,
+        PageHeaderLayout,
         {
-          variant: "deleteMany",
+          navigation: /* @__PURE__ */ jsx(ReturnButton, { pushToParent: true }),
           titleProps: {
             icon: Images,
-            title: t("resources.file.text")
-          },
-          pickAllButtonProps: {
-            onClick: pickAll,
-            isDisabled: !canPickAll
+            title: t("resources.file.text"),
+            subtitle: t("ui.delete-many.text")
           },
-          cancelAllButtonProps: {
-            onClick: cancelAll,
-            isDisabled: !canCancelAll
-          },
-          destroyButtonProps: {
-            onClick: () => {
-              if (!confirm(t("ui.dialog.confirm.text"))) return;
-              void execute();
-            },
-            isLoading: isPending,
-            isDisabled: pickedItems.length === 0
-          }
+          utilities: /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              ActionButton,
+              {
+                size: "icon",
+                variant: "outline",
+                icon: CopyCheck,
+                onClick: pickAll,
+                isDisabled: isPending || !canPickAll
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ActionButton,
+              {
+                size: "icon",
+                variant: "outline",
+                icon: CopyX,
+                onClick: cancelAll,
+                isDisabled: isPending || !canCancelAll
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ActionButton,
+              {
+                variant: "destructive",
+                icon: Trash2,
+                onClick: () => {
+                  if (!confirm(t("ui.dialog.confirm.text"))) return;
+                  void execute();
+                },
+                isLoading: isPending,
+                isDisabled: isPending || pickedItems.length === 0,
+                children: t("ui.destroy.text")
+              }
+            )
+          ] })
         }
       ),
       /* @__PURE__ */ jsx(ContentContainer, { isFixHeight: true, children: /* @__PURE__ */ jsx(

package/dist/src/cms/client/interfaces/pages/dashboard/system/storage/file/page.js

@@ -1,18 +1,20 @@
 "use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useTranslator } from 'intor/react';
-import { Image } from 'lucide-react';
-import { PageHeader } from '../../../../../components/ui/blocks/page-header/page-header.js';
+import { Image, Trash2, Plus } from 'lucide-react';
+import { CMS_PATHS } from '../../../../../../../../constants/paths/cms-paths.js';
+import '../../../../../../../../constants/paths/redirect.js';
+import '../../../../../../../../constants/cms-locale.js';
+import { PageHeaderLayout } from '../../../../../components/ui/blocks/page-header/page-header-layout.js';
 import 'react';
-import '@radix-ui/react-avatar';
-import 'mime-types';
-import 'sitero-domain';
 import 'ua-parser-js';
 import '../../../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
+import '@radix-ui/react-avatar';
+import 'mime-types';
+import 'sitero-domain';
 import 'clsx';
 import 'tailwind-merge';
-import 'zod';
 import '../../../../../components/shadcn/badge.js';
 import '../../../../../components/shadcn/button.js';
 import '@radix-ui/react-collapsible';
@@ -28,12 +30,17 @@ import 'next-themes';
 import 'sonner';
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-tooltip';
-import 'next/navigation';
-import '../../../../../../../../constants/paths/redirect.js';
-import '../../../../../../../../constants/cms-locale.js';
+import { LinkButton } from '../../../../../components/ui/buttons/link-button.js';
+import { ReturnButton } from '../../../../../components/ui/buttons/return-button.js';
+import 'next/link';
+import '../../../../../components/ui/inputs/input.js';
+import '../../../../../components/ui/inputs/textarea.js';
+import '../../../../../components/ui/inputs/switch-input.js';
+import '../../../../../components/ui/inputs/password-input.js';
 import '../../../../../../infrastructure/admin-session/admin-context.js';
 import 'intor/next';
-import 'next/link';
+import 'zod';
+import 'next/navigation';
 import { ContentContainer } from '../../../../../components/ui/layouts/content-container.js';
 
 function createFileIndexPage({
@@ -43,16 +50,42 @@ function createFileIndexPage({
     const { t } = useTranslator();
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
-        PageHeader,
+        PageHeaderLayout,
         {
-          variant: "index",
+          navigation: /* @__PURE__ */ jsx(ReturnButton, { pushToParent: true }),
           titleProps: {
             icon: Image,
             title: t("resources.file.text")
           },
-          createButtonProps: {},
-          createManyButtonProps: {},
-          deleteManyButtonProps: {}
+          actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              LinkButton,
+              {
+                href: `${CMS_PATHS.system.storage.file.pathname}/create`,
+                variant: "success",
+                icon: Plus,
+                children: t("ui.create.text")
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              LinkButton,
+              {
+                href: `${CMS_PATHS.system.storage.file.pathname}/create-many`,
+                variant: "success",
+                icon: Plus,
+                children: t("ui.create-many.text")
+              }
+            )
+          ] }),
+          utilities: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+            LinkButton,
+            {
+              href: `${CMS_PATHS.system.storage.file.pathname}/delete-many`,
+              variant: "outline",
+              icon: Trash2,
+              children: t("ui.delete-many.text")
+            }
+          ) })
         }
       ),
       /* @__PURE__ */ jsx(ContentContainer, { isFixHeight: true, children: /* @__PURE__ */ jsx(FileList, {}) })

package/dist/src/cms/client/interfaces/pages/dashboard/system/storage/page.js

@@ -1,21 +1,20 @@
 "use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useTranslator } from 'intor/react';
-import { Package, File, Trash2 } from 'lucide-react';
+import { Package, Image, Trash2 } from 'lucide-react';
 import { CMS_PATHS } from '../../../../../../../constants/paths/cms-paths.js';
 import '../../../../../../../constants/paths/redirect.js';
 import '../../../../../../../constants/cms-locale.js';
-import { PageHeader } from '../../../../components/ui/blocks/page-header/page-header.js';
+import { PageHeaderLayout } from '../../../../components/ui/blocks/page-header/page-header-layout.js';
 import 'react';
-import '@radix-ui/react-avatar';
-import 'mime-types';
-import 'sitero-domain';
 import 'ua-parser-js';
 import '../../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
+import '@radix-ui/react-avatar';
+import 'mime-types';
+import 'sitero-domain';
 import 'clsx';
 import 'tailwind-merge';
-import 'zod';
 import '../../../../components/shadcn/badge.js';
 import '../../../../components/shadcn/button.js';
 import '@radix-ui/react-collapsible';
@@ -31,11 +30,17 @@ import 'next-themes';
 import 'sonner';
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-tooltip';
-import 'next/navigation';
 import 'next/link';
+import { ReturnButton } from '../../../../components/ui/buttons/return-button.js';
+import '../../../../components/ui/inputs/input.js';
+import '../../../../components/ui/inputs/textarea.js';
+import '../../../../components/ui/inputs/switch-input.js';
+import '../../../../components/ui/inputs/password-input.js';
 import { FeatureCard } from '../../../../components/ui/cards/feature-card.js';
 import '../../../../../infrastructure/admin-session/admin-context.js';
 import 'intor/next';
+import 'zod';
+import 'next/navigation';
 import { ContentContainer } from '../../../../components/ui/layouts/content-container.js';
 
 function createStoragePage() {
@@ -43,8 +48,9 @@ function createStoragePage() {
     const { t } = useTranslator();
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
-        PageHeader,
+        PageHeaderLayout,
         {
+          navigation: /* @__PURE__ */ jsx(ReturnButton, { href: CMS_PATHS.dashboard.pathname }),
           titleProps: {
             icon: Package,
             title: t("main.storage.text")
@@ -56,7 +62,7 @@ function createStoragePage() {
           FeatureCard,
           {
             href: CMS_PATHS.system.storage.file.pathname,
-            icon: /* @__PURE__ */ jsx(File, {}),
+            icon: /* @__PURE__ */ jsx(Image, {}),
             text: t("resources.file.text")
           }
         ),