@speron/projekt-front 0.0.3

package/src/GroupGQLModel/Components/LiveEdit.jsx

@@ -0,0 +1,111 @@
+import { useCallback } from "react";
+import { useMemo } from "react";
+
+import { UpdateAsyncAction } from "../Queries";
+import { CreateDelayer, ErrorHandler, LoadingSpinner } from "@hrbolek/uoisfrontend-shared";
+import { MediumEditableContent } from "./MediumEditableContent";
+import { useEditAction } from "../../../../dynamic/src/Hooks/useEditAction";
+
+/**
+ * TemplateLiveEdit Component
+ *
+ * Interaktivní React komponenta pro live editaci entity `template` s podporou optimistického fetchování a debounce delaye.
+ *
+ * - Používá `useAsyncAction` k načítání a update entit (např. GraphQL mutation).
+ * - Pokud se hodnota pole změní, spustí se update po krátkém zpoždění (`delayer`) — uživatelské změny nejsou ihned posílány, ale až po pauze.
+ * - Zobrazuje loading a error stav pomocí komponent `LoadingSpinner` a `ErrorHandler`.
+ * - Předává editované hodnoty do komponenty `TemplateMediumEditableContent`, která zajišťuje zobrazení a editaci jednotlivých polí šablony (`template`).
+ *
+ * @component
+ * @param {Object} props - Props objekt.
+ * @param {Object} props.template - Objekt reprezentující editovanou šablonu (template entity).
+ * @param {React.ReactNode} [props.children] - Libovolné children, které se vloží pod editační komponentu.
+ * @param {Function} [props.asyncAction=TemplateUpdateAsyncAction] - Asynchronní akce pro update (`useAsyncAction`), typicky GraphQL update mutation.
+ *
+ * @example
+ * // Standardní použití
+ * <TemplateLiveEdit template={templateEntity} />
+ *
+ * @example
+ * // S vlastním asyncAction a doplňkovým obsahem
+ * <TemplateLiveEdit template={templateEntity} asyncAction={myUpdateAction}>
+ *   <div>Extra obsah nebo poznámka</div>
+ * </TemplateLiveEdit>
+ *
+ * @returns {JSX.Element}
+ *   Interaktivní komponenta pro live editaci šablony, včetně spinneru a error handleru.
+ */
+export const LiveEdit_ = ({ children, asyncAction=UpdateAsyncAction}) => {
+    const { onChange, onBlur, item } = useGQLEntityContext()
+    return (
+        <AsyncActionProvider 
+            item={item} 
+            queryAsyncAction={asyncAction}
+            options={{deferred: true, network: true}}
+            onChange={onChange}
+            onBlur={onBlur}
+        >
+            <LiveEditWrapper item={item}>
+                {children}
+                {/* <hr />
+                <pre>{JSON.stringify(item, null, 2)}</pre> */}
+            </LiveEditWrapper>
+        </AsyncActionProvider>
+    )
+}
+
+const LiveEditWrapper = ({ item, children }) => {
+    const { run , error, loading, entity, data, onChange, onBlur } = useGQLEntityContext()
+    
+    const handleEvent = useCallback((handler) => async (e) => {
+        const {id, value} = e?.target || {}
+        if (id === undefined || value === undefined) return 
+        if (item?.[id] === value) {
+            return;
+        }
+        const newItem = { ...item, [e.target.id]: e.target.value }
+        const newEvent = { target: { value: newItem } }
+        // console.log("LiveEditWrapper localOnChange start e", e, '=>', newEvent)
+        // const result = await delayer(()=>onChange(newEvent))
+        const result = await handler(newEvent)
+        // console.log("LiveEditWrapper localOnChange end e", e, '=>', newItem, '=>', result)
+        return result
+    }, [item])
+
+    const bindedOnChange = useMemo(() => handleEvent(onChange), [onChange, handleEvent])
+    const bindedOnBlur = useMemo(() => handleEvent(onBlur), [onBlur, handleEvent])
+
+    return (
+        <MediumEditableContent item={item} onChange={bindedOnChange} onBlur={bindedOnBlur} >
+            {children}
+            {/* <hr />
+            <pre>{JSON.stringify(item, null, 2)}</pre> */}
+        </MediumEditableContent>
+    )
+}
+
+
+export const LiveEdit = ({ item, children, asyncMutationAction=UpdateAsyncAction }) => {
+    // const { run , error, loading, entity, data, onChange: contextOnChange, onBlur: contextOnBlur } = useGQLEntityContext()
+    const {
+        draft,
+        dirty,
+        loading: saving,
+        onChange, 
+        onBlur,
+        onCancel,
+        onConfirm,
+    } = useEditAction(asyncMutationAction, item, {
+        mode: "live", 
+        // onCommit: contextOnChange
+    })
+
+    return (
+        
+        <MediumEditableContent item={item} onChange={onChange} onBlur={onBlur} >
+            {saving && <LoadingSpinner/>}
+            {children}
+        </MediumEditableContent>
+        
+    )
+}

