Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(web): Export & Import Project #1154

Merged
merged 12 commits into from
Oct 1, 2024
Merged

feat(web): Export & Import Project #1154

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
5e63539
update: uiux for import and export on project
m-abe-dev Sep 25, 2024
119c605
update: api and adding logics to ui
m-abe-dev Sep 25, 2024
603dd06
update: modal and refetch func for import
m-abe-dev Sep 26, 2024
076b00a
update: schema
m-abe-dev Sep 26, 2024
821f106
update: format from json to zip
m-abe-dev Sep 26, 2024
3686e80
fix: backend url and comment out modals
m-abe-dev Sep 30, 2024
ef4ab41
fix: translations and refactors for code rabbit
m-abe-dev Sep 30, 2024
ad3ffff
fix: refactor
m-abe-dev Sep 30, 2024
ac395c5
add: test console
m-abe-dev Sep 30, 2024
69b1eb5
fix: getBackendUrl
m-abe-dev Sep 30, 2024
cdd0221
recovery
m-abe-dev Sep 30, 2024
29d73eb
Merge branch 'main' into update/uiux_for_import_and_export
airslice Oct 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
111 changes: 66 additions & 45 deletions web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectGridViewItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,9 @@ const ProjectGridViewItem: FC<ProjectProps> = ({
handleProjectHover,
handleProjectNameDoubleClick,
handleProjectStarClick
// exportModalVisible,
// closeExportModal,
// handleExportProject
} = useHooks({
project,
selectedProjectId,
Expand All @@ -34,55 +37,68 @@ const ProjectGridViewItem: FC<ProjectProps> = ({
});

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" />
}
/>
</CardFooter>
</Card>
</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" />
}
/>
</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> */}
</>
);
};

Expand Down Expand Up @@ -155,3 +171,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
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,9 @@ const ProjectListViewItem: FC<ProjectProps> = ({
handleProjectHover,
handleProjectNameDoubleClick,
handleProjectStarClick
// exportModalVisible,
// closeExportModal,
// handleExportProject
} = useHooks({
project,
selectedProjectId,
Expand All @@ -51,67 +54,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 @@ -200,3 +216,8 @@ const TitleWrapper = styled("div")(({ theme }) => ({
overflow: "hidden",
textOverflow: "ellipsis"
}));

// const ModalContent = styled("div")(() => ({
// width: "100%",
// height: "272px"
// }));
37 changes: 35 additions & 2 deletions web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/hooks.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import { PopupMenuItem } from "@reearth/beta/lib/reearth-ui";
import useDoubleClick from "@reearth/beta/utils/use-double-click";
import { useStorytellingFetcher } from "@reearth/services/api";
import {
useStorytellingFetcher,
useProjectFetcher
} from "@reearth/services/api";
import { useT } from "@reearth/services/i18n";
import { MouseEvent, useCallback, useEffect, useMemo, useState } from "react";

Expand All @@ -22,12 +25,15 @@ export default ({
}: Props) => {
const t = useT();
const { useStoriesQuery } = useStorytellingFetcher();
const { useExportProject } = useProjectFetcher();
const { stories } = useStoriesQuery({ sceneId: project?.sceneId });

const [isEditing, setIsEditing] = useState(false);
const [projectName, setProjectName] = useState(project.name);
const [isHovered, setIsHovered] = useState(false);
const [isStarred, setIsStarred] = useState(project.starred);
// MEMO: this modal state and function will be used in the future
// const [exportModalVisible, setExportModalVisible] = useState(false);

const handleProjectNameChange = useCallback((newValue: string) => {
setProjectName(newValue);
Expand All @@ -49,6 +55,26 @@ export default ({
onProjectSelect?.(undefined);
}, [onProjectSelect, project.id, selectedProjectId]);

// const openExportModal = useCallback(() => {
// setExportModalVisible(true);
// }, []);

// const closeExportModal = useCallback(() => {
// setExportModalVisible(false);
// }, []);

const handleExportProject = useCallback(async () => {
if (!project.id) return;

const result = await useExportProject(project.id);

if (result.status === "success") {
console.log("export success");
} else {
console.error("Failed to export project:", result.status);
}
}, [useExportProject, project.id]);

useEffect(() => {
setIsStarred(project.starred);
}, [project.starred]);
Expand All @@ -65,6 +91,12 @@ export default ({
title: t("Project Setting"),
path: `/settings/project/${project.id}`,
icon: "setting"
},
{
id: "export",
title: t("Export"),
icon: "downloadSimple",
onClick: () => handleExportProject()
}
];

Expand Down Expand Up @@ -122,6 +154,7 @@ export default ({
handleProjectNameBlur,
handleProjectHover,
handleProjectNameDoubleClick,
handleProjectStarClick
handleProjectStarClick,
handleExportProject
};
};
Loading
Loading