sitero 0.6.0 → 0.8.0

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

@@ -100,9 +100,8 @@ function createPostEditContent({
     const parentPathname = useParentPathname();
     const editorLocale = cmsLocale.startsWith("zh") ? "zh" : "en";
     const id = post?.id ?? "";
-    const topic = post?.topic;
     const slug = post?.slug;
-    const topicSlug = topic?.slug;
+    const topicSlug = post?.topicKey ?? void 0;
     const isFieldAllowed = (type, field, fieldRuleKey) => allowField({ topicSlug, type, field, fieldRuleKey });
     const { formData, setFormData } = usePostUpdateFormData({
       post,
@@ -205,7 +204,7 @@ function createPostEditContent({
                           )
                         ],
                         type: parentType,
-                        topicId: topic?.id,
+                        topicKey: post?.topicKey ?? void 0,
                         Card: (props) => /* @__PURE__ */ jsx(
                           CategoryCard,
                           {
@@ -228,7 +227,7 @@ function createPostEditContent({
                       {
                         openNewTab: true,
                         post: parent,
-                        topicSlug: topic?.slug,
+                        topicSlug: post?.topicKey ?? void 0,
                         isSubcategory: isSubcategoryParent
                       },
                       parent.id
@@ -569,7 +568,7 @@ function createPostEditContent({
                           )
                         ],
                         type: postType,
-                        topicId: topic?.id,
+                        topicKey: post?.topicKey ?? void 0,
                         excludeIds: post ? [post?.id] : void 0
                       }
                     ),
@@ -578,7 +577,7 @@ function createPostEditContent({
                       {
                         openNewTab: true,
                         post: relatedPost,
-                        topicSlug: topic?.slug
+                        topicSlug: post?.topicKey ?? void 0
                       },
                       relatedPost.id
                     ))
@@ -602,7 +601,12 @@ function createPostEditContent({
             ControlFields,
             {
               fields: [
-                ...isFieldAllowed(postType, "isActive", post?.slug) ? [{ key: "isActive" }] : [],
+                ...isFieldAllowed(postType, "isActive", post?.slug) ? [
+                  {
+                    key: "isActive",
+                    label: t("resources.post.is-public.text")
+                  }
+                ] : [],
                 ...isFieldAllowed(postType, "isIndexActive", post?.slug) ? [{ key: "isIndexActive" }] : [],
                 ...isFieldAllowed(postType, "isSlugActive", post?.slug) ? [{ key: "isSlugActive" }] : [],
                 ...isFieldAllowed(postType, "isFeatured", post?.slug) ? [{ key: "isFeatured" }] : [],

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

@@ -72,7 +72,7 @@ function createPostShowContent({
   }) {
     const { t, format, locale: cmsLocale } = useTranslator();
     const type = post?.type;
-    const topicSlug = post?.topic?.slug;
+    const topicSlug = post?.topicKey ?? void 0;
     const categories = post?.parents;
     const parentLabelKey = subcategoryType && categories?.[0]?.type === subcategoryType ? "resources.subcategory.text" : "resources.category.text";
     const isFieldAllowed = (type2, field, fieldRuleKey) => allowField({ topicSlug, type: type2, field, fieldRuleKey });
@@ -297,7 +297,12 @@ function createPostShowContent({
           ControlFields,
           {
             fields: [
-              ...isFieldAllowed(type, "isActive", post?.slug) ? [{ key: "isActive" }] : [],
+              ...isFieldAllowed(type, "isActive", post?.slug) ? [
+                {
+                  key: "isActive",
+                  label: t("resources.post.is-public.text")
+                }
+              ] : [],
               ...isFieldAllowed(type, "isIndexActive", post?.slug) ? [{ key: "isIndexActive" }] : [],
               ...isFieldAllowed(type, "isSlugActive", post?.slug) ? [{ key: "isSlugActive" }] : [],
               ...isFieldAllowed(type, "isFeatured", post?.slug) ? [{ key: "isFeatured" }] : [],

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

@@ -44,14 +44,18 @@ import { PostStateIcons } from './post-state-icons.js';
 const WIDTH = "256px";
 const HEIGHT = "256px";
 function createPostCard({
+  topics = {},
   SmartImage,
   storageUrl,
   strategies,
-  defaultWebLocale
+  defaultWebLocale,
+  customControlFields: defaultCustomControlFields = []
 }) {
   return function PostCard({
     post,
     topicSlug,
+    customControlFields = defaultCustomControlFields,
+    usableFields,
     // link
     openNewTab,
     // pick
@@ -60,9 +64,10 @@ function createPostCard({
     // base
     className = ""
   }) {
-    const topic = "topic" in post ? post.topic : null;
-    const resolvedTopicSlug = topic?.slug ?? topicSlug;
-    const topicT = findTranslation(topic?.translations, defaultWebLocale);
+    const resolvedTopicSlug = post.topicKey ?? topicSlug;
+    const topicT = {
+      title: topics[post.topicKey ?? ""]?.title[defaultWebLocale] ?? post.topicKey ?? ""
+    };
     const postT = findTranslation(post.translations, defaultWebLocale);
     const strategy = strategies?.[post.type]?.[resolvedTopicSlug ?? ""] ?? {};
     const presentation = resolvePostPresentation(postT, strategy);
@@ -84,7 +89,14 @@ function createPostCard({
           openNewTab
         },
         identity: { icon: /* @__PURE__ */ jsx(File, {}), badge: topicT.title },
-        state: /* @__PURE__ */ jsx(PostStateIcons, { post }),
+        state: /* @__PURE__ */ jsx(
+          PostStateIcons,
+          {
+            post,
+            customControlFields,
+            usableFields
+          }
+        ),
         media: strategy.media !== false ? /* @__PURE__ */ jsx(
           "div",
           {

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

@@ -1,5 +1,6 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useTranslator } from 'intor/react';
 import { useState, useMemo, useEffect } from 'react';
 import { POST_TYPES } from 'sitero-domain';
 import 'mime-types';
@@ -12,7 +13,6 @@ import { debounce } from '../../../../../../shared/utils/debounce.js';
 import { ensureArray } from '../../../../../../shared/utils/ensure-array.js';
 import { normalizeUnorderedCacheKey } from '../../../../../../shared/utils/normalize-unordered-cache-key.js';
 import { DO_NOT_FETCH_KEY } from '../../../../../../shared/list-item.js';
-import 'intor/react';
 import 'lucide-react';
 import '@radix-ui/react-avatar';
 import '../../shadcn/badge.js';
@@ -30,6 +30,7 @@ import 'next-themes';
 import 'sonner';
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-tooltip';
+import { ActionButton } from '../../ui/buttons/action-button.js';
 import 'next/link';
 import 'next/navigation';
 import '../../../../../../constants/paths/redirect.js';
@@ -40,6 +41,7 @@ import { toActiveControlFieldFilters } from './search/control-field-filter-state
 import { ControlFieldsFilters } from './search/control-fields-filters.js';
 
 function createPostList({
+  topics = {},
   customControlFields: defaultCustomControlFields = [],
   postFindListCardsAction,
   PostCard,
@@ -49,10 +51,11 @@ function createPostList({
   return function PostList({
     customControlFields = defaultCustomControlFields,
     enabled = true,
+    isDeleted = false,
     usableFields,
     // search
     type = POST_TYPES.POST,
-    topicId,
+    topicKey,
     authorId,
     postIds,
     excludeIds,
@@ -70,6 +73,7 @@ function createPostList({
     // list
     localKey = "post"
   }) {
+    const { t } = useTranslator();
     const [page, setPage] = useState(1);
     const [pageSize, setPageSize] = useState(20);
     const [searchString, setSearchString] = useState("");
@@ -93,13 +97,14 @@ function createPostList({
       customControlFields,
       usableFields
     );
-    const { data, isFetching } = useQuery(
+    const { data, isFetching, isError, isSuccess, refetch } = useQuery(
       () => postFindListCardsAction({
         locale: defaultWebLocale,
+        ...isDeleted ? { deletion: "deleted" } : {},
         searchString,
         ...type ? { type } : {},
         ...activeControlFieldFilters,
-        topicId,
+        topicKey,
         authorId,
         postIds,
         excludeIds,
@@ -109,29 +114,58 @@ function createPostList({
       [
         "postFindListCardsAction",
         defaultWebLocale,
+        isDeleted,
         searchString,
         type,
         JSON.stringify(activeControlFieldFilters),
-        topicId,
+        topicKey,
         authorId,
         normalizeUnorderedCacheKey(postIds),
         normalizeUnorderedCacheKey(excludeIds),
         page,
         pageSize
       ],
-      { enabled: enabled && topicId !== DO_NOT_FETCH_KEY }
+      { enabled: enabled && topicKey !== DO_NOT_FETCH_KEY }
     );
     const posts = useMemo(() => ensureArray(data?.items), [data?.items]);
+    const lastPage = Math.max(1, Math.ceil((data?.total ?? 0) / pageSize));
+    if (isSuccess && !isFetching && page > lastPage) setPage(lastPage);
     useEffect(() => {
       setListItemStates?.({
         items: posts,
-        count: data?.total ?? 0,
-        isFetching
+        ...isSuccess && data ? { count: data.total } : {},
+        isError,
+        isFetching,
+        refetch
       });
-    }, [isFetching, data?.total, posts, setListItemStates]);
+    }, [
+      isFetching,
+      isError,
+      isSuccess,
+      data,
+      posts,
+      refetch,
+      setListItemStates
+    ]);
     useEffect(() => {
       onLoadingChange?.(isFetching);
     }, [onLoadingChange, isFetching]);
+    if (isError) {
+      return /* @__PURE__ */ jsxs("div", { role: "alert", className: "flex flex-col items-start gap-3", children: [
+        /* @__PURE__ */ jsx("p", { children: t("ui.operation-error.unknown.text") }),
+        /* @__PURE__ */ jsx(
+          ActionButton,
+          {
+            isLoading: isFetching,
+            isDisabled: isFetching,
+            onClick: () => {
+              void refetch();
+            },
+            children: t("ui.retry.text")
+          }
+        )
+      ] });
+    }
     return /* @__PURE__ */ jsx(
       ListContainer,
       {
@@ -162,6 +196,8 @@ function createPostList({
               Card,
               {
                 post,
+                customControlFields,
+                usableFields,
                 openNewTab,
                 isPicked,
                 onSelect: handleClick ? () => handleClick(post) : void 0,
@@ -173,7 +209,10 @@ function createPostList({
           table: /* @__PURE__ */ jsx(
             Table,
             {
+              topics,
               posts,
+              customControlFields,
+              usableFields,
               pickedItems,
               onSelect: handleClick,
               openNewTab,

package/dist/src/cms/client/interfaces/components/resources/post/post-state-icons.js

@@ -1,4 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { useTranslator } from 'intor/react';
 import { Eye, EyeOff, MapPinCheckInside, Star, House } from 'lucide-react';
 import 'mime-types';
 import 'sitero-domain';
@@ -7,12 +8,33 @@ import 'ua-parser-js';
 import '../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
 import { cn } from '../../../../../../shared/utils/cn.js';
+import { resolveControlFieldLabel } from './content/resolve-control-field-label.js';
 
-function PostStateIcons({ post }) {
+function PostStateIcons({
+  post,
+  customControlFields = [],
+  usableFields
+}) {
+  const enabled = (field) => !usableFields || usableFields.includes(field);
+  const { t, locale } = useTranslator();
   const { isActive, isSlugActive, index, isFeatured, isShownOnHome } = post;
   return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-    isActive ? /* @__PURE__ */ jsx(Eye, { className: "size-4" }) : /* @__PURE__ */ jsx(EyeOff, { className: "text-destructive size-4" }),
-    index !== void 0 && /* @__PURE__ */ jsx(
+    enabled("isActive") && (isActive ? /* @__PURE__ */ jsx(
+      Eye,
+      {
+        className: "size-4",
+        role: "img",
+        "aria-label": t("resources.post.published.text")
+      }
+    ) : /* @__PURE__ */ jsx(
+      EyeOff,
+      {
+        className: "text-destructive size-4",
+        role: "img",
+        "aria-label": t("resources.post.unpublished.text")
+      }
+    )),
+    enabled("isIndexActive") && index !== void 0 && /* @__PURE__ */ jsx(
       "p",
       {
         className: cn(
@@ -22,14 +44,23 @@ function PostStateIcons({ post }) {
         children: index ?? 0
       }
     ),
-    isSlugActive !== void 0 && /* @__PURE__ */ jsx(
+    enabled("isSlugActive") && isSlugActive !== void 0 && /* @__PURE__ */ jsx(
       MapPinCheckInside,
       {
         className: cn("size-4", !isSlugActive && "opacity-10")
       }
     ),
-    isFeatured !== void 0 && /* @__PURE__ */ jsx(Star, { className: cn("size-4", !isFeatured && "opacity-10") }),
-    isShownOnHome !== void 0 && /* @__PURE__ */ jsx(House, { className: cn("size-4", !isShownOnHome && "opacity-10") })
+    enabled("isFeatured") && isFeatured !== void 0 && /* @__PURE__ */ jsx(Star, { className: cn("size-4", !isFeatured && "opacity-10") }),
+    enabled("isShownOnHome") && isShownOnHome !== void 0 && /* @__PURE__ */ jsx(House, { className: cn("size-4", !isShownOnHome && "opacity-10") }),
+    customControlFields.filter(({ key }) => enabled(key) && post[key] !== void 0).map(({ key, icon: Icon, label }) => /* @__PURE__ */ jsx(
+      Icon,
+      {
+        role: "img",
+        "aria-label": resolveControlFieldLabel(label, locale),
+        className: cn("size-4", !post[key] && "opacity-10")
+      },
+      key
+    ))
   ] });
 }
 

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

@@ -45,8 +45,11 @@ import { resolvePostPresentation } from './post-presentation.js';
 import { PostStateIcons } from './post-state-icons.js';
 
 function PostTable({
+  topics = {},
   posts,
   contentLocale,
+  customControlFields,
+  usableFields,
   strategies,
   pickedItems,
   onSelect,
@@ -64,14 +67,17 @@ function PostTable({
       /* @__PURE__ */ jsx(TableHead, { children: t("resources.post.excerpt.text") })
     ] }) }),
     /* @__PURE__ */ jsx(TableBody, { children: posts.map((post) => {
-      const topic = post.topic;
-      const topicT = findTranslation(topic?.translations, contentLocale);
+      const topicT = {
+        title: topics[post.topicKey ?? ""]?.title[contentLocale] ?? post.topicKey ?? ""
+      };
       const isPicked = !!pickedItems?.some((item) => item.id === post.id);
       const postT = findTranslation(post.translations, contentLocale);
-      const strategy = strategies?.[post.type]?.[topic?.slug ?? ""] ?? {};
+      const strategy = strategies?.[post.type]?.[post.topicKey ?? ""] ?? {};
       const presentation = resolvePostPresentation(postT, strategy);
       const href = joinUrl(
-        CMS_PATHS.content["content-management"].post.pathname(topic?.slug),
+        CMS_PATHS.content["content-management"].post.pathname(
+          post.topicKey ?? void 0
+        ),
         post?.id
       );
       const title = presentation.title;
@@ -110,7 +116,14 @@ function PostTable({
             isSelecting && /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx("div", { className: "flex-center text-muted-foreground/60", children: isPicked ? /* @__PURE__ */ jsx(Tick, { isPicked: true }) : /* @__PURE__ */ jsx(Circle, { "aria-hidden": true, className: "size-5!" }) }) }),
             /* @__PURE__ */ jsx(TableCell, { className: "border-r", children: /* @__PURE__ */ jsx("div", { className: "flex-center", children: /* @__PURE__ */ jsx(File, { className: "text-muted-foreground" }) }) }),
             /* @__PURE__ */ jsx(TableCell, { className: "w-40", children: /* @__PURE__ */ jsx(Badge, { className: "h-5.5 w-fit max-w-32 min-w-0 px-3", children: topicT.title }) }),
-            /* @__PURE__ */ jsx(TableCell, { className: "w-40", children: /* @__PURE__ */ jsx(PostStateIcons, { post }) }),
+            /* @__PURE__ */ jsx(TableCell, { className: "w-40", children: /* @__PURE__ */ jsx(
+              PostStateIcons,
+              {
+                post,
+                customControlFields,
+                usableFields
+              }
+            ) }),
             /* @__PURE__ */ jsx(TableCell, { className: "max-w-[200px]", children: title ? /* @__PURE__ */ jsx("p", { className: "truncate", children: title }) : /* @__PURE__ */ jsx(NoData, {}) }),
             /* @__PURE__ */ jsx(TableCell, { className: "max-w-[320px]", children: presentation.excerpt ? /* @__PURE__ */ jsx(
               TextDisplay,

package/dist/src/cms/client/interfaces/components/resources/post/search/control-fields-filters.js

@@ -7,7 +7,7 @@ import { resolveControlFieldLabel } from '../content/resolve-control-field-label
 const CONTROL_FIELDS = [
   {
     key: "isActive",
-    label: "ui.control-fields.is-active.text",
+    label: "resources.post.is-public.text",
     icon: Eye
   },
   {
@@ -47,6 +47,10 @@ function ControlFieldsFilters({
         value: controlFields[key] ?? null,
         onChange: (value) => setControlFields((previous) => ({ ...previous, [key]: value })),
         label: t(label),
+        ...key === "isActive" ? {
+          trueLabel: t("resources.post.published.text"),
+          falseLabel: t("resources.post.unpublished.text")
+        } : {},
         icon: Icon
       },
       key

package/dist/src/cms/client/interfaces/components/resources/post/tag/tag-card.js

@@ -41,10 +41,13 @@ import { PostStateIcons } from '../post-state-icons.js';
 
 const WIDTH = "200px";
 function createTagCard({
-  defaultWebLocale
+  defaultWebLocale,
+  customControlFields: defaultCustomControlFields = []
 }) {
   return function TagCard({
     post: tag,
+    customControlFields = defaultCustomControlFields,
+    usableFields,
     // link
     openNewTab,
     // pick
@@ -63,7 +66,14 @@ function createTagCard({
       {
         interaction: onSelect ? { type: "select", isSelected: !!isPicked, onSelect } : { type: "navigate", href, openNewTab },
         identity: { icon: /* @__PURE__ */ jsx(Tag, {}) },
-        state: /* @__PURE__ */ jsx(PostStateIcons, { post: tag }),
+        state: /* @__PURE__ */ jsx(
+          PostStateIcons,
+          {
+            post: tag,
+            customControlFields,
+            usableFields
+          }
+        ),
         title: tagT.title || /* @__PURE__ */ jsx(NoData, {}),
         className,
         style: { width: WIDTH }

package/dist/src/cms/client/interfaces/components/resources/post/tag/tag-table.js

@@ -43,6 +43,8 @@ import { PostStateIcons } from '../post-state-icons.js';
 function TagTable({
   posts: tags,
   contentLocale,
+  customControlFields,
+  usableFields,
   pickedItems,
   onSelect,
   openNewTab
@@ -98,7 +100,14 @@ function TagTable({
           children: [
             isSelecting && /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx("div", { className: "flex-center text-muted-foreground/60", children: isPicked ? /* @__PURE__ */ jsx(Tick, { isPicked: true }) : /* @__PURE__ */ jsx(Circle, { "aria-hidden": true, className: "size-5!" }) }) }),
             /* @__PURE__ */ jsx(TableCell, { className: "border-r", children: /* @__PURE__ */ jsx("div", { className: "flex-center", children: /* @__PURE__ */ jsx(Tag, { className: "text-muted-foreground" }) }) }),
-            /* @__PURE__ */ jsx(TableCell, { className: "w-40", children: /* @__PURE__ */ jsx(PostStateIcons, { post: tag }) }),
+            /* @__PURE__ */ jsx(TableCell, { className: "w-40", children: /* @__PURE__ */ jsx(
+              PostStateIcons,
+              {
+                post: tag,
+                customControlFields,
+                usableFields
+              }
+            ) }),
             /* @__PURE__ */ jsx(TableCell, { className: "max-w-[200px]", children: title ? /* @__PURE__ */ jsx("p", { className: "truncate", children: title }) : /* @__PURE__ */ jsx(NoData, {}) })
           ]
         },