Automatic update of OverviewPage after post-confirmation user interac…

…tion in CreationPage (#111) * update CreationPage with custom PullDownMenu options * integrate new POST return id in creationPageSlice * fix creationPageSlice type error * add creation confirmation interaction first draft * setup of automatic update of OverviewPage
Altinn · Nov 16, 2023 · a3422e9 · a3422e9
1 parent 83e67d6
commit a3422e9
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 45 deletions.
diff --git a/frontend/src/features/creationpage/CreationPageContent.module.css b/frontend/src/features/creationpage/CreationPageContent.module.css
@@ -62,6 +62,12 @@
   display: flex;
 }
 
+.confirmationText {
+  margin: 10px;
+  display: flex;
+
+}
+
 
 @media only screen and (min-width: 769px) {
 

diff --git a/frontend/src/features/creationpage/CreationPageContent.tsx b/frontend/src/features/creationpage/CreationPageContent.tsx
@@ -4,20 +4,24 @@ import { useTranslation } from 'react-i18next';
 import { useNavigate, Link } from 'react-router-dom';
 import { AuthenticationPath } from '@/routes/paths';
 import { useAppDispatch, useAppSelector } from '@/rtk/app/hooks';
-import { postNewSystemUser, CreationRequest } from '@/rtk/features/creationPage/creationPageSlice';
+import { postNewSystemUser, CreationRequest, resetPostConfirmation } from '@/rtk/features/creationPage/creationPageSlice';
+import { fetchOverviewPage } from '@/rtk/features/overviewPage/overviewPageSlice';
 import { TextField, Button, Select } from '@digdir/design-system-react';
 import classes from './CreationPageContent.module.css';
 import { useMediaQuery } from '@/resources/hooks';
 
 
+
 export const CreationPageContent = () => {
 
   // Merk! Det er multiple design og datastruktur-valg som ikke er gjort ennå
-  // som påvirker denne siden: dette er annotert under hvert punkt
-  
+  // som påvirker denne siden: dette er annotert nedunder
+
   // Local State variables for input-boxes and Nedtrekksmeny:
   const [integrationName, setIntegrationName] = useState('');
-  const [descriptionEntered, setDescriptionEntered] = useState('');
+  const [descriptionEntered, setDescriptionEntered] = useState(''); // mulig denne skal populeres fra 
+  // fra nedtrekksmeny??
+
   const [selectedSystemType, setSelectedSystemType] = useState('');
   const [vendorsArrayPopulated, setVendorsArrayPopulated] = useState(false); // not used yet
 
@@ -54,11 +58,23 @@ export const CreationPageContent = () => {
     // NB! navigasjon til OverviewPage skal vise med ny GET request den nye SystemBruker
     // ettersom vi ikke har noen annen suksess-melding ennå:
     // Men vi har creationPageSlice status "posted" nå... men den virker bare først gang
+    console.log("Automatisk navigering til OverviewPage er inaktivert");
+    // navigate('/' + AuthenticationPath.Auth + '/' + AuthenticationPath.Overview);
+  }
+
+  const handlePostConfirmation = () => {
+    // skrevet av Github Copilot
+    void dispatch(resetPostConfirmation()); // Github Copilot
+    void dispatch(fetchOverviewPage()); // så får vi se om Redux responderer
     navigate('/' + AuthenticationPath.Auth + '/' + AuthenticationPath.Overview);
+
   }
 
 
-  const systemRegisterVendorsArray = useAppSelector((state) => state.creationPage.systemRegisterVendorsArray);
+  // Per 15.11.23: we use a list of vendors for PullDownMenu directly from Redux
+  const vendorsList : { label: string, value: string  }[] = useAppSelector((state) => state.creationPage.systemRegisterVendorsArray);
+
+  // const systemRegisterVendorsArray = useAppSelector((state) => state.creationPage.systemRegisterVendorsArray);
 
   // MOCK VALUES for NedtrekksMeny: List of Firms/Products not available from BFF yet
   // options med label skilt fra value (samme verdi for demo)
@@ -86,6 +102,7 @@ export const CreationPageContent = () => {
   // TOMT OBJEKT er for at Designsystem Nedtrekksmeny ikke skal
   // ha noe tomt øverst
 
+  /* 
   let testoptions: { label: string, value: string  }[] = [
     {
       "label": "",
@@ -96,9 +113,13 @@ export const CreationPageContent = () => {
       "value": "Visma AS (936796702): Visma Økonomi"
     },
   ];
+  */
 
-  const systemRegisterVendorsLoaded = useAppSelector((state) => state.creationPage.systemRegisterVendorsLoaded);
+
+
+  // const systemRegisterVendorsLoaded = useAppSelector((state) => state.creationPage.systemRegisterVendorsLoaded);
 
+  /*
   // NB! foreløpig løsning: bør gjøres til funksjonell komponent
   if (systemRegisterVendorsLoaded ) {
     // console.log("Burde bygge vendorsArray bare en gang, men endelig design ikke klart.");
@@ -112,13 +133,20 @@ export const CreationPageContent = () => {
       );
     };
   };
+  */
 
 
   // Håndterer skifte av valgmuligheter (options) i Nedtrekksmeny
   const handleChangeInput = (val: string) => {
     setSelectedSystemType(val);
   };
+
+  const postConfirmed = useAppSelector((state) => state.creationPage.postConfirmed);
+  const postConfirmationId = useAppSelector((state) => state.creationPage.postConfirmationId);
 
+  // console.log("postConfirmed: " + postConfirmed); // Github Copilot
+  // console.log("postConfirmationId: " + postConfirmationId); // Github Copilot
+
   return (
     <div className={classes.creationPageContainer}>
       <div className={classes.inputContainer}> 
@@ -155,9 +183,9 @@ export const CreationPageContent = () => {
           <div className={classes.selectWrapper}>
             <Select
               label="Velg systemleverandør og system"
-              options={testoptions}
-              onChange={handleChangeInput}
-              value={selectedSystemType}
+              options={ vendorsList }
+              onChange={ handleChangeInput }
+              value={ selectedSystemType }
             />
           </div>
         </div>
@@ -173,6 +201,7 @@ export const CreationPageContent = () => {
             .
           </p>
 
+          { !postConfirmed &&
           <div className={classes.buttonContainer}>
             <div className={classes.cancelButton}>
               <Button
@@ -193,7 +222,23 @@ export const CreationPageContent = () => {
                 Opprett 
               </Button> 
             </div>
+
+
           </div>
+          }
+          {
+              postConfirmed && 
+              <div className={classes.confirmationText}>
+                <p>Systembruker opprettet med id: {postConfirmationId}</p>
+                <br></br>
+                <p>Github Copilot skrev denne blokken for meg.</p>
+                <br></br>
+                <button
+                  onClick={handlePostConfirmation}
+                >Gå til oversiktsside</button>
+
+              </div>
+            }
 
         </div>      
       </div>

diff --git a/frontend/src/features/overviewpage/OverviewPage.tsx b/frontend/src/features/overviewpage/OverviewPage.tsx
@@ -24,7 +24,7 @@ export const OverviewPage = () => {
   // må finne mer elegang måte å gjøre dette på: og dynamisk: vil bare laste 1 gang tror jeg
   useEffect(() => {
     if (!overviewLoaded) {
-      console.log("Prøver laste inn OverviewPage og CreationPage data til Redux");
+      console.log("Førstegangs innlasting av OverviewPage og CreationPage data til Redux");
       void dispatch(fetchOverviewPage());
       void dispatch(fetchSystemRegisterVendors()); // for CreationPage: see issue #94
     }

diff --git a/frontend/src/features/overviewpage/OverviewPageContent.tsx b/frontend/src/features/overviewpage/OverviewPageContent.tsx
@@ -14,6 +14,10 @@ import { useTranslation } from 'react-i18next';
 
 export const OverviewPageContent = () => {
 
+  console.log(" ");
+  console.log("Teller antall ganger OverviewPageContent rendres"); //Copilot!
+  console.log("***********************************************");
+
   const { t } = useTranslation('common');
   const navigate = useNavigate();
 
@@ -81,34 +85,6 @@ export const OverviewPageContent = () => {
 
       { reduxCollectionBarArray() }
 
-
-      <CollectionBar
-        title='System lakselus rapportering'
-        subtitle='AQUA POWER'
-        color={'neutral'}
-        collection={[]}
-        compact={isSm}
-        proceedToPath={
-          '/fixpath/'
-        }
-      />
-
-      <div>
-        <br></br>
-      </div>
-
-      <CollectionBar
-        title='Økonomisystem'
-        subtitle='VISMA ACCOUNTING'
-        additionalText='Delegert til Visma AS'
-        color={ 'neutral' }
-        collection={[]}
-        compact={isSm}
-        proceedToPath={
-          '/fixpath/'
-        }
-      />
-
     </div>
   );
 };
diff --git a/frontend/src/rtk/features/creationPage/creationPageSlice.ts b/frontend/src/rtk/features/creationPage/creationPageSlice.ts
@@ -12,12 +12,18 @@ export interface SystemRegisterObjectDTO {
   description: string;
 }
 
+export interface SystemRegisterObjectPresented {
+  label: string;
+  value: string;
+}
+
 export interface SliceState {
-  systemRegisterVendorsArray: SystemRegisterObjectDTO[];
+  systemRegisterVendorsArray: SystemRegisterObjectPresented[];
   systemRegisterVendorsLoaded: boolean;
   systemRegisterError: string;
   postConfirmed: boolean;
   creationError: string;
+  postConfirmationId: string;
 }
 
 const initialState: SliceState = {
@@ -26,6 +32,7 @@ const initialState: SliceState = {
     systemRegisterError: '',
     postConfirmed: false,
     creationError: '',
+    postConfirmationId: '',
 };
 
 // CreationRequest form is based on Swagger POST description per 25.10.23
@@ -65,24 +72,38 @@ export const postNewSystemUser = createAsyncThunk('creationPageSlice/postNewSyst
 const creationPageSlice = createSlice({
   name: 'creation',
   initialState,
-  reducers: {},
+  reducers: {
+    resetPostConfirmation: (state) => {
+      state.postConfirmed = false;
+      state.postConfirmationId = '';
+      // skrevet av Github Copilot
+    },
+  },
   extraReducers: (builder) => {
     builder
       .addCase(fetchSystemRegisterVendors.fulfilled, (state, action) => {
         const dataArray = action.payload;
-        const downLoadedArray: SystemRegisterObjectDTO[] = [];
+        const downLoadedArray: SystemRegisterObjectPresented[] = [];
 
         for (let i = 0; i < dataArray.length; i++) {
           const systemTypeId = dataArray[i].systemTypeId;
           const systemVendor = dataArray[i].systemVendor;
-          const description = dataArray[i].description;
+          // const description = dataArray[i].description; // not in use per 15.11.23
 
-          const loopObject = {
+          /* const loopObject = {
               systemTypeId,
               systemVendor,
               description,
             };
-            downLoadedArray.push(loopObject);
+            */
+          // transform to DesignSystem PullDownMenu shape
+          // we do not use "description" (so far: designers might )
+          const loopObject2 = {
+            'label': `${systemTypeId} : ${systemVendor}`,
+            'value': `${systemTypeId} : ${systemVendor}`
+          }
+
+          downLoadedArray.push(loopObject2);
         }
 
         state.systemRegisterVendorsArray = downLoadedArray;
@@ -91,13 +112,15 @@ const creationPageSlice = createSlice({
       .addCase(fetchSystemRegisterVendors.rejected, (state, action) => {
         state.systemRegisterError = action.error.message ?? 'Unknown error';
       })
-      .addCase(postNewSystemUser.fulfilled, (state) => {
+      .addCase(postNewSystemUser.fulfilled, (state, action) => {
         state.postConfirmed = true;
+        state.postConfirmationId = action.payload.id;
       })
       .addCase(postNewSystemUser.rejected, (state, action) => {
         state.creationError = action.error.message ?? 'Unknown error';
       })
   },
 });
 
+export const { resetPostConfirmation } = creationPageSlice.actions; // Github Copilot
 export default creationPageSlice.reducer;