Web: Files: Templates: added context menu actions

This commit is contained in:
Nikita Gopienko 2024-04-24 17:16:18 +03:00
parent 9a94909537
commit 8cb76c8fc1
10 changed files with 81 additions and 25 deletions

View File

@ -58,6 +58,8 @@
"EditAdditionalLink": "Edit additional link",
"EditLink": "Edit link",
"EditRoom": "Edit room",
"EditTemplate": "Edit template",
"DeleteTemplate": "Delete template",
"EditSharedLink": "Edit shared link",
"EmbeddingSettings": "Embedding settings",
"EmptyFile": "Empty file",

View File

@ -125,7 +125,7 @@ export default function withBadges(WrappedComponent) {
};
onCreateRoom = () => {
console.log("onCreateRoomFromTemplate"); //TODO: Templates
this.props.onCreateRoomFromTemplate(this.props.item);
};
render() {

View File

@ -100,10 +100,6 @@ export default function withQuickButtons(WrappedComponent) {
}
};
onCreateRoom = () => {
console.log("onCreateRoomFromTemplate"); //TODO: Templates
};
render() {
const { isLoading } = this.state;
@ -119,6 +115,7 @@ export default function withQuickButtons(WrappedComponent) {
isPersonalRoom,
isArchiveFolder,
isTemplatesFolder,
onCreateRoomFromTemplate,
} = this.props;
const quickButtonsComponent = (
@ -139,7 +136,7 @@ export default function withQuickButtons(WrappedComponent) {
folderCategory={folderCategory}
onCopyPrimaryLink={this.onCopyPrimaryLink}
isArchiveFolder={isArchiveFolder}
onCreateRoom={this.onCreateRoom}
onCreateRoom={onCreateRoomFromTemplate}
isTemplatesFolder={isTemplatesFolder}
/>
);
@ -164,8 +161,12 @@ export default function withQuickButtons(WrappedComponent) {
filesStore,
infoPanelStore,
}) => {
const { lockFileAction, setFavoriteAction, onSelectItem } =
filesActionsStore;
const {
lockFileAction,
setFavoriteAction,
onSelectItem,
onCreateRoomFromTemplate,
} = filesActionsStore;
const {
isPersonalFolderRoot,
isArchiveFolderRoot,
@ -198,6 +199,7 @@ export default function withQuickButtons(WrappedComponent) {
getPrimaryFileLink,
setShareChanged,
isTemplatesFolder,
onCreateRoomFromTemplate,
};
},
)(observer(WithQuickButtons));

View File

@ -318,7 +318,7 @@ const Badges = ({
<ColorTheme
themeId={ThemeId.IconButton}
iconName={TabletLinkReactSvgUrl}
className="badge tablet-row-copy-link icons-group tablet-badge"
className="badge tablet-row-copy-link icons-group tablet-badge"
size={sizeBadge}
onClick={onCopyPrimaryLink}
title={t("Files:CopySharedLink")}

View File

@ -258,8 +258,6 @@ const GlobalEvents = ({ enablePlugins, eventListenerItemsList }) => {
}, []);
const onCreateRoomTemplate = (e) => {
console.log("onCreateRoomTemplate", e);
const visible = e.item ? true : false;
setCreateRoomTemplateDialog({

View File

@ -75,11 +75,16 @@ const StyledButtonContainer = styled.div`
gap: 8px;
margin-top: 16px;
${({ isEdit }) =>
!isEdit &&
css`
margin-top: 16px;
`};
`;
const CreateRoomTemplate = (props) => {
const { visible, onClose, item, fetchedTags, folderFormValidation } = props;
const { visible, onClose, item, fetchedTags, folderFormValidation, isEdit } =
props;
const { roomType, title, logo, createdBy } = item;
console.log("item", item);
@ -155,7 +160,7 @@ const CreateRoomTemplate = (props) => {
>
<ModalDialog.Header>
<Text fontSize="21px" fontWeight={700}>
{t("Files:SaveAsTemplate")}
{item.isEdit ? t("Files:EditTemplate") : t("Files:SaveAsTemplate")}
</Text>
</ModalDialog.Header>
@ -222,13 +227,15 @@ const CreateRoomTemplate = (props) => {
</ModalDialog.Body>
<ModalDialog.Footer>
<Checkbox
label={t("Files:OpenCreatedTemplate")}
isChecked={openCreatedIsChecked}
onChange={onChangeOpenCreated}
/>
{!item.isEdit && (
<Checkbox
label={t("Files:OpenCreatedTemplate")}
isChecked={openCreatedIsChecked}
onChange={onChangeOpenCreated}
/>
)}
<StyledButtonContainer>
<StyledButtonContainer isEdit={item.isEdit}>
<Button
id="create-room-template-modal_submit"
tabIndex={5}

View File

@ -204,7 +204,8 @@ const StyledSimpleFilesRow = styled(Row)`
display: none;
}
.row-copy-link {
.row-copy-link,
.tablet-row-create-room {
display: block;
${isMobileOnly &&

View File

@ -65,6 +65,7 @@ import LeaveRoomSvgUrl from "PUBLIC_DIR/images/logout.react.svg?url";
import CatalogRoomsReactSvgUrl from "PUBLIC_DIR/images/catalog.rooms.react.svg?url";
import RemoveOutlineSvgUrl from "PUBLIC_DIR/images/remove.react.svg?url";
import CreateTemplateSvgUrl from "PUBLIC_DIR/images/template.react.svg?url";
import CreateRoomReactSvgUrl from "PUBLIC_DIR/images/create.room.react.svg?url";
import { getCategoryUrl } from "@docspace/client/src/helpers/utils";
import { makeAutoObservable } from "mobx";
@ -669,9 +670,11 @@ class ContextOptionsStore {
};
onCreateRoomTemplate = (item) => {
const event = new Event(Events.CREATE_ROOM_TEMPLATE);
event.item = item;
window.dispatchEvent(event);
this.filesActionsStore.onCreateRoomFromTemplate(item);
};
onEditRoomTemplate = (item) => {
this.filesActionsStore.onCreateRoomFromTemplate({ ...item, isEdit: true });
};
// onLoadLinks = async (t, item) => {
@ -1294,6 +1297,14 @@ class ContextOptionsStore {
onClick: () => this.onClickReconnectStorage(item, t),
disabled: !item.security?.Reconnect,
},
{
id: "option_create-room",
key: "create-room",
label: t("CreateRoom"),
icon: CreateRoomReactSvgUrl,
onClick: () => this.filesActionsStore.onCreateRoomFromTemplate(item),
disabled: false,
},
{
id: "option_edit-room",
key: "edit-room",
@ -1302,6 +1313,14 @@ class ContextOptionsStore {
onClick: () => this.onClickEditRoom(item),
disabled: false,
},
{
id: "option_edit-room",
key: "edit-template",
label: t("EditTemplate"),
icon: SettingsReactSvgUrl,
onClick: () => this.onEditRoomTemplate(item),
disabled: false,
},
{
id: "option_invite-users-to-room",
key: "invite-users-to-room",
@ -1555,7 +1574,9 @@ class ContextOptionsStore {
key: "delete",
label: isRootThirdPartyFolder
? t("Common:Disconnect")
: t("Common:Delete"),
: item.isTemplate
? t("DeleteTemplate")
: t("Common:Delete"),
icon: TrashReactSvgUrl,
onClick: () =>
isEditing ? this.onShowEditingToast(t) : this.onClickDelete(item, t),

View File

@ -2720,6 +2720,14 @@ class FilesActionStore {
await deleteFilesFromRecent(fileIds);
await refreshFiles();
};
onCreateRoomFromTemplate = (item) => {
console.log("onCreateRoomFromTemplate", item); //TODO: Templates
const event = new Event(Events.CREATE_ROOM_TEMPLATE);
event.item = item;
window.dispatchEvent(event);
};
}
export default FilesActionStore;

View File

@ -1930,6 +1930,7 @@ class FilesStore {
getFilesContextOptions = (item, fromInfoPanel) => {
const isFile = !!item.fileExst || item.contentLength;
const isRoom = !!item.roomType;
const isTemplate = true; //roomType, isTemplate //TODO: Templates
const isFavorite =
(item.fileStatus & FileStatus.IsFavorite) === FileStatus.IsFavorite;
@ -2271,6 +2272,20 @@ class FilesStore {
fileOptions = this.removeSeparator(fileOptions);
return fileOptions;
} else if (isTemplate) {
let templateOptions = [
"select",
"open",
"separator0",
"create-room",
"edit-template",
"access-settings",
"room-info",
"separator1",
"delete",
];
return templateOptions;
} else if (isRoom) {
const canInviteUserInRoom = item.security?.EditAccess;
const canRemoveRoom = item.security?.Delete;
@ -3201,6 +3216,7 @@ class FilesStore {
: folderUrl;
const isRoom = !!roomType;
const isTemplate = true; //TODO: Templates
const icon =
isRoom && logo?.medium
@ -3304,6 +3320,7 @@ class FilesStore {
isEditing,
roomType,
isRoom,
isTemplate,
isArchive,
tags,
pinned,