package/src/GroupGQLModel/Components/MediumCard.jsx

@@ -0,0 +1,51 @@
+import { MegaphoneFill, PencilFill, PeopleFill, PersonFill } from "react-bootstrap-icons"
+import { CardCapsule } from "./CardCapsule"
+import { MediumContent } from "./MediumContent"
+import { Link } from "./Link"
+import { Link as BaseLink, SimpleCardCapsuleRightCorner } from "../../../../_template/src/Base/Components"
+import { UpdateButton, UpdateLink } from "../Mutations/Update"
+import { ProxyLink } from "../../../../_template/src/Base/Components/ProxyLink"
+
+/**
+ * A card component that displays detailed content for an template entity.
+ *
+ * This component combines `TemplateCardCapsule` and `TemplateMediumContent` to create a card layout
+ * with a title and medium-level content. The title includes a `PersonFill` icon and a link to
+ * the template entity's details, while the body displays serialized details of the entity along
+ * with any additional children passed to the component.
+ *
+ * @component
+ * @param {Object} props - The properties for the TemplateMediumCard component.
+ * @param {Object} props.template - The object representing the template entity.
+ * @param {string|number} props.template.id - The unique identifier for the template entity.
+ * @param {string} props.template.name - The name or label of the template entity.
+ * @param {React.ReactNode} [props.children=null] - Additional content to render inside the card body.
+ *
+ * @returns {JSX.Element} A JSX element combining a card with a title and detailed content.
+ *
+ * @example
+ * // Example usage:
+ * const templateEntity = { id: 123, name: "Sample Entity" };
+ * 
+ * <TemplateMediumCard template={templateEntity}>
+ *   <p>Additional details or actions for the entity.</p>
+ * </TemplateMediumCard>
+ */
+export const MediumCard = ({ item, children }) => {
+    return (
+        <CardCapsule title={<><PersonFill /> <Link item={item} /></>}>
+            <SimpleCardCapsuleRightCorner>
+                <UpdateLink item={item}>
+                    <PencilFill />
+                    
+                </UpdateLink>&nbsp;
+                
+                {/* className="btn btn-sm btn-outline-secondary border-0" */}
+                {/* <Link item={item} action={"roles"}><MegaphoneFill /></Link> */}
+            </SimpleCardCapsuleRightCorner>
+            <MediumContent item={item}>
+                {children}
+            </MediumContent>
+        </CardCapsule>
+    )
+}

package/src/GroupGQLModel/Components/MediumContent.jsx

@@ -0,0 +1,56 @@
+import { BaseUI } from "../../Base"
+import { Attribute } from "../../../../_template/src/Base/Components/Attribute"
+import { Col as Col_ } from "../../../../_template/src/Base/Components/Col"
+import { Row } from "../../../../_template/src/Base/Components/Row"
+import { Link } from "./Link"
+import { Link as BaseLink } from "../../../../_template/src/Base/Components/Link"
+/**
+ * A component that displays medium-level content for an template entity.
+ *
+ * This component renders a label "TemplateMediumContent" followed by a serialized representation of the `template` object
+ * and any additional child content. It is designed to handle and display information about an template entity object.
+ *
+ * @component
+ * @param {Object} props - The properties for the TemplateMediumContent component.
+ * @param {Object} props.template - The object representing the template entity.
+ * @param {string|number} props.template.id - The unique identifier for the template entity.
+ * @param {string} props.template.name - The name or label of the template entity.
+ * @param {React.ReactNode} [props.children=null] - Additional content to render after the serialized `template` object.
+ *
+ * @returns {JSX.Element} A JSX element displaying the entity's details and optional content.
+ *
+ * @example
+ * // Example usage:
+ * const templateEntity = { id: 123, name: "Sample Entity" };
+ * 
+ * <TemplateMediumContent template={templateEntity}>
+ *   <p>Additional information about the entity.</p>
+ * </TemplateMediumContent>
+ */
+export const MediumContent = ({ item }) => {
+    return (<>
+        <Attribute label="Název" item={item}>
+            <BaseLink item={item} />
+        </Attribute>
+        <Attribute label="Anglický název" item={item} attribute_name={"nameEn"} />
+        <Attribute label="Email" item={item} attribute_name={"email"} />
+        <Attribute label="Zkratka" item={item} attribute_name={"abbreviation"} />
+        <Attribute label={"Typ"}>
+            <BaseLink item={item?.grouptype} />
+        </Attribute>
+        <hr />
+        <Attribute label={"Přímý nadřízený"}>
+            <BaseLink item={item?.mastergroup} />
+        </Attribute>
+        {item?.mastergroups?.map(g=>
+            <Attribute label={g?.grouptype?.name ?? " "}>
+                <BaseLink item={g} />
+            </Attribute>
+        )}
+        <hr/>
+        <Attribute label="Poslední změna" item={item} attribute_name={"lastchange"} />
+        <Attribute label="Provedl" item={item} attribute_name={"changedby"}>
+            <BaseLink item={item?.changedby} />
+        </Attribute>
+    </>)
+}

