sitero 0.2.0 → 0.3.0

package/dist/src/cms/client/interfaces/pages/dashboard/system/access/admin/create/page.js

@@ -12,10 +12,16 @@ import 'react';
 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 { cn } from '../../../../../../../../../shared/utils/cn.js';
 import { joinUrl } from '../../../../../../../../../shared/utils/join-url.js';
-import 'zod';
+import { getLocaleLanguageCode } from '../../../../../../../../../shared/utils/get-locale-language-code.js';
+import { createBooleanInputBinder } from '../../../../../../../applications/form/binders/create-boolean-input-binder.js';
+import { createTextInputBinder } from '../../../../../../../applications/form/binders/create-text-input-binder.js';
+import { createTranslationTextBinder } from '../../../../../../../applications/form/binders/create-translation-text-binder.js';
+import { createStringArrayBinder } from '../../../../../../../applications/form/binders/create-string-array-binder.js';
+import { createTranslationStringArrayBinder } from '../../../../../../../applications/form/binders/create-translation-string-array-binder.js';
+import { getCmsLocalizedFieldErrors, getCmsFieldErrorMessageMap, getCmsArrayItemErrors } from '../../../../../../../infrastructure/operation-result/presentation/message.js';
+import { useCmsCommand } from '../../../../../../../infrastructure/operation-result/use-cms-command.js';
 import '@radix-ui/react-avatar';
 import '../../../../../../components/shadcn/badge.js';
 import '../../../../../../components/shadcn/button.js';
@@ -33,41 +39,53 @@ import 'next-themes';
 import 'sonner';
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-tooltip';
-import { PageHeader } from '../../../../../../components/ui/blocks/page-header/page-header.js';
-import { ArrayInput } from '../../../../../../components/ui/inputs/array-input.js';
-import { Checkbox } from '../../../../../../components/ui/inputs/checkbox.js';
-import { Input } from '../../../../../../components/ui/inputs/input.js';
-import { PasswordInput } from '../../../../../../components/ui/inputs/password-input.js';
-import { Select, Option } from '../../../../../../components/ui/inputs/select.js';
+import { PageHeaderLayout } from '../../../../../../components/ui/blocks/page-header/page-header-layout.js';
+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 { Textarea } from '../../../../../../components/ui/inputs/textarea.js';
+import { SwitchInput } from '../../../../../../components/ui/inputs/switch-input.js';
+import { PasswordInput } from '../../../../../../components/ui/inputs/password-input.js';
+import { Select, Option } from '../../../../../../components/ui/inputs/select.js';
+import { StringArrayInput } from '../../../../../../components/ui/inputs/string-array-input.js';
 import { ActionButtonsCard } from '../../../../../../components/ui/cards/action-buttons-card.js';
-import { PickModal } from '../../../../../../components/ui/features/pick-modal/pick-modal.js';
+import { PickerInput } from '../../../../../../components/ui/features/pick-modal/picker-input.js';
 import 'next/image';
