miqro 7.2.7 → 7.2.8

package/editor/components/file-browser.tsx

@@ -0,0 +1,311 @@
+import * as jsx from "@miqro/jsx";
+import JSX from "@miqro/jsx";
+
+interface FileBrowserFile {
+  filePath: string;
+  fileName: string;
+  language: string;
+  content?: string;
+  dirs: string[];
+}
+
+interface FileBrowserProps {
+  filter: string;
+  migrations: string[];
+  current: string;
+  isDirCollapsed: (dir: string) => boolean;
+  toggleCollapseDir: (dir: string) => void;
+  saveAll: () => void;
+  isOpen: (file: string) => boolean;
+  openFile: (file: string) => void;
+  setfilter: (newFilter) => void;
+  showNewFile: () => void;
+  scanFiles: () => void;
+  closeAll: () => void;
+  closeFile: (file: string) => void;
+  reloadServer: () => void;
+  hasFileContentChanged: (file: string) => boolean;
+  hasErrors: (file: string) => boolean;
+  files: FileBrowserFile[];
+  opened: {
+    fileName: string;
+    filePath: string;
+  }[];
+  isPanelVisible: (panel: string) => boolean;
+  togglePanel: (panel: string) => void;
+  disableLog?: boolean; disablePreview?: boolean; disableReload?: boolean;
+}
+
+export function FileBrowser(props: FileBrowserProps) {
+  return <div class="file-browser" style={`${!props.isPanelVisible("left") ? "display: none;" : ""}`}>
+    <div class="file-browser-toolbar">
+      <div class="row">
+        <button
+          class="file-editor-button btn"
+          style={`width: 10%;${props.disableReload ? "width: 30%;" : ""}`}
+          onclick={ev => {
+            ev.preventDefault();
+            props.togglePanel("left");
+          }}>{"<<"}</button>
+        {props.disableLog ? <></> :
+          <button
+            id="log-btn"
+            class="file-editor-button btn"
+            style={`width: 30%;${props.disableLog ? "display: none;" : ""}`}
+            onclick={ev => {
+              ev.preventDefault();
+              props.togglePanel("bottom");
+            }}>log</button>}
+        {props.disableReload ? <></> :
+          <button
+            id="scan-btn"
+            class="file-editor-button btn active"
+            style={`width: 30%;${props.disableReload ? "display: none;" : ""}`}
+            onclick={ev => {
+              ev.preventDefault();
+              props.scanFiles();
+            }}>scan</button>}
+        {props.disableReload ? <></> :
+          <button
+            id="reload-btn"
+            class="file-editor-button btn warning"
+            style={`width: 30%;${props.disableReload ? "display: none;" : ""}`}
+            onclick={ev => {
+              ev.preventDefault();
+              props.reloadServer();
+            }}>reload</button>}
+      </div>
+      <div class="row">
+        <input
+          type="text"
+          style="width: 100%;"
+          value={props.filter}
+          oninput={ev => {
+            ev.preventDefault();
+            const text = ev.target.value;
+            props.setfilter(text);
+          }}
+          placeholder={"..filter.."} />
+      </div>
+      <div class="row">
+        {props.disablePreview ? <></> :
+          <button
+            id="preview-btn"
+            class="file-editor-button btn"
+            style={`width: 30%;${props.disablePreview ? "display: none;" : ""}`}
+            onclick={ev => {
+              ev.preventDefault();
+              props.togglePanel("right");
+            }}>preview</button>}
+        <button
+          id="new-btn"
+          class="file-editor-button btn info"
+          style="width: 20%;"
+          onclick={ev => {
+            ev.preventDefault();
+            props.showNewFile();
+          }}>new</button>
+        {props.disableReload ? <></> :
+          <button
+            id="scan-btn"
+            class="file-editor-button btn active"
+            style={`width: 30%;${!props.disableReload ? "display: none;" : ""}`}
+            onclick={ev => {
+              ev.preventDefault();
+              props.scanFiles();
+            }}>scan</button>}
+        <button
+          id="saveall-btn"
+          class="file-editor-button btn success"
+          style="width: 25%;"
+          onclick={ev => {
+            ev.preventDefault();
+            props.saveAll();
+
+          }}>save</button>
+        <button
+          id="closeall-btn"
+          class="file-editor-button btn danger"
+          style="width: 25%;"
+          onclick={ev => {
+            ev.preventDefault();
+            props.closeAll();
+          }}>close</button>
+      </div>
+    </div>
+
+    <div class="file-browser-files">
+      {props.opened.length > 0 ? <div class="file-browser-opened-files" style="padding: var(--file-browser-separation);">
+        {/*<p style="padding: 0; margin: 0;">opened</p>*/}
+        <ul style="padding: 0; margin: 0;">
+          {props.opened.map(file => <File
+            closeFile={props.closeFile}
+            current={props.current}
+            fileName={file.fileName}
+            filePath={file.filePath}
+            hasErrors={props.hasErrors}
+            hasFileContentChanged={props.hasFileContentChanged}
+            isOpen={props.isOpen}
+            openFile={props.openFile} />)}
+        </ul></div> : <></>}
+      <FileTree
+        isDirCollapsed={props.isDirCollapsed}
+        toggleCollapseDir={props.toggleCollapseDir}
+        closeFile={props.closeFile}
+        current={props.current}
+        files={props.files}
+        filter={props.filter}
+        hasErrors={props.hasErrors}
+        hasFileContentChanged={props.hasFileContentChanged}
+        isOpen={props.isOpen}
+        openFile={props.openFile} />
+    </div>
+  </div>
+}
+
+interface FileTreeProps {
+  isDirCollapsed: (dir: string) => boolean;
+  toggleCollapseDir: (dir: string) => void;
+  current: string;
+  files: FileBrowserFile[];
+  filter: string;
+  isOpen: (file: string) => boolean;
+  openFile: (file: string) => void;
+  closeFile: (file: string) => void;
+  hasErrors: (file: string) => boolean;
+  hasFileContentChanged: (file: string) => boolean;
+}
+
+interface FileTreeDir {
+  dirs: {
+    [name: string]: FileTreeDir
+  };
+  files: FileBrowserFile[];
+  name: string;
+  fullName: string;
+}
+
+function FileTree(props: FileTreeProps) {
+  const ret: FileTreeDir = {
+    dirs: {},
+    files: [],
+    name: "",
+    fullName: ""
+  };
+
+  props.files.forEach((file) => {
+    let cDir = ret;
+    let fullName = "";
+    for (const dir of file.dirs) {
+      fullName += dir + "/";
+      if (cDir.dirs[dir] === undefined) {
+        const newDir: FileTreeDir = {
+          dirs: {},
+          files: [],
+          name: dir,
+          fullName: `${fullName}`
+        };
+        cDir.dirs[dir] = newDir;
+        cDir = newDir;
+      } else {
+        cDir = cDir.dirs[dir];
+      }
+    }
+    cDir.files.push(file);
+  });
+
+  //console.dir(ret);
+
+  return <FileTreeFolder {...props} tree={ret} level={0} />
+}
+
+interface FileTreeFolderProps {
+  isDirCollapsed: (dir: string) => boolean;
+  toggleCollapseDir: (dir: string) => void;
+  tree: FileTreeDir;
+  current: string;
+  filter: string;
+  level: number;
+  isOpen: (file: string) => boolean;
+  openFile: (file: string) => void;
+  closeFile: (file: string) => void;
+  hasErrors: (file: string) => boolean;
+  hasFileContentChanged: (file: string) => boolean;
+}
+
+function FileTreeFolder(props: FileTreeFolderProps) {
+
+  //console.dir(props.tree);
+
+  const dirs = Object.keys(props.tree.dirs).map(k => props.tree.dirs[k]);
+
+  const files = props.tree.files.filter(file => props.filter ? file.filePath.includes(props.filter) : true);
+
+
+  return <ul style={`margin-left: calc(2 * var(--file-browser-separation-file));${props.level === 0 ? " padding: var(--file-browser-separation);" : ""}`}>
+    <>
+      {props.tree.name !== "" ? <div class="file-browser-dir" style="padding: 0;">
+        <p style="margin: 0;">{props.tree.name}/</p>
+        <button
+          onclick={ev => {
+            ev.preventDefault();
+            ev.stopPropagation();
+            props.toggleCollapseDir(props.tree.fullName);
+          }}
+          class="btn-small"
+          style={"margin: 0; margin-left: calc(2 * var(--file-browser-separation));"}>{props.isDirCollapsed(props.tree.fullName) ? "+" : "-"}</button>
+      </div> : <></>}
+      {props.isDirCollapsed(props.tree.fullName) ? <></> :
+        <>
+          {dirs.map(dir => {
+            return <FileTreeFolder {...props} tree={dir} level={props.level + 1} />
+          })}
+          {files.map(file => <File
+            closeFile={props.closeFile}
+            current={props.current}
+            fileName={file.fileName}
+            filePath={file.filePath}
+            hasErrors={props.hasErrors}
+            hasFileContentChanged={props.hasFileContentChanged}
+            isOpen={props.isOpen}
+            openFile={props.openFile} />)
+          }
+        </>}
+    </>
+  </ul>
+}
+
+interface FileProps {
+  fileName: string;
+  filePath: string;
+  current: string;
+  isOpen: (file: string) => boolean;
+  openFile: (file: string) => void;
+  closeFile: (file: string) => void;
+  hasErrors: (file: string) => boolean;
+  hasFileContentChanged: (file: string) => boolean;
+}
+
+function File(props: FileProps) {
+  const isOpen = props.isOpen(props.filePath);
+
+  return <li
+    class={`file-browser-file${props.hasErrors(props.filePath) ? " error" : ""}${props.hasFileContentChanged(props.filePath) ? " changed" : ""}${props.current === props.filePath ? " active" : ""}${isOpen ? " open" : ""}`}
+    style={"display: flex; justify-content: flex-start; align-items: center; margin-left: calc(2 * var(--file-browser-separation-file));"}
+    onclick={ev => {
+      ev.preventDefault();
+      ev.stopPropagation();
+      props.openFile(props.filePath);
+    }}>
+    <p style="margin: 0; padding: 0;">{props.fileName}{props.hasFileContentChanged(props.filePath) ? "(*)" : ""}</p>
+    <button
+      onclick={ev => {
+        ev.preventDefault();
+        ev.stopPropagation();
+        props.closeFile(props.filePath);
+      }}
+      class="btn-small"
+      style={props.isOpen(props.filePath) ? "margin-left: calc(2 * var(--file-browser-separation-file));" : "display: none;"}
+      disabled={!props.isOpen(props.filePath)}>X</button>
+  </li>
+}