package/src/GroupGQLModel/Components/MediumEditableContent.jsx

@@ -0,0 +1,52 @@
+import { Input } from "@hrbolek/uoisfrontend-shared"
+import { EntityLookup } from "../../../../_template/src/Base/FormControls/EntityLookup"
+import { ReadPageAsyncAction } from "../Queries"
+import { SearchAsyncAction } from "../Queries/SearchAsyncAction"
+import { Group } from "../../../../_template/src/Base/Helpers/GQLEntityProvider"
+
+/**
+ * A component that displays medium-level content for an template entity.
+ *
+ * This component renders a label "TemplateMediumContent" followed by a serialized representation of the `template` object
+ * and any additional child content. It is designed to handle and display information about an template entity object.
+ *
+ * @component
+ * @param {Object} props - The properties for the TemplateMediumContent component.
+ * @param {Object} props.template - The object representing the template entity.
+ * @param {string|number} props.template.id - The unique identifier for the template entity.
+ * @param {string} props.template.name - The name or label of the template entity.
+ * @param {React.ReactNode} [props.children=null] - Additional content to render after the serialized `template` object.
+ *
+ * @returns {JSX.Element} A JSX element displaying the entity's details and optional content.
+ *
+ * @example
+ * // Example usage:
+ * const templateEntity = { id: 123, name: "Sample Entity" };
+ * 
+ * <TemplateMediumContent template={templateEntity}>
+ *   <p>Additional information about the entity.</p>
+ * </TemplateMediumContent>
+ */
+export const MediumEditableContent = ({ item, onChange=(e)=>null, onBlur=(e)=>null, children}) => {
+    return (
+        <>           
+        {/* defaultValue={item?.name|| "Název"}  */}
+            <Input id={"name"} label={"Jméno"} className="form-control" value={item?.name|| "Název"} onChange={onChange} onBlur={onBlur} />
+            <Input id={"nameEn"} label={"Anglický název"} className="form-control" value={item?.nameEn|| "Anglický název"} onChange={onChange} onBlur={onBlur} />
+            <Input id={"abbreviation"} label={"Zkratka"} className="form-control" value={item?.abbreviation|| "Zkr"} onChange={onChange} onBlur={onBlur} />
+            <EntityLookup 
+                asyncAction={SearchAsyncAction}
+                id={"mastergroupId"} 
+                label={"Nadřízený"} 
+                className="form-control" 
+                value={item?.mastergroup} 
+                onChange={onChange} 
+                onBlur={onBlur} 
+            />
+            {/* <Group id="subgroup">
+                <Input id={"name"} label={"Jméno"} className="form-control" value={item?.name|| "Název"} onChange={onChange} onBlur={onBlur} />    
+            </Group> */}
+            {children}
+        </>
+    )
+}

package/src/GroupGQLModel/Components/Table.jsx

