@c-rex/templates 0.1.7 → 0.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c-rex/templates",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "type": "module",
   "files": [
     "src"

package/src/articles/blog/page.tsx

@@ -34,7 +34,7 @@ export const BlogPageTemplate = async ({ params }: { params: { id: string } }) =
     const { articleHtml } = extractHtmlContent(htmlContent)
 
     return (
-        <PageWrapper title="">
+        <PageWrapper title="" showInput={false}>
             <SidebarProvider>
 
                 <CheckArticleLangToast availableVersions={availableVersions} />

package/src/articles/documents/page.tsx

@@ -4,11 +4,12 @@ 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);
+    const { htmlContent, title, lang, availableVersions, packageId } = await getPrimaryInfo(params.id, DOCUMENTS_TYPE_AND_LINK);
 
     return (
-        <PageWrapper title={title}>
+        <PageWrapper title={title} showInput>
             <ArticleWrapper
+                packageId={packageId}
                 title={title}
                 availableVersions={availableVersions}
                 htmlContent={htmlContent}

package/src/articles/topics/page.tsx

@@ -31,16 +31,18 @@ export const TopicsPageTemplate = async ({ params }: { params: { id: string } })
         htmlContent,
         title,
         lang,
-        availableVersions
+        availableVersions,
+        packageId
     } = await getInfoWithCache(params.id, TOPICS_TYPE_AND_LINK, infoCache);
 
     const { articleHtml } = extractHtmlContent(htmlContent)
 
     return (
-        <PageWrapper title={title}>
+        <PageWrapper title={title} showInput>
             <ArticleWrapper
                 title={title}
                 lang={lang}
+                packageId={packageId}
                 availableVersions={availableVersions}
                 htmlContent={articleHtml}
                 id={params.id}

package/src/articles/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";
 
@@ -14,6 +14,7 @@ export const getPrimaryInfo = async (id: string, type: string): Promise<{
     htmlContent: string,
     title: string,
     lang: string,
+    packageId: string,
     availableVersions: SidebarAvailableVersionsInterface[]
 }> => {
     const renditionService = new RenditionsService();
@@ -24,22 +25,23 @@ export const getPrimaryInfo = async (id: string, type: string): Promise<{
     const lang = informationUnitsItem.languages[0];
     const versionOf = informationUnitsItem.versionOf.shortId
 
-    const [versions, rootNode] = await Promise.all([
+    const promiseList: any = [
         informationService.getList({
-            filters: [`versionOf.shortId=${versionOf}`],
+            restrict: [`versionOf.shortId=${versionOf}`], // TODO: replace from filter to restrict
             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;
     }
 
     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,14 +50,19 @@ 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}`,
@@ -63,15 +70,15 @@ export const getPrimaryInfo = async (id: string, type: string): Promise<{
             country: item.language.split("-")[1],
             active: item.language === lang,
         }
-    }).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

package/src/articles/wrapper.tsx

@@ -12,6 +12,7 @@ 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,
@@ -20,6 +21,7 @@ type Props = {
     type: string,
     lang: string,
     availableVersions: SidebarAvailableVersionsInterface[],
+    packageId: string,
 }
 
 const loadArticleData = async (id: string, type: string, title: string) => {
@@ -68,9 +70,11 @@ 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, lang, availableVersions, packageId }: Props) => {
+    const { setPackageID } = 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[]>([])
@@ -89,6 +93,8 @@ export const ArticleWrapper = ({ htmlContent, title, id, type, lang, availableVe
     })
 
     useEffect(() => {
+        setPackageID(packageId)
+
         const fetchData = async () => {
             const {
                 treeOfContent,

package/src/home/layout.tsx

@@ -1,19 +1,23 @@
-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";
+import { WildCardType } from "@c-rex/types";
 
 interface HomeProps {
     searchParams: {
         search?: string;
-        page?: string;
-        language?: string;
+        page: string;
+        language: string;
+        wildcard: string;
+        operator: string;
+        like: string;
+        package?: string;
     };
 }
 
 export const HomeLayout = async ({ searchParams }: HomeProps) => {
-    const { search, page, language } = searchParams;
+    const { search, page, language, wildcard, operator, like, package: packageParam } = searchParams;
 
     let data = {
         items: [],
@@ -22,35 +26,30 @@ export const HomeLayout = async ({ searchParams }: HomeProps) => {
             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
-            });
+        const filters: string[] = []
+        if (packageParam && packageParam.length > 0) {
+            filters.push(`packages.shortId=${packageParam}`)
         }
+        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,
+            operator: operator,
+            like: Boolean(like === "true"),
+            filters: filters
+        });
     }
 
     return (
-        <PageWrapper title="">
-            <HomePage
-                data={data}
-                selectedLanguages={selectedLanguages}
-            />
+        <PageWrapper title="" showInput={false}>
+            <HomePage data={data} />
         </PageWrapper>
     );
 };

package/src/home/page.tsx

@@ -1,25 +1,25 @@
 "use client";
 
-import React, { FC } from "react";
+import React, { FC, useEffect, useState } from "react";
 import { informationUnitsResponse } from "@c-rex/interfaces";
 import { call, getFromCookieString } from "@c-rex/utils";
 import { Button } from "@c-rex/ui/button";
-import { AutoComplete } from "@c-rex/components/autocomplete";
 import { ResultList } from "@c-rex/components/result-list";
 import { useTranslations } from 'next-intl'
-import { parseAsInteger, parseAsString, useQueryStates } from 'nuqs'
+import { parseAsBoolean, parseAsInteger, parseAsString, useQueryStates } from 'nuqs'
 import { DialogFilter } from "@c-rex/components/dialog-filter";
-import { CONTENT_LANG_KEY } from "@c-rex/constants";
+import { CONTENT_LANG_KEY, WILD_CARD_OPTIONS } from "@c-rex/constants";
 import { useAppConfig } from "@c-rex/contexts/config-provider";
+import { AutoComplete } from "@c-rex/components/autocomplete";
 
 interface HomePageProps {
     data: informationUnitsResponse;
-    selectedLanguages: string[];
 }
 
-export const HomePage: FC<HomePageProps> = ({ data, selectedLanguages }) => {
-    const { configs, availableLanguagesAndCountries: availableLanguages, contentLang } = useAppConfig()
+export const HomePage: FC<HomePageProps> = ({ data }) => {
     const t = useTranslations();
+    const { configs } = useAppConfig()
+    const [disabled, setDisabled] = useState<boolean>(false)
     const [params, setParams] = useQueryStates({
         search: {
             defaultValue: "",
@@ -27,50 +27,34 @@ export const HomePage: FC<HomePageProps> = ({ data, selectedLanguages }) => {
                 return value
             },
         },
-        operator: parseAsString,
-        language: parseAsString,
-        page: parseAsInteger,
     }, {
         history: 'push',
         shallow: false,
     });
 
-    const { search } = params;
-
-    const onSearch = (value: string): Promise<string[]> => {
-        return call<string[]>("InformationUnitsService.getSuggestions", { query: value, language: contentLang });
-    }
-
-    const onSelect = (value: string) => {
-        //show loading
-
-        const cookie = getFromCookieString(document.cookie, CONTENT_LANG_KEY)
-
-        setParams({
-            search: value,
-            operator: "OR",
-            page: 1,
-            language: cookie,
-        });
-    };
+    useEffect(() => {
+        if (params.search.length > 0) {
+            setDisabled(false)
+        } else {
+            setDisabled(true)
+        }
+    }, [params])
 
     return (
         <div className="container">
             <div className="grid grid-cols-12 gap-4 py-6">
-                <div className="col-span-12 sm:col-span-9 md:col-span-10">
+                <div className="col-span-12 sm:col-span-10 md:col-span-10">
                     <AutoComplete
-                        initialValue={search}
-                        onSearch={onSearch}
-                        onSelect={onSelect}
+                        embedded={false}
+                        initialValue={params.search}
+                        searchByPackage={false}
                     />
                 </div>
-                <div className="col-span-12 sm:col-span-3 md:col-span-2">
+                <div className="col-span-12 sm:col-span-2 md:col-span-2">
                     <div className="flex justify-end">
                         <DialogFilter
-                            startSelectedLanguages={selectedLanguages}
-                            availableLanguages={availableLanguages}
                             trigger={(
-                                <Button variant="default">{t("filters")}</Button>
+                                <Button variant="default" disabled={disabled}>{t("filter.filters")}</Button>
                             )}
                         />
                     </div>