wip file field

This commit is contained in:
2024-09-28 18:36:18 +03:00
parent 5ed57838fc
commit 39e7a3aed4
25 changed files with 674 additions and 44 deletions
+13 -7
View File
@@ -1,16 +1,22 @@
@extends("lucent::layouts.channel")
@section("content")
@php
$createMode = $createMode ?? false;
@endphp
<div class="record-edit">
<div class="tools-header">
@include("lucent::records-editor.header")
{{-- <EditHeader {schema} bind:record {isCreateMode} bind:activeContentTab/>--}}
@include("lucent::records-editor.header")
@include("lucent::records-editor.title")
<x-lucent::notice title="Submission Errors">
asfasf
</x-lucent::notice>
<div class=" mt-4" style="margin-bottom:150px;position:relative;">
<x-lucent::tabs :schema="$schema" :createMode="$createMode"></x-lucent::tabs>
</div>
@foreach($schema->fields as $field)
@include("lucent::records-editor.fields", ["field" => $field])
@endforeach
</div>
@endsection
@@ -0,0 +1,17 @@
<div class="field-header">
<div class="labels">
<div class="label-and-help">
<label for={{$id}}
>{{$field->label}}</label
>
@if(!empty($field->help))
<small class="help-text light-text">{{$field->help}}</small>
@endif
</div>
<span
tabindex="-1"
class="text-decoration-none"
><code class="field-id">{{$field->name}}</code>
</span>
</div>
</div>
@@ -0,0 +1,20 @@
@php
$fieldId = "field-".$field->name."-".$record->id;
$params = [
"id" => $fieldId,
"value" => data_get($record->data,$field->name),
"errorMessage" => ""
];
@endphp
<div class="editor-field">
@include("lucent::records-editor.fieldHeader", $params)
@if($field->info->name === "text")
@include("lucent::records-editor.fields.text", $params)
@elseif($field->info->name === "slug")
@include("lucent::records-editor.fields.slug", $params)
@elseif($field->info->name === "color")
@include("lucent::records-editor.fields.color", $params)
@elseif($field->info->name === "file")
@include("lucent::records-editor.fields.file", $params)
@endif
</div>
@@ -0,0 +1,25 @@
<div>
<div style="display: flex; align-items: center;gap: 10px" class="color-picker">
<input
type="color"
id="{{$id}}-picker"
style="border: none;background: transparent;padding: 0;width:64px;"
{{$field->readonly && !$createMode ? "disabled" : ""}}
value="{{$value}}"
/>
<input
type="text"
id="{{$id}}"
value="{{$value}}"
class="form-control {{!empty($errorMessage) ? "is-invalid" : "" }}"
autocomplete="off"
{{$field->readonly && !$createMode ? "readonly" : ""}}
/>
</div>
@if($errorMessage)
<div class="invalid-feedback d-block">
{{$errorMessage}}
</div>
@endif
</div>
@@ -0,0 +1,16 @@
@php
$references = $graph->edges
->filter(fn($edge) => $edge->field === $field->name && $edge->source === $record->id)
->map(fn($edge) => $graph->records->firstWhere("id", $edge->target));
@endphp
@if ($references->isNotEmpty())
{{--<Sortable sortableClass="mt-3" on:update={reorder}>--}}
@foreach($references as $reference)
<!--This div helps the sorting thing-->
<div>
@include("lucent::records-editor.fields.file.preview")
</div>
@endforeach
<!--</Sortable>-->
@endif
@@ -0,0 +1,50 @@
@php
$schema = $channel->schemas->firstWhere("name",$reference->schema);
@endphp
<div class="preview-file">
<div style="display: flex;align-items: center;gap: 10px;">
<div class="image">
@include("lucent::records-editor.fields.file.thumb", ["size" => "small", "record" => $reference])
</div>
<div class="title">
<div>
<a class="record-title" href="{{lucent_url("records")}}/{{$record->id}}">
{{$viewModel->getRecordName($reference)}}
</a>
<small class="d-block">
from {{$schema->label}}
@if ($record->status === "draft")
@include("lucent::records-editor.status", ["status" => $record->status])
@endif
</small>
</div>
</div>
</div>
{{-- <div style="display: flex;gap:4px; align-items: center; margin-right: 10px;">--}}
{{-- {#if hasInsert}--}}
{{-- <div class="reference-action">--}}
{{-- <Dropdown>--}}
{{-- <div slot="button">--}}
{{-- <Icon icon="photo-film"/>--}}
{{-- </div>--}}
{{-- <button class="dropdown-item button" on:click={e => insert(e,null)}>original</button>--}}
{{-- {#each imagePresets as preset}--}}
{{-- <button class="dropdown-item button" on:click={e => insert(e,preset)}>{preset}</button>--}}
{{-- {/each}--}}
{{-- </Dropdown>--}}
{{-- </div>--}}
{{-- {/if}--}}
{{-- {#if hasDelete}--}}
{{-- <div class="reference-action">--}}
{{-- <button--}}
{{-- class="button"--}}
{{-- on:click={remove}--}}
{{-- >--}}
{{-- <Icon icon="trash-can"/>--}}
{{-- </button>--}}
{{-- </div>--}}
{{-- {/if}--}}
{{-- </div>--}}
</div>
@@ -0,0 +1,59 @@
@php
$imageSide = 256;
$fileSide = 32;
$fontSize = "20";
$showFilename = $showFilename ?? false;
if ($size === "medium") {
$imageSide = 128;
$fileSide = 12;
$fontSize = "17";
} else if ($size === "small") {
$imageSide = 64;
$fileSide = 12;
$fontSize = "15";
} else if ($size === "tiny") {
$imageSide = 42;
$fileSide = 12;
$fontSize = "13";
}
@endphp
<div style="display: flex;align-items: center;gap: 5px;">
@if(str_starts_with($record->_file->mime, "image"))
<a
href="{{lucent_url("records")}}/{{$record->id}}"
title="{{$record->_file->originalName}}"
style="width:{{$imageSide}}px;height:{{$imageSide}}px"
>
<img
class="rounded w-100"
style="border-radius: 12px;padding: 4px;"
src={{lucent_thumbnail($record)}}
alt="{{$record->_file->path}}"
/>
</a>
@else
<a
href="{{lucent_url("records")}}/{{$record->id}}"
title="{{$record->_file->path}}"
class="file-preview-small"
style="width:{{$imageSide}}px;height:{{$imageSide}}px"
>
<x-lucent::icon icon="file" :width="$fileSide" :height="$fileSide"></x-lucent::icon>
<span class="ms-2"
>.{{pathinfo($record->_file->path, PATHINFO_EXTENSION)}}</span
>
</a>
@endif
@if ($showFilename)
<a
href="{{lucent_url("records")}}/{{$record->id}}"
title="{{$record->_file->path}}"
class="preview-file-filename lx-small-text text-decoration-none"
>{{$record->_file->path}} </a>
@endif
</div>
@@ -0,0 +1,18 @@
<div>
<input
type="text"
id="{{$id}}"
value="{{$value}}"
class="form-control {{!empty($errorMessage) ? "is-invalid" : "" }}"
autocomplete="off"
{{$field->readonly && !$createMode ? "readonly" : ""}}
/>
<div class="system-help-text light-text">
Leave this empty to autogenerate from <i>{{$field->source}}</i>
</div>
@if($errorMessage)
<div class="invalid-feedback d-block">
{{$errorMessage}}
</div>
@endif
</div>
@@ -0,0 +1,20 @@
<div style="position: relative;">
@if($field->selectOptions)
<Autocomplete {field} bind:value={value}></Autocomplete>
@else
<input
type="text"
id="{{$id}}"
value="{{$value}}"
class="form-control {{!empty($errorMessage) ? "is-invalid" : "" }}"
autocomplete="off"
{{$field->readonly && !$createMode ? "readonly" : ""}}
/>
@endif
@if($errorMessage)
<div class="invalid-feedback d-block">
{{$errorMessage}}
</div>
@endif
</div>
+60 -31
View File
@@ -1,33 +1,62 @@
@php
$createMode = $createMode ?? false;
@endphp
<div style="display: flex;align-items: center; gap:10px;">
@if(!$createMode)
<x-lucent::dropdown>
icon
<x-slot:items>
<h6 class="dropdown-header">Record Actions</h6>
<a
class="dropdown-item"
href="{channel.lucentUrl}/records/new?schema={schema.name}"
>Create new</a
>
@if($createMode)
<a
class="dropdown-item"
on:click={clone}
href={channel.lucentUrl}
>
Clone
</a>
@endif
<a
class="dropdown-item"
href="{channel.lucentUrl}">Revisions</a
>
</x-slot>
</x-lucent::dropdown>
<div class="tools-header">
<div style="display: flex;align-items: center; gap:10px;">
@if(!$createMode)
<x-lucent::dropdown>
<x-lucent::icon icon="ellipsis"></x-lucent::icon>
<x-slot:items>
<h6 class="dropdown-header">Record Actions</h6>
<a
class="dropdown-item"
href="{{lucent_url("records/new")}}?schema={{$schema->name}}"
>
Create new
</a>
<a
class="dropdown-item"
href="{{lucent_url("records/clone")}}/{{$record->id}}"
>
Clone
</a>
<a
class="dropdown-item"
href="{{lucent_url("records/revisions")}}/{{$record->id}}">Revisions</a
>
</x-slot>
</x-lucent::dropdown>
@endif
@if($record->status !== "trashed")
<x-lucent::switch value="published" :checked="$record->status === 'published'"></x-lucent::switch>
@endif
@if($record->status === "published")
Published
@elseif($record->status === "draft")
Draft
@elseif($record->status === "trashed")
Trashed
@endif
</div>
@if($createMode)
<button
class="button primary btn-spinner"
>
<span
class="spinner-border spinner-border-sm"
role="status"
aria-hidden="true"
></span>
Create
</button>
@else
<button
type="button"
class="button primary ms-2 btn btn-primary btn-spinner"
>
<span
class="spinner-border spinner-border-sm"
role="status"
aria-hidden="true"
></span>
Save
</button>
@endif
</div>
@@ -0,0 +1,27 @@
@php
$statusList = [
"published" => [
"value" => "published",
"text" => "Published",
"bg" => "success",
"color" => "white",
],
"trashed" => [
"value" => "trashed",
"text" => "Trashed",
"bg" => "danger",
"color" => "white",
],
"draft" => [
"value" => "draft",
"text" => "Draft",
"bg" => "warning",
"color" => "dark",
],
];
@endphp
<span class="badge text-bg-{{$statusList[$status->value]["bg"]}}" style="max-width:84px"
>{{$statusList[$status->value]["text"]}}</span
>
@@ -0,0 +1,10 @@
<div class="record-header">
<a class="schema-name" href="{{lucent_url("content")}}/{{$schema->name}}">{{strtoupper($schema->label)}}</a>
<span class="record-title">
@if(!$createMode)
{{$viewModel->getRecordName($record)}}
@else
New Record
@endif
</span>
</div>