@@ -0,0 +1,70 @@
+import { Table as BaseTable, KebabMenu } from "../../../../_template/src/Base/Components/Table" 
+import { Link as BaseLink } from "../../../../_template/src/Base/Components/Link" 
+import { Link, LinkURI } from "./Link"
+import { useNavigate } from "react-router"
+import { UpdateLink } from "../Mutations/Update"
+import { DeleteButton } from "../Mutations/Delete"
+
+const CellName = ({ row, name }) => (
+    <td key={name}>
+        <Link item={row} />
+    </td>
+)
+
+const CellType = ({ row, name }) => (
+    <td key={name}>
+        <BaseLink item={row?.grouptype || {}} />
+    </td>
+)
+
+
+const CellTools = ({ row, name }) => {
+    const navigate = useNavigate()
+    const {id, name: name_}  = row || {}
+    return (
+        <td>
+            <KebabMenu actions={[
+                { 
+                    // label: "Editovat", 
+                    label: "Editovat " + name_, 
+                    onClick: () => navigate(`${LinkURI.replace("view", "edit")}${id}`),
+                    children: (<UpdateLink item={row} className="form-control btn btn-outline-secondary border-0 ">Upravit</UpdateLink>)
+                    // children: (<UpdateLink item={row} className="btn btn-outline-secondary">{name}</UpdateLink>)
+                },
+                { 
+                    // label: "Editovat", 
+                    label: "Smazat " + name_, 
+                    onClick: () => navigate(`${LinkURI.replace("view", "edit")}${id}`),
+                    children: (<DeleteButton item={row} className="form-control btn btn-outline-secondary border-0 ">Odstranit</DeleteButton>)
+                    // children: (<UpdateLink item={row} className="btn btn-outline-secondary">{name}</UpdateLink>)
+                }
+            ]} />
+        </td>
+    )
+}
+
+const table_def = {
+    "name": {
+        label: "Název",
+        component: CellName
+    },
+    "nameEn": {
+        label: "A Název",
+        component: CellName
+    },
+    "grouptype": {
+        label: "Typ",
+        component: CellType
+    },
+    
+    "tools": {
+        label: "Nástroje",
+        component: CellTools
+    }
+}
+
+export const Table = ({ data }) => {
+    return (
+        <BaseTable data={data} table_def={table_def}/>
+    )
+}

package/src/GroupGQLModel/Components/index.js

@@ -0,0 +1,14 @@
+
+export * from './CardCapsule'
+export * from './Children'
+export * from './CUDButton'
+export * from './LargeCard'
+export * from './Link'
+export * from './MediumContent'
+export * from './MediumCard'
+
+export * from './MediumEditableContent'
+export * from './LiveEdit'
+
+
+export * from './ConfirmEdit'

package/src/GroupGQLModel/Mutations/AddMembership.jsx

