@hrbolek/uoisfrontend-template 0.6.0

package/src/MembershipGQLModel/Components/Table.jsx

@@ -0,0 +1,7 @@
+import { Table as BaseTable } from "../../../../_template/src/Base/Components/Table" 
+
+export const Table = ({ data }) => {
+    return (
+        <BaseTable data={data} />
+    )
+}

package/src/MembershipGQLModel/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/MembershipGQLModel/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/MembershipGQLModel/Mutations/Delete.jsx

@@ -0,0 +1,80 @@
+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}
+            {...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/MembershipGQLModel/Mutations/InteractiveMutations.jsx

@@ -0,0 +1,31 @@
+import { CardCapsule } from "../Components"
+import { VectorItemsURI } from "../Pages"
+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/MembershipGQLModel/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/MembershipGQLModel/Mutations/helpers.jsx

@@ -0,0 +1,7 @@
+export const makeMutationURI = (linkURI, action, { withId = false } = {}) => {
+    const viewSegmentRe = /\/view(\/|$)/;
+    if (!viewSegmentRe.test(linkURI)) throw new Error(`LinkURI must contain '/view'. Got: ${linkURI}`);
+
+    const base = linkURI.replace(viewSegmentRe, `/${action}$1`).replace(/\/?$/, "/");
+    return withId ? `${base}:id` : base.replace(/\/$/, "");
+};

package/src/MembershipGQLModel/Pages/PageBase.jsx

@@ -0,0 +1,57 @@
+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=PageNavbar_,
+    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/MembershipGQLModel/Pages/PageCreateItem.jsx

@@ -0,0 +1,28 @@
+import { ReadAsyncAction } from "../Queries"
+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/MembershipGQLModel/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}
+        />
+         
+    )
+}
+

package/src/MembershipGQLModel/Pages/PageNavbar.jsx

