@vertesia/ui 0.60.0 → 0.62.0

package/src/features/store/objects/selection/actions/AddToCollectionAction.tsx

@@ -0,0 +1,114 @@
+import { Button, ErrorBox, Portal, useFetch, useToast, VModal, VModalBody, VModalFooter, VModalTitle, VSelectBox } from "@vertesia/ui/core";
+import { useUserSession } from "@vertesia/ui/session";
+import { useCallback, useState } from "react";
+import { CreateCollectionForm } from "../../../collections";
+import { useObjectsActionCallback } from "../ObjectsActionContext";
+import { ActionComponentTypeProps, ObjectsActionSpec } from "../ObjectsActionSpec";
+
+export function AddToCollectionActionComponent({ action, objectIds }: ActionComponentTypeProps) {
+    const [showModal, setShowModal] = useState(false);
+    const callback = useCallback(() => {
+        if (objectIds.length > 0) {
+            setShowModal(true);
+        }
+        return Promise.resolve(true);
+    }, [objectIds])
+
+    const onClose = () => {
+        setShowModal(false)
+    }
+
+    useObjectsActionCallback(action.id, callback);
+
+    return showModal && <Portal>
+        <SelectCollectionModal objectIds={objectIds} isOpen={showModal} onClose={onClose} />
+    </Portal>;
+}
+
+export const AddToCollectionAction: ObjectsActionSpec = {
+    id: "addToCollection",
+    name: 'Add to Collection',
+    description: 'Add documents to a collection',
+    confirm: false,
+    component: AddToCollectionActionComponent,
+}
+
+
+interface SelectCollectionModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    objectIds: string[];
+}
+function SelectCollectionModal({ isOpen, onClose, objectIds }: SelectCollectionModalProps) {
+    return (
+        <VModal isOpen={isOpen} onClose={onClose}>
+            <VModalTitle>Add to a Collection</VModalTitle>
+            <AddToCollectionForm onClose={onClose} objectIds={objectIds} />
+        </VModal>
+    )
+}
+
+interface AddToCollectionFormProps {
+    objectIds: string[];
+    onClose: () => void;
+}
+function AddToCollectionForm({ onClose, objectIds }: AddToCollectionFormProps) {
+    const toast = useToast();
+    const { client } = useUserSession();
+    const [selectedCol, setSelectedCol] = useState<any>();
+    const { data: collections, error } = useFetch(() => client.store.collections.list({ dynamic: false }), []);
+    const onAddToCollection = ({ collectionId }: { collectionId: string }) => {
+        if (!collectionId || !objectIds?.length) {
+            return;
+        }
+        client.store.collections.addMembers(collectionId, objectIds).then(() => {
+            toast({
+                title: 'Add to collection success',
+                status: 'success',
+                description: `Added ${objectIds.length} objects to the selected collection`,
+                duration: 3000
+            });
+            onClose();
+        }).catch(() => {
+            toast({
+                title: 'Add to collection failure',
+                status: 'error',
+                description: `Failed to add the selected objects to the collection`,
+                duration: 5000
+            });
+        });
+    }
+    if (error) {
+        return <ErrorBox title='Collection fetch failed'>{error.message}</ErrorBox>
+    }
+
+    return (
+        <>
+            <VModalBody>
+                <VSelectBox
+                    filterBy={"name"}
+                    value={selectedCol}
+                    onChange={(collection) => {
+                        setSelectedCol(collection);
+                    }}
+                    placeholder="Select a collection"
+                    options={collections || []}
+                    optionLabel={(col: any) => col.name}
+                    by="id"
+                    className="mb-4"
+                />
+            </VModalBody>
+            <VModalFooter>
+                <Button isDisabled={!selectedCol} onClick={() => selectedCol && onAddToCollection({ collectionId: selectedCol.id })}>
+                    Add to Collection
+                </Button>
+            </VModalFooter>
+            <div className="flex items-center flex-row w-full text-muted">
+                <hr className="w-full" />
+                <div className="px-2 text-xs">OR</div>
+                <hr className="w-full" />
+            </div>
+            <CreateCollectionForm onClose={onClose} onAddToCollection={(id: string) => onAddToCollection({ collectionId: id })} redirect={false} />
+        </>
+    )
+}

package/src/features/store/objects/selection/actions/ChangeTypeAction.tsx

