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

refactir

Browse Source
This commit is contained in:
Alex Lingris
2023-11-17 21:22:26 +02:00
parent 794916b178
commit 821ba9465c
9 changed files with 214 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/dist/assets/main.a696aa4b.js → front/dist/assets/main.cd4a87f1.js
Vendored
+88 -88
View File
File diff suppressed because one or more lines are too long
front/dist/manifest.json
Vendored
+1 -1
View File
@@ -1,6 +1,6 @@
{
"main.js": {
"file": "assets/main.a696aa4b.js",
"file": "assets/main.cd4a87f1.js",
"src": "main.js",
"isEntry": true,
"css": [
front/js/bootstrap.js
Vendored
+4 -26
View File
@@ -1,6 +1,3 @@
import _ from "lodash";
window._ = _;
/**
* We'll load the axios HTTP library which allows us to easily issue requests
* to our Laravel back-end. This library automatically handles sending the
@@ -9,13 +6,14 @@ window._ = _;
import axios from "axios";
window.axios = axios;
export const axiosInstance = axios;
window.axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
window.axios.interceptors.request.use(
function (config) {
let list;
list = document.querySelectorAll(".btn-spinner");
for (var i = 0; i < list.length; ++i) {
for (let i = 0; i < list.length; ++i) {
list[i].classList.add("spinner-on");
list[i].disabled = true;
}
@@ -31,7 +29,7 @@ window.axios.interceptors.response.use(
function (response) {
let list;
list = document.querySelectorAll(".btn-spinner");
for (var i = 0; i < list.length; ++i) {
for (let i = 0; i < list.length; ++i) {
list[i].classList.remove("spinner-on");
list[i].disabled = false;
}
@@ -40,7 +38,7 @@ window.axios.interceptors.response.use(
function (error) {
let list;
list = document.querySelectorAll(".btn-spinner");
for (var i = 0; i < list.length; ++i) {
for (let i = 0; i < list.length; ++i) {
list[i].classList.remove("spinner-on");
list[i].disabled = false;
}
@@ -48,23 +46,3 @@ window.axios.interceptors.response.use(
}
);
/**
* Echo exposes an expressive API for subscribing to channels and listening
* for events that are broadcast by Laravel. Echo and event broadcasting
* allows your team to easily build robust real-time web applications.
*/
// import Echo from 'laravel-echo';
// import Pusher from 'pusher-js';
// window.Pusher = Pusher;
// window.Echo = new Echo({
// broadcaster: 'pusher',
// key: import.meta.env.VITE_PUSHER_APP_KEY,
// wsHost: import.meta.env.VITE_PUSHER_HOST ?? `ws-${import.meta.env.VITE_PUSHER_CLUSTER}.pusher.com`,
// wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
// wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
// forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
// enabledTransports: ['ws', 'wss'],
// });
front/js/main.js
+5 -4
View File
@@ -1,4 +1,4 @@
import "./bootstrap";
import {axiosInstance} from "./bootstrap";
import "../sass/app.scss";
import Account from "./svelte/Account.svelte";
import Channel from "./svelte/Channel.svelte";
@@ -11,10 +11,10 @@ Mustache.escape = function (value) {
function enableTooltipsAnywhere() {
// Enable tooltips everywhere
var tooltipTriggerList = [].slice.call(
let tooltipTriggerList = [].slice.call(
document.querySelectorAll('[data-bs-toggle="tooltip"]')
);
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl);
});
}
@@ -38,7 +38,7 @@ let loadSvelte = function () {
const loadElement = function (element) {
const componentId = element.attributes["data-layout"].value;
const [_, component] = Object.entries(entryComponents).find(
([key, _]) => componentId == key
([key, _]) => componentId === key
);
if (!component) {
return [];
@@ -48,6 +48,7 @@ let loadSvelte = function () {
"json-" + componentId
).innerHTML;
const props = JSON.parse(jsonData);
props.axios = axiosInstance;
const compOptions = {
target: element,
props: props,
front/js/svelte/Channel.svelte
+3
View File
@@ -23,9 +23,12 @@
export let data;
// export let layout;
export let channel;
export let axios;
export let readableSchemas;
setContext("axios", axios);
setContext("channel", channel);
setContext("readableSchemas", channel.schemas.filter((s) => readableSchemas.includes(s.name)));
setContext("user", user);
front/js/svelte/content/Grid.svelte
+68
View File
@@ -0,0 +1,68 @@
<script>
import {getContext} from "svelte";
import Preview from "../files/Preview.svelte";
import {selectRecord} from "./functions/recordSelect.js";
const channel = getContext("channel");
export let schema;
export let records;
export let isWritable;
export let selected = [];
function select(record) {
selected = selectRecord(record, selected)
}
</script>
<div class="row" style="max-width:1000px">
{#each records as record (record.id)}
<div class="col-6 col-md-4">
<div
class="file-wrapper rounded p-2 mb-4 bg-light"
class:selected={selected.includes(record)}
>
{#if isWritable}
<div class="form-check">
<input
on:change={() => select(record)}
class="form-check-input "
type="checkbox"
checked={selected.find(
(r) => r.id === record.id
)}
value={record}
/>
</div>
{/if}
<div class="d-flex justify-content-center">
<Preview {record} size="medium"/>
</div>
<a
href="{channel.lucentUrl}/records/{record.id}"
title={record._file.path}
class="d-block text-center overflow-hidden text-nowrap my-2 "
style="
text-overflow: ellipsis;
font-size: 13px;
color: #333;
">{record._file.path}</a
>
<span
class="lx-small-text text-muted d-block text-center"
>{record._file.mime}</span
>
</div>
</div>
{/each}
</div>
<style>
.form-check {
display: inline-block;
margin-bottom: 0;
}
</style>
front/js/svelte/content/Index.svelte
+9 -64
View File
@@ -2,16 +2,15 @@
import Tools from "./tools/Tools.svelte";
import Pagination from "./pagination/Pagination.svelte";
import ActionsOnSelected from "./ActionsOnSelected.svelte";
import Preview from "../files/Preview.svelte";
import Table from "./Table.svelte";
import {getContext} from "svelte";
import Grid from "./Grid.svelte";
const channel = getContext("channel");
const axios = getContext("axios");
export let schema;
export let users;
export let records;
export let graph;
// export let visibleFields;
export let systemFields;
export let sortParam;
@@ -26,17 +25,6 @@
export let selected = [];
export let isWritable = false;
function selectRecord(e, record) {
let recordExists = selected.find((r) => r.id === record.id);
if (recordExists) {
selected = selected.filter((r) => r.id !== record.id);
} else {
selected = [...selected, record];
}
}
function refresh(e) {
const newUrl = e.detail;
axios
@@ -59,14 +47,12 @@
</script>
<div class="wrapper-large transparent ">
<!-- <Manager managerRecords={recordHistory} {schemas} /> -->
<div class="lx-card mb-4 {inModal ? 'mt-0' : 'mt-5'}">
<h3 class="header-normal mb-5 ">
{schema.label}
</h3>
{#if selected.length > 0 && !inModal && isWritable}
<ActionsOnSelected {schema} {selected} {inModal} {filter}/>
<ActionsOnSelected {schema} {selected} {filter}/>
{:else}
<Tools
bind:schema
@@ -98,48 +84,13 @@
bind:selected
/>
{:else}
<div class="row" style="max-width:1000px">
{#each records as record (record.id)}
<div class="col-6 col-md-4">
<div
class="file-wrapper rounded p-2 mb-4 bg-light"
class:selected={selected.includes(record)}
>
{#if isWritable}
<div class="form-check">
<input
on:change={(e) => selectRecord(e, record)}
class="form-check-input "
type="checkbox"
checked={selected.find(
(r) => r.id === record.id
)}
value={record}
/>
</div>
{/if}
<div class="d-flex justify-content-center">
<Preview {record} size="medium"/>
</div>
<Grid
{records}
{schema}
{isWritable}
bind:selected
/>
<a
href="{channel.lucentUrl}/records/{record.id}"
title={record._file.path}
class="d-block text-center overflow-hidden text-nowrap my-2 "
style="
text-overflow: ellipsis;
font-size: 13px;
color: #333;
">{record._file.path}</a
>
<span
class="lx-small-text text-muted d-block text-center"
>{record._file.mime}</span
>
</div>
</div>
{/each}
</div>
{/if}
</div>
@@ -153,9 +104,3 @@
/>
</div>
<style>
.form-check {
display: inline-block;
margin-bottom: 0;
}
</style>
front/js/svelte/content/Table.svelte
+8 -33
View File
@@ -4,6 +4,7 @@
import {usernameById} from "../account/users";
import {getContext} from "svelte";
import Avatar from "../account/Avatar.svelte";
import {selectRecord, toggleAll} from "./functions/recordSelect.js";
const channel = getContext("channel");
@@ -18,24 +19,12 @@
export let isWritable;
export let selected = [];
function toggleAll(e) {
// e.preventDefault();
if (selected.length === records.length) {
selected = [];
} else {
selected = records;
}
e.currentTarget.checked = selected.length > 0;
function eventToggleAll(e) {
selected = toggleAll(e,records,selected)
}
function selectRecord(e, record) {
let recordExists = selected.find((r) => r.id == record.id);
if (recordExists) {
selected = selected.filter((r) => r.id !== record.id);
} else {
selected = [...selected, record];
}
function select(record) {
selected = selectRecord(record, selected)
}
$: visibleColumns = schema.fields.filter(c => schema.visible.includes(c.name))
@@ -49,7 +38,7 @@
{#if isWritable}
<th>
<input
on:change|preventDefault={toggleAll}
on:change|preventDefault={eventToggleAll}
indeterminate={selected.length > 0 &&
selected.length < records.length}
checked={selected.length == records.length}
@@ -61,7 +50,7 @@
{#each visibleColumns as field}
<th
class="field-ui-{field.ui}"
class="field-ui-{field.info.name ?? field.ui}"
class:is-sort={field.name === sortField.name}
scope="col"
title={field.help}
@@ -85,8 +74,7 @@
{#if isWritable}
<div class="form-check">
<input
on:change={(e) =>
selectRecord(e, record)}
on:change={() => select(record)}
class="form-check-input "
type="checkbox"
checked={selected.find(
@@ -127,7 +115,6 @@
{visibleColumns}
{sortParam}
{sortField}
{inModal}
{users}
/>
</tr>
@@ -136,15 +123,3 @@
</table>
</div>
<style>
/* .title-td:hover {
overflow: visible;
}
.title-td:hover .title-td-contents a {
z-index: 1;
box-shadow: inset 0em 0em 0em 10em rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 100%;
} */
</style>
front/js/svelte/content/functions/recordSelect.js
+28
View File
@@ -0,0 +1,28 @@
/**
*
* @param {Event} e
* @param {Object[]} records
* @param {Object[]} selected
* @returns {Object[]}
*/
export const toggleAll = (e,records, selected) => {
if (selected.length === records.length) {
return [];
}
e.currentTarget.checked = selected.length > 0;
return records;
};
/**
* @param {Object} record
* @param {Object[]} selected
* @returns {Object[]}
*/
export const selectRecord = (record, selected) => {
let recordExists = selected.find((r) => r.id === record.id);
if (recordExists) {
return selected.filter((r) => r.id !== record.id);
}
return [...selected, record];
};