diff --git a/src/components/TreeSelectOption/treeSelectOption.settings.js b/src/components/TreeSelectOption/treeSelectOption.settings.js index 8f722ef10..ef7c47161 100644 --- a/src/components/TreeSelectOption/treeSelectOption.settings.js +++ b/src/components/TreeSelectOption/treeSelectOption.settings.js @@ -88,14 +88,16 @@ export const treeEntitiesOption = ( isFieldsDirty[langKey] = false; }); let options = data?.map((entity) => { + let mainImageData = entity?.image; + return { label: ( + entity?.logo?.thumbnail?.uri || mainImageData?.original?.uri ? ( + ) : ( ) diff --git a/src/constants/fonts.js b/src/constants/widgetConstants.js similarity index 53% rename from src/constants/fonts.js rename to src/constants/widgetConstants.js index 3ff15c48e..fc1dfdcf5 100644 --- a/src/constants/fonts.js +++ b/src/constants/widgetConstants.js @@ -1,3 +1,5 @@ +import { Translation } from 'react-i18next'; + export const widgetFontCollection = [ { label: 'Roboto', value: 'Roboto' }, { label: 'Open Sans', value: 'Open Sans' }, @@ -9,3 +11,15 @@ export const widgetFontCollection = [ { label: 'Raleway', value: 'Raleway' }, { label: 'Helvetica', value: 'Helvetica' }, ]; + +export const redirectionModes = [ + { + label: {(t) => t('dashboard.settings.widgetSettings.redirectionModeNone')}, + value: 'NONE', + }, + { + label: {(t) => t('dashboard.settings.widgetSettings.redirectionModeExternal')}, + value: 'EXTERNAL', + disabled: true, + }, +]; diff --git a/src/layout/Main/Main.jsx b/src/layout/Main/Main.jsx index bac838ec1..38f3d9f92 100644 --- a/src/layout/Main/Main.jsx +++ b/src/layout/Main/Main.jsx @@ -25,7 +25,8 @@ function Main(props) { {children?.length > 2 && children[2]} {children?.length > 3 && children[3]} - + + {children?.length > 4 && children[4]} diff --git a/src/locales/en/translationEn.json b/src/locales/en/translationEn.json index 69a64415c..da361ef0d 100644 --- a/src/locales/en/translationEn.json +++ b/src/locales/en/translationEn.json @@ -468,6 +468,13 @@ "search": { "placeholder": "Search Organizations" }, + "filter": { + "users": { + "label": "Users", + "placeholderSearch": "Search name", + "myEvents": "My Organizations" + } + }, "deleteOrganization": { "title": "Confirm Delete", "description": "Are you sure you want to permanently delete this organization? The organization will be deleted everywhere it is used.", @@ -549,6 +556,13 @@ "search": { "placeholder": "Search Places" }, + "filter": { + "users": { + "label": "Users", + "placeholderSearch": "Search name", + "myEvents": "My Places" + } + }, "deletePlace": { "title": "Confirm Delete", "description": "Are you sure you want to permanently delete this place? The organization will be deleted everywhere it is used.", @@ -703,6 +717,13 @@ "search": { "placeholder": "Search People" }, + "filter": { + "users": { + "label": "Users", + "placeholderSearch": "Search name", + "myEvents": "My People" + } + }, "deletePerson": { "title": "Confirm Delete", "description": "Are you sure you want to permanently delete this person? The person will be deleted everywhere it is used.", @@ -935,6 +956,9 @@ "height": "Height", "width": "Max width", "font": "Font selection", + "redirectionMode": "Redirection Mode", + "redirectionModeNone": "None", + "redirectionModeExternal": "External", "language": "Language selection", "eventType": "Event type", "region": "Region", diff --git a/src/locales/fr/transalationFr.json b/src/locales/fr/transalationFr.json index 263d3c987..7d642f516 100644 --- a/src/locales/fr/transalationFr.json +++ b/src/locales/fr/transalationFr.json @@ -468,6 +468,13 @@ "search": { "placeholder": "Recherche d'organisations" }, + "filter": { + "users": { + "label": "Utilisateurs", + "placeholderSearch": "Rechercher un nom", + "myEvents": "Mes Organisations" + } + }, "deleteOrganization": { "title": "Confirmer la suppression", "description": "Êtes-vous sûr de vouloir supprimer définitivement cette fiche d'organization ? Elle sera supprimée dans tout CMS Footlight.", @@ -548,6 +555,13 @@ "search": { "placeholder": "Recherche de lieux" }, + "filter": { + "users": { + "label": "Utilisateurs", + "placeholderSearch": "Rechercher un nom", + "myEvents": "Mes Lieux" + } + }, "deletePlace": { "title": "Confirmer la suppression", "description": "Êtes-vous sûr de vouloir supprimer définitivement cette fiche de lieu ? Elle sera supprimée dans tout CMS Footlight.", @@ -703,6 +717,13 @@ "search": { "placeholder": "Rechercher une personne" }, + "filter": { + "users": { + "label": "Utilisateurs", + "placeholderSearch": "Rechercher un nom", + "myEvents": "Mes Personnes" + } + }, "deletePerson": { "title": "Confirmer la suppression", "description": "Êtes-vous sûr de vouloir supprimer définitivement la fiche de cette personne ? Elle sera supprimée dans tout CMS Footlight.", diff --git a/src/pages/Dashboard/Organizations/Organizations.jsx b/src/pages/Dashboard/Organizations/Organizations.jsx index e73ce81e2..8aba604f0 100644 --- a/src/pages/Dashboard/Organizations/Organizations.jsx +++ b/src/pages/Dashboard/Organizations/Organizations.jsx @@ -1,6 +1,6 @@ -import React, { useEffect, useRef, useState } from 'react'; +import React, { useCallback, useEffect, useRef, useState } from 'react'; import './organizations.css'; -import { List, Grid, Row, Col, Space, Button, Popover, Tree, Badge } from 'antd'; +import { List, Grid, Row, Col, Space, Button, Popover, Tree, Badge, Checkbox, Divider } from 'antd'; import Icon, { DeleteOutlined, CloseCircleOutlined } from '@ant-design/icons'; import { useTranslation } from 'react-i18next'; import FeatureFlag from '../../../layout/FeatureFlag/FeatureFlag'; @@ -27,7 +27,7 @@ import { useSelector } from 'react-redux'; import { getUserDetails } from '../../../redux/reducer/userSlice'; import { artsDataLinkChecker } from '../../../utils/artsDataLinkChecker'; import { ReactComponent as OrganizationLogo } from '../../../assets/icons/organization-light.svg'; -import { sortByOptionsOrgsPlacesPerson, sortOrder } from '../../../constants/sortByOptions'; +import { sortByOptionsOrgsPlacesPerson, sortByOptionsUsers, sortOrder } from '../../../constants/sortByOptions'; import i18n from 'i18next'; import { Confirm } from '../../../components/Modal/Confirm/Confirm'; import { useGetAllTaxonomyQuery } from '../../../services/taxonomy'; @@ -36,6 +36,11 @@ import { treeTaxonomyOptions } from '../../../components/TreeSelectOption/treeSe import { useLazyGetEntityDependencyCountQuery } from '../../../services/entities'; import { adminCheckHandler } from '../../../utils/adminCheckHandler'; import { getCurrentCalendarDetailsFromUserDetails } from '../../../utils/getCurrentCalendarDetailsFromUserDetails'; +import { useLazyGetAllUsersQuery } from '../../../services/users'; +import { useDebounce } from '../../../hooks/debounce'; +import { SEARCH_DELAY } from '../../../constants/search'; +import { removeObjectArrayDuplicates } from '../../../utils/removeObjectArrayDuplicates'; +import SearchableCheckbox from '../../../components/Filter/SearchableCheckbox'; const { useBreakpoint } = Grid; @@ -59,6 +64,8 @@ function Organizations() { setContentBackgroundColor('#fff'); let taxonomyClassQuery = new URLSearchParams(); + let initialSelectedUsers = {}; + taxonomyClassQuery.append('taxonomy-class', taxonomyClass.ORGANIZATION); const { currentData: allTaxonomyData } = useGetAllTaxonomyQuery({ calendarId, @@ -73,9 +80,22 @@ function Organizations() { { currentData: allOrganizationData, isFetching: allOrganizationFetching, isSuccess: allOrganizationSuccess }, ] = useLazyGetAllOrganizationQuery(); + const [getAllUsers, { isFetching: allUsersLoading, isSuccess: allUsersSuccess }] = useLazyGetAllUsersQuery(); const [getDependencyDetails, { isFetching: dependencyDetailsFetching }] = useLazyGetEntityDependencyCountQuery(); const [deleteOrganization] = useDeleteOrganizationMutation(); + const [selectedUsers, setSelectedUsers] = useState(initialSelectedUsers ?? {}); + const [selectedUsersData, setSelectedUsersData] = useState([]); + const [searchKey, setSearchKey] = useState(); + const [usersData, setUsersData] = useState([]); + const [userFilter, setUserFilter] = useState( + searchParams.get('users') + ? decodeURIComponent(searchParams.get('users'))?.split(',') + : sessionStorage.getItem('organizationUsers') + ? decodeURIComponent(sessionStorage.getItem('users'))?.split(',') + : [], + ); + const [isUserOpen, setIsUserOpen] = useState(false); const [pageNumber, setPageNumber] = useState( searchParams.get('page') ? searchParams.get('page') : sessionStorage.getItem('organizationPage') ?? 1, ); @@ -173,8 +193,17 @@ function Organizations() { order: sortOrder?.ASC, }); setTaxonomyFilter({}); + setUserFilter([]); setPageNumber(1); + + let usersToClear = selectedUsers; + Object.keys(usersToClear)?.forEach(function (key) { + usersToClear[key] = false; + }); + setSelectedUsers(Object.assign({}, usersToClear)); + sessionStorage.removeItem('organizationPage'); + sessionStorage.removeItem('organizationUsers'); sessionStorage.removeItem('organizationSearchQuery'); sessionStorage.removeItem('organizationOrder'); sessionStorage.removeItem('organizationTaxonomyFilter'); @@ -182,9 +211,60 @@ function Organizations() { sessionStorage.removeItem('organizationSortBy'); }; + const onCheckboxChange = (e) => { + let currentUsersFilter = selectedUsers ?? {}; + Object.assign(currentUsersFilter, { [e?.target?.value]: e?.target?.checked }); + setSelectedUsers(currentUsersFilter); + let filteredUsers = Object.keys(currentUsersFilter).filter(function (key) { + return currentUsersFilter[key]; + }); + setSelectedUsersData( + usersData?.filter((userData) => { + if (filteredUsers?.includes(userData?._id)) return true; + else return false; + }), + ); + + setUserFilter(filteredUsers); + setPageNumber(1); + }; + + const userSearch = (userSearchKey, selectedData) => { + getAllUsers({ + page: pageNumber, + limit: 30, + query: userSearchKey, + filters: `sort=asc(${sortByOptionsUsers[1].key})`, + sessionId: timestampRef, + calendarId: calendarId, + includeCalenderFilter: true, + }) + .then((response) => { + let currentUserList = selectedData?.concat(response?.data?.data); + currentUserList = [{ _id: user?.id, ...user }]?.concat(currentUserList); + let uniqueArray = removeObjectArrayDuplicates(currentUserList, '_id'); + setUsersData(uniqueArray); + }) + .catch((error) => console.log(error)); + }; + + const debounceUsersSearch = useCallback(useDebounce(userSearch, SEARCH_DELAY), []); + + useEffect(() => { + let uniqueArray = removeObjectArrayDuplicates( + [{ _id: user?.id, ...user }]?.concat(selectedUsersData)?.concat(usersData), + '_id', + ); + setUsersData(uniqueArray); + }, [isUserOpen]); + useEffect(() => { let sortQuery = new URLSearchParams(); let query = new URLSearchParams(); + let usersQuery; + + userFilter?.forEach((user) => query.append('created-by', user)); + if (userFilter?.length > 0) usersQuery = encodeURIComponent(userFilter); sortQuery.append( 'sort', @@ -211,6 +291,7 @@ function Organizations() { let params = { page: pageNumber, order: filter?.order, + ...(usersQuery && { users: usersQuery }), sortBy: filter?.sort, ...(Object.keys(taxonomyFilter)?.length > 0 && { taxonomyFilter: JSON.stringify(taxonomyFilter) }), }; @@ -220,7 +301,9 @@ function Organizations() { query: organizationSearchQuery, }; setSearchParams(createSearchParams(params)); + sessionStorage.setItem('organizationPage', pageNumber); + usersQuery && sessionStorage.setItem('organizationUsers', usersQuery); sessionStorage.setItem('organizationSearchQuery', organizationSearchQuery); sessionStorage.setItem('organizationOrder', filter?.order); sessionStorage.setItem('organizationSortBy', filter?.sort); @@ -230,7 +313,7 @@ function Organizations() { if (Object.keys(standardTaxonomyFilter)?.length > 0) sessionStorage.setItem('standardOrganizationTaxonomyFilter', JSON.stringify(standardTaxonomyFilter)); else sessionStorage.removeItem('standardOrganizationTaxonomyFilter'); - }, [pageNumber, organizationSearchQuery, filter, taxonomyFilter, standardTaxonomyFilter]); + }, [pageNumber, organizationSearchQuery, userFilter, filter, taxonomyFilter, standardTaxonomyFilter]); return ( <> {dependencyDetailsFetching && ( @@ -402,9 +485,102 @@ function Organizations() { ); })} + + + { + if (!allUsersSuccess && (usersData.length === 0 || usersData.length === 1)) { + let allUsersWithSelected = []; + if (user?.id !== '' && user?.id) { + getAllUsers({ + page: 1, + limit: 30, + query: '', + filters: `sort=asc(${sortByOptionsUsers[1].key})`, + sessionId: timestampRef, + calendarId: calendarId, + includeCalenderFilter: true, + }) + .unwrap() + .then((response) => { + allUsersWithSelected = [{ _id: user?.id, ...user }]?.concat(response?.data); + allUsersWithSelected = removeObjectArrayDuplicates(allUsersWithSelected, '_id'); + if (userFilter?.length > 0) { + let userIds = new URLSearchParams(); + userFilter?.forEach((userId) => userIds.append('ids', userId)); + getAllUsers({ + page: 1, + limit: 30, + query: '', + filters: `sort=asc(${sortByOptionsUsers[1].key})&${userIds}`, + sessionId: timestampRef, + calendarId: calendarId, + includeCalenderFilter: true, + }) + .unwrap() + .then((response) => { + setSelectedUsersData(response?.data); + allUsersWithSelected = response?.data?.concat(allUsersWithSelected); + allUsersWithSelected = [{ _id: user?.id, ...user }]?.concat(allUsersWithSelected); + let uniqueArray = removeObjectArrayDuplicates(allUsersWithSelected, '_id'); + setUsersData(uniqueArray); + }) + .catch((error) => console.log(error)); + } else setUsersData(allUsersWithSelected); + }) + .catch((error) => console.log(error)); + } + } + }} + searchKey={searchKey} + data={usersData?.map((userDetail) => { + return { + key: userDetail?._id, + label: ( + <> + onCheckboxChange(e)}> + {user?.id == userDetail?._id + ? t('dashboard.organization.filter.users.myEvents') + : userDetail?.userName} + + {user?.id == userDetail?._id && } + + ), + filtervalue: userDetail?.userName, + }; + })} + value={userFilter}> + + + + {(filter?.order === sortOrder?.DESC || Object.keys(taxonomyFilter)?.length > 0 || + userFilter.length > 0 || filter?.sort != sortByOptionsOrgsPlacesPerson[0]?.key) && ( + + {(filter?.order === sortOrder?.DESC || Object.keys(taxonomyFilter)?.length > 0 || + userFilter.length > 0 || Object.keys(standardTaxonomyFilter)?.length > 0 || filter?.sort != sortByOptionsOrgsPlacesPerson[0]?.key) && ( + + {(filter?.order === sortOrder?.DESC || Object.keys(taxonomyFilter)?.length > 0 || + userFilter.length > 0 || Object.keys(standardTaxonomyFilter)?.length > 0 || filter?.sort != sortByOptionsOrgsPlacesPerson[0]?.key) && (