Merge pull request #98 from skorphil/86-all-institutions-were-deleted

implemented allLoaded state

components/InstitutionContainer/InstitutionContainer.jsx

@@ -21,6 +21,7 @@ export function InstitutionContainer({ institutionName, isInstitutionOpen }) {
     handlers: formHandlers = { handleInstitutionOpen },
   } = useFormContext();
 
+  console.log("container getValues", getValues("institutions"));
   // Fast solution to allow edit name of newly created institution
   // Will be replaced whith https://github.com/users/skorphil/projects/4/views/1?pane=issue&itemId=53834705
   const institutionIndex = parseInt(institutionName.split(".")[1]);

components/InstitutionsList/InstitutionsList.jsx

@@ -1,22 +1,14 @@
 "use client";
 
 import { InstitutionsTabsList } from "../InstitutionsTabsList";
-import { InstitutionContainer } from "../InstitutionContainer";
-import {
-  Tabs,
-  Text,
-  TabPanels,
-  TabPanel,
-  Center,
-  Heading,
-  VStack,
-  Image,
-} from "@chakra-ui/react";
+import { Tabs } from "@chakra-ui/react";
 import { useVisualViewportSize } from "../../app/hooks";
 import classes from "./InstitutionsList.module.css";
 import { useFormContext } from "react-hook-form";
