@acvl/frontend-components 0.0.30 → 0.0.32

package/dist/cjs/types/src/components/v1/layout/pages/DetailPage/index.d.ts

@@ -9,6 +9,7 @@ export interface DetailPageProps {
     slots?: {
         title?: string[];
         button?: ReactNode;
+        extraButtons?: ((id: number) => ReactNode)[];
         badge?: string;
     };
     slotProps?: {

package/dist/esm/index.js

@@ -27975,32 +27975,38 @@ function ContentLayout({ children, button, badge }) {
 }
 
 const LinkField = ({ url, value, text }) => {
-    return (jsx(Link, { href: `${url}/${value}`, children: text }));
+    return jsx(Link, { href: `${url}/${value}`, children: text });
 };
 const DetailField = (props) => {
     const hasLinkToViewPermission = useHasPermission(`${props.navigation?.permission}.view`);
     const value = useCallback(() => {
-        if (typeof (props.fieldData) == 'boolean') {
+        if (typeof props.fieldData == "boolean") {
             if (props.fieldData)
-                return 'Si';
-            return 'No';
+                return "Si";
+            return "No";
         }
-        else if (typeof (props.fieldData) == 'number') {
+        else if (typeof props.fieldData == "number") {
             return props.fieldData.toString();
         }
-        else if (props.type.displayName == 'ControlledSelect') {
+        else if (props.type.displayName == "ControlledSelect") {
             if (props.fieldData)
-                return map(props.fieldData, function (item) { return item.label; }).join(', ');
+                return map(props.fieldData, function (item) {
+                    return item.label;
+                }).join(", ");
         }
-        else if (props.type.displayName == 'ControlledDate') {
+        else if (props.type.displayName == "ControlledDate") {
             if (props.fieldData) {
-                if (props.extraProps.type == 'datetime')
-                    return dayjs(props.fieldData).format('YYYY-MM-DD HH:mm');
+                switch (props.extraProps.type) {
+                    case "date":
+                        return dayjs(props.fieldData).format("YYYY-MM-DD");
+                    case "datetime":
+                        return dayjs(props.fieldData).format("YYYY-MM-DD HH:mm");
+                }
             }
         }
-        else if (props.type.displayName == 'ControlledPhotoField') {
+        else if (props.type.displayName == "ControlledPhotoField") {
             if (props.fieldData)
-                return 'Imagen';
+                return "Imagen";
         }
         else {
             if (props.fieldData) {
@@ -28010,24 +28016,27 @@ const DetailField = (props) => {
                 return props.fieldData;
             }
         }
-        return 'N/A';
+        return "N/A";
     }, [props.detail_name, props.fieldData, props.type.displayName]);
-    const content = `${props.detailFieldProps?.preValue ? props.detailFieldProps.preValue : ''} ${value()} ${props.detailFieldProps?.postValue ? props.detailFieldProps.postValue : ''}`;
-    if (props.navigation && hasLinkToViewPermission && props.fieldData && typeof props.fieldData == 'object') {
+    const content = `${props.detailFieldProps?.preValue ? props.detailFieldProps.preValue : ""} ${value()} ${props.detailFieldProps?.postValue ? props.detailFieldProps.postValue : ""}`;
+    if (props.navigation &&
+        hasLinkToViewPermission &&
+        props.fieldData &&
+        typeof props.fieldData == "object") {
         if (Array.isArray(props.fieldData)) {
-            return (props.fieldData.map((item, index) => (jsx(LinkField, { url: props.navigation?.url, value: get(item, 'value'), text: `${get(item, 'label')}${index < props.fieldData.length - 1 ? ', ' : ''}` }, `${props.name}-link-${index}`))));
+            return props.fieldData.map((item, index) => (jsx(LinkField, { url: props.navigation?.url, value: get(item, "value"), text: `${get(item, "label")}${index < props.fieldData.length - 1 ? ", " : ""}` }, `${props.name}-link-${index}`)));
         }
-        return (jsx(LinkField, { url: props.navigation.url, value: get(props.fieldData, 'value'), text: content }));
+        return (jsx(LinkField, { url: props.navigation.url, value: get(props.fieldData, "value"), text: content }));
     }
-    else if (props.type.displayName == 'ControlledPhotoField') {
+    else if (props.type.displayName == "ControlledPhotoField") {
         return (jsx(Link, { href: props.fieldData, download: "filename.pdf", children: content }));
     }
     else {
         if (Array.isArray(props.fieldData)) {
-            return (props.fieldData.map((item, index) => (jsx(Typography$1, { children: `${get(item, 'label')}${index < props.fieldData.length - 1 ? ', ' : ''}` }, `${props.name}-link-${index}`))));
+            return props.fieldData.map((item, index) => (jsx(Typography$1, { children: `${get(item, "label")}${index < props.fieldData.length - 1 ? ", " : ""}` }, `${props.name}-link-${index}`)));
         }
         else {
-            return (jsx(Typography$1, { children: content }));
+            return jsx(Typography$1, { children: content });
         }
     }
 };
@@ -28065,12 +28074,13 @@ const EditField = (props) => {
 };
 
 const Field = (props) => {
+    const formData = props.form.watch();
     const show = useMemo(() => {
         if (props.dependantOn) {
-            return props.dependantOn.method(get(props.data, props.dependantOn.fieldName), props.dependantOn.value);
+            return props.dependantOn.method(get(props.data || formData, props.dependantOn.fieldName), props.dependantOn.value);
         }
         return true;
-    }, [props.data, props.dependantOn]);
+    }, [props.data, formData, props.dependantOn]);
     const renderField = useCallback(() => {
         if (!props.pageType || props.pageType == "list")
             return;
@@ -28484,7 +28494,8 @@ function DetailPage(props) {
         if (props.pageType == "detail") {
             if (!canEdit && !canDelete)
                 return null;
-            return (jsxs(Stack, { direction: "row", spacing: 1, children: [canDelete && props.api.delete && (jsx(DeleteButton, { mutation: props.api.delete.mutation, disableNavBack: props.slotProps?.deleteButton?.disableNavBack })), canEdit && jsx(EditButton, {})] }));
+            return (jsxs(Stack, { direction: "row", spacing: 1, children: [canDelete && props.api.delete && (jsx(DeleteButton, { mutation: props.api.delete.mutation, disableNavBack: props.slotProps?.deleteButton?.disableNavBack })), canEdit && jsx(EditButton, {}), props.slots?.extraButtons &&
+                        map(props.slots.extraButtons, (btn) => btn(data?.id))] }));
         }
         else {
             return (jsx(SaveCancelButton, { slotProps: {