@rebasepro/admin 0.0.1-canary.09e5ec5

package/src/collection_editor/ui/collection_editor/SubcollectionsEditTab.tsx

@@ -0,0 +1,241 @@
+
+import React from "react";
+import {
+    ConfirmationDialog,
+    useCustomizationController
+} from "@rebasepro/core";
+import { resolveEntityView } from "../../_cms_internals";
+import { EntityCollection, EntityCustomView, User } from "@rebasepro/types";
+import { getSubcollections } from "@rebasepro/common";
+import { Alert, Button, Container, IconButton, Paper, Table, TableBody, TableCell, TableRow, Tooltip, Typography , iconSize } from "@rebasepro/ui";
+import { PlusIcon, Trash2Icon } from "lucide-react";
+import { CollectionEditorDialog } from "./CollectionEditorDialog";
+import { CollectionsConfigController } from "../../types/config_controller";
+import { CollectionInference } from "../../types/collection_inference";
+import { EntityCustomViewsSelectDialog } from "./EntityCustomViewsSelectDialog";
+import { useFormex } from "@rebasepro/formex";
+
+export function SubcollectionsEditTab({
+    collection,
+    parentCollection,
+    configController,
+    collectionInference,
+    getUser,
+    parentCollectionIds
+}: {
+    collection: EntityCollection,
+    parentCollection?: EntityCollection,
+    configController: CollectionsConfigController;
+    collectionInference?: CollectionInference;
+    getUser?: (uid: string) => User | null;
+    parentCollectionIds?: string[];
+}) {
+
+    const { entityViews: contextEntityViews } = useCustomizationController();
+
+    const [subcollectionToDelete, setSubcollectionToDelete] = React.useState<string | undefined>();
+    const [addEntityViewDialogOpen, setAddEntityViewDialogOpen] = React.useState<boolean>(false);
+    const [viewToDelete, setViewToDelete] = React.useState<string | undefined>();
+
+    const [currentDialog, setCurrentDialog] = React.useState<{
+        isNewCollection: boolean,
+        editedCollectionId?: string,
+    }>();
+
+    const {
+        values,
+        setFieldValue
+    } = useFormex<EntityCollection>();
+
+    const [subcollections, setSubcollections] = React.useState<EntityCollection[]>(getSubcollections(collection) ?? []);
+    const resolvedEntityViews = values.entityViews?.filter(e => typeof e === "string")
+        .map(e => resolveEntityView(e, contextEntityViews))
+        .filter(Boolean) as EntityCustomView[] ?? [];
+    const hardCodedEntityViews = collection.entityViews?.filter(e => typeof e !== "string") as EntityCustomView[] ?? [];
+    const totalEntityViews = resolvedEntityViews.length + hardCodedEntityViews.length;
+
+    return (
+        <>
+            <div className={"flex flex-col gap-12 w-full"}>
+
+                    <div className={"grow flex flex-col gap-4 items-start w-full"}>
+                        <Typography variant={"h6"}>
+                            Subcollections of {values.name}
+                        </Typography>
+
+                        <div className={"flex flex-col gap-4 w-full"}>
+                            {subcollections && subcollections.length > 0 && <Table>
+                                <TableBody>
+                                    {subcollections.map((subcollection) => (
+                                        <TableRow key={subcollection.slug}
+                                            onClick={() => setCurrentDialog({
+                                                isNewCollection: false,
+                                                editedCollectionId: subcollection.slug
+                                            })}>
+                                            <TableCell
+                                                align="left">
+                                                <Typography variant={"subtitle2"} className={"grow"}>
+                                                    {subcollection.name}
+                                                </Typography>
+                                            </TableCell>
+                                            <TableCell
+                                                align="right">
+                                                <Tooltip title={"Remove"}
+                                                    asChild={true}>
+                                                    <IconButton size="small"
+                                                        onClick={(e: React.MouseEvent) => {
+                                                            e.preventDefault();
+                                                            e.stopPropagation();
+                                                            setSubcollectionToDelete(subcollection.slug);
+                                                        }}
+                                                        color="inherit">
+                                                        <Trash2Icon size={iconSize.small}/>
+                                                    </IconButton>
+                                                </Tooltip>
+                                            </TableCell>
+                                        </TableRow>
+                                    ))}
+                                </TableBody>
+                            </Table>}
+
+                            <Button
+                                onClick={() => {
+                                    setCurrentDialog({
+                                        isNewCollection: true
+                                    });
+                                }}
+                                variant="filled"
+                                color="neutral"
+                                startIcon={<PlusIcon/>}>
+                                Add subcollection
+                            </Button>
+
+                        </div>
+
+                    </div>
+
+                    <div className={"grow flex flex-col gap-4 items-start w-full"}>
+                        <Typography variant={"h6"}>
+                            Custom views
+                        </Typography>
+
+                        {<>
+                            <div className={"flex flex-col gap-4 w-full"}>
+                                {totalEntityViews > 0 && <Table>
+                                    <TableBody>
+                                        {resolvedEntityViews.map((view) => (
+                                            <TableRow key={view.key}>
+                                                <TableCell
+                                                    align="left">
+                                                    <Typography variant={"subtitle2"} className={"grow"}>
+                                                        {view.name}
+                                                    </Typography>
+                                                </TableCell>
+                                                <TableCell
+                                                    align="right">
+                                                    <Tooltip title={"Remove"}
+                                                        asChild={true}>
+                                                        <IconButton size="small"
+                                                            onClick={(e: React.MouseEvent) => {
+                                                                e.preventDefault();
+                                                                e.stopPropagation();
+                                                                setViewToDelete(view.key);
+                                                            }}
+                                                            color="inherit">
+                                                            <Trash2Icon size={iconSize.small}/>
+                                                        </IconButton>
+                                                    </Tooltip>
+                                                </TableCell>
+                                            </TableRow>
+                                        ))}
+                                        {hardCodedEntityViews.map((view) => (
+                                            <TableRow key={view.key}>
+                                                <TableCell
+                                                    align="left">
+                                                    <Typography variant={"subtitle2"} className={"grow"}>
+                                                        {view.name}
+                                                    </Typography>
+                                                    <Typography variant={"caption"} className={"grow"}>
+                                                        This view is defined in code with
+                                                        key <code>{view.key}</code>
+                                                    </Typography>
+                                                </TableCell>
+                                            </TableRow>
+                                        ))}
+                                    </TableBody>
+                                </Table>}
+
+                                <Button
+                                    onClick={() => {
+                                        setAddEntityViewDialogOpen(true);
+                                    }}
+                                    variant="filled"
+                                    color="neutral"
+                                    startIcon={<PlusIcon/>}>
+                                    Add custom entity view
+                                </Button>
+                            </div>
+
+                        </>}
+
+                    </div>
+
+                </div>
+
+            {subcollectionToDelete &&
+                <ConfirmationDialog open={Boolean(subcollectionToDelete)}
+                    onAccept={() => {
+                        const props = {
+                            id: subcollectionToDelete!,
+                            parentCollectionIds: [...(parentCollectionIds ?? []), collection.slug]
+                        };
+                        console.debug("Deleting subcollection", props)
+                        configController.deleteCollection(props).then(() => {
+                            setSubcollectionToDelete(undefined);
+                            setSubcollections(subcollections?.filter(e => e.slug !== subcollectionToDelete))
+                        });
+                    }}
+                    onCancel={() => setSubcollectionToDelete(undefined)}
+                    title={<>Delete this subcollection?</>}
+                    body={<> This will <b>not
+                        delete any data</b>, only
+                        the collection in the CMS</>}/>}
+            {viewToDelete &&
+                <ConfirmationDialog open={Boolean(viewToDelete)}
+                    onAccept={() => {
+                        setFieldValue("entityViews", values.entityViews?.filter(e => e !== viewToDelete));
+                        setViewToDelete(undefined);
+                    }}
+                    onCancel={() => setViewToDelete(undefined)}
+                    title={<>Remove this view?</>}
+                    body={<>This will <b>not
+                        delete any data</b>, only
+                        the view in the CMS</>}/>}
+
+            <CollectionEditorDialog
+                open={Boolean(currentDialog)}
+                configController={configController}
+                parentCollection={collection}
+                collectionInference={collectionInference}
+                parentCollectionIds={[...parentCollectionIds ?? [], values.slug]}
+                isNewCollection={false}
+                {...currentDialog}
+                getUser={getUser}
+                handleClose={(updatedCollection) => {
+                    if (updatedCollection && !subcollections.map(e => e.slug).includes(updatedCollection.slug)) {
+                        setSubcollections([...subcollections, updatedCollection]);
+                    }
+                    setCurrentDialog(undefined);
+                }}/>
+
+            <EntityCustomViewsSelectDialog
+                open={addEntityViewDialogOpen}
+                onClose={(selectedViewKey) => {
+                    if (selectedViewKey) {
+                        setFieldValue("entityViews", [...(values.entityViews ?? []), selectedViewKey]);
+                    }
+                    setAddEntityViewDialogOpen(false);
+                }}/>
+        </>
+    );
+}

