From 14f3c58a0eb8ed924c55d1d367f8e3f71b49ac26 Mon Sep 17 00:00:00 2001 From: Rizky Date: Fri, 17 Nov 2023 18:27:08 +0700 Subject: [PATCH] fix --- app/srv/api/code.ts | 30 ++++++-- .../src/render/ed/panel/popup/code/code.tsx | 69 ++++++++++++------- .../src/render/ed/panel/popup/code/icons.tsx | 11 ++- .../render/ed/panel/popup/code/name-list.tsx | 67 ++++++++++++++---- 4 files changed, 134 insertions(+), 43 deletions(-) diff --git a/app/srv/api/code.ts b/app/srv/api/code.ts index 22548daa..6c784b65 100644 --- a/app/srv/api/code.ts +++ b/app/srv/api/code.ts @@ -6,11 +6,33 @@ export const _ = { const { req, res } = apiContext(this); if (action === "list") { - return (await db.code.findMany({ where: { id_site: site_id } })).map( - (e) => ({ name: e.name, id: e.id }) - ); + let list = await db.code.findMany({ where: { id_site: site_id } }); + + if (!list.find((e) => e.name === "site")) { + list.push( + await db.code.create({ + data: { + id_site: site_id, + name: "site", + }, + }) + ); + } + + if (!list.find((e) => e.name === "SSR")) { + list.push( + await db.code.create({ + data: { + id_site: site_id, + name: "SSR", + }, + }) + ); + } + + return list.map((e) => ({ name: e.name, id: e.id })); } - + return "This is code.ts"; }, }; diff --git a/app/web/src/render/ed/panel/popup/code/code.tsx b/app/web/src/render/ed/panel/popup/code/code.tsx index 729da757..f63f1ec3 100644 --- a/app/web/src/render/ed/panel/popup/code/code.tsx +++ b/app/web/src/render/ed/panel/popup/code/code.tsx @@ -7,7 +7,7 @@ import { Tooltip } from "../../../../../utils/ui/tooltip"; import { EDGlobal } from "../../../logic/ed-global"; import { Popover } from "../../../../../utils/ui/popover"; import { iconChevronDown, iconGear, iconLoading, iconLog } from "./icons"; -import { CodeNameList, NameIcon } from "./name-list"; +import { CodeNameItem, CodeNameList, NameIcon } from "./name-list"; export const EdPopCode = () => { const p = useGlobal(EDGlobal, "EDITOR"); @@ -55,7 +55,16 @@ export const EdPopCode = () => { offset={0} arrow={false} backdrop={false} - content={} + content={ + { + p.ui.popup.code.name = e.name; + p.ui.popup.code.id = e.id; + local.namePicker = false; + local.render(); + }} + /> + } popoverClassName="bg-white shadow-md" className={cx( "flex items-center px-2 w-[200px] hover:bg-blue-50 space-x-1", @@ -67,9 +76,8 @@ export const EdPopCode = () => { local.render(); }} > -
- -
{p.ui.popup.code.name}
+
+
{ >
- {p.ui.popup.code.name !== "site" && ( -
-
-
- )} + {p.ui.popup.code.name !== "site" && + p.ui.popup.code.name !== "SSR" && ( + {}} + > +
+ + )} {
)} - {!p.ui.popup.code.open || !p.ui.popup.code.id ? ( -
+
+ {!p.ui.popup.code.open || !p.ui.popup.code.id ? ( -
- ) : ( - - )} + ) : ( + <> + +
+ Loading... +
+ + )} +
+ {local.namePicker && (
`; -export const iconSite = ``; + +export const iconSite = ``; + +export const iconSSR = ``; + export const iconChevronDown = ``; + export const iconLoading = ``; + export const iconPlus = ``; + export const iconGear = ``; + +export const iconModule = ``; diff --git a/app/web/src/render/ed/panel/popup/code/name-list.tsx b/app/web/src/render/ed/panel/popup/code/name-list.tsx index 2807935d..08435ee9 100644 --- a/app/web/src/render/ed/panel/popup/code/name-list.tsx +++ b/app/web/src/render/ed/panel/popup/code/name-list.tsx @@ -1,30 +1,65 @@ import { FC, useEffect } from "react"; import { useGlobal, useLocal } from "web-utils"; import { EDGlobal } from "../../../logic/ed-global"; -import { iconPlus, iconSite } from "./icons"; +import { iconModule, iconPlus, iconSSR, iconSite } from "./icons"; -export const CodeNameList: FC<{}> = ({}) => { - const p = useGlobal(EDGlobal, "EDITOR"); - const local = useLocal( - { - list: [] as { name: string; id: string }[], - }, - async () => { - local.list = await api.code(p.site.id, "list"); - local.render(); - } +const codeName = { + loading: false, + list: [] as { name: string; id: string }[], +}; + +export const CodeNameItem: FC<{ name: string }> = ({ name }) => { + let className = ""; + if (name === "site") { + className = css` + border-left: 4px solid #34a853; + margin-left: -4px; + height: 18px; + `; + } + if (name === "SSR") { + className = css` + border-left: 4px solid #4dcfe0; + margin-left: -4px; + height: 18px; + `; + } + return ( + <> +
+ + {name === "site" ? "Main Site" : name} + ); +}; +export const CodeNameList: FC<{ + onPick: (mod: { name: string; id: string }) => void; +}> = ({ onPick }) => { + const p = useGlobal(EDGlobal, "EDITOR"); + const local = useLocal({}, async () => { + codeName.loading = true; + codeName.list = await api.code(p.site.id, "list"); + codeName.loading = false; + local.render(); + }); return ( <>
- {local.list.map((e) => ( + {codeName.list.length === 0 && ( +
+ Loading... +
+ )} + {codeName.list.map((e) => (
{ + onPick(e); + }} > - - {e.name} +
))}
@@ -45,6 +80,10 @@ export const NameIcon: FC<{ name: string; className?: string }> = ({ let html = ""; if (n === "site") { html = iconSite; + } else if (n === "ssr") { + html = iconSSR; + } else { + html = iconModule; } return (