@hrbolek/uoisfrontend-template 0.6.1 → 0.6.3

package/src/EventGQLModel/Vectors/VectorAttribute.jsx

@@ -0,0 +1,56 @@
+import { CardCapsule } from "../Components/CardCapsule"
+import { Table } from "../Components/Table"
+import { Col } from "../../../../_template/src/Base/Components/Col"
+import { Row } from "../../../../_template/src/Base/Components/Row"
+
+export const VectorAttributeFactory = (attribute_name) => ({ item }) => {
+    const attribute_value = item?.[attribute_name] || []
+    return (
+        <Row key={attribute_name}>
+            <Col className="col-2"><b>{attribute_name}</b></Col>
+            <Col className="col-10">
+                <CardCapsule item={item}>
+                    <Table data={attribute_value} />
+                </CardCapsule>
+            </Col>
+        </Row>
+    )
+}
+
+export const VectorAttribute_ = ({ attribute_name, item }) => {
+    const attribute_value = item?.[attribute_name] || []
+    return (
+        <Row key={attribute_name}>
+            <Col className="col-2"><b>{attribute_name}</b></Col>
+            <Col className="col-10">
+                <CardCapsule item={item}>
+                    <Table data={attribute_value} />
+                </CardCapsule>
+            </Col>
+        </Row>
+    )
+}
+
+export const VectorAttribute = ({ attribute_name, item }) => {
+    const attribute_value = item?.[attribute_name] || []
+    return (
+        <CardCapsule item={item} title={attribute_name+'[]'}>
+            <Table data={attribute_value} />
+        </CardCapsule>
+    )
+}
+
+
+export const MediumCardVectors = ({ item }) => {
+    return (
+        <CardCapsule item={item}>
+            {Object.entries(item).map(([attribute_name, attribute_value]) => {
+                if (Array.isArray(attribute_value)) {
+                    return <VectorAttribute key={attribute_name} attribute_name={attribute_name} item={item} />
+                } else {
+                    return null
+                }
+            })}
+        </CardCapsule>
+    )
+}

package/src/EventGQLModel/Vectors/index.js

@@ -0,0 +1 @@
+export * from './TemplateVectorsAttribute'

package/src/EventGQLModel/WhatToDo.md

