@c-rex/components 0.1.7 → 0.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c-rex/components",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "files": [
     "src"
   ],
@@ -76,6 +76,10 @@
     "./search-modal": {
       "types": "./src/search-modal.tsx",
       "import": "./src/search-modal.tsx"
+    },
+    "./loading": {
+      "types": "./src/loading.tsx",
+      "import": "./src/loading.tsx"
     }
   },
   "scripts": {

package/src/autocomplete.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import { Input } from "@c-rex/ui/input";
-import { call, generateQueryParams, getFromCookieString } from "@c-rex/utils";
-import { CONTENT_LANG_KEY, WILD_CARD_OPTIONS } from "@c-rex/constants";
+import { call, generateQueryParams } from "@c-rex/utils";
+import { WILD_CARD_OPTIONS } from "@c-rex/constants";
 import { useTranslations } from "next-intl";
 import { useAppConfig } from "@c-rex/contexts/config-provider";
 import { QueryParams } from "@c-rex/types";
@@ -15,7 +15,7 @@ type Props = {
 export const AutoComplete = ({ initialValue, embedded, searchByPackage }: Props) => {
     const t = useTranslations();
     const containerRef = useRef<HTMLDivElement>(null);
-    const { contentLang, packageID } = useAppConfig()
+    const { articleLang, contentLang, packageID } = useAppConfig()
 
     const [open, setOpen] = useState(false);
     const [query, setQuery] = useState(initialValue);
@@ -23,43 +23,21 @@ export const AutoComplete = ({ initialValue, embedded, searchByPackage }: Props)
     const [suggestions, setSuggestions] = useState<string[]>([]);
 
     const onSearch = (value: string): Promise<string[]> => {
-        return call<string[]>("InformationUnitsService.getSuggestions", { query: value, language: contentLang });
+        return call<string[]>("InformationUnitsService.getSuggestions", { query: value, language: articleLang || contentLang });
     }
 
     const onSelect = (value: string) => {
-        const cookie = getFromCookieString(document.cookie, CONTENT_LANG_KEY)
         const params: QueryParams[] = [
-            {
-                key: "search",
-                value: value
-            },
-            {
-                key: "operator",
-                value: "OR"
-            },
-            {
-                key: "page",
-                value: "1"
-            },
-            {
-                key: "language",
-                value: cookie
-            },
-            {
-                key: "wildcard",
-                value: WILD_CARD_OPTIONS.BOTH
-            },
-            {
-                key: "like",
-                value: "false"
-            },
+            { key: "search", value: value },
+            { key: "operator", value: "OR" },
+            { key: "page", value: "1" },
+            { key: "language", value: articleLang || contentLang as string },
+            { key: "wildcard", value: WILD_CARD_OPTIONS.BOTH },
+            { key: "like", value: "false" },
         ]
 
         if (searchByPackage && packageID !== null) {
-            params.push({
-                key: "package",
-                value: packageID
-            })
+            params.push({ key: "packages", value: packageID })
         }
 
         const aux = generateQueryParams(params)

package/src/dialog-filter.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState } from "react"
+import React, { FC, use, useEffect, useState } from "react"
 import { Button } from "@c-rex/ui/button"
 import {
     Dialog,
@@ -10,8 +10,6 @@ import {
     DialogTrigger,
 } from "@c-rex/ui/dialog"
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@c-rex/ui/select"
-import { ToggleGroup, ToggleGroupItem } from "@c-rex/ui/toggle-group"
-import { RadioGroup, RadioGroupItem } from "@c-rex/ui/radio-group"
 import { Checkbox } from "@c-rex/ui/checkbox"
 import { Label } from "@c-rex/ui/label"
 import { parseAsBoolean, parseAsInteger, parseAsString, useQueryStates } from "nuqs"
@@ -23,6 +21,7 @@ import { Switch } from "@c-rex/ui/switch"
 
 interface DialogFilterProps {
     trigger: React.ReactNode;
+    setLoading: (loading: boolean) => void;
 }
 interface Languages {
     lang: string;
@@ -30,7 +29,7 @@ interface Languages {
     checked: boolean;
 }
 
-export const DialogFilter: FC<DialogFilterProps> = ({ trigger }) => {
+export const DialogFilter: FC<DialogFilterProps> = ({ trigger, setLoading }) => {
     const t = useTranslations("filter");
     const { availableLanguagesAndCountries } = useAppConfig()
     const [params, setParams] = useQueryStates({
@@ -38,6 +37,7 @@ export const DialogFilter: FC<DialogFilterProps> = ({ trigger }) => {
         page: parseAsInteger,
         wildcard: parseAsString,
         operator: parseAsString,
+        filter: parseAsString,
         like: parseAsBoolean,
     }, {
         history: 'push',
@@ -49,6 +49,7 @@ export const DialogFilter: FC<DialogFilterProps> = ({ trigger }) => {
     const [operator, setOperator] = useState<string>(params.operator || OPERATOR_OPTIONS.OR);
     const [like, setLike] = useState<boolean>(params.like || false);
     const [wildcard, setWildcard] = useState<string>(params.wildcard || "");
+    const [disabled, setDisabled] = useState<boolean>(false)
     const [languages, setLanguages] = useState<Languages[]>(availableLanguagesAndCountries.map((item: LanguageAndCountries) => {
         const checked = startSelectedLanguages.includes(item.value)
 
@@ -68,7 +69,12 @@ export const DialogFilter: FC<DialogFilterProps> = ({ trigger }) => {
     }
 
     const apply = () => {
-        const selectedLanguages = languages.filter((item: any) => item.checked).map((item: any) => item.value).join(',')
+        setLoading(true);
+
+        const selectedLanguages = languages
+            .filter((item: any) => item.checked)
+            .map((item: any) => item.value)
+            .join(',')
 
         setParams({
             page: 1,
@@ -76,9 +82,29 @@ export const DialogFilter: FC<DialogFilterProps> = ({ trigger }) => {
             operator: operator,
             wildcard: wildcard,
             like: like,
+            filter: null,
         });
     }
 
+    useEffect(() => {
+        setOperator(params.operator || OPERATOR_OPTIONS.OR);
+        setLike(params.like || false);
+        setWildcard(params.wildcard || "");
+        setLanguages(availableLanguagesAndCountries.map((item: LanguageAndCountries) => {
+            const checked = startSelectedLanguages.includes(item.value)
+
+            return {
+                lang: item.lang,
+                value: item.value,
+                checked,
+            }
+        }));
+    }, [params])
+
+    useEffect(() => {
+        setDisabled(languages.every((item) => !item.checked));
+    }, [languages])
+
     return (
         <Dialog>
             <DialogTrigger asChild>
@@ -143,12 +169,12 @@ export const DialogFilter: FC<DialogFilterProps> = ({ trigger }) => {
                 </div>
 
                 <div className="grid grid-cols-2 items-center pt-2">
-                    <Label className="text-right">
+                    <Label htmlFor="operator" className="text-right">
                         {t("operator")}:
                     </Label>
 
                     <Switch
-                        id="like"
+                        id="operator"
                         onCheckedChange={(value) => setOperator(value ? OPERATOR_OPTIONS.AND : OPERATOR_OPTIONS.OR)}
                         checked={operator == OPERATOR_OPTIONS.AND}
                     />
@@ -163,7 +189,7 @@ export const DialogFilter: FC<DialogFilterProps> = ({ trigger }) => {
 
                 <DialogFooter className="pt-2">
                     <DialogClose asChild>
-                        <Button onClick={apply}>{t("apply")}</Button>
+                        <Button onClick={apply} disabled={disabled}>{t("apply")}</Button>
                     </DialogClose>
                 </DialogFooter>
             </DialogContent>

package/src/loading.tsx

@@ -0,0 +1,12 @@
+import React, { FC } from "react";
+
+type LoadingProps = {
+    opacity: boolean;
+}
+export const Loading: FC<LoadingProps> = ({ opacity }) => {
+    return (
+        <div className={`fixed inset-0 z-[100000] w-full h-full flex justify-center items-center bg-white ${opacity ? "opacity-50" : ""}`}>
+            <div className="animate-spin rounded-full h-12 w-12 border-2 border-gray-300 border-t-gray-950"></div>
+        </div>
+    );
+};

package/src/navbar/navbar.tsx

@@ -11,9 +11,10 @@ import { SearchInput } from "./search-input";
 interface NavBarProps {
     title: string;
     showInput: boolean;
+    showPkgFilter: boolean;
 }
 
-export const NavBar: FC<NavBarProps> = async ({ title, showInput }) => {
+export const NavBar: FC<NavBarProps> = async ({ title, showInput, showPkgFilter }) => {
     const configs = await getConfigs();
 
     let session: any;
@@ -42,7 +43,7 @@ export const NavBar: FC<NavBarProps> = async ({ title, showInput }) => {
                 </div>
 
                 <div className="flex items-center space-x-3">
-                    <SearchInput showInput={showInput} />
+                    <SearchInput showInput={showInput} showPkgFilter={showPkgFilter} />
 
                     {configs.OIDC.user.enabled && (
                         <>

package/src/navbar/search-input.tsx

@@ -7,9 +7,10 @@ import { AutoComplete } from "../autocomplete";
 
 type Props = {
     showInput: boolean
+    showPkgFilter: boolean
 }
-export const SearchInput: FC<Props> = ({ showInput }) => {
-    const [checked, setChecked] = useState<boolean>(false);
+export const SearchInput: FC<Props> = ({ showInput, showPkgFilter }) => {
+    const [checked, setChecked] = useState<boolean>(true);
 
     if (!showInput) {
         return null;
@@ -25,17 +26,19 @@ export const SearchInput: FC<Props> = ({ showInput }) => {
                 searchByPackage={checked}
             />
 
-            <TooltipProvider>
-                <Tooltip delayDuration={100}>
-                    <TooltipTrigger onClick={() => setChecked(!checked)}>
-                        {checked ? <FileCheck className="opacity-50" /> : <FileX className="opacity-50" />}
-                    </TooltipTrigger>
-
-                    <TooltipContent>
-                        If checked will search only in this document
-                    </TooltipContent>
-                </Tooltip>
-            </TooltipProvider>
+            {showPkgFilter && <>
+                <TooltipProvider>
+                    <Tooltip delayDuration={100}>
+                        <TooltipTrigger onClick={() => setChecked(!checked)}>
+                            {checked ? <FileCheck className="opacity-50" /> : <FileX className="opacity-50" />}
+                        </TooltipTrigger>
+
+                        <TooltipContent>
+                            If checked will search only in this document
+                        </TooltipContent>
+                    </Tooltip>
+                </TooltipProvider>
+            </>}
 
         </div>
     );

package/src/page-wrapper.tsx

@@ -4,13 +4,20 @@ import { NavBar } from './navbar/navbar';
 type Props = {
     children: React.ReactNode;
     title: string;
-    showInput: boolean;
+    pageType: "BLOG" | "DOC" | "HOME"
 }
 
-export const PageWrapper = ({ children, title, showInput }: Props) => {
+export const PageWrapper = ({ children, title, pageType }: Props) => {
+    const showInput = pageType === "DOC" || pageType === "BLOG"
+    const showPkgFilter = pageType === "DOC"
+
     return (
         <>
-            <NavBar title={title} showInput={showInput} />
+            <NavBar
+                title={title}
+                showInput={showInput}
+                showPkgFilter={showPkgFilter}
+            />
             {children}
         </>
     );

package/src/search-modal.tsx

@@ -38,7 +38,7 @@ export const SearchModal: FC<SearchModalProps> = ({ trigger }) => {
         wildcard: parseAsString,
         operator: parseAsString,
         search: parseAsString,
-        package: parseAsString,
+        packages: parseAsString,
         tags: parseAsBoolean,
         like: parseAsBoolean,
     }, {
@@ -80,7 +80,6 @@ export const SearchModal: FC<SearchModalProps> = ({ trigger }) => {
             wildcard: WILD_CARD_OPTIONS.BOTH,
             tags: false,
             like: false,
-            package: ""
         });
     }