lucent/lucent-laravel
2
0
Fork 0
Code Issues 14 Pull Requests Releases 1 Activity

edit form refactor

Browse Source
This commit is contained in:
Alex Lingris
2024-03-26 01:58:05 +02:00
parent 02224eb580
commit 2e95fca8ad
7 changed files with 72 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/js/svelte/common/OffCanvas.svelte
+4 -3
View File
@@ -1,9 +1,8 @@
<script> <script>
import {onMount} from "svelte"; import {onDestroy, onMount} from "svelte";
import offcanvas from "bootstrap/js/src/offcanvas.js"; import offcanvas from "bootstrap/js/src/offcanvas.js";
export let title = ""; export let title = "";
let isHidden = true;
let offcanvasEl; let offcanvasEl;
let offcanvasInstance; let offcanvasInstance;
@@ -14,13 +13,15 @@
offcanvasInstance = new offcanvas(offcanvasEl); offcanvasInstance = new offcanvas(offcanvasEl);
}); });
export function hide(e) { export function hide(e) {
e.preventDefault(); e.preventDefault();
offcanvasInstance.hide(); offcanvasInstance.hide();
} }
</script> </script>
<div bind:this={offcanvasEl} class="offcanvas offcanvas-end" data-bs-backdrop="static" tabindex="-1" <div bind:this={offcanvasEl} class="offcanvas offcanvas-end" tabindex="-1"
aria-labelledby="offcanvasEditContent"> aria-labelledby="offcanvasEditContent">
<div class="offcanvas-header"> <div class="offcanvas-header">
<h5 class="offcanvas-title">{title}</h5> <h5 class="offcanvas-title">{title}</h5>
front/js/svelte/records/Edit.svelte
+2 -2
View File
@@ -20,7 +20,7 @@
function save(e) { function save(e) {
e.preventDefault(); e.preventDefault();
let status = e.detail.status
console.log("SAVE: Attempt"); console.log("SAVE: Attempt");
validationErrors = null; validationErrors = null;
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
@@ -37,7 +37,7 @@
id: record.id, id: record.id,
data: record.data, data: record.data,
edges: replaceEdges, edges: replaceEdges,
status: record.status, status: status,
isCreateMode: isCreateMode, isCreateMode: isCreateMode,
}) })
.then(function (response) { .then(function (response) {
front/js/svelte/records/PreviewCard.svelte
+54 -41
View File
@@ -32,55 +32,68 @@
} }
</script> </script>
<div class="d-flex gap-2">
{#if editable}
<div
class="card mb-2 bg-light w-50 "
style="border-color:{schema.color ?? '#ccc'}; border-width: 1px;"
>
<div class="card-body">
Edge Data
<div class="position-absolute d-flex end-0" style="top:5px">
<button
class="trash-button text-dark btn btn-sm btn-link"
on:click={edit}
>
<Icon icon="pencil"/>
</button>
</div>
</div>
</div>
<div <EdgeData bind:this={edgeData} {field} {edge}/>
{/if}
class="card mb-2 bg-light {classes}" <div
style="border-color:{schema.color ?? '#ccc'}; border-width: 1px;" class="card mb-2 bg-light w-100 {classes}"
> style="border-color:{schema.color ?? '#ccc'}; border-width: 1px;"
<div class="card-body"> >
<Preview {record} type="card"/> <div class="card-body">
{#if editable}
<EdgeData bind:this={edgeData} {field} {edge}/> <Preview {record} type="card"/>
{/if}
<!-- <div class="overflow-hidden">--> <!-- <div class="overflow-hidden">-->
<!-- <a--> <!-- <a-->
<!-- class="title-link m-0 fs-5 text-decoration-none text-dark d-block"--> <!-- class="title-link m-0 fs-5 text-decoration-none text-dark d-block"-->
<!-- href="{channel.lucentUrl}/records/{record.id}"--> <!-- href="{channel.lucentUrl}/records/{record.id}"-->
<!-- title={cardTitle}--> <!-- title={cardTitle}-->
<!-- >--> <!-- >-->
<!-- {cardTitle}--> <!-- {cardTitle}-->
<!-- </a>--> <!-- </a>-->
<!-- <small class="text-muted">--> <!-- <small class="text-muted">-->
<!-- {schema.label}--> <!-- {schema.label}-->
<!-- </small>--> <!-- </small>-->
<!-- <small class="text-muted">--> <!-- <small class="text-muted">-->
<!-- {#if record.status === "draft"}--> <!-- {#if record.status === "draft"}-->
<!-- <Status status={record.status} />--> <!-- <Status status={record.status} />-->
<!-- {/if}--> <!-- {/if}-->
<!-- </small>--> <!-- </small>-->
<!-- </div>--> <!-- </div>-->
</div> </div>
{#if hasDelete}
<div class="position-absolute d-flex end-0" style="top:5px">
{#if hasDelete}
<div class="position-absolute d-flex end-0" style="top:5px">
{#if editable}
<button <button
class="trash-button text-dark btn btn-sm btn-link" class="trash-button text-dark btn btn-sm btn-link"
on:click={edit} on:click={remove}
> >
<Icon icon="pencil"/> <Icon icon="trash-can"/>
</button> </button>
{/if}
<button
class="trash-button text-dark btn btn-sm btn-link"
on:click={remove}
>
<Icon icon="trash-can"/>
</button>
</div> </div>
{/if} {/if}
</div>
</div> </div>
<style> <style>
front/js/svelte/records/form/Form.svelte
+10 -7
View File
@@ -1,5 +1,5 @@
<script> <script>
import {afterUpdate, createEventDispatcher, onMount} from "svelte"; import {afterUpdate, createEventDispatcher, onMount} from "svelte";
import {isEqual} from "../deepEquality.js"; import {isEqual} from "../deepEquality.js";
import ContentTabs from "../ContentTabs.svelte" import ContentTabs from "../ContentTabs.svelte"
import ErrorAlert from "../../common/ErrorAlert.svelte" import ErrorAlert from "../../common/ErrorAlert.svelte"
@@ -9,8 +9,11 @@
import EditHeader from "../EditHeader.svelte"; import EditHeader from "../EditHeader.svelte";
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
function save(){
dispatch("save"); function save() {
dispatch("save", {
status: status
});
} }
@@ -32,7 +35,7 @@
: null; : null;
export function setOriginalData(){ export function setOriginalData() {
originalContent = { originalContent = {
data: JSON.parse(JSON.stringify(data)), data: JSON.parse(JSON.stringify(data)),
status: status, status: status,
@@ -42,7 +45,7 @@
} }
onMount(()=>{ onMount(() => {
setOriginalData() setOriginalData()
}) })
@@ -85,11 +88,11 @@
<svelte:window on:beforeunload={beforeUnload}/> <svelte:window on:beforeunload={beforeUnload}/>
<div > <div>
<EditHeader {schema} {record} {isCreateMode} {title}/> <EditHeader {schema} {record} {isCreateMode} {title}/>
<div class=" mt-4" style="margin-bottom:150px"> <div class=" mt-4" style="margin-bottom:150px">
<SaveButtons on:save={save} status={status} {hasUnsavedData} /> <SaveButtons on:save={save} bind:status {hasUnsavedData} {isCreateMode}/>
<ErrorAlert message={errorMessage}/> <ErrorAlert message={errorMessage}/>
<ContentTabs <ContentTabs
{schema} {schema}
front/js/svelte/records/form/FormField.svelte
+1
View File
@@ -32,6 +32,7 @@
export let data; export let data;
export let validationErrors; export let validationErrors;
export let isCreateMode; export let isCreateMode;
let formElement = formElements[field.info.name]; let formElement = formElements[field.info.name];
const uniqueId = `field-${field.name}-id`; const uniqueId = `field-${field.name}-id`;
</script> </script>
front/js/svelte/records/form/references/EdgeData.svelte
+1 -1
View File
@@ -3,6 +3,7 @@
import {getContext} from "svelte"; import {getContext} from "svelte";
import Form from "../Form.svelte"; import Form from "../Form.svelte";
import OffCanvas from "../../../common/OffCanvas.svelte"; import OffCanvas from "../../../common/OffCanvas.svelte";
import Preview from "../../../newPreview/Preview.svelte";
export let field; export let field;
export let edge; export let edge;
@@ -24,7 +25,6 @@
} }
</script> </script>
<OffCanvas bind:this={offCanvas}> <OffCanvas bind:this={offCanvas}>
<Form <Form
bind:this={form} bind:this={form}
src/Http/Controller/RecordController.php
-1
View File
@@ -5,7 +5,6 @@ namespace Lucent\Http\Controller;
use Lucent\Http\Controller; use Lucent\Http\Controller;
use Illuminate\Http\Request; use Illuminate\Http\Request;
use Lucent\Account\AccountService; use Lucent\Account\AccountService;
use Lucent\Account\AuthService;
use Lucent\Channel\ChannelService; use Lucent\Channel\ChannelService;
use Lucent\LucentException; use Lucent\LucentException;
use Lucent\Query\Operator; use Lucent\Query\Operator;