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

fix

This commit is contained in:
Rizky 2023-11-17 18:27:08 +07:00
parent a6b438ac85
commit 14f3c58a0e
4 changed files with 134 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
app/srv/api/code.ts
View File

@ -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";
},
};

69
app/web/src/render/ed/panel/popup/code/code.tsx
View File

@ -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={<CodeNameList />}
content={
<CodeNameList
onPick={(e) => {
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();
}}
>
<div className="capitalize overflow-ellipsis flex-1 flex items-center space-x-1">
<NameIcon name={p.ui.popup.code.name} />
<div>{p.ui.popup.code.name}</div>
<div className="capitalize overflow-ellipsis flex-1 flex items-center space-x-2">
<CodeNameItem name={p.ui.popup.code.name} />
</div>
<div
dangerouslySetInnerHTML={{
@ -78,17 +86,24 @@ export const EdPopCode = () => {
></div>
</Popover>
{p.ui.popup.code.name !== "site" && (
<div className="hover:bg-blue-100 flex items-center justify-center border w-[20px] h-[20px] flex">
<div
dangerouslySetInnerHTML={{
__html: iconGear,
}}
></div>
</div>
)}
{p.ui.popup.code.name !== "site" &&
p.ui.popup.code.name !== "SSR" && (
<Tooltip
content="Assign Code Module"
delay={0}
placement="bottom"
className="flex items-center border-l relative border-l hover:bg-blue-50 cursor-pointer px-2 transition-all"
onClick={() => {}}
>
<div
dangerouslySetInnerHTML={{
__html: iconGear,
}}
></div>
</Tooltip>
)}
<Tooltip
content="stdout log"
content="STDOUT Log"
delay={0}
placement="bottom"
className="flex items-stretch relative border-l"
@ -119,16 +134,22 @@ export const EdPopCode = () => {
</div>
)}
{!p.ui.popup.code.open || !p.ui.popup.code.id ? (
<div className="flex flex-1 relative">
<div className="flex flex-1 relative">
{!p.ui.popup.code.open || !p.ui.popup.code.id ? (
<Loading backdrop={false} />
</div>
) : (
<iframe
className="flex flex-1"
src={`${vscode_url}folder=/site/code/${p.ui.popup.code.id}`}
></iframe>
)}
) : (
<>
<iframe
className="flex flex-1 absolute inset-0 w-full h-full z-10"
src={`${vscode_url}folder=/site/code/${p.ui.popup.code.id}`}
></iframe>
<div className="flex flex-1 absolute inset-0 z-0 items-center justify-center">
Loading...
</div>
</>
)}
</div>
{local.namePicker && (
<div
className="absolute inset-0"

11
app/web/src/render/ed/panel/popup/code/icons.tsx
View File

@ -1,6 +1,15 @@
export const iconLog = `<svg version="1.1" id="L2" width="15" height="15" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"><circle fill="none" stroke="currentColor" stroke-width="4" stroke-miterlimit="10" cx="50" cy="50" r="48"/><line fill="none" stroke-linecap="round" stroke="currentColor" stroke-width="4" stroke-miterlimit="10" x1="50" y1="50" x2="85" y2="50.5"><animateTransform attributeName="transform" dur="2s" type="rotate" from="0 50 50" to="360 50 50" repeatCount="indefinite"/></line><line fill="none" stroke-linecap="round" stroke="currentColor" stroke-width="4" stroke-miterlimit="10" x1="50" y1="50" x2="49.5" y2="74"><animateTransform attributeName="transform" dur="15s" type="rotate" from="0 50 50" to="360 50 50" repeatCount="indefinite"/></line></svg>`;
export const iconSite = `<svg width="12" height="12" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.5 3C2.22386 3 2 3.22386 2 3.5V9.5C2 9.77614 2.22386 10 2.5 10H12.5C12.7761 10 13 9.77614 13 9.5V3.5C13 3.22386 12.7761 3 12.5 3H2.5ZM1 9.5C1 10.1531 1.4174 10.7087 2 10.9146V11.5C2 12.3284 2.67157 13 3.5 13H11.5C12.3284 13 13 12.3284 13 11.5V10.9146C13.5826 10.7087 14 10.1531 14 9.5V3.5C14 2.67157 13.3284 2 12.5 2H2.5C1.67157 2 1 2.67157 1 3.5V9.5ZM12 11.5V11H3V11.5C3 11.7761 3.22386 12 3.5 12H11.5C11.7761 12 12 11.7761 12 11.5ZM5.5 6C5.22386 6 5 6.22386 5 6.5C5 6.77614 5.22386 7 5.5 7H9.5C9.77614 7 10 6.77614 10 6.5C10 6.22386 9.77614 6 9.5 6H5.5Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>`;
export const iconSite = `<svg width="13" height="13" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.07926 0.222253C7.31275 -0.007434 7.6873 -0.007434 7.92079 0.222253L14.6708 6.86227C14.907 7.09465 14.9101 7.47453 14.6778 7.71076C14.4454 7.947 14.0655 7.95012 13.8293 7.71773L13 6.90201V12.5C13 12.7761 12.7762 13 12.5 13H2.50002C2.22388 13 2.00002 12.7761 2.00002 12.5V6.90201L1.17079 7.71773C0.934558 7.95012 0.554672 7.947 0.32229 7.71076C0.0899079 7.47453 0.0930283 7.09465 0.32926 6.86227L7.07926 0.222253ZM7.50002 1.49163L12 5.91831V12H10V8.49999C10 8.22385 9.77617 7.99999 9.50002 7.99999H6.50002C6.22388 7.99999 6.00002 8.22385 6.00002 8.49999V12H3.00002V5.91831L7.50002 1.49163ZM7.00002 12H9.00002V8.99999H7.00002V12Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>`;
export const iconSSR = `<svg width="12" height="12" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.30902 1C2.93025 1 2.58398 1.214 2.41459 1.55279L1.05279 4.27639C1.01807 4.34582 1 4.42238 1 4.5V13C1 13.5523 1.44772 14 2 14H13C13.5523 14 14 13.5523 14 13V4.5C14 4.42238 13.9819 4.34582 13.9472 4.27639L12.5854 1.55281C12.416 1.21403 12.0698 1.00003 11.691 1.00003L7.5 1.00001L3.30902 1ZM3.30902 2L7 2.00001V4H2.30902L3.30902 2ZM8 4V2.00002L11.691 2.00003L12.691 4H8ZM7.5 5H13V13H2V5H7.5ZM5.5 7C5.22386 7 5 7.22386 5 7.5C5 7.77614 5.22386 8 5.5 8H9.5C9.77614 8 10 7.77614 10 7.5C10 7.22386 9.77614 7 9.5 7H5.5Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>`;
export const iconChevronDown = `<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>`;
export const iconLoading = `<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 2.5C3 2.22386 3.22386 2 3.5 2H9.08579C9.21839 2 9.34557 2.05268 9.43934 2.14645L11.8536 4.56066C11.9473 4.65443 12 4.78161 12 4.91421V12.5C12 12.7761 11.7761 13 11.5 13H3.5C3.22386 13 3 12.7761 3 12.5V2.5ZM3.5 1C2.67157 1 2 1.67157 2 2.5V12.5C2 13.3284 2.67157 14 3.5 14H11.5C12.3284 14 13 13.3284 13 12.5V4.91421C13 4.51639 12.842 4.13486 12.5607 3.85355L10.1464 1.43934C9.86514 1.15804 9.48361 1 9.08579 1H3.5ZM4.5 4C4.22386 4 4 4.22386 4 4.5C4 4.77614 4.22386 5 4.5 5H7.5C7.77614 5 8 4.77614 8 4.5C8 4.22386 7.77614 4 7.5 4H4.5ZM4.5 7C4.22386 7 4 7.22386 4 7.5C4 7.77614 4.22386 8 4.5 8H10.5C10.7761 8 11 7.77614 11 7.5C11 7.22386 10.7761 7 10.5 7H4.5ZM4.5 10C4.22386 10 4 10.2239 4 10.5C4 10.7761 4.22386 11 4.5 11H10.5C10.7761 11 11 10.7761 11 10.5C11 10.2239 10.7761 10 10.5 10H4.5Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>`;
export const iconPlus = `<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 2.75C8 2.47386 7.77614 2.25 7.5 2.25C7.22386 2.25 7 2.47386 7 2.75V7H2.75C2.47386 7 2.25 7.22386 2.25 7.5C2.25 7.77614 2.47386 8 2.75 8H7V12.25C7 12.5261 7.22386 12.75 7.5 12.75C7.77614 12.75 8 12.5261 8 12.25V8H12.25C12.5261 8 12.75 7.77614 12.75 7.5C12.75 7.22386 12.5261 7 12.25 7H8V2.75Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>`;
export const iconGear = `<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.07095 0.650238C6.67391 0.650238 6.32977 0.925096 6.24198 1.31231L6.0039 2.36247C5.6249 2.47269 5.26335 2.62363 4.92436 2.81013L4.01335 2.23585C3.67748 2.02413 3.23978 2.07312 2.95903 2.35386L2.35294 2.95996C2.0722 3.2407 2.0232 3.6784 2.23493 4.01427L2.80942 4.92561C2.62307 5.2645 2.47227 5.62594 2.36216 6.00481L1.31209 6.24287C0.924883 6.33065 0.650024 6.6748 0.650024 7.07183V7.92897C0.650024 8.32601 0.924883 8.67015 1.31209 8.75794L2.36228 8.99603C2.47246 9.375 2.62335 9.73652 2.80979 10.0755L2.2354 10.9867C2.02367 11.3225 2.07267 11.7602 2.35341 12.041L2.95951 12.6471C3.24025 12.9278 3.67795 12.9768 4.01382 12.7651L4.92506 12.1907C5.26384 12.377 5.62516 12.5278 6.0039 12.6379L6.24198 13.6881C6.32977 14.0753 6.67391 14.3502 7.07095 14.3502H7.92809C8.32512 14.3502 8.66927 14.0753 8.75705 13.6881L8.99505 12.6383C9.37411 12.5282 9.73573 12.3773 10.0748 12.1909L10.986 12.7653C11.3218 12.977 11.7595 12.928 12.0403 12.6473L12.6464 12.0412C12.9271 11.7604 12.9761 11.3227 12.7644 10.9869L12.1902 10.076C12.3768 9.73688 12.5278 9.37515 12.638 8.99596L13.6879 8.75794C14.0751 8.67015 14.35 8.32601 14.35 7.92897V7.07183C14.35 6.6748 14.0751 6.33065 13.6879 6.24287L12.6381 6.00488C12.528 5.62578 12.3771 5.26414 12.1906 4.92507L12.7648 4.01407C12.9766 3.6782 12.9276 3.2405 12.6468 2.95975L12.0407 2.35366C11.76 2.07292 11.3223 2.02392 10.9864 2.23565L10.0755 2.80989C9.73622 2.62328 9.37437 2.47229 8.99505 2.36209L8.75705 1.31231C8.66927 0.925096 8.32512 0.650238 7.92809 0.650238H7.07095ZM4.92053 3.81251C5.44724 3.44339 6.05665 3.18424 6.71543 3.06839L7.07095 1.50024H7.92809L8.28355 3.06816C8.94267 3.18387 9.5524 3.44302 10.0794 3.81224L11.4397 2.9547L12.0458 3.56079L11.1882 4.92117C11.5573 5.44798 11.8164 6.0575 11.9321 6.71638L13.5 7.07183V7.92897L11.932 8.28444C11.8162 8.94342 11.557 9.55301 11.1878 10.0798L12.0453 11.4402L11.4392 12.0462L10.0787 11.1886C9.55192 11.5576 8.94241 11.8166 8.28355 11.9323L7.92809 13.5002H7.07095L6.71543 11.932C6.0569 11.8162 5.44772 11.5572 4.92116 11.1883L3.56055 12.046L2.95445 11.4399L3.81213 10.0794C3.4431 9.55266 3.18403 8.94326 3.06825 8.2845L1.50002 7.92897V7.07183L3.06818 6.71632C3.18388 6.05765 3.44283 5.44833 3.81171 4.92165L2.95398 3.561L3.56008 2.95491L4.92053 3.81251ZM9.02496 7.50008C9.02496 8.34226 8.34223 9.02499 7.50005 9.02499C6.65786 9.02499 5.97513 8.34226 5.97513 7.50008C5.97513 6.65789 6.65786 5.97516 7.50005 5.97516C8.34223 5.97516 9.02496 6.65789 9.02496 7.50008ZM9.92496 7.50008C9.92496 8.83932 8.83929 9.92499 7.50005 9.92499C6.1608 9.92499 5.07513 8.83932 5.07513 7.50008C5.07513 6.16084 6.1608 5.07516 7.50005 5.07516C8.83929 5.07516 9.92496 6.16084 9.92496 7.50008Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>`;
export const iconModule = `<svg width="11" height="11" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 3.5C2 3.22386 2.22386 3 2.5 3H12.5C12.7761 3 13 3.22386 13 3.5V9.5C13 9.77614 12.7761 10 12.5 10H2.5C2.22386 10 2 9.77614 2 9.5V3.5ZM2 10.9146C1.4174 10.7087 1 10.1531 1 9.5V3.5C1 2.67157 1.67157 2 2.5 2H12.5C13.3284 2 14 2.67157 14 3.5V9.5C14 10.1531 13.5826 10.7087 13 10.9146V11.5C13 12.3284 12.3284 13 11.5 13H3.5C2.67157 13 2 12.3284 2 11.5V10.9146ZM12 11V11.5C12 11.7761 11.7761 12 11.5 12H3.5C3.22386 12 3 11.7761 3 11.5V11H12Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>`;

67
app/web/src/render/ed/panel/popup/code/name-list.tsx
View File

@ -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 (
<>
<div className={className}></div>
<NameIcon name={name} />
<span>{name === "site" ? "Main Site" : name}</span>
</>
);
};
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 (
<>
<div className="w-[200px] border border-b-0 flex flex-col text-sm">
{local.list.map((e) => (
{codeName.list.length === 0 && (
<div className="border-b cursor-pointer px-2 py-[3px] capitalize items-center hover:bg-blue-100 flex space-x-2">
Loading...
</div>
)}
{codeName.list.map((e) => (
<div
key={e.id}
className="border-b cursor-pointer px-2 py-[3px] capitalize items-center hover:bg-blue-100 flex space-x-2"
onClick={() => {
onPick(e);
}}
>
<NameIcon name={e.name} />
<span>{e.name}</span>
<CodeNameItem name={e.name} />
</div>
))}
<div className="border-b cursor-pointer px-2 py-[3px] capitalize items-center flex space-x-1 hover:bg-green-100 text-green-600">
@ -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 (