@hrbolek/uoisfrontend-template 0.6.0

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,67 @@
+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",
+}
+
+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,81 @@
+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",
+}
+
+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}
+        />
+    )
+}

package/src/GroupGQLModel/Mutations/InteractiveMutations.jsx

@@ -0,0 +1,30 @@
+import { CardCapsule, VectorItemsURI } from "../Components"
+import { CreateButton, CreateLink } from "./Create"
+import { UpdateButton, UpdateLink } from "./Update"
+import { ProxyLink } from "../../../../_template/src/Base/Components/ProxyLink"
+import { DeleteButton } from "./Delete"
+
+export const PageLink = ({ children, preserveHash = true, preserveSearch = true, ...props }) => {
+    return (
+        <ProxyLink
+            to={VectorItemsURI}
+            preserveHash={preserveHash}
+            preserveSearch={preserveSearch}
+            {...props}
+        >
+            {children}
+        </ProxyLink>
+    );
+};
+
+export const InteractiveMutations = ({ item }) => {
+    return (
+        <CardCapsule item={item} title="Nástroje">
+            <PageLink className="btn btn-outline-success">Stránka</PageLink>
+            <UpdateLink className="btn btn-outline-success" item={item}>Upravit</UpdateLink>
+            <UpdateButton className="btn btn-outline-success" item={item}>Upravit (Dialog)</UpdateButton>
+            <CreateButton className="btn btn-outline-success" rbacitem={{}}>Vytvořit nový</CreateButton>
+            <DeleteButton className="btn btn-outline-danger" item={item}>Odstranit</DeleteButton>
+        </CardCapsule>
+    )
+}

package/src/GroupGQLModel/Mutations/Update.jsx

@@ -0,0 +1,74 @@
+import { 
+    UpdateBody as BaseUpdateBody, 
+    UpdateButton as BaseUpdateButton, 
+    UpdateDialog as BaseUpdateDialog, 
+    UpdateLink as BaseUpdateLink 
+} from "../../../../_template/src/Base/Mutations/Update";
+
+import { MediumEditableContent, UpdateItemURI } from "../Components";
+import { UpdateAsyncAction } from "../Queries";
+
+const DefaultContent = MediumEditableContent
+const mutationAsyncAction = UpdateAsyncAction
+
+const permissions = {
+    oneOfRoles: ["superadmin"],
+    mode: "absolute",
+}
+
+// ALTERNATIVE, CHECK GQLENDPOINT
+// const permissions = {
+//     oneOfRoles: ["administrátor", "personalista"],
+//     mode: "item",
+// }
+
+
+export const UpdateLink = ({
+    uriPattern=UpdateItemURI, 
+    ...props
+}) => {
+    return <BaseUpdateLink 
+        {...props} 
+        uriPattern={uriPattern} 
+        {...permissions}
+    />
+}
+
+export const UpdateButton = ({
+    DefaultContent:DefaultContent_=DefaultContent,
+    mutationAsyncAction:mutationAsyncAction_=mutationAsyncAction,
+    ...props
+}) => {
+    return <BaseUpdateButton 
+        {...props} 
+        DefaultContent={DefaultContent_} 
+        mutationAsyncAction={mutationAsyncAction_}
+        {...permissions}
+    />
+}
+
+export const UpdateDialog = ({
+    DefaultContent:DefaultContent_=DefaultContent,
+    mutationAsyncAction:mutationAsyncAction_=mutationAsyncAction,
+    ...props
+}) => {
+    return <BaseUpdateDialog 
+        {...props} 
+        DefaultContent={DefaultContent} 
+        mutationAsyncAction={mutationAsyncAction}
+        {...permissions}
+    />
+}
+
+export const UpdateBody = ({
+    DefaultContent:DefaultContent_=DefaultContent,
+    mutationAsyncAction:mutationAsyncAction_=mutationAsyncAction,
+    ...props
+}) => {
+    return <BaseUpdateBody 
+        {...props} 
+        DefaultContent={DefaultContent} 
+        mutationAsyncAction={mutationAsyncAction}
+        {...permissions}
+    />
+}

