sitero 0.1.0 → 0.1.1

package/dist/src/cms/client/interfaces/components/resources/post/content/post-create-content.js

@@ -0,0 +1,463 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useTranslator } from 'intor/react';
+import { useRouter } from 'next/navigation';
+import { POST_TYPES } from 'sitero-domain';
+import '../../../../../../../constants/paths/redirect.js';
+import '../../../../../../../constants/cms-locale.js';
+import { useAdmin } from '../../../../../../../core/client/infrastructure/contexts/admin/admin.js';
+import 'react';
+import '../../../../../../../core/client/infrastructure/react-query/client.js';
+import '@tanstack/react-query';
+import { useCommand } from '../../../../../../../core/client/infrastructure/react-query/use-command.js';
+import 'mime-types';
+import 'clsx';
+import 'tailwind-merge';
+import { joinUrl } from '../../../../../../../shared/utils/join-url.js';
+import 'zod';
+import { getImgIdsFromHtmls } from '../../../../../applications/form/get-img-ids-from-htmls.js';
+import { processContentHtml } from '../../../../../applications/form/process-content-html.js';
+import { useParentPathname } from '../../../../../applications/ui/use-parent-pathname.js';
+import 'lucide-react';
+import '../../../../../../../core/domain/resources/admin/constants.js';
+import '@radix-ui/react-avatar';
+import '../../../shadcn/badge.js';
+import '../../../shadcn/button.js';
+import '@radix-ui/react-collapsible';
+import '@radix-ui/react-dialog';
+import '@radix-ui/react-dropdown-menu';
+import '../../../shadcn/input-group.js';
+import '@radix-ui/react-label';
+import '@radix-ui/react-radio-group';
+import '@radix-ui/react-select';
+import { Separator } from '../../../shadcn/separator.js';
+import '../../../shadcn/sidebar/sidebar.js';
+import 'next-themes';
+import 'sonner';
+import '@radix-ui/react-tabs';
+import '@radix-ui/react-tooltip';
+import 'next/link';
+import { Form } from '../../../ui/form/form.js';
+import { Field } from '../../../ui/form/field.js';
+import { FieldsContainer } from '../../../ui/form/containers/fields-container.js';
+import { MainFields } from '../../../ui/form/containers/main-fields.js';
+import { SideFields } from '../../../ui/form/containers/side-fields.js';
+import { ControlFields } from '../../../ui/form/control-fields/control-fields.js';
+import { ActionButtonsCard } from '../../../ui/cards/action-buttons-card.js';
+import { PickModal } from '../../../ui/features/pick-modal/pick-modal.js';
+import 'next/image';
+import 'intor/next';
+import { ContentContainer } from '../../../ui/layouts/content-container.js';
+import { AdminCard } from '../../admin/admin-card.js';
+import { CategoryCard } from '../category/category-card.js';
+import { CategoryTable } from '../category/category-table.js';
+import { TagCard } from '../tag/tag-card.js';
+import { TagTable } from '../tag/tag-table.js';
+
+function createPostCreateContent({
+  usePostCreateFormData,
+  postCreateAction,
+  AdminList,
+  PostList,
+  PostCard,
+  FileList,
+  FileCard,
+  Uploader,
+  I18nTextarea,
+  I18nEditor,
+  I18nObjectArrayInput,
+  I18nNumberInput
+}) {
+  return function PostCreateContent({
+    postType,
+    parentType,
+    parentLabelKey,
+    isSubcategoryParent = false,
+    CategoryCard: CategoryCard$1 = CategoryCard,
+    CategoryTable: CategoryTable$1 = CategoryTable,
+    tagType = POST_TYPES.TAG,
+    topic,
+    // Use in post, category
+    controlMeta,
+    isFetching,
+    allowField,
+    cancelButtonHref
+  }) {
+    const { t, locale } = useTranslator();
+    const router = useRouter();
+    const parentPathname = useParentPathname();
+    const { admin } = useAdmin();
+    const topicSlug = topic?.slug;
+    const isFieldAllowed = (type, field, fieldRuleKey) => allowField({ topicSlug, type, field, fieldRuleKey });
+    const { formData, setFormData } = usePostCreateFormData({
+      type: postType,
+      admin,
+      topic
+    });
+    const { execute, isRedirecting, errors } = useCommand(
+      () => {
+        const contentImageIds = getImgIdsFromHtmls(
+          formData.translations.map((t2) => t2.content ?? "")
+        );
+        const translations = formData.translations.map((t2) => {
+          const { content, toc } = processContentHtml(t2.content);
+          return { ...t2, content, toc };
+        });
+        return postCreateAction({
+          formData: { ...formData, contentImageIds, translations }
+        });
+      },
+      {
+        onSuccess: (data) => router.replace(joinUrl(parentPathname, data?.post.id))
+      }
+    );
+    return /* @__PURE__ */ jsx(ContentContainer, { children: /* @__PURE__ */ jsxs(Form, { onSubmit: () => void execute(), children: [
+      /* @__PURE__ */ jsxs(FieldsContainer, { children: [
+        /* @__PURE__ */ jsxs(MainFields, { children: [
+          /* @__PURE__ */ jsxs(Fragment, { children: [
+            isFieldAllowed(postType, "author") && /* @__PURE__ */ jsx(Field, { label: t("resources.post.author.text"), children: /* @__PURE__ */ jsx(
+              PickModal,
+              {
+                fieldName: "author",
+                formData,
+                setFormData,
+                isLoading: isFetching,
+                isDisabled: isRedirecting,
+                itemList: /* @__PURE__ */ jsx(AdminList, {}),
+                pickedDisplay: /* @__PURE__ */ jsx(AdminCard, { admin: formData.author })
+              }
+            ) }),
+            isFieldAllowed(postType, "parents") && parentType && /* @__PURE__ */ jsx(Field, { label: t(parentLabelKey ?? "resources.category.text"), children: /* @__PURE__ */ jsx(
+              PickModal,
+              {
+                fieldName: "parents",
+                formData,
+                setFormData,
+                isLoading: isFetching,
+                isDisabled: isRedirecting,
+                isMultiPick: true,
+                itemList: /* @__PURE__ */ jsx(
+                  PostList,
+                  {
+                    usableFields: [
+                      ...isFieldAllowed(parentType, "isActive") ? ["isActive"] : [],
+                      ...isFieldAllowed(parentType, "isIndexActive") ? ["isIndexActive"] : [],
+                      ...isFieldAllowed(parentType, "isSlugActive") ? ["isSlugActive"] : [],
+                      ...isFieldAllowed(parentType, "isFeatured") ? ["isFeatured"] : [],
+                      ...isFieldAllowed(parentType, "isShownOnHome") ? ["isShownOnHome"] : []
+                    ],
+                    type: parentType,
+                    topicId: topic?.id,
+                    Card: (props) => /* @__PURE__ */ jsx(
+                      CategoryCard$1,
+                      {
+                        ...props,
+                        isSubcategory: isSubcategoryParent
+                      }
+                    ),
+                    Table: (props) => /* @__PURE__ */ jsx(
+                      CategoryTable$1,
+                      {
+                        ...props,
+                        isSubcategory: isSubcategoryParent
+                      }
+                    ),
+                    localKey: `parent-${parentType}`
+                  }
+                ),
+                pickedDisplay: formData.parents.map((parent) => /* @__PURE__ */ jsx(
+                  CategoryCard$1,
+                  {
+                    post: parent,
+                    isSubcategory: isSubcategoryParent
+                  },
+                  parent.id
+                ))
+              }
+            ) }),
+            isFieldAllowed(postType, "tags") && /* @__PURE__ */ jsx(Field, { label: t("resources.tag.text"), children: /* @__PURE__ */ jsx(
+              PickModal,
+              {
+                fieldName: "tags",
+                formData,
+                setFormData,
+                isLoading: isFetching,
+                isDisabled: isRedirecting,
+                isMultiPick: true,
+                itemList: /* @__PURE__ */ jsx(
+                  PostList,
+                  {
+                    usableFields: [
+                      ...isFieldAllowed(tagType, "isActive") ? ["isActive"] : [],
+                      ...isFieldAllowed(tagType, "isIndexActive") ? ["isIndexActive"] : [],
+                      ...isFieldAllowed(tagType, "isSlugActive") ? ["isSlugActive"] : [],
+                      ...isFieldAllowed(tagType, "isFeatured") ? ["isFeatured"] : [],
+                      ...isFieldAllowed(tagType, "isShownOnHome") ? ["isShownOnHome"] : []
+                    ],
+                    type: tagType,
+                    Card: TagCard,
+                    Table: TagTable,
+                    localKey: "tag"
+                  }
+                ),
+                pickedDisplay: formData.tags.map((tag) => /* @__PURE__ */ jsx(TagCard, { post: tag }, tag.id))
+              }
+            ) }),
+            isFieldAllowed(postType, "coverImage") && /* @__PURE__ */ jsx(Field, { label: t("resources.post.cover-image.text"), children: /* @__PURE__ */ jsx(
+              PickModal,
+              {
+                fieldName: "coverImage",
+                formData,
+                setFormData,
+                isLoading: isFetching,
+                isDisabled: isRedirecting,
+                itemList: /* @__PURE__ */ jsx(FileList, {}),
+                pickedDisplay: /* @__PURE__ */ jsx(FileCard, { file: formData.coverImage }),
+                aboveManagementCard: /* @__PURE__ */ jsx(Uploader, { accept: "image/*" })
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsxs(Fragment, { children: [
+            isFieldAllowed(postType, "text-content-separator") && /* @__PURE__ */ jsx(Separator, { className: "my-4" }),
+            isFieldAllowed(postType, "title") && /* @__PURE__ */ jsx(Field, { htmlFor: "title", label: t("resources.post.title.text"), children: /* @__PURE__ */ jsx(
+              I18nTextarea,
+              {
+                id: "title",
+                placeholder: t("resources.post.title.placeholder.text"),
+                fieldName: "title",
+                translations: formData.translations,
+                setFormData,
+                isLoading: isFetching,
+                isDisabled: isRedirecting,
+                errors
+              }
+            ) }),
+            isFieldAllowed(postType, "subtitle") && /* @__PURE__ */ jsx(
+              Field,
+              {
+                htmlFor: "subtitle",
+                label: t("resources.post.subtitle.text"),
+                children: /* @__PURE__ */ jsx(
+                  I18nTextarea,
+                  {
+                    id: "subtitle",
+                    placeholder: t(
+                      "resources.post.subtitle.placeholder.text"
+                    ),
+                    fieldName: "subtitle",
+                    translations: formData.translations,
+                    setFormData,
+                    isLoading: isFetching,
+                    isDisabled: isRedirecting,
+                    errors
+                  }
+                )
+              }
+            ),
+            isFieldAllowed(postType, "summary") && /* @__PURE__ */ jsx(
+              Field,
+              {
+                htmlFor: "summary",
+                label: t("resources.post.summary.text"),
+                children: /* @__PURE__ */ jsx(
+                  I18nTextarea,
+                  {
+                    id: "summary",
+                    placeholder: t("resources.post.summary.placeholder.text"),
+                    fieldName: "summary",
+                    translations: formData.translations,
+                    setFormData,
+                    isLoading: isFetching,
+                    isDisabled: isRedirecting,
+                    errors
+                  }
+                )
+              }
+            ),
+            isFieldAllowed(postType, "description") && /* @__PURE__ */ jsx(
+              Field,
+              {
+                htmlFor: "description",
+                label: t("resources.post.description.text"),
+                children: /* @__PURE__ */ jsx(
+                  I18nTextarea,
+                  {
+                    id: "description",
+                    placeholder: t(
+                      "resources.post.description.placeholder.text"
+                    ),
+                    fieldName: "description",
+                    translations: formData.translations,
+                    setFormData,
+                    isLoading: isFetching,
+                    isDisabled: isRedirecting,
+                    errors
+                  }
+                )
+              }
+            ),
+            isFieldAllowed(postType, "content") && /* @__PURE__ */ jsx(Field, { label: t("resources.post.content.text"), children: /* @__PURE__ */ jsx(
+              I18nEditor,
+              {
+                locale,
+                fieldName: "content",
+                translations: formData.translations,
+                setFormData,
+                isLoading: isFetching,
+                isDisabled: isRedirecting,
+                errors
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsxs(Fragment, { children: [
+            isFieldAllowed(postType, "better-seo-separator") && /* @__PURE__ */ jsx(Separator, { className: "my-4" }),
+            isFieldAllowed(postType, "externalLinks") && /* @__PURE__ */ jsx(Field, { label: t("resources.post.external-links.text"), children: /* @__PURE__ */ jsx(
+              I18nObjectArrayInput,
+              {
+                fieldName: "externalLinks",
+                translations: formData.translations,
+                setFormData,
+                isLoading: isFetching,
+                isDisabled: isRedirecting,
+                errors,
+                fields: [
+                  {
+                    key: "name",
+                    placeholder: t(
+                      "resources.post.external-links.placeholder1.text"
+                    )
+                  },
+                  {
+                    key: "href",
+                    placeholder: t(
+                      "resources.post.external-links.placeholder2.text"
+                    )
+                  }
+                ]
+              }
+            ) }),
+            isFieldAllowed(postType, "faq") && /* @__PURE__ */ jsx(Field, { label: t("resources.post.faq.text"), children: /* @__PURE__ */ jsx(
+              I18nObjectArrayInput,
+              {
+                fieldName: "faq",
+                translations: formData.translations,
+                setFormData,
+                isLoading: isFetching,
+                isDisabled: isRedirecting,
+                errors,
+                fields: [
+                  {
+                    key: "question",
+                    placeholder: t(
+                      "resources.post.faq.placeholder1.text"
+                    )
+                  },
+                  {
+                    key: "answer",
+                    placeholder: t(
+                      "resources.post.faq.placeholder2.text"
+                    )
+                  }
+                ]
+              }
+            ) }),
+            isFieldAllowed(postType, "readTime") && /* @__PURE__ */ jsx(
+              Field,
+              {
+                htmlFor: "readTime",
+                label: t("resources.post.read-time.text"),
+                hint: "Minutes",
+                children: /* @__PURE__ */ jsx(
+                  I18nNumberInput,
+                  {
+                    id: "readTime",
+                    placeholder: t(
+                      "resources.post.read-time.placeholder.text"
+                    ),
+                    min: 0,
+                    fieldName: "readTime",
+                    translations: formData.translations,
+                    setFormData,
+                    isLoading: isFetching,
+                    isDisabled: isRedirecting,
+                    errors
+                  }
+                )
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(Fragment, { children: [
+            isFieldAllowed(postType, "related-posts-separator") && /* @__PURE__ */ jsx(Separator, { className: "my-4" }),
+            isFieldAllowed(postType, "relatedPosts") && /* @__PURE__ */ jsx(Field, { label: t("resources.post.related-posts.text"), children: /* @__PURE__ */ jsx(
+              PickModal,
+              {
+                fieldName: "relatedPosts",
+                formData,
+                setFormData,
+                isLoading: isFetching,
+                isDisabled: isRedirecting,
+                isMultiPick: true,
+                itemList: /* @__PURE__ */ jsx(
+                  PostList,
+                  {
+                    usableFields: [
+                      ...isFieldAllowed(postType, "isActive") ? ["isActive"] : [],
+                      ...isFieldAllowed(postType, "isIndexActive") ? ["isIndexActive"] : [],
+                      ...isFieldAllowed(postType, "isSlugActive") ? ["isSlugActive"] : [],
+                      ...isFieldAllowed(postType, "isFeatured") ? ["isFeatured"] : [],
+                      ...isFieldAllowed(postType, "isShownOnHome") ? ["isShownOnHome"] : []
+                    ],
+                    type: postType,
+                    topicId: topic?.id
+                  }
+                ),
+                pickedDisplay: formData.relatedPosts.map(
+                  (relatedPost) => /* @__PURE__ */ jsx(PostCard, { post: relatedPost }, relatedPost.id)
+                )
+              }
+            ) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(SideFields, { children: [
+          /* @__PURE__ */ jsx("div", { className: "max-lg:hidden", children: /* @__PURE__ */ jsx(
+            ActionButtonsCard,
+            {
+              isInitializing: isFetching,
+              isProcessing: isRedirecting,
+              cancelButtonProps: { href: cancelButtonHref }
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Separator, { className: "mt-6 lg:hidden" }),
+          /* @__PURE__ */ jsx(
+            ControlFields,
+            {
+              fields: [
+                ...isFieldAllowed(postType, "isActive") ? [{ key: "isActive" }] : [],
+                ...isFieldAllowed(postType, "isIndexActive") ? [{ key: "isIndexActive" }] : [],
+                ...isFieldAllowed(postType, "isSlugActive") ? [{ key: "isSlugActive" }] : [],
+                ...isFieldAllowed(postType, "isFeatured") ? [{ key: "isFeatured" }] : [],
+                ...isFieldAllowed(postType, "isShownOnHome") ? [{ key: "isShownOnHome" }] : []
+              ],
+              controlMeta,
+              formData,
+              setFormData,
+              isLoading: isFetching,
+              isDisabled: isRedirecting,
+              errors
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "fixed bottom-3 left-1/2 z-10 -translate-x-1/2 lg:hidden", children: /* @__PURE__ */ jsx(
+        ActionButtonsCard,
+        {
+          isInitializing: isFetching,
+          isProcessing: isRedirecting,
+          cancelButtonProps: { href: cancelButtonHref }
+        }
+      ) })
+    ] }) });
+  };
+}
+
+export { createPostCreateContent };