mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-05-24 03:57:06 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Adapt react-client to use the real backend API (#1545)

Browse source 
Co-authored-by: Philip Molares <philip.molares@udo.edu>
Co-authored-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Erik Michelson 2022-04-15 23:03:15 +02:00 • committed by GitHub
parent 3399ed2023
commit 26f90505ff
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
227 changed files with 4726 additions and 2310 deletions
Download patch file Download diff file Expand all files Collapse all files

180
src/components/editor-page/document-bar/permissions/permission-modal.tsx
View file

@ -4,180 +4,26 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
import React, { useEffect, useState } from 'react'
import { Alert, Modal } from 'react-bootstrap'
import { Trans, useTranslation } from 'react-i18next'
import { getUserById } from '../../../../api/users'
import React from 'react'
import { Modal } from 'react-bootstrap'
import type { ModalVisibilityProps } from '../../../common/modals/common-modal'
import { CommonModal } from '../../../common/modals/common-modal'
import { ShowIf } from '../../../common/show-if/show-if'
import type { UserAvatarProps } from '../../../common/user-avatar/user-avatar'
import { UserAvatar } from '../../../common/user-avatar/user-avatar'
import { GroupMode, PermissionGroupEntry } from './permission-group-entry'
import { PermissionList } from './permission-list'
export interface Principal {
id: string
name: string
photo: string
canEdit: boolean
}
interface NotePermissions {
owner: string
sharedTo: {
username: string
canEdit: boolean
}[]
sharedToGroup: {
id: string
canEdit: boolean
}[]
}
export const EVERYONE_GROUP_ID = '1'
export const EVERYONE_LOGGED_IN_GROUP_ID = '2'
const permissionsApiResponse: NotePermissions = {
owner: 'dermolly',
sharedTo: [
{
username: 'emcrx',
canEdit: true
},
{
username: 'mrdrogdrog',
canEdit: false
}
],
sharedToGroup: [
{
id: EVERYONE_GROUP_ID,
canEdit: true
},
{
id: EVERYONE_LOGGED_IN_GROUP_ID,
canEdit: false
}
]
}
import { PermissionSectionOwner } from './permission-section-owner'
import { PermissionSectionUsers } from './permission-section-users'
import { PermissionSectionSpecialGroups } from './permission-section-special-groups'
/**
* Modal for viewing and managing the permissions of the note.
* @param show true to show the modal, false otherwise.
* @param onHide Callback that is fired when the modal is about to be closed.
*/
export const PermissionModal: React.FC<ModalVisibilityProps> = ({ show, onHide }) => {
useTranslation()
const [error, setError] = useState(false)
const [userList, setUserList] = useState<Principal[]>([])
const [owner, setOwner] = useState<UserAvatarProps>()
const [allUserPermissions, setAllUserPermissions] = useState(GroupMode.NONE)
const [allLoggedInUserPermissions, setAllLoggedInUserPermissions] = useState(GroupMode.NONE)
useEffect(() => {
// set owner
getUserById(permissionsApiResponse.owner)
.then((response) => {
setOwner({
name: response.name,
photo: response.photo
})
})
.catch(() => setError(true))
// set user List
permissionsApiResponse.sharedTo.forEach((shareUser) => {
getUserById(shareUser.username)
.then((response) => {
setUserList((list) =>
list.concat([
{
id: response.id,
name: response.name,
photo: response.photo,
canEdit: shareUser.canEdit
}
])
)
})
.catch(() => setError(true))
})
// set group List
permissionsApiResponse.sharedToGroup.forEach((sharedGroup) => {
if (sharedGroup.id === EVERYONE_GROUP_ID) {
setAllUserPermissions(sharedGroup.canEdit ? GroupMode.EDIT : GroupMode.VIEW)
} else if (sharedGroup.id === EVERYONE_LOGGED_IN_GROUP_ID) {
setAllLoggedInUserPermissions(sharedGroup.canEdit ? GroupMode.EDIT : GroupMode.VIEW)
}
})
}, [])
const changeUserMode = (userId: Principal['id'], canEdit: Principal['canEdit']) => {
setUserList((list) =>
list.map((user) => {
if (user.id === userId) {
user.canEdit = canEdit
}
return user
})
)
}
const removeUser = (userId: Principal['id']) => {
setUserList((list) => list.filter((user) => user.id !== userId))
}
const addUser = (name: Principal['name']) => {
setUserList((list) =>
list.concat({
id: name,
photo: '/img/avatar.png',
name: name,
canEdit: false
})
)
}
return (
<CommonModal show={show} onHide={onHide} showCloseButton={true} title={'editor.modal.permissions.title'}>
<Modal.Body>
<h5 className={'mb-3'}>
<Trans i18nKey={'editor.modal.permissions.owner'} />
</h5>
<ShowIf condition={error}>
<Alert variant='danger'>
<Trans i18nKey='editor.modal.permissions.error' />
</Alert>
</ShowIf>
<ul className={'list-group'}>
<li className={'list-group-item d-flex flex-row align-items-center'}>
<UserAvatar name={owner?.name ?? ''} photo={owner?.photo ?? ''} />
</li>
</ul>
<h5 className={'my-3'}>
<Trans i18nKey={'editor.modal.permissions.sharedWithUsers'} />
</h5>
<PermissionList
list={userList}
identifier={(entry) => <UserAvatar name={entry.name} photo={entry.photo} />}
changeEditMode={changeUserMode}
removeEntry={removeUser}
createEntry={addUser}
editI18nKey={'editor.modal.permissions.editUser'}
viewI18nKey={'editor.modal.permissions.viewOnlyUser'}
removeI18nKey={'editor.modal.permissions.removeUser'}
addI18nKey={'editor.modal.permissions.addUser'}
/>
<h5 className={'my-3'}>
<Trans i18nKey={'editor.modal.permissions.sharedWithGroups'} />
</h5>
<ul className={'list-group'}>
<PermissionGroupEntry
title={'editor.modal.permissions.allUser'}
editMode={allUserPermissions}
onChangeEditMode={setAllUserPermissions}
/>
<PermissionGroupEntry
title={'editor.modal.permissions.allLoggedInUser'}
editMode={allLoggedInUserPermissions}
onChangeEditMode={setAllLoggedInUserPermissions}
/>
</ul>
<PermissionSectionOwner />
<PermissionSectionUsers />
<PermissionSectionSpecialGroups />
</Modal.Body>
</CommonModal>
)