@@ -0,0 +1,156 @@
+import { 
+    CreateBody as BaseCreateBody, 
+    CreateButton as BaseCreateButton, 
+    CreateDialog as BaseCreateDialog, 
+    CreateLink  as BaseCreateLink
+} from "../../../../_template/src/Base/Mutations/Create"
+import { SearchAsyncAction as SearchUserAsyncAction } from "../../UserGQLModel/Queries/SearchAsyncAction"
+import { Input } from "../../../../_template/src/Base/FormControls/Input"
+import { EntityLookup } from "../../../../_template/src/Base/FormControls/EntityLookup"
+import { InsertAsyncAction } from "../../MembershipGQLModel/Queries"
+import { CreateURI, ReadItemURI } from "../Components"
+
+
+// const DefaultContent = MediumEditableContent
+const GroupInserMembershipContent = ({ item, onChange=(e)=>null, onBlur=(e)=>null, children}) => {
+    // const isoNow = new Date().toISOString()
+    // const isoNowZ = isoNow.slice(0, isoNow.length - 1)
+    // console.log("isoNow", isoNow.slice(0, isoNow.length - 1))
+    return (
+        <>           
+        {/* defaultValue={item?.name|| "Název"}  */}
+            {/* <Input 
+                id={"userId"} 
+                // label={"Id uživatele"} 
+                className="form-control" 
+                value={item?.user?.id} 
+                onChange={onChange} 
+                onBlur={onBlur} 
+                hidden
+            />
+            <Input 
+                id={"userName"} 
+                label={"Uživatele"} 
+                className="form-control" 
+                value={item?.user?.fullname||item?.user?.name||"K"} 
+                onChange={onChange} 
+                onBlur={onBlur} 
+                disabled
+            /> */}
+            <Input 
+                id={"groupId"} 
+                // label={"Id uživatele"} 
+                className="form-control" 
+                value={item?.group?.id} 
+                onChange={onChange} 
+                onBlur={onBlur} 
+                hidden
+            />
+            <Input 
+                id={"groupName"} 
+                label={"Skupina"} 
+                className="form-control" 
+                value={item?.group?.name||"K"} 
+                onChange={onChange} 
+                onBlur={onBlur} 
+                disabled
+            />
+            <Input 
+                id={"startdate"} 
+                type={"datetime-local"}
+                label={"Počáteční datum"} 
+                className="form-control" 
+                value={item?.startdate} // || isoNowZ } //|| new Date().toISOString()} 
+                onChange={onChange} 
+                onBlur={onBlur} 
+            />
+            <Input 
+                id={"enddate"} 
+                type={"datetime-local"}
+                label={"Koncové datum"} 
+                className="form-control" 
+                value={item?.enddate} 
+                onChange={onChange} 
+                onBlur={onBlur} 
+            />
+            <EntityLookup 
+                asyncAction={SearchUserAsyncAction} //SearchGroupAsyncAction
+                id={"userId"} 
+                label={"Uživatel"} 
+                className="form-control" 
+                value={item?.user} 
+                onChange={onChange} 
+                onBlur={onBlur} 
+            />
+        </>
+    )
+}
+
+
+const MutationAsyncAction = InsertAsyncAction
+const CreateGroupInserMembershipURI = CreateURI
+const permissions = {
+    oneOfRoles: ["administrátor", "personalista"],
+    mode: "item",
+}
+
+export const CreateGroupInserMembershipLink = ({
+    uriPattern=CreateGroupInserMembershipURI,
+    ...props
+}) => (
+    <BaseCreateLink {...props} uriPattern={uriPattern} />
+);
+
+export const CreateGroupInserMembershipButton = ({
+    mutationAsyncAction=MutationAsyncAction,
+    CreateDialog:CreateDialog_=CreateGroupInserMembershipDialog,
+    DefaultContent:defaultContent=GroupInserMembershipContent,
+    readItemURI=ReadItemURI, 
+    // item={},
+    item={},
+    ...props
+}) => {
+    // console.log("CreateGroupInserMembershipButton.premission test", item, permissions?.oneOfRoles)
+    return <BaseCreateButton 
+        {...props}
+        CreateDialog={CreateDialog_}
+        // DefaultContent={defaultContent} 
+        readItemURI={readItemURI}
+        mutationAsyncAction={mutationAsyncAction}
+        rbacitem={item}
+        item={item}
+        {...permissions}
+    />
+}
+
+export const CreateGroupInserMembershipDialog = ({
+    mutationAsyncAction=MutationAsyncAction,
+    DefaultContent:defaultContent=GroupInserMembershipContent,
+    readItemURI=ReadItemURI, 
+    item={},
+    ...props
+}) => {
+    return <BaseCreateDialog 
+        {...props} 
+        title="Nové členství"
+        item={item}
+        DefaultContent={defaultContent} 
+        readItemURI={readItemURI}
+        mutationAsyncAction={mutationAsyncAction}
+    />
+};
+
+export const CreateGroupInserMembershipBody = ({
+    mutationAsyncAction=MutationAsyncAction,
+    DefaultContent:defaultContent=GroupInserMembershipContent,
+    readItemURI=ReadItemURI, 
+    ...props
+}) => {
+    return <BaseCreateBody 
+        {...props} 
+        DefaultContent={defaultContent} 
+        readItemURI={readItemURI}
+        mutationAsyncAction={mutationAsyncAction}
+    />
+};
+

package/src/GroupGQLModel/Mutations/Create.jsx

