sitero 0.2.0 → 0.3.0

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

@@ -12,11 +12,17 @@ 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 { useQuery } from '../../../../../../../../../../shared/client/react-query/use-query.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 { useCmsQuery } from '../../../../../../../../infrastructure/operation-result/use-cms-query.js';
 import '@radix-ui/react-avatar';
 import '../../../../../../../components/shadcn/badge.js';
 import '../../../../../../../components/shadcn/button.js';
@@ -34,46 +40,49 @@ 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 { 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 { FormField } from '../../../../../../../components/ui/form/form-field.js';
 import { Field } from '../../../../../../../components/ui/form/field.js';
 import { FieldBody } from '../../../../../../../components/ui/form/field-body.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 '../../../../../../../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 createAdminEditPage({
   enableAuthor,
+  webLocales,
   useAdminUpdateFormData,
   adminFindDetailAction,
   adminUpdateAction,
   FileList,
   FileCard,
-  Uploader,
-  I18nInput,
-  I18nTextarea,
-  I18nArrayInput
+  Uploader
 }) {
   return function AdminEditPage() {
-    const { t } = useTranslator();
+    const { t, locale, format } = useTranslator();
     const { id } = useParams();
     const router = useRouter();
     const {
       data: admin,
       isFetching,
       isNotFound
-    } = useQuery(
+    } = useCmsQuery(
       () => adminFindDetailAction({ id }),
       ["adminFindDetailAction", id],
       {
@@ -81,7 +90,18 @@ function createAdminEditPage({
       }
     );
     const { formData, setFormData } = useAdminUpdateFormData(admin);
-    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(
       () => adminUpdateAction({ id, formData }),
       {
         onSuccess: (data) => {
@@ -95,34 +115,59 @@ function createAdminEditPage({
         }
       }
     );
+    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,
-          isLoading: isFetching,
-          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,
+              isLoading: isFetching,
+              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,
-          isLoading: isFetching,
-          isDisabled: isRedirecting
+          controlId: "receivesInquiryNotifications",
+          label: t("resources.admin.receives-inquiry-notifications.text"),
+          children: (controlProps) => /* @__PURE__ */ jsx(
+            SwitchInput,
+            {
+              ...bindBooleanInput("receivesInquiryNotifications"),
+              disabled: isRedirecting,
+              isLoading: isFetching,
+              ...controlProps
+            }
+          )
         }
-      ) })
+      )
     ] });
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
-        PageHeader,
+        PageHeaderLayout,
         {
-          variant: "edit",
+          navigation: /* @__PURE__ */ jsx(ReturnButton, { useConfirm: true, replaceParent: true }),
           titleProps: {
             icon: ShieldUser,
             title: t("resources.admin.text")
@@ -137,51 +182,77 @@ function createAdminEditPage({
                 `resources.admin.role.${(admin?.role ?? ADMIN_ROLES.ADMIN).toLowerCase()}.text`
               ) }) }),
               /* @__PURE__ */ jsx(
-                Field,
+                FormField,
                 {
-                  htmlFor: "email",
+                  controlId: "email",
                   label: t("resources.admin.email.text"),
-                  children: /* @__PURE__ */ jsx(
+                  isRequired: true,
+                  error: fieldErrorMessages["email"],
+                  children: (controlProps) => /* @__PURE__ */ jsx(
                     Input,
                     {
-                      id: "email",
-                      fieldName: "email",
-                      value: formData.email,
-                      setFormData,
-                      isLoading: isFetching,
-                      isDisabled: isRedirecting,
-                      isError: errors.includes("email"),
-                      placeholder: t("resources.admin.email.placeholder.text"),
-                      autoComplete: "email"
+                      type: "email",
+                      ...bindTextInput("email"),
+                      placeholder: t(
+                        "resources.admin.email.placeholder.text"
+                      ),
+                      autoComplete: "email",
+                      disabled: isFetching || isRedirecting,
+                      ...controlProps
                     }
                   )
                 }
               ),
-              /* @__PURE__ */ jsx(Field, { htmlFor: "name", label: t("resources.admin.name.text"), children: /* @__PURE__ */ jsx(
-                I18nInput,
+              /* @__PURE__ */ jsx(
+                I18nFormField,
                 {
-                  id: "name",
                   fieldName: "name",
+                  locales: webLocales,
+                  label: t("resources.admin.name.text"),
                   translations: formData.translations,
-                  setFormData,
-                  isLoading: isFetching,
-                  isDisabled: isRedirecting,
-                  errors,
-                  placeholder: t("resources.admin.name.placeholder.text")
+                  errors: localizedFieldErrors,
+                  children: ({ locale: translationLocale, controlProps }) => /* @__PURE__ */ jsx(
+                    Input,
+                    {
+                      type: "text",
+                      ...bindTranslationText("name", translationLocale),
+                      placeholder: t("resources.admin.name.placeholder.text"),
+                      autoComplete: "name",
+                      disabled: isFetching || isRedirecting,
+                      ...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: isFetching || 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: [
@@ -190,181 +261,224 @@ function createAdminEditPage({
                 /* @__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: isFetching || 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: isFetching || 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",
-                      fieldName: "description",
-                      translations: formData.translations,
-                      setFormData,
-                      isDisabled: isRedirecting,
-                      errors,
+                      ...bindTranslationText(
+                        "description",
+                        translationLocale
+                      ),
                       placeholder: t(
-                        `resources.admin.description.placeholder.text`
-                      )
+                        "resources.admin.description.placeholder.text"
+                      ),
+                      disabled: isFetching || 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",
-                      fieldName: "jobTitle",
-                      translations: formData.translations,
-                      setFormData,
-                      isDisabled: isRedirecting,
-                      errors,
+                      type: "text",
+                      ...bindTranslationText(
+                        "jobTitle",
+                        translationLocale
+                      ),
                       placeholder: t(
-                        `resources.admin.job-title.placeholder.text`
-                      )
+                        "resources.admin.job-title.placeholder.text"
+                      ),
+                      disabled: isFetching || isRedirecting,
+                      ...controlProps
                     }
                   )
                 }
               ),
-              /* @__PURE__ */ jsx(Field, { htmlFor: "url", label: t("resources.admin.url.text"), children: /* @__PURE__ */ jsx(
-                I18nInput,
+              /* @__PURE__ */ jsx(
+                I18nFormField,
                 {
-                  id: "url",
                   fieldName: "url",
+                  locales: webLocales,
+                  label: t("resources.admin.url.text"),
                   translations: formData.translations,
-                  setFormData,
-                  isDisabled: isRedirecting,
-                  errors,
-                  placeholder: t("resources.admin.url.placeholder.text")
+                  errors: localizedFieldErrors,
+                  children: ({ locale: translationLocale, controlProps }) => /* @__PURE__ */ jsx(
+                    Input,
+                    {
+                      type: "url",
+                      ...bindTranslationText("url", translationLocale),
+                      placeholder: t(
+                        "resources.admin.url.placeholder.text"
+                      ),
+                      disabled: isFetching || 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",
-                      fieldName: "worksFor",
-                      translations: formData.translations,
-                      setFormData,
-                      isDisabled: isRedirecting,
-                      errors,
+                      type: "text",
+                      ...bindTranslationText(
+                        "worksFor",
+                        translationLocale
+                      ),
                       placeholder: t(
-                        `resources.admin.works-for.placeholder.text`
-                      )
+                        "resources.admin.works-for.placeholder.text"
+                      ),
+                      disabled: isFetching || 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",
-                      fieldName: "knowsAbout",
-                      translations: formData.translations,
-                      setFormData,
-                      isDisabled: isRedirecting,
-                      errors,
+                      ...bindTranslationStringArray(
+                        "knowsAbout",
+                        translationLocale
+                      ),
+                      itemErrors: activeErrors,
                       placeholder: t(
-                        `resources.admin.knows-about.placeholder.text`
-                      )
+                        "resources.admin.knows-about.placeholder.text"
+                      ),
+                      disabled: isFetching || 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",
-                      fieldName: "homeLocation",
-                      translations: formData.translations,
-                      setFormData,
-                      isDisabled: isRedirecting,
-                      errors,
+                      type: "text",
+                      ...bindTranslationText(
+                        "homeLocation",
+                        translationLocale
+                      ),
                       placeholder: t(
-                        `resources.admin.home-location.placeholder.text`
-                      )
+                        "resources.admin.home-location.placeholder.text"
+                      ),
+                      disabled: isFetching || 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",
-                      fieldName: "nationality",
-                      translations: formData.translations,
-                      setFormData,
-                      isDisabled: isRedirecting,
-                      errors,
+                      type: "text",
+                      ...bindTranslationText(
+                        "nationality",
+                        translationLocale
+                      ),
                       placeholder: t(
-                        `resources.admin.nationality.placeholder.text`
-                      )
+                        "resources.admin.nationality.placeholder.text"
+                      ),
+                      disabled: isFetching || isRedirecting,
+                      ...controlProps
                     }
                   )
                 }