+import { InstitutionPanel } from "./components";
 
 function InstitutionsList({
+  institutionPanelOverlay,
   simulateKeyboard = false,
   isInstitutionOpen,
   selectedInstitution,
@@ -38,7 +30,8 @@ function InstitutionsList({
       variant="grid"
       padding={isInstitutionOpen || 2}
     >
-      <ContentPanel
+      <InstitutionPanel
+        institutionPanelOverlay={institutionPanelOverlay}
         institutions={institutions}
         selectedInstitution={selectedInstitution}
         isInstitutionOpen={isInstitutionOpen}
@@ -55,55 +48,3 @@ function InstitutionsList({
 }
 
 export { InstitutionsList };
-
-function ContentPanel({
-  institutions,
-  selectedInstitution,
-  isInstitutionOpen,
-}) {
-  return (
-    <TabPanels
-      bg="gray.800"
-      borderRadius={isInstitutionOpen || "lg"}
-      h="100%"
-      minHeight="260px"
-      flexGrow={1}
-      flexShrink={1}
-    >
-      {selectedInstitution === null ? (
-        <ContentPanelOverlay
-          image="/institutions-loaded.svg"
-          headingText="Institutions loaded from latest&nbsp;record"
-          text="Edit institutions to reflect asset updates"
-        />
-      ) : (
-        false
-      )}
-      {institutions.map((institution, index) => (
-        <TabPanel p={0} key={institution.id} h="100%">
-          <InstitutionContainer
-            institutionName={`institutions.${index}`}
-            isInstitutionOpen={isInstitutionOpen}
-          />
-        </TabPanel>
-      ))}
-    </TabPanels>
-  );
-}
-
-function ContentPanelOverlay({ image, headingText, text }) {
-  return (
-    <Center h="100%" p={2}>
-      <VStack gap={12}>
-        <Image src={image} alt="Illustration" boxSize="140px" />
-
-        <VStack>
-          <Heading textAlign="center" size="md">
-            {headingText}
-          </Heading>
-          <Text>{text}</Text>
-        </VStack>
-      </VStack>
-    </Center>
-  );
-}

components/InstitutionsList/components/InstitutionPanel.jsx

@@ -0,0 +1,52 @@
+"use client";
+import { InstitutionContainer } from "../../InstitutionContainer";
+import { TabPanels, TabPanel } from "@chakra-ui/react";
+import { useFormContext } from "react-hook-form";
+import { getInstitutionPanelOverlayState } from "../utils/getInstitutionPanelOverlayState";
+import { InstitutionPanelOverlayAllDeleted } from "./InstitutionPanelOverlayAllDeleted";
+import { InstitutionPanelOverlayInstitutionsLoaded } from "./InstitutionPanelOverlayInstitutionsLoaded";
+
+// TODO add all instituion deleted state
+export function InstitutionPanel({
+  institutions,
+  selectedInstitution,
+  isInstitutionOpen,
+}) {
+  const {
+    formState: { defaultValues },
+    getValues,
+  } = useFormContext();
+
+  const overlayState = getInstitutionPanelOverlayState(
+    defaultValues,
+    getValues
+  );
+
+  return (
+    <TabPanels
+      bg="gray.800"
+      borderRadius={isInstitutionOpen || "lg"}
+      h="100%"
+      minHeight="260px"
+      flexGrow={1}
+      flexShrink={1}
+    >
+      {selectedInstitution !== null ? (
+        institutions.map((institution, index) => (
+          <TabPanel p={0} key={institution.id} h="100%" overflow="auto">
+            <InstitutionContainer
+              institutionName={`institutions.${index}`}
+              isInstitutionOpen={isInstitutionOpen}
+            />
+          </TabPanel>
+        ))
+      ) : overlayState == "success" && selectedInstitution == null ? (
+        <InstitutionPanelOverlayInstitutionsLoaded />
+      ) : overlayState == "allDeleted" && selectedInstitution == null ? (
+        <InstitutionPanelOverlayAllDeleted />
+      ) : (
+        false
+      )}
+    </TabPanels>
+  );
+}

components/InstitutionsList/components/InstitutionPanelOverlay.jsx

@@ -0,0 +1,18 @@
+import { Text, Center, Heading, VStack, Image } from "@chakra-ui/react";
+
+export function InstitutionPanelOverlay({ image, headingText, text }) {
+  return (
+    <Center h="100%" p={2}>
+      <VStack gap={12}>
+        <Image src={image} alt="Illustration" boxSize="240px" />
+
+        <VStack>
+          <Heading textAlign="center" size="md">
+            {headingText}
+          </Heading>
+          <Text>{text}</Text>
+        </VStack>
+      </VStack>
+    </Center>
+  );
+}

components/InstitutionsList/components/InstitutionPanelOverlayAllDeleted.jsx

@@ -0,0 +1,11 @@
+import { InstitutionPanelOverlay } from "./InstitutionPanelOverlay";
+
+export function InstitutionPanelOverlayAllDeleted() {
+  return (
+    <InstitutionPanelOverlay
+      image="/empty.svg"
+      headingText="No institutions left&nbsp;in&nbsp;the&nbsp;record"
+      text="Add or restore institutions"
+    />
+  );
+}

components/InstitutionsList/components/InstitutionPanelOverlayInstitutionsLoaded.jsx

@@ -0,0 +1,11 @@
+import { InstitutionPanelOverlay } from "./InstitutionPanelOverlay";
+
+export function InstitutionPanelOverlayInstitutionsLoaded() {
+  return (
+    <InstitutionPanelOverlay
+      image="/institutions-loaded.svg"
+      headingText="Institutions loaded from latest&nbsp;record"
+      text="Edit institutions to reflect asset updates"
+    />
+  );
+}

components/InstitutionsList/components/index.js

@@ -0,0 +1 @@
+export { InstitutionPanel } from "./InstitutionPanel";

components/InstitutionsList/index.js

@@ -1,2 +1,3 @@
 export { InstitutionsList } from "./InstitutionsList";
 export { institutionsListStyle } from "./InstitutionList.chakra";
+export { InstitutionPanelOverlay } from "./components/InstitutionPanelOverlay";

components/InstitutionsList/utils/getInstitutionPanelOverlayState.ts

@@ -0,0 +1,40 @@
+import { DefaultValues, FieldValues, UseFormGetValues } from "react-hook-form";
+
+/**
+ * Function for deriving the InstitutionPanelOverlay state
+ * from useFormContext
+ */
+export function getInstitutionPanelOverlayState(defaultValues:DefaultValues<FieldValues>, getValues:UseFormGetValues<FieldValues>) {
+    const formValues = getValues("institutions");
+    const isAllDeleted = isAllInstitutionsDeleted(formValues);
+    const isFetchedPrevious = isFetchedPreviousRecords(defaultValues, isAllDeleted);
+//   console.log("isFetchedPrevious TS", isFetchedPrevious);
+//   console.log("isAllDeleted TS", isAllDeleted);
+
+if (isFetchedPrevious && !isAllDeleted) {
+    return 'success'
+  } else if (isAllDeleted) {
+    return 'allDeleted'
+  } else return false;
+}
+
+function isAllInstitutionsDeleted(formValues) {
+    const institutionsIndexes = formValues.map((institution, index) => ({
+      index,
+      isDeleted: institution.isDeleted,
+    }));
+    const availableIndexes = institutionsIndexes
+      .filter((institution) => institution.isDeleted != true)
+      .map((institution) => institution.index);
+
+    if (institutionsIndexes.length > 0 && availableIndexes.length == 0) {
+      return true;
+    } else return false;
+  }
+
+  function isFetchedPreviousRecords(defaultValues, isAllDeleted) {
+    if (defaultValues.institutions && !isAllDeleted) {
+      return true;
+    } else return false;
+  }
+

components/InstitutionsList/utils/index.js

@@ -0,0 +1 @@
+export { getInstitutionPanelOverlayState } from "./getInstitutionPanelOverlayState";

components/RecordForm/RecordForm.jsx

@@ -13,7 +13,7 @@ import { useState } from "react";
 import { Button, Progress, useToast } from "@chakra-ui/react";
 import { InstitutionsList } from "components/InstitutionsList";
 import { FormHeader } from "components/FormHeader";
-import { FormStateOverlay, FormWarning } from "./components";
+import { FormOverlay, FormAlert } from "./components";
 
 import { appendRecord } from "serverActions/appendRecord";
 import { getDefaultValues } from "./utils";
@@ -25,15 +25,15 @@ export function RecordForm() {
   const [selectedInstitutionIndex, setSelectedInstitutionIndex] =
     useState(null);
   const [formOverlay, setFormOverlay] = useState(false);
-  const [warningState, setWarningState] = useState(null);
+  const [formAlert, setFormAlert] = useState(null);
   const toast = useToast({ position: "top" });
   const router = useRouter();
   const arrayName = "institutions";
   const { control, ...form } = useForm({
     defaultValues: async () =>
       getDefaultValues({
         setFormOverlay,
-        setWarningState,
+        setFormAlert,
         handleInstitutionCreate: formMethods.handlers.handleInstitutionCreate,
       }),
   });
@@ -106,11 +106,11 @@ export function RecordForm() {
               </>
             }
           />
-          {warningState?.isVisible && (
-            <FormWarning
-              {...warningState}
+          {formAlert?.isVisible && (
+            <FormAlert
+              {...formAlert}
               onHide={() =>
-                setWarningState((current) => ({
+                setFormAlert((current) => ({
                   ...current,
                   isVisible: false,
                 }))
@@ -123,12 +123,12 @@ export function RecordForm() {
       {form.formState.isLoading ? (
         <Progress size="xs" isIndeterminate />
       ) : formOverlay ? (
-        <FormStateOverlay
+        <FormOverlay
           image={formOverlay.image}
           errorMessage={formOverlay.errorMessage}
         >
           {formOverlay.children}
-        </FormStateOverlay>
+        </FormOverlay>
       ) : (
         <form className={classes.RecordForm}>
           <InstitutionsList

components/RecordForm/components/FormAlert.jsx

@@ -0,0 +1,43 @@
+import {
+  Button,
+  Accordion,
+  AccordionButton,
+  AccordionItem,
+  AccordionIcon,
+  Box,
+  AccordionPanel,
+  Text,
+} from "@chakra-ui/react";
+
+/**
+ * Alert, appended to the top of RecordForm. Used for non-blocking warnings or information.
+ * Can be expanded and explicitly closed until reload of the form.
+ * @param {string} heading - heading text (always visible)
+ * @param {string} message - collapsed text
+ * @param {function} [onHide] - handler for hideWarning button
+ * @returns
+ */
+export function FormAlert({ heading, message, onHide }) {
+  return (
+    <Box bg="yellow.900" m={2} borderRadius="md">
+      <Accordion w="100%" allowToggle>
+        <AccordionItem borderStyle="none">
+          <AccordionButton>
+            <Box as="span" flex="1" textAlign="left">
+              {heading}
+            </Box>
+            <AccordionIcon />
+          </AccordionButton>
+          <AccordionPanel maxH="180px" overflow="auto" pb={4}>
+            <Text>{message}</Text>
+            {onHide && (
+              <Button mt={2} variant="link" onClick={onHide}>
+                Hide warning
+              </Button>
+            )}
+          </AccordionPanel>
+        </AccordionItem>
+      </Accordion>
+    </Box>
+  );
+}

components/RecordForm/components/FormStateOverlay.jsx → components/RecordForm/components/FormOverlay.jsx

@@ -12,10 +12,15 @@ import {
   AccordionPanel,
 } from "@chakra-ui/react";
 
-export function FormStateOverlay({ image, errorMessage, children }) {
-  /**
-   * Overlay to display errors or states in RecordForm
-   */
+/**
+ * Overlays form body. Used for empty states and blocking errors.
+ * Can contain hidden system error text.
+ *
+ * @param {string} [image] - The path to state illustartion
+ * @param {string} [errorMessage] - System error message
+ * @param children – overlay content
+ */
+export function FormOverlay({ image, errorMessage, children }) {
   return (
     <VStack justifyContent="space-between" h="100%">
       <Center flexGrow={1}>