TILA-2506: Fix: don't show archived reservation units (#688)

Author: joonatank

admin-ui/src/common/queries.ts

@@ -94,6 +94,7 @@ export const UNIT_QUERY = gql`
         maxPersons
         surfaceArea
         isDraft
+        isArchived
         purposes {
           pk
           nameFi

admin-ui/src/component/ReservationUnits/ReservationUnitEditor/ReservationUnitEditor.tsx

@@ -32,7 +32,6 @@ import {
   ReservationUnitsReservationUnitReservationStartIntervalChoices,
   ReservationUnitImageCreateMutationInput,
   ReservationUnitsReservationUnitAuthenticationChoices,
-  ReservationUnitByPkType,
   UnitByPkType,
   ReservationState,
   ReservationUnitState,
@@ -251,21 +250,21 @@ const ReservationUnitEditor = (): JSX.Element | null => {
     createReservationUnitMutation({ variables: { input } });
 
   const createOrUpdateReservationUnit = async (
-    publish: boolean,
-    archive = false
+    publish?: boolean,
+    archive?: boolean
   ): Promise<number | undefined> => {
     const input = pick(
       {
         ...omitBy(state.reservationUnitEdit, (v) => v === ""),
         surfaceArea: Number(state.reservationUnitEdit?.surfaceArea),
-        isDraft: !publish,
+        ...(publish != null ? { isDraft: !publish } : {}),
         reservationStartInterval:
           state.reservationUnitEdit?.reservationStartInterval?.toLocaleLowerCase(), /// due to api inconsistency
         maxReservationsPerUser: state.reservationUnitEdit
           ?.maxReservationsPerUser
           ? Number(state.reservationUnitEdit?.maxReservationsPerUser)
           : null,
-        isArchived: archive,
+        ...(archive != null ? { isArchived: archive } : {}),
         pricings: state.reservationUnitEdit.pricings?.map((pricing) =>
           omitBy(pricing, isNull)
         ),
@@ -510,10 +509,10 @@ const ReservationUnitEditor = (): JSX.Element | null => {
     return true;
   };
 
-  const saveReservationUnit = async (publish: boolean) => {
+  const publishReservationUnit = async (publish: boolean) => {
     setSaving(true);
     try {
-      const resUnitPk = await createOrUpdateReservationUnit(publish);
+      const resUnitPk = await createOrUpdateReservationUnit(publish, false);
       if (resUnitPk) {
         // res unit is saved, we can save changes to images
         const success = await reconcileImageChanges(resUnitPk);
@@ -623,17 +622,16 @@ const ReservationUnitEditor = (): JSX.Element | null => {
   ); // default is 20 if no spaces selected
 
   const onlyForDirect =
-    ["DIRECT_AND_SEASON", "DIRECT"].includes(
-      state.reservationUnitEdit.reservationKind as string
-    ) || false;
+    state.reservationUnitEdit.reservationKind === "DIRECT" ||
+    state.reservationUnitEdit.reservationKind === "DIRECT_AND_SEASON";
 
   const handleSaveAsDraft = () => {
     const validationErrors = draftSchema.validate(state.reservationUnitEdit);
 
     if (validationErrors.error) {
       dispatch({ type: "setValidationErrors", validationErrors });
     } else {
-      saveReservationUnit(false);
+      publishReservationUnit(false);
       dispatch({
         type: "setValidationErrors",
         validationErrors: null,
@@ -647,14 +645,41 @@ const ReservationUnitEditor = (): JSX.Element | null => {
     if (validationErrors.error) {
       dispatch({ type: "setValidationErrors", validationErrors });
     } else {
-      saveReservationUnit(true);
+      publishReservationUnit(true);
       dispatch({
         type: "setValidationErrors",
         validationErrors: null,
       });
     }
   };
 
+  const handleAcceptArchive = async () => {
+    try {
+      const r = await createOrUpdateReservationUnit(undefined, true);
+
+      if (r) {
+        setModalContent(null);
+        notifySuccess(t("ArchiveReservationUnitDialog.success"));
+        history(-1);
+      }
+    } catch (e) {
+      // noop
+    }
+  };
+
+  const handleArchiveButtonClick = async () => {
+    if (state.reservationUnit) {
+      setModalContent(
+        <ArchiveDialog
+          reservationUnit={state.reservationUnit}
+          onAccept={handleAcceptArchive}
+          onClose={() => setModalContent(null)}
+        />,
+        true
+      );
+    }
+  };
+
   return (
     <Wrapper key={JSON.stringify(state.validationErrors)}>
       <MainMenuWrapper>
@@ -1907,35 +1932,7 @@ const ReservationUnitEditor = (): JSX.Element | null => {
               )}
             </Accordion>
             <ArchiveButton
-              onClick={() =>
-                setModalContent(
-                  <ArchiveDialog
-                    reservationUnit={
-                      state.reservationUnit as ReservationUnitByPkType
-                    }
-                    onAccept={async () => {
-                      try {
-                        const r = await createOrUpdateReservationUnit(
-                          state.reservationUnit?.isDraft || false,
-                          true
-                        );
-
-                        if (r) {
-                          setModalContent(null);
-                          notifySuccess(
-                            t("ArchiveReservationUnitDialog.success")
-                          );
-                          history("/reservation-units");
-                        }
-                      } catch (e) {
-                        // noop
-                      }
-                    }}
-                    onClose={() => setModalContent(null)}
-                  />,
-                  true
-                )
-              }
+              onClick={handleArchiveButtonClick}
               variant="secondary"
             >
               {t("ReservationUnitEditor.archive")}

admin-ui/src/component/ReservationUnits/ReservationUnitEditor/queries.ts

@@ -20,6 +20,8 @@ export const RESERVATIONUNIT_QUERY = gql`
       nameFi
       nameSv
       nameEn
