field create

front/js/app.js

@@ -0,0 +1,17 @@
+let app;
+let channel;
+
+export function createApp(channelData) {
+  channel = channelData;
+
+  app = {
+    url: (path) => {
+      return channel.lucentUrl + "/" + path;
+    },
+  };
+  return app;
+}
+
+export function getApp() {
+  return app;
+}

front/js/entry/FieldCreateEntry/FieldCreateEntry.svelte

@@ -0,0 +1,66 @@
+<script>
+    import ChannelLayout from "../../layouts/ChannelLayout.svelte";
+    import { post } from "../../modules/remote";
+    import { getApp } from "../../app";
+    let { channel, user, data } = $props();
+    let name = $state("");
+    let alias = $state("");
+    const app = getApp();
+
+    function handleSchemaCreate(e) {
+        e.preventDefault();
+        console.log(data);
+        post(
+            app.url("fields"),
+            {
+                schemaId: data.schema.id,
+                name: name,
+                alias: alias,
+                fieldType: data.type,
+            },
+            (data, err) => {
+                if (err.isEmpty()) {
+                    Turbo.visit(app.url("fields/edit/" + data.field.id));
+                } else {
+                    console.log(err);
+                }
+            },
+        );
+    }
+</script>
+
+<ChannelLayout {body} {channel} {user}></ChannelLayout>
+{#snippet body()}
+    <h3 class="header-small mb-4 mt-5">Create a <em>{data.type}</em> field</h3>
+
+    <form onsubmit={handleSchemaCreate}>
+        <fieldset>
+            <label>
+                Name
+                <input
+                    bind:value={name}
+                    placeholder="ex. Description"
+                    minlength="2"
+                    maxlength="30"
+                    required
+                />
+            </label>
+            <label>
+                Alias
+                <input
+                    bind:value={alias}
+                    placeholder="ex. description"
+                    minlength="2"
+                    maxlength="30"
+                    required
+                    aria-describedby="alias-helper"
+                />
+                <small id="alias-helper">
+                    Developers will use this to reference the field
+                </small>
+            </label>
+        </fieldset>
+
+        <button type="submit">Create</button>
+    </form>
+{/snippet}

front/js/entry/SchemaEntry/SchemaEntry.svelte

@@ -1,9 +1,11 @@
 <script>
     import ChannelLayout from "../../layouts/ChannelLayout.svelte";
     import { post } from "../../modules/remote";
+    import { getApp } from "../../app";
     let { channel, user, data } = $props();
     let newSchemaName = $state("");
     let newSchemaAlias = $state("");
+    const app = getApp();
 
     function handleSchemaCreate(e) {
         e.preventDefault();
@@ -15,7 +17,7 @@
             },
             (data, err) => {
                 if (err.isEmpty()) {
-                    window.location.reload();
+                    Turbo.visit(window.location.href);
                 }
             },
         );
@@ -79,8 +81,9 @@
                     <ul>
                         <li>
                             <a
-                                href={`/fields/create?schema=${schema.id}&type=text`}
-                                >Text</a
+                                href={app.url(
+                                    `fields/create?schema=${schema.id}&type=text`,
+                                )}>Text</a
                             >
                         </li>
 

front/js/main.js

@@ -1,7 +1,6 @@
-import { axiosInstance } from "./bootstrap";
-import { mount, setContext, unmount } from "svelte";
-
+import * as Turbo from "@hotwired/turbo";
 // import "../sass/app.scss";
+import { mount, unmount } from "svelte";
 import "../css/app.css";
 import Register from "./svelte/account/Register.svelte";
 import Login from "./svelte/account/Login.svelte";
@@ -14,7 +13,9 @@ import RecordEdit from "./svelte/records/Edit.svelte";
 import ContentIndex from "./svelte/content/Index.svelte";
 import HomeEntry from "./entry/HomeEntry/HomeEntry.svelte";
 import SchemaEntry from "./entry/SchemaEntry/SchemaEntry.svelte";
+import FieldCreateEntry from "./entry/FieldCreateEntry/FieldCreateEntry.svelte";
 import BuildReport from "./svelte/build/Report.svelte";
+import { createApp } from "./app";
 
 const entryComponents = {
   members: Members,
@@ -29,11 +30,14 @@ const entryComponents = {
   profile: Profile,
   setup: SetupIndex,
   schemas: SchemaEntry,
+  fieldCreate: FieldCreateEntry,
 };
+Turbo.start();
 
 let loadedComponents = [];
 
 let loadSvelte = function () {
+  Turbo.cache.clear();
   loadedComponents.map((comp) => unmount(comp));
   loadedComponents = [];
 
@@ -53,7 +57,7 @@ let loadSvelte = function () {
       return [];
     }
     // props.axios = axiosInstance;
-
+    createApp(props.channel);
     const compOptions = {
       target: element,
       props: props,
@@ -62,5 +66,4 @@ let loadSvelte = function () {
   };
   Array.from(elements).map(loadElement);
 };
-
-document.addEventListener("DOMContentLoaded", loadSvelte);
+document.addEventListener("turbo:load", loadSvelte);