@carlonicora/nextjs-jsonapi 1.74.0 → 1.76.0

package/dist/scripts/generate-web-module/templates/components/multi-selector.template.js

@@ -21,18 +21,9 @@ function generateMultiSelectorTemplate(data) {
 
 import { ${names.pascalCase}Interface } from "@/features/${data.importTargetDir}/${names.kebabCase}/data/${names.pascalCase}Interface";
 import { ${names.pascalCase}Service } from "@/features/${data.importTargetDir}/${names.kebabCase}/data/${names.pascalCase}Service";
-import { DataListRetriever, useDataListRetriever, useDebounce } from "@carlonicora/nextjs-jsonapi/client";
-import { FormFieldWrapper, MultipleSelector } from "@carlonicora/nextjs-jsonapi/components";
-import { Option } from "@carlonicora/nextjs-jsonapi/components";
+import { EntityMultiSelector } from "@carlonicora/nextjs-jsonapi/components";
 import { Modules } from "@carlonicora/nextjs-jsonapi/core";
-import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslations } from "next-intl";
-import { useWatch } from "react-hook-form";
-
-type ${names.pascalCase}MultiSelectType = {
-  id: string;
-  ${displayProp}: string;
-};
 
 type ${names.pascalCase}MultiSelectorProps = {
   id: string;
@@ -45,10 +36,6 @@ type ${names.pascalCase}MultiSelectorProps = {
   isRequired?: boolean;
 };
 
-type ${names.pascalCase}Option = Option & {
-  ${names.camelCase}Data?: ${names.pascalCase}Interface;
-};
-
 export default function ${names.pascalCase}MultiSelector({
   id,
   form,
@@ -56,117 +43,24 @@ export default function ${names.pascalCase}MultiSelector({
   label,
   placeholder,
   onChange,
-  maxCount = 3,
   isRequired = false,
 }: ${names.pascalCase}MultiSelectorProps) {
   const t = useTranslations();
-  const [${names.camelCase}Options, set${names.pascalCase}Options] = useState<${names.pascalCase}Option[]>([]);
-  const [searchTerm, setSearchTerm] = useState<string>("");
-
-  const selected${names.pluralPascal}: ${names.pascalCase}MultiSelectType[] = useWatch({ control: form.control, name: id }) || [];
-
-  const data: DataListRetriever<${names.pascalCase}Interface> = useDataListRetriever({
-    retriever: (params) => ${names.pascalCase}Service.findMany(params),
-    retrieverParams: {},
-    ready: true,
-    module: Modules.${names.pascalCase},
-  });
-
-  const updateSearch = useCallback(
-    (searchedTerm: string) => {
-      if (searchedTerm.trim()) {
-        data.addAdditionalParameter("search", searchedTerm.trim());
-      } else {
-        data.removeAdditionalParameter("search");
-      }
-    },
-    [data]
-  );
-
-  const debouncedUpdateSearch = useDebounce(updateSearch, 500);
-
-  useEffect(() => {
-    debouncedUpdateSearch(searchTerm);
-  }, [debouncedUpdateSearch, searchTerm]);
-
-  useEffect(() => {
-    if (data.data && data.data.length > 0) {
-      const ${names.pluralCamel} = data.data as ${names.pascalCase}Interface[];
-      const filtered${names.pluralPascal} = ${names.pluralCamel}.filter((${names.camelCase}) => ${names.camelCase}.id !== current${names.pascalCase}?.id);
-
-      const options: ${names.pascalCase}Option[] = filtered${names.pluralPascal}.map((${names.camelCase}) => ({
-        label: ${names.camelCase}.${displayProp},
-        value: ${names.camelCase}.id,
-        ${names.camelCase}Data: ${names.camelCase},
-      }));
-
-      // Add options for any already selected that aren't in search results
-      const existingOptionIds = new Set(options.map((option) => option.value));
-      const missingOptions: ${names.pascalCase}Option[] = selected${names.pluralPascal}
-        .filter((${names.camelCase}) => !existingOptionIds.has(${names.camelCase}.id))
-        .map((${names.camelCase}) => ({
-          label: ${names.camelCase}.${displayProp},
-          value: ${names.camelCase}.id,
-          ${names.camelCase}Data: ${names.camelCase} as unknown as ${names.pascalCase}Interface,
-        }));
-
-      set${names.pascalCase}Options([...options, ...missingOptions]);
-    }
-  }, [data.data, current${names.pascalCase}, selected${names.pluralPascal}]);
-
-  // Convert selected to Option[] format
-  const selectedOptions = useMemo(() => {
-    return selected${names.pluralPascal}.map((${names.camelCase}) => ({
-      value: ${names.camelCase}.id,
-      label: ${names.camelCase}.${displayProp},
-    }));
-  }, [selected${names.pluralPascal}]);
-
-  const handleChange = (options: Option[]) => {
-    // Convert to form format
-    const formValues = options.map((option) => ({
-      id: option.value,
-      ${displayProp}: option.label,
-    }));
-
-    form.setValue(id, formValues, { shouldDirty: true, shouldTouch: true });
-
-    if (onChange) {
-      // Get full data for onChange callback
-      const fullData = options
-        .map((option) => {
-          const ${names.camelCase}Option = ${names.camelCase}Options.find((opt) => opt.value === option.value);
-          return ${names.camelCase}Option?.${names.camelCase}Data;
-        })
-        .filter(Boolean) as ${names.pascalCase}Interface[];
-      onChange(fullData);
-    }
-  };
-
-  // Search handler
-  const handleSearchSync = (search: string): Option[] => {
-    setSearchTerm(search);
-    return ${names.camelCase}Options;
-  };
 
   return (
-    <div className="flex w-full flex-col">
-      <FormFieldWrapper form={form} name={id} label={label} isRequired={isRequired}>
-        {() => (
-          <MultipleSelector
-            value={selectedOptions}
-            onChange={handleChange}
-            options={${names.camelCase}Options}
-            placeholder={placeholder}
-            maxDisplayCount={maxCount}
-            hideClearAllButton
-            onSearchSync={handleSearchSync}
-            delay={0}
-            emptyIndicator={<span className="text-muted-foreground">{t("ui.search.no_results_generic")}</span>}
-          />
-        )}
-      </FormFieldWrapper>
-    </div>
+    <EntityMultiSelector<${names.pascalCase}Interface>
+      id={id}
+      form={form}
+      label={label}
+      placeholder={placeholder || t("ui.search.button")}
+      emptyText={t("ui.search.no_results_generic")}
+      isRequired={isRequired}
+      retriever={(params) => ${names.pascalCase}Service.findMany(params)}
+      module={Modules.${names.pascalCase}}
+      getLabel={(${names.camelCase}) => ${displayProp === "id" ? `${names.camelCase}.id` : `${names.camelCase}.${displayProp}`}}
+      excludeId={current${names.pascalCase}?.id}
+      onChange={onChange}
+    />
   );
 }
 `;

package/dist/scripts/generate-web-module/templates/components/multi-selector.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"multi-selector.template.js","sourceRoot":"","sources":["../../../../../scripts/generate-web-module/templates/components/multi-selector.template.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"multi-selector.template.js","sourceRoot":"","sources":["../../../../../scripts/generate-web-module/templates/components/multi-selector.template.ts"],"names":[],"mappings":";AAAA;;;;GAIG;;AAUH,sEAqDC;AA3DD;;;;;GAKG;AACH,SAAgB,6BAA6B,CAAC,IAA0B;IACtE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC;IAC/C,MAAM,YAAY,GAAG,cAAc,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC;IAC7E,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,KAAK,QAAQ,IAAI,CAAC,CAAC,MAAM,KAAK,eAAe,CAAC,CAAC;IACnG,MAAM,WAAW,GAAG,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,gBAAgB,EAAE,IAAI,IAAI,IAAI,CAAC,CAAC;IAE7E,OAAO;;WAEE,KAAK,CAAC,UAAU,gCAAgC,IAAI,CAAC,eAAe,IAAI,KAAK,CAAC,SAAS,SAAS,KAAK,CAAC,UAAU;WAChH,KAAK,CAAC,UAAU,8BAA8B,IAAI,CAAC,eAAe,IAAI,KAAK,CAAC,SAAS,SAAS,KAAK,CAAC,UAAU;;;;;OAKlH,KAAK,CAAC,UAAU;;;WAGZ,KAAK,CAAC,UAAU,MAAM,KAAK,CAAC,UAAU;;;gBAGjC,KAAK,CAAC,WAAW,MAAM,KAAK,CAAC,UAAU;;;;;0BAK7B,KAAK,CAAC,UAAU;;;WAG/B,KAAK,CAAC,UAAU;;;;;KAKtB,KAAK,CAAC,UAAU;;;;2BAIM,KAAK,CAAC,UAAU;;;;;;;+BAOZ,KAAK,CAAC,UAAU;wBACvB,KAAK,CAAC,UAAU;mBACrB,KAAK,CAAC,SAAS,QAAQ,WAAW,KAAK,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,SAAS,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,SAAS,IAAI,WAAW,EAAE;0BACpG,KAAK,CAAC,UAAU;;;;;CAKzC,CAAC;AACF,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carlonicora/nextjs-jsonapi",
-  "version": "1.74.0",
+  "version": "1.76.0",
   "description": "Next.js JSON:API client with server/client support and caching",
   "author": "Carlo Nicora",
   "license": "GPL-3.0-or-later",

package/scripts/generate-web-module/templates/components/multi-selector.template.ts

@@ -22,18 +22,9 @@ export function generateMultiSelectorTemplate(data: FrontendTemplateData): strin
 
 import { ${names.pascalCase}Interface } from "@/features/${data.importTargetDir}/${names.kebabCase}/data/${names.pascalCase}Interface";
 import { ${names.pascalCase}Service } from "@/features/${data.importTargetDir}/${names.kebabCase}/data/${names.pascalCase}Service";
-import { DataListRetriever, useDataListRetriever, useDebounce } from "@carlonicora/nextjs-jsonapi/client";
-import { FormFieldWrapper, MultipleSelector } from "@carlonicora/nextjs-jsonapi/components";
-import { Option } from "@carlonicora/nextjs-jsonapi/components";
+import { EntityMultiSelector } from "@carlonicora/nextjs-jsonapi/components";
 import { Modules } from "@carlonicora/nextjs-jsonapi/core";
-import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslations } from "next-intl";
-import { useWatch } from "react-hook-form";
-
-type ${names.pascalCase}MultiSelectType = {
-  id: string;
-  ${displayProp}: string;
-};
 
 type ${names.pascalCase}MultiSelectorProps = {
   id: string;
@@ -46,10 +37,6 @@ type ${names.pascalCase}MultiSelectorProps = {
   isRequired?: boolean;
 };
 
-type ${names.pascalCase}Option = Option & {
-  ${names.camelCase}Data?: ${names.pascalCase}Interface;
-};
-
 export default function ${names.pascalCase}MultiSelector({
   id,
   form,
@@ -57,117 +44,24 @@ export default function ${names.pascalCase}MultiSelector({
   label,
   placeholder,
   onChange,
-  maxCount = 3,
   isRequired = false,
 }: ${names.pascalCase}MultiSelectorProps) {
   const t = useTranslations();
-  const [${names.camelCase}Options, set${names.pascalCase}Options] = useState<${names.pascalCase}Option[]>([]);
-  const [searchTerm, setSearchTerm] = useState<string>("");
-
-  const selected${names.pluralPascal}: ${names.pascalCase}MultiSelectType[] = useWatch({ control: form.control, name: id }) || [];
-
-  const data: DataListRetriever<${names.pascalCase}Interface> = useDataListRetriever({
-    retriever: (params) => ${names.pascalCase}Service.findMany(params),
-    retrieverParams: {},
-    ready: true,
-    module: Modules.${names.pascalCase},
-  });
-
-  const updateSearch = useCallback(
-    (searchedTerm: string) => {
-      if (searchedTerm.trim()) {
-        data.addAdditionalParameter("search", searchedTerm.trim());
-      } else {
-        data.removeAdditionalParameter("search");
-      }
-    },
-    [data]
-  );
-
-  const debouncedUpdateSearch = useDebounce(updateSearch, 500);
-
-  useEffect(() => {
-    debouncedUpdateSearch(searchTerm);
-  }, [debouncedUpdateSearch, searchTerm]);
-
-  useEffect(() => {
-    if (data.data && data.data.length > 0) {
-      const ${names.pluralCamel} = data.data as ${names.pascalCase}Interface[];
-      const filtered${names.pluralPascal} = ${names.pluralCamel}.filter((${names.camelCase}) => ${names.camelCase}.id !== current${names.pascalCase}?.id);
-
-      const options: ${names.pascalCase}Option[] = filtered${names.pluralPascal}.map((${names.camelCase}) => ({
-        label: ${names.camelCase}.${displayProp},
-        value: ${names.camelCase}.id,
-        ${names.camelCase}Data: ${names.camelCase},
-      }));
-
-      // Add options for any already selected that aren't in search results
-      const existingOptionIds = new Set(options.map((option) => option.value));
-      const missingOptions: ${names.pascalCase}Option[] = selected${names.pluralPascal}
-        .filter((${names.camelCase}) => !existingOptionIds.has(${names.camelCase}.id))
-        .map((${names.camelCase}) => ({
-          label: ${names.camelCase}.${displayProp},
-          value: ${names.camelCase}.id,
-          ${names.camelCase}Data: ${names.camelCase} as unknown as ${names.pascalCase}Interface,
-        }));
-
-      set${names.pascalCase}Options([...options, ...missingOptions]);
-    }
-  }, [data.data, current${names.pascalCase}, selected${names.pluralPascal}]);
-
-  // Convert selected to Option[] format
-  const selectedOptions = useMemo(() => {
-    return selected${names.pluralPascal}.map((${names.camelCase}) => ({
-      value: ${names.camelCase}.id,
-      label: ${names.camelCase}.${displayProp},
-    }));
-  }, [selected${names.pluralPascal}]);
-
-  const handleChange = (options: Option[]) => {
-    // Convert to form format
-    const formValues = options.map((option) => ({
-      id: option.value,
-      ${displayProp}: option.label,
-    }));
-
-    form.setValue(id, formValues, { shouldDirty: true, shouldTouch: true });
-
-    if (onChange) {
-      // Get full data for onChange callback
-      const fullData = options
-        .map((option) => {
-          const ${names.camelCase}Option = ${names.camelCase}Options.find((opt) => opt.value === option.value);
-          return ${names.camelCase}Option?.${names.camelCase}Data;
-        })
-        .filter(Boolean) as ${names.pascalCase}Interface[];
-      onChange(fullData);
-    }
-  };
-
-  // Search handler
-  const handleSearchSync = (search: string): Option[] => {
-    setSearchTerm(search);
-    return ${names.camelCase}Options;
-  };
 
   return (
-    <div className="flex w-full flex-col">
-      <FormFieldWrapper form={form} name={id} label={label} isRequired={isRequired}>
-        {() => (
-          <MultipleSelector
-            value={selectedOptions}
-            onChange={handleChange}
-            options={${names.camelCase}Options}
-            placeholder={placeholder}
-            maxDisplayCount={maxCount}
-            hideClearAllButton
-            onSearchSync={handleSearchSync}
-            delay={0}
-            emptyIndicator={<span className="text-muted-foreground">{t("ui.search.no_results_generic")}</span>}
-          />
-        )}
-      </FormFieldWrapper>
-    </div>
+    <EntityMultiSelector<${names.pascalCase}Interface>
+      id={id}
+      form={form}
+      label={label}
+      placeholder={placeholder || t("ui.search.button")}
+      emptyText={t("ui.search.no_results_generic")}
+      isRequired={isRequired}
+      retriever={(params) => ${names.pascalCase}Service.findMany(params)}
+      module={Modules.${names.pascalCase}}
+      getLabel={(${names.camelCase}) => ${displayProp === "id" ? `${names.camelCase}.id` : `${names.camelCase}.${displayProp}`}}
+      excludeId={current${names.pascalCase}?.id}
+      onChange={onChange}
+    />
   );
 }
 `;

package/src/components/forms/EditorSheet.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useTranslations } from "next-intl";
-import { ReactNode, useCallback, useEffect } from "react";
+import { ReactNode, useCallback, useEffect, useRef } from "react";
 import { FieldValues, UseFormReturn } from "react-hook-form";
 import { PencilIcon } from "lucide-react";
 import { ModuleWithPermissions } from "../../permissions/types";
@@ -97,8 +97,12 @@ export function EditorSheet<T extends FieldValues>({
     { dialogOpen, onDialogOpenChange, forceShow },
   );
 
+  const hasBeenOpen = useRef(false);
+
   useEffect(() => {
-    if (!open) {
+    if (open) {
+      hasBeenOpen.current = true;
+    } else if (hasBeenOpen.current) {
       form.reset(onReset());
       onClose?.();
     }