package/src/collection_editor/ui/collection_editor/SwitchControl.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+
+import { BooleanSwitchWithLabel, Tooltip } from "@rebasepro/ui";
+import { FormexFieldProps } from "@rebasepro/formex";
+
+export function SwitchControl({
+    field,
+    form,
+    label,
+    tooltip,
+    disabled,
+    size = "small",
+    allowIndeterminate
+}: FormexFieldProps & {
+    label: string,
+    tooltip?: string,
+    disabled?: boolean,
+    size?: "small" | "medium",
+    allowIndeterminate?: boolean
+}) {
+
+    const formControlLabel = <BooleanSwitchWithLabel
+        label={label}
+        size={size}
+        position={"start"}
+        value={field.value}
+        disabled={disabled}
+        allowIndeterminate={allowIndeterminate}
+        onValueChange={(checked: boolean | null) => form.setFieldValue(field.name, checked)}/>;
+
+    if (tooltip)
+        return (
+            <Tooltip
+                title={tooltip}>
+                {formControlLabel}
+            </Tooltip>
+        );
+    return formControlLabel;
+}

package/src/collection_editor/ui/collection_editor/ViewModeSwitch.tsx

@@ -0,0 +1,47 @@
+import { ViewMode } from "@rebasepro/types";
+import { cls, ToggleButtonGroup, Typography } from "@rebasepro/ui";
+import { KanbanIcon, LayoutGridIcon, ListIcon, TableIcon } from "lucide-react";
+
+export function ViewModeSwitch({
+    value,
+    onChange,
+    className
+}: {
+    value: ViewMode;
+    onChange: (value: ViewMode) => void;
+    className?: string;
+}) {
+
+    return <div className={cls(className)}>
+        <Typography variant={"label"} color={"secondary"} className={"ml-3.5"}>Default collection view</Typography>
+        <div className={"my-2"}>
+            <ToggleButtonGroup
+                value={value}
+                onValueChange={onChange}
+                options={[
+                    {
+                        value: "list",
+                        label: "List",
+                        icon: <ListIcon/>
+                    },
+                    {
+                        value: "table",
+                        label: "Table",
+                        icon: <TableIcon/>
+                    },
+                    {
+                        value: "cards",
+                        label: "Cards",
+                        icon: <LayoutGridIcon/>
+                    },
+                    {
+                        value: "kanban",
+                        label: "Kanban",
+                        icon: <KanbanIcon/>
+                    }
+                ]}
+            />
+        </div>
+        <Typography variant={"caption"} color={"secondary"} className={"ml-3.5"}>Choose how entities should be displayed by default</Typography>
+    </div>
+}

