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

wip fix

This commit is contained in:
Rizky 2024-01-22 22:58:08 +07:00
parent bce86b5881
commit 804a5ffc98
2 changed files with 255 additions and 250 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,276 +8,276 @@ import { Tooltip } from "../../../../../utils/ui/tooltip";
import { EDGlobal } from "../../../logic/ed-global"; import { EDGlobal } from "../../../logic/ed-global";
import { CodeAssign } from "./assign"; import { CodeAssign } from "./assign";
import { import {
iconChevronDown, iconChevronDown,
iconGear, iconGear,
iconLoading, iconLoading,
iconLog, iconLog,
iconTrash, iconTrash,
} from "./icons"; } from "./icons";
import { CodeNameItem, CodeNameList, codeName } from "./name-list"; import { CodeNameItem, CodeNameList, codeName } from "./name-list";
export const code = { export const code = {
mode: "" as "" | "old" | "new", mode: "" as "" | "old" | "new",
}; };
export const EdPopCode = () => { export const EdPopCode = () => {
const p = useGlobal(EDGlobal, "EDITOR"); const p = useGlobal(EDGlobal, "EDITOR");
useEffect(() => { useEffect(() => {
(async () => { (async () => {
if (code.mode === "new") { if (code.mode === "new") {
if (p.ui.popup.code.open) { if (p.ui.popup.code.open) {
const id_code = await p.sync.activity("site", { const id_code = await p.sync.activity("site", {
action: p.ui.popup.code.open ? "open" : "close", action: p.ui.popup.code.open ? "open" : "close",
id: p.site.id, id: p.site.id,
type: "code", type: "code",
name: p.ui.popup.code.name, name: p.ui.popup.code.name,
}); });
if (id_code) { if (id_code) {
p.ui.popup.code.id = id_code; p.ui.popup.code.id = id_code;
p.render(); p.render();
} }
} }
p.ui.popup.code.init = true; p.ui.popup.code.init = true;
} }
})(); })();
}, [p.ui.popup.code.open]); }, [p.ui.popup.code.open]);
useEffect(() => { useEffect(() => {
if (code.mode === "") { if (code.mode === "") {
db.code.findFirst({ where: { id_site: p.site.id } }).then((e) => { db.code.findFirst({ where: { id_site: p.site.id } }).then((e) => {
code.mode = !!e ? "new" : "old"; code.mode = e ? "new" : "old";
p.render(); p.render();
}); });
} }
}, []); }, []);
return ( return (
<Modal <Modal
fade={false} fade={false}
open={p.ui.popup.code.open} open={p.ui.popup.code.open}
onOpenChange={(open) => { onOpenChange={(open) => {
if (!open) { if (!open) {
p.ui.popup.code.open = false; p.ui.popup.code.open = false;
p.render(); p.render();
} }
}} }}
> >
<div <div
className={cx("bg-white select-none fixed inset-[50px] bottom-0 flex")} className={cx("bg-white select-none fixed inset-[50px] bottom-0 flex")}
> >
{!code.mode && <Loading note="checking-version" backdrop={false} />} {!code.mode && <Loading note="checking-version" backdrop={false} />}
{code.mode === "new" && <CodeBody />} {code.mode === "new" && <CodeBody />}
{code.mode === "old" && ( {code.mode === "old" && (
<div className="flex items-center justify-center flex-col flex-1"> <div className="flex items-center justify-center flex-col flex-1">
<div>This site still using old code</div> <div>This site still using old code</div>
<div <div
onClick={() => { onClick={() => {
if ( if (
confirm( confirm(
"Old code will not load, are you sure want to upgrade ?" "Old code will not load, are you sure want to upgrade ?",
) )
) { ) {
code.mode = "new"; code.mode = "new";
p.ui.popup.code.open = false; p.ui.popup.code.open = false;
p.render(); p.render();
} }
}} }}
className="border border-blue-500 cursor-pointer bg-blue-100 p-2 hover:bg-blue-200" className="border border-blue-500 cursor-pointer bg-blue-100 p-2 hover:bg-blue-200"
> >
Upgrade to New Code Project Upgrade to New Code Project
</div> </div>
<div className="text-xs py-2"> <div className="text-xs py-2">
Warning: old code will not load once upgraded. Warning: old code will not load once upgraded.
</div> </div>
</div> </div>
)} )}
</div> </div>
</Modal> </Modal>
); );
}; };
const CodeBody = () => { const CodeBody = () => {
const p = useGlobal(EDGlobal, "EDITOR"); const p = useGlobal(EDGlobal, "EDITOR");
const local = useLocal({ namePicker: false, codeAssign: false }); const local = useLocal({ namePicker: false, codeAssign: false });
const vscode_url = isLocalhost()
? "http://localhost:3000?"
: "https://prasi-vsc.avolut.com/?tkn=prasi&";
return ( const vscode_url = isLocalhost()
<div className="relative w-full h-full flex flex-col"> ? "http://localhost:3000?"
<div className="border-b flex h-[40px] items-stretch"> : "https://prasi-vsc.avolut.com/?tkn=prasi&";
<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", { return (
action: "open", <div className="relative w-full h-full flex flex-col">
id: p.site.id, <div className="border-b flex h-[40px] items-stretch">
type: "code", <Popover
name: p.ui.popup.code.name, 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();
if (id_code) { const id_code = await p.sync.activity("site", {
p.ui.popup.code.id = id_code; action: "open",
p.render(); id: p.site.id,
} type: "code",
}} name: p.ui.popup.code.name,
/> });
}
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" && ( if (id_code) {
<> p.ui.popup.code.id = id_code;
<Tooltip p.render();
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 ( popoverClassName="bg-white shadow-md"
prompt( className={cx(
"Are you sure want to delete this code?\ntype 'yes' to confirm:" "flex items-center px-2 w-[200px] hover:bg-blue-50 space-x-1",
) === "yes" "cursor-pointer justify-between",
) { )}
await db.code.delete({ open={local.namePicker}
where: { id: p.ui.popup.code.id }, 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>
codeName.list = codeName.list.filter( {p.ui.popup.code.name !== "site" && p.ui.popup.code.name !== "SSR" && (
(e) => e.id !== p.ui.popup.code.id <>
); <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 },
});
p.ui.popup.code.name = codeName.list[0].name; codeName.list = codeName.list.filter(
p.ui.popup.code.id = codeName.list[0].id; (e) => e.id !== p.ui.popup.code.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.name = codeName.list[0].name;
{!p.ui.popup.code.open || !p.ui.popup.code.id ? ( p.ui.popup.code.id = codeName.list[0].id;
<Loading backdrop={false} /> p.render();
) : ( }
<> }}
<iframe >
className="flex flex-1 absolute inset-0 w-full h-full z-10" <div
src={`${vscode_url}folder=/site/code/${p.site.id}/${p.ui.popup.code.id}`} dangerouslySetInnerHTML={{
></iframe> __html: iconTrash,
<div className="flex flex-1 absolute inset-0 z-0 items-center justify-center"> }}
Loading VSCode... ></div>
</div> </Tooltip>
</> <Popover
)} open={local.codeAssign}
</div> 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>
)}
{(local.namePicker || local.codeAssign) && ( <div className="flex flex-1 relative">
<div {!p.ui.popup.code.open || !p.ui.popup.code.id ? (
className="fixed inset-0 z-50" <Loading backdrop={false} />
onClick={() => { ) : (
local.namePicker = false; <>
local.codeAssign = false; <iframe
local.render(); 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}`}
></div> ></iframe>
)} <div className="flex flex-1 absolute inset-0 z-0 items-center justify-center">
</div> 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
biome.json Normal file
View File

@ -0,0 +1,5 @@
{
"linter": {
"enabled": false
}
}