@@ -0,0 +1,76 @@
+import { useToast } from "@vertesia/ui/core";
+import { useUserSession } from "@vertesia/ui/session";
+import { useCallback, useState } from "react";
+import { SelectContentTypeModal } from "../../../../store";
+import { useObjectsActionCallback } from "../ObjectsActionContext";
+import { ActionComponentTypeProps, ObjectsActionSpec } from "../ObjectsActionSpec";
+
+export function ChangeTypeActionComponent({ action, objectIds, children }: ActionComponentTypeProps) {
+    const { store } = useUserSession();
+    const toast = useToast();
+    const [isOpen, setOpen] = useState(false);
+    const callback = useCallback(() => {
+        setOpen(true);
+        return Promise.resolve(true);
+    }, [])
+
+    useObjectsActionCallback(action.id, callback);
+
+    const handleTypeSelect = (typeId?: string | null | undefined) => {
+        // Close the modal
+        setOpen(false);
+
+        // If no selection was made
+        if (typeId === undefined) {
+            return;
+        }
+
+        // Execute the operation with the selected typeId
+        store.runOperation({
+            name: "change_type",
+            ids: objectIds,
+            params: { typeId }
+        }).then((r) => {
+            toast({
+                status: 'success',
+                title: 'Change Type',
+                description: `Change the type of ${objectIds.length} objects is ${r.status === 'in_progress' ? 'in progress' : 'completed'}`,
+                duration: 2000
+            });
+        }).catch(err => {
+            toast({
+                status: 'error',
+                title: 'Error changing type',
+                description: err.message,
+                duration: 5000
+            });
+        });
+    };
+
+    return (
+        <div>
+            {children}
+            <SelectContentTypeModal
+                isOpen={isOpen}
+                onClose={handleTypeSelect}
+                title="Change Content Type"
+                confirmLabel="Change Type"
+            >
+                <div className="text-sm flex flex-col gap-x-2">
+                    <p>Choose a new Content Type for the selected object{objectIds.length > 1 ? 's' : ' '}
+                        or let the system choose or generate a type based on the content.</p>
+                    <p className="pt-2 text-xs">Note: This action will raise the <code>change_type</code> event and will trigger the standard intake workflows
+                        which may reset the object properties.</p>
+                </div>
+            </SelectContentTypeModal>
+        </div>
+    )
+}
+
+export const ChangeTypeAction: ObjectsActionSpec = {
+    id: "changeType",
+    name: 'Change Content Type',
+    description: 'Change the Content Type of the selected documents',
+    confirm: false,
+    component: ChangeTypeActionComponent,
+}

package/src/features/store/objects/selection/actions/ConfirmAction.tsx

@@ -0,0 +1,46 @@
+import { ConfirmModal } from "@vertesia/ui/core";
+import { useCallback, useState } from "react";
+import { ObjectsActionCallback, useObjectsActionCallback } from "../ObjectsActionContext";
+import { ObjectsActionParams, ObjectsActionSpec } from "../ObjectsActionSpec";
+
+interface ObjectsActionComponentProps {
+    action: ObjectsActionSpec,
+    callback: ObjectsActionCallback,
+    children?: React.ReactNode;
+}
+/**
+ * Generic implementation of an action component.
+ * The action component is not the one which is clicked by the user, but the one that is registering the action callback.
+ * @param param0
+ * @returns
+ */
+export default function ConfirmAction({ action, callback, children }: ObjectsActionComponentProps) {
+
+    const [showConfirmModal, setShowConfirmModal] = useState(false);
+    const confirmationText = action.confirmationText || `Are you sure you want to ${action.name}?`;
+
+    const _callback = useCallback((params: ObjectsActionParams) => {
+        if (action.confirm) {
+            setShowConfirmModal(true);
+            return Promise.resolve(true);
+        } else {
+            return callback(params);
+        }
+    }, [action.confirm, callback]);
+
+    const ctx = useObjectsActionCallback(action.id, _callback);
+
+    const onConfirm = () => {
+        setShowConfirmModal(false);
+        callback({ ...ctx.params, action });
+    };
+
+    return (
+        <>
+            {children}
+            <ConfirmModal onConfirm={onConfirm} onCancel={() => setShowConfirmModal(false)} title={"Are you sure?"} content={confirmationText} isOpen={showConfirmModal} />
+        </>
+    );
+
+
+}

package/src/features/store/objects/selection/actions/DeleteObjectsAction.tsx