@@ -0,0 +1,110 @@
+import Nav from 'react-bootstrap/Nav'
+import { ProxyLink, MyNavbar, useHash } from '@hrbolek/uoisfrontend-shared';
+
+import { LinkURI } from '../Components'
+
+/**
+ * Allow to use HashContainer for determination which component at page will be rendered.
+ * That must be manually inserted at TemplatePageContent, usually this should be done 
+ * as children of TemplateLargeCard.
+ * <TemplateLargeCard>
+ *     <HashContainer>
+ *         <VectorA id="history"/>
+ *         <VectorB id="roles"/>
+ *         <VectorC id="graph"/>
+ *     </HashContainer>
+ * </TemplateLargeCard>
+ * it is usefull to define globally active "areas" like science, administration, teaching, ...
+ */
+const TemplatePageSegments = [
+    { segment: 'education', label: 'Výuka' },
+    { segment: 'reaserach', label: 'Tvůrčí činnost' },
+    { segment: 'administration', label: 'Organizační činnost' },
+    { segment: 'development', label: 'Rozvoj' },
+]
+
+/**
+ * A navigation button component that generates a URL based on the template's ID and a specific segment.
+ * The button uses a `ProxyLink` to navigate while preserving hash and query parameters.
+ *
+ * ### Features:
+ * - Dynamically constructs the URL with a hash fragment pointing to the specified segment.
+ * - Displays a label for the navigation link.
+ * - Integrates seamlessly with `ProxyLink` for enhanced navigation.
+ *
+ * @component
+ * @param {Object} props - The properties for the TitleNavButton component.
+ * @param {Object} props.template - The template object containing details about the template.
+ * @param {string|number} props.template.id - The unique identifier for the template.
+ * @param {string} props.segment - The segment to append as a hash fragment in the URL.
+ * @param {string} props.label - The text to display as the label for the navigation button.
+ *
+ * @returns {JSX.Element} A styled navigation button linking to the constructed URL.
+ *
+ * @example
+ * // Example 1: Basic usage with a template and segment
+ * const template = { id: 123 };
+ * const segment = "details";
+ * const label = "View Details";
+ *
+ * <TitleNavButton template={template} segment={segment} label={label} />
+ * // Resulting URL: `/ug/template/view/123#details`
+ *
+ * @example
+ * // Example 2: Different segment and label
+ * <TitleNavButton template={{ id: 456 }} segment="settings" label="Template Settings" />
+ * // Resulting URL: `/ug/template/view/456#settings`
+ */
+const TitleNavButton = ({ item, segment, label, ...props }) => {
+    // const urlbase = (segment) => `/templates/template/${segment}/${template?.id}`;
+    const urlbase = (segment) => `${LinkURI}${item?.id}#${segment}`;
+    return (
+        <Nav.Link as={"span"} {...props}>
+            {/* <ProxyLink to={urlbase(segment)}>{label}</ProxyLink> */}
+        </Nav.Link>
+    );
+};
+
+/**
+ * Renders the navigation bar for an Template page.
+ *
+ * This component uses a custom hook, `useHash()`, to determine the current hash
+ * and highlights the active segment. It displays a navigation bar (using MyNavbar)
+ * with several segments (e.g. "history", "roles", "graph"), each rendered as a 
+ * TitleNavButton. The segments are hardcoded in this component and only rendered 
+ * if an `template` object is provided.
+ *
+ * @component
+ * @param {Object} props - The component properties.
+ * @param {Object} props.template - The template entity object that provides context for the page.
+ * @param {string|number} props.template.id - The unique identifier for the template.
+ * @param {Function} props.onSearchChange - Callback function to handle changes in the search input.
+ *
+ * @returns {JSX.Element} The rendered TemplatePageNavbar component.
+ *
+ * @example
+ * // Example usage:
+ * const template = { id: 123, ... };
+ * <TemplatePageNavbar template={template} onSearchChange={handleSearchChange} />
+ */
+export const PageNavbar = ({ item, children, onSearchChange }) => {
+    // const [currentHash, setHash] = useHash(); // Use the custom hook to manage hash
+    const currentHash = "da"
+    return (
+        <div className='screen-only'>
+            <MyNavbar onSearchChange={onSearchChange} >
+                {item && TemplatePageSegments.map(({ segment, label }) => (
+                    <Nav.Item key={segment} >
+                        <TitleNavButton
+                            template={item}
+                            segment={segment}
+                            label={label}
+                            className={segment === currentHash ? "active" : ""} aria-current={segment === currentHash ? "page" : undefined}
+                        />
+                    </Nav.Item>
+                ))}
+                {children}
+            </MyNavbar>
+        </div>
+    );
+};

package/src/MembershipGQLModel/Pages/PageReadItem.jsx

@@ -0,0 +1,11 @@
+import { GeneratedContentBase } from "../../../../_template/src/Base/Pages/Page"
+import { PageItemBase } from "./PageBase"
+
+export const PageReadItem = ({ 
+    SubPage=GeneratedContentBase,
+    ...props
+}) => {
+    return (
+        <PageItemBase SubPage={SubPage} {...props}/>
+    )
+}

package/src/MembershipGQLModel/Pages/PageReadItemEx.jsx

@@ -0,0 +1,42 @@
+import { GeneratedContentBase } from "../../../../_template/src/Base/Pages/Page"
+import { ReadItemURI } from "../Components"
+import { ReadAsyncAction } from "../Queries"
+import { PageReadItem } from "./PageReadItem"
+
+export const RolesOnURI = ReadItemURI.replace("view", "roleson")
+
+
+/**
+ * Základní obálka pro „read“ stránku entity podle `:id` z routy.
+ *
+ * Využívá `PageItemBase`, který zajistí:
+ * - získání `id` z URL (`useParams`)
+ * - načtení entity přes `AsyncActionProvider` pomocí `queryAsyncAction`
+ * - vložení navigace (`PageNavbar`)
+ *
+ * Uvnitř provideru vykreslí `ReadWithComponent`, který si vezme načtený `item`
+ * z `useGQLEntityContext()` a zobrazí ho v zadané komponentě (defaultně `LargeCard`).
+ *
+ * @component
+ * @param {object} props
+ * @param {Function} [props.queryAsyncAction=ReadAsyncAction]
+ *   Async action (např. thunk) pro načtení entity z backendu/GraphQL dle `id`.
+ * @param {Object<string, any>} [props]
+ *   Další props předané do `ReadWithComponent` (např. `Component`, layout props).
+ *
+ * @returns {import("react").JSX.Element}
+ */
+export const PageReadItemRolesOn = ({ 
+    queryAsyncAction=ReadAsyncAction, 
+    children, 
+    ...props 
+}) => {
+    return (
+        <PageReadItem 
+            queryAsyncAction={queryAsyncAction}
+            SubPage={GeneratedContentBase} 
+            {...props}
+        />
+    )
+}
+

