Collections POC fine-tuning

BLSQ · Apr 20, 2022 · 91e35b9 · 91e35b9
1 parent 0bee794
commit 91e35b9
Show file tree

Hide file tree

Showing 5 changed files with 328 additions and 108 deletions.
diff --git a/src/components/Comments.tsx b/src/components/Comments.tsx
@@ -0,0 +1,112 @@
+import { QuestionMarkCircleIcon } from "@heroicons/react/solid";
+
+const Comments = () => {
+  const user = {
+    name: "Whitney Francis",
+    email: "[email protected]",
+    imageUrl:
+      "https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=256&h=256&q=80",
+  };
+  const comments = [
+    {
+      id: 1,
+      name: "Leslie Alexander",
+      date: "4d ago",
+      imageId: "1494790108377-be9c29b29330",
+      body: "Ducimus quas delectus ad maxime totam doloribus reiciendis ex. Tempore dolorem maiores. Similique voluptatibus tempore non ut.",
+    },
+    {
+      id: 2,
+      name: "Michael Foster",
+      date: "4d ago",
+      imageId: "1519244703995-f4e0f30006d5",
+      body: "Et ut autem. Voluptatem eum dolores sint necessitatibus quos?",
+    },
+  ];
+
+  return (
+    <div className="-mx-4 -my-5 sm:-mx-6">
+      <div className="divide-y divide-gray-200">
+        <div className="px-4 py-6 sm:px-6">
+          <ul role="list" className="max-w-4xl space-y-8">
+            {comments.map((comment) => (
+              <li key={comment.id}>
+                <div className="flex space-x-3">
+                  <div className="flex-shrink-0">
+                    <img
+                      className="h-10 w-10 rounded-full"
+                      src={`https://images.unsplash.com/photo-${comment.imageId}?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80`}
+                      alt=""
+                    />
+                  </div>
+                  <div>
+                    <div className="text-sm">
+                      <a href="#" className="font-medium text-gray-900">
+                        {comment.name}
+                      </a>
+                    </div>
+                    <div className="mt-1 text-sm text-gray-700">
+                      <p>{comment.body}</p>
+                    </div>
+                    <div className="mt-2 space-x-2 text-sm">
+                      <span className="font-medium text-gray-500">
+                        {comment.date}
+                      </span>{" "}
+                      <span className="font-medium text-gray-500">
+                        &middot;
+                      </span>{" "}
+                      <button
+                        type="button"
+                        className="font-medium text-gray-900"
+                      >
+                        Reply
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+      <div className="bg-gray-50 px-4 py-6 sm:px-6">
+        <div className="flex space-x-3">
+          <div className="flex-shrink-0">
+            <img
+              className="h-10 w-10 rounded-full"
+              src={user.imageUrl}
+              alt=""
+            />
+          </div>
+          <div className="min-w-0 max-w-4xl flex-1 ">
+            <form action="#">
+              <div>
+                <label htmlFor="comment" className="sr-only">
+                  About
+                </label>
+                <textarea
+                  id="comment"
+                  name="comment"
+                  rows={3}
+                  className="form-textarea block w-full rounded-md border border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
+                  placeholder="Add a note"
+                  defaultValue={""}
+                />
+              </div>
+              <div className="mt-3 flex items-center justify-start">
+                <button
+                  type="submit"
+                  className="inline-flex items-center justify-center rounded-md border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+                >
+                  Comment
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Comments;
diff --git a/src/features/collection/CollectionDataSourceViewerDialog.tsx b/src/features/collection/CollectionDataSourceViewerDialog.tsx
@@ -28,6 +28,9 @@ 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>
@@ -37,19 +40,22 @@ const CollectionDataSourceViewerDialog = (
             <tr>
               <td className={TableClasses.tdCondensed}>HF Visits</td>
               <td className={TableClasses.tdCondensed}>Data element</td>
-              <td className={TableClasses.tdCondensed}>data_element_de</td>
+              <td className={TableClasses.tdCondensed}>FTRrcoaog83</td>
+              <td className={TableClasses.tdCondensed}>hf_visits</td>
             </tr>
             <tr>
               <td className={TableClasses.tdCondensed}>
                 Level of water per month
               </td>
               <td className={TableClasses.tdCondensed}>Indicator</td>
-              <td className={TableClasses.tdCondensed}>id_indicator_lwpm</td>
+              <td className={TableClasses.tdCondensed}>FTRrcoaog83</td>
+              <td className={TableClasses.tdCondensed}>water_level</td>
             </tr>
             <tr>
               <td className={TableClasses.tdCondensed}>An indicator</td>
               <td className={TableClasses.tdCondensed}>Indicator</td>
-              <td className={TableClasses.tdCondensed}>id_indicator_xaz</td>
+              <td className={TableClasses.tdCondensed}>FTRrcoaog83</td>
+              <td className={TableClasses.tdCondensed}>-</td>
             </tr>
           </tbody>
         </table>

diff --git a/src/libs/collections.ts b/src/libs/collections.ts
@@ -1,58 +1,61 @@
-export const FAKE_COLLECTIONS = [
-  {
-    id: "1",
-    name: "COD Covid Data",
-    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: `### At vero eos
-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.Et harum quidem rerum facilis est et expedita distinctio.
+const SAMPLE_DESCRIPTION = `
+### At vero eos
+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.
+Et harum quidem rerum facilis est et expedita distinctio.
       
 > nihil impedit quo minus id quod maxime placeat facere possimus.
 
 1. Nam libero tempore
 2. Cum soluta nobis est eligendi optio [cumque](https://bluesquare.org) 
 
-**Omnis voluptas assumenda** est, omnis dolor repellendus.Temporibus autem.`,
-    tags: ["Malaria", "Polio", "Logistics"],
+**Omnis voluptas assumenda** est, omnis dolor repellendus.Temporibus autem.
+
+Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
+Phasellus laoreet tincidunt ligula, ac semper nisi placerat ut. Mauris congue, velit sed aliquam feugiat, ipsum 
+mi maximus dui, non maximus odio libero sed dolor.
+
+Sed luctus tellus et ipsum mollis uisque ac viverra libero, vitae [hendrerit quam](https://www.bluesquarehub.com).
+`;
+
+export const FAKE_COLLECTIONS = [
+  {
+    id: "1",
+    name: "Democratic Republic of Congo C19",
+    location: "COD",
+    locationCode: "cd",
+    createdBy: "Grégoire Lurton",
+    visibility: "Shared",
+    createdAt: "April 17, 2022",
+    excerpt:
+      "Data sources, notebooks and dashboard for Covid-19 monitoring in the Democratic Republic of Congo",
+
+    description: SAMPLE_DESCRIPTION,
+    tags: ["Covid-19", "Malaria", "Vaccination"],
   },
   {
     id: "2",
-    name: "BFA Vaccination 2022",
-    location: "Burkina Faso",
+    name: "Burkina Faso Malaria vaccination",
+    location: "BFA",
     locationCode: "bf",
-    createdBy: "Alfonse Brown",
-    visibility: "Bluesquare Data science (+2)",
-    createdAt: "Just Now",
+    createdBy: "Alex Kaldjian",
+    visibility: "Public",
+    createdAt: "April 14, 2022",
     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"],
+      "Malaria-related data from Burkina Faso, focused on the ongoing vaccination efforts",
+    description: SAMPLE_DESCRIPTION,
+    tags: ["Malaria", "Vaccination"],
   },
   {
     id: "3",
-    name: "IHP Working Data",
-    createdBy: "Alfonse Brown",
-    location: "Netherlands",
-    locationCode: "nl",
+    name: "IHP working data",
+    createdBy: "Fernando Valdés-Bango",
+    location: "COD",
+    locationCode: "cd",
     visibility: "Private",
-    createdAt: "2022-04-21",
-    description: "_No description_",
+    createdAt: "April 11, 2022",
+    description: SAMPLE_DESCRIPTION,
     tags: [],
   },
 ];