Tm 1618 dashboard web design content management system for impact sto…

…ries admin and form (#902)

* [TM-1617]  add impact Story in dashboard

* TM-1618 Dashboard - Web Design - Content Management System for Impact Stories (Admin and Form)

* TM-1618 Fix styles for commentaries

---------

Co-authored-by: diego-morales-flores-1996 <[email protected]>

package.json

@@ -65,6 +65,7 @@
     "nookies": "^2.5.2",
     "prettier-plugin-tailwindcss": "^0.2.2",
     "query-string": "^7.1.1",
+    "quill": "2.0.3",
     "ra-input-rich-text": "^4.12.2",
     "react": "18.2.0",
     "react-admin": "^4.7.4",

src/admin/components/Actions/ListActionsImpactStories.tsx

@@ -0,0 +1,19 @@
+import DownloadIcon from "@mui/icons-material/GetApp";
+import { Button, CreateButton, FilterButton, TopToolbar } from "react-admin";
+import { When } from "react-if";
+
+interface ListActionsProps {
+  onExport?: () => void;
+}
+
+const ListActionsImpactStories = (props: ListActionsProps) => (
+  <TopToolbar>
+    <FilterButton className="filter-button-page-admin" />
+    <When condition={!!props.onExport}>
+      <Button className="button-page-admin" label="Export" startIcon={<DownloadIcon />} onClick={props.onExport} />
+    </When>
+    <CreateButton className="filter-button-page-admin-blue" label="Add Story" />
+  </TopToolbar>
+);
+
+export default ListActionsImpactStories;

src/admin/components/App.tsx

@@ -166,6 +166,13 @@ const App = () => {
             />
           </>
         )}
+        <Resource
+          name={modules.impactStories.ResourceName}
+          list={modules.impactStories.List}
+          edit={modules.impactStories.Edit}
+          icon={() => <Icon className="h-8 w-8" name={IconNames.PROJECTS} />}
+          options={{ label: "Impact Stories" }}
+        />
       </Admin>
     </LoadingProvider>
   );

src/admin/components/AppMenu.tsx

@@ -60,6 +60,9 @@ const AppMenu = () => {
       <div className={classNames({ "Sidebar-active": hash === "validationPolygon" })}>
         <Menu.ResourceItem name={modules.validatePolygonFile.ResourceName} />
       </div>
+      <div className={classNames({ "Sidebar-active": hash === "impactStories" })}>
+        <Menu.ResourceItem name={modules.impactStories.ResourceName} />
+      </div>
     </Menu>
   );
 };

src/admin/components/Fields/ChipFieldArray.tsx

@@ -0,0 +1,38 @@
+import classNames from "classnames";
+import React from "react";
+import { ArrayField, ArrayFieldProps, ChipField, FunctionField, SingleFieldList } from "react-admin";
+
+interface ChipFieldArrayProps extends Omit<ArrayFieldProps, "children"> {
+  data: { id: string; label: string; className?: string }[];
+  emptyText?: string;
+}
+
+const ChipFieldArray: React.FC<ChipFieldArrayProps> = ({ data, emptyText, ...props }) => {
+  if (!data.length) {
+    return (
+      <div className="text-14 w-fit-content whitespace-nowrap rounded-[3px] bg-grey-200 px-2 text-grey-500">
+        {emptyText ?? "Not Provided"}
+      </div>
+    );
+  }
+
+  return (
+    <ArrayField {...props} record={{ [props.source!]: data }}>
+      <SingleFieldList linkType={false}>
+        <FunctionField
+          render={(record?: { id: string; label: string; className?: string }) =>
+            record ? (
+              <ChipField
+                record={{ label: record.label }}
+                source="label"
+                className={classNames("!h-fit !rounded-[3px] text-grey-500", record.className)}
+              />
+            ) : null
+          }
+        />
+      </SingleFieldList>
+    </ArrayField>
+  );
+};
+
+export default ChipFieldArray;