+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';
 
 function createAdminCreatePage({
   enableAuthor,
+  webLocales,
   useAdminCreateFormData,
   adminCreateAction,
   FileList,
   FileCard,
-  Uploader,
-  I18nInput,
-  I18nTextarea,
-  I18nArrayInput
+  Uploader
 }) {
   return function AdminCreatePage() {
-    const { t } = useTranslator();
+    const { t, locale, format } = useTranslator();
     const router = useRouter();
     const { formData, setFormData } = useAdminCreateFormData();
-    const { execute, isRedirecting, errors } = useCommand(
+    const bindBooleanInput = createBooleanInputBinder(formData, setFormData);
+    const bindStringArray = createStringArrayBinder(formData, setFormData);
+    const bindTextInput = createTextInputBinder(formData, setFormData);
+    const bindTranslationStringArray = createTranslationStringArrayBinder(
+      formData,
+      setFormData
+    );
+    const bindTranslationText = createTranslationTextBinder(
+      formData,
+      setFormData
+    );
+    const { execute, isRedirecting, fieldErrors } = useCmsCommand(
       () => adminCreateAction({ formData }),
       {
         onSuccess: (data) => {
@@ -77,32 +95,57 @@ function createAdminCreatePage({
         }
       }
     );
+    const localizedFieldErrors = getCmsLocalizedFieldErrors(
+      t,
+      locale,
+      fieldErrors
+    );
+    const fieldErrorMessages = getCmsFieldErrorMessageMap(localizedFieldErrors);
     const PreferenceFieldsCard = /* @__PURE__ */ jsxs(Card, { className: cn("flex flex-col gap-6", "bg-base-100 p-4"), children: [
-      /* @__PURE__ */ jsx(Field, { label: t("resources.admin.preferred-locale.text"), children: /* @__PURE__ */ jsx(
-        Select,
+      /* @__PURE__ */ jsx(
+        FormField,
         {
-          fieldName: "preferredLocale",
-          value: formData.preferredLocale,
-          setFormData,
-          isDisabled: isRedirecting,
-          children: CMS_LOCALES_ARRAY.map((locale) => /* @__PURE__ */ jsx(Option, { value: locale, children: locale }, locale))
+          controlId: "preferredLocale",
+          label: t("resources.admin.preferred-locale.text"),
+          isRequired: true,
+          error: fieldErrorMessages["preferredLocale"],
+          children: (controlProps) => /* @__PURE__ */ jsx(
+            Select,
+            {
+              fieldName: "preferredLocale",
+              value: formData.preferredLocale,
+              setFormData,
+              isDisabled: isRedirecting,
+              ...controlProps,
+              children: CMS_LOCALES_ARRAY.map((locale2) => {
+                const language = getLocaleLanguageCode(locale2);
+                return /* @__PURE__ */ jsx(Option, { value: locale2, children: language ? format.displayName(language, { type: "language" }) : "" }, locale2);
+              })
+            }
+          )
         }
-      ) }),
-      /* @__PURE__ */ jsx(Field, { label: t("resources.admin.receives-inquiry-notifications.text"), children: /* @__PURE__ */ jsx(
-        Checkbox,
+      ),
+      /* @__PURE__ */ jsx(
+        FormField,
         {
-          fieldName: "receivesInquiryNotifications",
-          formData,
-          setFormData,
-          isDisabled: isRedirecting
+          controlId: "receivesInquiryNotifications",
+          label: t("resources.admin.receives-inquiry-notifications.text"),
+          children: (controlProps) => /* @__PURE__ */ jsx(
+            SwitchInput,
+            {
+              ...bindBooleanInput("receivesInquiryNotifications"),
+              disabled: isRedirecting,
+              ...controlProps
+            }
+          )
         }
-      ) })
+      )
     ] });
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
-        PageHeader,
+        PageHeaderLayout,
         {
-          variant: "create",
+          navigation: /* @__PURE__ */ jsx(ReturnButton, { useConfirm: true, replaceParent: true }),
           titleProps: {
             icon: ShieldUser,
             title: t("resources.admin.text")
@@ -113,93 +156,130 @@ function createAdminCreatePage({
         /* @__PURE__ */ jsxs(FieldsContainer, { children: [
           /* @__PURE__ */ jsxs(MainFields, { children: [
             /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(Field, { label: t("resources.admin.role.text"), children: /* @__PURE__ */ jsx(
-                Select,
+              /* @__PURE__ */ jsx(
+                FormField,
                 {
-                  fieldName: "role",
-                  value: formData.role,
-                  setFormData,
-                  isDisabled: isRedirecting,
-                  children: ADMIN_ROLE_ARRAY.map((role) => /* @__PURE__ */ jsx(
-                    Option,
+                  controlId: "role",
+                  label: t("resources.admin.role.text"),
+                  error: fieldErrorMessages["role"],
+                  children: (controlProps) => /* @__PURE__ */ jsx(
+                    Select,
                     {
-                      value: role,
-                      isDisabled: role === ADMIN_ROLES.SUPER_ADMIN,
-                      children: t(
-                        `resources.admin.role.${(role || ADMIN_ROLES.ADMIN).toLowerCase()}.text`
-                      )
-                    },
-                    role
-                  ))
+                      fieldName: "role",
+                      value: formData.role,
+                      setFormData,
+                      isDisabled: isRedirecting,
+                      ...controlProps,
+                      children: ADMIN_ROLE_ARRAY.map((role) => /* @__PURE__ */ jsx(
+                        Option,
+                        {
+                          value: role,
+                          isDisabled: role === ADMIN_ROLES.SUPER_ADMIN,
+                          children: t(
+                            `resources.admin.role.${(role || ADMIN_ROLES.ADMIN).toLowerCase()}.text`
+                          )
+                        },
+                        role
+                      ))
+                    }
+                  )
                 }
-              ) }),
+              ),
               /* @__PURE__ */ jsx(
-                Field,
+                FormField,
                 {
-                  htmlFor: "email",
+                  controlId: "email",
                   label: t("resources.admin.email.text"),
                   isRequired: true,
-                  children: /* @__PURE__ */ jsx(
+                  error: fieldErrorMessages["email"],
+                  children: (controlProps) => /* @__PURE__ */ jsx(
                     Input,
                     {
-                      id: "email",
-                      placeholder: t("resources.admin.email.placeholder.text"),
+                      type: "email",
+                      placeholder: t(
+                        "resources.admin.email.placeholder.text"
+                      ),
                       autoComplete: "email",
-                      fieldName: "email",
-                      value: formData.email,
-                      setFormData,
-                      isDisabled: isRedirecting,
-                      isError: errors.includes("email")
+                      ...bindTextInput("email"),
+                      disabled: isRedirecting,
+                      ...controlProps
                     }
                   )
                 }
               ),
-              /* @__PURE__ */ jsx(Field, { htmlFor: "name", label: t("resources.admin.name.text"), children: /* @__PURE__ */ jsx(
-                I18nInput,
+              /* @__PURE__ */ jsx(
+                I18nFormField,
                 {
-                  id: "name",
-                  placeholder: t("resources.admin.name.placeholder.text"),
-                  autoComplete: "name",
                   fieldName: "name",
+                  locales: webLocales,
+                  label: t("resources.admin.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.admin.name.placeholder.text"),
+                      autoComplete: "name",
+                      disabled: isRedirecting,
+                      ...controlProps
+                    }
+                  )
                 }
-              ) }),
+              ),
               /* @__PURE__ */ jsx(
-                Field,
+                FormField,
                 {
-                  htmlFor: "password",
+                  controlId: "password",
                   label: t("resources.admin.password.text"),
-                  children: /* @__PURE__ */ jsx(
+                  isRequired: true,
+                  error: fieldErrorMessages["password"],
+                  children: (controlProps) => /* @__PURE__ */ jsx(
                     PasswordInput,
                     {
-                      id: "password",
-                      fieldName: "password",
-                      value: formData.password,
-                      setFormData,
-                      isDisabled: isRedirecting,
-                      isError: errors.includes("password"),
+                      ...bindTextInput("password"),
+                      autoComplete: "new-password",
+                      disabled: isRedirecting,
+                      showPasswordLabel: t("ui.password.show.text"),
+                      hidePasswordLabel: t("ui.password.hide.text"),
                       placeholder: t(
                         "resources.admin.password.placeholder.text"
-                      )
+                      ),
+                      ...controlProps
                     }
                   )
                 }
               ),
-              /* @__PURE__ */ jsx(Field, { label: t("resources.admin.avatar-image.text"), children: /* @__PURE__ */ jsx(
-                PickModal,
+              /* @__PURE__ */ jsx(
+                FormField,
                 {
-                  fieldName: "avatarImage",
-                  formData,
-                  setFormData,
-                  isDisabled: isRedirecting,
-                  itemList: /* @__PURE__ */ jsx(FileList, {}),
-                  pickedDisplay: /* @__PURE__ */ jsx(FileCard, { file: formData.avatarImage }),
-                  aboveManagementCard: /* @__PURE__ */ jsx(Uploader, { accept: "image/*" })
+                  controlId: "avatarImage",
+                  label: t("resources.admin.avatar-image.text"),
+                  children: (controlProps) => /* @__PURE__ */ jsx(
+                    PickerInput,
+                    {
+                      title: t("resources.admin.avatar-image.text"),
+                      controlProps,
+                      value: formData["avatarImage"],
+                      onChange: (value) => setFormData((previous) => ({
+                        ...previous,
+                        ["avatarImage"]: value
+                      })),
+                      disabled: isRedirecting,
+                      renderList: (listProps) => /* @__PURE__ */ jsx(FileList, { ...listProps, allowedTypes: ["IMAGE"] }),
+                      renderValue: () => /* @__PURE__ */ jsx(FileCard, { openNewTab: true, file: formData.avatarImage }),
+                      renderManagement: ({ onItemsCreated }) => /* @__PURE__ */ jsx(
+                        Uploader,
+                        {
+                          onItemsCreated,
+                          accept: "image/*"
+                        }
+                      )
+                    }
+                  )
                 }
-              ) })
+              )
             ] }),
             enableAuthor && /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsxs("div", { className: "flex-center my-4 w-full gap-4", children: [
@@ -208,181 +288,224 @@ function createAdminCreatePage({
                 /* @__PURE__ */ jsx(Separator, { className: "flex-1" })
               ] }),
               /* @__PURE__ */ jsx(
-                Field,
+                I18nFormField,
                 {
-                  htmlFor: "authorName",
+                  fieldName: "authorName",
+                  locales: webLocales,
                   label: t("resources.admin.author-name.text"),
-                  children: /* @__PURE__ */ jsx(
-                    I18nInput,
+                  translations: formData.translations,
+                  errors: localizedFieldErrors,
+                  children: ({ locale: translationLocale, controlProps }) => /* @__PURE__ */ jsx(
+                    Input,
                     {
-                      id: "authorName",
-                      fieldName: "authorName",
-                      translations: formData.translations,
-                      setFormData,
-                      isDisabled: isRedirecting,
-                      errors,
+                      type: "text",
+                      ...bindTranslationText(
+                        "authorName",
+                        translationLocale
+                      ),
                       placeholder: t(
-                        `resources.admin.author-name.placeholder.text`
-                      )
+                        "resources.admin.author-name.placeholder.text"
+                      ),
+                      disabled: isRedirecting,
+                      ...controlProps
                     }
                   )
                 }
               ),
               /* @__PURE__ */ jsx(
-                Field,
+                FormField,
                 {
-                  htmlFor: "socialLinks",
+                  controlId: "socialLinks",
                   label: t("resources.admin.social-links.text"),
-                  children: /* @__PURE__ */ jsx(
-                    ArrayInput,
+                  error: fieldErrorMessages["socialLinks"],
+                  children: (controlProps) => /* @__PURE__ */ jsx(
+                    StringArrayInput,
                     {
-                      id: "socialLinks",
-                      fieldName: "socialLinks",
-                      formData,
-                      setFormData,
-                      isDisabled: isRedirecting,
-                      errors,
+                      ...bindStringArray("socialLinks"),
+                      itemErrors: getCmsArrayItemErrors(
+                        localizedFieldErrors,
+                        "socialLinks"
+                      ),
                       placeholder: t(
-                        `resources.admin.social-links.placeholder.text`
-                      )
+                        "resources.admin.social-links.placeholder.text"
+                      ),
+                      disabled: isRedirecting,
+                      ...controlProps
                     }
                   )
                 }
               ),
               /* @__PURE__ */ jsx(
-                Field,
+                I18nFormField,
                 {
-                  htmlFor: "description",
+                  fieldName: "description",
+                  locales: webLocales,
                   label: t("resources.admin.description.text"),
-                  children: /* @__PURE__ */ jsx(
-                    I18nTextarea,
+                  translations: formData.translations,
+                  errors: localizedFieldErrors,
+                  children: ({ locale: translationLocale, controlProps }) => /* @__PURE__ */ jsx(
+                    Textarea,
                     {
-                      id: "description",
+                      ...bindTranslationText(
+                        "description",
+                        translationLocale
+                      ),
                       placeholder: t(
-                        `resources.admin.description.placeholder.text`
+                        "resources.admin.description.placeholder.text"
                       ),
-                      fieldName: "description",
-                      translations: formData.translations,
-                      setFormData,
-                      isDisabled: isRedirecting,
-                      errors
+                      disabled: isRedirecting,
+                      ...controlProps
                     }
                   )
                 }
               ),
               /* @__PURE__ */ jsx(
-                Field,
+                I18nFormField,
                 {
-                  htmlFor: "jobTitle",
+                  fieldName: "jobTitle",
+                  locales: webLocales,
                   label: t("resources.admin.job-title.text"),
-                  children: /* @__PURE__ */ jsx(
-                    I18nInput,
+                  translations: formData.translations,
+                  errors: localizedFieldErrors,
+                  children: ({ locale: translationLocale, controlProps }) => /* @__PURE__ */ jsx(
+                    Input,
                     {
-                      id: "jobTitle",
+                      type: "text",
+                      ...bindTranslationText(
+                        "jobTitle",
+                        translationLocale
+                      ),
                       placeholder: t(
-                        `resources.admin.job-title.placeholder.text`
+                        "resources.admin.job-title.placeholder.text"
                       ),
-                      fieldName: "jobTitle",
-                      translations: formData.translations,
-                      setFormData,
-                      isDisabled: isRedirecting,
-                      errors
+                      disabled: isRedirecting,
+                      ...controlProps
                     }
                   )
                 }
               ),
-              /* @__PURE__ */ jsx(Field, { htmlFor: "url", label: t("resources.admin.url.text"), children: /* @__PURE__ */ jsx(
-                I18nInput,
+              /* @__PURE__ */ jsx(
+                I18nFormField,
                 {
-                  id: "url",
-                  placeholder: t("resources.admin.url.placeholder.text"),
                   fieldName: "url",
+                  locales: webLocales,
+                  label: t("resources.admin.url.text"),
                   translations: formData.translations,
-                  setFormData,
-                  isDisabled: isRedirecting,
-                  errors
+                  errors: localizedFieldErrors,
+                  children: ({ locale: translationLocale, controlProps }) => /* @__PURE__ */ jsx(
+                    Input,
+                    {
+                      type: "url",
+                      ...bindTranslationText("url", translationLocale),
+                      placeholder: t(
+                        "resources.admin.url.placeholder.text"
+                      ),
+                      disabled: isRedirecting,
+                      ...controlProps
+                    }
+                  )
                 }
-              ) }),
+              ),
               /* @__PURE__ */ jsx(
-                Field,
+                I18nFormField,
                 {
-                  htmlFor: "worksFor",
+                  fieldName: "worksFor",
+                  locales: webLocales,
                   label: t("resources.admin.works-for.text"),
-                  children: /* @__PURE__ */ jsx(
-                    I18nInput,
+                  translations: formData.translations,
+                  errors: localizedFieldErrors,
+                  children: ({ locale: translationLocale, controlProps }) => /* @__PURE__ */ jsx(
+                    Input,
                     {
-                      id: "worksFor",
+                      type: "text",
+                      ...bindTranslationText(
+                        "worksFor",
+                        translationLocale
+                      ),
                       placeholder: t(
-                        `resources.admin.works-for.placeholder.text`
+                        "resources.admin.works-for.placeholder.text"
                       ),
-                      fieldName: "worksFor",
-                      translations: formData.translations,
-                      setFormData,
-                      isDisabled: isRedirecting,
-                      errors
+                      disabled: isRedirecting,
+                      ...controlProps
                     }
                   )
                 }
               ),
               /* @__PURE__ */ jsx(
-                Field,
+                I18nFormField,
                 {
-                  htmlFor: "knowsAbout",
+                  fieldName: "knowsAbout",
+                  locales: webLocales,
                   label: t("resources.admin.knows-about.text"),
-                  children: /* @__PURE__ */ jsx(
-                    I18nArrayInput,
+                  translations: formData.translations,
+                  errors: localizedFieldErrors,
+                  children: ({
+                    locale: translationLocale,
+                    controlProps,
+                    errors: activeErrors
+                  }) => /* @__PURE__ */ jsx(
+                    StringArrayInput,
                     {
-                      id: "knowsAbout",
+                      ...bindTranslationStringArray(
+                        "knowsAbout",
+                        translationLocale
+                      ),
+                      itemErrors: activeErrors,
                       placeholder: t(
-                        `resources.admin.knows-about.placeholder.text`
+                        "resources.admin.knows-about.placeholder.text"
                       ),
-                      fieldName: "knowsAbout",
-                      translations: formData.translations,
-                      setFormData,
-                      isDisabled: isRedirecting,
-                      errors
+                      disabled: isRedirecting,
+                      ...controlProps
                     }
                   )
                 }
               ),
               /* @__PURE__ */ jsx(
-                Field,
+                I18nFormField,
                 {
-                  htmlFor: "homeLocation",
+                  fieldName: "homeLocation",
+                  locales: webLocales,
                   label: t("resources.admin.home-location.text"),
-                  children: /* @__PURE__ */ jsx(
-                    I18nInput,
+                  translations: formData.translations,
+                  errors: localizedFieldErrors,
+                  children: ({ locale: translationLocale, controlProps }) => /* @__PURE__ */ jsx(
+                    Input,
                     {
-                      id: "homeLocation",
+                      type: "text",
+                      ...bindTranslationText(
+                        "homeLocation",
+                        translationLocale
+                      ),
                       placeholder: t(
-                        `resources.admin.home-location.placeholder.text`
+                        "resources.admin.home-location.placeholder.text"
                       ),
-                      fieldName: "homeLocation",
-                      translations: formData.translations,
-                      setFormData,
-                      isDisabled: isRedirecting,
-                      errors
+                      disabled: isRedirecting,
+                      ...controlProps
                     }
                   )
                 }
               ),
               /* @__PURE__ */ jsx(
-                Field,
+                I18nFormField,
                 {
-                  htmlFor: "nationality",
+                  fieldName: "nationality",
+                  locales: webLocales,
                   label: t("resources.admin.nationality.text"),
-                  children: /* @__PURE__ */ jsx(
-                    I18nInput,
+                  translations: formData.translations,
+                  errors: localizedFieldErrors,
+                  children: ({ locale: translationLocale, controlProps }) => /* @__PURE__ */ jsx(
+                    Input,
                     {
-                      id: "nationality",
+                      type: "text",
+                      ...bindTranslationText(
+                        "nationality",
+                        translationLocale
+                      ),
                       placeholder: t(
-                        `resources.admin.nationality.placeholder.text`
+                        "resources.admin.nationality.placeholder.text"
                       ),
-                      fieldName: "nationality",
-                      translations: formData.translations,
-                      setFormData,
-                      isDisabled: isRedirecting,
-                      errors
+                      disabled: isRedirecting,
+                      ...controlProps
                     }
                   )
                 }