package/editor/components/file-editor-toolbar.tsx

@@ -0,0 +1,194 @@
+import * as jsx from "@miqro/jsx";
+import JSX from "@miqro/jsx";
+
+import { SUPPORTED_LANGUAGES } from "../common/constants.js";
+
+interface FileEditorToolbar {
+  path: string;
+  language: string;
+  changed: boolean;
+  renameFile: (newName: string) => void;
+  deleteFile: () => void;
+  setlanguage: (newLang: string) => void;
+  saveFile: (reload?: boolean) => void;
+  revertFile: () => void;
+  closeFile: () => void;
+  togglePanel: (panel: string) => void;
+  isPanelVisible: (panel: string) => boolean;
+  disableLog?: boolean; disablePreview?: boolean; disableReload?: boolean;
+}
+
+export function FileEditorToolbar(props: FileEditorToolbar) {
+
+  const renamingRef = jsx.useRef();
+  const refresh = jsx.useRefresh();
+  const [renaming, setrenaming] = jsx.useState<boolean>(false);
+
+  jsx.useEffect(() => {
+    if (renamingRef.current) {
+      renamingRef.current.value = props.path;
+      renamingRef.current.focus();
+      refresh();
+    }
+  }, [renamingRef.current]);
+
+  jsx.useEffect(() => {
+    setrenaming(false);
+  }, [props.path]);
+
+  return <div class="file-editor-toolbar">
+    <div class="file-editor-toolbar-row">
+      <button
+        class="file-editor-button btn"
+        style={`${props.isPanelVisible("left") ? "display: none;" : "margin-right: var(--file-browser-separation);"}`}
+        onclick={ev => {
+          ev.preventDefault();
+          props.togglePanel("left");
+        }}>{">>"}</button>
+      <button
+        id="save-btn"
+        disabled={!props.changed}
+        class={`btn success`}
+        onclick={ev => {
+          ev.preventDefault();
+          props.saveFile();
+        }}>save</button>
+      {props.disableReload ? <></> : <button
+        id="savereload-btn"
+        disabled={!props.changed}
+        class={`btn info`}
+        style="margin-left: var(--file-browser-separation);"
+        onclick={ev => {
+          ev.preventDefault();
+          props.saveFile(true);
+        }}>save/reload</button>}
+      <button
+        id="revert-btn"
+        disabled={!props.changed}
+        style="margin-left: var(--file-browser-separation);"
+        class={`btn warning`}
+        onclick={ev => {
+          ev.preventDefault();
+          props.revertFile();
+        }}>revert</button>
+      <button
+        id="close-btn"
+        class={`btn danger`}
+        style="margin-left: var(--file-browser-separation);"
+        onclick={ev => {
+          ev.preventDefault();
+          props.closeFile();
+
+        }}>close</button>
+      {SUPPORTED_LANGUAGES.includes(props.language) ?
+        <select
+          value={props.language}
+          oninput={ev => {
+            ev.preventDefault();
+            props.setlanguage(ev.target.value);
+          }}
+          style="margin: 0; padding: 0; margin-left: calc(2*var(--file-browser-separation-file));">
+          {SUPPORTED_LANGUAGES.map(language => <option value={language}>{language}</option>)}
+        </select> : <></>}
+      {/*<div
+        style="margin-left: calc(2*var(--file-browser-separation));"
+        class={`toggle-panel-button left-side-panel-button ${props.isPanelVisible("left") ? "active" : ""}`}
+        onclick={ev => {
+          ev.preventDefault();
+          props.togglePanel("left");
+        }}
+      ></div>
+      <br />
+      <div
+        style="margin-left: calc(2*var(--file-browser-separation-file));"
+        class={`toggle-panel-button bottom-side-panel-button ${props.isPanelVisible("bottom") ? "active" : ""}`}
+        onclick={ev => {
+          ev.preventDefault();
+          props.togglePanel("bottom");
+        }}
+      ></div>
+      <br />
+      <div class={`toggle-panel-button right-side-panel-button ${props.isPanelVisible("right") ? "active" : ""}`}
+        onclick={ev => {
+          ev.preventDefault();
+          props.togglePanel("right");
+        }}
+      ></div>*/}
+
+
+    </div>
+    <div class="file-editor-toolbar-row">
+      {!renaming ?
+        <><p
+          style="margin-left:20px;"
+          onclick={ev => {
+            ev.preventDefault();
+            setrenaming(true);
+          }}>{props.path}</p>
+        </> :
+        <>
+          <form
+            style="width: 100%; height: 100%; margin-right: calc(2 * var(--file-browser-separation));"
+            onsubmit={ev => {
+              ev.preventDefault();
+              setrenaming(false);
+              if (renamingRef.current && renamingRef.current.value !== props.path) {
+                setrenaming(false);
+                props.renameFile(renamingRef.current.value);
+              }
+            }}>
+            <input
+              style="width: 100%; height: 100%;"
+              onfocusout={ev => {
+                ev.preventDefault();
+                //setrenaming(false);
+              }}
+              ref={renamingRef}
+              onkeydown={(ev) => {
+                if (ev.keyCode === 27) {
+                  // catch esc
+                  ev.preventDefault();
+                  setrenaming(false);
+                } else {
+                  refresh();
+                }
+              }}
+              type="text" />
+          </form>
+          {renamingRef.current && renamingRef.current.value !== props.path && renamingRef.current.value !== "" ?
+            <button
+              style="margin-left: var(--file-browser-separation);"
+              class="btn info"
+              onclick={ev => {
+                ev.preventDefault();
+                if (renamingRef.current) {
+                  setrenaming(false);
+                  props.renameFile(renamingRef.current.value);
+                }
+              }}>rename file</button>
+            : <></>}
+          <button
+            style="margin-left: var(--file-browser-separation);"
+            class="btn danger"
+            onclick={ev => {
+              ev.preventDefault();
+              if (renamingRef.current) {
+                setrenaming(false);
+                props.deleteFile();
+              }
+            }}>delete file</button>
+          <button
+            style="margin-left: var(--file-browser-separation);"
+            class="btn"
+            onclick={ev => {
+              ev.preventDefault();
+              setrenaming(false);
+            }}>cancel</button>
+        </>
+      }
+    </div>
+  </div>
+}
+
+FileEditorToolbar.asFragment = true;
+FileEditorToolbar.shadowInit = false;

