@vertesia/ui 0.60.0 → 0.61.0

package/src/features/store/types/ContentObjectTypeView.tsx

@@ -0,0 +1,244 @@
+import dayjs from 'dayjs';
+import LocalizedFormat from 'dayjs/plugin/localizedFormat';
+import { useState } from 'react';
+
+import { ColumnLayout, ContentObjectType } from '@vertesia/common';
+import { Button, Center, ErrorBox, Popover, PopoverContent, PopoverTrigger, Spinner, Switch, Tab, Tabs, TabsBar, TabsPanel, useFetch, useToast } from '@vertesia/ui/core';
+import { FullHeightLayout } from '@vertesia/ui/layout';
+import { useLocation, useNavigate } from "@vertesia/ui/router";
+import { useUserSession } from '@vertesia/ui/session';
+import { PropertiesView } from '@vertesia/ui/widgets';
+import { EllipsisVertical, SquarePen, Trash2 } from 'lucide-react';
+import { GenericPageNavHeader } from "../../layout";
+import { UserInfo } from '../../user/UserInfo';
+
+import { CreateOrUpdateTypeModal, CreateOrUpdateTypePayload } from './CreateOrUpdateTypeModal';
+import { ObjectSchemaEditor } from './ObjectSchemaEditor';
+import { TableLayoutEditor } from './TableLayoutEditor';
+
+dayjs.extend(LocalizedFormat)
+
+interface ContentObjectTypeViewProps {
+    typeId: string;
+}
+export function ContentObjectTypeView({ typeId }: ContentObjectTypeViewProps) {
+    const { store, user } = useUserSession();
+    const { hash } = useLocation();
+    const currentTab = hash ? hash.substring(1) : undefined;
+
+    let { data: objectType, isLoading, error, refetch } = useFetch(() => {
+        if (user) {
+            return store.types.retrieve(typeId);
+        } else {
+            return Promise.resolve(undefined);
+        }
+    }, [user]);
+
+    if (error) {
+        return <ErrorBox title="Error">{error.message}</ErrorBox>;
+    }
+
+    if (isLoading) {
+        return <Center className="py-10"><Spinner size='lg' /></Center>
+    }
+
+    if (!objectType) {
+        return null;
+    }
+
+    const actions = [
+        <DeleteTypeButton key="delete" objectType={objectType} />
+    ];
+
+    const onSchemaUpdate = (value: any) => {
+        objectType.object_schema = value.schema;
+    };
+
+    const onLayoutUpdate = (value: ColumnLayout[] | undefined) => {
+        objectType.table_layout = value;
+    };
+
+    const tabs: Tab[] = [
+        { name: 'metadata', label: "Metadata", href: "#metadata", content: <MetadataView objectType={objectType} /> },
+        { name: 'schema', label: "Object Schema", href: "#schema", content: <ObjectSchemaEditor objectType={objectType} onSchemaUpdate={onSchemaUpdate} /> },
+        { name: 'layout', label: "Table Layout", href: "#layout", content: <TableLayoutEditor objectType={objectType} onLayoutUpdate={onLayoutUpdate} /> },
+    ];
+
+    const breadcrumbs = [breadcrumb()];
+    const title = pageTitle(objectType, refetch);
+    const description = objectType.description;
+
+    return (
+        <FullHeightLayout>
+            <GenericPageNavHeader title={title} description={description} actions={[actions]} breadcrumbs={breadcrumbs} />
+            <Tabs tabs={tabs} current={currentTab}>
+                <TabsBar />
+                <FullHeightLayout.Body>
+                    <div className="h-[calc(100vh-187px)] overflow-auto">
+                        <TabsPanel />
+                    </div>
+                </FullHeightLayout.Body>
+            </Tabs>
+        </FullHeightLayout>
+    );
+}
+
+function breadcrumb() {
+    return <span>Content Type</span>
+}
+
+function pageTitle(objectType: ContentObjectType, refetch: () => Promise<unknown>) {
+    return <PageTitle objectType={objectType} refetch={refetch} />
+}
+
+function PageTitle({ objectType, refetch }: { objectType: ContentObjectType, refetch: () => Promise<unknown> }) {
+    const toast = useToast();
+    const session = useUserSession();
+    const { store } = session;
+    const [showEditModal, setShowEditModal] = useState(false);
+    const onCloseEditModal = (payload?: CreateOrUpdateTypePayload) => {
+        if (!payload) {
+            setShowEditModal(false);
+            return Promise.resolve();
+        }
+        return store.types.update(objectType.id, payload).then(() => {
+            toast({
+                status: 'success',
+                title: 'Type updated',
+                duration: 2000
+            });
+            return refetch().finally(() => session.reloadTypes());
+        }).catch(err => {
+            toast({
+                status: 'error',
+                title: 'Error updating type',
+                description: err.message,
+                duration: 5000
+            })
+        });
+    }
+    return <>
+        <div className='flex items-center gap-x-2'>{objectType.name} <Button variant="ghost" size="sm" title="Edit" onClick={() => setShowEditModal(true)}><SquarePen className="size-4" /></Button></div>
+        <CreateOrUpdateTypeModal okLabel="Save Changes" title="Edit Type" isOpen={showEditModal} onClose={onCloseEditModal} initialPayload={objectType} />
+    </>
+}
+
+interface MetadataViewProps {
+    objectType: ContentObjectType;
+}
+function MetadataView({ objectType }: MetadataViewProps) {
+    return (
+        <PropertiesView className='w-full' properties={[
+            { name: "Id", value: objectType.id },
+            { name: "Name", value: objectType.name },
+            { name: "Is Chunkable", value: <ChunkableSwitch objectType={objectType} /> },
+            { name: "Strict Mode", value: <StrictModeSwitch objectType={objectType} /> },
+            { name: 'Created By', value: <UserInfo userRef={objectType.created_by} /> },
+            { name: 'Created At', value: dayjs(objectType.created_at).format('LLL') },
+            { name: 'Updated By', value: <UserInfo userRef={objectType.updated_by} /> },
+            { name: 'Updated At', value: dayjs(objectType.updated_at).format('LLL') },
+        ]}
+        />
+    );
+}
+
+
+interface TypeSwitchProps {
+    objectType: ContentObjectType;
+    field: 'is_chunkable' | 'strict_mode';
+    initialValue?: boolean;
+}
+
+function TypeSwitch({ objectType, field, initialValue }: TypeSwitchProps) {
+    const [value, setValue] = useState(initialValue ?? false);
+    const toast = useToast();
+    const { store } = useUserSession();
+
+    const onChange = (value: boolean) => {
+        store.types.update(objectType.id, {
+            [field]: value
+        }).then(() => {
+            setValue(value);
+            toast({
+                status: 'success',
+                title: 'Successfully Updated.',
+                duration: 2000
+            })
+        }).catch((err) => {
+            toast({
+                status: 'error',
+                title: 'Failed to update.',
+                description: err.message,
+                duration: 5000
+            })
+        });
+    }
+
+    return (
+        <Switch value={value} onChange={onChange} />
+    )
+}
+
+interface ChunkableSwitchProps {
+    objectType: ContentObjectType;
+}
+
+function ChunkableSwitch({ objectType }: ChunkableSwitchProps) {
+    return (
+        <TypeSwitch objectType={objectType} field="is_chunkable" initialValue={objectType.is_chunkable ?? false} />
+    )
+}
+
+interface StrictModeSwitchProps {
+    objectType: ContentObjectType;
+}
+
+function StrictModeSwitch({ objectType }: StrictModeSwitchProps) {
+    return (
+        <TypeSwitch objectType={objectType} field="strict_mode" initialValue={objectType.strict_mode ?? false} />
+    )
+}
+interface DeleteTypeButtonProps {
+    objectType: ContentObjectType;
+}
+function DeleteTypeButton({ objectType }: DeleteTypeButtonProps) {
+    const toast = useToast();
+    const navigate = useNavigate();
+    const { store } = useUserSession();
+    const onDelete = () => {
+        confirm('Are you sure you want to delete this rule?') &&
+            store.types.delete(objectType.id).then(() => {
+                toast({
+                    status: 'success',
+                    title: `Object type ${objectType.name} deleted`,
+                    duration: 2000
+                });
+                navigate('/types');
+            }).catch(err => {
+                toast(
+                    {
+                        status: 'error',
+                        title: 'Failed to delete rule',
+                        description: err.message,
+                        duration: 5000
+                    }
+                )
+            })
+    }
+    return (
+        <Popover hover>
+            <PopoverTrigger>
+                <div className='cursor-pointer hover:bg-muted p-2 rounded-md'>
+                    <Button variant="ghost" size='sm' title='More actions'><EllipsisVertical /></Button>
+                </div>
+            </PopoverTrigger >
+            <PopoverContent className='p-0 w-35' align='end'>
+                <div className="py-2 px-1.5 flex justify-center w-full">
+                    <Button variant="ghost" onClick={onDelete} className='w-full'>
+                        <Trash2 className='size-4' /> Delete
+                    </Button>
+                </div>
+            </PopoverContent>
+        </Popover >
+    )
+}

