fixing deploy

app/db/prisma/schema.prisma

@@ -126,7 +126,9 @@ model site {
   responsive     String           @default("all")
   npm_cache      String           @default(" ") @db.VarChar
   code_mode      String           @default("old") @db.VarChar(5)
+  deploy_name    String           @default("DEV")
   component_site component_site[]
+  deploy_target  deploy_target[]
   npm_site       npm_site[]
   page           page[]
   page_folder    page_folder[]
@@ -167,8 +169,9 @@ model page_history {
 
 model deploy_target {
   id      String @id(map: "deploy_target_id") @default(dbgenerated("gen_random_uuid()")) @db.Uuid
-  id_site Int
   name    String
   api_url String
   domain  String
+  id_site String @db.Uuid
+  site    site   @relation(fields: [id_site], references: [id], onDelete: NoAction, onUpdate: NoAction)
 }

app/srv/core/index.css

@@ -640,6 +640,10 @@ video {
   top: 0px;
 }
 
+.top-2 {
+  top: 0.5rem;
+}
+
 .top-\[0\.2rem\] {
   top: 0.2rem;
 }
@@ -824,10 +828,6 @@ video {
   margin-left: 2rem;
 }
 
-.mr-0 {
-  margin-right: 0px;
-}
-
 .mr-1 {
   margin-right: 0.25rem;
 }
@@ -1072,6 +1072,10 @@ video {
   min-height: 28px;
 }
 
+.min-h-\[300px\] {
+  min-height: 300px;
+}
+
 .min-h-\[30px\] {
   min-height: 30px;
 }
@@ -1611,6 +1615,10 @@ video {
   border-bottom-width: 1px;
 }
 
+.border-b-0 {
+  border-bottom-width: 0px;
+}
+
 .border-b-2 {
   border-bottom-width: 2px;
 }
@@ -1639,10 +1647,6 @@ video {
   border-top-width: 1px;
 }
 
-.border-t-0 {
-  border-top-width: 0px;
-}
-
 .border-\[\#d1d5db\] {
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
@@ -2155,6 +2159,10 @@ video {
   padding-bottom: 6px;
 }
 
+.pb-0 {
+  padding-bottom: 0px;
+}
+
 .pb-1 {
   padding-bottom: 0.25rem;
 }
@@ -2632,11 +2640,6 @@ body {
   border-color: rgb(34 197 94 / var(--tw-border-opacity));
 }
 
-.hover\:border-green-700:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(21 128 61 / var(--tw-border-opacity));
-}
-
 .hover\:border-orange-500:hover {
   --tw-border-opacity: 1;
   border-color: rgb(249 115 22 / var(--tw-border-opacity));
@@ -2735,11 +2738,6 @@ body {
   background-color: rgb(134 239 172 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-green-50:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(240 253 244 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-green-600:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(22 163 74 / var(--tw-bg-opacity));
@@ -2790,6 +2788,11 @@ body {
   background-color: rgb(220 38 38 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-red-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(185 28 28 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-slate-200:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(226 232 240 / var(--tw-bg-opacity));
@@ -2819,11 +2822,6 @@ body {
   color: rgb(29 78 216 / var(--tw-text-opacity));
 }
 
-.hover\:text-green-700:hover {
-  --tw-text-opacity: 1;
-  color: rgb(21 128 61 / var(--tw-text-opacity));
-}
-
 .hover\:text-green-900:hover {
   --tw-text-opacity: 1;
   color: rgb(20 83 45 / var(--tw-text-opacity));

app/srv/ws/sync/actions/site_load.ts

@@ -50,6 +50,7 @@ export const site_load: SAction["site"]["load"] = async function (
         name: site.name,
         config: config as ESite["config"],
         domain: site.domain,
+        deploy_name: site.deploy_name,
         js: site.js || "",
         responsive: site.responsive as ESite["responsive"],
         js_compiled: site.js_compiled || "",

app/web/src/nova/ed/logic/ed-global.ts

@@ -16,6 +16,7 @@ export const EmptySite = {
   name: "",
   domain: "",
   config: { api_url: "" },
+  deploy_name:"",
   js: "",
   js_compiled: "",
   responsive: "" as "desktop-only" | "mobile-only" | "responsive",
@@ -324,7 +325,7 @@ export const EDGlobal = {
         on_pick?: (group_id: string) => void | Promise<void>;
         on_close?: () => void | Promise<void>;
       },
-      api: { open: false },
+      api: { open: true },
     },
   },
 };

app/web/src/nova/ed/panel/popup/api/api-db.tsx

@@ -8,14 +8,21 @@ export const EdApiDB = ({
   db,
   render,
   update,
+  api_url,
 }: {
   db: { url: string };
+  api_url: string;
   render: () => void;
   update: () => void;
 }) => {
   const p = useGlobal(EDGlobal, "EDITOR");
   const local = useLocal({ url: db.url, has_prisma: false });
-  const api = apiRef[apiUrl(p)];
+  const api = apiRef[api_url];
+
+  let is_main = true;
+  if (apiUrl(p) !== api_url) {
+    is_main = false;
+  }
 
   useEffect(() => {
     _api.local_prisma("check", p.site.id).then((res: any) => {
@@ -69,19 +76,6 @@ export const EdApiDB = ({
                         url: `${location.protocol}//${location.host}/local-prisma/src/${p.site.id}`,
                       });
 
-                      server.status = "ready";
-                      render();
-                      alert("Prisma Schema Synchronized");
-                    }}
-                  >
-                    Sync prisma.schema
-                  </div>
-                  <div
-                    className="border rounded-sm px-2 text-[12px] hover:bg-blue-100 cursor-pointer"
-                    onClick={async () => {
-                      server.status = "restarting";
-                      render();
-
                       await api._deploy({
                         type: "db-gen",
                         id_site: p.site.id,
@@ -90,14 +84,16 @@ export const EdApiDB = ({
                       render();
                       alert("DB GENERATE: OK\nRESTART: OK");
 
-                      localStorage.removeItem(`schema-md-${p.site.id}`);
+                      if (is_main) {
-                      _api.clear_route_cache(p.site.id);
+                        localStorage.removeItem(`schema-md-${p.site.id}`);
-                      _api.type_rebuild(p.site.id);
+                        _api.clear_route_cache(p.site.id);
+                        _api.type_rebuild(p.site.id);
 
-                      location.reload();
+                        location.reload();
+                      }
                     }}
                   >
-                    Generate
+                    Sync & Generate prisma.schema
                   </div>
                 </>
               ) : (
@@ -114,10 +110,12 @@ export const EdApiDB = ({
                     render();
                     alert("DB PULL & GENERATE: OK\nRESTART: OK");
 
-                    localStorage.removeItem(`schema-md-${p.site.id}`);
+                    if (is_main) {
-                    _api.clear_route_cache(p.site.id);
+                      localStorage.removeItem(`schema-md-${p.site.id}`);
-                    _api.type_rebuild(p.site.id);
+                      _api.clear_route_cache(p.site.id);
-                    location.reload();
+                      _api.type_rebuild(p.site.id);
+                      location.reload();
+                    }
                   }}
                 >
                   DB Pull
@@ -137,10 +135,11 @@ export const EdApiDB = ({
                 server.status = "ready";
                 render();
                 alert("RESTART: OK");
-                _api.clear_route_cache(p.site.id);
-                console.warn("reload 8");
 
-                location.reload();
+                if (is_main) {
+                  _api.clear_route_cache(p.site.id);
+                  location.reload();
+                }
               }}
             >
               Restart Server

app/web/src/nova/ed/panel/popup/api/api-deploy.tsx

@@ -5,7 +5,9 @@ import { apiRef, apiUrl, server } from "./api-utils";
 
 export const EdApiDeploy = ({
   deploy,
+  api_url,
 }: {
+  api_url: string;
   deploy: {
     current: number;
     now: number;
@@ -13,12 +15,12 @@ export const EdApiDeploy = ({
   };
 }) => {
   const p = useGlobal(EDGlobal, "EDITOR");
-  const api = apiRef[apiUrl(p)];
+  const api = apiRef[api_url];
   const local = deploy;
   const deploys = local.deploys;
 
   return (
-    <div className="flex border-slate-200 boxed  flex flex-col items-stretch">
+    <div className="flex border-slate-200 boxed  flex-col items-stretch">
       <div className="flex justify-between py-2 px-2 ">
         <div>History:</div>
         <div

app/web/src/nova/ed/panel/popup/api/api-server.tsx

@@ -1,9 +1,12 @@
 import { forwardRef } from "react";
-import { useGlobal } from "web-utils";
+import { useGlobal, useLocal } from "web-utils";
 import { Modal } from "../../../../../utils/ui/modal";
 import { EDGlobal } from "../../../logic/ed-global";
 import { EdApiTab } from "./api-tab";
 import trim from "lodash.trim";
+import { Popover } from "../../../../../utils/ui/popover";
+import { deploy_target } from "../../../../../../../db/db";
+import { apiRef, apiUrl } from "./api-utils";
 
 export const EdPopApi = () => {
   const p = useGlobal(EDGlobal, "EDITOR");
@@ -35,43 +38,215 @@ export const EdApiServer = forwardRef<
   }
 >(({ popover }, ref) => {
   const p = useGlobal(EDGlobal, "EDITOR");
+  const local = useLocal(
+    {
+      tabs: [{ name: p.site.deploy_name, id: "" }] as deploy_target[],
+      active: 0,
+      open: false,
+    },
+    async () => {
+      const targets = await _db.deploy_target.findMany({
+        where: { id_site: p.site.id },
+      });
+
+      for (const t of targets) {
+        local.tabs.push(t);
+      }
+      local.render();
+    }
+  );
 
   return (
     <div
       ref={ref}
-      className="flex flex-col w-[400px] items-stretch bg-white -mx-[8px] -my-[3px] text-[14px]"
+      className="flex flex-col w-[400px] min-h-[400px] items-stretch bg-white -mx-[8px] -my-[3px] text-[14px]"
     >
+      <div className="flex bg-slate-100 p-1 border-b pb-0 select-none">
+        {local.tabs.map((e, idx) => {
+          return (
+            <div
+              key={idx}
+              className={cx(
+                "px-2 border border-b-0 flex cursor-pointer items-center space-x-2",
+                local.active === idx
+                  ? "bg-white  hover:bg-blue-100"
+                  : "px-2 border border-b-0 hover:bg-blue-100",
+                css`
+                  margin-bottom: -1px;
+                `,
+                idx > 0 && `ml-1`
+              )}
+              onClick={() => {
+                local.active = idx;
+                local.render();
+              }}
+            >
+              <div>{e.name}</div>
+              {local.active === idx && (
+                <Popover
+                  open={local.open}
+                  backdrop={false}
+                  onOpenChange={(open) => {
+                    local.open = open;
+                    local.render();
+                  }}
+                  content={
+                    <div className="px-2 pb-2 flex flex-col space-y-2 items-center">
+                      <svg
+                        className="absolute top-2 right-2 cursor-pointer"
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="16"
+                        height="16"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        onClick={() => {
+                          local.open = false;
+                          local.render();
+                        }}
+                      >
+                        <path d="M18 6 6 18" />
+                        <path d="m6 6 12 12" />
+                      </svg>
+                      <label>
+                        <div>Deploy Name:</div>
+                        <input
+                          defaultValue={e.name}
+                          autoFocus
+                          spellCheck={false}
+                          className="border p-1"
+                          onKeyUp={(ev) => {
+                            if (ev.key === "Enter") {
+                              ev.currentTarget.blur();
+                            }
+                          }}
+                          onBlur={async (ev) => {
+                            const name = ev.currentTarget.value;
+                            if (name !== e.name) {
+                              if (confirm(`Rename ${e.name} to ${name}?`)) {
+                                if (idx === 0) {
+                                  await _db.site.update({
+                                    where: { id: p.site.id },
+                                    data: { deploy_name: name },
+                                  });
+                                } else {
+                                  const target = local.tabs[
+                                    idx
+                                  ] as deploy_target;
+                                  await _db.deploy_target.update({
+                                    where: { id: target.id },
+                                    data: { name },
+                                  });
+                                }
+                                e.name = name;
+                                local.open = false;
+                                local.render();
+                              }
+                            }
+                          }}
+                        />
+                      </label>
+                      {idx > 0 && (
+                        <div
+                          onClick={async () => {
+                            if (
+                              confirm(
+                                "Are you sure to delete this deploy target ? This is cannot be reversed."
+                              )
+                            ) {
+                              const target = local.tabs[idx] as deploy_target;
+                              await _db.deploy_target.delete({
+                                where: { id: target.id },
+                              });
+                              local.active -= 1;
+                              local.tabs.splice(idx, 1);
+                              local.render();
+                            }
+                          }}
+                          className="mt-2 rounded bg-red-500 text-white px-2 py-1 cursor-pointer hover:bg-red-700"
+                        >
+                          Delete
+                        </div>
+                      )}
+                    </div>
+                  }
+                >
+                  <svg
+                    onClick={() => {
+                      local.open = true;
+                      local.render();
+                    }}
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="9"
+                    height="9"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="1"
+                  >
+                    <path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" />
+                    <path d="m15 5 4 4" />
+                  </svg>
+                </Popover>
+              )}
+            </div>
+          );
+        })}
+        <div
+          onClick={async () => {
+            const new_name = prompt("New Deploy Target Name:");
+            if (new_name) {
+              const new_target = await _db.deploy_target.create({
+                data: {
+                  api_url: "",
+                  domain: "",
+                  id_site: p.site.id,
+                  name: new_name,
+                },
+              });
+              local.tabs.push(new_target);
+              local.render();
+            }
+          }}
+          className="mb-1 ml-1 bg-white px-1 cursor-pointer hover:bg-blue-100 border flex items-center justify-center"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M5 12h14" />
+            <path d="M12 5v14" />
+          </svg>
+        </div>
+      </div>
       <EdApiTab
         onRender={(update) => {
           popover.onClose = update;
         }}
+        target={local.active > 0 ? local.tabs[local.active] : undefined}
         id_site={p.site.id}
         api_url={p.site.config.api_url}
         onUpdate={async ({ api_url }) => {
-          p.render();
+          if (local.active === 0) {
-          p.site.config.api_url = trim(api_url, "/");
+            p.render();
-          await p.sync?.site.update(p.site.id, {
+            p.site.config.api_url = trim(api_url, "/");
-            config: { api_url: api_url },
+            await p.sync?.site.update(p.site.id, {
-          });
+              config: { api_url: api_url },
-
+            });
-          // if (local.hasDB && local.oldDB.url !== local.db.url) {
+          } else {
-          //   server.status = "saving";
+            const target = local.tabs[local.active];
-          //   p.render();
+            await _db.deploy_target.update({
-
+              where: { id: target.id },
-          //   await apiRef[apiUrl(p)]._deploy({
+              data: { api_url },
-          //     type: "db-update",
+            });
-          //     id_site: p.site.id,
+          }
-          //     url: local.db.url,
-          //   });
-          //   local.oldDB.url = local.db.url;
-          //   p.render();
-          // }
-
-          // if (server.status === "saving") {
-          //   await check();
-          //   server.status = "ready";
-          //   p.render();
-          // }
         }}
       />
     </div>

app/web/src/nova/ed/panel/popup/api/api-tab.tsx

@@ -1,52 +1,54 @@
 import trim from "lodash.trim";
-import { FC } from "react";
+import { FC, useEffect } from "react";
 import { deepClone, useLocal } from "web-utils";
+import { deploy_target } from "../../../../../../../db/db";
 import { EdApiDB } from "./api-db";
 import { EdApiDeploy } from "./api-deploy";
-import { apiRef, checkAPI, dev, server } from "./api-utils";
+import { checkAPI, dev, server } from "./api-utils";
 
 export const EdApiTab: FC<{
   onRender: (fn: () => void) => void;
+  target?: deploy_target;
   api_url: string;
   id_site: string;
   onUpdate: (arg: { api_url: string }) => {};
-}> = ({ onRender, api_url, id_site, onUpdate }) => {
+}> = ({ onRender, api_url, id_site, onUpdate, target }) => {
-  const local = useLocal(
+  const local = useLocal({
-    {
+    api_url,
-      api_url,
+    status: "init" as "init" | "online" | "error" | "offline" | "checking",
-      status: "checking" as "online" | "error" | "offline" | "checking",
+    deployable: false,
-      deployable: false,
+    db: { url: "" },
-      db: { url: "" },
+    oldDB: { url: "" },
-      oldDB: { url: "" },
+    domains: [] as string[],
-      domains: [] as string[],
+    hasDB: false,
-      hasDB: false,
+    deploy: {
-      deploy: {
+      now: 0,
-        now: 0,
+      current: 0,
-        current: 0,
+      deploys: [] as number[],
-        deploys: [] as number[],
-      },
     },
-    () => {
+  });
-      try {
-        if (dev) {
-          const vdev = JSON.parse(localStorage.getItem("prasi-dev") || "{}");
 
-          if (vdev && Object.keys(vdev).length > 0) {
+  useEffect(() => {
-            dev.url = vdev.url;
+    check();
-            dev.enabled = vdev.enabled;
+  }, [target]);
-          }
-        }
-      } catch (e) {}
-      check();
-    }
-  );
-
-  const url = api_url;
 
   const check = async () => {
+    if (local.status === "checking") return;
+    local.status = "checking";
     local.render();
-    const res = await checkAPI(api_url, id_site);
+    let url = target ? target.api_url : api_url;
+    const res = await checkAPI(url, id_site);
+
+    local.api_url = url;
+    local.status = "online";
+
     if (typeof res === "object") {
+      // await apiRef[apiUrl(p)]._deploy({
+      //   type: "db-update",
+      //   id_site: p.site.id,
+      //   url: local.db.url,
+      // });
+
       local.db = res.db;
       local.domains = res.domains;
       local.oldDB = deepClone(res.db);
@@ -73,7 +75,7 @@ export const EdApiTab: FC<{
     }
   };
   const update = async () => {
-    if (local.api_url !== api_url) {
+    if (local.api_url !== api_url && local.status !== "checking") {
       server.status = "saving";
       onUpdate({ api_url: local.api_url });
     }
@@ -85,7 +87,7 @@ export const EdApiTab: FC<{
     <>
       <div className="flex justify-between items-center pr-1">
         <div className="p-1">Server URL:</div>
-        {url && (
+        {local.api_url && (
           <div className="text-[12px]">
             {local.status === "online" && (
               <div className="bg-green-700 px-2 text-white">ONLINE</div>
@@ -101,65 +103,74 @@ export const EdApiTab: FC<{
             )}
           </div>
         )}
-        {!url && (
+        {!local.api_url && (
           <div className="text-[12px] text-slate-500">INVALID SERVER</div>
         )}
       </div>
-      <div className="flex border-y">
+      {local.status !== "checking" && (
-        <div className="flex flex-1 p-1 ">
-          <input
-            spellCheck={false}
-            value={local.api_url}
-            onChange={(e) => {
-              local.api_url = e.currentTarget.value;
-              if (
-                local.api_url.startsWith("http://") ||
-                local.api_url.startsWith("https://")
-              ) {
-                if (local.api_url.length > 8) {
-                  local.api_url = trim(local.api_url, "/");
-                }
-              }
-              local.render();
-            }}
-            onFocus={(e) => {
-              if (!e.currentTarget.value) {
-                local.api_url = `https://`;
-                local.render();
-              }
-            }}
-            type="text"
-            className={cx(
-              "outline-none focus:border-blue-500 flex-1",
-              dev.enabled && "line-through opacity-30"
-            )}
-            onKeyDown={(e) => {
-              if (e.key === "Enter") {
-                e.currentTarget.blur();
-              }
-            }}
-            onBlur={update}
-            placeholder="https://..."
-          />
-        </div>
-      </div>
-
-      {local.status === "online" && (
         <>
-          {!local.deployable && !local.db && (
+          <div className="flex border-y">
-            <div className="h-[50px] flex items-center justify-center text-slate-400 text-center">
+            <div className="flex flex-1 ">
-              This server is not deployable <br />
+              <input
-              and do not have DB
+                spellCheck={false}
+                value={local.api_url}
+                onChange={(e) => {
+                  local.api_url = e.currentTarget.value;
+                  if (
+                    local.api_url.startsWith("http://") ||
+                    local.api_url.startsWith("https://")
+                  ) {
+                    if (local.api_url.length > 8) {
+                      local.api_url = trim(local.api_url, "/");
+                    }
+                  }
+                  local.render();
+                }}
+                onFocus={(e) => {
+                  if (!e.currentTarget.value) {
+                    local.api_url = `https://`;
+                    local.render();
+                  }
+                }}
+                type="text"
+                className={cx(
+                  " flex-1  p-1",
+                  dev.enabled && "line-through opacity-30"
+                )}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") {
+                    e.currentTarget.blur();
+                  }
+                }}
+                onBlur={update}
+                placeholder="https://..."
+              />
             </div>
+          </div>
+
+          {local.status === "online" && (
+            <>
+              {!local.deployable && !local.db && (
+                <div className="h-[50px] flex items-center justify-center text-slate-400 text-center">
+                  This server is not deployable <br />
+                  and do not have DB
+                </div>
+              )}
+            </>
+          )}
+          {local.hasDB && (
+            <EdApiDB
+              api_url={local.api_url}
+              db={local.db}
+              render={local.render}
+              update={update}
+            />
+          )}
+          {local.deployable && (
+            <>
+              <EdApiDeploy api_url={local.api_url} deploy={local.deploy} />
+            </>
           )}
-        </>
-      )}
-      {local.hasDB && (
-        <EdApiDB db={local.db} render={local.render} update={update} />
-      )}
-      {local.deployable && (
-        <>
-          <EdApiDeploy deploy={local.deploy} />
         </>
       )}
     </>