add viewers and collabs in participants List

This commit is contained in:
jubitjohn 2023-07-05 11:27:28 +05:30
parent 26c3198111
commit b67c2b399e
4 changed files with 41 additions and 27 deletions

View file

@ -9,24 +9,18 @@ import { EnteMenuItem } from 'components/Menu/EnteMenuItem';
// import AvatarCollectionShare from '../AvatarCollectionShare';
// import ChevronRightIcon from '@mui/icons-material/ChevronRight';
import MenuItemDivider from 'components/Menu/MenuItemDivider';
import ManageAddCollab from './MangeAddCollab';
interface Iprops {
collection: Collection;
onRootClose: () => void;
}
export function CollaboratorParticipants({ collection }: Iprops) {
export function CollaboratorParticipants({ collection, onRootClose }: Iprops) {
if (!collection.sharees?.length) {
return <></>;
}
const shareExpireOption = [
'Never',
'1 day',
'1 week',
'1 month',
'1 year',
'Custom',
];
const [collaborators, setCollaborators] = useState([]);
useEffect(() => {
@ -51,11 +45,15 @@ export function CollaboratorParticipants({ collection }: Iprops) {
onClick={() => console.log('clicked')}
label={item}
/>
{index !== shareExpireOption.length - 1 && (
{index !== collaborators.length - 1 && (
<MenuItemDivider />
)}
</>
))}
<ManageAddCollab
collection={collection}
onRootClose={onRootClose}
/>
</MenuItemGroup>
</Box>
);

View file

@ -9,9 +9,10 @@ import { CollaboratorParticipants } from './CollaboratorParticipants';
interface Iprops {
collection: Collection;
onRootClose: () => void;
}
export function ManageParticipantsList({ collection }: Iprops) {
export function ManageParticipantsList({ collection, onRootClose }: Iprops) {
if (!collection.sharees?.length) {
return <></>;
}
@ -20,8 +21,11 @@ export function ManageParticipantsList({ collection }: Iprops) {
<Box mb={3}>
<OwnerParticipant collection={collection}></OwnerParticipant>
<CollaboratorParticipants
collection={collection}></CollaboratorParticipants>
<ViewerParticipants collection={collection}></ViewerParticipants>
collection={collection}
onRootClose={onRootClose}></CollaboratorParticipants>
<ViewerParticipants
collection={collection}
onRootClose={onRootClose}></ViewerParticipants>
</Box>
);
}

View file

@ -28,7 +28,7 @@ export default function ManageAddCollab({ collection, onRootClose }: Iprops) {
<EnteMenuItem
startIcon={<AddIcon />}
onClick={openManageShare}
label={t('Add Collaborator')}
label={t('Add Collaborators')}
/>
</MenuItemGroup>
</Stack>

View file

@ -7,12 +7,14 @@ import { EnteMenuItem } from 'components/Menu/EnteMenuItem';
import MenuItemDivider from 'components/Menu/MenuItemDivider';
import MenuSectionTitle from 'components/Menu/MenuSectionTitle';
import AvatarCollectionShare from '../AvatarCollectionShare';
import ManageAddViewer from './ManageAddViewer';
interface Iprops {
collection: Collection;
onRootClose: () => void;
}
export function ViewerParticipants({ collection }: Iprops) {
export function ViewerParticipants({ collection, onRootClose }: Iprops) {
if (!collection.sharees?.length) {
return <></>;
}
@ -30,6 +32,7 @@ export function ViewerParticipants({ collection }: Iprops) {
<Box mb={3}>
<MenuSectionTitle title={t('Viewers')} />
<MenuItemGroup>
<>
{Viewers.map((item, index) => (
<>
<EnteMenuItem
@ -37,11 +40,20 @@ export function ViewerParticipants({ collection }: Iprops) {
key={item}
onClick={() => console.log('clicked')}
label={item}
startIcon={<AvatarCollectionShare email={item} />}
startIcon={
<AvatarCollectionShare email={item} />
}
/>
{index !== Viewers.length - 1 && <MenuItemDivider />}
{index !== Viewers.length - 1 && (
<MenuItemDivider />
)}
</>
))}
<ManageAddViewer
collection={collection}
onRootClose={onRootClose}
/>
</>
</MenuItemGroup>
</Box>
);