package/src/features/store/types/ContentObjectTypesSearch.tsx

@@ -0,0 +1,111 @@
+import { useEffect, useRef, useState } from 'react';
+
+import { ContentObjectTypesTable } from './ContentObjectTypesTable';
+import { useWatchSearchResult } from './search/ObjectTypeSearchContext';
+import { useUserSession } from '@vertesia/ui/session';
+import { EmptyCollection, ErrorBox, Input, SelectBox, useToast } from '@vertesia/ui/core';
+import { useDebounce, useIntersectionObserver } from '@vertesia/ui/core';
+
+import { CreateOrUpdateTypeModal, CreateOrUpdateTypePayload } from './CreateOrUpdateTypeModal';
+
+enum ChunkableOptions { true = "Yes", false = "No" };
+
+interface ContentObjectTypesSearchProps {
+    isDirty?: boolean;
+}
+export function ContentObjectTypesSearch({ isDirty = false }: ContentObjectTypesSearchProps) {
+    const session = useUserSession();
+    const { store } = session;
+
+    const toast = useToast();
+
+    const [isReady, setIsReady] = useState(false);
+    const { search, isLoading, error, objects } = useWatchSearchResult();
+
+    const [searchTerm, setSearchTerm] = useState<string>('');
+    const debounceValue = useDebounce(searchTerm, 500);
+
+    const loadMoreRef = useRef<HTMLDivElement>(null);
+    useIntersectionObserver(loadMoreRef, () => {
+        isReady && search.loadMore();
+    }, { deps: [isReady] });
+
+    useEffect(() => {
+        search.search().then(() => setIsReady(true));
+    }, []);
+
+    useEffect(() => {
+        search.query.name = searchTerm;
+        search.search().then(() => setIsReady(true));
+    }, [debounceValue]);
+
+    const [chunkable, setChunkable] = useState(undefined);
+    const onChunkableChange = (data: any) => {
+        setChunkable(data);
+    };
+
+    useEffect(() => {
+        search.query.chunkable = chunkable ? chunkable == 'Yes' : undefined
+        search.search().then(() => setIsReady(true));
+    }, [chunkable]);
+
+    useEffect(() => {
+        if (isDirty && isReady) {
+            search.search().then(() => setIsReady(true));
+        }
+    }, [isDirty]);
+
+    const [showCreateModal, setShowCreateModal] = useState(false);
+    const onOpenCreateModal = () => {
+        setShowCreateModal(true);
+    };
+
+    if (error) {
+        return (
+            <ErrorBox title="Failed to fetch ObjectTypes">{error.message}</ErrorBox>
+        );
+    };
+
+    const onCloseCreateModal = async (payload?: CreateOrUpdateTypePayload) => {
+        if (!payload) {
+            setShowCreateModal(false);
+            return Promise.resolve();
+        }
+        return store.types.create(payload).then(async () => {
+            toast({
+                status: 'success',
+                title: 'Type created',
+                duration: 2000
+            });
+            session.reloadTypes();
+            search.search().then(() => setIsReady(true));
+        }).catch(err => {
+            toast({
+                status: 'error',
+                title: 'Error creating type',
+                description: err.message,
+                duration: 5000
+            });
+        });
+    };
+
+    return (
+        <div>
+            <div className="flex gap-4">
+                <Input placeholder="Filter by Name" value={searchTerm} onChange={setSearchTerm} />
+                <SelectBox className="w-60" isClearable options={Object.values(ChunkableOptions)} value={chunkable} onChange={onChunkableChange} placeholder={"Is Chunkable"} />
+            </div>
+            <div className="w-full">
+                {
+                    (!isLoading && objects?.length === 0) ?
+                        <EmptyCollection title="No Type" buttonLabel='Create Type' onClick={onOpenCreateModal}>
+                            Get started by creating a new Type.
+                        </EmptyCollection >
+                        :
+                        <ContentObjectTypesTable objects={objects} isLoading={isLoading} />
+                }
+                <CreateOrUpdateTypeModal okLabel="Create" title="Create Type" isOpen={showCreateModal} onClose={onCloseCreateModal} />
+            </div>
+        </div>
+    )
+}

