Merge pull request #343 from navikt/feature/blokker-sletting-nar-loading

Feature/blokker sletting nar loading

assets/locales/en/translation.json

@@ -71,7 +71,8 @@
           "fullforRedigering": "Complete and confirm the document description",
           "manglerFil": "Upload or delete document: {{label}}",
           "manglerNavn": "Describe the document",
-          "navnForLangt": "The document description is too long. Max {{maxLength}} characters."
+          "navnForLangt": "The document description is too long. Max {{maxLength}} characters.",
+          "lasterOppFil" : "Wait until file upload is completed"
         }
       },
       "radio": {

assets/locales/nb/translation.json

@@ -71,7 +71,8 @@
           "fullforRedigering": "Fullfør og bekreft redigering av beskrivelse av dokumentasjonen",
           "manglerFil": "Last opp eller slett dokumentasjonen: {{label}}",
           "manglerNavn": "Gi en beskrivelse av dokumentasjonen",
-          "navnForLangt": "Beskrivelsen er for lang. Maks {{maxLength}} tegn"
+          "navnForLangt": "Beskrivelsen er for lang. Maks {{maxLength}} tegn",
+          "lasterOppFil" : "Vent til fil er blitt lastet opp"
         }
       },
       "radio": {

assets/locales/nn/translation.json

@@ -71,7 +71,8 @@
           "fullforRedigering": "Fullfør og bekreft redigering av namngiving av dokumentasjon",
           "manglerFil": "Last opp eller slett dokumentasjon: {{label}}",
           "manglerNavn": "Gje eit namn til dokumentasjonen",
-          "navnForLangt": "Namnet på dokumentasjonen er for langt. Maks {{maxLength}} tegn"
+          "navnForLangt": "Namnet på dokumentasjonen er for langt. Maks {{maxLength}} tegn",
+          "lasterOppFil" : "Vent til fil er lasta opp"
         }
       },
       "radio": {

components/Fil.tsx

@@ -127,6 +127,7 @@ export interface FilProps {
   lokalFil?: File;
   opplastetFil?: OpplastetFil;
   filListeDispatch: React.Dispatch<ActionType>;
+  lasterOppStateDispatch: React.Dispatch<number>;
 }
 
 export interface FilData {
@@ -251,6 +252,7 @@ export function Fil({
   innsendingsId,
   vedlegg,
   filListeDispatch,
+  lasterOppStateDispatch,
 }: FilProps) {
   const [filState, dispatch] = useReducer(filReducer, initialState);
   const { status } = filState;
@@ -354,6 +356,7 @@ export function Fil({
       type: FIL_ACTIONS.SETT_STATUS,
       filState: { status: FIL_STATUS.LASTER_OPP },
     });
+    lasterOppStateDispatch(1);
 
     axios
       .post(`${API_URL}/frontend/v1/soknad/${innsendingsId}/vedlegg/${vedlegg.id}/fil`, formData, config)
@@ -412,6 +415,7 @@ export function Fil({
             progress: 0,
           },
         });
+        lasterOppStateDispatch(-1);
       });
   }, [
     filState,

components/Vedlegg.tsx

@@ -72,6 +72,10 @@ const filListeReducer = (filListe: FilData[], action: ActionType) => {
   }
 };
 
+const lasterOppStateReducer = (currentValue: number, change: number) => {
+  return currentValue + change;
+};
+
 const initialState: FilData[] = [];
 
 export const VedleggContainer = styled.section<{
@@ -150,6 +154,8 @@ function Vedlegg(props: VedleggProps) {
   const { t } = useTranslation();
 
   const [filListe, dispatch] = useReducer(filListeReducer, initialState);
+  const [lasterOppState, dispatchLasterOppState] = useReducer(lasterOppStateReducer, 0);
+
   const [hasFetched, setHasFetched] = useState(false);
   const [endrer, setEndrer] = useState(false);
   const [tittel, setTittel] = useState(vedlegg.label);
@@ -360,7 +366,12 @@ function Vedlegg(props: VedleggProps) {
                       {t('soknad.vedlegg.annet.rediger')}
                     </Button>
 
-                    <Button onClick={() => slettAnnetVedlegg(vedlegg.id)} variant="secondary">
+                    <Button
+                      onClick={() => {
+                        slettAnnetVedlegg(lasterOppState != 0, vedlegg.id);
+                      }}
+                      variant="secondary"
+                    >
                       {t('soknad.vedlegg.annet.slett')}
                     </Button>
                   </>
@@ -384,6 +395,7 @@ function Vedlegg(props: VedleggProps) {
                         lokalFil={fil.lokalFil}
                         opplastetFil={fil.opplastetFil}
                         filListeDispatch={dispatch}
+                        lasterOppStateDispatch={dispatchLasterOppState}
                       />
                     );
                   })}