package/src/MembershipGQLModel/Pages/PageUpdateItem.jsx

@@ -0,0 +1,14 @@
+import { UpdateBody } from "../Mutations/Update"
+import { PageItemBase } from "./PageBase"
+
+export const PageUpdateItem = ({ 
+    SubPage=UpdateBody,
+    ...props
+}) => {
+    return (
+        <PageItemBase 
+            SubPage={SubPage}
+            {...props}
+        />
+    )
+}

package/src/MembershipGQLModel/Pages/PageVector.jsx

@@ -0,0 +1,80 @@
+
+import { ReadPageAsyncAction } from "../Queries"
+import { useInfiniteScroll } from "../../../../dynamic/src/Hooks/useInfiniteScroll"
+import { PageBase } from "./PageBase"
+import { Table } from "../Components/Table"
+import { Filter } from "../Components/Filter"
+import { FilterButton, ResetFilterButton } from "../../../../_template/src/Base/FormControls/Filter"
+import { useSearchParams } from "react-router"
+import { useEffect } from "react"
+import { useMemo } from "react"
+import { AsyncStateIndicator } from "../../../../_template/src/Base/Helpers/AsyncStateIndicator"
+import { Collapsible } from "../../../../_template/src/Base/FormControls/Collapsible"
+
+
+function safeParseWhere(sp, paramName = "where") {
+    const raw = sp.get(paramName);
+    if (!raw) return null;
+    try {
+        const obj = JSON.parse(raw);
+        return obj && typeof obj === "object" ? obj : null;
+    } catch {
+        return null;
+    }
+}
+
+// 
+const filterParameterName = "gr_where"
+export const PageVector = ({ children, queryAsyncAction = ReadPageAsyncAction }) => {
+    
+    const [sp] = useSearchParams();
+
+    const whereFromUrl = useMemo(() => safeParseWhere(sp, filterParameterName), [sp.toString()]);
+
+    const { items, loading, error, hasMore, sentinelRef, loadMore, restart } = useInfiniteScroll(
+        {
+            asyncAction: queryAsyncAction,
+            actionParams: { skip: 0, limit: 25, where: whereFromUrl },
+            // reset: whereFromUrl
+        }
+    )
+
+    useEffect(() => {
+        const params = {skip: 0, limit: 25, where: whereFromUrl} 
+        restart(params)
+    }, [whereFromUrl]);
+
+    
+    return (
+        <PageBase>
+            <Collapsible 
+                className="form-control btn btn-outline-primary"
+                buttonLabelCollapsed="Zobrazit filtr"
+                buttonLabelExpanded="Skrýt filtr"
+            >
+                <Filter>
+                    <FilterButton 
+                        className="form-control btn btn-outline-success"
+                        paramName={filterParameterName}
+                    >
+                        Filtrovat
+                    </FilterButton>
+                    <ResetFilterButton 
+                        className="form-control btn btn-warning"
+                        paramName={filterParameterName}
+                    >
+                        Vymazat filtr
+                    </ResetFilterButton>
+                </Filter>
+            </Collapsible>
+
+            <Table data={items} />
+
+            <AsyncStateIndicator error={error}  loading={loading} text="Nahrávám další..." />
+
+            {hasMore && <div ref={sentinelRef} style={{ height: 80, backgroundColor: "lightgray" }} />}
+            {hasMore && <button className="btn btn-success form-control" onClick={() => loadMore()}>Více</button>}
+        </PageBase>
+    )
+}
+