package/src/features/store/types/ContentObjectTypesTable.tsx

@@ -0,0 +1,38 @@
+import { ContentObjectTypeItem } from "@vertesia/common";
+import { TBody, Table } from "@vertesia/ui/core";
+import { useNavigate } from "@vertesia/ui/router";
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+
+dayjs.extend(relativeTime);
+
+interface ContentObjectTypesTableProps {
+    objects?: ContentObjectTypeItem[];
+    isLoading: boolean;
+}
+export function ContentObjectTypesTable({ objects, isLoading }: ContentObjectTypesTableProps) {
+    const navigate = useNavigate();
+
+    return (
+        <div>
+            <Table className="w-full">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Is Chunkable?</th>
+                        <th>Updated At</th>
+                    </tr>
+                </thead>
+                <TBody isLoading={isLoading} columns={3}>
+                    {objects?.map((obj: any) => (
+                        <tr key={obj.id} onClick={() => navigate(`/types/${obj.id}`)} className='cursor-pointer hover:bg-muted'>
+                            <td>{obj.name}</td>
+                            <td>{obj.is_chunkable ? 'Yes' : 'No'}</td>
+                            <td>{dayjs(obj.updated_at).fromNow()}</td>
+                        </tr>
+                    ))}
+                </TBody>
+            </Table>
+        </div>
+    )
+}