package/editor/components/file-editor.tsx

@@ -0,0 +1,125 @@
+import * as jsx from "@miqro/jsx";
+import JSX from "@miqro/jsx";
+
+import { APIPReview } from "./api-preview.js";
+import { FileEditorToolbar } from "./file-editor-toolbar.js";
+import { HighlightTextArea } from "./highlight-text-area.js";
+import { useScroll } from "./scroll-query.js";
+
+interface FileEditorProps {
+  current: boolean;
+  error: string;
+  path: string;
+  previewPath: string | undefined;
+  apiPreview: undefined | {
+    path: string;
+    method: string;
+  }[];
+  content: string | null;
+  contentchange: (content: string) => void;
+  closeFile: () => void;
+  saveFile: (reload?: boolean) => void;
+  revertFile: () => void;
+  deleteFile: () => void;
+  renameFile: (newName) => void;
+  setlanguage: (newLanguage) => void;
+  language: string;
+  changed: boolean;
+  reloadString: string;
+  togglePanel: (panel: string) => void;
+  isPanelVisible: (panel: string) => boolean;
+  disableLog?: boolean; disablePreview?: boolean; disableReload?: boolean;
+}
+
+export function FileEditor({ disableLog, disablePreview, disableReload, togglePanel, isPanelVisible, apiPreview, reloadString, error, revertFile, changed, setlanguage, saveFile, deleteFile, renameFile, current, path, previewPath, content, contentchange, closeFile, language }: FileEditorProps) {
+  //console.log("FileEditor [%s]", path);
+  const iFrameRef = jsx.useRef();
+  const scrollRef = jsx.useRef();
+  const [scroll, setScroll] = useScroll();
+
+  jsx.useEffect(() => {
+    if (scrollRef.current) {
+      (scrollRef.current as any).scrollLeft = scroll.scrollLeft;
+      (scrollRef.current as any).scrollTop = scroll.scrollTop;
+    }
+  }, [scrollRef.current]);
+
+  jsx.useEffect(() => {
+    if (current && scrollRef.current) {
+      setScroll({
+        scrollLeft: (scrollRef.current as any).scrollLeft,
+        scrollTop: (scrollRef.current as any).scrollTop
+      }, true);
+    }
+  }, [current]);
+
+  jsx.useEffect(() => {
+    if (iFrameRef.current) {
+      (iFrameRef.current as any).src = "";
+      (iFrameRef.current as any).src = previewPath;
+    }
+  }, [iFrameRef.current, previewPath, reloadString]);
+
+  return <div class="file-editor">
+    {content === null ? <p>loading</p> : <>
+      <FileEditorToolbar
+        disableLog={disableLog}
+        disablePreview={disablePreview}
+        disableReload={disableReload}
+        isPanelVisible={isPanelVisible}
+        togglePanel={togglePanel}
+        revertFile={revertFile}
+        closeFile={closeFile}
+        language={language}
+        path={path}
+        changed={changed}
+        saveFile={saveFile}
+        setlanguage={setlanguage}
+        deleteFile={deleteFile}
+        renameFile={renameFile} />
+      <div
+        //class={`file-editor-content${previewPath || apiPreview ? " split" : ""}`}
+        class="file-editor-content">
+        <div ref={scrollRef}
+          class={`file-editor-text-editor${previewPath || (apiPreview && apiPreview.length > 0) && isPanelVisible("right") ? " split" : ""}`}
+          //class={`file-editor-text-editor`}
+          onscroll={ev => {
+            setScroll({
+              scrollLeft: ev.target.scrollLeft,
+              scrollTop: ev.target.scrollTop
+            });
+          }}>
+          {error ?
+            <p class="file-editor-content-error">{error}</p>
+            : <></>}
+          {language !== "binary" ?
+            <HighlightTextArea
+              tabChar="  "
+              oncontentchange={(args: CustomEvent) => {
+                if (contentchange) {
+                  contentchange(args.detail);
+                }
+              }}
+              content={content}
+              language={language} /> : <p>binary data not supported</p>
+          }
+        </div>
+        {apiPreview && apiPreview.length > 0 ? <APIPReview
+          isPanelVisible={isPanelVisible}
+          apiPreview={apiPreview} /> : <></>}
+        {previewPath && isPanelVisible("right") ? <div
+          class={`file-editor-preview`}
+          style={`${!isPanelVisible("right") ? "display: none;" : ""}`}>
+          <div class="file-editor-preview-path"><a href={previewPath} target="_blank">open in new window</a></div>
+          <iframe
+            ref={iFrameRef}
+            src={previewPath} sandbox="allow-scripts allow-same-origin"></iframe>
+        </div> : <></>}
+      </div>
+    </>}
+  </div>
+}
+
+FileEditor.asFragment = true;
+FileEditor.shadowInit = false;
+

package/editor/components/filter-query.tsx

@@ -0,0 +1,26 @@
+
+import * as jsx from "@miqro/jsx";
+import JSX from "@miqro/jsx";
+
+let queryTimeout2: any = null;
+
+export function useFilterQuery(): [string, (newFilter: string, inmediate?: boolean) => void] {
+    const [filterQuery, setfilterQuery] = jsx.useQuery("filter", "");
+    const [filter, setfilter] = jsx.useState<string>(typeof filterQuery === "string" ? filterQuery : "");
+
+    return [
+        filter,
+        (newFilter: string, inmediate?: boolean) => {
+            clearTimeout(queryTimeout2);
+            if (inmediate) {
+                setfilter(newFilter);
+                setfilterQuery(newFilter);
+            } else {
+                setfilter(newFilter);
+                queryTimeout2 = setTimeout(() => {
+                    setfilter(newFilter);
+                    setfilterQuery(newFilter);
+                }, 1000);
+            }
+        }]
+}