Skip to content

Commit

Permalink
feat(web): Export & Import Project (#1154)
Browse files Browse the repository at this point in the history 
Co-authored-by: lby <[email protected]>
  • Loading branch information
@m-abe-dev @airslice
2 people authored and tomokazu tantaka committed Oct 2, 2024
1 parent 84fdd59 commit 6b598a7
Show file tree
Hide file tree
Showing 14 changed files with 460 additions and 156 deletions.
175 changes: 98 additions & 77 deletions web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectGridViewItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,9 @@ const ProjectGridViewItem: FC<ProjectProps> = ({
handleArchivedModal,
handleProjectArchived,
handleProjectStarClick
// exportModalVisible,
// closeExportModal,
// handleExportProject
} = useHooks({
project,
selectedProjectId,
Expand All @@ -49,88 +52,101 @@ const ProjectGridViewItem: FC<ProjectProps> = ({
const t = useT();

return (
<Card>
<CardImage
backgroundImage={project.imageUrl}
onDoubleClick={onProjectOpen}
onClick={(e) => onProjectSelect?.(e, project.id)}
isHovered={isHovered ?? false}
onMouseEnter={() => handleProjectHover?.(true)}
onMouseLeave={() => handleProjectHover?.(false)}
isSelected={selectedProjectId === project.id}
>
<StarButtonWrapper
isStarred={isStarred ?? false}
<>
<Card>
<CardImage
backgroundImage={project.imageUrl}
onDoubleClick={onProjectOpen}
onClick={(e) => onProjectSelect?.(e, project.id)}
isHovered={isHovered ?? false}
onMouseEnter={() => handleProjectHover?.(true)}
onMouseLeave={() => handleProjectHover?.(false)}
isSelected={selectedProjectId === project.id}
>
<Button
iconButton
icon={isStarred ? "starFilled" : "star"}
onClick={(e) => handleProjectStarClick?.(e)}
iconColor={isStarred ? theme.warning.main : theme.content.main}
appearance="simple"
/>
</StarButtonWrapper>
</CardImage>
<CardFooter>
{hasMapOrStoryPublished && <PublishStatus />}
<CardTitleWrapper>
{!isEditing ? (
<CardTitle onDoubleClick={handleProjectNameDoubleClick}>
{projectName}
</CardTitle>
) : (
<TextInput
onChange={handleProjectNameChange}
onBlur={handleProjectNameBlur}
value={projectName}
autoFocus={isEditing}
appearance="present"
<StarButtonWrapper
isStarred={isStarred ?? false}
isHovered={isHovered ?? false}
isSelected={selectedProjectId === project.id}
>
<Button
iconButton
icon={isStarred ? "starFilled" : "star"}
onClick={(e) => handleProjectStarClick?.(e)}
iconColor={isStarred ? theme.warning.main : theme.content.main}
appearance="simple"
/>
)}
</CardTitleWrapper>
<PopupMenu
menu={popupMenu}
label={
<Button icon="dotsThreeVertical" iconButton appearance="simple" />
}
/>
<Modal size="small" visible={archiveOpen}>
<ModalPanel
title={t("Remove")}
onCancel={() => handleArchivedModal(false)}
actions={
<>
<Button
key="cancel"
title={t("Cancel")}
appearance="secondary"
onClick={() => handleArchivedModal(false)}
size="normal"
/>
<Button
size="normal"
key="delete"
appearance="dangerous"
title={t("Delete")}
onClick={() => handleProjectArchived(true)}
disabled={!projectName}
/>
</>
</StarButtonWrapper>
</CardImage>
<CardFooter>
{hasMapOrStoryPublished && <PublishStatus />}
<CardTitleWrapper>
{!isEditing ? (
<CardTitle onDoubleClick={handleProjectNameDoubleClick}>
{projectName}
</CardTitle>
) : (
<TextInput
onChange={handleProjectNameChange}
onBlur={handleProjectNameBlur}
value={projectName}
autoFocus={isEditing}
appearance="present"
/>
)}
</CardTitleWrapper>
<PopupMenu
menu={popupMenu}
label={
<Button icon="dotsThreeVertical" iconButton appearance="simple" />
}
>
<ModalContentWrapper>
<Typography size="body">
{t(
"This process will remove this project to Recycle bin. If the project was published, this also means websites and domains referencing the project will not be able to access it anymore."
)}
</Typography>
</ModalContentWrapper>
</ModalPanel>
</Modal>
</CardFooter>
</Card>
/>
</CardFooter>
</Card>
{/* MEMO: this modal will be used in the future */}
{/* <Modal visible={exportModalVisible} size="small">
<ModalPanel
title={t("Export Project")}
actions={actions}
onCancel={closeExportModal}
appearance="normal"
>
<ModalContent />
</ModalPanel>
</Modal> */}
<Modal size="small" visible={archiveOpen}>
<ModalPanel
title={t("Remove")}
onCancel={() => handleArchivedModal(false)}
actions={
<>
<Button
key="cancel"
title={t("Cancel")}
appearance="secondary"
onClick={() => handleArchivedModal(false)}
size="normal"
/>
<Button
size="normal"
key="delete"
appearance="dangerous"
title={t("Delete")}
onClick={() => handleProjectArchived(true)}
disabled={!projectName}
/>
</>
}
>
<ModalContentWrapper>
<Typography size="body">
{t(
"This process will remove this project to Recycle bin. If the project was published, this also means websites and domains referencing the project will not be able to access it anymore."
)}
</Typography>
</ModalContentWrapper>
</ModalPanel>
</Modal>
</>
);
};

Expand Down Expand Up @@ -211,3 +227,8 @@ const CardTitle = styled("div")(({ theme }) => ({
textOverflow: "ellipsis",
cursor: "pointer"
}));

// const ModalContent = styled("div")(() => ({
// width: "100%",
// height: "272px"
// }));
139 changes: 80 additions & 59 deletions web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectListViewItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,9 @@ const ProjectListViewItem: FC<ProjectProps> = ({
handleProjectHover,
handleProjectNameDoubleClick,
handleProjectStarClick
// exportModalVisible,
// closeExportModal,
// handleExportProject
} = useHooks({
project,
selectedProjectId,
Expand All @@ -53,67 +56,80 @@ const ProjectListViewItem: FC<ProjectProps> = ({
});

return (
<ListWrapper
onClick={(e) => onProjectSelect?.(e, project.id)}
isHovered={isHovered ?? false}
onDoubleClick={onProjectOpen}
onMouseEnter={() => handleProjectHover?.(true)}
onMouseLeave={() => handleProjectHover?.(false)}
isSelected={selectedProjectId === project.id}
>
<ThumbnailCol>
<ActionWrapper>
<StarButtonWrapper
isStarred={isStarred ?? false}
isHovered={isHovered ?? false}
isSelected={selectedProjectId === project.id}
>
<Button
iconButton
icon={isStarred ? "starFilled" : "star"}
onClick={(e) => handleProjectStarClick?.(e)}
iconColor={isStarred ? theme.warning.main : theme.content.main}
appearance="simple"
<>
<ListWrapper
onClick={(e) => onProjectSelect?.(e, project.id)}
isHovered={isHovered ?? false}
onDoubleClick={onProjectOpen}
onMouseEnter={() => handleProjectHover?.(true)}
onMouseLeave={() => handleProjectHover?.(false)}
isSelected={selectedProjectId === project.id}
>
<ThumbnailCol>
<ActionWrapper>
<StarButtonWrapper
isStarred={isStarred ?? false}
isHovered={isHovered ?? false}
isSelected={selectedProjectId === project.id}
>
<Button
iconButton
icon={isStarred ? "starFilled" : "star"}
onClick={(e) => handleProjectStarClick?.(e)}
iconColor={isStarred ? theme.warning.main : theme.content.main}
appearance="simple"
/>
</StarButtonWrapper>
<ProjectImage backgroundImage={project.imageUrl} />
</ActionWrapper>
</ThumbnailCol>
<ProjectNameCol>
<PublishStatus status={hasMapOrStoryPublished} />
{!isEditing ? (
<TitleWrapper onDoubleClick={handleProjectNameDoubleClick}>
{projectName}
</TitleWrapper>
) : (
<TextInput
onChange={handleProjectNameChange}
onBlur={handleProjectNameBlur}
value={projectName}
autoFocus={isEditing}
appearance="present"
/>
</StarButtonWrapper>
<ProjectImage backgroundImage={project.imageUrl} />
</ActionWrapper>
</ThumbnailCol>
<ProjectNameCol>
<PublishStatus status={hasMapOrStoryPublished} />
{!isEditing ? (
<TitleWrapper onDoubleClick={handleProjectNameDoubleClick}>
{projectName}
</TitleWrapper>
) : (
<TextInput
onChange={handleProjectNameChange}
onBlur={handleProjectNameBlur}
value={projectName}
autoFocus={isEditing}
appearance="present"
)}
</ProjectNameCol>
<TimeCol>
<Typography size="body">{UpdatedAt}</Typography>
</TimeCol>
<TimeCol>
<Typography size="body">{createAt}</Typography>
</TimeCol>
<ActionCol
onClick={(e: MouseEvent) => {
e.stopPropagation();
}}
>
<PopupMenu
menu={popupMenu}
label={
<Button icon="dotsThreeVertical" iconButton appearance="simple" />
}
/>
)}
</ProjectNameCol>
<TimeCol>
<Typography size="body">{UpdatedAt}</Typography>
</TimeCol>
<TimeCol>
<Typography size="body">{createAt}</Typography>
</TimeCol>
<ActionCol
onClick={(e: MouseEvent) => {
e.stopPropagation();
}}
>
<PopupMenu
menu={popupMenu}
label={
<Button icon="dotsThreeVertical" iconButton appearance="simple" />
}
/>
</ActionCol>
</ListWrapper>
</ActionCol>
</ListWrapper>
{/* MEMO: this modal will be used in the future */}
{/* <Modal visible={exportModalVisible} size="small">
<ModalPanel
title={t("Export Project")}
actions={actions}
onCancel={closeExportModal}
appearance="normal"
>
<ModalContent />
</ModalPanel>
</Modal> */}
</>
);
};

Expand Down Expand Up @@ -202,3 +218,8 @@ const TitleWrapper = styled("div")(({ theme }) => ({
overflow: "hidden",
textOverflow: "ellipsis"
}));

// const ModalContent = styled("div")(() => ({
// width: "100%",
// height: "272px"
// }));
Loading

0 comments on commit 6b598a7

Please sign in to comment.