jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

change(ui): projects revamp - project edit

Browse source
This commit is contained in:
Shekar Siri 2025-01-09 15:41:12 +01:00
parent 7c5af16493
commit c28f677d10
3 changed files with 45 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
frontend/app/components/Client/Projects/ProjectForm.tsx
View file

@ -16,37 +16,39 @@ function ProjectForm(props: Props) {
const { onClose } = props;
const { projectsStore } = useStore();
// const project = projectsStore.instance as Project;
const project = props.project || new Project();
// const project = new Project(props.project || {});
const [project, setProject] = React.useState<Project>(new Project(props.project || {}));
const loading = projectsStore.loading;
const canDelete = projectsStore.list.length > 1;
const pathname = window.location.pathname;
const mstore = useStore();
useEffect(() => {
if (props.project) {
projectsStore.initProject(props.project);
} else {
projectsStore.initProject({});
}
}, [props.project]);
// useEffect(() => {
// if (project) {
// projectsStore.initProject(project);
// } else {
// projectsStore.initProject({});
// }
// }, [project]);
const handleEdit = ({ target: { name, value } }: ChangeEvent<HTMLInputElement>) => {
projectsStore.editInstance({ [name]: value });
// projectsStore.editInstance({ [name]: value });
setProject((prev: Project) => (new Project({ ...prev, [name]: value })));
};
const onSubmit = (e: FormEvent) => {
if (!projectsStore.instance) return;
if (projectsStore.instance.id && projectsStore.instance.exists()) {
if (project.id && project.exists()) {
projectsStore
.updateProject(projectsStore.instance.id, project)
.updateProject(project.id, project)
.then((response: any) => {
if (!response || !response.errors || response.errors.size === 0) {
if (onClose) {
onClose(null);
}
if (!pathname.includes('onboarding')) {
void projectsStore.fetchList();
}
// if (!pathname.includes('onboarding')) {
// void projectsStore.fetchList();
// }
toast.success('Project updated successfully');
} else {
toast.error(response.errors[0]);
@ -54,14 +56,16 @@ function ProjectForm(props: Props) {
});
} else {
projectsStore
.save(projectsStore.instance!)
.then(() => {
.save(project!)
.then((resp: Project) => {
toast.success('Project created successfully');
onClose?.(null);
mstore.searchStore.clearSearch();
mstore.searchStoreLive.clearSearch();
mstore.initClient();
projectsStore.setConfigProject(parseInt(resp.id!));
})
.catch((error: string) => {
toast.error(error || 'An error occurred while creating the project');
@ -124,7 +128,8 @@ function ProjectForm(props: Props) {
]}
value={project.platform}
onChange={(value) => {
projectsStore.editInstance({ platform: value });
// projectsStore.editInstance({ platform: value });
setProject((prev: Project) => (new Project({ ...prev, platform: value })));
}}
/>
</div>

8
frontend/app/components/Client/Projects/ProjectList.tsx
View file

@ -27,7 +27,9 @@ const ProjectList: React.FC = () => {
};
const projectEditHandler = (e: React.MouseEvent, project: Project) => {
e.stopPropagation();
// e.stopPropagation();
projectsStore.initProject(project);
openModal(<ProjectForm onClose={closeModal} project={project} />, {
title: 'Edit Project'
@ -38,8 +40,8 @@ const ProjectList: React.FC = () => {
const menuItems: MenuItem[] = filteredProjects.map((project) => ({
key: project.id + '',
label: <Typography.Text style={{ color: 'inherit' }} ellipsis={true}>{project.name}</Typography.Text>,
extra: <Button onClick={(e) => projectEditHandler(e, project)} className="opacity-0 group-hover:!opacity-100"
size="small" type="link" icon={<PencilIcon size={14} />} />,
extra: <Button onClick={(e) => projectEditHandler(e, project)} className="flex opacity-0 group-hover:!opacity-100"
size="small" type="link" icon={<PencilIcon size={14} />} />,
className: 'group',
icon: (
<ProjectIconWithProgress

33
frontend/app/mstore/projectsStore.ts
View file

@ -39,7 +39,7 @@ export default class ProjectsStore {
if (index !== -1) {
this.list[index] = this.list[index].edit(project);
}
}
};
getSiteId = () => {
return {
@ -101,7 +101,7 @@ export default class ProjectsStore {
this.syncProjectInList({
id: siteId,
gdpr: response.data
})
});
} catch (error) {
console.error('Failed to sync project in list:', error);
}
@ -149,18 +149,18 @@ export default class ProjectsStore {
this.setLoading(true);
try {
const response = await projectsService.saveProject(projectData);
runInAction(() => {
const newSite = new Project(response.data);
const index = this.list.findIndex(site => site.id === newSite.id);
if (index !== -1) {
this.list[index] = newSite;
} else {
this.list.push(newSite);
}
this.setSiteId(newSite.id);
this.active = newSite;
});
return response;
const newSite = new Project(response.data);
const index = this.list.findIndex(site => site.id === newSite.id);
if (index !== -1) {
this.list[index] = newSite;
} else {
this.list.push(newSite);
}
this.setSiteId(newSite.id!);
this.active = newSite;
return newSite;
} catch (error: any) {
throw error || 'An error occurred while saving the project.';
} finally {
@ -201,7 +201,10 @@ export default class ProjectsStore {
updateProject = async (projectId: string, projectData: Partial<Project>) => {
this.setLoading(true);
try {
const response = await projectsService.updateProject(projectId, projectData);
const response = await projectsService.updateProject(projectId, {
name: projectData.name,
platform: projectData.platform
});
runInAction(() => {
const updatedSite = new Project(response.data);
const index = this.list.findIndex(site => site.id === updatedSite.id);