src/admin/modules/impactStories/components/ImpactStoriesEditForm.tsx

@@ -0,0 +1,118 @@
+import { t } from "@transifex/native";
+import React from "react";
+
+import Button from "@/components/elements/Button/Button";
+import Dropdown from "@/components/elements/Inputs/Dropdown/Dropdown";
+import { VARIANT_DROPDOWN_IMPACT_STORY } from "@/components/elements/Inputs/Dropdown/DropdownVariant";
+import FileInput from "@/components/elements/Inputs/FileInput/FileInput";
+import { VARIANT_FILE_INPUT_IMPACT_STORY } from "@/components/elements/Inputs/FileInput/FileInputVariants";
+import Input from "@/components/elements/Inputs/Input/Input";
+import Text from "@/components/elements/Text/Text";
+import { ModalId } from "@/components/extensive/Modal/ModalConst";
+import ModalStory from "@/components/extensive/Modal/ModalStory";
+import { useModalContext } from "@/context/modal.provider";
+
+import QuillEditor from "./QuillEditor";
+
+const ImpactStoriesEditForm = () => {
+  const { openModal } = useModalContext();
+  const ModalStoryOpen = (uuid: string) => {
+    openModal(ModalId.MODAL_STORY, <ModalStory uuid={uuid} title={t("IMPACT STORY")} preview={true} />);
+  };
+  return (
+    <div>
+      <Text variant="text-24-bold" className="leading-[normal] text-darkCustom">
+        Edit Impact Story
+      </Text>
+      <div className="mt-5 flex flex-col gap-y-6">
+        <div className="grid grid-cols-2 gap-x-4">
+          <Input
+            label="Title of Story"
+            name="title"
+            type="text"
+            labelClassName="capitalize text-14-bold"
+            className="text-14-light"
+          />
+          <Input
+            label="Date"
+            name="title"
+            type="date"
+            labelClassName="capitalize text-14-bold"
+            className="text-14-light"
+          />
+        </div>
+        <Dropdown
+          label="Impact Category"
+          options={[
+            {
+              title: "Gender equity",
+              value: "gender-equity"
+            },
+            {
+              title: "Youth engagement",
+              value: "youth-engagement"
+            },
+            {
+              title: "Ecosystem services",
+              value: "ecosystem-services"
+            }
+          ]}
+          onChange={() => {}}
+          labelClassName="capitalize text-14-bold"
+          className="text-14-light"
+          multiSelect={true}
+          variant={VARIANT_DROPDOWN_IMPACT_STORY}
+        />
+        <div className="grid grid-cols-2 gap-x-4">
+          <div>
+            <FileInput
+              onChange={() => {}}
+              variant={VARIANT_FILE_INPUT_IMPACT_STORY}
+              files={[]}
+              allowMultiple={true}
+              label="Thumbnail"
+              labelClassName="capitalize text-14-bold"
+              classNameTextOr="hidden"
+              descriptionInput={
+                <Text variant="text-12-bold" className="text-center text-primary">
+                  documents or images to help reviewer
+                </Text>
+              }
+            />
+          </div>
+
+          <Input
+            label="Uploaded"
+            name="title"
+            type="text"
+            labelClassName="capitalize text-14-bold"
+            className="text-14-light"
+          />
+        </div>
+        <Text variant={"text-14-bold"}>Content</Text>
+        <QuillEditor />
+        <div className="grid grid-cols-2 gap-x-4">
+          <Input
+            label="Organization Details"
+            name="title"
+            type="text"
+            labelClassName="capitalize text-14-bold"
+            className="text-14-light"
+          />
+        </div>
+        <div className="flex justify-between">
+          <Button variant="semi-red">Delete</Button>
+          <div className="flex items-center gap-x-2">
+            <Button variant="white-border">Save as draft</Button>
+            <Button variant="white-border" onClick={() => ModalStoryOpen("impact-story-1")}>
+              Preview
+            </Button>
+            <Button variant="primary">Publish</Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ImpactStoriesEditForm;