Imp: Add CoreCompoment and update assets structure (#57)

ash-project · Aug 1, 2023 · 7085e88 · 7085e88
1 parent efe0a40
commit 7085e88
Show file tree

Hide file tree

Showing 908 changed files with 11,322 additions and 24,509 deletions.
diff --git a/.gitignore b/.gitignore
@@ -13,8 +13,6 @@
 # Ignore .fetch files in case you like to edit your project deps locally.
 /.fetch
 
-/assets/node_modules
-
 # If the VM crashes, it generates a dump, let's ignore it too.
 erl_crash.dump
 
@@ -24,3 +22,4 @@ erl_crash.dump
 # Ignore package tarball (built via "mix hex.build").
 ash_admin-*.tar
 
+.DS_Store
diff --git a/README.md b/README.md
@@ -110,6 +110,7 @@ To work on ash_admin, you'll want to be able to run the dev app. You'll need to
 1. `mix ash_postgres.create`
 2. `mix migrate`
 3. `mix migrate_tenants`
+4. `mix setup`
 
 Then, you can start the app with: `mix dev`
 

diff --git a/assets/.gitignore b/assets/.gitignore
diff --git a/assets/css/app.css b/assets/css/app.css
@@ -0,0 +1,4 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
diff --git a/assets/css/app.scss b/assets/css/app.scss
diff --git a/assets/js/app.js b/assets/js/app.js
@@ -1,140 +1,161 @@
-import css from "../css/app.scss"
-import "phoenix_html"
-import { Socket } from "phoenix"
-import NProgress from "nprogress"
-import { LiveSocket } from "phoenix_live_view"
-
-let socketPath = document.querySelector("html").getAttribute("phx-socket") || "/live"
-let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
-let Hooks = {}
+import "phoenix_html";
+import { Socket } from "phoenix";
+import topbar from "../vendor/topbar";
+import { LiveSocket } from "phoenix_live_view";
+
+let socketPath =
+  document.querySelector("html").getAttribute("phx-socket") || "/live";
+let csrfToken = document
+  .querySelector("meta[name='csrf-token']")
+  .getAttribute("content");
+let Hooks = {};
 const editors = {};
 
 Hooks.JsonEditor = {
   mounted() {
-    const inputId = this.el.getAttribute("data-input-id")
+    const inputId = this.el.getAttribute("data-input-id");
     const hook = this;
-    this.editor = new JSONEditor(this.el, {
-      onChangeText: (json) => {
-        const target = document.getElementById(inputId)
-        try {
-          JSON.parse(json)
-          target.value = json;
-          target.dispatchEvent(new Event('change', { 'bubbles': true }))
-        } catch (_e) {
-        }
-      },
-      onChange: () => {
-        try {
-          const target = document.getElementById(inputId)
-          json = hook.editor.get();
-
-          target.value = JSON.stringify(json)
-          target.dispatchEvent(new Event('change', { 'bubbles': true }))
-        } catch (_e) {
-        }
-      },
-      onModeChange: (newMode) => {
-        hook.mode = newMode;
+    this.editor = new JSONEditor(
+      this.el,
+      {
+        onChangeText: (json) => {
+          const target = document.getElementById(inputId);
+          try {
+            JSON.parse(json);
+            target.value = json;
+            target.dispatchEvent(new Event("change", { bubbles: true }));
+          } catch (_e) {}
+        },
+        onChange: () => {
+          try {
+            const target = document.getElementById(inputId);
+            json = hook.editor.get();
+
+            target.value = JSON.stringify(json);
+            target.dispatchEvent(new Event("change", { bubbles: true }));
+          } catch (_e) {}
+        },
+        onModeChange: (newMode) => {
+          hook.mode = newMode;
+        },
+        modes: ["text", "tree"],
       },
-      modes: ['text', 'tree']
-    }, JSON.parse(document.getElementById(inputId).value));
+      JSON.parse(document.getElementById(inputId).value)
+    );
 
-    editors[this.el.id] = this.editor
-  }
-}
+    editors[this.el.id] = this.editor;
+  },
+};
 
 Hooks.JsonEditorSource = {
   updated() {
     try {
       let editor = editors[this.el.getAttribute("data-editor-id")];
       if (editor.getMode() === "tree") {
-        editor.update(JSON.parse(this.el.value))
+        editor.update(JSON.parse(this.el.value));
       } else {
         if (editor.get() !== JSON.parse(this.el.value)) {
-          editor.setText(this.el.value)
+          editor.setText(this.el.value);
         } else {
         }
       }
-    } catch (_e) {
-
-    }
-  }
-}
-
+    } catch (_e) {}
+  },
+};
 
 Hooks.JsonView = {
   updated() {
     const json = JSON.parse(this.el.getAttribute("data-json"));
-    this.editor = new JSONEditor(this.el, {
-      mode: 'preview'
-    }, json)
+    this.editor = new JSONEditor(
+      this.el,
+      {
+        mode: "preview",
+      },
+      json
+    );
   },
   mounted() {
     const json = JSON.parse(this.el.getAttribute("data-json"));
-    this.editor = new JSONEditor(this.el, {
-      mode: 'preview'
-    }, json)
-  }
-}
+    this.editor = new JSONEditor(
+      this.el,
+      {
+        mode: "preview",
+      },
+      json
+    );
+  },
+};
 
-const init = (element) => new EasyMDE({
-  element: element,
-  initialValue: element.getAttribute("value")
-})
+const init = (element) =>
+  new EasyMDE({
+    element: element,
+    initialValue: element.getAttribute("value"),
+  });
 
 Hooks.MarkdownEditor = {
   mounted() {
-    const id = this.el.getAttribute("data-target-id")
-    const el = document.getElementById(id)
-    const easyMDE = init(el)
+    const id = this.el.getAttribute("data-target-id");
+    const el = document.getElementById(id);
+    const easyMDE = init(el);
     easyMDE.codemirror.on("change", () => {
-      el.value = easyMDE.value()
-      el.dispatchEvent(new Event('change', { 'bubbles': true }))
+      el.value = easyMDE.value();
+      el.dispatchEvent(new Event("change", { bubbles: true }));
     });
-  }
-}
+  },
+};
 
 Hooks.Actor = {
   mounted() {
     this.handleEvent("set_actor", (payload) => {
-      document.cookie = 'actor_resource' + '=' + payload.resource + ';path=/';
-      document.cookie = 'actor_primary_key' + '=' + payload.primary_key + ';path=/';
-      document.cookie = 'actor_action' + '=' + payload.action + ';path=/';
-      document.cookie = 'actor_api' + '=' + payload.api + ';path=/';
+      document.cookie = "actor_resource" + "=" + payload.resource + ";path=/";
+      document.cookie =
+        "actor_primary_key" + "=" + payload.primary_key + ";path=/";
+      document.cookie = "actor_action" + "=" + payload.action + ";path=/";
+      document.cookie = "actor_api" + "=" + payload.api + ";path=/";
     });
     this.handleEvent("clear_actor", () => {
-      document.cookie = 'actor_resource' + '=' + ';path=/';
-      document.cookie = 'actor_primary_key' + '=' + ';path=/';
-      document.cookie = 'actor_action' + ';path=/';
-      document.cookie = 'actor_api' + '=' + ';path=/';
-      document.cookie = 'actor_authorizing=false;path=/';
-      document.cookie = 'actor_paused=true;path=/';
+      document.cookie = "actor_resource" + "=" + ";path=/";
+      document.cookie = "actor_primary_key" + "=" + ";path=/";
+      document.cookie = "actor_action" + ";path=/";
+      document.cookie = "actor_api" + "=" + ";path=/";
+      document.cookie = "actor_authorizing=false;path=/";
+      document.cookie = "actor_paused=true;path=/";
     });
     this.handleEvent("toggle_authorizing", (payload) => {
-      document.cookie = 'actor_authorizing' + '=' + payload.authorizing + ';path=/';
+      document.cookie =
+        "actor_authorizing" + "=" + payload.authorizing + ";path=/";
     });
     this.handleEvent("toggle_actor_paused", (payload) => {
-      document.cookie = 'actor_paused' + '=' + payload.actor_paused + ';path=/';
+      document.cookie = "actor_paused" + "=" + payload.actor_paused + ";path=/";
     });
-  }
-}
+  },
+};
 
 Hooks.Tenant = {
   mounted() {
-    this.handleEvent('set_tenant', (payload) => {
-      document.cookie = 'tenant' + '=' + payload.tenant + ';path=/';
-    })
-    this.handleEvent('clear_tenant', () => {
-      document.cookie = 'tenant' + '=' + ';path=/'
-    })
-  }
-}
+    this.handleEvent("set_tenant", (payload) => {
+      document.cookie = "tenant" + "=" + payload.tenant + ";path=/";
+    });
+    this.handleEvent("clear_tenant", () => {
+      document.cookie = "tenant" + "=" + ";path=/";
+    });
+  },
+};
 
 Hooks.MaintainAttrs = {
-  attrs() { return this.el.getAttribute("data-attrs").split(", ") },
-  beforeUpdate() { this.prevAttrs = this.attrs().map(name => [name, this.el.getAttribute(name)]) },
-  updated() { this.prevAttrs.forEach(([name, val]) => this.el.setAttribute(name, val)) }
-}
+  attrs() {
+    return this.el.getAttribute("data-attrs").split(", ");
+  },
+  beforeUpdate() {
+    this.prevAttrs = this.attrs().map((name) => [
+      name,
+      this.el.getAttribute(name),
+    ]);
+  },
+  updated() {
+    this.prevAttrs.forEach(([name, val]) => this.el.setAttribute(name, val));
+  },
+};
 
 let liveSocket = new LiveSocket(socketPath, Socket, {
   params: { _csrf_token: csrfToken },
@@ -149,14 +170,14 @@ let liveSocket = new LiveSocket(socketPath, Socket, {
 });
 
 // Show progress bar on live navigation and form submits
-window.addEventListener("phx:page-loading-start", info => NProgress.start())
-window.addEventListener("phx:page-loading-stop", info => NProgress.done())
+topbar.config({ barColors: { 0: "#29d" }, shadowColor: "rgba(0, 0, 0, .3)" });
+window.addEventListener("phx:page-loading-start", (_info) => topbar.show(300));
+window.addEventListener("phx:page-loading-stop", (_info) => topbar.hide());
 
 // connect if there are any LiveViews on the page
-liveSocket.connect()
-
-// expose liveSocket on window for web console debug logs and latency simulation:
->> liveSocket.enableDebug()
+liveSocket.connect() >>
+  // expose liveSocket on window for web console debug logs and latency simulation:
+  liveSocket.enableDebug();
 // >> liveSocket.enableLatencySim(1000)
 
-window.liveSocket = liveSocket
+window.liveSocket = liveSocket;