@@ -0,0 +1,77 @@
+import { useCallback } from 'react';
+
+import { useToast } from '@vertesia/ui/core';
+import { useNavigate } from "@vertesia/ui/router";
+import { useUserSession } from '@vertesia/ui/session';
+
+import { useDocumentSearch } from '../../../../store';
+import { useObjectsActionContext } from '../ObjectsActionContext';
+import { ActionComponentTypeProps, ObjectsActionSpec } from '../ObjectsActionSpec';
+import ConfirmAction from './ConfirmAction';
+
+function DeleteObjectsActionComponent({ action, objectIds, children }: ActionComponentTypeProps) {
+    const ctx = useObjectsActionContext();
+
+    const toast = useToast();
+    const { client } = useUserSession();
+    const search = useDocumentSearch();
+    const navigate = useNavigate();
+
+    const callback = useCallback(() => {
+        if (!objectIds || !objectIds.length) {
+            toast({
+                status: 'error',
+                title: 'No objects selected',
+                description: 'Please select objects to delete',
+                duration: 3000
+            });
+            return Promise.resolve(false);
+        }
+
+        return Promise.all(objectIds.map(id => client.store.objects.delete(id))).then((res) => {
+            const plural = res.length > 1 ? 's' : '';
+            toast({
+                status: 'success',
+                title: `${res.length} object${plural} deleted`,
+                description: `Objects ${res.map(d => d.id).join(", ")} have been deleted`,
+                duration: 2000
+            });
+
+            if (search) { // we are in the objects table view
+                ctx.params?.selection?.removeAll();
+                const facets = JSON.parse(JSON.stringify(search.facets))
+                if (objectIds.length === facets._value.total) {
+                    search.resetFacets();
+                }
+                search.search();
+            } else {
+                // we are in the object view
+                // go back to the parent
+                navigate("/objects");
+            }
+        }).catch(err => {
+            toast({
+                status: 'error',
+                title: 'Error deleting objects',
+                description: err.message,
+                duration: 5000
+            });
+        });
+    }, [objectIds]);
+
+    return (
+        <ConfirmAction action={action} callback={callback}>
+            {children}
+        </ConfirmAction>
+    )
+}
+
+export const DeleteObjectsAction: ObjectsActionSpec = {
+    id: 'delete',
+    name: 'Delete',
+    description: 'Delete the selected objects',
+    confirm: true,
+    confirmationText: 'Are you sure you want to delete the selected objects?',
+    component: DeleteObjectsActionComponent,
+    destructive: true
+}

package/src/features/store/objects/selection/actions/ExportPropertiesAction.tsx

@@ -0,0 +1,117 @@
+import { useToast } from "@vertesia/ui/core";
+import { useUserSession } from "@vertesia/ui/session";
+import { useCallback, useState } from "react";
+import { ExportPropertiesModal, ExportTypes } from "../../../../store";
+import { useObjectsActionCallback } from "../ObjectsActionContext";
+import { ActionComponentTypeProps, ObjectsActionSpec } from "../ObjectsActionSpec";
+
+export function ExportPropertiesComponent({ action, objectIds }: ActionComponentTypeProps) {
+    const { store } = useUserSession();
+    const toast = useToast();
+    const [isOpen, setOpen] = useState(false);
+    const [isExporting, setIsExporting] = useState(false);
+    const callback = useCallback(() => {
+        setOpen(true);
+        return Promise.resolve(true);
+    }, [])
+
+    const ctx = useObjectsActionCallback(action.id, callback);
+
+    const onExportType = (exportType?: string | null | undefined, exportAll?: boolean) => {
+        if (exportType && (exportAll || objectIds.length > 0)) {
+            setIsExporting(true);
+
+            const query = ctx.params?.search?.query || {};
+            const search_objectIds = ctx.params?.search?.result?.value?.objects?.map(obj => obj.id) || undefined;
+
+            const getChildObjects = async (objectId: string) => {
+                return store.objects.list({
+                    query: {
+                        parent: objectId,
+                    }
+                }).then((response) => {
+                    return response.map(obj => obj.id);
+                });
+            }
+
+            const getObjectIds = async () => {
+                if (exportAll) {
+                    // If there is a vector search use that.
+                    if (search_objectIds) {
+                        return query.vector ? search_objectIds : [];
+                    }
+                    // Nothing is selected, export all objects.
+                    if (objectIds.length === 0) {
+                        return [];
+                    }
+                    // If there is no search, and 1 object is selected we are on the object page.
+                    // Export all children of the object and the object itself.
+                    return (await getChildObjects(objectIds[0])).concat(objectIds);
+                } else {
+                    return objectIds;
+                }
+            }
+
+            getObjectIds().then((Ids) => {
+                // When exporting all, send search result if a vector search was used
+                // otherwise send the query.
+                store.objects.exportProperties({
+                    objectIds: Ids,
+                    type: exportType,
+                    query: exportAll && !query.vector ? query : { type: query.type },
+                }).then((response) => {
+                    let data;
+
+                    if (exportType === ExportTypes.CSV) {
+                        data = new Blob([response.data], { type: response.type });
+                    } else if (exportType === ExportTypes.JSON) {
+                        data = new Blob([JSON.stringify(response.data)], { type: response.type });
+                    } else {
+                        const responseData: any = response.data
+                        data = new Blob([new Uint8Array(responseData.data)], { type: response.type });
+                    }
+
+                    const url = window.URL.createObjectURL(data);
+                    const a: any = document.createElement('a');
+                    a.download = response.name;
+                    a.href = url;
+                    a.click();
+
+                    toast({
+                        status: 'success',
+                        title: 'Export Properties',
+                        description: exportAll ? 'Export the properties of all objects completed'
+                            : `Export the properties of ${objectIds.length} object${objectIds.length > 1 ? 's' : ''} is completed`,
+                        duration: 2000
+                    });
+                }).catch(err => {
+                    toast({
+                        status: 'error',
+                        title: 'Error Export Properties',
+                        description: err.message,
+                        duration: 5000
+                    });
+                }).finally(() => {
+                    setIsExporting(false);
+                    setOpen(false);
+                });
+            });
+        } else {
+            setOpen(false);
+        }
+    }
+
+    return (
+        <div>
+            <ExportPropertiesModal isExporting={isExporting} isOpen={isOpen} onClose={onExportType} />
+        </div>
+    )
+}
+
+export const ExportPropertiesAction: ObjectsActionSpec = {
+    id: "exportProperties",
+    name: 'Export Properties',
+    description: 'Export all Object Properties',
+    confirm: false,
+    component: ExportPropertiesComponent,
+}