@@ -0,0 +1,44 @@
+
+
+## Base Copy
+
+- copy /_template/ directory to your place
+
+## Adapt to new type
+
+### Change URI locations
+- in Link.jsx file (see subdir ./components/) change LinkURI
+- in Link.jsx file change registerLink('YourGQLModel)
+
+### Register pages and components to Application
+- rename RouterSegments in Page/RouterSegments.jsx
+- insert RouterSegments into app router, so make them working
+
+
+At some point you should restart vite.
+
+- use http://localhost:8001/doc and graphiql at http://localhost:8001/gql to get queries and update AsyncActions, fragments, etc. in directory Queries
+  - readById
+  - readPage
+  - mutations (CUD)
+
+- try to navigate in your app to URI defined in Link to reach list of items `/template/YOUDEFINED/list/'
+- remove all errors until you get your app showing a table
+- try to navigate from table into individual items
+- check permission at API (source code etc.) to get info about neede roles for particular mutations 
+  - UserAbsoluteAccessControlExtension or RbacProviderExtension
+  - set
+
+- Change LargeCard, add there more buttons
+
+- Update MediumContent.jsx file to show more or less data related to you entity
+- Update MediumEditableContent.jsx file to allow edit of more or less data
+
+
+## Add new Mutations
+
+- check gqlendpoint to cover all available mutations with appropriate permissions
+  
+### Update filters
+
+- Set Filter component, correct it at PageVector, do not forget to use appropriate name for query param in url

package/src/EventGQLModel/index.js

@@ -0,0 +1,71 @@
+
+export * from './Components'
+export * from './Scalars'
+export * from './Vectors'
+export * from './Queries'
+export * from './Pages'
+
+import { 
+    CardCapsule,
+    Children,
+    CUDButton,
+    LargeCard,
+    Link,
+    MediumContent,
+    MediumCard,
+
+    MediumEditableContent,
+    LiveEdit
+
+} from './Components'
+
+import { 
+    EditPage,
+    Page,
+    PageNavbar,
+    TemplateRouterSegments,
+    VectorPage
+} from './Pages'
+
+// import { UIActions } from './Queries'
+
+export const TemplateUI = {
+    CardCapsule,
+    Children,
+    CUDButton,
+    LargeCard,
+    Link,
+    MediumContent,
+    MediumCard,
+
+    MediumEditableContent,
+    LiveEdit,
+
+    Page,
+    VectorPage,
+    EditPage,
+    PageNavbar,
+    TemplateRouterSegments
+}
+
+
+
+// export const TemplateUI = {
+//     CardCapsule: withUI(_TemplateUI)(_TemplateUI.CardCapsule),
+//     Children: withUI(_TemplateUI)(_TemplateUI.Children),
+//     CUDButton: withUI(_TemplateUI)(_TemplateUI.CUDButton),
+//     LargeCard: withUI(_TemplateUI)(_TemplateUI.LargeCard),
+//     Link: withUI(_TemplateUI)(_TemplateUI.Link),
+//     MediumContent: withUI(_TemplateUI)(_TemplateUI.MediumContent),
+//     MediumCard: withUI(_TemplateUI)(_TemplateUI.MediumCard),
+
+//     MediumEditableContent: withUI(_TemplateUI)(_TemplateUI.MediumEditableContent),
+//     LiveEdit: withUI(_TemplateUI)(_TemplateUI.LiveEdit),
+
+//     Page: withUI(_TemplateUI)(_TemplateUI.Page),
+//     VectorPage: withUI(_TemplateUI)(_TemplateUI.VectorPage),
+//     EditPage: withUI(_TemplateUI)(_TemplateUI.EditPage),
+//     PageNavbar: withUI(_TemplateUI)(_TemplateUI.PageNavbar),
+//     RouterSegment: withUI(_TemplateUI)(_TemplateUI.RouterSegment)
+// }
+

package/src/GroupGQLModel/Mutations/Create.jsx

@@ -10,9 +10,15 @@ import {
 const DefaultContent = MediumEditableContent
 const MutationAsyncAction = InsertAsyncAction
 
+// const permissions = {
+//     oneOfRoles: ["superadmin"],
+//     mode: "absolute",
+// }
+
+// ALTERNATIVE, CHECK GQLENDPOINT
 const permissions = {
-    oneOfRoles: ["superadmin"],
-    mode: "absolute",
+    oneOfRoles: ["administrátor", "personalista"],
+    mode: "item",
 }
 
 export const CreateLink = ({

package/src/GroupGQLModel/Mutations/Delete.jsx

@@ -10,9 +10,15 @@ import {
 const DefaultContent = MediumContent
 const MutationAsyncAction = DeleteAsyncAction
 
+// const permissions = {
+//     oneOfRoles: ["superadmin"],
+//     mode: "absolute",
+// }
+
+// ALTERNATIVE, CHECK GQLENDPOINT
 const permissions = {
-    oneOfRoles: ["superadmin"],
-    mode: "absolute",
+    oneOfRoles: ["administrátor", "personalista"],
+    mode: "item",
 }
 
 export const DeleteLink = ({ 

package/src/GroupGQLModel/Mutations/Update.jsx

@@ -11,17 +11,17 @@ 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",
+//     oneOfRoles: ["superadmin"],
+//     mode: "absolute",
 // }
 
+// ALTERNATIVE, CHECK GQLENDPOINT
+const permissions = {
+    oneOfRoles: ["administrátor", "personalista"],
+    mode: "item",
+}
+
 
 export const UpdateLink = ({
     uriPattern=UpdateItemURI, 

package/src/GroupGQLModel/Queries/Fragments.jsx

@@ -47,7 +47,20 @@ fragment Medium on GroupGQLModel {
 const LargeFragmentStr = `
 fragment Large on GroupGQLModel {
   ...Medium
-  subgroups {
+  subgroups(where: {
+      grouptype: {
+        id: {
+          _in: [
+            "cd49e152-610c-11ed-9f29-001a7dda7110", 
+            "cd49e153-610c-11ed-bf19-001a7dda7110",
+            "cd49e154-610c-11ed-bdbf-001a7dda7110",
+            "cd49e155-610c-11ed-bdbf-001a7dda7110",
+            "cd49e155-610c-11ed-844e-001a7dda7110",
+            "cd49e156-610c-11ed-87ef-001a7dda7110"
+          ]
+        }
+      }
+    }) {
     __typename
     id
     name
@@ -56,6 +69,9 @@ fragment Large on GroupGQLModel {
       id
       name
     }
+      rbacobject {
+        ...RBRoles
+    }
   }
   rolesOn {
     ...Role

package/src/GroupGQLModel/Scalars/RBACObject.jsx

@@ -13,7 +13,7 @@ import { EntityLookup } from "../../Base/FormControls/EntityLookup"
 import { Input } from "../../Base/FormControls/Input"
 import { SearchAsyncAction as SearchUserAsyncAction } from "../../UserGQLModel/Queries/SearchAsyncAction"
 import { useEffect } from "react"
-import { useAsyncThunkAction } from "../../../../dynamic/src/Hooks"
+import { useAsync, useAsyncThunkAction } from "../../../../dynamic/src/Hooks"
 import { ReadAsyncAction } from "../../GroupGQLModel"
 import { AsyncStateIndicator } from "../../Base/Helpers/AsyncStateIndicator"
 import { InsertAsyncAction } from "../../RoleGQLModel/Queries"
@@ -25,9 +25,12 @@ export const RBACObject = ({ item }) => {
     const filtered = useMemo(() => currentUserRoles.filter(cr => cr?.valid), [currentUserRoles])
     return (
         <BaseUI.CardCapsule item={{}} title="Moje role vůči této entitě">
-            <SimpleCardCapsuleRightCorner>
-                <Edit item={item}/>
-            </SimpleCardCapsuleRightCorner>
+            {item?.__typename !== "UserGQLModel" && (
+                <SimpleCardCapsuleRightCorner>
+                    <Edit item={item}/>
+                </SimpleCardCapsuleRightCorner>
+            )}
+            
             {filtered.map(role => (
                 <Attribute key={role?.id}>
                     <Link item={role?.roletype} />@
@@ -71,8 +74,15 @@ export const RBACEdit = ({ item, onChange }) => {
     const { id="" } = item || {}
     const { entity, loading, error, run } = useAsyncThunkAction(ReadAsyncAction, {id}, {deferred: true})
     const { data, loading: saving, error: updateError, run: save } = useAsyncThunkAction(InsertAsyncAction, {id}, {deferred: true})
-
+    // const { entity=item, loading, error, run } = useAsync(ReadAsyncAction, {id}, {deferred: true})
+    // const { data, loading: saving, error: updateError, run: save } = useAsync(InsertAsyncAction, {id}, {deferred: true})
+    // const [itemCached, setItemCached] = useState(item)
     const [roles, setRoles] = useState((entity || {})?.roles||[])
+
+    // useEffect(()=>{
+    //     setItemCached(() => entity)
+    // },[entity])
+
     
     // useEffect(()=>{
     //     const newRoles = (entity || {})?.roles||[]
@@ -128,9 +138,11 @@ export const RBACEdit = ({ item, onChange }) => {
                 user: null,
             })
         )
+        // await run()
         // setRoles(prev => ([...prev, role]))
     }
     return (<>
+        {/* {JSON.stringify(roles)} */}
         <AsyncStateIndicator 
             error={error} 
             loading={loading} 

package/src/GroupGQLModel/Vectors/GroupMemberships.jsx

@@ -6,7 +6,7 @@ import { Link as BaseLink } from "../../../../_template/src/Base/Components/Link
 import { useNavigate } from "react-router"
 import { UpdateLink } from "../Mutations/Update"
 import { LinkURI } from "../Components"
-import { label } from "happy-dom/lib/PropertySymbol"
+
 import { Attribute } from "../../../../_template/src/Base/Components/Attribute"
 import { SimpleCardCapsuleRightCorner } from "../../../../_template/src/Base/Components"
 import { CreateGroupInserMembershipButton } from "../Mutations/AddMembership"

package/src/UserGQLModel/Components/MediumContent.jsx

@@ -1,8 +1,8 @@
 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 { Col as Col_ } from "../../../../_template/src/Base/Components/Col"
+// import { Row } from "../../../../_template/src/Base/Components/Row"
 import { Roles } from "../Vectors/Roles"
-import { UserRoles } from "../Vectors/UserRoles"
+// import { UserRoles } from "../Vectors/UserRoles"
 
 /**
  * A component that displays medium-level content for an template entity.
@@ -35,6 +35,12 @@ export const MediumContent = ({ item, children}) => {
             <Attribute attribute_name="surname" label="Příjmení" item={item} />
             <Attribute attribute_name="fullname" label="Celé jméno" item={item} />
             <Attribute attribute_name="email" label="Email" item={item} />
+            <Attribute attribute_name="email" label="Email" item={item}>
+                <a href={`mailto:${item?.email}`}>{item?.email}</a>
+            </Attribute>
+            <Attribute label="Telefon" item={item}>
+                <a href={`tel:+420800101202`}>800 101 202</a>
+            </Attribute>
             {children}
         </div>
         

package/src/UserGQLModel/Queries/Fragments.jsx

@@ -40,10 +40,16 @@ fragment Large on UserGQLModel {
         id
         name
       }
+        rbacobject {
+        ...RBRoles
+    }
     }
     valid
     startdate
     enddate
+    rbacobject {
+        ...RBRoles
+    }
   }
   roles {
     ...Role

package/src/_Template/WhatToDo.md

@@ -17,7 +17,7 @@
 
 At some point you should restart vite.
 
-- use http://localhost:8001/doc and graphiql at http://localhost:8001/gql to get queries and update AsyncActions, fragments, etc. in directory Queries
+- use http://localhost:8001/doc and graphiql at http://localhost:8001/gql to get queries and update AsyncActions, fragments, etc. in directory Queries, as an alternative uri you could use http://localhost:33001/
   - readById
   - readPage
   - mutations (CUD)

package/index.html

@@ -1,104 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <title>GQL Model Viewer</title>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
-<script>
-    // Node-like shim pro knihovny, které čekají process.env
-    globalThis.process = globalThis.process || { env: {} };
-    globalThis.process.env = globalThis.process.env || {};
-    globalThis.process.env.NODE_ENV = globalThis.process.env.NODE_ENV || "development" || "production";
-</script>
-
-  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
-
-  <!-- <script src="https://unpkg.com/react@19"></script>
-  <script src="https://unpkg.com/react-dom@19"></script>   -->
-
-    <script src="https://unpkg.com/react@18.3.1/umd/react.development.js"></script>
-  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"></script>
-
-  <script src="https://unpkg.com/@reduxjs/toolkit@1.9.3/dist/redux-toolkit.umd.js"></script>
-
-    <!-- Babel (modern verze) -->
-    <script src="https://unpkg.com/@babel/standalone@7.25.0/babel.min.js"></script>
-
-    <!-- HTM (React JSX alternativa) -->
-    <script src="https://unpkg.com/htm@3.1.1/dist/htm.umd.js" crossorigin></script>
-
-</head>
-
-<body>
-
-    <div id="log-root_"></div>
-    <div id="root"></div>
-    <div id="log-output"></div>
-
-
-
-    <script type="text/babel" data-type="module" data-presets="react">
-        const { useState, useMemo } = React;
-        import { CardCapsule, LeftColumn, MiddleColumn, Row } from "./dist/es"
-
-        function htmlLog(...args) {
-            const el = document.getElementById('log-output');
-            if (!el) return;
-
-            const line = document.createElement('div');
-
-            line.textContent = args
-                .map(arg => typeof arg === 'object'
-                    ? JSON.stringify(arg, null, 2)
-                    : String(arg)
-                )
-                .join(' ');
-
-            el.appendChild(line);
-        }
-
-        const originalLog = console.log;
-
-        console.log = (...args) => {
-            originalLog(...args);
-            htmlLog(...args);
-        };
-
-        const Counter = () => {
-            const [counter, setCounter] = useState(0)
-            const Plus = () => {
-                console.log(counter, '=>', counter + 1)
-                setCounter(prev=>prev+1)
-            }
-            return (
-                <button className="btn btn-sm btn-outline-primary" onClick={Plus}>
-                    {counter} + 1
-                </button>
-            )
-        }
-        
-        const MyApp = () => {
-            console.log("MyApp")
-            return (
-                <CardCapsule title={<> demo <Counter /> </>}>
-                    <Row>
-                    <LeftColumn>
-                        <CardCapsule title="Left">
-                            Hello world <Counter />
-                        </CardCapsule>
-                    </LeftColumn>
-                    <MiddleColumn>
-                        <CardCapsule title="Middle">
-                            Hello world <Counter />
-                        </CardCapsule>
-                    </MiddleColumn>
-                    </Row>
-                </CardCapsule>
-            )
-        }
-        // console.log("mount", mount)
-        ReactDOM.createRoot(document.getElementById("root")).render(<MyApp />);
-    </script>
-</body>    
-</html>

package/vite.config.js

@@ -1,47 +0,0 @@
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-import path from "path";
-
-export default defineConfig({
-  plugins: [react()],
-
-  resolve: {
-    alias: {
-      // Když někdo v tomhle balíku (nebo jeho deps) udělá
-      // import '@hrbolek/uoisfrontend-gql-shared'
-      // → vezme se přímo src/index.js, ne package.json/main/dist
-    //   "@hrbolek/uoisfrontend-template": path.resolve(__dirname, "src"),
-      "@hrbolek/uoisfrontend-template": path.resolve(__dirname, "src/index.js"),
-      "@hrbolek/uoisfrontend-dynamic": path.resolve(__dirname, "../../packages/dynamic/src/index.js"),
-    },
-  },
-
-  build: {
-    lib: {
-      entry: path.resolve(__dirname, "src/index.js"),
-      name: "UoisfrontendGqlShared",
-      formats: ["es", "cjs", "umd"],
-      fileName: (format, name) => `${format}/${name}.js`,
-    },
-    rollupOptions: {
-      external: [
-        "react",
-        "react-dom",
-        "react-redux",
-        "react-bootstrap",
-        "react-router-dom",
-        "@reduxjs/toolkit",
-      ],
-      output: {
-        globals: {
-          react: "React",
-          "react-dom": "ReactDOM",
-          "react-redux": "ReactRedux",
-          "react-bootstrap": "ReactBootstrap",
-          "react-router-dom": "ReactRouterDOM",
-          "@reduxjs/toolkit": "RTK",
-        },
-      },
-    },
-  },
-});