@c-rex/templates 0.1.7 → 0.1.9

package/src/doc/articles/utils.ts

@@ -0,0 +1,142 @@
+import { DirectoryNodesService, InformationUnitsService, RenditionsService } from "@c-rex/services";
+import { DOCUMENTS_TYPE_AND_LINK, TOPICS_TYPE_AND_LINK } from "@c-rex/constants";
+import { DirectoryNodes, informationUnitsResponseItem, SidebarAvailableVersionsInterface } from "@c-rex/interfaces";
+import * as cheerio from 'cheerio'
+import { BLOG_TYPE_AND_LINK } from "@c-rex/constants";
+
+/*
+ * Get primary info for a given information unit
+ * @param id: string
+ * @param type: string
+ * @returns { htmlContent: string, title: string }
+*/
+export const getPrimaryInfo = async (id: string, type: string): Promise<{
+    htmlContent: string,
+    title: string,
+    articleLang: string,
+    packageId: string,
+    documentLang: string,
+    availableVersions: SidebarAvailableVersionsInterface[]
+}> => {
+    const renditionService = new RenditionsService();
+    const informationService = new InformationUnitsService();
+    const informationUnitsItem = await informationService.getItem({ id });
+
+    let title = informationUnitsItem.labels[0]?.value
+    const versionOf = informationUnitsItem.versionOf.shortId
+    let documentLang = ""
+    const articleLang = informationUnitsItem.languages[0];
+
+    const promiseList: any = [
+        informationService.getList({
+            restrict: [`versionOf.shortId=${versionOf}`],
+            fields: ["renditions", "class", "languages", "labels"],
+        }),
+    ]
+
+    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)) {
+        promiseList.push(
+            renditionService.getHTMLRendition({ renditions: informationUnitsItem.renditions })
+        )
+
+    } else if (rootNode != null && type == DOCUMENTS_TYPE_AND_LINK) {
+
+        const service = new DirectoryNodesService();
+
+        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 });
+
+        promiseList.push(
+            renditionService.getHTMLRendition({ renditions: childInformationUnit.renditions })
+        )
+    }
+
+    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 === articleLang,
+        }
+    }).sort((a: SidebarAvailableVersionsInterface, b: SidebarAvailableVersionsInterface) => {
+        if (a.lang < b.lang) return -1;
+        if (a.lang > b.lang) return 1;
+        return 0;
+    }) as SidebarAvailableVersionsInterface[];
+
+    return {
+        htmlContent,
+        packageId: informationUnitsItem.packages[0]?.shortId as string,
+        title: title as string,
+        articleLang: articleLang as string,
+        documentLang: documentLang as string,
+        availableVersions,
+    }
+}
+
+export const getRootNode = async (directoryNodes: DirectoryNodes[]): Promise<DirectoryNodes | null> => {
+    const service = new DirectoryNodesService();
+
+    if (directoryNodes.length == 0 || directoryNodes[0] == undefined) {
+        return null;
+    }
+
+    let id = directoryNodes[0].shortId;
+    let response = await service.getItem(id);
+
+    while (response.parents != undefined) {
+
+        const hasInfo = (response.informationUnits != undefined) && (response.informationUnits[0] != undefined);
+        const hasLabel = (response.labels != undefined) && (response.labels[0] != undefined);
+        const hasParent = (response.parents != undefined) && (response.parents[0] != undefined);
+
+        if (!hasInfo || !hasLabel || !hasParent) {
+            return null;
+        }
+
+        id = response.parents[0]?.shortId as string;
+        response = await service.getItem(id);
+    }
+
+    return response;
+};
+
+export const getInfoWithCache = async (id: string, type: string, infoCache: any): Promise<Awaited<ReturnType<typeof getPrimaryInfo>>> => {
+    if (!infoCache.has(id)) {
+        const info = await getPrimaryInfo(id, type);
+        infoCache.set(id, info);
+    }
+    return infoCache.get(id)!;
+}
+
+export const extractHtmlContent = (htmlString: string) => {
+    const $ = cheerio.load(htmlString)
+
+    const metaTags = $('meta').map((_, el) => {
+        const name = $(el).attr('name')
+        const content = $(el).attr('content')
+        return name && content ? { name, content } : null
+    }).get().filter(Boolean)
+
+    const articleHtml = $('main').html() || ''
+
+    return {
+        metaTags,
+        articleHtml,
+    }
+}

package/src/{articles → doc/articles}/wrapper.tsx

@@ -12,14 +12,17 @@ import { DOCUMENTS_TYPE_AND_LINK, TOPICS_TYPE_AND_LINK } from "@c-rex/constants"
 import { call, generateBreadcrumbItems, generateTreeOfContent, getFileRenditions } from "@c-rex/utils";
 import { DropdownMenu } from "@c-rex/components/dropdown-menu";
 import { FileRenditionType } from "@c-rex/types";
+import { useAppConfig } from "@c-rex/contexts/config-provider";
 
 type Props = {
     htmlContent: string,
     title: string,
     id: string,
     type: string,
-    lang: string,
+    documentLang: string,
+    articleLang: string,
     availableVersions: SidebarAvailableVersionsInterface[],
+    packageId: string,
 }
 
 const loadArticleData = async (id: string, type: string, title: string) => {
@@ -68,10 +71,10 @@ const loadArticleData = async (id: string, type: string, title: string) => {
     }
 };
 