package/src/features/store/types/ContentObjectTypesView.tsx

@@ -0,0 +1,71 @@
+import { useEffect, useState } from 'react';
+
+import { Button, useToast } from '@vertesia/ui/core';
+import { FullHeightLayout } from '@vertesia/ui/layout';
+import { useUserSession } from '@vertesia/ui/session';
+import { GenericPageNavHeader } from "../../layout";
+import { ContentObjectTypesSearch } from './ContentObjectTypesSearch';
+import { ObjectTypeSearchProvider } from './search/ObjectTypeSearchProvider';
+
+import { CreateOrUpdateTypeModal, CreateOrUpdateTypePayload } from './CreateOrUpdateTypeModal';
+
+export enum ChunkableOptions {
+    true = "Yes",
+    false = "No"
+};
+
+interface ContentObjectTypesViewProps { }
+export function ContentObjectTypesView({ }: ContentObjectTypesViewProps) {
+    const toast = useToast();
+    const [showCreateModal, setShowCreateModal] = useState(false);
+    const session = useUserSession();
+    const { store } = session;
+
+    const actions = <Button key="create" variant="primary" onClick={() => setShowCreateModal(true)}>Create Type</Button>;
+
+    const [isDirty, setIsDirty] = useState(false);
+    useEffect(() => {
+        if (isDirty) {
+            setIsDirty(false);
+        }
+    }, [isDirty]);
+
+    const onCloseCreateModal = async (payload?: CreateOrUpdateTypePayload) => {
+        if (!payload) {
+            setShowCreateModal(false);
+            return Promise.resolve();
+        }
+        return store.types.create(payload).then(async () => {
+            toast({
+                status: 'success',
+                title: 'Type created',
+                duration: 2000
+            });
+            session.reloadTypes();
+            setIsDirty(true);
+        }).catch(err => {
+            toast({
+                status: 'error',
+                title: 'Error creating type',
+                description: err.message,
+                duration: 5000
+            });
+        });
+    };
+
+    const breadcrumbs = [
+        <span key='0'>Content Type</span>
+    ];
+
+    return (
+        <FullHeightLayout>
+            <GenericPageNavHeader actions={actions} breadcrumbs={breadcrumbs} title="Content Types" />
+            <CreateOrUpdateTypeModal okLabel="Create" title="Create Type" isOpen={showCreateModal} onClose={onCloseCreateModal} />
+            <ObjectTypeSearchProvider>
+                <FullHeightLayout.Body>
+                    <ContentObjectTypesSearch isDirty={isDirty}></ContentObjectTypesSearch>
+                </FullHeightLayout.Body>
+            </ObjectTypeSearchProvider>
+        </FullHeightLayout>
+    );
+}