package/src/GroupGQLModel/Pages/PageBase.jsx

@@ -0,0 +1,56 @@
+import { PageNavbar as PageNavbar_} from "./PageNavbar"
+import { ReadAsyncAction } from "../Queries"
+import { PageItemBase as PageItemBase_} from "../../../../_template/src/Base/Pages/Page"
+import { LargeCard } from "../Components"
+
+/**
+ * Base wrapper pro stránky pracující s jedním entity itemem podle `:id` z routy.
+ *
+ * Komponenta:
+ * - načte `id` z URL přes `useParams()`
+ * - sestaví minimální `item` objekt `{ id }`
+ * - poskytne jej přes `AsyncActionProvider`, který zajistí načtení entity pomocí `queryAsyncAction`
+ * - vloží do stránky navbar přes `PlaceChild Component={PageNavbar}`
+ * - vyrenderuje `children` uvnitř provideru (tj. až v kontextu načtené entity)
+ *
+ * Typické použití je jako obálka routy typu `/.../:id`, kde vnořené komponenty
+ * (detail, editace, akce) používají kontext z `AsyncActionProvider`.
+ *
+ * @component
+ * @param {object} props
+ * @param {import("react").ReactNode} props.children
+ *   Obsah stránky, který se má vyrenderovat uvnitř `AsyncActionProvider`.
+ * @param {Function} [props.queryAsyncAction=ReadAsyncAction]
+ *   Async action (např. thunk) použitá pro načtení entity z GraphQL endpointu.
+ *   Dostane `item` s `id` (a případně další parametry podle implementace provideru).
+ *
+ * @returns {import("react").JSX.Element}
+ *   Provider s navigací (`PageNavbar`) a obsahem stránky (`children`).
+ */
+export const PageItemBase = ({ 
+    queryAsyncAction=ReadAsyncAction,
+    PageNavbar=null,
+    ItemLayout=LargeCard,
+    SubPage=null,
+    ...props
+}) => {
+    return (
+        <PageItemBase_ 
+            queryAsyncAction={queryAsyncAction} 
+            PageNavbar={PageNavbar}
+            ItemLayout={ItemLayout}
+            SubPage={SubPage}
+            {...props} 
+        />  
+    )
+}
+
+
+export const PageBase = ({ children }) => {
+    return (
+        <>
+            {/* <PageNavbar_ /> */}
+            {children}
+        </>
+    )
+}

package/src/GroupGQLModel/Pages/PageCreateItem.jsx

@@ -0,0 +1,27 @@
+import { Row } from "../../../../_template/src/Base/Components/Row";
+import { CreateBody } from "../Mutations/Create";
+import { LeftColumn, MiddleColumn } from "@hrbolek/uoisfrontend-shared";
+import { PageItemBase } from "./PageBase";
+
+
+
+const PageBody = ({...props}) => (
+    <Row>
+        <LeftColumn />
+        <MiddleColumn>
+            <CreateBody {...props} />
+        </MiddleColumn>
+    </Row>
+)
+
+export const PageCreateItem = ({ 
+    SubPage=PageBody,
+    ...props
+}) => {
+    return (
+        <PageItemBase 
+            SubPage={SubPage}
+            {...props}
+        />
+    )
+}

package/src/GroupGQLModel/Pages/PageDeleteItem.jsx

@@ -0,0 +1,16 @@
+import { PageItemBase } from "./PageBase";
+import { DeleteBody } from "../Mutations/Delete";
+
+export const PageDeleteItem = ({ 
+    SubPage=DeleteBody,
+    ...props
+}) => {
+    return (
+        <PageItemBase
+            SubPage={SubPage}
+            {...props}
+        />
+         
+    )
+}
+