fix(overviewcards): add link to card

dhis2 · May 19, 2023 · 61843d2 · 61843d2
1 parent e92417f
commit 61843d2
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 29 deletions.
diff --git a/src/App.module.css b/src/App.module.css
diff --git a/src/app/layout/Layout.module.css b/src/app/layout/Layout.module.css
@@ -1,8 +1,13 @@
 @value m-medium: (min-width: 768px);
 
+:global a {
+    color: initial;
+    text-decoration: none;
+}
+
 .wrapper {
     display: grid;
-    grid-template-areas: 'sidebar' 'main';
+    grid-template-areas: "sidebar" "main";
     line-height: 20px;
     font-size: 14px;
     height: 100%;
@@ -33,15 +38,13 @@
         display: grid;
         grid-template-columns: auto 1fr;
         grid-template-rows: none;
-        grid-template-areas:
-            'sidebar   main';
+        grid-template-areas: "sidebar   main";
     }
     .sidebar {
         width: 240px;
         overflow: auto;
     }
     .main {
-        overflow-y:auto
+        overflow-y: auto;
     }
 }
-
diff --git a/src/pages/overview/card/SummaryCard.module.css b/src/pages/overview/card/SummaryCard.module.css
@@ -1,4 +1,3 @@
-
 .cardGroup {
     display: grid;
     grid-template-columns: repeat(auto-fill, 320px);
@@ -24,6 +23,9 @@
     width: 32px;
     height: 32px;
 }
+.cardIcon.active {
+    color: "blue";
+}
 
 .cardHeader {
     padding: 12px 0px;
@@ -49,4 +51,4 @@
 
 .cardActions a {
     text-decoration: none;
-}
+}
diff --git a/src/pages/overview/card/SummaryCard.tsx b/src/pages/overview/card/SummaryCard.tsx
@@ -2,7 +2,7 @@ import i18n from "@dhis2/d2-i18n";
 import { Card, Button } from "@dhis2/ui";
 import { IconEdit24 } from "@dhis2/ui-icons";
 import React from "react";
-import { Link, resolvePath } from "react-router-dom";
+import { Link } from "react-router-dom";
 import {
     getSectionNewPath,
     getSectionPath,
@@ -45,12 +45,14 @@ export const SummaryCard = ({
     const title = section.title;
     return (
         <Card>
-            <div className={styles.cardWrapper}>
-                <div className={styles.cardIcon}>{icon}</div>
-                <SummaryCardHeader>{title}</SummaryCardHeader>
-                <SummaryCardContent>{children}</SummaryCardContent>
-                <SummaryCardActions section={section} />
-            </div>
+            <Link to={`/${getSectionPath(section)}`}>
+                <div className={styles.cardWrapper}>
+                    <div className={styles.cardIcon}>{icon}</div>
+                    <SummaryCardHeader>{title}</SummaryCardHeader>
+                    <SummaryCardContent>{children}</SummaryCardContent>
+                    <SummaryCardActions section={section} />
+                </div>
+            </Link>
         </Card>
     );
 };
@@ -64,21 +66,17 @@ interface SummaryCardActionsProps {
 }
 
 export const SummaryCardActions = ({ section }: SummaryCardActionsProps) => {
-    // paths are relative by default, use resolvePath to resolve from root
-    const managePath = resolvePath(getSectionPath(section));
-    const newModelPath = resolvePath(getSectionNewPath(section));
-
     // categoryOptionCombo is the only section that should not be creatable
     // TODO: implement auth and move this there
     const canCreate = section.name !== SECTIONS_MAP.categoryOptionCombo.name;
     return (
         <div className={styles.cardActions}>
             {canCreate && (
-                <Link to={newModelPath}>
+                <Link to={`/${getSectionNewPath}`} tabIndex={-1}>
                     <Button secondary>{i18n.t("Add new")}</Button>
                 </Link>
             )}
-            <Link to={managePath}>
+            <Link to={`/${getSectionPath(section)}`} tabIndex={-1}>
                 <Button secondary>{i18n.t("Manage")}</Button>
             </Link>
         </div>