fix(persons): speakers catalog edits in mobile view

sws2apps · Jan 12, 2025 · a17880c · a17880c
1 parent b549e7a
commit a17880c
Show file tree

Hide file tree

Showing 6 changed files with 236 additions and 97 deletions.
diff --git a/src/features/persons/date_history/index.tsx b/src/features/persons/date_history/index.tsx
@@ -18,7 +18,7 @@ const DateHistory = ({
 }: DateHistoryType) => {
   const { t } = useAppTranslation();
 
-  const { tabletDown } = useBreakpoints();
+  const { tabletDown, tablet600Down } = useBreakpoints();
 
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
@@ -53,29 +53,36 @@ const DateHistory = ({
             alignItems: 'center',
             gap: '8px',
             justifyContent: isLast ? 'space-between' : 'flex-end',
-            flexDirection: tabletDown ? 'column-reverse' : 'row',
+            flexDirection: tablet600Down ? 'row' : 'row-reverse',
           }}
         >
+          <Button
+            variant="small"
+            color="red"
+            startIcon={<IconDelete />}
+            sx={{
+              height: '32px',
+              minHeight: '32px !important',
+              width: tablet600Down ? 'fit-content' : 'auto',
+            }}
+            onClick={() => onDelete(id)}
+          >
+            {t('tr_delete')}
+          </Button>
           {isLast && (
             <Button
               variant="small"
               startIcon={<IconAdd />}
-              sx={{ height: '32px', minHeight: '32px !important' }}
+              sx={{
+                height: '32px',
+                minHeight: '32px !important',
+                width: tablet600Down ? 'fit-content' : 'auto',
+              }}
               onClick={onAdd}
             >
               {t('tr_add')}
             </Button>
           )}
-
-          <Button
-            variant="small"
-            color="red"
-            startIcon={<IconDelete />}
-            sx={{ height: '32px', minHeight: '32px !important' }}
-            onClick={() => onDelete(id)}
-          >
-            {t('tr_delete')}
-          </Button>
         </Box>
       )}
     </Box>

diff --git a/src/features/persons/speakers_catalog/my_congregation/header/index.tsx b/src/features/persons/speakers_catalog/my_congregation/header/index.tsx
@@ -5,7 +5,11 @@ import {
   IconExpand,
   IconSharedWith,
 } from '@components/icons';
-import { useAppTranslation, useCurrentUser } from '@hooks/index';
+import {
+  useAppTranslation,
+  useBreakpoints,
+  useCurrentUser,
+} from '@hooks/index';
 import { OutgoingSpeakersHeaderType } from './index.types';
 import useHeader from './useHeader';
 import Typography from '@components/typography';
