Improve layout of the collections POC (#7)

BLSQ · Apr 20, 2022 · 32be2dc · 32be2dc
1 parent b9bf1cd
commit 32be2dc
Show file tree

Hide file tree

Showing 9 changed files with 2,068 additions and 568 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -66,6 +66,7 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-dropzone": "^12.0.5",
+    "react-markdown": "^8.0.2",
     "react-popper": "^2.2.5",
     "react-popper-tooltip": "^4.3.1",
     "react-select": "^5.2.2",

diff --git a/public/locales/en/messages.json b/public/locales/en/messages.json
@@ -1,5 +1,4 @@
 {
-  "# Elements": "# Elements",
   "# Rows": "# Rows",
   "Actions": "Actions",
   "An unexpected error ocurred.": "An unexpected error ocurred.",
@@ -8,32 +7,34 @@
   "Code": "Code",
   "Collection properties": "Collection properties",
   "Collections": "Collections",
+  "Content": "Content",
   "Created": "Created",
   "Created at": "Created at",
   "Created At": "Created At",
   "Created by": "Created by",
-  "Database Tables": "Database Tables",
   "Description": "Description",
-  "DHIS Sources": "DHIS Sources",
+  "Details": "Details",
+  "DHIS2 Instances": "DHIS2 Instances",
+  "Download": "Download",
   "Edit": "Edit",
   "Extract": "Extract",
+  "Filename": "Filename",
   "Home": "Home",
-  "Id": "Id",
   "Last extracted": "Last extracted",
   "Loading...": "Loading...",
   "Location": "Location",
   "Name": "Name",
   "Next": "Next",
   "Notebooks": "Notebooks",
   "Open": "Open",
-  "Other Sources": "Other Sources",
-  "Preview": "Preview",
-  "Preview data source": "Preview data source",
+  "Postgres Data": "Postgres Data",
   "Previous": "Previous",
+  "S3 Files": "S3 Files",
   "Showing {{start}} to {{end}} of {{totalItems}} results": "Showing {{start}} to {{end}} of {{totalItems}} results",
   "Showing all results": "Showing all results",
   "Tags": "Tags",
   "Type": "Type",
   "View": "View",
-  "Visibility": "Visibility"
+  "Visibility": "Visibility",
+  "Visualizations": "Visualizations"
 }
diff --git a/public/locales/fr/messages.json b/public/locales/fr/messages.json
@@ -1,5 +1,4 @@
 {
-  "# Elements": "",
   "# Rows": "",
   "Actions": "",
   "An unexpected error ocurred.": "",
@@ -8,32 +7,34 @@
   "Code": "",
   "Collection properties": "",
   "Collections": "",
+  "Content": "",
   "Created": "",
   "Created at": "",
   "Created At": "",
   "Created by": "",
-  "Database Tables": "",
   "Description": "",
-  "DHIS Sources": "",
+  "Details": "",
+  "DHIS2 Instances": "",
+  "Download": "",
   "Edit": "",
   "Extract": "",
+  "Filename": "",
   "Home": "",
-  "Id": "",
   "Last extracted": "",
   "Loading...": "",
   "Location": "",
   "Name": "",
   "Next": "",
   "Notebooks": "",
   "Open": "",
-  "Other Sources": "",
-  "Preview": "",
-  "Preview data source": "",
+  "Postgres Data": "",
   "Previous": "",
+  "S3 Files": "",
   "Showing {{start}} to {{end}} of {{totalItems}} results": "",
   "Showing all results": "",
   "Tags": "",
   "Type": "",
   "View": "",
-  "Visibility": ""
+  "Visibility": "",
+  "Visualizations": ""
 }
diff --git a/src/features/collection/CollectionDataSourceViewerDialog.tsx b/src/features/collection/CollectionDataSourceViewerDialog.tsx
@@ -17,7 +17,7 @@ const CollectionDataSourceViewerDialog = (
   const { t } = useTranslation();
   return (
     <Dialog open={open} onClose={onClose} maxWidth="max-w-3xl">
-      <Dialog.Title onClose={onClose}>{t("Preview data source")}</Dialog.Title>
+      <Dialog.Title onClose={onClose}>{t("Details")}</Dialog.Title>
       <Dialog.Content>
         <table className={TableClasses.table}>
           <thead className={TableClasses.thead}>
@@ -28,65 +28,28 @@ const CollectionDataSourceViewerDialog = (
               <th className={TableClasses.thCondensed} scope="col">
                 {t("Type")}
               </th>
-              <th className={TableClasses.thCondensed} scope="col">
-                {t("Id")}
-              </th>
               <th className={TableClasses.thCondensed} scope="col">
                 {t("Code")}
               </th>
-              <th className={TableClasses.thCondensed} scope="col">
-                <span className="sr-only">{t("Actions")}</span>
-              </th>
             </tr>
           </thead>
           <tbody className={TableClasses.tbody}>
             <tr>
-              <td className={TableClasses.tdCondensed}>Psychoses</td>
-              <td className={TableClasses.tdCondensed}>-</td>
-              <td className={TableClasses.tdCondensed}>aAzdq921</td>
-              <td className={TableClasses.tdCondensed}>DE_xZAs</td>
-              <td className={TableClasses.tdCondensed}>
-                <div className="flex items-center justify-end gap-6">
-                  <Button
-                    size="sm"
-                    variant="white"
-                    leadingIcon={<DocumentDownloadIcon className="h-4" />}
-                  >
-                    {t("Extract")}
-                  </Button>
-                  <a
-                    href=""
-                    className="inline-flex items-center font-medium text-blue-600 hover:text-blue-900"
-                  >
-                    {t("Preview")}
-                    <ChevronRightIcon className="ml-1 h-4" />
-                  </a>
-                </div>
-              </td>
+              <td className={TableClasses.tdCondensed}>HF Visits</td>
+              <td className={TableClasses.tdCondensed}>Data element</td>
+              <td className={TableClasses.tdCondensed}>data_element_de</td>
             </tr>
             <tr>
-              <td className={TableClasses.tdCondensed}>Psychoses</td>
-              <td className={TableClasses.tdCondensed}>-</td>
-              <td className={TableClasses.tdCondensed}>aAzdq921</td>
-              <td className={TableClasses.tdCondensed}>DE_xZAs</td>
               <td className={TableClasses.tdCondensed}>
-                <div className="flex items-center justify-end gap-6">
-                  <Button
-                    size="sm"
-                    variant="white"
-                    leadingIcon={<DocumentDownloadIcon className="h-4" />}
-                  >
-                    {t("Extract")}
-                  </Button>
-                  <a
-                    href=""
-                    className="inline-flex items-center font-medium text-blue-600 hover:text-blue-900"
-                  >
-                    {t("Preview")}
-                    <ChevronRightIcon className="ml-1 h-4" />
-                  </a>
-                </div>
+                Level of water per month
               </td>
+              <td className={TableClasses.tdCondensed}>Indicator</td>
+              <td className={TableClasses.tdCondensed}>id_indicator_lwpm</td>
+            </tr>
+            <tr>
+              <td className={TableClasses.tdCondensed}>An indicator</td>
+              <td className={TableClasses.tdCondensed}>Indicator</td>
+              <td className={TableClasses.tdCondensed}>id_indicator_xaz</td>
             </tr>
           </tbody>
         </table>

diff --git a/src/libs/collections.ts b/src/libs/collections.ts
@@ -2,30 +2,47 @@ export const FAKE_COLLECTIONS = [
   {
     id: "1",
     name: "COD Covid Data",
-    location: "COD",
+    location: "Burkina Faso",
+    locationCode: "bf",
     createdBy: "Alfonse Brown",
     visibility: "Bluesquare Data science (+2)",
     createdAt: "2022-04-21",
+    excerpt: "COD Covid data is made by BLSQ and regroups lot of data",
+
     description:
       "<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p><p>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.</p><p>Temporibus autem.</p>",
     tags: ["Malaria", "Polio", "Logistics"],
   },
   {
     id: "2",
     name: "BFA Vaccination 2022",
-    location: "BFA",
+    location: "Burkina Faso",
+    locationCode: "bf",
     createdBy: "Alfonse Brown",
     visibility: "Bluesquare Data science (+2)",
     createdAt: "Just Now",
-    description:
-      "<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p><p>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.</p><p>Temporibus autem.</p>",
+    excerpt:
+      "BFA Vaccination collection is made by BLSQ and regroups lot of data",
+    description: `At vero eos et accusamus et iusto odio dignissimos :
+- ducimus qui blanditiis praesentium voluptatum
+- deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.
+
+  
+### similique
+
+sunt in culpa qui officia [deserunt mollitia animi](https://app.openhexa.org), id est laborum et dolorum fuga.
+    
+Et harum **quidem rerum** facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.
+    
+_Temporibus_ autem.`,
     tags: ["Logistics"],
   },
   {
     id: "3",
     name: "IHP Working Data",
     createdBy: "Alfonse Brown",
-    location: "Global",
+    location: "Netherlands",
+    locationCode: "nl",
     visibility: "Private",
     createdAt: "2022-04-21",
     description: "",