@c-rex/templates 0.0.4 → 0.0.6

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@c-rex/templates",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "publishConfig": {
     "access": "public"

package/src/home/layout.tsx

@@ -0,0 +1,61 @@
+import { informationUnits } from "@c-rex/interfaces";
+import { InformationUnitsService } from "@c-rex/services";
+import { SearchStateWrapper } from "@c-rex/components/providers/search-state-wrapper";
+import { HomePage } from "./page";
+
+interface SearchParams {
+    search?: string;
+    page?: string;
+    language?: string;
+}
+interface HomeProps {
+    searchParams: SearchParams;
+}
+
+const loadData = async ({
+    search,
+    page,
+    language,
+}: SearchParams): Promise<any> => {
+    const service = new InformationUnitsService();
+    const pageAux = page != undefined ? Number(page) : 0;
+    const searchValue = search != undefined ? (search as string) : "";
+    const availableLanguages = await service.getLanguages();
+
+    let data = { items: [] } as unknown as informationUnits;
+    let selectedLanguages: string[] = [];
+
+    if (language != undefined) {
+        const aux = language as string;
+        selectedLanguages = aux.split(",");
+    }
+
+    if (searchValue) {
+        data = await service.getList(
+            searchValue,
+            pageAux,
+            selectedLanguages,
+            [],
+        );
+    }
+
+    return {
+        data: data,
+        filters: {
+            searchValue: searchValue,
+            page: pageAux,
+            selectedLanguage: selectedLanguages,
+            availableLanguages: availableLanguages,
+        },
+    };
+};
+
+export const HomeLayout = async ({ searchParams }: HomeProps) => {
+    const { data, filters } = await loadData(searchParams);
+
+    return (
+        <SearchStateWrapper filters={filters}>
+            <HomePage data={data} />
+        </SearchStateWrapper>
+    );
+};

package/src/home/page.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { FC } from "react";
+import { informationUnits } from "@c-rex/interfaces";
+import { InformationUnitsService } from "@c-rex/services";
+import { updateUrlWithParams } from "@c-rex/utils";
+import { useRouter } from "next/navigation";
+import { Button } from "@c-rex/ui/button";
+import { AutoComplete } from "@c-rex/components/autocomplete";
+import { ResultList } from "@c-rex/components/result-list";
+
+//import { useSearchContext } from '@/contexts/search'; TODO: replace for a lib how manage states from URL
+
+interface HomePageProps {
+    data: informationUnits;
+}
+
+export const HomePage: FC<HomePageProps> = ({ data }) => {
+    const router = useRouter();
+    const initialValue = null;
+
+    const onSearch = (value: string): Promise<string[]> => {
+        const service = new InformationUnitsService();
+        return service.getSuggestions(value);
+
+    }
+
+    const onSelect = (value: string) => {
+        updateUrlWithParams(router, [
+            {
+                key: "search",
+                value: value.split(" ").join(","),
+            },
+            {
+                key: "operator",
+                value: "OR",
+            },
+            {
+                key: "page",
+                value: "1",
+            },
+        ]);
+    };
+
+    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">
+                    <AutoComplete
+                        initialValue={initialValue ?? ""}
+                        onSearch={onSearch}
+                        onSelect={onSelect}
+                    />
+                </div>
+                <div className="col-span-12 sm:col-span-3 md:col-span-2">
+                    <div className="flex justify-end">
+                        <Button variant="default">Filters</Button>
+                    </div>
+                </div>
+            </div>
+
+            <ResultList items={data.items} />
+        </div>
+    );
+};

package/src/info/page.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { FC, useEffect, useRef, useState } from "react";
+import { InformationUnitsService } from "@c-rex/services";
+import { TreeOfContent } from "@c-rex/interfaces";
+import { SidebarInset, SidebarProvider, SidebarTrigger } from "@c-rex/ui/sidebar";
+import { Separator } from "@c-rex/ui/separator";
+import { AppSidebar } from "@c-rex/components/sidebar";
+import { Breadcrumb } from "@c-rex/components/breadcrumb";
+//import { generateTreeOfContent } from "@c-rex/utils";
+//import { generateBreadcrumbItems } from "@c-rex/utils";
+
+interface InfoPageTemplateProps {
+    htmlContent: string;
+    id: string;
+}
+
+export const InfoPageTemplate: FC<InfoPageTemplateProps> = ({ htmlContent, id }) => {
+    const [breadcrumbItems, setBreadcrumbItems] = useState<TreeOfContent[]>([]);
+    const [sidebarItems, setSidebarItems] = useState<TreeOfContent[]>([]);
+    const [loading, setLoading] = useState(true);
+    const effectRan = useRef(false);
+
+    useEffect(() => {
+        if (effectRan.current) return;
+        effectRan.current = true;
+
+        const loadNavigationData = async () => {
+            const service = new InformationUnitsService();
+            const informationUnitsItem = await service.getItem(id);
+
+            if (informationUnitsItem?.directoryNodes != undefined) {
+                /*
+                const treeOfContent = await generateTreeOfContent(
+                    informationUnitsItem.directoryNodes,
+                );
+                const breadcrumbItems = generateBreadcrumbItems(treeOfContent);
+                
+                setBreadcrumbItems(breadcrumbItems);
+                setSidebarItems(treeOfContent);
+                */
+                setLoading(false);
+            }
+        };
+
+        loadNavigationData();
+    }, [id]);
+
+    return (
+        <SidebarProvider>
+            <AppSidebar data={sidebarItems} loading={loading} />
+            <SidebarInset>
+                <header className="flex h-16 shrink-0 items-center">
+                    <SidebarTrigger className="-ml-1" />
+                    <Separator orientation="vertical" className="mr-2 h-4" />
+                    <Breadcrumb items={breadcrumbItems} loading={loading} />
+                </header>
+
+                <div
+                    className="flex"
+                    dangerouslySetInnerHTML={{ __html: htmlContent }}
+                />
+            </SidebarInset>
+        </SidebarProvider>
+    );
+};

package/src/layout.tsx

@@ -0,0 +1,26 @@
+//import "@/styles/global.css";
+
+import React from "react";
+import { NavBar } from "@c-rex/components/navbar";
+
+interface DefaultRootLayoutProps {
+    children: React.ReactNode;
+}
+
+export const DefaultRootLayout = ({
+    children,
+}: DefaultRootLayoutProps) => {
+    return (
+        <html lang="en" suppressHydrationWarning>
+            <head />
+            <body className="min-h-screen bg-background font-sans antialiased">
+                <div className="items-center flex flex-col">
+
+                    <NavBar />
+
+                    <div className="container pt-6">{children}</div>
+                </div>
+            </body>
+        </html>
+    );
+}