package/src/features/store/objects/selection/actions/RemoveFromCollectionAction.tsx

@@ -0,0 +1,77 @@
+import { useCallback } from 'react';
+
+import { useToast } from '@vertesia/ui/core';
+import { useUserSession } from '@vertesia/ui/session';
+
+import { useDocumentSearch } from '../../search';
+import { useObjectsActionContext } from '../ObjectsActionContext';
+import { ActionComponentTypeProps, ObjectsActionSpec } from '../ObjectsActionSpec';
+import ConfirmAction from './ConfirmAction';
+
+function RemoveFromCollectionActionComponent({ action, objectIds, collectionId }: ActionComponentTypeProps) {
+    const ctx = useObjectsActionContext();
+
+    const toast = useToast();
+    const { client } = useUserSession();
+    const search = useDocumentSearch();
+
+    const callback = useCallback(() => {
+        if (!objectIds || !objectIds.length) {
+            toast({
+                status: 'error',
+                title: 'No objects selected',
+                description: 'Please select objects to remove from collection',
+                duration: 3000
+            });
+            return Promise.resolve(false);
+        }
+
+        if (!collectionId) {
+            toast({
+                status: 'error',
+                title: 'No collection context',
+                description: 'Cannot remove objects: no collection specified',
+                duration: 3000
+            });
+            return Promise.resolve(false);
+        }
+
+        return client.store.collections.deleteMembers(collectionId, objectIds).then(() => {
+            const plural = objectIds.length > 1 ? 's' : '';
+            toast({
+                status: 'success',
+                title: `${objectIds.length} object${plural} removed from collection`,
+                description: `Objects have been removed from the collection`,
+                duration: 2000
+            });
+
+            if (search) {
+                ctx.params?.selection?.removeAll();
+                search.search();
+            }
+        }).catch((err: any) => {
+            toast({
+                status: 'error',
+                title: 'Error removing objects from collection',
+                description: err.message,
+                duration: 5000
+            });
+        });
+    }, [objectIds, collectionId]);
+
+    return (
+        <ConfirmAction action={action} callback={callback}>
+            {/* Action component content if needed */}
+        </ConfirmAction>
+    )
+}
+
+export const RemoveFromCollectionAction: ObjectsActionSpec = {
+    id: 'removeFromCollection',
+    name: 'Remove from Collection',
+    description: 'Remove the selected objects from this collection',
+    confirm: true,
+    confirmationText: 'Are you sure you want to remove the selected objects from this collection?',
+    component: RemoveFromCollectionActionComponent,
+    destructive: true
+}

package/src/features/store/objects/selection/actions/StartWorkflowComponent.tsx