package/src/collection_editor/ui/collection_editor/import/CollectionEditorImportDataPreview.tsx

@@ -0,0 +1,67 @@
+import { useCollectionRegistryController } from "../../../_cms_internals";
+import { convertDataToEntity, ImportConfig } from "../../../_cms_internals";
+import { useAuthController } from "@rebasepro/core";
+import { EntityCollectionTable } from "../../../../components/EntityCollectionTable/EntityCollectionTable";
+import { useSelectionController } from "../../../../components/EntityCollectionView/useSelectionController";
+import { CircularProgressCenter } from "@rebasepro/ui";
+import { Properties } from "@rebasepro/types";
+import { useEffect, useState } from "react";
+import { Typography } from "@rebasepro/ui";
+
+export function CollectionEditorImportDataPreview({
+    importConfig,
+    properties,
+    propertiesOrder
+}: {
+    importConfig: ImportConfig,
+    properties: Properties,
+    propertiesOrder: string[]
+}) {
+
+    const authController = useAuthController();
+    const registry = useCollectionRegistryController();
+    const [loading, setLoading] = useState<boolean>(false);
+
+    async function loadEntities() {
+        const mappedData = importConfig.importData.map(d => convertDataToEntity(authController,
+            registry,
+            d,
+            importConfig.idColumn,
+            importConfig.headersMapping,
+            properties,
+            "TEMP_PATH",
+            importConfig.defaultValues));
+        importConfig.setEntities(mappedData);
+    }
+
+    useEffect(() => {
+        loadEntities().finally(() => setLoading(false));
+    }, []);
+
+    const selectionController = useSelectionController();
+    if (loading)
+        return <CircularProgressCenter/>
+
+    return <EntityCollectionTable
+        title={<div>
+            <Typography variant={"subtitle2"}>Imported data preview</Typography>
+            <Typography variant={"caption"}>Entities with the same id will be overwritten</Typography>
+        </div>}
+        tableController={{
+            data: importConfig.entities,
+            dataLoading: false,
+            noMoreToLoad: false
+        }}
+        endAdornment={<div className={"h-12"}/>}
+        filterable={false}
+        sortable={false}
+        selectionController={selectionController}
+        displayedColumnIds={propertiesOrder.map(p => ({
+            key: p,
+            disabled: false
+        }))}
+        openEntityMode={"side_panel"}
+        properties={properties}
+        enablePopupIcon={false}/>
+
+}