@@ -32,6 +36,8 @@ const OutgoingSpeakersHeader = ({
     congAccountConnected,
   } = useHeader();
 
+  const { tablet600Down } = useBreakpoints();
+
   return (
     <Box
       sx={{
@@ -46,8 +52,55 @@ const OutgoingSpeakersHeader = ({
         <OutgoingSpeakersAccess open={openAccess} onClose={handleCloseAccess} />
       )}
 
-      <Box sx={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
-        <Typography className="h2">{t('tr_yourCongregation')}</Typography>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '4px',
+          width: tablet600Down ? '100%' : 'auto',
+        }}
+      >
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          }}
+        >
+          <Typography className="h2">{t('tr_yourCongregation')}</Typography>
+          {tablet600Down && (
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+              {isPublicTalkCoordinator && (
+                <>
+                  <Tooltip title={t('tr_edit')} delaySpeed="slow">
+                    <IconButton onClick={onEditModeChange}>
+                      {!editMode && <IconEdit color="var(--accent-main)" />}
+                      {editMode && <IconCheck color="var(--accent-main)" />}
+                    </IconButton>
+                  </Tooltip>
+                  {congAccountConnected && (
+                    <Tooltip title={t('tr_whoHasAccess')} delaySpeed="slow">
+                      <IconButton onClick={handleOpenAccess}>
+                        <IconSharedWith color="var(--accent-main)" />
+                      </IconButton>
+                    </Tooltip>
+                  )}
+                </>
+              )}
+
+              <IconButton onClick={onExpandChange}>
+                <IconExpand
+                  color="var(--black)"
+                  sx={{
+                    transform: expanded ? 'rotate(180deg)' : 'rotate(0deg)',
+                    transition: 'transform 0.3s',
+                  }}
+                />
+              </IconButton>
+            </Box>
+          )}
+        </Box>
         <Box
           sx={{
             display: 'flex',
@@ -84,35 +137,37 @@ const OutgoingSpeakersHeader = ({
         </Box>
       </Box>
 
-      <Box sx={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-        {isPublicTalkCoordinator && (
-          <>
-            <Tooltip title={t('tr_edit')} delaySpeed="slow">
-              <IconButton onClick={onEditModeChange}>
-                {!editMode && <IconEdit color="var(--accent-main)" />}
-                {editMode && <IconCheck color="var(--accent-main)" />}
-              </IconButton>
-            </Tooltip>
-            {congAccountConnected && (
-              <Tooltip title={t('tr_whoHasAccess')} delaySpeed="slow">
-                <IconButton onClick={handleOpenAccess}>
-                  <IconSharedWith color="var(--accent-main)" />
+      {!tablet600Down && (
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+          {isPublicTalkCoordinator && (
+            <>
+              <Tooltip title={t('tr_edit')} delaySpeed="slow">
+                <IconButton onClick={onEditModeChange}>
+                  {!editMode && <IconEdit color="var(--accent-main)" />}
+                  {editMode && <IconCheck color="var(--accent-main)" />}
                 </IconButton>
               </Tooltip>
-            )}
-          </>
-        )}
+              {congAccountConnected && (
+                <Tooltip title={t('tr_whoHasAccess')} delaySpeed="slow">
+                  <IconButton onClick={handleOpenAccess}>
+                    <IconSharedWith color="var(--accent-main)" />
+                  </IconButton>
+                </Tooltip>
+              )}
+            </>
+          )}
 
-        <IconButton onClick={onExpandChange}>
-          <IconExpand
-            color="var(--black)"
-            sx={{
-              transform: expanded ? 'rotate(180deg)' : 'rotate(0deg)',
-              transition: 'transform 0.3s',
-            }}
-          />
-        </IconButton>
-      </Box>
+          <IconButton onClick={onExpandChange}>
+            <IconExpand
+              color="var(--black)"
+              sx={{
+                transform: expanded ? 'rotate(180deg)' : 'rotate(0deg)',
+                transition: 'transform 0.3s',
+              }}
+            />
+          </IconButton>
+        </Box>
+      )}
     </Box>
   );
 };

diff --git a/src/features/persons/speakers_catalog/my_congregation/index.tsx b/src/features/persons/speakers_catalog/my_congregation/index.tsx
@@ -54,7 +54,7 @@ const MyCongregation = () => {
                 background: 'unset',
                 borderRadius: 'unset',
               },
-              '& span.MuiTouchRipple-root': { borderRadius: 'unset' },
+              '& span.MuiTouchRipple-root': { borderRadius: 'var(--radius-l)' },
             }}
           />
         </Box>

diff --git a/src/features/persons/speakers_catalog/other_congregations/congregation_item/index.tsx b/src/features/persons/speakers_catalog/other_congregations/congregation_item/index.tsx
@@ -1,12 +1,20 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import { Box, Collapse } from '@mui/material';
 import { IncomingCongregationType } from './index.types';
-import { useAppTranslation } from '@hooks/index';
+import {
+  useAppTranslation,
+  useBreakpoints,
+  useCurrentUser,
+} from '@hooks/index';
 import useList from './useList';
 import CongregationInfoEdit from '../congregation_info/edit';
 import CongregationInfoView from '../congregation_info/view';
 import IncomingCongregationHeader from '../header';
 import SpeakersList from '../speakers_list';
 import Tabs from '@components/tabs';
+import useHeader from '../header/useHeader';
+import Button from '@components/button';
+import { IconCheck, IconDelete, IconEdit } from '@components/icons';
 
 const IncomingCongregation = ({
   congregation,
@@ -27,6 +35,11 @@ const IncomingCongregation = ({
     onChangeCurrentExpanded,
   });
 
+  const { isPublicTalkCoordinator } = useCurrentUser();
+  const { showDelete } = useHeader();
+
+  const { tablet600Down } = useBreakpoints();
+
   return (
     <Box
       sx={{
@@ -50,6 +63,37 @@ const IncomingCongregation = ({
       />
 
       <Collapse in={isExpanded} unmountOnExit>
+        {tablet600Down && (
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'row',
+              width: '100%',
+              justifyContent: 'space-between',
+              gap: '8px',
+            }}
+          >
+            {(tablet600Down || showDelete) && (
+              <Button
+                variant="small"
+                startIcon={<IconDelete />}
+                color="red"
+                onClick={handleDeleteCongregation}
+                sx={{ width: tablet600Down ? 'fit-content' : 'auto' }}
+              >
+                {t('tr_delete')}
+              </Button>
+            )}
+            <Button
+              variant="small"
+              startIcon={isEditMode ? <IconCheck /> : <IconEdit />}
+              onClick={handleToggleEdit}
+              sx={{ width: tablet600Down ? 'fit-content' : 'auto' }}
+            >
+              {isEditMode ? t('tr_done') : t('tr_edit')}
+            </Button>
+          </Box>
+        )}
         <Box
           sx={{
             borderTop: '1px solid var(--accent-200)',