Merge pull request #992 from culturecreates/develop

Develop
culturecreates · Feb 22, 2024 · a74cdfa · a74cdfa
2 parents b6106f7 + cca75b7
commit a74cdfa
Show file tree

Hide file tree

Showing 32 changed files with 381 additions and 125 deletions.
diff --git a/src/components/Button/AddEvent/addEvent.css b/src/components/Button/AddEvent/addEvent.css
@@ -12,3 +12,10 @@
   background-color: #0f0e98;
   border-color: #0f0e98;
 }
+
+.add-event-button[disabled],
+.add-event-button[disabled]:hover {
+  background-color: #9196a3;
+  border-color: #9196a3;
+  color: #ffffff;
+}
diff --git a/src/components/Dropdown/EventStatus/EventStatus.jsx b/src/components/Dropdown/EventStatus/EventStatus.jsx
@@ -11,20 +11,21 @@ import {
   useFeatureEventsMutation,
   useUpdateEventStateMutation,
 } from '../../../services/events';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate, useOutletContext, useParams } from 'react-router-dom';
 import { PathName } from '../../../constants/pathName';
 const { confirm } = Modal;
 function EventStatusOptions({ children, publishState, creator, eventId, isFeatured, eventData, ...rest }) {
   const { t } = useTranslation();
   const { calendarId } = useParams();
   const navigate = useNavigate();
+  const [, , , , , isReadOnly] = useOutletContext();
   const [updateEventState] = useUpdateEventStateMutation();
   const [deleteEvent] = useDeleteEventMutation();
   const [featureEvents] = useFeatureEventsMutation();
 
   const items = eventPublishOptions.map((item) => {
     if (publishState == eventPublishState.PUBLISHED) {
-      if (item.key != '0') {
+      if (item.key != '0' && item.key != '6') {
         if (isFeatured) {
           if (item.key !== '4') {
             return {
@@ -45,12 +46,21 @@ function EventStatusOptions({ children, publishState, creator, eventId, isFeatur
       }
     } else {
       if (publishState == eventPublishState.DRAFT || publishState === eventPublishState.PENDING_REVIEW)
-        if (item.key != '1' && item.key !== '5' && item.key !== '4')
-          return {
-            key: item?.key,
-            label: item?.label,
-            type: item?.type,
-          };
+        if (item.key != '1' && item.key !== '5' && item.key !== '4') {
+          if (item.key === '6') {
+            if (publishState === eventPublishState.PENDING_REVIEW)
+              return {
+                key: item?.key,
+                label: item?.label,
+                type: item?.type,
+              };
+          } else
+            return {
+              key: item?.key,
+              label: item?.label,
+              type: item?.type,
+            };
+        }
       if (item?.type === 'divider')
         return {
           key: item?.key,
@@ -76,8 +86,13 @@ function EventStatusOptions({ children, publishState, creator, eventId, isFeatur
   };
   const onClick = ({ key }) => {
     if (key == '2') showDeleteConfirm();
-    else if (key === '0' || key === '1') {
-      updateEventState({ id: eventId, calendarId: calendarId })
+    else if (key === '0' || key === '1' || key === '6') {
+      updateEventState({
+        id: eventId,
+        calendarId: calendarId,
+        publishState:
+          key === '6' || key === '1' ? eventPublishState.DRAFT : key === '0' ? eventPublishState.PUBLISHED : undefined,
+      })
         .unwrap()
         .then(() => {})
         .catch(() => {
@@ -127,7 +142,7 @@ function EventStatusOptions({ children, publishState, creator, eventId, isFeatur
     }
   };
   return (
-    <ProtectedComponents creator={creator}>
+    <ProtectedComponents creator={creator} isReadOnly={isReadOnly}>
       <Dropdown
         {...rest}
         className="calendar-dropdown-wrapper"

diff --git a/src/components/List/Events/List.jsx b/src/components/List/Events/List.jsx
@@ -32,7 +32,7 @@ function Lists(props) {
   let { calendarId } = useParams();
   const lang = i18n.language;
   const { user } = useSelector(getUserDetails);
-  const [currentCalendarData] = useOutletContext();
+  const [currentCalendarData, , , , , isReadOnly] = useOutletContext();
   const totalCount = data?.totalCount;
 
   const [selectedItemId, setSelectedItemId] = useState(null);
@@ -47,7 +47,7 @@ function Lists(props) {
   const aspectRatioString = currentCalendarData?.imageConfig[0]?.thumbnail?.aspectRatio;
 
   const listItemHandler = (id, creatorId, publishState) => {
-    if (routinghandler(user, calendarId, creatorId, publishState))
+    if (routinghandler(user, calendarId, creatorId, publishState, false, isReadOnly))
       navigate(`${location.pathname}${PathName.AddEvent}/${id}`);
     else navigate(`${location.pathname}/${id}`);
   };
@@ -74,36 +74,39 @@ function Lists(props) {
           actions={[
             calendar[0]?.role === userRoles.GUEST ||
             (calendar[0]?.role === userRoles.CONTRIBUTOR && eventItem?.creator?.userId != user?.id) ? (
-              <Dropdown
-                className="calendar-dropdown-wrapper"
-                onOpenChange={(open) => {
-                  if (open) setSelectedItemId(eventItem?.id);
-                  else setSelectedItemId(null);
-                }}
-                overlayStyle={{
-                  minWidth: '150px',
-                }}
-                getPopupContainer={(trigger) => trigger.parentNode}
-                menu={{
-                  items: [
-                    {
-                      key: '0',
-                      label: t('dashboard.events.publishOptions.duplicateEvent'),
+              !isReadOnly && (
+                <Dropdown
+                  className="calendar-dropdown-wrapper"
+                  onOpenChange={(open) => {
+                    if (open) setSelectedItemId(eventItem?.id);
+                    else setSelectedItemId(null);
+                  }}
+                  overlayStyle={{
+                    minWidth: '150px',
+                  }}
+                  getPopupContainer={(trigger) => trigger.parentNode}
+                  menu={{
+                    items: [
+                      {
+                        key: '0',
+                        label: t('dashboard.events.publishOptions.duplicateEvent'),
+                      },
+                    ],
+                    onClick: ({ key }) => {
+                      if (key === '0')
+                        navigate(`${location.pathname}${PathName.AddEvent}?duplicateId=${eventItem?.id}`);
                     },
-                  ],
-                  onClick: ({ key }) => {
-                    if (key === '0') navigate(`${location.pathname}${PathName.AddEvent}?duplicateId=${eventItem?.id}`);
-                  },
-                }}
-                trigger={['click']}>
-                <span>
-                  <MoreOutlined
-                    className="event-list-more-icon"
-                    style={{ color: selectedItemId === eventItem?.id && '#1B3DE6' }}
-                    key={index}
-                  />
-                </span>
-              </Dropdown>
+                  }}
+                  trigger={['click']}>
+                  <span>
+                    <MoreOutlined
+                      className="event-list-more-icon"
+                      style={{ color: selectedItemId === eventItem?.id && '#1B3DE6' }}
+                      key={index}
+                    />
+                  </span>
+                </Dropdown>
+              )
             ) : (
               <EventStatusOptions
                 onOpenChange={(open) => {

diff --git a/src/components/Sidebar/Main/Sidebar.jsx b/src/components/Sidebar/Main/Sidebar.jsx
@@ -11,6 +11,7 @@ import { contentLanguageBilingual } from '../../../utils/bilingual';
 import { useSelector } from 'react-redux';
 import { getUserDetails } from '../../../redux/reducer/userSlice';
 import { clearSessionStoredSearchQueries } from '../../../utils/clearSessionStoredSearchQueries';
+import { calendarModes } from '../../../constants/calendarModes';
 
 const { Sider } = Layout;
 
@@ -56,17 +57,29 @@ function Sidebar(props) {
           </div>
         ),
         label: (
-          <>
-            {label}{' '}
-            <DownOutlined
-              style={{
-                position: 'relative',
-                top: '50%',
-                left: '100%',
-                fontSize: '8px',
-              }}
-            />
-          </>
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+            }}>
+            <span style={{ height: currentCalendarData?.mode === calendarModes.READ_ONLY && '16px' }}>
+              {label}
+              <DownOutlined
+                style={{
+                  position: 'relative',
+                  top: '50%',
+                  left: '100%',
+                  fontSize: '8px',
+                }}
+              />
+            </span>
+
+            {currentCalendarData?.mode === calendarModes.READ_ONLY && (
+              <span style={{ fontSize: '12px', fontWeight: 400 }}>
+                {t('dashboard.calendar.readOnlyMode.readOnlyMode')}
+              </span>
+            )}
+          </div>
         ),
         className: 'sidebar-calendar',
       },

diff --git a/src/components/Sidebar/Responsive/ResponsiveSidebar.jsx b/src/components/Sidebar/Responsive/ResponsiveSidebar.jsx
@@ -14,6 +14,7 @@ import { useTranslation } from 'react-i18next';
 import CalendarList from '../../Dropdown/Calendar';
 import { contentLanguageBilingual } from '../../../utils/bilingual';
 import i18n from 'i18next';
+import { calendarModes } from '../../../constants/calendarModes';
 
 function ResponsiveSidebar(props) {
   const { allCalendarsData, currentCalendarData, onClose, open, pageNumber, setPageNumber } = props;
@@ -58,14 +59,29 @@ function ResponsiveSidebar(props) {
           />
         ),
         label: (
-          <>
-            {label}{' '}
-            <DownOutlined
-              style={{
-                fontSize: '8px',
-              }}
-            />
-          </>
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+            }}>
+            <span style={{ height: currentCalendarData?.mode === calendarModes.READ_ONLY && '16px' }}>
+              {label}
+              <DownOutlined
+                style={{
+                  position: 'relative',
+                  left: '70%',
+                  top: '50%',
+                  fontSize: '8px',
+                }}
+              />
+            </span>
+
+            {currentCalendarData?.mode === calendarModes.READ_ONLY && (
+              <span style={{ fontSize: '12px', fontWeight: 400 }}>
+                {t('dashboard.calendar.readOnlyMode.readOnlyMode')}
+              </span>
+            )}
+          </div>
         ),
         className: 'sidebar-calendar',
       },

diff --git a/src/constants/calendarModes.js b/src/constants/calendarModes.js
@@ -0,0 +1,4 @@
+export const calendarModes = {
+  READ_ONLY: 'ReadOnly',
+  READ_WRITE: 'ReadWrite',
+};
diff --git a/src/constants/eventPublishOptions.js b/src/constants/eventPublishOptions.js
@@ -5,6 +5,10 @@ export const eventPublishOptions = [
     label: <Translation>{(t) => t('dashboard.events.publishOptions.publishEvent')}</Translation>,
     key: '0',
   },
+  {
+    label: <Translation>{(t) => t('dashboard.events.publishOptions.revertToDraft')}</Translation>,
+    key: '6',
+  },
   {
     label: <Translation>{(t) => t('dashboard.events.publishOptions.unpublishEvent')}</Translation>,
     key: '1',

diff --git a/src/layout/ProtectedComponents/ProtectedComponents.jsx b/src/layout/ProtectedComponents/ProtectedComponents.jsx
@@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';
 import { getUserDetails } from '../../redux/reducer/userSlice';
 import { userRoles } from '../../constants/userRoles';
 
-function ProtectedComponents({ children, creator, isEntity }) {
+function ProtectedComponents({ children, creator, isEntity, isReadOnly }) {
   let { calendarId } = useParams();
   const { user } = useSelector(getUserDetails);
   if (user.isSuperAdmin) {
@@ -13,23 +13,24 @@ function ProtectedComponents({ children, creator, isEntity }) {
   const calendar = user?.roles.filter((calendar) => {
     return calendar.calendarId === calendarId;
   });
-
-  switch (calendar[0]?.role) {
-    case userRoles.GUEST:
-      if (isEntity == true) {
+  if (isReadOnly) return;
+  else
+    switch (calendar[0]?.role) {
+      case userRoles.GUEST:
+        if (isEntity == true) {
+          if (user?.id === creator?.userId) return children;
+        } else return;
+        break;
+      case userRoles.CONTRIBUTOR:
         if (user?.id === creator?.userId) return children;
-      } else return;
-      break;
-    case userRoles.CONTRIBUTOR:
-      if (user?.id === creator?.userId) return children;
-      else return;
-    case userRoles.EDITOR:
-      return children;
-    case userRoles.ADMIN:
-      return children;
-    default:
-      return;
-  }
+        else return;
+      case userRoles.EDITOR:
+        return children;
+      case userRoles.ADMIN:
+        return children;
+      default:
+        return;
+    }
 }
 
 export default ProtectedComponents;
diff --git a/src/layout/ReadOnlyProtectedComponent/ReadOnlyProtectedComponent.jsx b/src/layout/ReadOnlyProtectedComponent/ReadOnlyProtectedComponent.jsx
@@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';
 import { getUserDetails } from '../../redux/reducer/userSlice';
 import { userRoles } from '../../constants/userRoles';
 
-function ReadOnlyProtectedComponent({ children, creator }) {
+function ReadOnlyProtectedComponent({ children, creator, isReadOnly }) {
   let { calendarId } = useParams();
   const { user } = useSelector(getUserDetails);
 
@@ -15,20 +15,22 @@ function ReadOnlyProtectedComponent({ children, creator }) {
     return calendar.calendarId === calendarId;
   });
 
-  switch (calendar[0]?.role) {
-    case userRoles.GUEST:
-      if (user?.id === creator) return children;
-      else return;
-    case userRoles.CONTRIBUTOR:
-      if (user?.id === creator) return children;
-      else return;
-    case userRoles.EDITOR:
-      return children;
-    case userRoles.ADMIN:
-      return children;
-    default:
-      return;
-  }
+  if (isReadOnly) return;
+  else
+    switch (calendar[0]?.role) {
+      case userRoles.GUEST:
+        if (user?.id === creator) return children;
+        else return;
+      case userRoles.CONTRIBUTOR:
+        if (user?.id === creator) return children;
+        else return;
+      case userRoles.EDITOR:
+        return children;
+      case userRoles.ADMIN:
+        return children;
+      default:
+        return;
+    }
 }
 
 export default ReadOnlyProtectedComponent;