midsuit
/
prasi-bun
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wip load code

This commit is contained in:
Rizky 2023-11-26 14:02:15 +07:00
parent 3ab768d3c7
commit 212c8686f1
8 changed files with 255 additions and 195 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/db/prisma/schema.prisma
View File

@ -302,7 +302,7 @@ model code_assign {
id_component_group String? @db.Uuid
id_page String? @db.Uuid
id String @id(map: "code_assign_id") @default(dbgenerated("gen_random_uuid()")) @db.Uuid
code code @relation(fields: [id_code], references: [id], onDelete: NoAction, onUpdate: NoAction)
code code @relation(fields: [id_code], references: [id], onDelete: Cascade, onUpdate: NoAction)
component_group component_group? @relation(fields: [id_component_group], references: [id], onDelete: NoAction, onUpdate: NoAction)
page page? @relation(fields: [id_page], references: [id], onDelete: NoAction, onUpdate: NoAction)
}

2
app/web/src/nova/ed/logic/ed-sync.tsx
View File

@ -6,7 +6,7 @@ import { w } from "../../../utils/types/general";
import { Loading } from "../../../utils/ui/loading";
import { EmptySite, PG } from "./ed-global";
import { treeRebuild } from "./tree/build";
import { evalCJS } from "../../view/logic/load-code";
import { evalCJS } from "../../view/logic/load-code-new";
import { reloadPage } from "./ed-route";
import { loadSite } from "./ed-site";

4
app/web/src/nova/ed/panel/main/main.tsx
View File

