From e043cfd7f20f4975eaf8bd8ee5f27871c22248b5 Mon Sep 17 00:00:00 2001 From: Jamari McFarlane Date: Sat, 7 Oct 2023 04:34:31 -0500 Subject: [PATCH] Sample Org Implementation --- public/locales/en.json | 5 +- public/locales/fr.json | 6 ++- public/locales/hi.json | 5 +- public/locales/sp.json | 5 +- public/locales/zh.json | 5 +- src/GraphQl/Mutations/mutations.ts | 12 +++++ src/GraphQl/Queries/Queries.ts | 6 +++ src/assets/svgs/flask.svg | 1 + src/components/DeleteOrg/DeleteOrg.tsx | 50 +++++++++++++------ .../OrgListCard/OrgListCard.module.css | 13 +++++ src/components/OrgListCard/OrgListCard.tsx | 25 +++++++++- src/screens/OrgList/OrgList.module.css | 33 ++++++++++++ src/screens/OrgList/OrgList.tsx | 39 ++++++++++++++- 13 files changed, 183 insertions(+), 22 deletions(-) create mode 100644 src/assets/svgs/flask.svg diff --git a/public/locales/en.json b/public/locales/en.json index a6364b736f..7d291d1acc 100644 --- a/public/locales/en.json +++ b/public/locales/en.json @@ -85,6 +85,7 @@ "searchByName": "Search By Name", "organizations": "Organizations", "createOrganization": "Create Organization", + "createSampleOrganization": "Create Sample Organization", "description": "Description", "location": "Location", "isPublic": "Is Public", @@ -106,7 +107,8 @@ "orgListCard": { "admins": "Admins", "members": "Members", - "manage": "Manage" + "manage": "Manage", + "sampleOrganization": "Sample Organization" }, "paginationList": { "rowsPerPage": "rows per page", @@ -386,6 +388,7 @@ }, "deleteOrg": { "deleteOrganization": "Delete Organization", + "deleteSampleOrganization": "Delete Sample Organization", "deleteMsg": "Do you want to delete this organization?", "no": "No", "yes": "Yes", diff --git a/public/locales/fr.json b/public/locales/fr.json index 76dbe5a622..125ca39eab 100644 --- a/public/locales/fr.json +++ b/public/locales/fr.json @@ -80,6 +80,7 @@ "searchByName": "Rechercher par nom", "organizations": "Organisations", "createOrganization": "Créer une organisation", + "createSampleOrganization": "Créer une organisation d'exemple", "description": "La description", "location": "Emplacement", "isPublic": "Est publique", @@ -96,8 +97,10 @@ "orgListCard": { "admins": "Administrateurs", "members": "Membres", - "manage": "Faire en sorte" + "manage": "Faire en sorte", + "sampleOrganization": "Organisation d'exemple" }, + "paginationList": { "rowsPerPage": "lignes par page", "all": "Tout" @@ -376,6 +379,7 @@ }, "deleteOrg": { "deleteOrganization": "Supprimer l'organisation", + "deleteSampleOrganization": "Supprimer l'organisation d'exemple", "deleteMsg": "Voulez-vous supprimer cette organisation ?", "no": "Non", "yes": "Oui", diff --git a/public/locales/hi.json b/public/locales/hi.json index 8c2c78fe85..741cd56f8a 100644 --- a/public/locales/hi.json +++ b/public/locales/hi.json @@ -80,6 +80,7 @@ "searchByName": "नाम से खोजें", "organizations": "संगठन", "createOrganization": "संगठन बनाएं", + "createSampleOrganization": " सैंपल संगठन बनाएं", "description": "विवरण", "location": "स्थान", "isPublic": "सार्वजनिक है", @@ -96,7 +97,8 @@ "orgListCard": { "admins": "व्यवस्थापक", "members": "सदस्य", - "manage": "प्रबंधित करना" + "manage": "प्रबंधित करना", + "sampleOrganization": "सैंपल संगठन" }, "paginationList": { "rowsPerPage": "प्रति पृष्ठ पंक्तियाँ", @@ -376,6 +378,7 @@ }, "deleteOrg": { "deleteOrganization": "संगठन हटाएं", + "deleteSampleOrganization": "सैंपल संगठन को हटाएं", "deleteMsg": "क्या आप इस संगठन को हटाना चाहते हैं?", "no": "नहीं", "yes": "हां", diff --git a/public/locales/sp.json b/public/locales/sp.json index 68e22ae552..a921b7de99 100644 --- a/public/locales/sp.json +++ b/public/locales/sp.json @@ -80,6 +80,7 @@ "searchByName": "Buscar por nombre", "organizations": "Organizaciones", "createOrganization": "Crear organización", + "createSampleOrganization": "Crear organización de muestra", "description": "Descripción", "location": "Ubicación", "isPublic": "Es público", @@ -96,7 +97,8 @@ "orgListCard": { "admins": "Administradores", "members": "Miembros", - "manage": "Administrar" + "manage": "Administrar", + "sampleOrganization": "Organización de muestra" }, "paginationList": { "rowsPerPage": "filas por página", @@ -376,6 +378,7 @@ }, "deleteOrg": { "deleteOrganization": "Eliminar organización", + "deleteSampleOrganization": "Eliminar organización de muestra", "deleteMsg": "¿Desea eliminar esta organización?", "no": "No", "yes": "Sí", diff --git a/public/locales/zh.json b/public/locales/zh.json index f99825cd79..51eab427aa 100644 --- a/public/locales/zh.json +++ b/public/locales/zh.json @@ -80,6 +80,7 @@ "searchByName": "按名稱搜索", "organizations": "组织", "createOrganization": "創建組織", + "createSampleOrganization": "创建示范组织", "description": "描述", "location": "地點", "isPublic": "是否公開", @@ -96,7 +97,8 @@ "orgListCard": { "admins": "管理員", "members": "成員", - "manage": "管理" + "manage": "管理", + "sampleOrganization": "示例组织" }, "paginationList": { "rowsPerPage": "每頁行數", @@ -376,6 +378,7 @@ }, "deleteOrg": { "deleteOrganization": "删除组织", + "deleteSampleOrganization": "删除示范组织", "deleteMsg": "您是否要删除此组织？", "no": "否", "yes": "是", diff --git a/src/GraphQl/Mutations/mutations.ts b/src/GraphQl/Mutations/mutations.ts index be487f0d15..230137d66d 100644 --- a/src/GraphQl/Mutations/mutations.ts +++ b/src/GraphQl/Mutations/mutations.ts @@ -622,3 +622,15 @@ export const UNLIKE_COMMENT = gql` } } `; + +export const CREATE_SAMPLE_ORGANIZATION_MUTATION = gql` + mutation { + createSampleOrganization + } +`; + +export const REMOVE_SAMPLE_ORGANIZATION_MUTATION = gql` + mutation { + removeSampleOrganization + } +`; diff --git a/src/GraphQl/Queries/Queries.ts b/src/GraphQl/Queries/Queries.ts index 67e7bf89f6..4d698c1789 100644 --- a/src/GraphQl/Queries/Queries.ts +++ b/src/GraphQl/Queries/Queries.ts @@ -714,3 +714,9 @@ export const USER_TASKS_LIST = gql` } } `; + +export const IS_SAMPLE_ORGANIZATION_QUERY = gql` + query ($isSampleOrganizationId: ID!) { + isSampleOrganization(id: $isSampleOrganizationId) + } +`; diff --git a/src/assets/svgs/flask.svg b/src/assets/svgs/flask.svg new file mode 100644 index 0000000000..599220a9d2 --- /dev/null +++ b/src/assets/svgs/flask.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/DeleteOrg/DeleteOrg.tsx b/src/components/DeleteOrg/DeleteOrg.tsx index e6442d6558..9b6c4a0fce 100644 --- a/src/components/DeleteOrg/DeleteOrg.tsx +++ b/src/components/DeleteOrg/DeleteOrg.tsx @@ -1,9 +1,12 @@ -import { useMutation } from '@apollo/client'; -import { DELETE_ORGANIZATION_MUTATION } from 'GraphQl/Mutations/mutations'; import React, { useState } from 'react'; import { Button, Card, Modal } from 'react-bootstrap'; import { useTranslation } from 'react-i18next'; +import { useMutation, useQuery } from '@apollo/client'; import { errorHandler } from 'utils/errorHandler'; +import { toast } from 'react-toastify'; +import { DELETE_ORGANIZATION_MUTATION } from 'GraphQl/Mutations/mutations'; +import { REMOVE_SAMPLE_ORGANIZATION_MUTATION } from 'GraphQl/Mutations/mutations'; +import { IS_SAMPLE_ORGANIZATION_QUERY } from 'GraphQl/Queries/Queries'; import styles from './DeleteOrg.module.css'; function deleteOrg(): JSX.Element { @@ -14,22 +17,39 @@ function deleteOrg(): JSX.Element { const currentUrl = window.location.href.split('=')[1]; const canDelete = localStorage.getItem('UserType') === 'SUPERADMIN'; const toggleDeleteModal = (): void => setShowDeleteModal(!showDeleteModal); + const [del] = useMutation(DELETE_ORGANIZATION_MUTATION); + const [removeSampleOrganization] = useMutation( + REMOVE_SAMPLE_ORGANIZATION_MUTATION + ); + + const { data } = useQuery(IS_SAMPLE_ORGANIZATION_QUERY, { + variables: { + isSampleOrganizationId: currentUrl, + }, + }); const deleteOrg = async (): Promise => { - try { - const { data } = await del({ - variables: { - id: currentUrl, - }, - }); - /* istanbul ignore next */ - if (data) { + if (data && data.isSampleOrganization) { + removeSampleOrganization() + .then(() => { + toast.success('Successfully deleted sample Organization'); + }) + .catch((error) => { + toast.error(error.message); + }); + window.location.replace('/orglist'); + } else { + try { + await del({ + variables: { + id: currentUrl, + }, + }); window.location.replace('/orglist'); + } catch (error: any) { + errorHandler(t, error); } - } catch (error: any) { - /* istanbul ignore next */ - errorHandler(t, error); } }; @@ -48,7 +68,9 @@ function deleteOrg(): JSX.Element { onClick={toggleDeleteModal} data-testid="openDeleteModalBtn" > - {t('deleteOrganization')} + {data && data.isSampleOrganization + ? t('deleteSampleOrganization') + : t('deleteOrganization')} diff --git a/src/components/OrgListCard/OrgListCard.module.css b/src/components/OrgListCard/OrgListCard.module.css index 90be5a088f..1f1e5e2974 100644 --- a/src/components/OrgListCard/OrgListCard.module.css +++ b/src/components/OrgListCard/OrgListCard.module.css @@ -77,3 +77,16 @@ display: block; } } + +.flaskIcon { + position: absolute; + top: 0; + right: 0; + margin: 10px 20px 0px 0px; +} + +.manageBtn { + display: flex; + justify-content: space-around; + width: 150px; +} diff --git a/src/components/OrgListCard/OrgListCard.tsx b/src/components/OrgListCard/OrgListCard.tsx index 5568c78d30..191a689bc0 100644 --- a/src/components/OrgListCard/OrgListCard.tsx +++ b/src/components/OrgListCard/OrgListCard.tsx @@ -1,10 +1,13 @@ import React from 'react'; +import { ReactComponent as FlaskIcon } from 'assets/svgs/flask.svg'; import Button from 'react-bootstrap/Button'; import { useTranslation } from 'react-i18next'; import styles from './OrgListCard.module.css'; import { useHistory } from 'react-router-dom'; import type { InterfaceOrgConnectionInfoType } from 'utils/interfaces'; import LocationOnIcon from '@mui/icons-material/LocationOn'; +import { IS_SAMPLE_ORGANIZATION_QUERY } from 'GraphQl/Queries/Queries'; +import { useQuery } from '@apollo/client'; export interface InterfaceOrgListCardProps { data: InterfaceOrgConnectionInfoType; @@ -13,6 +16,12 @@ export interface InterfaceOrgListCardProps { function orgListCard(props: InterfaceOrgListCardProps): JSX.Element { const { _id, admins, image, location, members, name } = props.data; + const { data } = useQuery(IS_SAMPLE_ORGANIZATION_QUERY, { + variables: { + isSampleOrganizationId: _id, + }, + }); + const history = useHistory(); function handleClick(): void { @@ -46,7 +55,6 @@ function orgListCard(props: InterfaceOrgListCardProps): JSX.Element { )}
-
{name}
{location} @@ -57,9 +65,22 @@ function orgListCard(props: InterfaceOrgListCardProps): JSX.Element {
{t('members')}: {members.length}
+
{name}
- diff --git a/src/screens/OrgList/OrgList.module.css b/src/screens/OrgList/OrgList.module.css index 6e643bb80d..6b9a3b5ead 100644 --- a/src/screens/OrgList/OrgList.module.css +++ b/src/screens/OrgList/OrgList.module.css @@ -7,6 +7,33 @@ display: flex; } +.flex { + display: flex; + justify-content: center; + align-items: center; +} + +.sampleHover:hover { + border-color: grey; + color: grey; +} + +.btnDivider { + padding: 20px; +} + +.sampleOrgSection { + font-family: Arial, Helvetica, sans-serif; + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; +} + +.sampleModalTitle { + background-color: green; +} + .btnsContainer .btnsBlock button { margin-left: 1rem; display: flex; @@ -129,12 +156,14 @@ flex-direction: column; margin-left: 1rem; } + .titlemodaldialog { color: #707070; font-size: 20px; margin-bottom: 20px; padding-bottom: 5px; } + form label { font-weight: bold; padding-bottom: 1px; @@ -170,13 +199,16 @@ form > input { cursor: pointer; color: #707070; } + .modalbody { width: 50px; } + .pluginStoreBtnContainer { display: flex; gap: 1rem; } + .greenregbtn { margin: 1rem 0 0; margin-top: 10px; @@ -200,6 +232,7 @@ form > input { width: 45%; height: 18px; } + .secondbtn { display: flex; align-items: center; diff --git a/src/screens/OrgList/OrgList.tsx b/src/screens/OrgList/OrgList.tsx index a34a084a14..45bbee466a 100644 --- a/src/screens/OrgList/OrgList.tsx +++ b/src/screens/OrgList/OrgList.tsx @@ -7,6 +7,12 @@ import { ORGANIZATION_CONNECTION_LIST, USER_ORGANIZATION_LIST, } from 'GraphQl/Queries/Queries'; + +import { + CREATE_SAMPLE_ORGANIZATION_MUTATION, + REMOVE_SAMPLE_ORGANIZATION_MUTATION, +} from 'GraphQl/Mutations/mutations'; + import OrgListCard from 'components/OrgListCard/OrgListCard'; import type { ChangeEvent } from 'react'; import React, { useEffect, useState } from 'react'; @@ -63,6 +69,10 @@ function orgList(): JSX.Element { const [create] = useMutation(CREATE_ORGANIZATION_MUTATION); + const [createSampleOrganization] = useMutation( + CREATE_SAMPLE_ORGANIZATION_MUTATION + ); + const { data: userData, error: errorUser, @@ -121,6 +131,18 @@ function orgList(): JSX.Element { } }; + const triggerCreateSampleOrg = () => { + createSampleOrganization() + .then(() => { + toast.success(t('successMessage')); + window.location.reload(); + }) + .catch((error: any) => { + console.log(error.message); + toast.error(t('errorMessage')); + }); + }; + const createOrg = async (e: ChangeEvent): Promise => { e.preventDefault(); @@ -438,7 +460,7 @@ function orgList(): JSX.Element { data-testid="organisationImage" /> - + + {userData && + ((userData.user.userType === 'ADMIN' && + userData.user.adminFor.length > 0) || + userData.user.userType === 'SUPERADMIN') && ( +
+

OR

+ +
+ )} {' '}