@c-rex/templates 0.1.7 → 0.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c-rex/templates",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "type": "module",
   "files": [
     "src"
@@ -10,29 +10,37 @@
     "access": "public"
   },
   "exports": {
-    "./home/layout": {
-      "types": "./src/home/layout.tsx",
-      "import": "./src/home/layout.tsx"
+    "./doc/home/layout": {
+      "types": "./src/doc/home/layout.tsx",
+      "import": "./src/doc/home/layout.tsx"
     },
-    "./home/page": {
-      "types": "./src/home/page.tsx",
-      "import": "./src/home/page.tsx"
+    "./doc/home/page": {
+      "types": "./src/doc/home/page.tsx",
+      "import": "./src/doc/home/page.tsx"
     },
-    "./articles/topics/page": {
-      "types": "./src/articles/topics/page.tsx",
-      "import": "./src/articles/topics/page.tsx"
+    "./doc/articles/topics": {
+      "types": "./src/doc/articles/topics.tsx",
+      "import": "./src/doc/articles/topics.tsx"
     },
-    "./articles/blog/page": {
-      "types": "./src/articles/blog/page.tsx",
-      "import": "./src/articles/blog/page.tsx"
-    },
-    "./articles/documents/page": {
-      "types": "./src/articles/documents/page.tsx",
-      "import": "./src/articles/documents/page.tsx"
+    "./doc/articles/documents": {
+      "types": "./src/doc/articles/documents.tsx",
+      "import": "./src/doc/articles/documents.tsx"
     },
     "./layout": {
       "types": "./src/layout.tsx",
       "import": "./src/layout.tsx"
+    },
+    "./blog/article": {
+      "types": "./src/blog/article/page.tsx",
+      "import": "./src/blog/article/page.tsx"
+    },
+    "./blog/home/page": {
+      "types": "./src/blog/home/page.tsx",
+      "import": "./src/blog/home/page.tsx"
+    },
+    "./blog/home/layout": {
+      "types": "./src/blog/home/layout.tsx",
+      "import": "./src/blog/home/layout.tsx"
     }
   },
   "scripts": {

package/src/{articles/blog → blog/article}/page.tsx

@@ -1,4 +1,4 @@
-import { extractHtmlContent, getInfoWithCache, getPrimaryInfo } from "../utils";
+import { extractHtmlContent, getInfoWithCache, getPrimaryInfo } from "./utils";
 import { BLOG_TYPE_AND_LINK } from "@c-rex/constants";
 import { PageWrapper } from "@c-rex/components/page-wrapper";
 import { Metadata } from "next";
@@ -30,23 +30,23 @@ export const generateMetadata = async (
 }
 
 export const BlogPageTemplate = async ({ params }: { params: { id: string } }) => {
-    const { htmlContent, lang, availableVersions } = await getInfoWithCache(params.id, BLOG_TYPE_AND_LINK, infoCache);
+    const { htmlContent, articleLang, availableVersions } = await getInfoWithCache(params.id, BLOG_TYPE_AND_LINK, infoCache);
     const { articleHtml } = extractHtmlContent(htmlContent)
 
     return (
-        <PageWrapper title="">
+        <PageWrapper title="" pageType="BLOG">
             <SidebarProvider>
 
                 <CheckArticleLangToast availableVersions={availableVersions} />
 
                 <AppSidebar
-                    lang={lang}
+                    lang={articleLang}
                     data={[]}
                     availableVersions={availableVersions}
                 />
                 <SidebarInset>
                     <div className="container flex flex-col">
-                        <RenderArticle htmlContent={articleHtml} contentLang={lang} />
+                        <RenderArticle htmlContent={articleHtml} contentLang={articleLang} />
                     </div>
                 </SidebarInset>
             </SidebarProvider>

package/src/{articles → blog/article}/utils.ts

@@ -1,6 +1,6 @@
 import { DirectoryNodesService, InformationUnitsService, RenditionsService } from "@c-rex/services";
 import { DOCUMENTS_TYPE_AND_LINK, TOPICS_TYPE_AND_LINK } from "@c-rex/constants";
-import { DirectoryNodes, SidebarAvailableVersionsInterface } from "@c-rex/interfaces";
+import { DirectoryNodes, informationUnitsResponseItem, SidebarAvailableVersionsInterface } from "@c-rex/interfaces";
 import * as cheerio from 'cheerio'
 import { BLOG_TYPE_AND_LINK } from "@c-rex/constants";
 
@@ -13,7 +13,9 @@ import { BLOG_TYPE_AND_LINK } from "@c-rex/constants";
 export const getPrimaryInfo = async (id: string, type: string): Promise<{
     htmlContent: string,
     title: string,
-    lang: string,
+    articleLang: string,
+    packageId: string,
+    documentLang: string,
     availableVersions: SidebarAvailableVersionsInterface[]
 }> => {
     const renditionService = new RenditionsService();
@@ -21,25 +23,28 @@ export const getPrimaryInfo = async (id: string, type: string): Promise<{
     const informationUnitsItem = await informationService.getItem({ id });
 
     let title = informationUnitsItem.labels[0]?.value
-    const lang = informationUnitsItem.languages[0];
     const versionOf = informationUnitsItem.versionOf.shortId
+    let documentLang = ""
+    const articleLang = informationUnitsItem.languages[0];
 
-    const [versions, rootNode] = await Promise.all([
+    const promiseList: any = [
         informationService.getList({
-            filters: [`versionOf.shortId=${versionOf}`],
+            restrict: [`versionOf.shortId=${versionOf}`],
             fields: ["renditions", "class", "languages", "labels"],
         }),
-        getRootNode(informationUnitsItem.directoryNodes),
-    ])
+    ]
 
-    let htmlContent = ""
+    const rootNode = await getRootNode(informationUnitsItem.directoryNodes)
 
     if (rootNode != null) {
         title = rootNode.informationUnits[0]?.labels[0]?.value;
+        documentLang = rootNode.informationUnits[0]?.labels[0]?.language as string;
     }
 
     if ([TOPICS_TYPE_AND_LINK, BLOG_TYPE_AND_LINK].includes(type)) {
-        htmlContent = await renditionService.getHTMLRendition({ renditions: informationUnitsItem.renditions });
+        promiseList.push(
+            renditionService.getHTMLRendition({ renditions: informationUnitsItem.renditions })
+        )
 
     } else if (rootNode != null && type == DOCUMENTS_TYPE_AND_LINK) {
 
@@ -48,33 +53,39 @@ export const getPrimaryInfo = async (id: string, type: string): Promise<{
         const directoryId = rootNode.childNodes[0]?.shortId as string;
 
         const response = await service.getItem(directoryId);
+
         const infoId = response.informationUnits[0]?.shortId;
 
         const childInformationUnit = await informationService.getItem({ id: infoId as string });
 
-        htmlContent = await renditionService.getHTMLRendition({ renditions: childInformationUnit.renditions });
+        promiseList.push(
+            renditionService.getHTMLRendition({ renditions: childInformationUnit.renditions })
+        )
     }
 
-    const availableVersions = versions.items.map((item) => {
+    const [versions, htmlContent] = await Promise.all(promiseList)
+
+    const availableVersions = versions.items.map((item: informationUnitsResponseItem) => {
         return {
             shortId: item.shortId,
             link: `/${type}/${item.shortId}`,
             lang: item.language,
             country: item.language.split("-")[1],
-            active: item.language === lang,
+            active: item.language === articleLang,
         }
-    }).sort((a, b) => {
+    }).sort((a: SidebarAvailableVersionsInterface, b: SidebarAvailableVersionsInterface) => {
         if (a.lang < b.lang) return -1;
         if (a.lang > b.lang) return 1;
         return 0;
-    })
-        .filter(item => item.lang.toLocaleLowerCase() !== "pl-pl") as SidebarAvailableVersionsInterface[];
+    }) as SidebarAvailableVersionsInterface[];
 
     return {
         htmlContent,
+        packageId: informationUnitsItem.packages[0]?.shortId as string,
         title: title as string,
-        lang: lang as string,
-        availableVersions
+        articleLang: articleLang as string,
+        documentLang: documentLang as string,
+        availableVersions,
     }
 }
 

package/src/blog/home/layout.tsx

@@ -0,0 +1,59 @@
+import { informationUnitsResponse } from "@c-rex/interfaces";
+import { InformationUnitsService } from "@c-rex/services";
+import { HomePage } from "./page";
+import { PageWrapper } from "@c-rex/components/page-wrapper";
+import { WildCardType } from "@c-rex/types";
+
+interface HomeProps {
+    searchParams: {
+        search?: string;
+        page: string;
+        language: string;
+        wildcard: string;
+        operator: string;
+        like: string;
+        packages?: string;
+        filter?: string;
+    };
+}
+
+export const HomeLayout = async ({ searchParams }: HomeProps) => {
+    const { search, page, language, wildcard, operator, like, packages, filter } = searchParams;
+
+    let data = {
+        items: [],
+        pageInfo: {
+            pageCount: 0,
+            pageNumber: 0
+        }
+    } as unknown as informationUnitsResponse;
+
+    if (search !== undefined) {
+
+        const filters: string[] = filter?.split(",") || []
+        const restrict: string[] = []
+
+        if (packages && packages.length > 0) {
+            restrict.push(`packages.shortId=${packages}`)
+        }
+        const service = new InformationUnitsService();
+
+        data = await service.getList({
+            queries: search,
+            page: Number(page),
+            fields: ["renditions", "class", "languages", "labels"],
+            languages: language.split(","),
+            wildcard: wildcard as WildCardType,
+            restrict: restrict,
+            operator: operator,
+            like: Boolean(like === "true"),
+            filters: filters
+        });
+    }
+
+    return (
+        <PageWrapper title="" pageType="HOME">
+            <HomePage data={data} />
+        </PageWrapper>
+    );
+};

package/src/blog/home/page.tsx

@@ -0,0 +1,323 @@
+"use client";
+
+import React, { FC, useEffect, useState } from "react";
+import { Trash2, X } from "lucide-react"
+import { useTranslations } from 'next-intl'
+import { parseAsBoolean, parseAsInteger, parseAsString, useQueryStates } from 'nuqs'
+import { informationUnitsResponse } from "@c-rex/interfaces";
+import { Button } from "@c-rex/ui/button";
+import { Badge } from "@c-rex/ui/badge";
+import {
+    SidebarContent,
+    SidebarGroup,
+    SidebarGroupContent,
+    SidebarGroupLabel,
+    SidebarHeader,
+    SidebarMenu,
+    SidebarMenuSub,
+    SidebarMenuSubButton,
+    SidebarMenuSubItem
+} from "@c-rex/ui/sidebar";
+import { ResultList } from "@c-rex/components/result-list";
+import { DialogFilter } from "@c-rex/components/dialog-filter";
+import { useAppConfig } from "@c-rex/contexts/config-provider";
+import { AutoComplete } from "@c-rex/components/autocomplete";
+import { OPERATOR_OPTIONS, WILD_CARD_OPTIONS } from "@c-rex/constants";
+import { Loading } from "@c-rex/components/loading";
+
+interface HomePageProps {
+    data: informationUnitsResponse;
+}
+
+type filterModel = {
+    key: string
+    name?: string
+    value: string
+    default?: string | boolean | null
+    removable: boolean
+}
+
+export const HomePage: FC<HomePageProps> = ({ data }) => {
+    const t = useTranslations();
+    const { configs } = useAppConfig()
+
+    const [tags, setTags] = useState<{ [key: string]: any[] }>(data.tags || {});
+    const [filters, setFilters] = useState<filterModel[] | null>(null)
+    const [disabled, setDisabled] = useState<boolean>(false)
+    const [loading, setLoading] = useState<boolean>(true)
+    const [params, setParams] = useQueryStates({
+        language: parseAsString,
+        page: parseAsInteger,
+        wildcard: parseAsString,
+        operator: parseAsString,
+        packages: parseAsString,
+        filter: parseAsString,
+        like: parseAsBoolean,
+        search: {
+            defaultValue: "",
+            parse(value) {
+                return value
+            },
+        },
+    }, {
+        history: 'push',
+        shallow: false,
+    });
+
+    useEffect(() => {
+        if (params.search.length > 0) {
+            setDisabled(false)
+            generateFiltersObj()
+        } else {
+            setDisabled(true)
+            setFilters(null)
+        }
+    }, [params])
+
+    useEffect(() => {
+        const newTags = { ...data.tags }
+
+        if (params.filter !== null) {
+            const splittedParam = params.filter.split(",")
+
+            splittedParam.forEach((item) => {
+                const aux = item.split(".shortId=")
+                const name = aux[0]
+                const shortId = aux[1]
+
+                if (!newTags[name]) {
+                    newTags[name] = []
+                }
+
+                newTags[name].forEach((el) => {
+                    if (el.shortId == shortId) {
+                        el.active = true
+                    } else {
+                        el.active = false
+                    }
+                })
+            })
+        }
+
+        if (params.packages !== null && newTags["packages"]) {
+            newTags["packages"].forEach((el) => {
+                if (el.shortId == params.packages) {
+                    el.active = true
+                } else {
+                    el.active = false
+                }
+            })
+        }
+
+        setTags(newTags)
+        setLoading(false)
+    }, [data])
+
+    const generateFiltersObj = () => {
+        const filters: filterModel[] = [{
+            key: "operator",
+            name: t("filter.operator"),
+            value: `${params?.operator !== OPERATOR_OPTIONS.OR}`,
+            default: OPERATOR_OPTIONS.OR,
+            removable: params?.operator !== OPERATOR_OPTIONS.OR
+        }, {
+            key: "like",
+            name: t("filter.like"),
+            value: `${params.like}`,
+            default: false,
+            removable: params?.like as boolean
+        }, {
+            key: "wildcard",
+            value: params.wildcard as string,
+            default: WILD_CARD_OPTIONS.NONE,
+            removable: params?.wildcard !== WILD_CARD_OPTIONS.NONE
+        }]
+
+        const languages = params.language?.split(",")
+        languages?.forEach((item) => {
+            const aux = languages?.filter(langItem => langItem !== item)
+            filters.push({ key: "language", value: item, removable: languages.length > 1, default: aux.join(",") })
+        })
+
+        if (params.filter !== null) {
+            const splittedParam = params.filter.split(",")
+
+            splittedParam.forEach((item, index) => {
+                const aux = item.split(".shortId=")
+                const name = aux[0]
+                const shortId = aux[1]
+
+                const defaultValue = [...splittedParam]
+                defaultValue.splice(index, 1)
+
+                if (!tags[name]) return;
+
+                const tag = tags[name].find(el => el.shortId === shortId)
+                if (!tag) return;
+
+                const value = defaultValue.length == 0 ? null : defaultValue.join(",")
+
+                filters.push({ key: "filter", name: t(`filter.tags.${name}`), value: tag.label, removable: true, default: value })
+            })
+        }
+
+        if (params.packages !== null && tags["packages"]) {
+            const packageTag = tags["packages"]?.find(el => el.shortId === params.packages)
+            filters.push({
+                key: "packages",
+                name: t("filter.tags.packages"),
+                value: packageTag.label,
+                removable: true,
+                default: null
+            })
+        }
+
+        Object.keys(params)
+            .filter(item => !["page", "search", "language", "operator", "like", "wildcard", "filter", "packages"].includes(item))
+            .filter(item => params[item] != null)
+            .forEach(item => {
+                filters.push({ key: item, value: params[item], removable: true, default: null })
+            })
+
+        setFilters(filters)
+    }
+
+    const updateFilterParam = (key: string, item: any) => {
+        setLoading(true)
+        if (key === "packages") {
+            setParams({ packages: item.shortId })
+            return;
+        } else {
+            const value = `${key}.shortId=${item.shortId}`
+            let aux = value
+
+            if (params.filter != null) {
+                const splittedParam = params.filter.split(",")
+                const finalValue = [...splittedParam]
+
+                const hasParams = params.filter.includes(key)
+
+                if (hasParams) {
+                    let mainIndex = -1
+
+                    splittedParam.forEach((el, index) => {
+                        if (el.includes(key)) {
+                            mainIndex = index
+                        }
+                    })
+                    finalValue[mainIndex] = value
+                } else {
+                    finalValue.push(value)
+                }
+
+                aux = finalValue.join(",")
+            }
+
+            setParams({ filter: aux })
+        }
+    };
+
+    return (
+        <div className="container">
+            {loading && <Loading opacity={true} />}
+
+            <div className="grid grid-cols-12 gap-4 py-6">
+                <div className="col-span-12 sm:col-span-10 md:col-span-10">
+                    <AutoComplete
+                        embedded={false}
+                        initialValue={params.search}
+                        searchByPackage={false}
+                    />
+                </div>
+                <div className="col-span-12 sm:col-span-2 md:col-span-2">
+                    <div className="flex justify-end">
+                        <DialogFilter
+                            setLoading={setLoading}
+                            trigger={(
+                                <Button variant="default" disabled={disabled}>{t("filter.filters")}</Button>
+                            )}
+                        />
+                    </div>
+                </div>
+            </div>
+
+            {filters != null && filters.length > 0 && (
+                <div className="pb-4 flex justify-between">
+                    <div>
+
+                        {filters?.map((item) => (
+                            <Badge key={`${item.key}-${item?.value}`} variant="outline" className="mr-2 mb-2 h-6">
+                                {item?.name ? item.name : item.key}: {item.value}
+                                {item.removable && (
+                                    <Button size="xs" variant="ghost" onClick={() => {
+                                        setLoading(true)
+                                        setParams({ [item.key]: item?.default })
+                                    }}>
+                                        <X className="h-2" />
+                                    </Button>
+                                )}
+                            </Badge>
+                        ))}
+
+                    </div>
+                    <Button
+                        size="sm"
+                        variant="outline"
+                        disabled={params.filter === null}
+                        onClick={() => {
+                            setLoading(true)
+                            setParams({ filter: null, packages: null })
+                        }}
+                    >
+                        {t("filter.clearFilters")}
+                        <Trash2 className="h-2" />
+                    </Button>
+                </div>
+            )}
+
+            <div className="flex flex-row gap-6 pb-6">
+                {data.items.length > 0 && (
+                    <div className="w-80 bg-sidebar rounded-md border pb-4">
+                        <SidebarHeader className="text-center font-bold">
+                            Search Filters
+                        </SidebarHeader>
+                        <SidebarContent>
+                            {Object.entries(tags).map(([key, value]: any) => (
+                                <SidebarGroup key={key} className="py-0">
+                                    <SidebarGroupLabel>
+                                        {t(`filter.tags.${key}`)}
+                                    </SidebarGroupLabel>
+                                    <SidebarGroupContent>
+                                        <SidebarMenu>
+                                            <SidebarMenuSub>
+                                                {value.map(item => (
+                                                    <SidebarMenuSubItem key={item.shortId}>
+                                                        <SidebarMenuSubButton
+                                                            className="cursor-pointer"
+                                                            isActive={item.active}
+                                                            onClick={() => updateFilterParam(key, item)}
+                                                        >
+                                                            {item.label} ({item.hits}/{item.total})
+                                                        </SidebarMenuSubButton>
+                                                    </SidebarMenuSubItem>
+                                                ))}
+                                            </SidebarMenuSub>
+                                        </SidebarMenu>
+                                    </SidebarGroupContent>
+                                </SidebarGroup>
+                            ))}
+                        </SidebarContent>
+                    </div>
+                )}
+
+                <div className="flex-1">
+                    <ResultList
+                        configs={configs}
+                        items={data.items}
+                        pagination={data.pageInfo}
+                    />
+                </div>
+            </div>
+        </div>
+    );
+};

package/src/doc/articles/documents.tsx

@@ -0,0 +1,38 @@
+import { getInfoWithCache, getPrimaryInfo } from "./utils";
+import { ArticleWrapper } from "./wrapper";
+import { PageWrapper } from "@c-rex/components/page-wrapper";
+import { DOCUMENTS_TYPE_AND_LINK } from "@c-rex/constants";
+
+const infoCache = new Map<string, Awaited<ReturnType<typeof getPrimaryInfo>>>();
+
+export const DocumentsPageTemplate = async ({ params }: { params: { id: string } }) => {
+    /*
+    const {
+        htmlContent,
+        title,
+        articleLang,
+        availableVersions,
+        documentLang,
+        packageId
+    } = await getInfoWithCache(params.id, DOCUMENTS_TYPE_AND_LINK, infoCache);
+    */
+
+
+
+    const { htmlContent, title, availableVersions, packageId, articleLang, documentLang } = await getPrimaryInfo(params.id, DOCUMENTS_TYPE_AND_LINK);
+
+    return (
+        <PageWrapper title={title} pageType="DOC">
+            <ArticleWrapper
+                packageId={packageId}
+                title={title}
+                availableVersions={availableVersions}
+                htmlContent={htmlContent}
+                articleLang={articleLang}
+                documentLang={documentLang}
+                id={params.id}
+                type={DOCUMENTS_TYPE_AND_LINK}
+            />
+        </PageWrapper>
+    );
+};

package/src/{articles/topics/page.tsx → doc/articles/topics.tsx}

@@ -1,7 +1,7 @@
 import React from "react";
-import { extractHtmlContent, getInfoWithCache, getPrimaryInfo } from "../utils";
+import { extractHtmlContent, getInfoWithCache, getPrimaryInfo } from "./utils";
 import { TOPICS_TYPE_AND_LINK } from "@c-rex/constants";
-import { ArticleWrapper } from "../wrapper";
+import { ArticleWrapper } from "./wrapper";
 import { PageWrapper } from "@c-rex/components/page-wrapper";
 import { Metadata } from "next";
 
@@ -30,17 +30,21 @@ export const TopicsPageTemplate = async ({ params }: { params: { id: string } })
     const {
         htmlContent,
         title,
-        lang,
-        availableVersions
+        availableVersions,
+        packageId,
+        articleLang,
+        documentLang
     } = await getInfoWithCache(params.id, TOPICS_TYPE_AND_LINK, infoCache);
 
     const { articleHtml } = extractHtmlContent(htmlContent)
 
     return (
-        <PageWrapper title={title}>
+        <PageWrapper title={title} pageType="DOC">
             <ArticleWrapper
                 title={title}
-                lang={lang}
+                documentLang={documentLang}
+                articleLang={articleLang}
+                packageId={packageId}
                 availableVersions={availableVersions}
                 htmlContent={articleHtml}
                 id={params.id}