Create: Organizations block

src/blocks/Organizations/Organizations.jsx

@@ -0,0 +1,175 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { toast } from "react-toastify";
+
+import {
+  Block,
+  BaseTable,
+  Loading,
+  Modal,
+  Input,
+} from "@USupport-components-library/src";
+import { useGetOrganizationsWithDetails, useEditOrganization } from "#hooks";
+
+import "./organizations.scss";
+import { useQueryClient } from "@tanstack/react-query";
+import useCreateOrganization from "../../hooks/useCreateOrganization";
+
+/**
+ * Organizations
+ *
+ * Organizations
+ *
+ * @return {jsx}
+ */
+export const Organizations = () => {
+  const queryClient = useQueryClient();
+  const { t, i18n } = useTranslation("organizations");
+
+  const { data, isLoading } = useGetOrganizationsWithDetails();
+
+  const [dataToDisplay, setDataToDisplay] = useState();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [organizationToEdit, setOrganizationToEdit] = useState();
+  const [newOrganizationName, setNewOrganizationName] = useState("");
+
+  useEffect(() => {
+    if (data) {
+      setDataToDisplay(data);
+    }
+  }, [data]);
+
+  const rows = useMemo(() => {
+    return [
+      { label: t("name"), sortingKey: "name" },
+      { label: t("unique_providers"), sortingKey: "uniqueProviders" },
+      { label: t("unique_clients"), sortingKey: "uniqueClients" },
+      { label: t("total_consultations"), sortingKey: "totalConsultations" },
+    ];
+  }, [i18n.language]);
+
+  const rowsData = useMemo(() => {
+    return dataToDisplay?.map((item) => {
+      return [
+        <p className="text">{item.name}</p>,
+        <p className="text centered">{item.uniqueProviders}</p>,
+        <p className="text centered">{item.uniqueClients}</p>,
+        <p className="text centered">{item.totalConsultations}</p>,
+      ];
+    });
+  }, [dataToDisplay]);
+
+  const menuOptions = [
+    {
+      icon: "view",
+      text: t("view"),
+      handleClick: (id) => navigate(`/sponsor-details?sponsorId=${id}`),
+    },
+    {
+      icon: "edit",
+      text: t("edit"),
+      handleClick: (id) => {
+        console.log(id, "id");
+        setOrganizationToEdit(data.find((item) => item.organizationId === id));
+        setIsModalOpen(true);
+      },
+    },
+  ];
+
+  const onEditSuccess = () => {
+    toast.success(t("organization_edited"));
+    setIsModalOpen(false);
+    setOrganizationToEdit(null);
+    queryClient.invalidateQueries({
+      queryKey: ["GetOrganizationsWithDetails"],
+    });
+  };
+  const onEditError = () => {};
+  const editOrganizationMutation = useEditOrganization(
+    onEditSuccess,
+    onEditError
+  );
+
+  const onCreateSuccess = () => {
+    toast.success(t("organization_added"));
+    setIsModalOpen(false);
+    setNewOrganizationName("");
+    queryClient.invalidateQueries({
+      queryKey: ["GetOrganizationsWithDetails"],
+    });
+  };
+
+  const onCreateError = () => {};
+  const createOrganizationMutation = useCreateOrganization(
+    onCreateSuccess,
+    onCreateError
+  );
+
+  const addOrganization = () => {
+    createOrganizationMutation.mutate({ name: newOrganizationName });
+  };
+  const editOrganization = () => {
+    editOrganizationMutation.mutate({
+      name: organizationToEdit.name,
+      organizationId: organizationToEdit.organizationId,
+    });
+  };
+
+  console.log(organizationToEdit);
+  return (
+    <React.Fragment>
+      <Modal
+        isOpen={isModalOpen}
+        heading={t(
+          organizationToEdit ? "edit_organization" : "create_organization"
+        )}
+        closeModal={() => setIsModalOpen(false)}
+        classes="organizations"
+        ctaLabel={organizationToEdit ? t("save") : t("add")}
+        ctaHandleClick={organizationToEdit ? editOrganization : addOrganization}
+        isCtaLoading={
+          editOrganizationMutation.isLoading ||
+          createOrganizationMutation.isLoading
+        }
+      >
+        <div className="organizations__modal">
+          <Input
+            label={t("name")}
+            value={
+              organizationToEdit ? organizationToEdit.name : newOrganizationName
+            }
+            onChange={(e) => {
+              if (organizationToEdit) {
+                setOrganizationToEdit((prev) => ({
+                  ...prev,
+                  name: e.target.value,
+                }));
+              } else {
+                setNewOrganizationName(e.target.value);
+              }
+            }}
+          />
+        </div>
+      </Modal>
+
+      <Block classes="organizations">
+        {isLoading ? (
+          <Loading />
+        ) : (
+          <BaseTable
+            data={data}
+            rows={rows}
+            rowsData={rowsData}
+            handleClickPropName="organizationId"
+            updateData={setDataToDisplay}
+            menuOptions={menuOptions}
+            buttonLabel={t("add_button")}
+            buttonAction={() => setIsModalOpen(true)}
+            // secondaryButtonLabel={t("filter_button")}
+            t={t}
+          />
+        )}
+      </Block>
+    </React.Fragment>
+  );
+};

