Merge pull request #192 from mblajek/calendar-data

Calendar shows staff and meetings fetched from backend.
mblajek · Dec 21, 2023 · eb69fdb · eb69fdb
2 parents 3575a1d + 93b0c21
commit eb69fdb
Show file tree

Hide file tree

Showing 23 changed files with 518 additions and 350 deletions.
diff --git a/resources/js/components/ui/Table/table_cells.tsx b/resources/js/components/ui/Table/table_cells.tsx
@@ -35,10 +35,10 @@ export function useTableCells() {
         <Index each={v}>{(id) => <IdColumn id={id()} />}</Index>
       </div>
     )),
-    dict: cellFunc<string>((v) => dictionaries()?.positionsById.get(v)?.label || "??"),
+    dict: cellFunc<string>((v) => dictionaries()?.positionById(v)?.label || "??"),
     dictList: cellFunc<readonly string[]>((v) => (
       <ul>
-        <Index each={v}>{(id) => <li>{dictionaries()?.positionsById.get(id())?.label || "??"}</li>}</Index>
+        <Index each={v}>{(id) => <li>{dictionaries()?.positionById(id())?.label || "??"}</li>}</Index>
       </ul>
     )),
   };

diff --git a/resources/js/components/ui/calendar/ColumnsCalendar.module.scss b/resources/js/components/ui/calendar/ColumnsCalendar.module.scss
@@ -1,5 +1,5 @@
 .columnsCalendar {
-  @apply grid gap-y-1.5 gap-x-px;
+  @apply grid gap-y-1.5 gap-x-px relative;
   grid-template-rows:
     [header-start] auto [header-end
     all-day-area-start] auto [all-day-area-end
@@ -71,4 +71,8 @@
   .nowLine {
     @apply absolute w-full h-0 border-b-2 border-red-500 z-50;
   }
+
+  .loadingPane {
+    @apply absolute inset-0 z-50 flex items-center justify-center bg-white opacity-70 pointer-events-none;
+  }
 }
diff --git a/resources/js/components/ui/calendar/ColumnsCalendar.tsx b/resources/js/components/ui/calendar/ColumnsCalendar.tsx
@@ -15,6 +15,7 @@ import {
   splitProps,
   useContext,
 } from "solid-js";
+import {BigSpinner} from "../Spinner";
 import s from "./ColumnsCalendar.module.scss";
 
 interface GlobalParameters {
@@ -25,6 +26,7 @@ interface GlobalParameters {
 interface Props extends GlobalParameters, htmlAttributes.div {
   readonly columns: readonly CalendarColumn[];
   readonly scrollToDayMinute?: number;
+  readonly isLoading?: boolean;
 
   readonly onWheelWithAlt?: (e: WheelEvent) => void;
 }
@@ -63,6 +65,7 @@ export const ColumnsCalendar: VoidComponent<Props> = (allProps) => {
     "gridCellMinutes",
     "columns",
     "scrollToDayMinute",
+    "isLoading",
     "onWheelWithAlt",
   ]);
   const dayMinutes = createMemo(() => {
@@ -173,6 +176,11 @@ export const ColumnsCalendar: VoidComponent<Props> = (allProps) => {
           </div>
         </div>
       </Context.Provider>
+      <Show when={props.isLoading}>
+        <div class={s.loadingPane}>
+          <BigSpinner />
+        </div>
+      </Show>
     </div>
   );
 };