wip fix
This commit is contained in:
Rizky
parent
bce86b5881
commit
804a5ffc98
|
|
@ -8,276 +8,276 @@ import { Tooltip } from "../../../../../utils/ui/tooltip";
|
|||
import { EDGlobal } from "../../../logic/ed-global";
|
||||
import { CodeAssign } from "./assign";
|
||||
import {
|
||||
iconChevronDown,
|
||||
iconGear,
|
||||
iconLoading,
|
||||
iconLog,
|
||||
iconTrash,
|
||||
iconChevronDown,
|
||||
iconGear,
|
||||
iconLoading,
|
||||
iconLog,
|
||||
iconTrash,
|
||||
} from "./icons";
|
||||
import { CodeNameItem, CodeNameList, codeName } from "./name-list";
|
||||
|
||||
export const code = {
|
||||
mode: "" as "" | "old" | "new",
|
||||
mode: "" as "" | "old" | "new",
|
||||
};
|
||||
|
||||
export const EdPopCode = () => {
|
||||
const p = useGlobal(EDGlobal, "EDITOR");
|
||||
const p = useGlobal(EDGlobal, "EDITOR");
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
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,
|
||||
});
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
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();
|
||||
}
|
||||
}
|
||||
p.ui.popup.code.init = true;
|
||||
}
|
||||
})();
|
||||
}, [p.ui.popup.code.open]);
|
||||
if (id_code) {
|
||||
p.ui.popup.code.id = id_code;
|
||||
p.render();
|
||||
}
|
||||
}
|
||||
p.ui.popup.code.init = true;
|
||||
}
|
||||
})();
|
||||
}, [p.ui.popup.code.open]);
|
||||
|
||||
useEffect(() => {
|
||||
if (code.mode === "") {
|
||||
db.code.findFirst({ where: { id_site: p.site.id } }).then((e) => {
|
||||
code.mode = !!e ? "new" : "old";
|
||||
p.render();
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
if (code.mode === "") {
|
||||
db.code.findFirst({ where: { id_site: p.site.id } }).then((e) => {
|
||||
code.mode = e ? "new" : "old";
|
||||
p.render();
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
fade={false}
|
||||
open={p.ui.popup.code.open}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) {
|
||||
p.ui.popup.code.open = false;
|
||||
p.render();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<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
|
||||
onClick={() => {
|
||||
if (
|
||||
confirm(
|
||||
"Old code will not load, are you sure want to upgrade ?"
|
||||
)
|
||||
) {
|
||||
code.mode = "new";
|
||||
p.ui.popup.code.open = false;
|
||||
p.render();
|
||||
}
|
||||
}}
|
||||
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>
|
||||
);
|
||||
return (
|
||||
<Modal
|
||||
fade={false}
|
||||
open={p.ui.popup.code.open}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) {
|
||||
p.ui.popup.code.open = false;
|
||||
p.render();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<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
|
||||
onClick={() => {
|
||||
if (
|
||||
confirm(
|
||||
"Old code will not load, are you sure want to upgrade ?",
|
||||
)
|
||||
) {
|
||||
code.mode = "new";
|
||||
p.ui.popup.code.open = false;
|
||||
p.render();
|
||||
}
|
||||
}}
|
||||
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://prasi-vsc.avolut.com/?tkn=prasi&";
|
||||
const p = useGlobal(EDGlobal, "EDITOR");
|
||||
const local = useLocal({ namePicker: false, codeAssign: false });
|
||||
|
||||
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 vscode_url = isLocalhost()
|
||||
? "http://localhost:3000?"
|
||||
: "https://prasi-vsc.avolut.com/?tkn=prasi&";
|
||||
|
||||
const id_code = await p.sync.activity("site", {
|
||||
action: "open",
|
||||
id: p.site.id,
|
||||
type: "code",
|
||||
name: p.ui.popup.code.name,
|
||||
});
|
||||
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();
|
||||
|
||||
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>
|
||||
const id_code = await p.sync.activity("site", {
|
||||
action: "open",
|
||||
id: p.site.id,
|
||||
type: "code",
|
||||
name: p.ui.popup.code.name,
|
||||
});
|
||||
|
||||
{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 },
|
||||
});
|
||||
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>
|
||||
|
||||
codeName.list = codeName.list.filter(
|
||||
(e) => e.id !== p.ui.popup.code.id
|
||||
);
|
||||
{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 },
|
||||
});
|
||||
|
||||
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>
|
||||
)}
|
||||
codeName.list = codeName.list.filter(
|
||||
(e) => e.id !== p.ui.popup.code.id,
|
||||
);
|
||||
|
||||
<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>
|
||||
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>
|
||||
)}
|
||||
|
||||
{(local.namePicker || local.codeAssign) && (
|
||||
<div
|
||||
className="fixed inset-0 z-50"
|
||||
onClick={() => {
|
||||
local.namePicker = false;
|
||||
local.codeAssign = false;
|
||||
local.render();
|
||||
}}
|
||||
></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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"linter": {
|
||||
"enabled": false
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue