Listing feature

Author: marsian83

client/src/helpers/api.ts

@@ -232,6 +232,18 @@ const api = {
 
     return response.endpoints;
   },
+
+  async getCollectionEndpoint(id: number) {
+    if (!jwt) throw new Error("Unauthorized - getEndpoints");
+
+    const response = (
+      await client.get<{ endpoint: { id: number; uri: string } }>(
+        `/collection/${id}/endpoint`
+      )
+    ).data;
+
+    return response.endpoint.uri;
+  },
 };
 
 export default api;

client/src/helpers/schemaValidation.ts

@@ -1,4 +1,4 @@
-import { Schema } from "../interfaces/Data";
+import { Definition, Schema } from "../interfaces/Data";
 import { deepCopy } from "./utils";
 
 export class SchemaController {
@@ -118,20 +118,31 @@ export class SchemaController {
     return { valid: true, message: "Valid" };
   }
 
-  getInterfaceString() {
-    let interf: any = {};
-    this.definition.forEach((definition) => {
-      if (Array.isArray(definition.type)) {
-        const insideValidator = new SchemaController();
-        insideValidator.define(definition.type);
-        interf[definition.name] = insideValidator.getInterfaceString;
-      }
-      if (definition.type === "reference") {
+  getInterfaceString(): string {
+    let interfaceString = "{";
+    const definition = this.definition;
+
+    for (const entry of definition) {
+      if (Array.isArray(entry.type)) {
+        const midSC = new SchemaController();
+        midSC.define(entry.type);
+        const nestedInterface = midSC.getInterfaceString();
+        interfaceString += `${entry.name}${
+          entry.optional ? "?" : ""
+        }: ${nestedInterface}[];\n`;
+      } else if (entry.type === "reference") {
+        interfaceString += `${entry.name}${entry.optional ? "?" : ""}: ${
+          entry.refers || "unknown"
+        };\n`;
+      } else {
+        interfaceString += `${entry.name}${entry.optional ? "?" : ""}: ${
+          entry.type
+        };\n`;
       }
-      interf[`${definition.name}${definition.optional ? "?" : ""}`] =
-        definition.type;
-    });
-    return JSON.stringify(interf);
+    }
+
+    interfaceString += "}\n";
+    return interfaceString;
   }
 }
 

client/src/pages/PanelPage/PanelPage.tsx

@@ -9,6 +9,8 @@ import { Artifact, Collection } from "../../interfaces/Data";
 import api from "../../helpers/api";
 import { deepCopy } from "../../helpers/utils";
 import useQuery from "../../hooks/useQuery";
+import useModal from "../../hooks/useModal";
+import InterfaceModal from "./components/InterfaceModal";
 
 export default function PanelPage() {
   const { id } = useParams();
@@ -60,6 +62,8 @@ export default function PanelPage() {
     }
   }
 
+  const modal = useModal();
+
   return (
     <div className="h-[85vh] flex">
       <div className="basis-1/6 flex flex-col h-full justify-between">
@@ -113,14 +117,30 @@ export default function PanelPage() {
               </button>
             </div>
 
-            {true && (
-              <Link
-                to={`/collection/${selectedCollection}/schema`}
-                className="px-5 py-2 btn-3 gap-x-2 rounded"
-              >
-                <MaterialIcon codepoint="ead3" />
-                Schema
-              </Link>
+            {collection && (
+              <div className="flex gap-x-10">
+                <button
+                  className="px-5 py-2 btn-3 gap-x-2 rounded"
+                  onClick={() =>
+                    modal.show(
+                      <InterfaceModal
+                        name={collection.name}
+                        schema={collection.schema}
+                      />
+                    )
+                  }
+                >
+                  <MaterialIcon codepoint="f1c6" /> Interface
+                </button>
+
+                <Link
+                  to={`/collection/${selectedCollection}/schema`}
+                  className="px-5 py-2 btn-3 gap-x-2 rounded"
+                >
+                  <MaterialIcon codepoint="ead3" />
+                  Schema
+                </Link>
+              </div>
             )}
           </div>
         )}

client/src/pages/PanelPage/components/InterfaceModal.tsx

@@ -0,0 +1,74 @@
+import { useEffect, useRef, useState } from "react";
+import { Icon, icons } from "../../../assets/data/icons";
+import api from "../../../helpers/api";
+import { Color, colors } from "../../../assets/data/colors";
+import ModalDefault from "../../../common/ModalDefault";
+import { Definition } from "../../../interfaces/Data";
+import { SchemaController } from "../../../helpers/schemaValidation";
+
+export default function InterfaceModal(props: {
+  name: string;
+  schema: Definition;
+}) {
+  const [interfaceD, setInterface] = useState<string>("{}");
+
+  useEffect(() => {
+    const sc = new SchemaController();
+    sc.define(props.schema);
+    setInterface(sc.getInterfaceString());
+  }, []);
+
+  return (
+    <ModalDefault type="singleButtonClose">
+      <div className="p-8 flex flex-col gap-y-3">
+        <h2 className="font-medium text-2xl tracking-tight">
+          Use this interface within typescript
+        </h2>
+
+        <textarea
+          value={`interface ${props.name} ${prettifyInterface(interfaceD)}`}
+          autoFocus
+          className="max-w-[50vw] bg-transparent text-front h-[40vh] p-3 border border-primary rounded mt-5 mb-2"
+          readOnly
+        />
+      </div>
+    </ModalDefault>
+  );
+}
+
+function prettifyInterface(input: string): string {
+  const INDENTATION = 2;
+  const NEWLINE = "\n";
+
+  let level = 0;
+  let formatted = "";
+  let insideString = false;
+
+  for (let i = 0; i < input.length; i++) {
+    const char = input[i];
+
+    if (char === '"' && input[i - 1] !== "\\") {
+      insideString = !insideString;
+    }
+
+    if (insideString) {
+      formatted += char;
+      continue;
+    }
+
+    if (char === "[" || char === "{") {
+      level++;
+      formatted += char + NEWLINE + " ".repeat(level * INDENTATION);
+    } else if (char === "]" || char === "}") {
+      level--;
+      formatted = formatted.trimEnd();
+      formatted += NEWLINE + " ".repeat(level * INDENTATION) + char;
+    } else if (char === ",") {
+      formatted += char + NEWLINE + " ".repeat(level * INDENTATION);
+    } else {
+      formatted += char;
+    }
+  }
+
+  return formatted;
+}

client/src/pages/PanelPage/components/ListView.tsx

@@ -3,6 +3,8 @@ import { Definition } from "../../../interfaces/Data";
 import dummyEntries from "../../../assets/data/entries";
 import { twMerge } from "tailwind-merge";
 import MaterialIcon from "../../../common/MaterialIcon";
+import api from "../../../helpers/api";
+import axios from "axios";
 
 interface ListViewProps {
   schema: Definition;
@@ -14,7 +16,23 @@ export default function ListView(props: ListViewProps) {
 
   const [visibility, setVisibility] = useState<object>({});
 
-  const content = dummyEntries;
+  const exposedApiBase = import.meta.env.VITE_PUBLIC_ENDPOINT_BASE;
+
+  // const content = dummyEntries;
+  const [content, setContent] = useState<Array<any>>();
+
+  async function loadData() {
+    const uri = await api.getCollectionEndpoint(props.collectionId);
+    const cnt = await axios.get<{ id: number; data: object }[]>(
+      `http://${exposedApiBase}/d/${uri}`.replace("localhost", "127.0.0.1")
+    );
+
+    setContent(cnt.data.map((d) => d.data));
+  }
+
+  useEffect(() => {
+    loadData();
+  }, []);
 
   return (
     <div className="flex flex-col">
@@ -41,40 +59,41 @@ export default function ListView(props: ListViewProps) {
           </label>
         ))}
       </div>
-
-      <table className="flex-1 mt-10">
-        <thead>
-          <tr>
-            {Object.keys(content[0]).map((item, key) =>
-              visibility[item as keyof typeof visibility] ? (
-                <th className="border h-16 font-medium" key={key}>
-                  {item}
-                </th>
-              ) : null
-            )}
-          </tr>
-        </thead>
-        <tbody>
-          {content.map((val, key) => {
-            return (
-              <tr
-                key={key}
-                className="relative h-10 hover:bg-secondary hover:bg-opacity-30 cursor-pointer"
-              >
-                {Object.keys(content[0]).map((item, key) =>
-                  visibility[item as keyof typeof visibility] ? (
-                    <td className="border pl-2" key={key}>
-                      {JSON.stringify(val[item as keyof typeof val])}
-                    </td>
-                  ) : (
-                    <></>
-                  )
-                )}
-              </tr>
-            );
-          })}
-        </tbody>
-      </table>
+      {content && (
+        <table className="flex-1 mt-10">
+          <thead>
+            <tr>
+              {Object.keys(content[0]).map((item, key) =>
+                visibility[item as keyof typeof visibility] ? (
+                  <th className="border h-16 font-medium" key={key}>
+                    {item}
+                  </th>
+                ) : null
+              )}
+            </tr>
+          </thead>
+          <tbody>
+            {content.map((val, key) => {
+              return (
+                <tr
+                  key={key}
+                  className="relative h-10 hover:bg-secondary hover:bg-opacity-30 cursor-pointer"
+                >
+                  {Object.keys(content[0]).map((item, key) =>
+                    visibility[item as keyof typeof visibility] ? (
+                      <td className="border pl-2" key={key}>
+                        {JSON.stringify(val[item as keyof typeof val])}
+                      </td>
+                    ) : (
+                      <></>
+                    )
+                  )}
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      )}
     </div>
   );
 }

go.work.sum

@@ -9,8 +9,8 @@ github.com/coreos/go-systemd/v22 v22.3.2/go.mod h1:Y58oyj3AT4RCenI/lSvhwexgC+NSV
 github.com/golang/protobuf v1.5.3/go.mod h1:XVQd3VNwM+JqD3oG2Ue2ip4fOMUkwXdXDdiuN0vRsmY=
 github.com/google/go-cmp v0.5.9/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeNGIjoY=
 github.com/kr/pretty v0.3.1/go.mod h1:hoEshYVHaxMs3cyo3Yncou5ZscifuDolrwPKZanG3xk=
-github.com/kr/text v0.2.0/go.mod h1:eLer722TekiGuMkidMxC/pM04lWEeraHUUmBw8l2grE=
 github.com/mitchellh/go-homedir v1.1.0/go.mod h1:SfyaCUpYCn1Vlf4IUYiD9fPX4A5wJrkLzIz1N1q0pr0=
+github.com/ugorji/go v1.2.7 h1:qYhyWUUd6WbiM+C6JZAUkIJt/1WrjzNHY9+KCIjVqTo=
 golang.org/x/mod v0.8.0/go.mod h1:iBbtSCu2XBx23ZKBPSOrRkjjQPZFPuis4dIYUhu/chs=
 golang.org/x/sys v0.5.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/term v0.8.0/go.mod h1:xPskH00ivmX89bAKVGSKKtLOWNx2+17Eiy94tnKShWo=

server/src/routes/collection.ts

@@ -20,6 +20,43 @@ router.get("/:id", authorisedOnly, async (req, res) => {
   res.status(200).send({ collection });
 });
 
+router.get("/:id/endpoint", authorisedOnly, async (req, res) => {
+  if (!req.user) return res.sendStatus(403);
+
+  const id = Number(req.params.id);
+  if (!id) return res.sendStatus(400);
+
+  const collection = await prisma.collection.findFirst({
+    where: { id: id, Artifact: { Database: { userId: req.user.id } } },
+    select: {
+      id: true,
+      name: true,
+      Artifact: {
+        select: { name: true, Database: { select: { name: true } } },
+      },
+    },
+  });
+
+  if (!collection || !collection.Artifact || !collection.Artifact.Database)
+    return res.sendStatus(403);
+
+  const mongodb_dbname =
+    `onelot${req.user.id}_${collection.Artifact.Database.name}`.replace(
+      " ",
+      ""
+    );
+
+  const endpoint = await axios.get(
+    `${Service.DB_ACCESS}/endpoints?db=${mongodb_dbname}&artifact=${
+      collection.Artifact.name
+    }&collections=${JSON.stringify([
+      { id: collection.id, name: collection.name },
+    ])}`
+  );
+
+  res.status(200).send({ endpoint: endpoint.data.endpoints[0] });
+});
+
 router.post("/:id/entry", authorisedOnly, async (req, res) => {
   if (!req.user) return res.sendStatus(403);