components/VedleggsListe.tsx

@@ -6,7 +6,6 @@ import styled from 'styled-components';
 import useSWR from 'swr';
 import Kvittering from '../components/Kvittering';
 import SkjemaNedlasting from '../components/SkjemaNedlasting';
-import { ExtendedVedleggType } from '../components/Vedlegg';
 import { useErrorMessage } from '../hooks/useErrorMessage';
 import { FyllutForm } from '../types/fyllutForm';
 import { KvitteringsDto, OpplastingsStatus, SoknadType, VedleggType } from '../types/types';
@@ -16,6 +15,7 @@ import { useLagringsProsessContext } from './LagringsProsessProvider';
 import LastOppVedlegg from './LastOppVedlegg';
 import SkjemaOpplasting from './SkjemaOpplasting';
 import { SoknadModalProvider } from './SoknadModalProvider';
+import { ExtendedVedleggType } from './Vedlegg';
 
 const { publicRuntimeConfig } = getConfig();
 
@@ -63,7 +63,7 @@ interface VedleggslisteContextType {
   slettSoknad: () => void;
   oppdaterLokalOpplastingStatus: (id: number, opplastingsStatus: OpplastingsStatus) => void;
   leggTilVedlegg: (vedlegg: ExtendedVedleggType) => void;
-  slettAnnetVedlegg: (vedleggId: number) => void;
+  slettAnnetVedlegg: (harAktiveEndringer: boolean, vedleggId: number) => Promise<void>;
   fyllutForm?: FyllutForm;
   fyllutIsLoading: boolean;
 }
@@ -204,9 +204,13 @@ function VedleggsListe({ soknad, setSoknad }: VedleggsListeProps) {
   const leggTilVedlegg = (vedlegg: ExtendedVedleggType) => {
     setVedleggsListe((forrigeVedleggsliste) => [...forrigeVedleggsliste, vedlegg]);
   };
-  const slettAnnetVedlegg = (vedleggsId: number) => {
-    axios
-      .delete(`${publicRuntimeConfig.apiUrl}/frontend/v1/soknad/${soknad.innsendingsId}/vedlegg/${vedleggsId}`)
+
+  const slettAnnetVedlegg = async (harAktiveEndringer: boolean, vedleggsId: number) => {
+    if (harAktiveEndringer) return;
+
+    await nyLagringsProsess(
+      axios.delete(`${publicRuntimeConfig.apiUrl}/frontend/v1/soknad/${soknad.innsendingsId}/vedlegg/${vedleggsId}`),
+    )
       .then(() => {
         setVedleggsListe((forrigeVedleggsliste) => forrigeVedleggsliste.filter((el) => el.id !== vedleggsId));
       })

cypress/e2e/validering.cy.js

@@ -84,6 +84,16 @@ describe('Tester validering', () => {
       cy.get('li').should('have.length', 1);
     });
 
+    // Laster opp fil og forsøker å slette mens
+    cy.get('[data-cy="VedleggContainer"]')
+      .eq(3)
+      .within(() => {
+        cy.get('[data-cy="filvelgerKnapp"]').click();
+        cy.get('[data-cy="filvelgerKnapp"]').selectFile('cypress/fixtures/MarcusAurelius.jpeg');
+        cy.contains(translations.soknad.vedlegg.annet.slett).click();
+        cy.get('[data-cy="fileUploadSuccessIkon"]').should('be.visible');
+      });
+
     cy.get('[data-cy="VedleggContainer"]')
       .eq(3)
       .within(() => {

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.