=> {
+ try {
+ await removeUserTag({
+ variables: {
+ id: removeUserTagId,
+ },
+ });
+
+ orgUserTagsRefetch();
+ toggleRemoveUserTagModal();
+ toast.success(t('tagRemovalSuccess'));
+ } catch (error: unknown) {
+ /* istanbul ignore next */
+ if (error instanceof Error) {
+ toast.error(error.message);
+ console.log(error.message);
+ }
+ }
+ };
+
+ if (createUserTagLoading || orgUserTagsLoading) {
+ return ;
+ }
+
+ if (orgUserTagsError) {
+ return (
+
+
+
+
+ Error occured while loading Organization Tags Data
+
+ {orgUserTagsError.message}
+
+
+
+ );
+ }
+
+ const handleNextPage = (): void => {
+ setAfter(orgUserTagsData?.organizations[0].userTags.pageInfo.endCursor);
+ setBefore(null);
+ setFirst(5);
+ setLast(null);
+ setTagSerialNumber(tagSerialNumber + 1);
+ };
+ const handlePreviousPage = (): void => {
+ setBefore(orgUserTagsData?.organizations[0].userTags.pageInfo.startCursor);
+ setAfter(null);
+ setFirst(null);
+ setLast(5);
+ setTagSerialNumber(tagSerialNumber - 1);
+ };
+
+ const userTagsList =
+ orgUserTagsData?.organizations[0].userTags.edges.map((edge) => edge.node) ||
+ [];
+
+ const handleClick = (tagId: string): void => {
+ navigate(`/orgtags/${currentUrl}/orgtagdetails/${tagId}`);
+ };
+
+ const toggleRemoveUserTagModal = (): void => {
+ if (removeTagModalIsOpen) setRemoveUserTagId(null);
+ setRemoveTagModalIsOpen(!removeTagModalIsOpen);
+ };
+
+ const columns: GridColDef[] = [
+ {
+ field: 'id',
+ headerName: '#',
+ minWidth: 100,
+ align: 'center',
+ headerAlign: 'center',
+ headerClassName: `${styles.tableHeader}`,
+ sortable: false,
+ renderCell: (params: GridCellParams) => {
+ return {tagSerialNumber * 5 + params.row.id}
;
+ },
+ },
+ {
+ field: 'tagName',
+ headerName: 'Tag Name',
+ flex: 1,
+ minWidth: 100,
+ sortable: false,
+ headerClassName: `${styles.tableHeader}`,
+ renderCell: (params: GridCellParams) => {
+ return (
+
+ {params.row.name}
+
+
+
+ );
+ },
+ },
+ {
+ field: 'totalSubTags',
+ headerName: 'Total Sub Tags',
+ flex: 1,
+ align: 'center',
+ minWidth: 100,
+ headerAlign: 'center',
+ sortable: false,
+ headerClassName: `${styles.tableHeader}`,
+ renderCell: (params: GridCellParams) => {
+ return (
+
+ {params.row.childTags.totalCount}
+
+ );
+ },
+ },
+ {
+ field: 'totalAssignedUsers',
+ headerName: 'Total Assigned Users',
+ flex: 1,
+ align: 'center',
+ minWidth: 100,
+ headerAlign: 'center',
+ sortable: false,
+ headerClassName: `${styles.tableHeader}`,
+ renderCell: (params: GridCellParams) => {
+ return (
+
+ {params.row.usersAssignedTo.totalCount}
+
+ );
+ },
+ },
+ {
+ field: 'actions',
+ headerName: 'Actions',
+ flex: 1,
+ align: 'center',
+ minWidth: 100,
+ headerAlign: 'center',
+ sortable: false,
+ headerClassName: `${styles.tableHeader}`,
+ renderCell: (params: GridCellParams) => {
+ return (
+
+
+
+
+
+ );
+ },
+ },
+ ];
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+ {tCommon('sort')}
+
+
+
+ {tCommon('Latest')}
+
+
+ {tCommon('Oldest')}
+
+
+
+
+
+
+
+
row._id}
+ slots={{
+ noRowsOverlay: /* istanbul ignore next */ () => (
+
+ {t('noTagsFound')}
+
+ ),
+ }}
+ sx={dataGridStyle}
+ getRowClassName={() => `${styles.rowBackground}`}
+ autoHeight
+ rowHeight={65}
+ rows={userTagsList.map((fund, index) => ({
+ id: index + 1,
+ ...fund,
+ }))}
+ columns={columns}
+ isRowSelectable={() => false}
+ />
+
+
+
+
+
+ {/* Create Tag Modal */}
+
+
+ {t('tagDetails')}
+
+
+
+
+ {/* Remove User Tag Modal */}
+
+
+
+ {t('removeUserTag')}
+
+
+ {t('removeUserTagMessage')}
+
+
+
+
+
+ >
+ );
+}
+
+export default OrganizationTags;
diff --git a/src/screens/OrganizationTags/OrganizationTagsMocks.ts b/src/screens/OrganizationTags/OrganizationTagsMocks.ts
new file mode 100644
index 0000000000..3700c66c46
--- /dev/null
+++ b/src/screens/OrganizationTags/OrganizationTagsMocks.ts
@@ -0,0 +1,291 @@
+import {
+ CREATE_USER_TAG,
+ REMOVE_USER_TAG,
+} from 'GraphQl/Mutations/TagMutations';
+import { ORGANIZATION_USER_TAGS_LIST } from 'GraphQl/Queries/OrganizationQueries';
+
+export const MOCKS = [
+ {
+ request: {
+ query: ORGANIZATION_USER_TAGS_LIST,
+ variables: {
+ id: '123',
+ after: null,
+ before: null,
+ first: 5,
+ last: null,
+ },
+ },
+ result: {
+ data: {
+ organizations: [
+ {
+ userTags: {
+ edges: [
+ {
+ node: {
+ _id: '1',
+ name: 'userTag 1',
+ usersAssignedTo: {
+ totalCount: 5,
+ },
+ childTags: {
+ totalCount: 5,
+ },
+ },
+ cursor: '1',
+ },
+ {
+ node: {
+ _id: '2',
+ name: 'userTag 2',
+ usersAssignedTo: {
+ totalCount: 5,
+ },
+ childTags: {
+ totalCount: 0,
+ },
+ },
+ cursor: '2',
+ },
+ {
+ node: {
+ _id: '3',
+ name: 'userTag 3',
+ usersAssignedTo: {
+ totalCount: 0,
+ },
+ childTags: {
+ totalCount: 5,
+ },
+ },
+ cursor: '3',
+ },
+ {
+ node: {
+ _id: '4',
+ name: 'userTag 4',
+ usersAssignedTo: {
+ totalCount: 0,
+ },
+ childTags: {
+ totalCount: 0,
+ },
+ },
+ cursor: '4',
+ },
+ {
+ node: {
+ _id: '5',
+ name: 'userTag 5',
+ usersAssignedTo: {
+ totalCount: 5,
+ },
+ childTags: {
+ totalCount: 5,
+ },
+ },
+ cursor: '5',
+ },
+ ],
+ pageInfo: {
+ startCursor: '1',
+ endCursor: '5',
+ hasNextPage: true,
+ hasPreviousPage: false,
+ },
+ totalCount: 6,
+ },
+ },
+ ],
+ },
+ },
+ },
+ {
+ request: {
+ query: ORGANIZATION_USER_TAGS_LIST,
+ variables: {
+ id: '123',
+ after: '5',
+ before: null,
+ first: 5,
+ last: null,
+ },
+ },
+ result: {
+ data: {
+ organizations: [
+ {
+ userTags: {
+ edges: [
+ {
+ node: {
+ _id: '6',
+ name: 'userTag 6',
+ usersAssignedTo: {
+ totalCount: 0,
+ },
+ childTags: {
+ totalCount: 0,
+ },
+ },
+ cursor: '6',
+ },
+ ],
+ pageInfo: {
+ startCursor: '6',
+ endCursor: '6',
+ hasNextPage: false,
+ hasPreviousPage: true,
+ },
+ totalCount: 6,
+ },
+ },
+ ],
+ },
+ },
+ },
+ {
+ request: {
+ query: ORGANIZATION_USER_TAGS_LIST,
+ variables: {
+ id: '123',
+ after: null,
+ before: '6',
+ first: null,
+ last: 5,
+ },
+ },
+ result: {
+ data: {
+ organizations: [
+ {
+ userTags: {
+ edges: [
+ {
+ node: {
+ _id: '1',
+ name: 'userTag 1',
+ usersAssignedTo: {
+ totalCount: 5,
+ },
+ childTags: {
+ totalCount: 5,
+ },
+ },
+ cursor: '1',
+ },
+ {
+ node: {
+ _id: '2',
+ name: 'userTag 2',
+ usersAssignedTo: {
+ totalCount: 5,
+ },
+ childTags: {
+ totalCount: 0,
+ },
+ },
+ cursor: '2',
+ },
+ {
+ node: {
+ _id: '3',
+ name: 'userTag 3',
+ usersAssignedTo: {
+ totalCount: 0,
+ },
+ childTags: {
+ totalCount: 5,
+ },
+ },
+ cursor: '3',
+ },
+ {
+ node: {
+ _id: '4',
+ name: 'userTag 4',
+ usersAssignedTo: {
+ totalCount: 0,
+ },
+ childTags: {
+ totalCount: 0,
+ },
+ },
+ cursor: '4',
+ },
+ {
+ node: {
+ _id: '5',
+ name: 'userTag 5',
+ usersAssignedTo: {
+ totalCount: 5,
+ },
+ childTags: {
+ totalCount: 5,
+ },
+ },
+ cursor: '5',
+ },
+ ],
+ pageInfo: {
+ startCursor: '1',
+ endCursor: '5',
+ hasNextPage: true,
+ hasPreviousPage: false,
+ },
+ totalCount: 6,
+ },
+ },
+ ],
+ },
+ },
+ },
+ {
+ request: {
+ query: CREATE_USER_TAG,
+ variables: {
+ name: '7',
+ organizationId: '123',
+ },
+ },
+ result: {
+ data: {
+ createUserTag: {
+ _id: '7',
+ },
+ },
+ },
+ },
+ {
+ request: {
+ query: REMOVE_USER_TAG,
+ variables: {
+ id: '1',
+ },
+ },
+ result: {
+ data: {
+ removeUserTag: {
+ _id: '1',
+ },
+ },
+ },
+ },
+];
+
+export const MOCKS_ERROR = [
+ {
+ request: {
+ query: ORGANIZATION_USER_TAGS_LIST,
+ variables: {
+ id: '123',
+ after: null,
+ before: null,
+ first: 5,
+ last: null,
+ },
+ },
+ error: new Error('Mock Graphql Error'),
+ },
+];
diff --git a/src/state/reducers/routesReducer.test.ts b/src/state/reducers/routesReducer.test.ts
index 84427ee4d0..8d8de8a5dd 100644
--- a/src/state/reducers/routesReducer.test.ts
+++ b/src/state/reducers/routesReducer.test.ts
@@ -13,6 +13,7 @@ describe('Testing Routes reducer', () => {
{ name: 'My Organizations', url: '/orglist' },
{ name: 'Dashboard', url: '/orgdash/undefined' },
{ name: 'People', url: '/orgpeople/undefined' },
+ { name: 'Tags', url: '/orgtags/undefined' },
{ name: 'Events', url: '/orgevents/undefined' },
{ name: 'Venues', url: '/orgvenues/undefined' },
{ name: 'Action Items', url: '/orgactionitems/undefined' },
@@ -49,6 +50,11 @@ describe('Testing Routes reducer', () => {
comp_id: 'orgpeople',
component: 'OrganizationPeople',
},
+ {
+ name: 'Tags',
+ comp_id: 'orgtags',
+ component: 'OrganizationTags',
+ },
{
name: 'Events',
comp_id: 'orgevents',
@@ -116,6 +122,7 @@ describe('Testing Routes reducer', () => {
{ name: 'My Organizations', url: '/orglist' },
{ name: 'Dashboard', url: '/orgdash/orgId' },
{ name: 'People', url: '/orgpeople/orgId' },
+ { name: 'Tags', url: '/orgtags/orgId' },
{ name: 'Events', url: '/orgevents/orgId' },
{ name: 'Venues', url: '/orgvenues/orgId' },
{ name: 'Action Items', url: '/orgactionitems/orgId' },
@@ -149,6 +156,11 @@ describe('Testing Routes reducer', () => {
comp_id: 'orgpeople',
component: 'OrganizationPeople',
},
+ {
+ name: 'Tags',
+ comp_id: 'orgtags',
+ component: 'OrganizationTags',
+ },
{
name: 'Events',
comp_id: 'orgevents',
@@ -212,6 +224,7 @@ describe('Testing Routes reducer', () => {
{ name: 'My Organizations', url: '/orglist' },
{ name: 'Dashboard', url: '/orgdash/undefined' },
{ name: 'People', url: '/orgpeople/undefined' },
+ { name: 'Tags', url: '/orgtags/undefined' },
{ name: 'Events', url: '/orgevents/undefined' },
{ name: 'Venues', url: '/orgvenues/undefined' },
{ name: 'Action Items', url: '/orgactionitems/undefined' },
@@ -251,6 +264,11 @@ describe('Testing Routes reducer', () => {
comp_id: 'orgpeople',
component: 'OrganizationPeople',
},
+ {
+ name: 'Tags',
+ comp_id: 'orgtags',
+ component: 'OrganizationTags',
+ },
{
name: 'Events',
comp_id: 'orgevents',
diff --git a/src/state/reducers/routesReducer.ts b/src/state/reducers/routesReducer.ts
index bcda9f02d8..878fe73099 100644
--- a/src/state/reducers/routesReducer.ts
+++ b/src/state/reducers/routesReducer.ts
@@ -69,6 +69,7 @@ const components: ComponentType[] = [
{ name: 'My Organizations', comp_id: 'orglist', component: 'OrgList' },
{ name: 'Dashboard', comp_id: 'orgdash', component: 'OrganizationDashboard' },
{ name: 'People', comp_id: 'orgpeople', component: 'OrganizationPeople' },
+ { name: 'Tags', comp_id: 'orgtags', component: 'OrganizationTags' },
{ name: 'Events', comp_id: 'orgevents', component: 'OrganizationEvents' },
{ name: 'Venues', comp_id: 'orgvenues', component: 'OrganizationVenues' },
{
diff --git a/src/utils/interfaces.ts b/src/utils/interfaces.ts
index f837054b87..834bd7742d 100644
--- a/src/utils/interfaces.ts
+++ b/src/utils/interfaces.ts
@@ -204,6 +204,31 @@ export interface InterfaceQueryOrganizationPostListItem {
};
}
+export interface InterfaceQueryOrganizationUserTags {
+ userTags: {
+ edges: {
+ node: {
+ _id: string;
+ name: string;
+ usersAssignedTo: {
+ totalCount: number;
+ };
+ childTags: {
+ totalCount: number;
+ };
+ };
+ cursor: string;
+ }[];
+ pageInfo: {
+ startCursor: string;
+ endCursor: string;
+ hasNextPage: boolean;
+ hasPreviousPage: boolean;
+ };
+ totalCount: number;
+ };
+}
+
export interface InterfaceQueryOrganizationAdvertisementListItem {
advertisements: {
edges: {