@@ -0,0 +1,73 @@
+import { CreateURI, MediumEditableContent, ReadItemURI } from "../Components"
+import { InsertAsyncAction } from "../Queries"
+import { 
+    CreateBody as BaseCreateBody, 
+    CreateButton as BaseCreateButton, 
+    CreateDialog as BaseCreateDialog, 
+    CreateLink  as BaseCreateLink
+} from "../../../../_template/src/Base/Mutations/Create"
+
+const DefaultContent = MediumEditableContent
+const MutationAsyncAction = InsertAsyncAction
+
+// const permissions = {
+//     oneOfRoles: ["superadmin"],
+//     mode: "absolute",
+// }
+
+// ALTERNATIVE, CHECK GQLENDPOINT
+const permissions = {
+    oneOfRoles: ["administrátor", "personalista"],
+    mode: "item",
+}
+
+export const CreateLink = ({
+    uriPattern=CreateURI,
+    ...props
+}) => (
+    <BaseCreateLink {...props} uriPattern={uriPattern} />
+);
+
+export const CreateButton = ({
+    mutationAsyncAction=MutationAsyncAction,
+    DefaultContent:defaultContent=DefaultContent,
+    readItemURI=ReadItemURI, 
+    ...props
+}) => {
+    return <BaseCreateButton 
+        {...props}
+        DefaultContent={defaultContent} 
+        readItemURI={readItemURI}
+        mutationAsyncAction={mutationAsyncAction}
+        {...permissions}
+    />
+}
+
+export const CreateDialog = ({
+    mutationAsyncAction=MutationAsyncAction,
+    DefaultContent:defaultContent=DefaultContent,
+    readItemURI=ReadItemURI, 
+    ...props
+}) => {
+    return <BaseCreateDialog 
+        {...props} 
+        DefaultContent={defaultContent} 
+        readItemURI={readItemURI}
+        mutationAsyncAction={mutationAsyncAction}
+    />
+};
+
+export const CreateBody = ({
+    mutationAsyncAction=MutationAsyncAction,
+    DefaultContent:defaultContent=DefaultContent,
+    readItemURI=ReadItemURI, 
+    ...props
+}) => {
+    return <BaseCreateBody 
+        {...props} 
+        DefaultContent={defaultContent} 
+        readItemURI={readItemURI}
+        mutationAsyncAction={mutationAsyncAction}
+    />
+};
+

package/src/GroupGQLModel/Mutations/Delete.jsx

@@ -0,0 +1,87 @@
+import { DeleteItemURI, ListURI, MediumContent, VectorItemsURI } from "../Components";
+import { DeleteAsyncAction } from "../Queries";
+import { 
+    DeleteBody as BaseDeleteBody, 
+    DeleteButton as BaseDeleteButton, 
+    DeleteDialog as BaseDeleteDialog, 
+    DeleteLink as BaseDeleteLink
+} from "../../../../_template/src/Base/Mutations/Delete";
+
+const DefaultContent = MediumContent
+const MutationAsyncAction = DeleteAsyncAction
+
+// const permissions = {
+//     oneOfRoles: ["superadmin"],
+//     mode: "absolute",
+// }
+
+// ALTERNATIVE, CHECK GQLENDPOINT
+const permissions = {
+    oneOfRoles: ["administrátor", "personalista"],
+    mode: "item",
+}
+
+export const DeleteLink = ({ 
+    uriPattern=DeleteItemURI,
+    ...props
+ }) => {
+    return (
+        <BaseDeleteLink 
+            {...props} 
+            uriPattern={uriPattern} 
+            {...permissions}
+        />
+    )
+};
+
+export const DeleteButton = ({
+    mutationAsyncAction=MutationAsyncAction,
+    DefaultContent:DefaultContent_=DefaultContent,
+    vectorItemsURI=ListURI,
+    ...props 
+}) => {
+    return (
+        <BaseDeleteButton 
+            {...props} 
+            DefaultContent={DefaultContent_} 
+            mutationAsyncAction={mutationAsyncAction}
+            vectorItemsURI={vectorItemsURI}
+            Dialog={DeleteDialog}
+            {...permissions}
+        />
+    )
+}
+
+export const DeleteDialog = ({
+    mutationAsyncAction=MutationAsyncAction,
+    DefaultContent:DefaultContent_=DefaultContent,
+    vectorItemsURI=ListURI,
+    ...props 
+}) => {
+    return (
+        <BaseDeleteDialog 
+            {...props} 
+            DefaultContent={DefaultContent} 
+            mutationAsyncAction={MutationAsyncAction}
+            vectorItemsURI={vectorItemsURI}
+            {...permissions}
+        />
+    )
+}
+
+export const DeleteBody = ({ 
+    mutationAsyncAction=MutationAsyncAction,
+    DefaultContent:DefaultContent_=DefaultContent,
+    vectorItemsURI=ListURI,
+    ...props
+}) => {
+    return (
+        <BaseDeleteBody 
+            {...props} 
+            DefaultContent={DefaultContent} 
+            mutationAsyncAction={MutationAsyncAction}
+            vectorItemsURI={vectorItemsURI}
+            {...permissions}
+        />
+    )
+}