Adds the ability to hide columns in agreement list on mobile

stiftelsen-effekt · Nov 18, 2024 · 2abb90b · 2abb90b
1 parent ed8332c
commit 2abb90b
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 22 deletions.
diff --git a/components/profile/shared/lists/agreementList/AgreementList.tsx b/components/profile/shared/lists/agreementList/AgreementList.tsx
@@ -33,6 +33,7 @@ type AgreementListConfigurationColumn = {
   width?: string;
   payment_date_format_template?: string;
   payment_date_last_day_of_month_template?: string;
+  hide_on_mobile?: boolean;
 };
 
 type AgreementListConfiguration = {
@@ -58,7 +59,11 @@ export const AgreementList: React.FC<{
     agreementKid: string;
   } | null>(null);
 
-  const headers = configuration.columns.map((column) => ({
+  const columns = configuration.columns.filter(
+    (column) => window && !(window.innerWidth < 1180 && column.hide_on_mobile),
+  );
+
+  const headers = columns.map((column) => ({
     label: column.title,
     width: column.width,
   }));
@@ -107,7 +112,7 @@ export const AgreementList: React.FC<{
   const rows: ListRow<AgreementRow>[] = rowData.map((agreement) => ({
     id: agreement.ID.toString(),
     defaultExpanded: false,
-    cells: configuration.columns.map((column) => ({
+    cells: columns.map((column) => ({
       value: formatColumnValue(column, agreement[column.value]),
     })),
     details: (

diff --git a/...sts/agreementList/multipleCauseAreasDetails/AgreementMultipleCauseAreaDetails.module.scss b/...sts/agreementList/multipleCauseAreasDetails/AgreementMultipleCauseAreaDetails.module.scss
@@ -112,35 +112,41 @@
 }
 
 @media only screen and (max-width: 1180px) {
-  .values {
-    flex-direction: column;
-    row-gap: 1.5em;
-    font-size: 1rem;
-
-    input {
-      width: 100%;
-    }
+  .wrapper {
+    grid-template-columns: 1fr;
+    column-gap: 0;
+    row-gap: 2rem;
+
+    .values {
+      flex-direction: column;
+      row-gap: 1.5em;
+      font-size: 1rem;
 
-    & > div {
-      &.valuesDatePickerContainer {
+      input {
         width: 100%;
-
-        & > div {
-          width: 100%;
-        }
       }
 
-      &.valuesAmountContainer {
-        input {
+      & > div {
+        &.valuesDatePickerContainer {
           width: 100%;
+
+          & > div {
+            width: 100%;
+          }
         }
-      }
 
-      &.valuesTaxUnitSelectorContainer {
-        width: 100%;
+        &.valuesAmountContainer {
+          input {
+            width: 100%;
+          }
+        }
 
-        & > div {
+        &.valuesTaxUnitSelectorContainer {
           width: 100%;
+
+          & > div {
+            width: 100%;
+          }
         }
       }
     }

diff --git a/studio/schemas/types/lists/agreements/agreementlistconfiguration.ts b/studio/schemas/types/lists/agreements/agreementlistconfiguration.ts
@@ -119,6 +119,11 @@ export default {
               title: "Column width in % (optional)",
               type: "number",
             },
+            {
+              name: "hide_on_mobile",
+              title: "Hide on mobile",
+              type: "boolean",
+            },
           ],
           preview: {
             select: {