src/blocks/Organizations/index.js

@@ -0,0 +1 @@
+export * from './Organizations.jsx';

src/blocks/Organizations/locales.js

@@ -0,0 +1 @@
+export * as en from './locales/en.json';

src/blocks/Organizations/locales/en.json

@@ -0,0 +1,16 @@
+{
+  "name": "Name",
+  "total_consultations": "Total consultations",
+  "unique_providers": "Total providers",
+  "unique_clients": "Total clients",
+  "add_button": "Add organization",
+  "filter_button": "Filter",
+  "view": "View",
+  "edit": "Edit",
+  "save": "Save",
+  "add": "Create",
+  "edit_organization": "Edit organization",
+  "create_organization": "Create organization",
+  "organization_added": "Organization created",
+  "organization_updated": "Organization updated"
+}

src/blocks/Organizations/locales/kk.json

@@ -0,0 +1,16 @@
+{
+  "name": "Атауы",
+  "total_consultations": "Барлық кеңестер",
+  "unique_providers": "Барлық провайдерлер",
+  "unique_clients": "Барлық клиенттер",
+  "add_button": "Ұйым қосу",
+  "filter_button": "Сүзу",
+  "view": "Көру",
+  "edit": "Өңдеу",
+  "save": "Сақтау",
+  "add": "Жасау",
+  "edit_organization": "Ұйымды өңдеу",
+  "create_organization": "Ұйым жасау",
+  "organization_added": "Ұйым құрылды",
+  "organization_updated": "Ұйым жаңартылды"
+}

src/blocks/Organizations/locales/pl.json

@@ -0,0 +1,16 @@
+{
+  "name": "Nazwa",
+  "total_consultations": "Łączna liczba konsultacji",
+  "unique_providers": "Łączna liczba dostawców",
+  "unique_clients": "Łączna liczba klientów",
+  "add_button": "Dodaj organizację",
+  "filter_button": "Filtruj",
+  "view": "Zobacz",
+  "edit": "Edytuj",
+  "save": "Zapisz",
+  "add": "Utwórz",
+  "edit_organization": "Edytuj organizację",
+  "create_organization": "Utwórz organizację",
+  "organization_added": "Organizacja została utworzona",
+  "organization_updated": "Organizacja została zaktualizowana"
+}

src/blocks/Organizations/locales/ru.json

@@ -0,0 +1,16 @@
+{
+  "name": "Название",
+  "total_consultations": "Всего консультаций",
+  "unique_providers": "Всего провайдеров",
+  "unique_clients": "Всего клиентов",
+  "add_button": "Добавить организацию",
+  "filter_button": "Фильтр",
+  "view": "Просмотр",
+  "edit": "Редактировать",
+  "save": "Сохранить",
+  "add": "Создать",
+  "edit_organization": "Редактировать организацию",
+  "create_organization": "Создать организацию",
+  "organization_added": "Организация создана",
+  "organization_updated": "Организация обновлена"
+}

src/blocks/Organizations/locales/uk.json

@@ -0,0 +1,16 @@
+{
+  "name": "Назва",
+  "total_consultations": "Всього консультацій",
+  "unique_providers": "Всього провайдерів",
+  "unique_clients": "Всього клієнтів",
+  "add_button": "Додати організацію",
+  "filter_button": "Фільтр",
+  "view": "Переглянути",
+  "edit": "Редагувати",
+  "save": "Зберегти",
+  "add": "Створити",
+  "edit_organization": "Редагувати організацію",
+  "create_organization": "Створити організацію",
+  "organization_added": "Організацію створено",
+  "organization_updated": "Організацію оновлено"
+}

src/blocks/Organizations/organizations.scss

@@ -0,0 +1,10 @@
+@import "@USupport-components-library/styles";
+
+.organizations {
+  &__modal {
+    & .input-container {
+      margin-block: 1rem;
+      margin-left: 1rem;
+    }
+  }
+}

src/blocks/index.js

@@ -26,3 +26,4 @@ export * from "./AddCampaign";
 export * from "./CampaignDetails";
 export * from "./MyQAReports";
 export * from "./MyQA";
+export * from './Organizations';

src/blocks/locales.js

@@ -24,3 +24,4 @@ export * as AddCampaign from "./AddCampaign/locales.js";
 export * as CampaignDetails from "./CampaignDetails/locales.js";
 export * as MyQAReports from "./MyQAReports/locales.js";
 export * as MyQA from "./MyQA/locales.js";
+export * as Organizations from './Organizations/locales.js';