package/src/features/store/types/CreateOrUpdateTypeModal.tsx

@@ -0,0 +1,70 @@
+import { useState } from 'react';
+
+import { Button, Input, Modal, ModalBody, ModalFooter, ModalTitle, Switch, useToast } from '@vertesia/ui/core';
+
+export interface CreateOrUpdateTypePayload {
+    name: string;
+    description?: string;
+    strict_mode?: boolean;
+}
+interface CreateOrUpdateTypeModalProps {
+    title: string;
+    isOpen: boolean;
+    onClose: (payload?: CreateOrUpdateTypePayload) => Promise<unknown>;
+    okLabel: string;
+    initialPayload?: CreateOrUpdateTypePayload;
+}
+export function CreateOrUpdateTypeModal({ title, isOpen, onClose, okLabel, initialPayload }: CreateOrUpdateTypeModalProps) {
+    const toast = useToast();
+    const [name, setName] = useState<string | undefined>(initialPayload?.name);
+    const [description, setDescription] = useState<string | undefined>(initialPayload?.description);
+    const [strictMode, setStrictMode] = useState<boolean>(initialPayload?.strict_mode ?? false);
+
+    const onSave = () => {
+        if (!name) {
+            toast({
+                status: 'error',
+                title: 'Name is required',
+                duration: 5000
+            })
+            return;
+        }
+        const payload = { name, description, strict_mode: strictMode };
+        onClose(payload).then(() => onClose());
+
+        setName(undefined);
+        setDescription(undefined);
+        setStrictMode(false);
+    };
+
+    return (
+        <Modal isOpen={isOpen} onClose={() => onClose()}>
+            <ModalTitle>{title}</ModalTitle>
+            <ModalBody className="pt-0">
+                <div className='h-full flex flex-col gap-4 content-between'>
+                    <div>
+                        <label className="block text-sm font-medium text-muted">Name</label>
+                        <Input value={name} onChange={setName} />
+                    </div>
+                    <div>
+                        <label className="block text-sm font-medium text-muted">Description</label>
+                        <Input value={description} onChange={setDescription} />
+                    </div>
+                    <div className="flex items-center justify-between">
+                        <label className="block text-sm font-medium text-muted-foreground">Strict Mode</label>
+                        <Switch value={strictMode} onChange={setStrictMode} />
+                    </div>
+                    <div className="text-xs text-muted-foreground">
+                        When enabled, objects will be validated against the schema at generation and save time.
+                    </div>
+                </div>
+            </ModalBody>
+            <ModalFooter>
+                <div className='flex justify-end gap-4'>
+                    <Button variant="secondary" onClick={() => onClose()}>Cancel</Button>
+                    <Button variant="primary" onClick={() => onSave()}>{okLabel}</Button>
+                </div>
+            </ModalFooter>
+        </Modal>
+    )
+}