-export const ArticleWrapper = ({ htmlContent, title, id, type, lang, availableVersions }: Props) => {
+export const ArticleWrapper = ({ htmlContent, title, id, type, documentLang, articleLang, availableVersions, packageId }: Props) => {
+    console.log(availableVersions)
+    const { setPackageID, setArticleLang } = useAppConfig()
     const [loading, setLoading] = useState<boolean>(true)
-
-    //set available versions on confgi context so will be possible to get the link when change contant language
     const [breadcrumbItems, setBreadcrumbItems] = useState<TreeOfContent[]>([])
     const [treeOfContent, setTreeOfContent] = useState<TreeOfContent[]>([])
     const [documents, setDocuments] = useState<{
@@ -89,6 +92,9 @@ export const ArticleWrapper = ({ htmlContent, title, id, type, lang, availableVe
     })
 
     useEffect(() => {
+        setPackageID(packageId)
+        setArticleLang(articleLang)
+
         const fetchData = async () => {
             const {
                 treeOfContent,
@@ -112,7 +118,7 @@ export const ArticleWrapper = ({ htmlContent, title, id, type, lang, availableVe
             <CheckArticleLangToast availableVersions={availableVersions} />
 
             <AppSidebar
-                lang={lang}
+                lang={documentLang}
                 data={treeOfContent}
                 availableVersions={availableVersions}
                 loading={loading}
@@ -120,7 +126,7 @@ export const ArticleWrapper = ({ htmlContent, title, id, type, lang, availableVe
             <SidebarInset>
                 <div className="container flex flex-col">
                     <header className="flex h-16 shrink-0 items-center justify-between">
-                        <Breadcrumb items={breadcrumbItems} loading={loading} lang={lang} />
+                        <Breadcrumb items={breadcrumbItems} loading={loading} lang={documentLang} />
 
                         <div className="flex">
                             {documents.filesToDownload.length > 0 && (
@@ -138,7 +144,7 @@ export const ArticleWrapper = ({ htmlContent, title, id, type, lang, availableVe
                         </div>
                     </header>
 
-                    <RenderArticle htmlContent={htmlContent} contentLang={lang} />
+                    <RenderArticle htmlContent={htmlContent} contentLang={articleLang} />
                 </div>
             </SidebarInset>
         </SidebarProvider>

package/src/doc/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/doc/home/page.tsx

@@ -0,0 +1,324 @@
+"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] as string
+                const shortId = aux[1] as string
+
+                if (!Object.keys(newTags).includes(name)) {
+                    newTags[name] = []
+                }
+
+                newTags[name].forEach((el: any) => {
+                    if (el.shortId == shortId) {
+                        el.active = true
+                    } else {
+                        el.active = false
+                    }
+                })
+            })
+        }
+
+        if (params.packages !== null && newTags["packages"]) {
+            newTags["packages"].forEach((el: any) => {
+                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] as string
+                const shortId = aux[1] as string
+
+                const defaultValue = [...splittedParam]
+                defaultValue.splice(index, 1)
+
+                if (!Object.keys(tags).includes(name) || !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))
+            .forEach(item => {
+                if (params[item as keyof typeof params] === null || params[item as keyof typeof params] === undefined) return;
+                const value = params[item as keyof typeof params] as string
+                filters.push({ key: item, value: value, 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: any) => (
+                                                    <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/articles/documents/page.tsx

@@ -1,21 +0,0 @@
-import { getPrimaryInfo } from "../utils";
-import { ArticleWrapper } from "../wrapper";
-import { PageWrapper } from "@c-rex/components/page-wrapper";
-import { DOCUMENTS_TYPE_AND_LINK } from "@c-rex/constants";
-
-export const DocumentsPageTemplate = async ({ params }: { params: { id: string } }) => {
-    const { htmlContent, title, lang, availableVersions } = await getPrimaryInfo(params.id, DOCUMENTS_TYPE_AND_LINK);
-
-    return (
-        <PageWrapper title={title}>
-            <ArticleWrapper
-                title={title}
-                availableVersions={availableVersions}
-                htmlContent={htmlContent}
-                lang={lang}
-                id={params.id}
-                type={DOCUMENTS_TYPE_AND_LINK}
-            />
-        </PageWrapper>
-    );
-};

package/src/home/layout.tsx

@@ -1,56 +0,0 @@
-import React from "react";
-import { informationUnitsResponse } from "@c-rex/interfaces";
-import { InformationUnitsService } from "@c-rex/services";
-import { HomePage } from "./page";
-import { PageWrapper } from "@c-rex/components/page-wrapper";
-
-interface HomeProps {
-    searchParams: {
-        search?: string;
-        page?: string;
-        language?: string;
-    };
-}
-
-export const HomeLayout = async ({ searchParams }: HomeProps) => {
-    const { search, page, language } = searchParams;
-
-    let data = {
-        items: [],
-        pageInfo: {
-            pageCount: 0,
-            pageNumber: 0
-        }
-    } as unknown as informationUnitsResponse;
-    let selectedLanguages: string[] = [];
-
-    if (search !== undefined) {
-        const pageAux = Number(page);
-        const searchValue = search;
-
-        if (language != undefined) {
-            const aux = language;
-            selectedLanguages = aux.split(",");
-        }
-
-        if (searchValue) {
-            const service = new InformationUnitsService();
-
-            data = await service.getList({
-                queries: searchValue.split(" ").join(","),
-                page: pageAux,
-                fields: ["renditions", "class", "languages", "labels"],
-                languages: selectedLanguages
-            });
-        }
-    }
-
-    return (
-        <PageWrapper title="">
-            <HomePage
-                data={data}
-                selectedLanguages={selectedLanguages}
-            />
-        </PageWrapper>
-    );
-};