From 1363c7ce4f10dd617cb768bff1e8d1274aa4ff5e Mon Sep 17 00:00:00 2001 From: Rizky Date: Wed, 25 Oct 2023 20:04:24 +0700 Subject: [PATCH] fix site loading --- app/srv/ws/sync/actions/site_group.ts | 1 + app/web/src/render/ed/logic/ed-global.ts | 7 + app/web/src/render/ed/logic/ed-sync.tsx | 13 ++ .../src/render/ed/panel/popup/site-form.tsx | 42 ++-- .../src/render/ed/panel/popup/site-user.tsx | 2 +- app/web/src/render/ed/panel/popup/site.tsx | 201 +++++++++++++++--- app/web/src/render/ed/panel/top/left/site.tsx | 4 +- 7 files changed, 218 insertions(+), 52 deletions(-) diff --git a/app/srv/ws/sync/actions/site_group.ts b/app/srv/ws/sync/actions/site_group.ts index 1c2f5f79..75094044 100644 --- a/app/srv/ws/sync/actions/site_group.ts +++ b/app/srv/ws/sync/actions/site_group.ts @@ -14,6 +14,7 @@ export const site_group = async function (this: SyncConnection) { id: true, name: true, domain: true, + responsive: true, }, where: { is_deleted: false, diff --git a/app/web/src/render/ed/logic/ed-global.ts b/app/web/src/render/ed/logic/ed-global.ts index 28c45389..a5d52acd 100644 --- a/app/web/src/render/ed/logic/ed-global.ts +++ b/app/web/src/render/ed/logic/ed-global.ts @@ -109,6 +109,13 @@ export const EDGlobal = { }, popup: { site: null as null | ((site_id: string) => void | Promise), + site_form: null as null | { + group_id: string; + id: string; + name?: string; + domain?: string; + responsive?: string; + }, comp: null as null | ((comp_id: string) => void | Promise), comp_group: null as null | { mouse_event: React.MouseEvent; diff --git a/app/web/src/render/ed/logic/ed-sync.tsx b/app/web/src/render/ed/logic/ed-sync.tsx index b6df6bb6..79933818 100644 --- a/app/web/src/render/ed/logic/ed-sync.tsx +++ b/app/web/src/render/ed/logic/ed-sync.tsx @@ -18,6 +18,19 @@ export const edInitSync = (p: PG) => { p.user.username = session.data.user.username; if (p.sync) { + if (params.site_id !== p.site.id) { + p.sync.site.load(params.site_id).then((site) => { + if (site) { + p.site = site; + p.render(); + } else { + alert("Site not found. redirecting..."); + navigate(`/ed/`); + } + }); + return false; + } + if (!params.page_id && params.site_id) { db.page .findFirst({ diff --git a/app/web/src/render/ed/panel/popup/site-form.tsx b/app/web/src/render/ed/panel/popup/site-form.tsx index d68a1c5e..c51d73db 100644 --- a/app/web/src/render/ed/panel/popup/site-form.tsx +++ b/app/web/src/render/ed/panel/popup/site-form.tsx @@ -56,32 +56,36 @@ export const EdFormSite: FC<{ if (form.name && p.user.id) { local.saving = true; local.render(); - if (!form.id) { - try { - await db.site.create({ + try { + if (!form.id) { + try { + await db.site.create({ + data: { + name: form.name, + favicon: "", + domain: form.domain || "", + id_user: p.user.id, + id_org: group_id, + responsive: form.responsive, + }, + }); + } catch (e) { + alert(e); + } + } else { + await db.site.update({ data: { name: form.name, - favicon: "", - domain: form.domain || "", - id_user: p.user.id, - id_org: group_id, + domain: form.domain, responsive: form.responsive, }, + where: { id: form.id }, }); - } catch (e) { - alert(e); } - } else { - await db.site.update({ - data: { - name: form.name, - domain: form.domain, - responsive: form.responsive, - }, - where: { id: form.id }, - }); + onSave(); + } catch (e) { + alert(e); } - onSave(); } local.saving = false; diff --git a/app/web/src/render/ed/panel/popup/site-user.tsx b/app/web/src/render/ed/panel/popup/site-user.tsx index 9778e982..57d87254 100644 --- a/app/web/src/render/ed/panel/popup/site-user.tsx +++ b/app/web/src/render/ed/panel/popup/site-user.tsx @@ -101,7 +101,7 @@ export const EdPopUser = ({
{user.username}
diff --git a/app/web/src/render/ed/panel/popup/site.tsx b/app/web/src/render/ed/panel/popup/site.tsx index 369997e2..582bb40e 100644 --- a/app/web/src/render/ed/panel/popup/site.tsx +++ b/app/web/src/render/ed/panel/popup/site.tsx @@ -11,6 +11,7 @@ import { Loading } from "../../../../utils/ui/loading"; import { Modal } from "../../../../utils/ui/modal"; import { EDGlobal } from "../../logic/ed-global"; import { EdPopUser } from "./site-user"; +import { EdFormSite } from "./site-form"; type GItem = { id: string; @@ -22,7 +23,7 @@ type GItem = { users: { id: string; username: string }[]; renaming?: boolean; } - | { type: "site"; domain: string } + | { type: "site"; domain: string; responsive: string } ); const conf = { group: null as any }; @@ -33,10 +34,7 @@ export const EdPopSite = () => { status: "init" as "init" | "loading" | "ready", group: (conf.group || []) as NodeModel[], }, - () => { - p.ui.popup.site = () => {}; - p.render(); - } + () => {} ); const reload = async () => { @@ -47,6 +45,13 @@ export const EdPopSite = () => { const group: NodeModel[] = []; for (const item of res) { + group.push({ + id: `new-${item.id}`, + parent: item.id, + text: "new", + droppable: false, + }); + group.push({ id: item.id, parent: "site-root", @@ -74,16 +79,10 @@ export const EdPopSite = () => { type: "site", name: site.name, domain: site.domain, + responsive: site.responsive, }, }); } - - group.push({ - id: `new-${item.id}`, - parent: item.id, - text: "new", - droppable: false, - }); } local.group = group; conf.group = group; @@ -115,13 +114,56 @@ export const EdPopSite = () => {
{(local.status === "ready" || local.group.length > 0) && ( { + local.group = val; + local.render(); + }} reload={reload} /> )}
+ + {p.ui.popup.site_form && ( + <> + {p.ui.popup.site_form.id === "new" && ( + { + p.ui.popup.site_form = null; + p.render(); + }} + onSave={() => { + p.ui.popup.site_form = null; + p.render(); + reload(); + }} + /> + )} + {p.ui.popup.site_form.id !== "new" && ( + { + p.ui.popup.site_form = null; + p.render(); + }} + onSave={() => { + p.ui.popup.site_form = null; + p.render(); + reload(); + }} + /> + )} + + )} ); @@ -130,11 +172,11 @@ export const EdPopSite = () => { const SitePicker = ({ group, reload, - status, + update, }: { - status: any; group: NodeModel[]; - reload: () => void; + update: (val: NodeModel[]) => void; + reload: (id?: string) => Promise; }) => { const p = useGlobal(EDGlobal, "EDITOR"); const local = useLocal({}); @@ -142,7 +184,7 @@ const SitePicker = ({ const orglen = group.filter((e) => e.parent === "site-root").length; return (
-
+
{orglen} Organization{orglen > 1 ? "s" : ""}
@@ -159,7 +201,12 @@ const SitePicker = ({ }, }, }); - reload(); + + update([]); + + setTimeout(() => { + reload(res.id); + }); } }} > @@ -231,6 +278,14 @@ const SitePicker = ({ css` flex-wrap: nowrap; background: white; + & > li { + padding-bottom: 10px; + } + & > li:nth-child(odd) { + border-top: 1px solid #ececeb; + border-bottom: 1px solid #ececeb; + background: rgb(237, 245, 254); + } ` ), container: "flex flex-row flex-wrap pb-2", @@ -245,8 +300,17 @@ const SitePicker = ({ return (
{ + if (typeof node.id === "string") { + p.ui.popup.site_form = { + group_id: node.id.replace("new-", ""), + id: "new", + }; + p.render(); + } + }} >
@@ -309,7 +373,7 @@ const SitePicker = ({ <>
{node.text}
{ item.renaming = true; local.render(); @@ -384,10 +448,15 @@ const SitePicker = ({ onClick={(e) => { e.preventDefault(); e.stopPropagation(); - navigate(`/ed/${item.id}`); + if (p.ui.popup.site) { + p.ui.popup.site(item.id); + } + p.ui.popup.site = null; + p.render(); }} className={cx( - "flex flex-col ml-2 mt-1 mb-1 w-[150px] text-[14px] border bg-white hover:bg-blue-100 cursor-pointer", + "flex flex-col ml-2 mt-1 mb-1 w-[150px] h-[80px] text-[14px] border bg-white hover:bg-blue-100 cursor-pointer relative", + isDragging && "opacity-20", css` .edit { opacity: 0; @@ -399,22 +468,92 @@ const SitePicker = ({ )} >
-
{item.name}
-
- + {item.name} +
+
+
`, + __html: ``, }} - > -
{item.domain}
+ >
+
{item.domain}  
+
+
+ {item.responsive === "all" && ( +
+ `, + }} + > + Responsive +
+ )} + {item.responsive === "mobile-only" && ( +
+ `, + }} + > + Mobile +
+ )} + {item.responsive === "desktop-only" && ( +
+ `, + }} + > + Desktop +
+ )}
-
{ e.stopPropagation(); e.preventDefault(); + + if (typeof node.parent === "string") { + p.ui.popup.site_form = { + group_id: node.parent, + id: item.id, + domain: item.domain, + name: item.name, + responsive: item.responsive, + }; + p.render(); + } + }} + > + Drag me +
+
{ + e.stopPropagation(); + e.preventDefault(); + + if (typeof node.parent === "string") { + p.ui.popup.site_form = { + group_id: node.parent, + id: item.id, + domain: item.domain, + name: item.name, + responsive: item.responsive, + }; + p.render(); + } }} > EDIT diff --git a/app/web/src/render/ed/panel/top/left/site.tsx b/app/web/src/render/ed/panel/top/left/site.tsx index 286b824b..92934490 100644 --- a/app/web/src/render/ed/panel/top/left/site.tsx +++ b/app/web/src/render/ed/panel/top/left/site.tsx @@ -7,7 +7,9 @@ export const EdSitePicker = () => { return ( { - p.ui.popup.site = () => {}; + p.ui.popup.site = (id) => { + navigate(`/ed/${id}`); + }; p.render(); }} >