@@ -0,0 +1,122 @@
+import { useUserSession } from "@vertesia/ui/session";
+import { Button, VModal, VModalBody, VModalFooter, VModalTitle, SelectList, useToast } from "@vertesia/ui/core";
+import { useCallback, useState } from "react";
+import { useObjectsActionCallback, useObjectsActionContext } from "../ObjectsActionContext";
+import { ActionComponentTypeProps, ObjectsActionSpec } from "../ObjectsActionSpec";
+
+export function StartWorkflowComponent({ action, objectIds, collectionId }: ActionComponentTypeProps) {
+    const toast = useToast();
+    const { client } = useUserSession();
+    const [isOpen, setOpen] = useState(false);
+
+    const callback = useCallback(() => {
+        setOpen(true);
+        return Promise.resolve(true);
+    }, []);
+
+    const onStartWorkflow = (workflowId?: string | undefined) => {
+        setOpen(false);
+        if (!workflowId) {
+            return;
+        }
+        // const objectIds = params.selection.getObjectIds();
+        // const workflowId = params.action.id;
+        return client.store.workflows.rules
+            .execute(workflowId, objectIds, { collection_id: collectionId })
+            .then(() => {
+                toast({
+                    title: "Workflow started",
+                    status: "success",
+                    duration: 3000,
+                });
+            })
+            .catch((err) => {
+                toast({
+                    title: "Error starting workflow",
+                    status: "error",
+                    description: err.message,
+                    duration: 9000,
+                });
+            });
+    };
+
+    useObjectsActionCallback(action.id, callback);
+
+    return <StartWorkflowModal isOpen={isOpen} onClose={onStartWorkflow} />;
+}
+
+export const StartWorkflowAction: ObjectsActionSpec = {
+    id: "startWorkflow",
+    name: "Start Workflow",
+    description: "Start an workflow on the selected objects",
+    confirm: false,
+    hideInList: true,
+    component: StartWorkflowComponent,
+};
+
+interface StartWorkflowModalProps {
+    isOpen: boolean;
+    onClose: (workflowId?: string | undefined) => void;
+}
+function StartWorkflowModal({ isOpen, onClose }: StartWorkflowModalProps) {
+    return (
+        <VModal onClose={() => onClose(undefined)} isOpen={isOpen} className="">
+            <VModalTitle>Start a Workflow by Rule</VModalTitle>
+            <StartWorkflowBody onClose={onClose} />
+        </VModal>
+    );
+}
+
+function optionLayout(option: ObjectsActionSpec) {
+    return {
+        label: (
+            <div>
+                <div>{option.name}</div>
+                <div className="text-sm text-muted">{option.description}</div>
+            </div>
+        ),
+        reverse: true,
+    };
+}
+
+interface StartWorkflowBodyProps {
+    onClose: (workflowId?: string | undefined) => void;
+}
+function StartWorkflowBody({ onClose }: StartWorkflowBodyProps) {
+    const [selected, setSelected] = useState<ObjectsActionSpec | undefined>(undefined);
+    const context = useObjectsActionContext();
+
+    const onSelect = (value: ObjectsActionSpec) => {
+        setSelected(value);
+    };
+
+    const onStart = () => {
+        if (selected) {
+            onClose(selected.id);
+        }
+    };
+
+    return (
+        <div>
+            <VModalBody>
+                <div className="pb-2">Choose a workflow rule to start:</div>
+                <div className="max-h-[420px] overflow-y-scroll border-border border rounded-md">
+                    <SelectList
+                        options={context.wfRules}
+                        optionLayout={optionLayout}
+                        onChange={onSelect}
+                        value={selected}
+                    />
+                </div>
+            </VModalBody>
+            <VModalFooter>
+                <Button variant="secondary" onClick={() => onClose()}>
+                    Cancel
+                </Button>
+                <Button onClick={onStart} isDisabled={!selected}>
+                    Start
+                </Button>
+            </VModalFooter>
+        </div>
+    );
+}

package/src/features/store/objects/selection/actions/index.ts

@@ -0,0 +1,7 @@
+export * from "./AddToCollectionAction";
+export * from "./ChangeTypeAction";
+export * from "./ConfirmAction";
+export * from "./DeleteObjectsAction";
+export * from "./ExportPropertiesAction";
+export * from "./RemoveFromCollectionAction";
+export * from "./StartWorkflowComponent";

package/src/features/store/objects/selection/index.ts

@@ -0,0 +1,4 @@
+export * from "./actions";
+export * from "./ObjectsActionContext";
+export * from "./ObjectsActionSpec";
+export * from "./SelectionActions";