package/src/features/store/types/ObjectSchemaEditor.tsx

@@ -0,0 +1,127 @@
+import { basicSetup } from 'codemirror';
+import { useMemo, useRef, useState } from 'react';
+
+import { useUserSession } from '@vertesia/ui/session';
+import { json } from '@codemirror/lang-json';
+import { CodeMirrorEditor, EditorApi } from '@vertesia/ui/widgets';
+import { Button, useToast } from '@vertesia/ui/core';
+import { SchemaEditor, useSchema } from '@vertesia/ui/widgets';
+import { ContentObjectType } from '@vertesia/common';
+
+const CODE_MIRROR_EXTENSIONS = [basicSetup, json()];
+
+interface ObjectSchemaEditorProps {
+    objectType: ContentObjectType;
+    onSchemaUpdate: (jsonSchema: any) => void;
+}
+export function ObjectSchemaEditor({ objectType, onSchemaUpdate }: ObjectSchemaEditorProps) {
+    const { store } = useUserSession();
+    const toast = useToast();
+
+    const [isUpdating, setUpdating] = useState(false);
+    const schema = useSchema(objectType.object_schema);
+    const editorRef = useRef<EditorApi | undefined>(undefined);
+    const [displayJson, setDisplayJson] = useState(false);
+
+    const value = useMemo(() => {
+        return jsonToContent(schema.schema);
+    }, [schema]);
+
+    const onSave = () => {
+        if (displayJson) {
+            if (!updateSchemaFromJson()) {
+                return
+            }
+        }
+
+        setUpdating(true);
+        store.types.update(objectType.id, { object_schema: schema.schema }).then(() => {
+            onSchemaUpdate(schema);
+            toast({
+                status: 'success',
+                title: 'Schema updated',
+                description: 'The schema has been updated successfully',
+                duration: 2000
+            });
+        }).catch((err) => {
+            toast({
+                status: 'error',
+                title: 'Failed to update schema',
+                description: err.message,
+                duration: 5000
+            })
+        }).finally(() => {
+            setUpdating(false);
+        });
+    };
+
+    const handleOnSave = () => {
+        if (displayJson) {
+            if (!updateSchemaFromJson()) {
+                return
+            }
+        }
+
+        setDisplayJson(prev => !prev)
+    };
+
+    const updateSchemaFromJson = () => {
+        if (editorRef.current) {
+            const value = editorRef.current.getValue();
+            try {
+                const newSchema = contentToJson(value);
+                schema.replaceSchema(newSchema);
+            } catch (err: any) {
+                toast({
+                    status: 'error',
+                    title: 'Invalid JSON Schema',
+                    description: err.message,
+                    duration: 5000
+                })
+                return false;
+            }
+        }
+        return true;
+    };
+
+    return (
+        <div className="mx-2 my-2 rounded-md border border-solid shadow-md border-spacing-2">
+            <div className="flex items-center rounded-t-md border-b gap-x-2 py-2 px-4">
+                <div className="text-lg font-semibold">Schema Editor</div>
+                <div>
+                    <Button variant="outline" size="sm" onClick={handleOnSave}>
+                        {
+                            displayJson ? "Edit Schema" : "Edit Json"
+                        }
+                    </Button>
+                </div>
+                <div className="ml-auto flex gap-x-2">
+                    <Button isLoading={isUpdating} variant="outline" size="sm" onClick={onSave}>Save Changes</Button>
+                </div>
+            </div>
+            <div className="px-4 py-2">
+                {
+                    displayJson
+                        ? <CodeMirrorEditor value={value} extensions={CODE_MIRROR_EXTENSIONS} editorRef={editorRef} />
+                        : <SchemaEditor schema={schema} />
+                }
+            </div>
+        </div>
+    );
+}
+
+function jsonToContent(json: any | undefined | null) {
+    if (!json) {
+        return ''
+    }
+
+    return JSON.stringify(json, null, 2);
+}
+
+function contentToJson(content: string | undefined | null) {
+    if (!content?.trim()) {
+        return undefined;
+    }
+
+    return JSON.parse(content.trim());
+}