sitero 0.2.0 → 0.4.0

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

@@ -0,0 +1,267 @@
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useTranslator } from 'intor/react';
+import { Network, Settings } from 'lucide-react';
+import { useParams } from 'next/navigation';
+import { useState } from 'react';
+import { POST_TYPES } from 'sitero-domain';
+import { CMS_PATHS } from '../../../../../../../../../../constants/paths/cms-paths.js';
+import '../../../../../../../../../../constants/paths/redirect.js';
+import '../../../../../../../../../../constants/cms-locale.js';
+import 'mime-types';
+import 'ua-parser-js';
+import '../../../../../../../../../../shared/client/react-query/client.js';
+import '@tanstack/react-query';
+import 'clsx';
+import 'tailwind-merge';
+import { joinUrl } from '../../../../../../../../../../shared/utils/join-url.js';
+import 'zod';
+import 'sonner';
+import { useCmsQuery } from '../../../../../../../../infrastructure/operation-result/use-cms-query.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';
+import '@radix-ui/react-collapsible';
+import '@radix-ui/react-dialog';
+import '@radix-ui/react-dropdown-menu';
+import '../../../../../../../components/shadcn/input-group.js';
+import '@radix-ui/react-label';
+import '@radix-ui/react-radio-group';
+import '@radix-ui/react-select';
+import '@radix-ui/react-separator';
+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 { NoData } from '../../../../../../../components/ui/display/no-data.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 { ResourceCard } from '../../../../../../../components/ui/cards/resource-card.js';
+import { Accordion } from '../../../../../../../components/ui/features/accordion/accordion.js';
+import { AccordionContainer } from '../../../../../../../components/ui/features/accordion/accordion-container.js';
+import 'next/image';
+import '../../../../../../../../infrastructure/admin-session/admin-context.js';
+import 'intor/next';
+import { ContentContainer } from '../../../../../../../components/ui/layouts/content-container.js';
+
+function createFileRelationsPage({
+  configs: staticConfigs,
+  fileFindRelationsAction,
+  AdminList,
+  PostList,
+  CategoryCard,
+  CategoryTable,
+  TopicCard,
+  TopicTable,
+  TagCard,
+  TagTable
+}) {
+  return function FileRelationsPage() {
+    const { t, locale } = useTranslator();
+    const { id } = useParams();
+    const {
+      data: relations,
+      isFetching,
+      isNotFound
+    } = useCmsQuery(
+      () => fileFindRelationsAction({ id }),
+      ["fileFindRelationsAction", id],
+      { select: (data) => data?.relations }
+    );
+    const [adminStates, setAdminStates] = useState({});
+    const [categoryStates, setCategoryStates] = useState({});
+    const [topicStates, setTopicStates] = useState({});
+    const [subcategoryStates, setSubcategoryStates] = useState({});
+    const [postStates, setPostStates] = useState(
+      {}
+    );
+    const [tagStates, setTagStates] = useState(
+      {}
+    );
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        PageHeaderLayout,
+        {
+          navigation: /* @__PURE__ */ jsx(ReturnButton, { pushToParent: true }),
+          titleProps: {
+            icon: Network,
+            title: t("resources.related-resources.text")
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(ContentContainer, { isNotFound, children: isFetching ? null : !relations ? null : /* @__PURE__ */ jsxs(AccordionContainer, { children: [
+        /* @__PURE__ */ jsx(
+          Accordion,
+          {
+            hasBorder: true,
+            deps: [adminStates.isFetching],
+            accordionHeaderProps: {
+              count: adminStates.count ?? relations.adminIds.length,
+              children: t("resources.admin.text")
+            },
+            children: /* @__PURE__ */ jsx(
+              AdminList,
+              {
+                adminIds: relations.adminIds,
+                openNewTab: true,
+                setListItemStates: setAdminStates,
+                localKey: "file-related-admins"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Accordion,
+          {
+            hasBorder: true,
+            deps: [topicStates.isFetching],
+            accordionHeaderProps: {
+              count: topicStates.count ?? (relations.postIds.length === 0 ? 0 : void 0),
+              children: t("resources.topic.text")
+            },
+            children: /* @__PURE__ */ jsx(
+              PostList,
+              {
+                postIds: relations.postIds,
+                type: POST_TYPES.TOPIC,
+                Card: TopicCard,
+                Table: TopicTable,
+                openNewTab: true,
+                setListItemStates: setTopicStates,
+                localKey: "file-related-topics"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Accordion,
+          {
+            hasBorder: true,
+            deps: [categoryStates.isFetching],
+            accordionHeaderProps: {
+              count: categoryStates.count ?? (relations.postIds.length === 0 ? 0 : void 0),
+              children: t("resources.category.text")
+            },
+            children: /* @__PURE__ */ jsx(
+              PostList,
+              {
+                postIds: relations.postIds,
+                type: POST_TYPES.CATEGORY,
+                Card: CategoryCard,
+                Table: CategoryTable,
+                openNewTab: true,
+                setListItemStates: setCategoryStates,
+                localKey: "file-related-categories"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Accordion,
+          {
+            hasBorder: true,
+            deps: [subcategoryStates.isFetching],
+            accordionHeaderProps: {
+              count: subcategoryStates.count ?? (relations.postIds.length === 0 ? 0 : void 0),
+              children: t("resources.subcategory.text")
+            },
+            children: /* @__PURE__ */ jsx(
+              PostList,
+              {
+                postIds: relations.postIds,
+                type: POST_TYPES.SUBCATEGORY,
+                Card: (props) => /* @__PURE__ */ jsx(CategoryCard, { ...props, isSubcategory: true }),
+                Table: (props) => /* @__PURE__ */ jsx(CategoryTable, { ...props, isSubcategory: true }),
+                openNewTab: true,
+                setListItemStates: setSubcategoryStates,
+                localKey: "file-related-subcategories"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Accordion,
+          {
+            hasBorder: true,
+            deps: [postStates.isFetching],
+            accordionHeaderProps: {
+              count: postStates.count ?? (relations.postIds.length === 0 ? 0 : void 0),
+              children: t("resources.post.text")
+            },
+            children: /* @__PURE__ */ jsx(
+              PostList,
+              {
+                postIds: relations.postIds,
+                type: POST_TYPES.POST,
+                openNewTab: true,
+                setListItemStates: setPostStates,
+                localKey: "file-related-posts"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Accordion,
+          {
+            hasBorder: true,
+            deps: [tagStates.isFetching],
+            accordionHeaderProps: {
+              count: tagStates.count ?? (relations.postIds.length === 0 ? 0 : void 0),
+              children: t("resources.tag.text")
+            },
+            children: /* @__PURE__ */ jsx(
+              PostList,
+              {
+                postIds: relations.postIds,
+                type: POST_TYPES.TAG,
+                Card: TagCard,
+                Table: TagTable,
+                openNewTab: true,
+                setListItemStates: setTagStates,
+                localKey: "file-related-tags"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Accordion,
+          {
+            hasBorder: true,
+            accordionHeaderProps: {
+              count: relations.configSlugs.length,
+              children: t("resources.config.text")
+            },
+            children: relations.configSlugs.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-4", children: relations.configSlugs.map((slug) => {
+              const config = staticConfigs[slug];
+              return /* @__PURE__ */ jsx(
+                ResourceCard,
+                {
+                  interaction: {
+                    type: "navigate",
+                    href: joinUrl(
+                      CMS_PATHS.website["website-config"].pathname,
+                      slug
+                    ),
+                    openNewTab: true
+                  },
+                  identity: { icon: /* @__PURE__ */ jsx(Settings, {}) },
+                  title: config?.title[locale] ?? slug,
+                  secondary: slug,
+                  style: { width: "200px" }
+                },
+                slug
+              );
+            }) }) : /* @__PURE__ */ jsx(NoData, {})
+          }
+        )
+      ] }) })
+    ] });
+  };
+}
+
+export { createFileRelationsPage };

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

@@ -3,22 +3,23 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useTranslator } from 'intor/react';
 import { Image } from 'lucide-react';
 import { useRouter } from 'next/navigation';
+import { useRef } 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 'react';
+import 'mime-types';
+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 'mime-types';
-import 'sitero-domain';
 import 'clsx';
 import 'tailwind-merge';
 import { joinUrl } from '../../../../../../../../../shared/utils/join-url.js';
-import 'zod';
-import { PageHeader } from '../../../../../../components/ui/blocks/page-header/page-header.js';
+import { createTranslationTextBinder } from '../../../../../../../applications/form/binders/create-translation-text-binder.js';
+import { getCmsLocalizedFieldErrors, getCmsFieldErrorMessageMap } 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 +35,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 { Input } from '../../../../../../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 { I18nFormField } from '../../../../../../components/ui/i18n/i18n-form-field.js';
 import '../../../../../../../infrastructure/admin-session/admin-context.js';
 import 'intor/next';
 import { ContentContainer } from '../../../../../../components/ui/layouts/content-container.js';
@@ -49,25 +57,35 @@ function createFileCreatePage({
   maxFileSizeInMb,
   maxFileSizeInBytes,
   useFileCreateFormData,
+  webLocales,
   fileCreateAction,
+  fileValidateCreateAction,
   fileUploadApi,
-  FilePicker,
-  I18nInput
+  FilePicker
 }) {
   return function FileCreatePage() {
-    const { t } = useTranslator();
+    const { t, locale } = useTranslator();
     const router = useRouter();
     const {
-      execute: executeApi,
+      execute: executeFileValidateCreateAction,
+      isRedirecting: isValidating,
+      fieldErrors: validationFieldErrors
+    } = useCmsCommand(fileValidateCreateAction, { clearAll: false });
+    const {
+      execute: executeFileUploadApi,
       isPending,
-      errors: apiErrors
-    } = useCommand(fileUploadApi);
+      fieldErrors: uploadFieldErrors
+    } = useCmsCommand(fileUploadApi);
     const { formData, setFormData } = useFileCreateFormData();
+    const bindTranslationText = createTranslationTextBinder(
+      formData,
+      setFormData
+    );
     const {
-      execute: executeAction,
+      execute: executeFileCreateAction,
       isRedirecting,
-      errors: actionErrors
-    } = useCommand(
+      fieldErrors
+    } = useCmsCommand(
       (uploadResponse) => {
         const { key } = uploadResponse;
         const { name = "", size = 0, type = "" } = formData.blobFile || {};
@@ -88,22 +106,42 @@ function createFileCreatePage({
         )
       }
     );
+    const submitBusy = useRef(false);
     async function handleSubmit() {
-      if (formData.blobFile && formData.blobFile?.size > maxFileSizeInBytes) {
-        toast.error(
-          `${t("resources.file.file-size-warning.text")} ${maxFileSizeInMb} MB`
-        );
+      if (submitBusy.current || isProcessing || formData.blobFile?.isReadingMetadata)
         return;
+      const error = formData.blobFile && getLocalFileError(formData.blobFile, maxFileSizeInBytes);
+      if (error) {
+        toast.error(t(`ui.blob-file.status.${error}.text`));
+        return;
+      }
+      submitBusy.current = true;
+      try {
+        const validation = await executeFileValidateCreateAction({
+          formData: { translations: formData.translations }
+        });
+        if (!validation) return;
+        const response = await executeFileUploadApi(formData);
+        if (response) await executeFileCreateAction(response);
+      } finally {
+        submitBusy.current = false;
       }
-      const response = await executeApi(formData);
-      if (response) await executeAction(response);
     }
-    const errors = apiErrors.length > 0 ? apiErrors : actionErrors;
+    const isProcessing = isRedirecting || isPending || isValidating || Boolean(formData.blobFile?.isReadingMetadata);
+    const displayedFieldErrors = validationFieldErrors.length > 0 ? validationFieldErrors : fieldErrors;
+    const localizedFieldErrors = getCmsLocalizedFieldErrors(
+      t,
+      locale,
+      displayedFieldErrors
+    );
+    const uploadFieldErrorMessages = getCmsFieldErrorMessageMap(
+      getCmsLocalizedFieldErrors(t, locale, uploadFieldErrors)
+    );
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
-        PageHeader,
+        PageHeaderLayout,
         {
-          variant: "create",
+          navigation: /* @__PURE__ */ jsx(ReturnButton, { useConfirm: true, replaceParent: true }),
           titleProps: {
             icon: Image,
             title: t("resources.file.text")
@@ -113,64 +151,71 @@ function createFileCreatePage({
       /* @__PURE__ */ jsx(ContentContainer, { children: /* @__PURE__ */ jsxs(Form, { onSubmit: () => void handleSubmit(), children: [
         /* @__PURE__ */ jsxs(FieldsContainer, { children: [
           /* @__PURE__ */ jsxs(MainFields, { children: [
-            /* @__PURE__ */ jsx(Field, { htmlFor: "name", label: t("resources.file.name.text"), children: /* @__PURE__ */ jsx(
-              I18nInput,
+            /* @__PURE__ */ jsx(
+              I18nFormField,
               {
-                id: "name",
-                placeholder: t("resources.file.name.placeholder.text"),
                 fieldName: "name",
+                locales: webLocales,
+                label: t("resources.file.name.text"),
                 translations: formData.translations,
-                setFormData,
-                isDisabled: isRedirecting,
-                errors
+                errors: localizedFieldErrors,
+                children: ({ locale: translationLocale, controlProps }) => /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    type: "text",
+                    ...bindTranslationText("name", translationLocale),
+                    placeholder: t("resources.file.name.placeholder.text"),
+                    disabled: isProcessing,
+                    ...controlProps
+                  }
+                )
               }
-            ) }),
+            ),
             /* @__PURE__ */ jsx(
-              Field,
+              I18nFormField,
               {
-                htmlFor: "alt",
+                fieldName: "alt",
+                locales: webLocales,
                 label: t("resources.file.alt.text"),
-                hint: t("resources.file.alt.hint.text"),
-                children: /* @__PURE__ */ jsx(
-                  I18nInput,
+                description: t("resources.file.alt.hint.text"),
+                translations: formData.translations,
+                errors: localizedFieldErrors,
+                children: ({ locale: translationLocale, controlProps }) => /* @__PURE__ */ jsx(
+                  Input,
                   {
-                    id: "alt",
+                    type: "text",
+                    ...bindTranslationText("alt", translationLocale),
                     placeholder: t("resources.file.alt.placeholder.text"),
-                    fieldName: "alt",
-                    translations: formData.translations,
-                    setFormData,
-                    isDisabled: isRedirecting,
-                    errors
+                    disabled: isProcessing,
+                    ...controlProps
                   }
                 )
               }
             ),
             /* @__PURE__ */ jsx(
-              Field,
+              FormField,
               {
+                controlId: "blobFile",
                 label: t("resources.file.blob-file.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["blobFile"],
+                children: (controlProps) => /* @__PURE__ */ jsx(
                   FilePicker,
                   {
+                    ...controlProps,
                     fieldName: "blobFile",
                     formData,
                     setFormData,
-                    isDisabled: isRedirecting
+                    isDisabled: isProcessing
                   }
                 )
               }
             )
           ] }),
-          /* @__PURE__ */ jsx(SideFields, { children: /* @__PURE__ */ jsx("div", { className: "max-lg:hidden", children: /* @__PURE__ */ jsx(
-            ActionButtonsCard,
-            {
-              isProcessing: isRedirecting || isPending
-            }
-          ) }) })
+          /* @__PURE__ */ jsx(SideFields, { children: /* @__PURE__ */ jsx("div", { className: "max-lg:hidden", children: /* @__PURE__ */ jsx(ActionButtonsCard, { isProcessing }) }) })
         ] }),
-        /* @__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 }) })
       ] }) })
     ] });
   };