From 54afeff360bfa12e517b56940977b4957708d43c Mon Sep 17 00:00:00 2001 From: meetul Date: Tue, 30 Jan 2024 17:23:40 +0530 Subject: [PATCH 1/6] add mutations and queries --- public/locales/en.json | 10 +- .../Mutations/ActionItemCategoryMutations.ts | 49 ++++ src/GraphQl/Mutations/mutations.ts | 4 + .../Queries/ActionItemCategoryQueries.ts | 18 ++ src/GraphQl/Queries/Queries.ts | 3 + src/components/DeleteOrg/DeleteOrg.tsx | 2 +- .../OrgActionItemCategories.module.css | 34 +++ .../OrgActionItemCategories.tsx | 269 ++++++++++++++++++ .../OrgSettings/OrgSettings.module.css | 13 +- src/screens/OrgSettings/OrgSettings.tsx | 137 ++++++--- src/utils/interfaces.ts | 10 + 11 files changed, 505 insertions(+), 44 deletions(-) create mode 100644 src/GraphQl/Mutations/ActionItemCategoryMutations.ts create mode 100644 src/GraphQl/Queries/ActionItemCategoryQueries.ts create mode 100644 src/components/OrgActionItemCategories/OrgActionItemCategories.module.css create mode 100644 src/components/OrgActionItemCategories/OrgActionItemCategories.tsx diff --git a/public/locales/en.json b/public/locales/en.json index 06006a0052..563d11ab81 100644 --- a/public/locales/en.json +++ b/public/locales/en.json @@ -452,7 +452,8 @@ "noData": "No data", "otherSettings": "Other Settings", "changeLanguage": "Change Language", - "manageCustomFields": "Manage Custom Fields" + "manageCustomFields": "Manage Custom Fields", + "actionItemCategories": "Action Item Categories" }, "deleteOrg": { "deleteOrganization": "Delete Organization", @@ -739,5 +740,12 @@ "Remove Custom Field": "Remove Custom Field", "fieldSuccessMessage": "Field added successfully", "fieldRemovalSuccess": "Field removed successfully" + }, + "orgActionItemCategories": { + "addActionItemCategory": "Create", + "updateActionItemCategory": "Update", + "actionItemCategoryName": "Name", + "actionItemCategoryDetails": "Action Item Category Details", + "enterName": "Enter Name" } } diff --git a/src/GraphQl/Mutations/ActionItemCategoryMutations.ts b/src/GraphQl/Mutations/ActionItemCategoryMutations.ts new file mode 100644 index 0000000000..2b3f97fce0 --- /dev/null +++ b/src/GraphQl/Mutations/ActionItemCategoryMutations.ts @@ -0,0 +1,49 @@ +import gql from 'graphql-tag'; + +/** + * GraphQL mutation to create an action item category. + * + * @param name - Name of the ActionItemCategory. + * @param organizationId - Organization to which the ActionItemCategory belongs. + */ + +export const CREATE_ACTION_ITEM_CATEGORY_MUTATION = gql` + mutation CreateActionItemCategory($name: String!, $organizationId: ID!) { + createActionItemCategory(name: $name, organizationId: $organizationId) { + _id + name + organization { + _id + } + isDisabled + } + } +`; + +/** + * GraphQL mutation to update an action item category. + * + * @param actionItemCategoryId - The id of the ActionItemCategory to be updated. + * @param name - Updated name of the ActionItemCategory. + * @param isDisabled - Updated disabled status of the ActionItemCategory. + */ + +export const UPDATE_ACTION_ITEM_CATEGORY_MUTATION = gql` + mutation UpdateActionItemCategory( + $actionItemCategoryId: ID! + $name: String + $isDisabled: Boolean + ) { + updateActionItemCategory( + id: $actionItemCategoryId + data: { name: $name, isDisabled: $isDisabled } + ) { + _id + name + organization { + _id + } + isDisabled + } + } +`; diff --git a/src/GraphQl/Mutations/mutations.ts b/src/GraphQl/Mutations/mutations.ts index 0d70d585eb..546f32c83c 100644 --- a/src/GraphQl/Mutations/mutations.ts +++ b/src/GraphQl/Mutations/mutations.ts @@ -573,6 +573,10 @@ export const REGISTER_EVENT = gql` } `; +// Create and Update an ActionItemCategory +export { CREATE_ACTION_ITEM_CATEGORY_MUTATION } from './ActionItemCategoryMutations'; +export { UPDATE_ACTION_ITEM_CATEGORY_MUTATION } from './ActionItemCategoryMutations'; + // Changes the role of a event in an organization and add and remove the event from the organization export { ADD_EVENT_ATTENDEE } from './EventAttendeeMutations'; export { REMOVE_EVENT_ATTENDEE } from './EventAttendeeMutations'; diff --git a/src/GraphQl/Queries/ActionItemCategoryQueries.ts b/src/GraphQl/Queries/ActionItemCategoryQueries.ts new file mode 100644 index 0000000000..f612014022 --- /dev/null +++ b/src/GraphQl/Queries/ActionItemCategoryQueries.ts @@ -0,0 +1,18 @@ +import gql from 'graphql-tag'; + +/** + * GraphQL query to retrieve action item categories by organization. + * + * @param id - The ID of the organization for which action item categories are being retrieved. + * @returns The list of action item categories associated with the organization. + */ + +export const ACTION_ITEM_CATEGORY_LIST = gql` + query ActionItemCategoriesByOrganization($organizationId: ID!) { + actionItemCategoriesByOrganization(organizationId: $organizationId) { + _id + name + isDisabled + } + } +`; diff --git a/src/GraphQl/Queries/Queries.ts b/src/GraphQl/Queries/Queries.ts index 8c18ebf93b..79366f6057 100644 --- a/src/GraphQl/Queries/Queries.ts +++ b/src/GraphQl/Queries/Queries.ts @@ -581,6 +581,9 @@ export const MEMBERSHIP_REQUEST = gql` } `; +// get the list of action item categories for an organization +export { ACTION_ITEM_CATEGORY_LIST } from './ActionItemCategoryQueries'; + // to take the list of the blocked users export { PLUGIN_GET } from './PlugInQueries'; export { ADVERTISEMENTS_GET } from './PlugInQueries'; diff --git a/src/components/DeleteOrg/DeleteOrg.tsx b/src/components/DeleteOrg/DeleteOrg.tsx index 575f870f18..f33b38bd25 100644 --- a/src/components/DeleteOrg/DeleteOrg.tsx +++ b/src/components/DeleteOrg/DeleteOrg.tsx @@ -60,7 +60,7 @@ function deleteOrg(): JSX.Element { return ( <> {canDelete && ( - +
{t('deleteOrganization')}
diff --git a/src/components/OrgActionItemCategories/OrgActionItemCategories.module.css b/src/components/OrgActionItemCategories/OrgActionItemCategories.module.css new file mode 100644 index 0000000000..d3aa11911c --- /dev/null +++ b/src/components/OrgActionItemCategories/OrgActionItemCategories.module.css @@ -0,0 +1,34 @@ +.addButton { + width: 7em; + position: absolute; + right: 1rem; + top: 1rem; +} + +.createModal { + margin-top: 20vh; + margin-left: 13vw; + max-width: 80vw; +} + +.icon { + transform: scale(1.5); + color: var(--bs-danger); + margin-bottom: 1rem; +} + +.message { + height: 420px; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.titlemodal { + color: #707070; + font-weight: 600; + font-size: 20px; + margin-top: 1rem; + width: 65%; +} diff --git a/src/components/OrgActionItemCategories/OrgActionItemCategories.tsx b/src/components/OrgActionItemCategories/OrgActionItemCategories.tsx new file mode 100644 index 0000000000..ba070306f4 --- /dev/null +++ b/src/components/OrgActionItemCategories/OrgActionItemCategories.tsx @@ -0,0 +1,269 @@ +import type { ChangeEvent } from 'react'; +import React, { useState } from 'react'; +import { Button, Form, Modal } from 'react-bootstrap'; +import styles from './OrgActionItemCategories.module.css'; +import { useTranslation } from 'react-i18next'; + +import { useMutation, useQuery } from '@apollo/client'; +import { + CREATE_ACTION_ITEM_CATEGORY_MUTATION, + UPDATE_ACTION_ITEM_CATEGORY_MUTATION, +} from 'GraphQl/Mutations/mutations'; +import { toast } from 'react-toastify'; +import type { InterfaceActionItemCategoryList } from 'utils/interfaces'; +import { ACTION_ITEM_CATEGORY_LIST } from 'GraphQl/Queries/ActionItemCategoryQueries'; +import Loader from 'components/Loader/Loader'; +import { WarningAmberRounded } from '@mui/icons-material'; + +type ModalType = 'Create' | 'Update'; + +const OrgActionItemCategories = (): any => { + const { t } = useTranslation('translation', { + keyPrefix: 'orgActionItemCategories', + }); + + const [addModalIsOpen, setAddModalIsOpen] = useState(false); + const [modalType, setModalType] = useState('Create'); + const [categoryId, setCategoryId] = useState(''); + + const [name, setName] = useState(''); + + const currentUrl = window.location.href.split('=')[1]; + + const { + data, + loading, + error, + refetch, + }: { + data: InterfaceActionItemCategoryList | undefined; + loading: boolean; + error?: Error | undefined; + refetch: any; + } = useQuery(ACTION_ITEM_CATEGORY_LIST, { + variables: { + organizationId: currentUrl, + }, + notifyOnNetworkStatusChange: true, + }); + + const [createActionItemCategory] = useMutation( + CREATE_ACTION_ITEM_CATEGORY_MUTATION + ); + + const [updateActionItemCategory] = useMutation( + UPDATE_ACTION_ITEM_CATEGORY_MUTATION + ); + + const handleCreate = async ( + e: ChangeEvent + ): Promise => { + e.preventDefault(); + try { + const { data } = await createActionItemCategory({ + variables: { + name, + organizationId: currentUrl, + }, + }); + + setName(''); + refetch(); + + setAddModalIsOpen(false); + + toast.success('Action Item Category created successfully'); + console.log(data); + } catch (error: any) { + toast.error(error.message); + console.log(error); + } + }; + + const handleEdit = async (e: ChangeEvent): Promise => { + e.preventDefault(); + try { + await updateActionItemCategory({ + variables: { + actionItemCategoryId: categoryId, + name, + }, + }); + + setName(''); + setCategoryId(''); + refetch(); + + setAddModalIsOpen(false); + + toast.success('Action Item Category updated successfully'); + } catch (error: any) { + toast.error(error.message); + console.log(error); + } + }; + + const handleDisableStatus = async ( + id: string, + disabledStatus: boolean + ): Promise => { + try { + await updateActionItemCategory({ + variables: { + actionItemCategoryId: id, + isDisabled: !disabledStatus, + }, + }); + + refetch(); + + toast.success( + `Action Item Category ${ + disabledStatus === true ? 'Enabled' : 'Disabled' + }` + ); + } catch (error: any) { + toast.error(error.message); + console.log(error); + } + }; + + const showCreateModal = (): void => { + setModalType('Create'); + setAddModalIsOpen(true); + }; + + const showUpdateModal = (name: string, id: string): void => { + setName(name); + setCategoryId(id); + setModalType('Update'); + setAddModalIsOpen(true); + }; + + const hideModal = (): void => { + setName(''); + setCategoryId(''); + setAddModalIsOpen(false); + }; + + if (loading) { + return ; + } + + if (error) { + return ( +
+ +
+ Error occured while loading Action Item Categories Data +
+ {`${error.message}`} +
+
+ ); + } + + return ( + <> + + +
+ {data?.actionItemCategoriesByOrganization.map((category, index) => { + return ( +
+
+
{category.name}
+
+ + +
+
+ + {index !== data.actionItemCategoriesByOrganization.length - 1 && ( +
+ )} +
+ ); + })} +
+ + + +

+ {t('actionItemCategoryDetails')} +

+ + + +
+ + {t('actionItemCategoryName')} + + { + setName(e.target.value); + }} + /> + + +
+ + + ); +}; + +export default OrgActionItemCategories; diff --git a/src/screens/OrgSettings/OrgSettings.module.css b/src/screens/OrgSettings/OrgSettings.module.css index 2b15a2ac0c..aa21f6dab2 100644 --- a/src/screens/OrgSettings/OrgSettings.module.css +++ b/src/screens/OrgSettings/OrgSettings.module.css @@ -1,5 +1,10 @@ +.settingsContainer { + min-height: 100vh; +} + .settingsBody { - margin: 2.5rem 0; + min-height: 100vh; + margin: 2.5rem 1rem; } .cardHeader { @@ -23,3 +28,9 @@ margin: 0 0 3rem 0; color: var(--bs-secondary); } + +hr { + border: none; + height: 1px; + background-color: var(--bs-gray-500); +} diff --git a/src/screens/OrgSettings/OrgSettings.tsx b/src/screens/OrgSettings/OrgSettings.tsx index 9509719d5f..d159b645e2 100644 --- a/src/screens/OrgSettings/OrgSettings.tsx +++ b/src/screens/OrgSettings/OrgSettings.tsx @@ -1,68 +1,123 @@ -import React from 'react'; +import React, { useState } from 'react'; import ChangeLanguageDropDown from 'components/ChangeLanguageDropdown/ChangeLanguageDropDown'; import DeleteOrg from 'components/DeleteOrg/DeleteOrg'; import OrgUpdate from 'components/OrgUpdate/OrgUpdate'; import OrganizationScreen from 'components/OrganizationScreen/OrganizationScreen'; -import { Card, Form } from 'react-bootstrap'; +import { Button, Card, Form } from 'react-bootstrap'; import Col from 'react-bootstrap/Col'; import Row from 'react-bootstrap/Row'; import { useTranslation } from 'react-i18next'; import styles from './OrgSettings.module.css'; import OrgProfileFieldSettings from 'components/OrgProfileFieldSettings/OrgProfileFieldSettings'; +import OrgActionItemCategories from 'components/OrgActionItemCategories/OrgActionItemCategories'; + +type SettingType = 'General' | 'ActionItemCategories'; function orgSettings(): JSX.Element { const { t } = useTranslation('translation', { keyPrefix: 'orgSettings', }); + const [setting, setSetting] = useState('General'); + document.title = t('title'); const orgId = window.location.href.split('=')[1]; return ( <> - - - -
-
- {t('updateOrganization')} +
+ + + + + + + +
+ + + + {setting === 'General' && ( + + + +
+
+ {t('updateOrganization')} +
+
+ + {orgId && } + + + + + + +
+
{t('otherSettings')}
+
+ +
+ + {t('changeLanguage')} + + +
+ + + + + +
+
+ {t('manageCustomFields')} +
+
+ + {orgId && } + + + + + )} + + {setting === 'ActionItemCategories' && ( + +
+
+ {t('actionItemCategories')}
- - {orgId && } - - - - - - -
-
{t('otherSettings')}
-
- -
- - {t('changeLanguage')} - - -
- - - - - -
-
- {t('manageCustomFields')} -
+
+ {orgId && }
- - {orgId && } - - - - + + )} +
); diff --git a/src/utils/interfaces.ts b/src/utils/interfaces.ts index efcca55ca8..8ab012c281 100644 --- a/src/utils/interfaces.ts +++ b/src/utils/interfaces.ts @@ -13,6 +13,16 @@ export interface InterfaceUserType { }; } +export interface InterfaceActionItemCategoryInfo { + _id: string; + name: string; + isDisabled: boolean; +} + +export interface InterfaceActionItemCategoryList { + actionItemCategoriesByOrganization: InterfaceActionItemCategoryInfo[]; +} + export interface InterfaceOrgConnectionInfoType { _id: string; image: string | null; From 82491b05e11780a404b156ad3688e8906484155a Mon Sep 17 00:00:00 2001 From: meetul Date: Wed, 31 Jan 2024 10:06:17 +0530 Subject: [PATCH 2/6] add translations --- public/locales/en.json | 14 +++- public/locales/fr.json | 20 +++++- public/locales/hi.json | 20 +++++- public/locales/sp.json | 20 +++++- public/locales/zh.json | 20 +++++- .../Mutations/ActionItemCategoryMutations.ts | 10 --- .../OrgActionItemCategories.module.css | 1 - .../OrgActionItemCategories.tsx | 69 +++++++++++-------- src/screens/OrgSettings/OrgSettings.tsx | 4 +- 9 files changed, 131 insertions(+), 47 deletions(-) diff --git a/public/locales/en.json b/public/locales/en.json index 563d11ab81..e07dd8d664 100644 --- a/public/locales/en.json +++ b/public/locales/en.json @@ -446,6 +446,8 @@ "orgSettings": { "title": "Talawa Setting", "pageName": "Settings", + "generalSettings": "General", + "actionItemCategorySettings": "Action Item Categories", "updateOrganization": "Update Organization", "seeRequest": "See Request", "settings": "Settings", @@ -742,10 +744,18 @@ "fieldRemovalSuccess": "Field removed successfully" }, "orgActionItemCategories": { - "addActionItemCategory": "Create", + "createButton": "Create", + "editButton": "Edit", + "enableButton": "Enable", + "disableButton": "Disable", "updateActionItemCategory": "Update", "actionItemCategoryName": "Name", "actionItemCategoryDetails": "Action Item Category Details", - "enterName": "Enter Name" + "enterName": "Enter Name", + "successfulCreation": "Action Item Category created successfully", + "successfulUpdation": "Action Item Category updated successfully", + "sameNameConflict": "Please change the name to make an update", + "categoryEnabled": "Action Item Category Enabled", + "categoryDisabled": "Action Item Category Disabled" } } diff --git a/public/locales/fr.json b/public/locales/fr.json index b9862b6912..63262db200 100644 --- a/public/locales/fr.json +++ b/public/locales/fr.json @@ -441,6 +441,8 @@ "orgSettings": { "title": "Paramètre Talawa", "pageName": "Paramètres", + "generalSettings": "Général", + "actionItemCategorySettings": "Catégories d’éléments d’action", "updateYourDetails": "Mettre à jour vos informations", "updateYourPassword": "Mettez à jour votre mot de passe", "updateOrganization": "Mettre à jour l'organisation", @@ -449,7 +451,8 @@ "noData": "Pas de données", "otherSettings": "Autres paramètres", "changeLanguage": "Changer la langue", - "manageCustomFields": "Gérer les Champs Personnalisés" + "manageCustomFields": "Gérer les Champs Personnalisés", + "actionItemCategories": "Catégories d’éléments d’action" }, "deleteOrg": { "deleteOrganization": "Supprimer l'organisation", @@ -724,5 +727,20 @@ "Supprimer le champ personnalisé": "Supprimer le champ personnalisé", "fieldSuccessMessage": "Champ ajouté avec succès", "fieldRemovalSuccess": "Champ supprimé avec succès" + }, + "orgActionItemCategories": { + "createButton": "Créez", + "editButton": "Éditez", + "enableButton": "Activez", + "disableButton": "Désactivez", + "updateActionItemCategory": "Mettre à jour", + "actionItemCategoryName": "Nom", + "actionItemCategoryDetails": "Détails de la catégorie d’élément d’action", + "enterName": "Entrez le nom", + "successfulCreation": "Catégorie d’élément d’action créée avec succès", + "successfulUpdation": "La catégorie d’élément d’action a été mise à jour avec succès", + "sameNameConflict": "Veuillez modifier le nom pour effectuer une mise à jour", + "categoryEnabled": "Catégorie d’action activée", + "categoryDisabled": "Catégorie d’action désactivée" } } diff --git a/public/locales/hi.json b/public/locales/hi.json index 7db22caa28..1a7cb368d6 100644 --- a/public/locales/hi.json +++ b/public/locales/hi.json @@ -441,6 +441,8 @@ "orgSettings": { "title": "तलावा सेटिंग", "pageName": "सेटिंग्स", + "generalSettings": "सामान्य", + "actionItemCategorySettings": "कार्रवाई आइटम श्रेणियाँ", "updateYourDetails": "अपना विवरण अपडेट करें", "updateYourPassword": "अपना पासवर्ड अपडेट करें", "updateOrganization": "अद्यतन संगठन", @@ -449,7 +451,8 @@ "noData": "कोई डेटा नहीं", "otherSettings": "अन्य सेटिंग्स", "changeLanguage": "भाषा बदलें", - "manageCustomFields": "कस्टम फ़ील्ड प्रबंधन करें" + "manageCustomFields": "कस्टम फ़ील्ड प्रबंधन करें", + "actionItemCategories": "कार्रवाई आइटम श्रेणियाँ" }, "deleteOrg": { "deleteOrganization": "संगठन हटाएं", @@ -725,5 +728,20 @@ "Remove Custom Field": "कस्टम फ़ील्ड हटाएँ", "fieldSuccessMessage": "फ़ील्ड सफलतापूर्वक जोड़ा गया", "fieldRemovalSuccess": "फ़ील्ड सफलतापूर्वक हटा दिया गया" + }, + "orgActionItemCategories": { + "createButton": "बनाएं", + "editButton": "संपादित करें", + "enableButton": "सक्षम करें", + "disableButton": "अक्षम करें", + "updateActionItemCategory": "अद्यतन करें", + "actionItemCategoryName": "नाम", + "actionItemCategoryDetails": "कार्रवाई आइटम श्रेणी विवरण", + "enterName": "नाम दर्ज करें", + "successfulCreation": "कार्रवाई आइटम श्रेणी सफलतापूर्वक बनाई गई", + "successfulUpdation": "क्रिया आइटम श्रेणी सफलतापूर्वक अद्यतन की गई", + "sameNameConflict": "अपडेट करने के लिए कृपया नाम बदलें", + "categoryEnabled": "कार्रवाई आइटम श्रेणी सक्षम", + "categoryDisabled": "क्रिया आइटम श्रेणी अक्षम की गई" } } diff --git a/public/locales/sp.json b/public/locales/sp.json index 76138e8045..9f87d93bd4 100644 --- a/public/locales/sp.json +++ b/public/locales/sp.json @@ -440,6 +440,8 @@ "orgSettings": { "title": "Configuración Talawa", "pageName": "Configuración", + "generalSettings": "General", + "actionItemCategorySettings": "Categorías de elementos de acción", "updateYourDetails": "Actualiza tus datos", "updateYourPassword": "Actualice su contraseña", "updateOrganization": "Actualizar Organización", @@ -448,7 +450,8 @@ "noData": "Sin datos", "otherSettings": "Otras Configuraciones", "changeLanguage": "Cambiar Idioma", - "manageCustomFields": "Gestionar Campos Personalizados" + "manageCustomFields": "Gestionar Campos Personalizados", + "actionItemCategories": "Categorías de elementos de acción" }, "deleteOrg": { "deleteOrganization": "Eliminar organización", @@ -724,5 +727,20 @@ "Remove Custom Field": "Eliminar Campo Personalizado", "fieldSuccessMessage": "Campo añadido exitosamente", "fieldRemovalSuccess": "Campo eliminado exitosamente" + }, + "orgActionItemCategories": { + "createButton": "Crear", + "editButton": "Editar", + "enableButton": "Habilitar", + "disableButton": "Inhabilitar", + "updateActionItemCategory": "Actualizar", + "actionItemCategoryName": "Nombre", + "actionItemCategoryDetails": "Detalles de la categoría de elemento de acción", + "enterName": "Introduzca el nombre", + "successfulCreation": "Categoría de elemento de acción creada correctamente", + "successfulUpdation": "Categoría de elemento de acción actualizada correctamente", + "sameNameConflict": "Cambie el nombre para realizar una actualización", + "categoryEnabled": "Categoría de elemento de acción habilitada", + "categoryDisabled": "Categoría de elemento de acción deshabilitada" } } diff --git a/public/locales/zh.json b/public/locales/zh.json index 8c1337c0de..b4e996a8c0 100644 --- a/public/locales/zh.json +++ b/public/locales/zh.json @@ -441,6 +441,8 @@ "orgSettings": { "title": "塔拉瓦設置", "pageName": "设置", + "generalSettings": "一般", + "actionItemCategorySettings": "措施项类别", "updateYourDetails": "更新您的詳細信息", "updateYourPassword": "更新您的密碼", "updateOrganization": "更新組織", @@ -449,7 +451,8 @@ "noData": "沒有數據", "otherSettings": "其他设置", "changeLanguage": "更改语言", - "manageCustomFields": "管理自定义字段" + "manageCustomFields": "管理自定义字段", + "actionItemCategories": "措施项类别" }, "deleteOrg": { "deleteOrganization": "删除组织", @@ -725,5 +728,20 @@ "删除自定义字段": "删除自定义字段", "fieldSuccessMessage": "字段添加成功", "fieldRemovalSuccess": "字段删除成功" + }, + "orgActionItemCategories": { + "createButton": "创建", + "editButton": "编辑", + "enableButton": "启用", + "disableButton": "禁用", + "updateActionItemCategory": "更新", + "actionItemCategoryName": "名称", + "actionItemCategoryDetails": "措施项类别详细信息", + "enterName": "输入名称", + "successfulCreation": "已成功创建措施项类别", + "successfulUpdation": "措施项类别已成功更新", + "sameNameConflict": "请更改名称以进行更新", + "categoryEnabled": "已启用措施项类别", + "categoryDisabled": "措施项类别已禁用" } } diff --git a/src/GraphQl/Mutations/ActionItemCategoryMutations.ts b/src/GraphQl/Mutations/ActionItemCategoryMutations.ts index 2b3f97fce0..62abe181fd 100644 --- a/src/GraphQl/Mutations/ActionItemCategoryMutations.ts +++ b/src/GraphQl/Mutations/ActionItemCategoryMutations.ts @@ -11,11 +11,6 @@ export const CREATE_ACTION_ITEM_CATEGORY_MUTATION = gql` mutation CreateActionItemCategory($name: String!, $organizationId: ID!) { createActionItemCategory(name: $name, organizationId: $organizationId) { _id - name - organization { - _id - } - isDisabled } } `; @@ -39,11 +34,6 @@ export const UPDATE_ACTION_ITEM_CATEGORY_MUTATION = gql` data: { name: $name, isDisabled: $isDisabled } ) { _id - name - organization { - _id - } - isDisabled } } `; diff --git a/src/components/OrgActionItemCategories/OrgActionItemCategories.module.css b/src/components/OrgActionItemCategories/OrgActionItemCategories.module.css index d3aa11911c..93c2babd0f 100644 --- a/src/components/OrgActionItemCategories/OrgActionItemCategories.module.css +++ b/src/components/OrgActionItemCategories/OrgActionItemCategories.module.css @@ -18,7 +18,6 @@ } .message { - height: 420px; display: flex; justify-content: center; align-items: center; diff --git a/src/components/OrgActionItemCategories/OrgActionItemCategories.tsx b/src/components/OrgActionItemCategories/OrgActionItemCategories.tsx index ba070306f4..e6f72e5924 100644 --- a/src/components/OrgActionItemCategories/OrgActionItemCategories.tsx +++ b/src/components/OrgActionItemCategories/OrgActionItemCategories.tsx @@ -3,17 +3,17 @@ import React, { useState } from 'react'; import { Button, Form, Modal } from 'react-bootstrap'; import styles from './OrgActionItemCategories.module.css'; import { useTranslation } from 'react-i18next'; +import { toast } from 'react-toastify'; +import { WarningAmberRounded } from '@mui/icons-material'; import { useMutation, useQuery } from '@apollo/client'; import { CREATE_ACTION_ITEM_CATEGORY_MUTATION, UPDATE_ACTION_ITEM_CATEGORY_MUTATION, } from 'GraphQl/Mutations/mutations'; -import { toast } from 'react-toastify'; -import type { InterfaceActionItemCategoryList } from 'utils/interfaces'; import { ACTION_ITEM_CATEGORY_LIST } from 'GraphQl/Queries/ActionItemCategoryQueries'; +import type { InterfaceActionItemCategoryList } from 'utils/interfaces'; import Loader from 'components/Loader/Loader'; -import { WarningAmberRounded } from '@mui/icons-material'; type ModalType = 'Create' | 'Update'; @@ -27,6 +27,7 @@ const OrgActionItemCategories = (): any => { const [categoryId, setCategoryId] = useState(''); const [name, setName] = useState(''); + const [currName, setCurrName] = useState(''); const currentUrl = window.location.href.split('=')[1]; @@ -60,7 +61,7 @@ const OrgActionItemCategories = (): any => { ): Promise => { e.preventDefault(); try { - const { data } = await createActionItemCategory({ + await createActionItemCategory({ variables: { name, organizationId: currentUrl, @@ -72,8 +73,7 @@ const OrgActionItemCategories = (): any => { setAddModalIsOpen(false); - toast.success('Action Item Category created successfully'); - console.log(data); + toast.success(t('successfulCreation')); } catch (error: any) { toast.error(error.message); console.log(error); @@ -82,24 +82,28 @@ const OrgActionItemCategories = (): any => { const handleEdit = async (e: ChangeEvent): Promise => { e.preventDefault(); - try { - await updateActionItemCategory({ - variables: { - actionItemCategoryId: categoryId, - name, - }, - }); + if (name === currName) { + toast.info(t('sameNameConflict')); + } else { + try { + await updateActionItemCategory({ + variables: { + actionItemCategoryId: categoryId, + name, + }, + }); - setName(''); - setCategoryId(''); - refetch(); + setName(''); + setCategoryId(''); + refetch(); - setAddModalIsOpen(false); + setAddModalIsOpen(false); - toast.success('Action Item Category updated successfully'); - } catch (error: any) { - toast.error(error.message); - console.log(error); + toast.success(t('successfulUpdation')); + } catch (error: any) { + toast.error(error.message); + console.log(error); + } } }; @@ -118,9 +122,7 @@ const OrgActionItemCategories = (): any => { refetch(); toast.success( - `Action Item Category ${ - disabledStatus === true ? 'Enabled' : 'Disabled' - }` + disabledStatus ? t('categoryEnabled') : t('categoryDisabled') ); } catch (error: any) { toast.error(error.message); @@ -134,6 +136,7 @@ const OrgActionItemCategories = (): any => { }; const showUpdateModal = (name: string, id: string): void => { + setCurrName(name); setName(name); setCategoryId(id); setModalType('Update'); @@ -173,7 +176,7 @@ const OrgActionItemCategories = (): any => { data-testid="saveChangesBtn" > - {t('addActionItemCategory')} + {t('createButton')}
@@ -181,7 +184,15 @@ const OrgActionItemCategories = (): any => { return (
-
{category.name}
+
+ {category.name} +
diff --git a/src/screens/OrgSettings/OrgSettings.tsx b/src/screens/OrgSettings/OrgSettings.tsx index d159b645e2..b82fbf425f 100644 --- a/src/screens/OrgSettings/OrgSettings.tsx +++ b/src/screens/OrgSettings/OrgSettings.tsx @@ -38,7 +38,7 @@ function orgSettings(): JSX.Element { } onClick={() => setSetting('General')} > - General + {t('generalSettings')} From f956b7b0b83be03eabf61b6de3498b7aa286a0e7 Mon Sep 17 00:00:00 2001 From: meetul Date: Wed, 31 Jan 2024 14:08:09 +0530 Subject: [PATCH 3/6] add tests --- .../OrgActionItemCategories.test.tsx | 340 ++++++++++++++++++ .../OrgActionItemCategories.tsx | 12 +- .../OrgActionItemCategoryMocks.ts | 174 +++++++++ src/screens/OrgSettings/OrgSettings.test.tsx | 35 +- src/screens/OrgSettings/OrgSettings.tsx | 14 +- 5 files changed, 562 insertions(+), 13 deletions(-) create mode 100644 src/components/OrgActionItemCategories/OrgActionItemCategories.test.tsx create mode 100644 src/components/OrgActionItemCategories/OrgActionItemCategoryMocks.ts diff --git a/src/components/OrgActionItemCategories/OrgActionItemCategories.test.tsx b/src/components/OrgActionItemCategories/OrgActionItemCategories.test.tsx new file mode 100644 index 0000000000..99348ad29f --- /dev/null +++ b/src/components/OrgActionItemCategories/OrgActionItemCategories.test.tsx @@ -0,0 +1,340 @@ +import React from 'react'; +import { render, screen, fireEvent, waitFor } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import 'jest-localstorage-mock'; +import { MockedProvider } from '@apollo/client/testing'; +import 'jest-location-mock'; +import { I18nextProvider } from 'react-i18next'; +import { Provider } from 'react-redux'; +import { BrowserRouter } from 'react-router-dom'; +import i18nForTest from 'utils/i18nForTest'; +import { toast } from 'react-toastify'; + +import { store } from 'state/store'; +import { StaticMockLink } from 'utils/StaticMockLink'; + +import OrgActionItemCategories from './OrgActionItemCategories'; +import { + MOCKS, + MOCKS_ERROR_QUERY, + MOCKS_ERROR_MUTATIONS, +} from './OrgActionItemCategoryMocks'; + +jest.mock('react-toastify', () => ({ + toast: { + success: jest.fn(), + error: jest.fn(), + }, +})); + +const link = new StaticMockLink(MOCKS, true); +const link2 = new StaticMockLink(MOCKS_ERROR_QUERY, true); +const link3 = new StaticMockLink(MOCKS_ERROR_MUTATIONS, true); + +const translations = JSON.parse( + JSON.stringify( + i18nForTest.getDataByLanguage('en')?.translation.orgActionItemCategories + ) +); + +describe('Testing Action Item Categories Component', () => { + test('Component loads correctly', async () => { + window.location.assign('/orgsetting/id=123'); + localStorage.setItem('UserType', 'SUPERADMIN'); + const { getByText } = render( + + + + + {} + + + + + ); + + await waitFor(() => { + expect(getByText(translations.createButton)).toBeInTheDocument(); + }); + }); + + test('render error component on unsuccessful query', async () => { + window.location.assign('/orgsetting/id=123'); + localStorage.setItem('UserType', 'SUPERADMIN'); + const { queryByText } = render( + + + + + {} + + + + + ); + + await waitFor(() => { + expect(queryByText(translations.createButton)).not.toBeInTheDocument(); + }); + }); + + test('opens and closes create and update modals on button clicks', async () => { + window.location.assign('/orgsetting/id=123'); + localStorage.setItem('UserType', 'SUPERADMIN'); + render( + + + + + {} + + + + + ); + + await waitFor(() => { + userEvent.click(screen.getByTestId('actionItemCategoryModalOpenBtn')); + userEvent.click(screen.getByTestId('actionItemCategoryModalCloseBtn')); + }); + + await waitFor(() => { + userEvent.click( + screen.getAllByTestId('actionItemCategoryUpdateModalOpenBtn')[0] + ); + userEvent.click(screen.getByTestId('actionItemCategoryModalCloseBtn')); + }); + }); + + test('create a new action item category', async () => { + window.location.assign('/orgsetting/id=123'); + localStorage.setItem('UserType', 'SUPERADMIN'); + render( + + + + + {} + + + + + ); + + await waitFor(() => { + userEvent.click(screen.getByTestId('actionItemCategoryModalOpenBtn')); + userEvent.type( + screen.getByPlaceholderText(translations.enterName), + 'ActionItemCategory 4' + ); + + userEvent.click(screen.getByTestId('formSubmitButton')); + }); + + await waitFor(() => { + expect(toast.success).toBeCalledWith(translations.successfulCreation); + }); + }); + + test('toast error on unsuccessful creation', async () => { + window.location.assign('/orgsetting/id=123'); + localStorage.setItem('UserType', 'SUPERADMIN'); + render( + + + + + {} + + + + + ); + + await waitFor(() => { + userEvent.click(screen.getByTestId('actionItemCategoryModalOpenBtn')); + userEvent.type( + screen.getByPlaceholderText(translations.enterName), + 'ActionItemCategory 4' + ); + + userEvent.click(screen.getByTestId('formSubmitButton')); + }); + + await waitFor(() => { + expect(toast.error).toHaveBeenCalled(); + }); + }); + + test('update an action item category', async () => { + window.location.assign('/orgsetting/id=123'); + localStorage.setItem('UserType', 'SUPERADMIN'); + render( + + + + + {} + + + + + ); + + await waitFor(() => { + userEvent.click( + screen.getAllByTestId('actionItemCategoryUpdateModalOpenBtn')[0] + ); + + const name = screen.getByPlaceholderText(translations.enterName); + fireEvent.change(name, { target: { value: '' } }); + + userEvent.type( + screen.getByPlaceholderText(translations.enterName), + 'ActionItemCategory 1 updated' + ); + + userEvent.click(screen.getByTestId('formSubmitButton')); + }); + + await waitFor(() => { + expect(toast.success).toBeCalledWith(translations.successfulUpdation); + }); + }); + + test('toast error on unsuccessful updation', async () => { + window.location.assign('/orgsetting/id=123'); + localStorage.setItem('UserType', 'SUPERADMIN'); + render( + + + + + {} + + + + + ); + + await waitFor(() => { + userEvent.click( + screen.getAllByTestId('actionItemCategoryUpdateModalOpenBtn')[0] + ); + + const name = screen.getByPlaceholderText(translations.enterName); + fireEvent.change(name, { target: { value: '' } }); + + userEvent.type( + screen.getByPlaceholderText(translations.enterName), + 'ActionItemCategory 1 updated' + ); + + userEvent.click(screen.getByTestId('formSubmitButton')); + }); + + await waitFor(() => { + expect(toast.error).toHaveBeenCalled(); + }); + }); + + test('toast error on providing the same name on updation', async () => { + window.location.assign('/orgsetting/id=123'); + localStorage.setItem('UserType', 'SUPERADMIN'); + render( + + + + + {} + + + + + ); + + await waitFor(() => { + userEvent.click( + screen.getAllByTestId('actionItemCategoryUpdateModalOpenBtn')[0] + ); + + const name = screen.getByPlaceholderText(translations.enterName); + fireEvent.change(name, { target: { value: '' } }); + + userEvent.type( + screen.getByPlaceholderText(translations.enterName), + 'ActionItemCategory 1' + ); + + userEvent.click(screen.getByTestId('formSubmitButton')); + }); + + await waitFor(() => { + expect(toast.error).toBeCalledWith(translations.sameNameConflict); + }); + }); + + test('toggle the disablity status of an action item category', async () => { + window.location.assign('/orgsetting/id=123'); + localStorage.setItem('UserType', 'SUPERADMIN'); + render( + + + + + {} + + + + + ); + + await waitFor(() => { + userEvent.click(screen.getAllByTestId('disabilityStatusButton')[0]); + }); + + await waitFor(() => { + expect(toast.success).toBeCalledWith(translations.categoryDisabled); + }); + + await waitFor(() => { + userEvent.click(screen.getAllByTestId('disabilityStatusButton')[1]); + }); + + await waitFor(() => { + expect(toast.success).toBeCalledWith(translations.categoryEnabled); + }); + }); + + test('toast error on unsuccessful toggling of the disablity status', async () => { + window.location.assign('/orgsetting/id=123'); + localStorage.setItem('UserType', 'SUPERADMIN'); + render( + + + + + {} + + + + + ); + + await waitFor(() => { + userEvent.click(screen.getAllByTestId('disabilityStatusButton')[0]); + }); + + await waitFor(() => { + expect(toast.error).toHaveBeenCalled(); + }); + + await waitFor(() => { + userEvent.click(screen.getAllByTestId('disabilityStatusButton')[1]); + }); + + await waitFor(() => { + expect(toast.error).toHaveBeenCalled(); + }); + }); +}); diff --git a/src/components/OrgActionItemCategories/OrgActionItemCategories.tsx b/src/components/OrgActionItemCategories/OrgActionItemCategories.tsx index e6f72e5924..72ca3d546f 100644 --- a/src/components/OrgActionItemCategories/OrgActionItemCategories.tsx +++ b/src/components/OrgActionItemCategories/OrgActionItemCategories.tsx @@ -83,7 +83,7 @@ const OrgActionItemCategories = (): any => { const handleEdit = async (e: ChangeEvent): Promise => { e.preventDefault(); if (name === currName) { - toast.info(t('sameNameConflict')); + toast.error(t('sameNameConflict')); } else { try { await updateActionItemCategory({ @@ -173,7 +173,7 @@ const OrgActionItemCategories = (): any => { value="savechanges" onClick={showCreateModal} className={styles.addButton} - data-testid="saveChangesBtn" + data-testid="actionItemCategoryModalOpenBtn" > {t('createButton')} @@ -199,6 +199,7 @@ const OrgActionItemCategories = (): any => { size="sm" variant="secondary" className="me-2" + data-testid="actionItemCategoryUpdateModalOpenBtn" > {t('editButton')} @@ -208,6 +209,7 @@ const OrgActionItemCategories = (): any => { } size="sm" variant={category.isDisabled ? 'outline-success' : 'danger'} + data-testid="disabilityStatusButton" > {category.isDisabled ? t('enableButton') @@ -236,7 +238,7 @@ const OrgActionItemCategories = (): any => { @@ -266,10 +268,10 @@ const OrgActionItemCategories = (): any => { type="submit" className={styles.greenregbtn} value="creatActionItemCategory" - data-testid="creatActionItemCategoryBtn" + data-testid="formSubmitButton" > {modalType === 'Create' - ? t('addActionItemCategory') + ? t('createButton') : t('updateActionItemCategory')} diff --git a/src/components/OrgActionItemCategories/OrgActionItemCategoryMocks.ts b/src/components/OrgActionItemCategories/OrgActionItemCategoryMocks.ts new file mode 100644 index 0000000000..b03e53c5f5 --- /dev/null +++ b/src/components/OrgActionItemCategories/OrgActionItemCategoryMocks.ts @@ -0,0 +1,174 @@ +import { + CREATE_ACTION_ITEM_CATEGORY_MUTATION, + UPDATE_ACTION_ITEM_CATEGORY_MUTATION, +} from 'GraphQl/Mutations/mutations'; + +import { ACTION_ITEM_CATEGORY_LIST } from 'GraphQl/Queries/Queries'; + +export const MOCKS = [ + { + request: { + query: ACTION_ITEM_CATEGORY_LIST, + variables: { organizationId: '123' }, + }, + result: { + data: { + actionItemCategoriesByOrganization: [ + { + _id: '1', + name: 'ActionItemCategory 1', + isDisabled: false, + }, + { + _id: '2', + name: 'ActionItemCategory 2', + isDisabled: true, + }, + { + _id: '3', + name: 'ActionItemCategory 3', + isDisabled: false, + }, + ], + }, + }, + }, + { + request: { + query: CREATE_ACTION_ITEM_CATEGORY_MUTATION, + variables: { name: 'ActionItemCategory 4', organizationId: '123' }, + }, + result: { + data: { + createActionItemCategory: { + _id: '4', + }, + }, + }, + }, + { + request: { + query: UPDATE_ACTION_ITEM_CATEGORY_MUTATION, + variables: { + name: 'ActionItemCategory 1 updated', + actionItemCategoryId: '1', + }, + }, + result: { + data: { + updateActionItemCategory: { + _id: '1', + }, + }, + }, + }, + { + request: { + query: UPDATE_ACTION_ITEM_CATEGORY_MUTATION, + variables: { + isDisabled: true, + actionItemCategoryId: '1', + }, + }, + result: { + data: { + updateActionItemCategory: { + _id: '1', + }, + }, + }, + }, + { + request: { + query: UPDATE_ACTION_ITEM_CATEGORY_MUTATION, + variables: { + isDisabled: false, + actionItemCategoryId: '2', + }, + }, + result: { + data: { + updateActionItemCategory: { + _id: '2', + }, + }, + }, + }, +]; + +export const MOCKS_ERROR_QUERY = [ + { + request: { + query: ACTION_ITEM_CATEGORY_LIST, + variables: { organizationId: '123' }, + }, + error: new Error('Mock Graphql Error'), + }, +]; + +export const MOCKS_ERROR_MUTATIONS = [ + { + request: { + query: ACTION_ITEM_CATEGORY_LIST, + variables: { organizationId: '123' }, + }, + result: { + data: { + actionItemCategoriesByOrganization: [ + { + _id: '1', + name: 'ActionItemCategory 1', + isDisabled: false, + }, + { + _id: '2', + name: 'ActionItemCategory 2', + isDisabled: true, + }, + { + _id: '3', + name: 'ActionItemCategory 3', + isDisabled: false, + }, + ], + }, + }, + }, + { + request: { + query: CREATE_ACTION_ITEM_CATEGORY_MUTATION, + variables: { name: 'ActionItemCategory 4', organizationId: '123' }, + }, + error: new Error('Mock Graphql Error'), + }, + { + request: { + query: UPDATE_ACTION_ITEM_CATEGORY_MUTATION, + variables: { + name: 'ActionItemCategory 1 updated', + actionItemCategoryId: '1', + }, + }, + error: new Error('Mock Graphql Error'), + }, + { + request: { + query: UPDATE_ACTION_ITEM_CATEGORY_MUTATION, + variables: { + isDisabled: true, + actionItemCategoryId: '1', + }, + }, + error: new Error('Mock Graphql Error'), + }, + { + request: { + query: UPDATE_ACTION_ITEM_CATEGORY_MUTATION, + variables: { + isDisabled: false, + actionItemCategoryId: '2', + }, + }, + error: new Error('Mock Graphql Error'), + }, +]; diff --git a/src/screens/OrgSettings/OrgSettings.test.tsx b/src/screens/OrgSettings/OrgSettings.test.tsx index a5323f39c5..a561a15162 100644 --- a/src/screens/OrgSettings/OrgSettings.test.tsx +++ b/src/screens/OrgSettings/OrgSettings.test.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { MockedProvider } from '@apollo/react-testing'; -import { render, screen } from '@testing-library/react'; +import { fireEvent, render, screen, waitFor } from '@testing-library/react'; import 'jest-location-mock'; import { I18nextProvider } from 'react-i18next'; import { Provider } from 'react-redux'; @@ -80,6 +80,10 @@ const MOCKS = [ const link = new StaticMockLink(MOCKS, true); +const translations = JSON.parse( + JSON.stringify(i18nForTest.getDataByLanguage('en')?.translation.orgSettings) +); + afterEach(() => { localStorage.clear(); }); @@ -118,4 +122,33 @@ describe('Organisation Settings Page', () => { expect(screen.getByText(/Change Language/i)).toBeInTheDocument(); expect(window.location).toBeAt('/orgsetting/id=123'); }); + + test('should render appropriate settings based on the orgSetting state', async () => { + window.location.assign('/orgsetting/id=123'); + localStorage.setItem('UserType', 'SUPERADMIN'); + + const { getByText, queryByText } = render( + + + + + + + + + + ); + + await waitFor(() => { + fireEvent.click(getByText(translations.actionItemCategorySettings)); + expect( + queryByText(translations.actionItemCategories) + ).toBeInTheDocument(); + }); + + await waitFor(() => { + fireEvent.click(getByText(translations.generalSettings)); + expect(queryByText(translations.updateOrganization)).toBeInTheDocument(); + }); + }); }); diff --git a/src/screens/OrgSettings/OrgSettings.tsx b/src/screens/OrgSettings/OrgSettings.tsx index b82fbf425f..bd8a08c67b 100644 --- a/src/screens/OrgSettings/OrgSettings.tsx +++ b/src/screens/OrgSettings/OrgSettings.tsx @@ -18,7 +18,7 @@ function orgSettings(): JSX.Element { keyPrefix: 'orgSettings', }); - const [setting, setSetting] = useState('General'); + const [orgSetting, setOrgSetting] = useState('General'); document.title = t('title'); const orgId = window.location.href.split('=')[1]; @@ -34,20 +34,20 @@ function orgSettings(): JSX.Element { @@ -58,7 +58,7 @@ function orgSettings(): JSX.Element { - {setting === 'General' && ( + {orgSetting === 'General' && ( @@ -103,7 +103,7 @@ function orgSettings(): JSX.Element { )} - {setting === 'ActionItemCategories' && ( + {orgSetting === 'ActionItemCategories' && ( From c3fb6a64eb3c4721aba0d136978af82b9c4679d3 Mon Sep 17 00:00:00 2001 From: meetul Date: Wed, 31 Jan 2024 17:44:50 +0530 Subject: [PATCH 4/6] add dropdown for toggling settings on small screens --- public/locales/en.json | 7 +- public/locales/fr.json | 7 +- public/locales/hi.json | 7 +- public/locales/sp.json | 7 +- public/locales/zh.json | 7 +- .../OrgSettings/OrgSettings.module.css | 17 +++++ src/screens/OrgSettings/OrgSettings.test.tsx | 9 ++- src/screens/OrgSettings/OrgSettings.tsx | 76 +++++++++++++------ 8 files changed, 89 insertions(+), 48 deletions(-) diff --git a/public/locales/en.json b/public/locales/en.json index e07dd8d664..40cb6cb9ed 100644 --- a/public/locales/en.json +++ b/public/locales/en.json @@ -446,16 +446,15 @@ "orgSettings": { "title": "Talawa Setting", "pageName": "Settings", - "generalSettings": "General", - "actionItemCategorySettings": "Action Item Categories", + "general": "General", + "actionItemCategories": "Action Item Categories", "updateOrganization": "Update Organization", "seeRequest": "See Request", "settings": "Settings", "noData": "No data", "otherSettings": "Other Settings", "changeLanguage": "Change Language", - "manageCustomFields": "Manage Custom Fields", - "actionItemCategories": "Action Item Categories" + "manageCustomFields": "Manage Custom Fields" }, "deleteOrg": { "deleteOrganization": "Delete Organization", diff --git a/public/locales/fr.json b/public/locales/fr.json index 63262db200..2e33f5778c 100644 --- a/public/locales/fr.json +++ b/public/locales/fr.json @@ -441,8 +441,8 @@ "orgSettings": { "title": "Paramètre Talawa", "pageName": "Paramètres", - "generalSettings": "Général", - "actionItemCategorySettings": "Catégories d’éléments d’action", + "general": "Général", + "actionItemCategories": "Catégories d’éléments d’action", "updateYourDetails": "Mettre à jour vos informations", "updateYourPassword": "Mettez à jour votre mot de passe", "updateOrganization": "Mettre à jour l'organisation", @@ -451,8 +451,7 @@ "noData": "Pas de données", "otherSettings": "Autres paramètres", "changeLanguage": "Changer la langue", - "manageCustomFields": "Gérer les Champs Personnalisés", - "actionItemCategories": "Catégories d’éléments d’action" + "manageCustomFields": "Gérer les Champs Personnalisés" }, "deleteOrg": { "deleteOrganization": "Supprimer l'organisation", diff --git a/public/locales/hi.json b/public/locales/hi.json index 1a7cb368d6..0838da2c94 100644 --- a/public/locales/hi.json +++ b/public/locales/hi.json @@ -441,8 +441,8 @@ "orgSettings": { "title": "तलावा सेटिंग", "pageName": "सेटिंग्स", - "generalSettings": "सामान्य", - "actionItemCategorySettings": "कार्रवाई आइटम श्रेणियाँ", + "general": "सामान्य", + "actionItemCategories": "कार्रवाई आइटम श्रेणियाँ", "updateYourDetails": "अपना विवरण अपडेट करें", "updateYourPassword": "अपना पासवर्ड अपडेट करें", "updateOrganization": "अद्यतन संगठन", @@ -451,8 +451,7 @@ "noData": "कोई डेटा नहीं", "otherSettings": "अन्य सेटिंग्स", "changeLanguage": "भाषा बदलें", - "manageCustomFields": "कस्टम फ़ील्ड प्रबंधन करें", - "actionItemCategories": "कार्रवाई आइटम श्रेणियाँ" + "manageCustomFields": "कस्टम फ़ील्ड प्रबंधन करें" }, "deleteOrg": { "deleteOrganization": "संगठन हटाएं", diff --git a/public/locales/sp.json b/public/locales/sp.json index 9f87d93bd4..3878765015 100644 --- a/public/locales/sp.json +++ b/public/locales/sp.json @@ -440,8 +440,8 @@ "orgSettings": { "title": "Configuración Talawa", "pageName": "Configuración", - "generalSettings": "General", - "actionItemCategorySettings": "Categorías de elementos de acción", + "general": "General", + "actionItemCategories": "Categorías de elementos de acción", "updateYourDetails": "Actualiza tus datos", "updateYourPassword": "Actualice su contraseña", "updateOrganization": "Actualizar Organización", @@ -450,8 +450,7 @@ "noData": "Sin datos", "otherSettings": "Otras Configuraciones", "changeLanguage": "Cambiar Idioma", - "manageCustomFields": "Gestionar Campos Personalizados", - "actionItemCategories": "Categorías de elementos de acción" + "manageCustomFields": "Gestionar Campos Personalizados" }, "deleteOrg": { "deleteOrganization": "Eliminar organización", diff --git a/public/locales/zh.json b/public/locales/zh.json index b4e996a8c0..a6da896967 100644 --- a/public/locales/zh.json +++ b/public/locales/zh.json @@ -441,8 +441,8 @@ "orgSettings": { "title": "塔拉瓦設置", "pageName": "设置", - "generalSettings": "一般", - "actionItemCategorySettings": "措施项类别", + "general": "一般", + "actionItemCategories": "措施项类别", "updateYourDetails": "更新您的詳細信息", "updateYourPassword": "更新您的密碼", "updateOrganization": "更新組織", @@ -451,8 +451,7 @@ "noData": "沒有數據", "otherSettings": "其他设置", "changeLanguage": "更改语言", - "manageCustomFields": "管理自定义字段", - "actionItemCategories": "措施项类别" + "manageCustomFields": "管理自定义字段" }, "deleteOrg": { "deleteOrganization": "删除组织", diff --git a/src/screens/OrgSettings/OrgSettings.module.css b/src/screens/OrgSettings/OrgSettings.module.css index aa21f6dab2..f0a3ad7439 100644 --- a/src/screens/OrgSettings/OrgSettings.module.css +++ b/src/screens/OrgSettings/OrgSettings.module.css @@ -34,3 +34,20 @@ hr { height: 1px; background-color: var(--bs-gray-500); } + +.settingsTabs { + display: none; +} + +@media (min-width: 577px) { + .settingsDropdown { + display: none; + border: 1px solid black; + } +} + +@media (min-width: 577px) { + .settingsTabs { + display: block; + } +} diff --git a/src/screens/OrgSettings/OrgSettings.test.tsx b/src/screens/OrgSettings/OrgSettings.test.tsx index a561a15162..87c8d30adf 100644 --- a/src/screens/OrgSettings/OrgSettings.test.tsx +++ b/src/screens/OrgSettings/OrgSettings.test.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { MockedProvider } from '@apollo/react-testing'; -import { fireEvent, render, screen, waitFor } from '@testing-library/react'; +import { render, screen, waitFor } from '@testing-library/react'; import 'jest-location-mock'; import { I18nextProvider } from 'react-i18next'; import { Provider } from 'react-redux'; @@ -12,6 +12,7 @@ import { StaticMockLink } from 'utils/StaticMockLink'; import i18nForTest from 'utils/i18nForTest'; import OrgSettings from './OrgSettings'; import { ORGANIZATIONS_LIST } from 'GraphQl/Queries/Queries'; +import userEvent from '@testing-library/user-event'; const MOCKS = [ { @@ -127,7 +128,7 @@ describe('Organisation Settings Page', () => { window.location.assign('/orgsetting/id=123'); localStorage.setItem('UserType', 'SUPERADMIN'); - const { getByText, queryByText } = render( + const { queryByText } = render( @@ -140,14 +141,14 @@ describe('Organisation Settings Page', () => { ); await waitFor(() => { - fireEvent.click(getByText(translations.actionItemCategorySettings)); + userEvent.click(screen.getByTestId('actionItemCategoriesSettings')); expect( queryByText(translations.actionItemCategories) ).toBeInTheDocument(); }); await waitFor(() => { - fireEvent.click(getByText(translations.generalSettings)); + userEvent.click(screen.getByTestId('generalSettings')); expect(queryByText(translations.updateOrganization)).toBeInTheDocument(); }); }); diff --git a/src/screens/OrgSettings/OrgSettings.tsx b/src/screens/OrgSettings/OrgSettings.tsx index bd8a08c67b..8bd66a2154 100644 --- a/src/screens/OrgSettings/OrgSettings.tsx +++ b/src/screens/OrgSettings/OrgSettings.tsx @@ -3,7 +3,8 @@ import ChangeLanguageDropDown from 'components/ChangeLanguageDropdown/ChangeLang import DeleteOrg from 'components/DeleteOrg/DeleteOrg'; import OrgUpdate from 'components/OrgUpdate/OrgUpdate'; import OrganizationScreen from 'components/OrganizationScreen/OrganizationScreen'; -import { Button, Card, Form } from 'react-bootstrap'; +import { Button, Card, Dropdown, Form } from 'react-bootstrap'; +import type { DropDirection } from 'react-bootstrap/esm/DropdownContext'; import Col from 'react-bootstrap/Col'; import Row from 'react-bootstrap/Row'; import { useTranslation } from 'react-i18next'; @@ -11,18 +12,22 @@ import styles from './OrgSettings.module.css'; import OrgProfileFieldSettings from 'components/OrgProfileFieldSettings/OrgProfileFieldSettings'; import OrgActionItemCategories from 'components/OrgActionItemCategories/OrgActionItemCategories'; -type SettingType = 'General' | 'ActionItemCategories'; +type SettingType = 'general' | 'actionItemCategories'; function orgSettings(): JSX.Element { const { t } = useTranslation('translation', { keyPrefix: 'orgSettings', }); - const [orgSetting, setOrgSetting] = useState('General'); + const orgSettings: SettingType[] = ['general', 'actionItemCategories']; + + const [orgSetting, setOrgSetting] = useState('general'); document.title = t('title'); const orgId = window.location.href.split('=')[1]; + const dropDirection: DropDirection = 'down'; + return ( <> @@ -31,26 +36,49 @@ function orgSettings(): JSX.Element { > - - + ))} +
+ + - {t('actionItemCategorySettings')} - + + {t(orgSetting)} + + + {orgSettings.map((setting, index) => ( + setOrgSetting(setting) + } + className={orgSetting === setting ? 'text-secondary' : ''} + > + {t(setting)} + + ))} + + @@ -58,7 +86,7 @@ function orgSettings(): JSX.Element { - {orgSetting === 'General' && ( + {orgSetting === 'general' && ( @@ -103,7 +131,7 @@ function orgSettings(): JSX.Element { )} - {orgSetting === 'ActionItemCategories' && ( + {orgSetting === 'actionItemCategories' && ( From 6a643bfb89fe5c9263faf86c5d0c8db25a46cdd8 Mon Sep 17 00:00:00 2001 From: meetul Date: Wed, 31 Jan 2024 19:54:43 +0530 Subject: [PATCH 5/6] minor corrections --- .../OrgActionItemCategories.module.css | 2 +- .../OrgActionItemCategories.test.tsx | 10 ---------- src/screens/OrgSettings/OrgSettings.module.css | 1 - 3 files changed, 1 insertion(+), 12 deletions(-) diff --git a/src/components/OrgActionItemCategories/OrgActionItemCategories.module.css b/src/components/OrgActionItemCategories/OrgActionItemCategories.module.css index 93c2babd0f..ac9f4a5900 100644 --- a/src/components/OrgActionItemCategories/OrgActionItemCategories.module.css +++ b/src/components/OrgActionItemCategories/OrgActionItemCategories.module.css @@ -25,7 +25,7 @@ } .titlemodal { - color: #707070; + color: var(--bs-gray-600); font-weight: 600; font-size: 20px; margin-top: 1rem; diff --git a/src/components/OrgActionItemCategories/OrgActionItemCategories.test.tsx b/src/components/OrgActionItemCategories/OrgActionItemCategories.test.tsx index 99348ad29f..d1daff0aea 100644 --- a/src/components/OrgActionItemCategories/OrgActionItemCategories.test.tsx +++ b/src/components/OrgActionItemCategories/OrgActionItemCategories.test.tsx @@ -40,7 +40,6 @@ const translations = JSON.parse( describe('Testing Action Item Categories Component', () => { test('Component loads correctly', async () => { window.location.assign('/orgsetting/id=123'); - localStorage.setItem('UserType', 'SUPERADMIN'); const { getByText } = render( @@ -60,7 +59,6 @@ describe('Testing Action Item Categories Component', () => { test('render error component on unsuccessful query', async () => { window.location.assign('/orgsetting/id=123'); - localStorage.setItem('UserType', 'SUPERADMIN'); const { queryByText } = render( @@ -80,7 +78,6 @@ describe('Testing Action Item Categories Component', () => { test('opens and closes create and update modals on button clicks', async () => { window.location.assign('/orgsetting/id=123'); - localStorage.setItem('UserType', 'SUPERADMIN'); render( @@ -108,7 +105,6 @@ describe('Testing Action Item Categories Component', () => { test('create a new action item category', async () => { window.location.assign('/orgsetting/id=123'); - localStorage.setItem('UserType', 'SUPERADMIN'); render( @@ -138,7 +134,6 @@ describe('Testing Action Item Categories Component', () => { test('toast error on unsuccessful creation', async () => { window.location.assign('/orgsetting/id=123'); - localStorage.setItem('UserType', 'SUPERADMIN'); render( @@ -168,7 +163,6 @@ describe('Testing Action Item Categories Component', () => { test('update an action item category', async () => { window.location.assign('/orgsetting/id=123'); - localStorage.setItem('UserType', 'SUPERADMIN'); render( @@ -204,7 +198,6 @@ describe('Testing Action Item Categories Component', () => { test('toast error on unsuccessful updation', async () => { window.location.assign('/orgsetting/id=123'); - localStorage.setItem('UserType', 'SUPERADMIN'); render( @@ -240,7 +233,6 @@ describe('Testing Action Item Categories Component', () => { test('toast error on providing the same name on updation', async () => { window.location.assign('/orgsetting/id=123'); - localStorage.setItem('UserType', 'SUPERADMIN'); render( @@ -276,7 +268,6 @@ describe('Testing Action Item Categories Component', () => { test('toggle the disablity status of an action item category', async () => { window.location.assign('/orgsetting/id=123'); - localStorage.setItem('UserType', 'SUPERADMIN'); render( @@ -308,7 +299,6 @@ describe('Testing Action Item Categories Component', () => { test('toast error on unsuccessful toggling of the disablity status', async () => { window.location.assign('/orgsetting/id=123'); - localStorage.setItem('UserType', 'SUPERADMIN'); render( diff --git a/src/screens/OrgSettings/OrgSettings.module.css b/src/screens/OrgSettings/OrgSettings.module.css index f0a3ad7439..6910ff49ad 100644 --- a/src/screens/OrgSettings/OrgSettings.module.css +++ b/src/screens/OrgSettings/OrgSettings.module.css @@ -42,7 +42,6 @@ hr { @media (min-width: 577px) { .settingsDropdown { display: none; - border: 1px solid black; } } From a79fa35692124dd9a5041d91ebed1ddac24ea67c Mon Sep 17 00:00:00 2001 From: meetul Date: Thu, 1 Feb 2024 10:30:19 +0530 Subject: [PATCH 6/6] minor change --- .../OrgActionItemCategories/OrgActionItemCategories.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/OrgActionItemCategories/OrgActionItemCategories.tsx b/src/components/OrgActionItemCategories/OrgActionItemCategories.tsx index 72ca3d546f..5e5611b54e 100644 --- a/src/components/OrgActionItemCategories/OrgActionItemCategories.tsx +++ b/src/components/OrgActionItemCategories/OrgActionItemCategories.tsx @@ -107,7 +107,7 @@ const OrgActionItemCategories = (): any => { } }; - const handleDisableStatus = async ( + const handleStatusChange = async ( id: string, disabledStatus: boolean ): Promise => { @@ -205,7 +205,7 @@ const OrgActionItemCategories = (): any => {