+      isDraft
+      isArchived
       authentication
       spaces {
         pk

admin-ui/src/component/Unit/ReservationUnitCard.tsx

@@ -77,7 +77,7 @@ const Props = styled.div`
   }
 `;
 
-const Prop = styled.div<{ $disabled: boolean }>`
+const Prop = styled.div<{ $disabled?: boolean }>`
   overflow: hidden;
   display: grid;
   grid-template-columns: 32px 1fr;
@@ -159,8 +159,13 @@ const ReservationUnitCard = ({
             {reservationUnit.maxPersons ||
               t("ReservationUnitCard.noMaxPersons")}
           </Prop>
-          <Prop $disabled={false}>
-            {reservationUnit.isDraft ? (
+          <Prop>
+            {reservationUnit.isArchived ? (
+              <>
+                <IconDraft />
+                {t("ReservationUnitCard.stateArchived")}
+              </>
+            ) : reservationUnit.isDraft ? (
               <>
                 <IconDraft />
                 {t("ReservationUnitCard.stateDraft")}

admin-ui/src/component/Unit/ReservationUnitList.tsx

@@ -88,7 +88,7 @@ const ReservationUnitList = ({
         {filteredResults.map((resUnit) => (
           <ReservationUnitCard
             reservationUnit={resUnit}
-            unitId={unitId as number}
+            unitId={unitId}
             key={resUnit.pk}
           />
         ))}

admin-ui/src/component/Unit/Unit.tsx

@@ -191,6 +191,11 @@ const Unit = (): JSX.Element | null => {
     return null;
   }
 
+  const reservationUnits =
+    unit?.reservationUnits
+      ?.filter((x): x is ReservationUnitType => x != null)
+      .filter((x) => !x.isArchived) ?? [];
+
   return (
     <Wrapper>
       <BreadcrumbWrapper
@@ -266,10 +271,10 @@ const Unit = (): JSX.Element | null => {
             >
               {t("Unit.reservationUnitReadMore")}
             </StyledButton>
-            {unit?.reservationUnits && unit?.reservationUnits.length > 0 ? (
+            {reservationUnits.length > 0 ? (
               <ResourceUnitCount>
                 {t("Unit.reservationUnits", {
-                  count: unit?.reservationUnits.length,
+                  count: reservationUnits.length,
                 })}
               </ResourceUnitCount>
             ) : null}
@@ -286,11 +291,9 @@ const Unit = (): JSX.Element | null => {
           </StyledBoldButton>
         </Info>
       </IngressContainer>
-      {unit?.reservationUnits && unit?.reservationUnits.length > 0 ? (
+      {reservationUnits.length > 0 ? (
         <ReservationUnitList
-          reservationUnits={
-            (unit?.reservationUnits as ReservationUnitType[]) || []
-          }
+          reservationUnits={reservationUnits}
           unitId={unitPk}
         />
       ) : (

admin-ui/src/i18n/messages.ts

@@ -1250,6 +1250,7 @@ const translations: ITranslations = {
     purpose_other: ["{{count}} käyttötarkoitusta"],
     statePublished: ["Julkaistu"],
     stateDraft: ["Luonnos"],
+    stateArchived: ["Arkistoitu"],
   },
   ReservationUnitList: {
     typeFilter: ["Tyyppi"],