@ -4,6 +4,7 @@ import { View } from "../../../view/view";
import { EDGlobal, active } from "../../logic/ed-global";
import { compLoaded } from "../../logic/tree/build";
import { loadComponent } from "../../logic/tree/sync-walk";
import { code } from "../popup/code/code";
export const EdMain = () => {
const p = useGlobal(EDGlobal, "EDITOR");
@ -18,9 +19,10 @@ export const EdMain = () => {
>
<div className="absolute overflow-auto inset-0">
{!!p.page.building && <Loading backdrop={false} />}
{!p.page.building && (
{!p.page.building && code.mode !== "" && (
<View
mode={p.mode}
code_mode={code.mode}
layout={{ show: false }}
isEditor={true}
api_url={p.site.config.api_url}

421
app/web/src/nova/ed/panel/popup/code/code.tsx
View File

@ -16,32 +16,42 @@ import {
} from "./icons";
import { CodeNameItem, CodeNameList, codeName } from "./name-list";
export const code = {
mode: "" as "" | "old" | "new",
};
export const EdPopCode = () => {
const p = useGlobal(EDGlobal, "EDITOR");
const local = useLocal({ namePicker: false, codeAssign: false });
useEffect(() => {
(async () => {
if (p.ui.popup.code.open) {
const id_code = await p.sync.activity("site", {
action: p.ui.popup.code.open ? "open" : "close",
id: p.site.id,
type: "code",
name: p.ui.popup.code.name,
});
if (code.mode === "new") {
if (p.ui.popup.code.open) {
const id_code = await p.sync.activity("site", {
action: p.ui.popup.code.open ? "open" : "close",
id: p.site.id,
type: "code",
name: p.ui.popup.code.name,
});
if (id_code) {
p.ui.popup.code.id = id_code;
p.render();
if (id_code) {
p.ui.popup.code.id = id_code;
p.render();
}
}
p.ui.popup.code.init = true;
}
p.ui.popup.code.init = true;
})();
}, [p.ui.popup.code.open]);
const vscode_url = isLocalhost()
? "http://localhost:3000?"
: "https://code.web.andromedia.co.id?tkn=prasi&";
useEffect(() => {
if (code.mode === "") {
db.code.findFirst({ where: { id_site: p.site.id } }).then((e) => {
code.mode = !!e ? "new" : "old";
p.render();
});
}
}, []);
return (
<Modal
@ -54,181 +64,220 @@ export const EdPopCode = () => {
}
}}
>
<div className={cx("bg-white select-none fixed inset-[50px] bottom-0")}>
<div className="relative w-full h-full flex flex-col">
<div className="border-b flex h-[40px] items-stretch">
<Popover
placement="bottom"
offset={0}
arrow={false}
backdrop={false}
content={
<CodeNameList
onPick={async (e) => {
local.namePicker = false;
p.ui.popup.code.name = e.name;
p.ui.popup.code.id = "";
p.render();
const id_code = await p.sync.activity("site", {
action: "open",
id: p.site.id,
type: "code",
name: p.ui.popup.code.name,
});
if (id_code) {
p.ui.popup.code.id = id_code;
p.render();
}
}}
/>
}
popoverClassName="bg-white shadow-md"
className={cx(
"flex items-center px-2 w-[200px] hover:bg-blue-50 space-x-1",
"cursor-pointer justify-between"
)}
open={local.namePicker}
onOpenChange={(open) => {
local.namePicker = open;
local.render();
}}
>
<div className="capitalize overflow-ellipsis flex-1 flex items-center space-x-2">
<CodeNameItem name={p.ui.popup.code.name} />
</div>
<div
dangerouslySetInnerHTML={{
__html: iconChevronDown,
}}
></div>
</Popover>
{p.ui.popup.code.name !== "site" &&
p.ui.popup.code.name !== "SSR" && (
<>
<Tooltip
content={"Delete Code Module"}
className="flex items-center border-l relative hover:bg-red-50 cursor-pointer px-2 transition-all text-red-500"
placement="bottom"
onClick={async () => {
if (
prompt(
"Are you sure want to delete this code?\ntype 'yes' to confirm:"
) === "yes"
) {
await db.code.delete({
where: { id: p.ui.popup.code.id },
});
codeName.list = codeName.list.filter(
(e) => e.id !== p.ui.popup.code.id
);
p.ui.popup.code.name = codeName.list[0].name;
p.ui.popup.code.id = codeName.list[0].id;
p.render();
}
}}
>
<div
dangerouslySetInnerHTML={{
__html: iconTrash,
}}
></div>
</Tooltip>
<Popover
open={local.codeAssign}
onOpenChange={(open) => {
local.codeAssign = open;
local.render();
}}
backdrop={false}
placement="bottom"
popoverClassName="p-0 shadow-lg bg-white"
content={
<CodeAssign
onClose={() => {
local.codeAssign = false;
local.render();
}}
id_code={p.ui.popup.code.id}
/>
}
className="flex items-center border-l relative hover:bg-blue-50 cursor-pointer px-2 transition-all"
>
<div
dangerouslySetInnerHTML={{
__html: iconGear,
}}
></div>
</Popover>
</>
)}
<Tooltip
content="STDOUT Log"
delay={0}
placement="bottom"
className={cx(
"flex items-stretch relative border-l",
p.ui.popup.code.error && "bg-red-500 text-white"
)}
onClick={() => {
p.ui.popup.code.show_log = !p.ui.popup.code.show_log;
p.render();
}}
>
{p.ui.popup.code.show_log && (
<div className="absolute bottom-[-4px] left-0 right-[1px] h-[5px] bg-white"></div>
)}
<div
className={cx(
"border-r flex text-center items-center hover:bg-blue-50 cursor-pointer px-2 transition-all",
p.ui.popup.code.loading
? "border-b-2 border-b-orange-400"
: "border-b-2 border-b-transparent"
)}
dangerouslySetInnerHTML={{
__html: p.ui.popup.code.loading ? iconLog : iconLoading,
}}
></div>
</Tooltip>
</div>
{p.ui.popup.code.show_log && (
<div className="h-[150px] overflow-auto font-mono p-2 text-xs whitespace-pre-wrap border-b">
<div>{p.ui.popup.code.log || "stdout is empty..."}</div>
</div>
)}
<div className="flex flex-1 relative">
{!p.ui.popup.code.open || !p.ui.popup.code.id ? (
<Loading backdrop={false} />
) : (
<>
<iframe
className="flex flex-1 absolute inset-0 w-full h-full z-10"
src={`${vscode_url}folder=/site/code/${p.site.id}/${p.ui.popup.code.id}`}
></iframe>
<div className="flex flex-1 absolute inset-0 z-0 items-center justify-center">
Loading VSCode...
</div>
</>
)}
</div>
{(local.namePicker || local.codeAssign) && (
<div
className={cx("bg-white select-none fixed inset-[50px] bottom-0 flex")}
>
{!code.mode && <Loading note="checking-version" backdrop={false} />}
{code.mode === "new" && <CodeBody />}
{code.mode === "old" && (
<div className="flex items-center justify-center flex-col flex-1">
<div>This site still using old code</div>
<div
className="fixed inset-0 z-50"
onClick={() => {
local.namePicker = false;
local.codeAssign = false;
local.render();
if (
confirm(
"Old code will not load, are you sure want to upgrade ?"
)
) {
code.mode = "new";
p.ui.popup.code.open = false;
p.render();
}
}}
></div>
)}
</div>
className="border border-blue-500 cursor-pointer bg-blue-100 p-2 hover:bg-blue-200"
>
Upgrade to New Code Project
</div>
<div className="text-xs py-2">
Warning: old code will not load once upgraded.
</div>
</div>
)}
</div>
</Modal>
);
};
const CodeBody = () => {
const p = useGlobal(EDGlobal, "EDITOR");
const local = useLocal({ namePicker: false, codeAssign: false });
const vscode_url = isLocalhost()
? "http://localhost:3000?"
: "https://code.web.andromedia.co.id?tkn=prasi&";
return (
<div className="relative w-full h-full flex flex-col">
<div className="border-b flex h-[40px] items-stretch">
<Popover
placement="bottom"
offset={0}
arrow={false}
backdrop={false}
content={
<CodeNameList
onPick={async (e) => {
local.namePicker = false;
p.ui.popup.code.name = e.name;
p.ui.popup.code.id = "";
p.render();
const id_code = await p.sync.activity("site", {
action: "open",
id: p.site.id,
type: "code",
name: p.ui.popup.code.name,
});
if (id_code) {
p.ui.popup.code.id = id_code;
p.render();
}
}}
/>
}
popoverClassName="bg-white shadow-md"
className={cx(
"flex items-center px-2 w-[200px] hover:bg-blue-50 space-x-1",
"cursor-pointer justify-between"
)}
open={local.namePicker}
onOpenChange={(open) => {
local.namePicker = open;
local.render();
}}
>
<div className="capitalize overflow-ellipsis flex-1 flex items-center space-x-2">
<CodeNameItem name={p.ui.popup.code.name} />
</div>
<div
dangerouslySetInnerHTML={{
__html: iconChevronDown,
}}
></div>
</Popover>
{p.ui.popup.code.name !== "site" && p.ui.popup.code.name !== "SSR" && (
<>
<Tooltip
content={"Delete Code Module"}
className="flex items-center border-l relative hover:bg-red-50 cursor-pointer px-2 transition-all text-red-500"
placement="bottom"
onClick={async () => {
if (
prompt(
"Are you sure want to delete this code?\ntype 'yes' to confirm:"
) === "yes"
) {
await db.code.delete({
where: { id: p.ui.popup.code.id },
});
codeName.list = codeName.list.filter(
(e) => e.id !== p.ui.popup.code.id
);
p.ui.popup.code.name = codeName.list[0].name;
p.ui.popup.code.id = codeName.list[0].id;
p.render();
}
}}
>
<div
dangerouslySetInnerHTML={{
__html: iconTrash,
}}
></div>
</Tooltip>
<Popover
open={local.codeAssign}
onOpenChange={(open) => {
local.codeAssign = open;
local.render();
}}
backdrop={false}
placement="bottom"
popoverClassName="p-0 shadow-lg bg-white"
content={
<CodeAssign
onClose={() => {
local.codeAssign = false;
local.render();
}}
id_code={p.ui.popup.code.id}
/>
}
className="flex items-center border-l relative hover:bg-blue-50 cursor-pointer px-2 transition-all"
>
<div
dangerouslySetInnerHTML={{
__html: iconGear,
}}
></div>
</Popover>
</>
)}
<Tooltip
content="STDOUT Log"
delay={0}
placement="bottom"
className={cx(
"flex items-stretch relative border-l",
p.ui.popup.code.error && "bg-red-500 text-white"
)}
onClick={() => {
p.ui.popup.code.show_log = !p.ui.popup.code.show_log;
p.render();
}}
>
{p.ui.popup.code.show_log && (
<div className="absolute bottom-[-4px] left-0 right-[1px] h-[5px] bg-white"></div>
)}
<div
className={cx(
"border-r flex text-center items-center hover:bg-blue-50 cursor-pointer px-2 transition-all",
p.ui.popup.code.loading
? "border-b-2 border-b-orange-400"
: "border-b-2 border-b-transparent"
)}
dangerouslySetInnerHTML={{
__html: p.ui.popup.code.loading ? iconLog : iconLoading,
}}
></div>
</Tooltip>
</div>
{p.ui.popup.code.show_log && (
<div className="h-[150px] overflow-auto font-mono p-2 text-xs whitespace-pre-wrap border-b">
<div>{p.ui.popup.code.log || "stdout is empty..."}</div>
</div>
)}
<div className="flex flex-1 relative">
{!p.ui.popup.code.open || !p.ui.popup.code.id ? (
<Loading backdrop={false} />
) : (
<>
<iframe
className="flex flex-1 absolute inset-0 w-full h-full z-10"
src={`${vscode_url}folder=/site/code/${p.site.id}/${p.ui.popup.code.id}`}
></iframe>
<div className="flex flex-1 absolute inset-0 z-0 items-center justify-center">
Loading VSCode...
</div>
</>
)}
</div>
{(local.namePicker || local.codeAssign) && (
<div
className="fixed inset-0 z-50"
onClick={() => {
local.namePicker = false;
local.codeAssign = false;
local.render();
}}
></div>
)}
</div>
);
};

5
app/web/src/nova/ed/panel/tree/node/item/name.tsx
View File

@ -1,8 +1,7 @@
import { NodeModel, RenderParams } from "@minoru/react-dnd-treeview";
import { EDGlobal, EdMeta } from "../../../../logic/ed-global";
import { useGlobal, useLocal } from "web-utils";
import { FC, useEffect } from "react";
import { Tooltip } from "../../../../../../utils/ui/tooltip";
import { useGlobal, useLocal } from "web-utils";
import { EDGlobal, EdMeta } from "../../../../logic/ed-global";
export const EdTreeName = ({
node,

2
app/web/src/nova/view/logic/load-code.ts → app/web/src/nova/view/logic/load-code-new.ts
View File

@ -6,7 +6,7 @@ const codeMap = {
compGroup: {} as Record<string, string[]>,
comp: {} as Record<string, string>,
};
export const vLoadCode = async (v: VG, forceLoad?: boolean) => {
export const newLoadCode = async (v: VG, forceLoad?: boolean) => {
if (forceLoad) {
codeLoaded.clear();
v.status = "load-code";

3
app/web/src/nova/view/logic/load-code-old.ts Normal file
View File

@ -0,0 +1,3 @@
import { VG } from "./global";
export const oldLoadCode = (v: VG) => {};

11
app/web/src/nova/view/view.tsx
View File

@ -4,11 +4,12 @@ import { IContent } from "../../utils/types/general";
import { Loading } from "../../utils/ui/loading";
import { ViewGlobal } from "./logic/global";
import { vInit } from "./logic/init";
import { vLoadCode } from "./logic/load-code";
import { newLoadCode } from "./logic/load-code-new";
import { VLoad, VLoadComponent } from "./logic/types";
import { VEntry } from "./render/entry";
import { ErrorBox } from "./render/meta/script/error-box";
import { IRoot } from "../../utils/types/root";
import { oldLoadCode } from "./logic/load-code-old";
type ViewProp = {
load: VLoad;
@ -17,6 +18,7 @@ type ViewProp = {
page_id: string;
api_url: string;
mode: "desktop" | "mobile";
code_mode?: "old" | "new";
layout?: { show: boolean };
isEditor?: boolean;
bind?: (arg: { render: () => void }) => void;
@ -41,6 +43,7 @@ const BoxedView: FC<ViewProp> = ({
layout,
page_id,
bind,
code_mode,
hover,
active,
hidden,
@ -79,7 +82,11 @@ const BoxedView: FC<ViewProp> = ({
}
if (v.status === "load-code" || v.status === "loading-code") {
vLoadCode(v);
if (!code_mode || code_mode === "new") {
newLoadCode(v);
} else {
oldLoadCode(v);
}
if (v.status === "load-code" || v.status === "loading-code") {
return (
<>