@hrbolek/uoisfrontend-template 0.6.1 → 0.6.3

package/package.json

@@ -1,12 +1,16 @@
 {
     "name": "@hrbolek/uoisfrontend-template",
-    "version": "0.6.1",
+    "version": "0.6.3",
     "private": false,
     "publishConfig": {
         "access": "public"
     },
     "_main": "src/index.js",
     "_module": "src/index.js",
+    "files": [
+        "dist",
+        "src"
+    ],
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "dev": "vite",

package/src/Base/Components/Link.jsx

@@ -1,23 +1,28 @@
 // import { URIRoot } from "../../uriroot";
 import { ProxyLink } from "./ProxyLink";
 
-const RegisterofLinks = {};
-export const registerLink = (__typename, Link) => {
-    const registeredLink = RegisterofLinks[__typename];
-    if (!registeredLink) {
-        RegisterofLinks[__typename] = Link;
+const RegisterOfLinks = {};
+export const registerLink = (__typename, Link, overrideLinkURI) => {
+
+    const Link_ = overrideLinkURI
+        ? ({ ...props }) => <Link {...props} LinkURI={overrideLinkURI} />
+        : Link;
+
+    const registeredLink = RegisterOfLinks[__typename];
+
+    if (!registeredLink || overrideLinkURI) {
+        RegisterOfLinks[__typename] = Link_;
     } else {
-        // throw new Error(`Link for typename ${__typename} is already registered.`);
         console.warn(`Link for typename ${__typename} is already registered.`);
     }
-}
+};
 
 export const GenericURIRoot = "/generic";
 export const LinkURI = GenericURIRoot + "/view/";
 export const VectorItemsURI = GenericURIRoot + "/list/";
 
 export const Link = ({ item, action="view", children, ...others }) => {
-    const SpecificLink = item?.__typename ? RegisterofLinks[item.__typename] : null;
+    const SpecificLink = item?.__typename ? RegisterOfLinks[item.__typename] : null;
     if (SpecificLink && SpecificLink !== Link) {
         // console.log('Using specific link for typename:', item.__typename);
         return <SpecificLink item={item} action={action} {...others}>{children}</SpecificLink>;

package/src/Base/Mutations/General.jsx

@@ -90,6 +90,7 @@ export const GeneralButton = ({
                 rbacitem={rbacitem}
                 onOk={handleOk}
                 onCancel={handleCancel}
+                title={JSON.stringify(oneOfRoles)}
                 {...props}
             />
         </PermissionGate>
@@ -233,8 +234,9 @@ export const GeneralButtonBody = ({
             </>
         )    
     } else {
+        const {title, onClick, ...others} = props
         return (
-            <button {...props} disabled><Lock /> {children || "Vytvořit nový"}</button>
+            <button {...others} title={title} style={{ opacity: 0.5, pointerEvents: "auto" }}><Lock /> {children || "Vytvořit nový"}</button>
         )
 
     }

package/src/Base/Mutations/Update.jsx

@@ -11,6 +11,11 @@ import { GeneralButton, GeneralDialog, GeneralLink } from "./General"
 
 export const UpdateURI = makeMutationURI(LinkURI, "edit", { withId: true });
 
+// naviguje na stranku, kde se da udelat update
+// testuje opravneni 
+// - oneOfRoles = ["superadmin"],
+// - mode = "absolute",
+// item musi obsahovat rbacobject s rolemi aktualniho uzivatele
 export const UpdateLink = ({
     item,
     oneOfRoles = ["superadmin"],

package/src/EventGQLModel/Components/A4Plan/A4Plan.jsx

@@ -0,0 +1,363 @@
+import { useMemo } from "react";
+import {
+    FlexContainer,
+    FlexRow,
+    WeekHeaderContent,
+    WeekGridItem
+} from "../Plan";
+import {
+    getContrastTextColor,
+    toLocalDate,
+    addDays
+} from "../Plan";
+
+/* =========================
+   KONSTANTY
+========================= */
+
+const DAY_NAMES = ["pondělí", "úterý", "středa", "čtvrtek", "pátek"];
+const ISO_DAY_INDEXES = [1, 2, 3, 4, 5]; // Po..Pá
+
+const DAY_START_MINUTES = 8 * 60;   // 8:00
+const DAY_END_MINUTES = 18 * 60;    // 18:00
+const DAY_TOTAL_MINUTES = DAY_END_MINUTES - DAY_START_MINUTES;
+
+const TIME_MARKS = [
+    { label: "8:00", minutes: 8 * 60 },
+    { label: "9:30", minutes: 9 * 60 + 30 },
+    { label: "9:50", minutes: 9 * 60 + 50 },
+    { label: "11:20", minutes: 11 * 60 + 20 },
+    { label: "11:40", minutes: 11 * 60 + 40 },
+    { label: "13:10", minutes: 13 * 60 + 10 },
+    { label: "14:30", minutes: 14 * 60 + 30 },
+    { label: "16:00", minutes: 16 * 60 + 0 },
+    { label: "16:20", minutes: 16 * 60 + 20 },
+    { label: "17:50", minutes: 17 * 60 + 50 }
+];
+
+/* =========================
+   DATE HELPERS
+========================= */
+
+function toDateTime(value) {
+    if (value instanceof Date) return new Date(value.getTime());
+    return new Date(value);
+}
+
+function startOfDay(dateLike) {
+    const d = toDateTime(dateLike);
+    return new Date(d.getFullYear(), d.getMonth(), d.getDate(), 0, 0, 0, 0);
+}
+
+function endOfDay(dateLike) {
+    const d = toDateTime(dateLike);
+    return new Date(d.getFullYear(), d.getMonth(), d.getDate(), 23, 59, 59, 999);
+}
+
+function minutesOfDay(date) {
+    return date.getHours() * 60 + date.getMinutes();
+}
+
+function rangesIntersect(aStart, aEnd, bStart, bEnd) {
+    return aStart <= bEnd && bStart <= aEnd;
+}
+
+function getISOWeekday(date) {
+    const jsDay = date.getDay();
+    return jsDay === 0 ? 7 : jsDay;
+}
+
+function startOfISOWeek(dateLike) {
+    const d = startOfDay(dateLike);
+    return addDays(d, 1 - getISOWeekday(d));
+}
+
+function pad2(n) {
+    return String(n).padStart(2, "0");
+}
+
+function getISOWeek(date) {
+    const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
+    const dayNum = d.getUTCDay() || 7;
+    d.setUTCDate(d.getUTCDate() + 4 - dayNum);
+    const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
+    return Math.ceil((((d - yearStart) / 86400000) + 1) / 7);
+}
+
+function buildWeeksInRange(startdate, enddate) {
+    const start = startOfISOWeek(startdate);
+    const end = startOfISOWeek(enddate);
+
+    const result = [];
+    let cursor = new Date(start);
+
+    while (cursor <= end) {
+        const weekStart = new Date(cursor);
+        const weekEnd = addDays(weekStart, 6);
+
+        const isoYear = (() => {
+            const d = new Date(Date.UTC(weekStart.getFullYear(), weekStart.getMonth(), weekStart.getDate()));
+            const dayNum = d.getUTCDay() || 7;
+            d.setUTCDate(d.getUTCDate() + 4 - dayNum);
+            return d.getUTCFullYear();
+        })();
+
+        const isoWeek = getISOWeek(weekStart);
+
+        result.push({
+            id: `${isoYear}-W${String(isoWeek).padStart(2, "0")}`,
+            isoYear,
+            isoWeek,
+            label: `${isoWeek}`,
+            labelFull: `${isoYear}/W${isoWeek}`,
+            weekStart,
+            weekEnd,
+            firstHalfStart: weekStart,
+            firstHalfEnd: addDays(weekStart, 2),
+            secondHalfStart: addDays(weekStart, 3),
+            secondHalfEnd: weekEnd
+        });
+
+        cursor = addDays(cursor, 7);
+    }
+
+    return result;
+}
+
+function normalizeEvent(event) {
+    const startRaw = event?.start ?? event?.startDate ?? event?.startdate;
+    const endRaw = event?.end ?? event?.endDate ?? event?.enddate ?? startRaw;
+
+    const start = toDateTime(startRaw);
+    const end = toDateTime(endRaw);
+
+    if (Number.isNaN(start.getTime()) || Number.isNaN(end.getTime())) {
+        return null;
+    }
+
+    return start <= end
+        ? { ...event, startDateTimeObj: start, endDateTimeObj: end }
+        : { ...event, startDateTimeObj: end, endDateTimeObj: start };
+}
+
+function getWeekDayDate(week, isoDay) {
+    return addDays(week.weekStart, isoDay - 1);
+}
+
+function getEventColor(event) {
+    return event?.color ?? event?.type?.color ?? "#777777";
+}
+
+function getEventLabel(event) {
+    return event?.abbreviation ?? event?.type?.abbreviation ?? event?.title ?? event?.name ?? "";
+}
+
+function clipEventToDay(event, dayDate) {
+    const dayStart = startOfDay(dayDate);
+    const dayEnd = endOfDay(dayDate);
+
+    if (!rangesIntersect(event.startDateTimeObj, event.endDateTimeObj, dayStart, dayEnd)) {
+        return null;
+    }
+
+    const clippedStart = event.startDateTimeObj < dayStart ? dayStart : event.startDateTimeObj;
+    const clippedEnd = event.endDateTimeObj > dayEnd ? dayEnd : event.endDateTimeObj;
+
+    const startMinutes = Math.max(minutesOfDay(clippedStart), DAY_START_MINUTES);
+    const endMinutes = Math.min(minutesOfDay(clippedEnd), DAY_END_MINUTES);
+
+    if (endMinutes <= DAY_START_MINUTES || startMinutes >= DAY_END_MINUTES || endMinutes <= startMinutes) {
+        return null;
+    }
+
+    return {
+        ...event,
+        clippedStart,
+        clippedEnd,
+        topPct: ((startMinutes - DAY_START_MINUTES) / DAY_TOTAL_MINUTES) * 100,
+        heightPct: ((endMinutes - startMinutes) / DAY_TOTAL_MINUTES) * 100
+    };
+}
+
+/* =========================
+   UI
+========================= */
+
+const DayLabelCell = ({ label, height = 180 }) => {
+    return (
+        <div
+            className="border rounded overflow-hidden d-flex align-items-center justify-content-center user-select-none"
+            style={{
+                width: "40px",
+                minWidth: "40px",
+                height: `${height}px`,
+                writingMode: "vertical-rl",
+                transform: "rotate(180deg)",
+                textAlign: "center",
+                fontSize: "14px",
+                flex: "0 0 auto"
+            }}
+        >
+            {label}
+            {/* <TimeMarksLayer /> */}
+        </div>
+    );
+};
+
+const TimeMarksLayer = () => {
+    return (
+        <>
+            {TIME_MARKS.map((mark) => {
+                const topPct = ((mark.minutes - DAY_START_MINUTES) / DAY_TOTAL_MINUTES) * 100;
+
+                return (
+                    <div
+                        key={mark.label}
+                        className="position-absolute"
+                        style={{
+                            left: 0,
+                            right: 0,
+                            top: `${topPct}%`,
+                            borderTop: "1px solid #a72727"
+                        }}
+                    />
+                );
+            })}
+        </>
+    );
+};
+
+const DayEventsLayer = ({ events }) => {
+    return (
+        <>
+            {events.map((event, index) => {
+                const backgroundColor = getEventColor(event);
+                const color = getContrastTextColor(backgroundColor);
+
+                return (
+                    <div
+                        key={event.id ?? `${index}-${event.topPct}`}
+                        className="position-absolute border rounded overflow-hidden"
+                        title={getEventLabel(event)}
+                        style={{
+                            left: "2px",
+                            right: "2px",
+                            top: `${event.topPct}%`,
+                            height: `${event.heightPct}%`,
+                            minHeight: "8px",
+                            backgroundColor,
+                            color,
+                            fontSize: "9px",
+                            lineHeight: 1.1,
+                            padding: "1px 2px",
+                            boxSizing: "border-box"
+                        }}
+                    >
+                        {getEventLabel(event)}
+                    </div>
+                );
+            })}
+        </>
+    );
+};
+
+/**
+ * Náhrada za ClickableBox:
+ * jedna buňka = jeden týden + jeden konkrétní den v týdnu
+ */
+const DayWeekCell = ({ week, dayIndex, events, height = 240 }) => {
+    const dayDate = useMemo(() => getWeekDayDate(week, dayIndex), [week, dayIndex]);
+
+    const dayEvents = useMemo(() => {
+        return events
+            .map((event) => clipEventToDay(event, dayDate))
+            .filter(Boolean);
+    }, [events, dayDate]);
+
+    return (
+        <WeekGridItem
+            height={height}
+            title={`${DAY_NAMES[dayIndex - 1]} ${dayDate.getDate()}.${dayDate.getMonth() + 1}.${dayDate.getFullYear()}`}
+        >
+            <div
+                className="position-relative"
+                style={{
+                    width: "100%",
+                    height: "100%",
+                    backgroundColor: "#fff"
+                }}
+            >
+                <TimeMarksLayer />
+                <DayEventsLayer events={dayEvents} />
+                
+            </div>
+        </WeekGridItem>
+    );
+};
+
+const A4PlanDayRow = ({ dayName, dayIndex, weeks, events, rowHeight = 240 }) => {
+    return (
+        <FlexRow>
+            <DayLabelCell label={dayName} height={rowHeight} />
+            {weeks.slice(1).map((week) => (
+                <DayWeekCell
+                    key={`${week.id}-${dayIndex}`}
+                    week={week}
+                    dayIndex={dayIndex}
+                    events={events}
+                    height={rowHeight}
+                />
+            ))}
+        </FlexRow>
+    );
+};
+
+export const A4Plan = ({ item, startdate, enddate }) => {
+    const { subevents:events=[] } = item || {}
+    const weeks = useMemo(
+        () => buildWeeksInRange(startdate, enddate),
+        [startdate, enddate]
+    );
+
+    const normalizedEvents = useMemo(
+        () => events.map(normalizeEvent).filter(Boolean),
+        [events]
+    );
+
+    const academicYear = useMemo(() => {
+        const firstWeek = weeks[0];
+        const lastWeek = weeks[weeks.length - 1];
+
+        if (!firstWeek || !lastWeek) {
+            return {
+                year: new Date().getFullYear(),
+                startWeek: 1,
+                endWeek: 1
+            };
+        }
+
+        return {
+            year: firstWeek.isoYear,
+            startWeek: firstWeek.isoWeek,
+            endWeek: lastWeek.isoWeek
+        };
+    }, [weeks]);
+
+    return (
+        <FlexContainer>
+            <FlexRow>
+                <WeekHeaderContent academicYear={academicYear} />
+            </FlexRow>
+
+            {DAY_NAMES.map((dayName, index) => (
+                <A4PlanDayRow
+                    key={dayName}
+                    dayName={dayName}
+                    dayIndex={ISO_DAY_INDEXES[index]}
+                    weeks={weeks}
+                    events={normalizedEvents}
+                />
+            ))}
+        </FlexContainer>
+    );
+};

package/src/EventGQLModel/Components/A4Plan/index.js

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

package/src/EventGQLModel/Components/CardCapsule.jsx

@@ -0,0 +1,43 @@
+import { PersonFill } from "react-bootstrap-icons"
+import { Link } from "./Link"
+import { CardCapsule as CardCapsule_ } from "../../../../_template/src/Base/Components"
+
+/**
+ * A specialized card component that displays an `TemplateLink` as its title and encapsulates additional content.
+ *
+ * This component extends the `CardCapsule` component by using a combination of a `PersonFill` icon and 
+ * an `TemplateLink` component in the card's header. The `children` prop is used to render any content 
+ * inside the card body. It is designed for use with entities represented by the `template` object.
+ *
+ * @component
+ * @param {Object} props - The props for the TemplateCardCapsule 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 display name for the template entity.
+ * @param {React.ReactNode} [props.children=null] - The content to render inside the card's body.
+ *
+ * @returns {JSX.Element} The rendered card component with a dynamic title and body content.
+ *
+ * @example
+ * // Example usage:
+ * import { TemplateCardCapsule } from './TemplateCardCapsule';
+ * import { Button } from 'react-bootstrap';
+ *
+ * const templateEntity = { id: 123, name: "Example Entity" };
+ *
+ * <TemplateCardCapsule template={templateEntity}>
+ *   <Button variant="primary">Click Me</Button>
+ * </TemplateCardCapsule>
+ */
+export const CardCapsule = ({ item, children, title=null}) => {
+    
+    if (!title) {
+        title = <><PersonFill /> <Link item={item} /></>
+    }
+    return (
+        
+        <CardCapsule_ title={title}>
+            {children}
+        </CardCapsule_>
+    )
+}

package/src/EventGQLModel/Components/Children.jsx

@@ -0,0 +1,31 @@
+import { ChildWrapper } from "@hrbolek/uoisfrontend-shared";
+
+/**
+ * TemplateChildren Component
+ *
+ * A utility React component that wraps its children with the `ChildWrapper` component, 
+ * passing down an `template` entity along with other props to all child elements.
+ * This component is useful for injecting a common `template` entity into multiple children 
+ * while preserving their existing functionality.
+ *
+ * @component
+ * @param {Object} props - The props for the TemplateChildren component.
+ * @param {any} props.template - An entity (e.g., object, string, or other data) to be passed to the children.
+ * @param {React.ReactNode} props.children - The children elements to be wrapped and enhanced.
+ * @param {...any} props - Additional props to be passed to each child element.
+ *
+ * @returns {JSX.Element} A `ChildWrapper` component containing the children with the injected `template` entity.
+ *
+ * @example
+ * // Example usage:
+ * const templateEntity = { id: 1, message: "No data available" };
+ *
+ * <TemplateChildren template={templateEntity}>
+ *     <CustomMessage />
+ *     <CustomIcon />
+ * </TemplateChildren>
+ *
+ * // Result: Both <CustomMessage /> and <CustomIcon /> receive the 'template' prop with the specified entity.
+ */
+export const Children = ({item, children, ...props}) => 
+    <ChildWrapper item={item} children={children} {...props} />

package/src/EventGQLModel/Components/ConfirmEdit.jsx

@@ -0,0 +1,61 @@
+import { UpdateAsyncAction } from "../Queries";
+import { MediumEditableContent } from "./MediumEditableContent";
+import { useEditAction } from "../../../../dynamic/src/Hooks/useEditAction";
+import { useCallback } from "react";
+import { useGQLEntityContext } from "../../../../_template/src/Base/Helpers/GQLEntityProvider";
+
+
+export const ConfirmEdit = ({ item, children }) => {
+    const { run , error, loading, entity, data, onChange: contextOnChange, onBlur: contextOnBlur } = useGQLEntityContext()
+    
+    const localOnMutationEvent = useCallback((mutationHandler, notifyHandler) => async (e) => {
+        const newItem = { ...item, [e.target.id]: e.target.value }
+        const newEvent = { target: { value: newItem } }
+        
+        await notifyHandler(newEvent)
+        return await mutationHandler(e)
+    })
+
+    const {
+        draft,
+        dirty,
+        onChange, 
+        onBlur,
+        onCancel,
+        onConfirm,
+    } = useEditAction(UpdateAsyncAction, item, {mode: "confirm"})
+
+    const handleConfirm = useCallback(async () => {
+        const result = await onConfirm();
+        console.log("ConfirmEdit handleConfirm result", result, "draft", draft)
+        if (result) {
+            const event = { target: { value: result } };
+            // důležité: použij params z kontextu (provider si je drží jako "poslední vars")
+            await contextOnChange(event);
+        }
+        return result;
+    }, [onConfirm, contextOnChange]);
+
+
+    return (
+        <MediumEditableContent item={item} onChange={onChange} onBlur={onBlur} >
+            {children}
+            <hr />
+            {/* <pre>{JSON.stringify(item, null, 2)}</pre> */}
+            <button 
+                className="btn btn-warning form-control" 
+                onClick={onCancel}
+                disabled={!dirty || loading}
+            >
+                Zrušit změny
+            </button>
+            <button 
+                className="btn btn-primary form-control" 
+                onClick={handleConfirm}
+                disabled={!dirty || loading}
+            >
+                Uložit změny
+            </button>
+        </MediumEditableContent>
+    )
+}

package/src/EventGQLModel/Components/Filter.jsx

@@ -0,0 +1,14 @@
+import { DateTimeFilter, Filter as BaseFilter, StringFilter, UUIDFilter } from "../../../../_template/src/Base/FormControls/Filter"
+
+export const Filter = ({ id, onChange: handleChange, children }) => {
+    return (
+        <BaseFilter id={id} onChange={handleChange}>
+            <UUIDFilter id="id" />
+            <StringFilter id="name" />
+            <DateTimeFilter id="created" emitUtcIso={false} />
+            {/* <FloatFilter id="count" /> */}
+            {children}
+        </BaseFilter>
+    )
+}
+

package/src/EventGQLModel/Components/LargeCard.jsx

@@ -0,0 +1,54 @@
+// import Row from "react-bootstrap/Row"
+import { MediumCard } from "./MediumCard"
+import { CardCapsule as CardCapsule_} from "./CardCapsule"
+import { Row } from "../../../../_template/src/Base/Components/Row"
+// import { LeftColumn, MiddleColumn } from "@hrbolek/uoisfrontend-shared"
+import { MediumContent as MediumContent_ } from "./MediumContent"
+import { InteractiveMutations } from '../Mutations/InteractiveMutations'
+import { LeftColumn, MiddleColumn } from "../../../../_template/src/Base/Components/Col"
+import { PlanRow } from "./Plan/PlanRow"
+import { A4Plan } from "./A4Plan"
+/**
+ * A large card component for displaying detailed content and layout for an template entity.
+ *
+ * This component wraps an `TemplateCardCapsule` with a flexible layout that includes multiple
+ * columns. It uses a `Row` layout with a `LeftColumn` for displaying an `TemplateMediumCard`
+ * and a `MiddleColumn` for rendering additional children.
+ *
+ * @component
+ * @param {Object} props - The properties for the TemplateLargeCard 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 in the middle column.
+ *
+ * @returns {JSX.Element} A JSX element combining a large card layout with dynamic content.
+ *
+ * @example
+ * // Example usage:
+ * const templateEntity = { id: 123, name: "Sample Entity" };
+ * 
+ * <TemplateLargeCard template={templateEntity}>
+ *   <p>Additional content for the middle column.</p>
+ * </TemplateLargeCard>
+ */
+export const LargeCard = ({ item, children, CardCapsule=CardCapsule_, MediumContent=MediumContent_ }) => {
+    // console.log("LargeCard.item", item)
+    return (
+        <CardCapsule item={item} >
+            <Row>
+                <LeftColumn>
+                    <CardCapsule item={item} title="Detail">
+                        <MediumContent item={item} />
+                    </CardCapsule>
+                    <InteractiveMutations item={item} />
+                </LeftColumn>
+                <MiddleColumn>
+                    <PlanRow item={item}/>
+                    <A4Plan item={item} startdate={"2023-09-01"} enddate={"2024-03-31"}/>
+                    {children}
+                </MiddleColumn>
+            </Row>
+        </CardCapsule>
+    )
+}