Autosave: 20260319-073852
This commit is contained in:
Flatlogic Bot
parent
d21a76e602
commit
afabb0cce1
235
backend/src/db/api/ui_elements.js
Normal file
235
backend/src/db/api/ui_elements.js
Normal file
@ -0,0 +1,235 @@
|
||||
const GenericDBApi = require('./base.api');
|
||||
const db = require('../models');
|
||||
|
||||
class Ui_elementsDBApi extends GenericDBApi {
|
||||
static get MODEL() {
|
||||
return db.ui_elements;
|
||||
}
|
||||
|
||||
static get TABLE_NAME() {
|
||||
return 'ui_elements';
|
||||
}
|
||||
|
||||
static get SEARCHABLE_FIELDS() {
|
||||
return ['name', 'element_type'];
|
||||
}
|
||||
|
||||
static get RANGE_FIELDS() {
|
||||
return ['sort_order'];
|
||||
}
|
||||
|
||||
static get ENUM_FIELDS() {
|
||||
return [];
|
||||
}
|
||||
|
||||
static get CSV_FIELDS() {
|
||||
return ['id', 'element_type', 'name', 'sort_order', 'is_active', 'createdAt'];
|
||||
}
|
||||
|
||||
static get AUTOCOMPLETE_FIELD() {
|
||||
return 'name';
|
||||
}
|
||||
|
||||
static getFieldMapping(data) {
|
||||
return {
|
||||
id: data.id || undefined,
|
||||
element_type: data.element_type ?? null,
|
||||
name: data.name ?? null,
|
||||
sort_order: data.sort_order ?? 0,
|
||||
default_settings_json:
|
||||
data.default_settings_json === null || data.default_settings_json === undefined
|
||||
? null
|
||||
: typeof data.default_settings_json === 'string'
|
||||
? data.default_settings_json
|
||||
: JSON.stringify(data.default_settings_json),
|
||||
};
|
||||
}
|
||||
|
||||
static get DEFAULT_ROWS() {
|
||||
return [
|
||||
{
|
||||
element_type: 'navigation_next',
|
||||
name: 'Navigation Forward Button',
|
||||
sort_order: 1,
|
||||
default_settings_json: {
|
||||
label: 'Navigation: Forward',
|
||||
navLabel: 'Forward',
|
||||
navType: 'forward',
|
||||
transitionReverseMode: 'auto_reverse',
|
||||
transitionDurationSec: 0.7,
|
||||
appearDelaySec: 0,
|
||||
appearDurationSec: null,
|
||||
},
|
||||
},
|
||||
{
|
||||
element_type: 'navigation_prev',
|
||||
name: 'Navigation Back Button',
|
||||
sort_order: 2,
|
||||
default_settings_json: {
|
||||
label: 'Navigation: Back',
|
||||
navLabel: 'Back',
|
||||
navType: 'back',
|
||||
transitionReverseMode: 'auto_reverse',
|
||||
transitionDurationSec: 0.7,
|
||||
appearDelaySec: 0,
|
||||
appearDurationSec: null,
|
||||
},
|
||||
},
|
||||
{
|
||||
element_type: 'tooltip',
|
||||
name: 'Tooltip',
|
||||
sort_order: 3,
|
||||
default_settings_json: {
|
||||
label: 'Tooltip',
|
||||
tooltipTitle: 'Tooltip title',
|
||||
tooltipText: 'Tooltip text',
|
||||
appearDelaySec: 0,
|
||||
appearDurationSec: null,
|
||||
},
|
||||
},
|
||||
{
|
||||
element_type: 'description',
|
||||
name: 'Description',
|
||||
sort_order: 4,
|
||||
default_settings_json: {
|
||||
label: 'Description',
|
||||
descriptionTitle: 'Description title',
|
||||
descriptionText: 'Description text',
|
||||
appearDelaySec: 0,
|
||||
appearDurationSec: null,
|
||||
},
|
||||
},
|
||||
{
|
||||
element_type: 'gallery',
|
||||
name: 'Gallery',
|
||||
sort_order: 5,
|
||||
default_settings_json: {
|
||||
label: 'Gallery',
|
||||
galleryCards: [{ imageUrl: '', title: 'Card 1', description: '' }],
|
||||
appearDelaySec: 0,
|
||||
appearDurationSec: null,
|
||||
},
|
||||
},
|
||||
{
|
||||
element_type: 'carousel',
|
||||
name: 'Carousel',
|
||||
sort_order: 6,
|
||||
default_settings_json: {
|
||||
label: 'Carousel',
|
||||
carouselSlides: [{ imageUrl: '', caption: 'Slide 1' }],
|
||||
carouselPrevIconUrl: '',
|
||||
carouselNextIconUrl: '',
|
||||
appearDelaySec: 0,
|
||||
appearDurationSec: null,
|
||||
},
|
||||
},
|
||||
{
|
||||
element_type: 'video_player',
|
||||
name: 'Video Player',
|
||||
sort_order: 7,
|
||||
default_settings_json: {
|
||||
label: 'Video Player',
|
||||
mediaUrl: '',
|
||||
mediaAutoplay: true,
|
||||
mediaLoop: true,
|
||||
mediaMuted: true,
|
||||
appearDelaySec: 0,
|
||||
appearDurationSec: null,
|
||||
},
|
||||
},
|
||||
{
|
||||
element_type: 'audio_player',
|
||||
name: 'Audio Player',
|
||||
sort_order: 8,
|
||||
default_settings_json: {
|
||||
label: 'Audio Player',
|
||||
mediaUrl: '',
|
||||
mediaAutoplay: true,
|
||||
mediaLoop: true,
|
||||
mediaMuted: false,
|
||||
appearDelaySec: 0,
|
||||
appearDurationSec: null,
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
static async ensureInitialized() {
|
||||
if (!this.initializationPromise) {
|
||||
this.initializationPromise = (async () => {
|
||||
let count = 0;
|
||||
|
||||
try {
|
||||
count = await this.MODEL.count();
|
||||
} catch (error) {
|
||||
if (error?.original?.code !== '42P01') {
|
||||
throw error;
|
||||
}
|
||||
|
||||
await this.MODEL.sync();
|
||||
count = await this.MODEL.count();
|
||||
}
|
||||
|
||||
if (count > 0) return;
|
||||
|
||||
const now = new Date();
|
||||
await this.MODEL.bulkCreate(
|
||||
this.DEFAULT_ROWS.map((item) => ({
|
||||
...item,
|
||||
createdAt: now,
|
||||
updatedAt: now,
|
||||
})),
|
||||
);
|
||||
})().catch((error) => {
|
||||
this.initializationPromise = null;
|
||||
throw error;
|
||||
});
|
||||
}
|
||||
|
||||
await this.initializationPromise;
|
||||
}
|
||||
|
||||
static async create(data, options = {}) {
|
||||
await this.ensureInitialized();
|
||||
return super.create(data, options);
|
||||
}
|
||||
|
||||
static async bulkImport(data, options = {}) {
|
||||
await this.ensureInitialized();
|
||||
return super.bulkImport(data, options);
|
||||
}
|
||||
|
||||
static async update(id, data, options = {}) {
|
||||
await this.ensureInitialized();
|
||||
return super.update(id, data, options);
|
||||
}
|
||||
|
||||
static async deleteByIds(ids, options = {}) {
|
||||
await this.ensureInitialized();
|
||||
return super.deleteByIds(ids, options);
|
||||
}
|
||||
|
||||
static async remove(id, options = {}) {
|
||||
await this.ensureInitialized();
|
||||
return super.remove(id, options);
|
||||
}
|
||||
|
||||
static async findBy(where, options = {}) {
|
||||
await this.ensureInitialized();
|
||||
return super.findBy(where, options);
|
||||
}
|
||||
|
||||
static async findAll(filter = {}, options = {}) {
|
||||
await this.ensureInitialized();
|
||||
return super.findAll(filter, options);
|
||||
}
|
||||
|
||||
static async findAllAutocomplete(query, limit, offset) {
|
||||
await this.ensureInitialized();
|
||||
return super.findAllAutocomplete(query, limit, offset);
|
||||
}
|
||||
}
|
||||
|
||||
Ui_elementsDBApi.initializationPromise = null;
|
||||
|
||||
module.exports = Ui_elementsDBApi;
|
||||
72
backend/src/db/models/ui_elements.js
Normal file
72
backend/src/db/models/ui_elements.js
Normal file
@ -0,0 +1,72 @@
|
||||
module.exports = function (sequelize, DataTypes) {
|
||||
const ui_elements = sequelize.define(
|
||||
'ui_elements',
|
||||
{
|
||||
id: {
|
||||
type: DataTypes.UUID,
|
||||
defaultValue: DataTypes.UUIDV4,
|
||||
primaryKey: true,
|
||||
},
|
||||
element_type: {
|
||||
type: DataTypes.TEXT,
|
||||
allowNull: false,
|
||||
unique: true,
|
||||
validate: {
|
||||
notEmpty: { msg: 'Element type is required' },
|
||||
len: { args: [1, 100], msg: 'Element type must be between 1 and 100 characters' },
|
||||
},
|
||||
},
|
||||
name: {
|
||||
type: DataTypes.TEXT,
|
||||
allowNull: false,
|
||||
validate: {
|
||||
notEmpty: { msg: 'Name is required' },
|
||||
len: { args: [1, 255], msg: 'Name must be between 1 and 255 characters' },
|
||||
},
|
||||
},
|
||||
sort_order: {
|
||||
type: DataTypes.INTEGER,
|
||||
allowNull: false,
|
||||
defaultValue: 0,
|
||||
},
|
||||
is_active: {
|
||||
type: DataTypes.VIRTUAL,
|
||||
get() {
|
||||
return true;
|
||||
},
|
||||
},
|
||||
default_settings_json: {
|
||||
type: DataTypes.TEXT,
|
||||
field: 'settings_json',
|
||||
allowNull: true,
|
||||
},
|
||||
importHash: {
|
||||
type: DataTypes.STRING(255),
|
||||
allowNull: true,
|
||||
unique: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
timestamps: true,
|
||||
paranoid: true,
|
||||
freezeTableName: true,
|
||||
indexes: [
|
||||
{ fields: ['element_type'] },
|
||||
{ fields: ['sort_order'] },
|
||||
{ fields: ['deletedAt'] },
|
||||
],
|
||||
},
|
||||
);
|
||||
|
||||
ui_elements.associate = (db) => {
|
||||
db.ui_elements.belongsTo(db.users, {
|
||||
as: 'createdBy',
|
||||
});
|
||||
|
||||
db.ui_elements.belongsTo(db.users, {
|
||||
as: 'updatedBy',
|
||||
});
|
||||
};
|
||||
|
||||
return ui_elements;
|
||||
};
|
||||
@ -52,6 +52,7 @@ const publish_eventsRoutes = require('./routes/publish_events');
|
||||
const pwa_cachesRoutes = require('./routes/pwa_caches');
|
||||
|
||||
const access_logsRoutes = require('./routes/access_logs');
|
||||
const ui_elementsRoutes = require('./routes/ui_elements');
|
||||
|
||||
const publishRoutes = require('./routes/publish');
|
||||
const runtimeContextRoutes = require('./routes/runtime-context');
|
||||
@ -208,6 +209,7 @@ app.use('/api/publish_events', jwtAuth, publish_eventsRoutes);
|
||||
app.use('/api/pwa_caches', jwtAuth, pwa_cachesRoutes);
|
||||
|
||||
app.use('/api/access_logs', jwtAuth, access_logsRoutes);
|
||||
app.use('/api/ui-elements', jwtAuth, ui_elementsRoutes);
|
||||
|
||||
app.use('/api/publish', jwtAuth, publishRoutes);
|
||||
|
||||
|
||||
7
backend/src/routes/ui_elements.js
Normal file
7
backend/src/routes/ui_elements.js
Normal file
@ -0,0 +1,7 @@
|
||||
const Ui_elementsService = require('../services/ui_elements');
|
||||
const Ui_elementsDBApi = require('../db/api/ui_elements');
|
||||
const { createEntityRouter } = require('../factories/router.factory');
|
||||
|
||||
module.exports = createEntityRouter('ui_elements', Ui_elementsService, Ui_elementsDBApi, {
|
||||
permissionEntity: 'page_elements',
|
||||
});
|
||||
6
backend/src/services/ui_elements.js
Normal file
6
backend/src/services/ui_elements.js
Normal file
@ -0,0 +1,6 @@
|
||||
const Ui_elementsDBApi = require('../db/api/ui_elements');
|
||||
const { createEntityService } = require('../factories/service.factory');
|
||||
|
||||
module.exports = createEntityService(Ui_elementsDBApi, {
|
||||
entityName: 'ui_elements',
|
||||
});
|
||||
@ -22,6 +22,7 @@ const menuAside: MenuAsideItem[] = [
|
||||
href: '/ui-elements',
|
||||
label: 'UI Elements',
|
||||
icon: icon.mdiPaletteSwatch,
|
||||
permissions: 'READ_PAGE_ELEMENTS',
|
||||
},
|
||||
{
|
||||
href: '/users/users-list',
|
||||
|
||||
@ -125,6 +125,13 @@ type ConstructorSchema = {
|
||||
elements?: CanvasElement[];
|
||||
};
|
||||
|
||||
type UiElementDefault = {
|
||||
id: string;
|
||||
element_type?: string;
|
||||
is_active?: boolean;
|
||||
default_settings_json?: Partial<CanvasElement> | string | null;
|
||||
};
|
||||
|
||||
type DragElementState = {
|
||||
id: string;
|
||||
pointerOffsetX: number;
|
||||
@ -413,6 +420,20 @@ const labelByType: Record<CanvasElementType, string> = {
|
||||
audio_player: 'Audio Player',
|
||||
};
|
||||
|
||||
const canvasElementTypes: CanvasElementType[] = [
|
||||
'navigation_next',
|
||||
'navigation_prev',
|
||||
'gallery',
|
||||
'carousel',
|
||||
'tooltip',
|
||||
'description',
|
||||
'video_player',
|
||||
'audio_player',
|
||||
];
|
||||
|
||||
const isCanvasElementType = (value: string): value is CanvasElementType =>
|
||||
canvasElementTypes.includes(value as CanvasElementType);
|
||||
|
||||
const isNavigationElementType = (
|
||||
type: CanvasElementType,
|
||||
): type is NavigationElementType =>
|
||||
@ -505,6 +526,50 @@ const createDefaultElement = (
|
||||
return base;
|
||||
};
|
||||
|
||||
const mergeElementWithDefaults = (
|
||||
element: CanvasElement,
|
||||
defaults?: Partial<CanvasElement>,
|
||||
): CanvasElement => {
|
||||
if (!defaults) return element;
|
||||
|
||||
const merged: CanvasElement = {
|
||||
...element,
|
||||
...defaults,
|
||||
id: element.id,
|
||||
type: element.type,
|
||||
};
|
||||
|
||||
merged.xPercent = clamp(Number(merged.xPercent ?? element.xPercent), 0, 100);
|
||||
merged.yPercent = clamp(Number(merged.yPercent ?? element.yPercent), 0, 100);
|
||||
merged.appearDelaySec = normalizeAppearDelaySec(merged.appearDelaySec);
|
||||
merged.appearDurationSec = normalizeAppearDurationSec(merged.appearDurationSec);
|
||||
|
||||
if (merged.type === 'gallery') {
|
||||
const cards = Array.isArray(defaults.galleryCards)
|
||||
? defaults.galleryCards
|
||||
: element.galleryCards || [];
|
||||
merged.galleryCards = cards.map((card, cardIndex) => ({
|
||||
id: String(card?.id || createLocalId()),
|
||||
imageUrl: String(card?.imageUrl || ''),
|
||||
title: String(card?.title || `Card ${cardIndex + 1}`),
|
||||
description: String(card?.description || ''),
|
||||
}));
|
||||
}
|
||||
|
||||
if (merged.type === 'carousel') {
|
||||
const slides = Array.isArray(defaults.carouselSlides)
|
||||
? defaults.carouselSlides
|
||||
: element.carouselSlides || [];
|
||||
merged.carouselSlides = slides.map((slide, slideIndex) => ({
|
||||
id: String(slide?.id || createLocalId()),
|
||||
imageUrl: String(slide?.imageUrl || ''),
|
||||
caption: String(slide?.caption || `Slide ${slideIndex + 1}`),
|
||||
}));
|
||||
}
|
||||
|
||||
return merged;
|
||||
};
|
||||
|
||||
const getElementButtonTitle = (element: CanvasElement) => {
|
||||
if (element.type === 'gallery') {
|
||||
return `${element.label} (${element.galleryCards?.length || 0})`;
|
||||
@ -558,6 +623,9 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
|
||||
|
||||
const [pages, setPages] = useState<TourPage[]>([]);
|
||||
const [assets, setAssets] = useState<ProjectAsset[]>([]);
|
||||
const [uiElementDefaultsByType, setUiElementDefaultsByType] = useState<
|
||||
Partial<Record<CanvasElementType, Partial<CanvasElement>>>
|
||||
>({});
|
||||
const [activePageId, setActivePageId] = useState('');
|
||||
const [projectName, setProjectName] = useState('');
|
||||
|
||||
@ -866,7 +934,7 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
|
||||
setErrorMessage('');
|
||||
setSuccessMessage('');
|
||||
|
||||
const [projectResponse, pagesResponse, assetsResponse] =
|
||||
const [projectResponse, pagesResponse, assetsResponse, uiElementsResponse] =
|
||||
await Promise.all([
|
||||
axios.get(`/projects/${projectId}`),
|
||||
axios.get(
|
||||
@ -875,6 +943,7 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
|
||||
axios.get(
|
||||
`/assets?limit=500&page=0&sort=desc&field=createdAt&project=${projectId}`,
|
||||
),
|
||||
axios.get('/ui-elements?limit=200&page=0&sort=asc&field=sort_order&is_active=true'),
|
||||
]);
|
||||
|
||||
const pageRows: TourPage[] = Array.isArray(pagesResponse?.data?.rows)
|
||||
@ -889,6 +958,25 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
|
||||
setPages(pageRows);
|
||||
setAssets(assetRows);
|
||||
|
||||
const uiElementRows: UiElementDefault[] = Array.isArray(
|
||||
uiElementsResponse?.data?.rows,
|
||||
)
|
||||
? uiElementsResponse.data.rows
|
||||
: [];
|
||||
const defaultsByType: Partial<
|
||||
Record<CanvasElementType, Partial<CanvasElement>>
|
||||
> = {};
|
||||
uiElementRows.forEach((row) => {
|
||||
const elementType = String(row.element_type || '').trim();
|
||||
if (!isCanvasElementType(elementType)) return;
|
||||
const rawDefaults = parseJsonObject<Partial<CanvasElement>>(
|
||||
row.default_settings_json,
|
||||
{},
|
||||
);
|
||||
defaultsByType[elementType] = rawDefaults;
|
||||
});
|
||||
setUiElementDefaultsByType(defaultsByType);
|
||||
|
||||
const defaultPageId = pageIdFromRoute || pageRows[0]?.id || '';
|
||||
setActivePageId(defaultPageId);
|
||||
setIsMenuOpen(false);
|
||||
@ -911,6 +999,7 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
|
||||
setErrorMessage(message);
|
||||
setPages([]);
|
||||
setAssets([]);
|
||||
setUiElementDefaultsByType({});
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
@ -1239,7 +1328,11 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
|
||||
? type
|
||||
: allowedNavigationTypes[0]
|
||||
: type;
|
||||
const nextElement = createDefaultElement(nextElementType, elements.length);
|
||||
const baseElement = createDefaultElement(nextElementType, elements.length);
|
||||
const nextElement = mergeElementWithDefaults(
|
||||
baseElement,
|
||||
uiElementDefaultsByType[nextElementType],
|
||||
);
|
||||
setElements((prev) => [...prev, nextElement]);
|
||||
selectElementForEdit(nextElement.id);
|
||||
setSuccessMessage('Element added. Drag it to set position.');
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { mdiArrowLeft, mdiContentSave, mdiPencil } from '@mdi/js';
|
||||
import { mdiArrowLeft, mdiContentSave, mdiPencil, mdiPlus, mdiTrashCan } from '@mdi/js';
|
||||
import axios from 'axios';
|
||||
import Head from 'next/head';
|
||||
import Link from 'next/link';
|
||||
@ -6,6 +6,7 @@ import { useRouter } from 'next/router';
|
||||
import React, { ReactElement, useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import BaseButton from '../../components/BaseButton';
|
||||
import CardBox from '../../components/CardBox';
|
||||
import FormField from '../../components/FormField';
|
||||
import SectionMain from '../../components/SectionMain';
|
||||
import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
|
||||
import { getPageTitle } from '../../config';
|
||||
@ -27,6 +28,19 @@ type TourPage = {
|
||||
background_loop?: boolean;
|
||||
};
|
||||
|
||||
type GalleryCard = {
|
||||
id: string;
|
||||
imageUrl: string;
|
||||
title: string;
|
||||
description: string;
|
||||
};
|
||||
|
||||
type CarouselSlide = {
|
||||
id: string;
|
||||
imageUrl: string;
|
||||
caption: string;
|
||||
};
|
||||
|
||||
type ConstructorElement = {
|
||||
id: string;
|
||||
type: string;
|
||||
@ -35,8 +49,14 @@ type ConstructorElement = {
|
||||
yPercent?: number;
|
||||
appearDelaySec?: number;
|
||||
appearDurationSec?: number | null;
|
||||
iconUrl?: string;
|
||||
navLabel?: string;
|
||||
navType?: 'forward' | 'back';
|
||||
targetPageId?: string;
|
||||
transitionVideoUrl?: string;
|
||||
transitionReverseMode?: 'auto_reverse' | 'separate_video';
|
||||
reverseVideoUrl?: string;
|
||||
transitionDurationSec?: number;
|
||||
tooltipTitle?: string;
|
||||
tooltipText?: string;
|
||||
descriptionTitle?: string;
|
||||
@ -45,8 +65,10 @@ type ConstructorElement = {
|
||||
mediaAutoplay?: boolean;
|
||||
mediaLoop?: boolean;
|
||||
mediaMuted?: boolean;
|
||||
galleryCards?: any[];
|
||||
carouselSlides?: any[];
|
||||
carouselPrevIconUrl?: string;
|
||||
carouselNextIconUrl?: string;
|
||||
galleryCards?: GalleryCard[];
|
||||
carouselSlides?: CarouselSlide[];
|
||||
};
|
||||
|
||||
type ConstructorSchema = {
|
||||
@ -91,17 +113,12 @@ const parseNullableNumber = (value: string) => {
|
||||
return parsed;
|
||||
};
|
||||
|
||||
const parseArrayJson = (value: string, fieldName: string) => {
|
||||
try {
|
||||
const parsed = JSON.parse(value);
|
||||
if (!Array.isArray(parsed)) {
|
||||
throw new Error(`${fieldName} must be a JSON array.`);
|
||||
}
|
||||
return parsed;
|
||||
} catch (error) {
|
||||
console.error(`Failed to parse ${fieldName}:`, error);
|
||||
throw error;
|
||||
const createLocalId = () => {
|
||||
if (typeof window !== 'undefined' && window.crypto?.randomUUID) {
|
||||
return window.crypto.randomUUID();
|
||||
}
|
||||
|
||||
return `element_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
|
||||
};
|
||||
|
||||
const PageElementsProjectEditPage = () => {
|
||||
@ -126,8 +143,14 @@ const PageElementsProjectEditPage = () => {
|
||||
const [yPercent, setYPercent] = useState('0');
|
||||
const [appearDelaySec, setAppearDelaySec] = useState('0');
|
||||
const [appearDurationSec, setAppearDurationSec] = useState('');
|
||||
const [iconUrl, setIconUrl] = useState('');
|
||||
const [navLabel, setNavLabel] = useState('');
|
||||
const [navType, setNavType] = useState<'forward' | 'back'>('forward');
|
||||
const [targetPageId, setTargetPageId] = useState('');
|
||||
const [transitionVideoUrl, setTransitionVideoUrl] = useState('');
|
||||
const [transitionReverseMode, setTransitionReverseMode] = useState<'auto_reverse' | 'separate_video'>('auto_reverse');
|
||||
const [reverseVideoUrl, setReverseVideoUrl] = useState('');
|
||||
const [transitionDurationSec, setTransitionDurationSec] = useState('0.7');
|
||||
const [tooltipTitle, setTooltipTitle] = useState('');
|
||||
const [tooltipText, setTooltipText] = useState('');
|
||||
const [descriptionTitle, setDescriptionTitle] = useState('');
|
||||
@ -136,8 +159,10 @@ const PageElementsProjectEditPage = () => {
|
||||
const [mediaAutoplay, setMediaAutoplay] = useState(false);
|
||||
const [mediaLoop, setMediaLoop] = useState(false);
|
||||
const [mediaMuted, setMediaMuted] = useState(false);
|
||||
const [galleryCardsJson, setGalleryCardsJson] = useState('[]');
|
||||
const [carouselSlidesJson, setCarouselSlidesJson] = useState('[]');
|
||||
const [carouselPrevIconUrl, setCarouselPrevIconUrl] = useState('');
|
||||
const [carouselNextIconUrl, setCarouselNextIconUrl] = useState('');
|
||||
const [galleryCards, setGalleryCards] = useState<GalleryCard[]>([]);
|
||||
const [carouselSlides, setCarouselSlides] = useState<CarouselSlide[]>([]);
|
||||
|
||||
const applyElementToForm = useCallback((item: ConstructorElement) => {
|
||||
setLabel(String(item.label || ''));
|
||||
@ -145,8 +170,14 @@ const PageElementsProjectEditPage = () => {
|
||||
setYPercent(String(item.yPercent ?? 0));
|
||||
setAppearDelaySec(String(item.appearDelaySec ?? 0));
|
||||
setAppearDurationSec(item.appearDurationSec === null || item.appearDurationSec === undefined ? '' : String(item.appearDurationSec));
|
||||
setIconUrl(String(item.iconUrl || ''));
|
||||
setNavLabel(String(item.navLabel || ''));
|
||||
setNavType(item.navType === 'back' ? 'back' : 'forward');
|
||||
setTargetPageId(String(item.targetPageId || ''));
|
||||
setTransitionVideoUrl(String(item.transitionVideoUrl || ''));
|
||||
setTransitionReverseMode(item.transitionReverseMode === 'separate_video' ? 'separate_video' : 'auto_reverse');
|
||||
setReverseVideoUrl(String(item.reverseVideoUrl || ''));
|
||||
setTransitionDurationSec(String(item.transitionDurationSec ?? 0.7));
|
||||
setTooltipTitle(String(item.tooltipTitle || ''));
|
||||
setTooltipText(String(item.tooltipText || ''));
|
||||
setDescriptionTitle(String(item.descriptionTitle || ''));
|
||||
@ -155,8 +186,27 @@ const PageElementsProjectEditPage = () => {
|
||||
setMediaAutoplay(Boolean(item.mediaAutoplay));
|
||||
setMediaLoop(Boolean(item.mediaLoop));
|
||||
setMediaMuted(Boolean(item.mediaMuted));
|
||||
setGalleryCardsJson(JSON.stringify(item.galleryCards || [], null, 2));
|
||||
setCarouselSlidesJson(JSON.stringify(item.carouselSlides || [], null, 2));
|
||||
setCarouselPrevIconUrl(String(item.carouselPrevIconUrl || ''));
|
||||
setCarouselNextIconUrl(String(item.carouselNextIconUrl || ''));
|
||||
setGalleryCards(
|
||||
Array.isArray(item.galleryCards)
|
||||
? item.galleryCards.map((card, index) => ({
|
||||
id: String(card?.id || createLocalId()),
|
||||
imageUrl: String(card?.imageUrl || ''),
|
||||
title: String(card?.title || `Card ${index + 1}`),
|
||||
description: String(card?.description || ''),
|
||||
}))
|
||||
: [],
|
||||
);
|
||||
setCarouselSlides(
|
||||
Array.isArray(item.carouselSlides)
|
||||
? item.carouselSlides.map((slide, index) => ({
|
||||
id: String(slide?.id || createLocalId()),
|
||||
imageUrl: String(slide?.imageUrl || ''),
|
||||
caption: String(slide?.caption || `Slide ${index + 1}`),
|
||||
}))
|
||||
: [],
|
||||
);
|
||||
}, []);
|
||||
|
||||
const loadData = useCallback(async () => {
|
||||
@ -208,6 +258,56 @@ const PageElementsProjectEditPage = () => {
|
||||
loadData();
|
||||
}, [loadData]);
|
||||
|
||||
const isNavigationType = element?.type === 'navigation_next' || element?.type === 'navigation_prev';
|
||||
const isTooltipType = element?.type === 'tooltip';
|
||||
const isDescriptionType = element?.type === 'description';
|
||||
const isGalleryType = element?.type === 'gallery';
|
||||
const isCarouselType = element?.type === 'carousel';
|
||||
const isMediaType = element?.type === 'video_player' || element?.type === 'audio_player';
|
||||
|
||||
const updateGalleryCard = (cardId: string, field: keyof GalleryCard, value: string) => {
|
||||
setGalleryCards((previous) =>
|
||||
previous.map((card) => (card.id === cardId ? { ...card, [field]: value } : card)),
|
||||
);
|
||||
};
|
||||
|
||||
const addGalleryCard = () => {
|
||||
setGalleryCards((previous) => [
|
||||
...previous,
|
||||
{
|
||||
id: createLocalId(),
|
||||
imageUrl: '',
|
||||
title: `Card ${previous.length + 1}`,
|
||||
description: '',
|
||||
},
|
||||
]);
|
||||
};
|
||||
|
||||
const removeGalleryCard = (cardId: string) => {
|
||||
setGalleryCards((previous) => previous.filter((card) => card.id !== cardId));
|
||||
};
|
||||
|
||||
const updateCarouselSlide = (slideId: string, field: keyof CarouselSlide, value: string) => {
|
||||
setCarouselSlides((previous) =>
|
||||
previous.map((slide) => (slide.id === slideId ? { ...slide, [field]: value } : slide)),
|
||||
);
|
||||
};
|
||||
|
||||
const addCarouselSlide = () => {
|
||||
setCarouselSlides((previous) => [
|
||||
...previous,
|
||||
{
|
||||
id: createLocalId(),
|
||||
imageUrl: '',
|
||||
caption: `Slide ${previous.length + 1}`,
|
||||
},
|
||||
]);
|
||||
};
|
||||
|
||||
const removeCarouselSlide = (slideId: string) => {
|
||||
setCarouselSlides((previous) => previous.filter((slide) => slide.id !== slideId));
|
||||
};
|
||||
|
||||
const saveElement = async () => {
|
||||
if (!currentPage || !element || !hasUpdatePermission) return;
|
||||
|
||||
@ -223,24 +323,55 @@ const PageElementsProjectEditPage = () => {
|
||||
yPercent: clampPercent(yPercent),
|
||||
appearDelaySec: Number(appearDelaySec) >= 0 ? Number(appearDelaySec) : 0,
|
||||
appearDurationSec: parseNullableNumber(appearDurationSec),
|
||||
navLabel: navLabel.trim(),
|
||||
targetPageId: targetPageId.trim(),
|
||||
tooltipTitle: tooltipTitle.trim(),
|
||||
tooltipText: tooltipText,
|
||||
descriptionTitle: descriptionTitle.trim(),
|
||||
descriptionText: descriptionText,
|
||||
mediaUrl: mediaUrl.trim(),
|
||||
mediaAutoplay,
|
||||
mediaLoop,
|
||||
mediaMuted,
|
||||
};
|
||||
|
||||
if (element.type === 'gallery') {
|
||||
nextElement.galleryCards = parseArrayJson(galleryCardsJson, 'Gallery cards');
|
||||
if (isNavigationType) {
|
||||
nextElement.iconUrl = iconUrl.trim();
|
||||
nextElement.navLabel = navLabel.trim();
|
||||
nextElement.navType = navType;
|
||||
nextElement.targetPageId = targetPageId.trim();
|
||||
nextElement.transitionVideoUrl = transitionVideoUrl.trim();
|
||||
nextElement.transitionReverseMode = transitionReverseMode;
|
||||
nextElement.reverseVideoUrl = reverseVideoUrl.trim();
|
||||
nextElement.transitionDurationSec = Number(transitionDurationSec) > 0 ? Number(transitionDurationSec) : 0.7;
|
||||
}
|
||||
|
||||
if (element.type === 'carousel') {
|
||||
nextElement.carouselSlides = parseArrayJson(carouselSlidesJson, 'Carousel slides');
|
||||
if (isTooltipType) {
|
||||
nextElement.iconUrl = iconUrl.trim();
|
||||
nextElement.tooltipTitle = tooltipTitle.trim();
|
||||
nextElement.tooltipText = tooltipText;
|
||||
}
|
||||
|
||||
if (isDescriptionType) {
|
||||
nextElement.iconUrl = iconUrl.trim();
|
||||
nextElement.descriptionTitle = descriptionTitle.trim();
|
||||
nextElement.descriptionText = descriptionText;
|
||||
}
|
||||
|
||||
if (isGalleryType) {
|
||||
nextElement.galleryCards = galleryCards.map((card, index) => ({
|
||||
id: String(card.id || createLocalId()),
|
||||
imageUrl: card.imageUrl.trim(),
|
||||
title: card.title.trim() || `Card ${index + 1}`,
|
||||
description: card.description,
|
||||
}));
|
||||
}
|
||||
|
||||
if (isCarouselType) {
|
||||
nextElement.carouselSlides = carouselSlides.map((slide, index) => ({
|
||||
id: String(slide.id || createLocalId()),
|
||||
imageUrl: slide.imageUrl.trim(),
|
||||
caption: slide.caption.trim() || `Slide ${index + 1}`,
|
||||
}));
|
||||
nextElement.carouselPrevIconUrl = carouselPrevIconUrl.trim();
|
||||
nextElement.carouselNextIconUrl = carouselNextIconUrl.trim();
|
||||
}
|
||||
|
||||
if (isMediaType) {
|
||||
nextElement.mediaUrl = mediaUrl.trim();
|
||||
nextElement.mediaAutoplay = mediaAutoplay;
|
||||
nextElement.mediaLoop = mediaLoop;
|
||||
nextElement.mediaMuted = mediaMuted;
|
||||
}
|
||||
|
||||
const existingSchema = parseJsonObject<ConstructorSchema>(currentPage.ui_schema_json, {});
|
||||
@ -345,185 +476,373 @@ const PageElementsProjectEditPage = () => {
|
||||
<CardBox className='mb-4'>
|
||||
<h3 className='mb-3 text-sm font-semibold'>General</h3>
|
||||
<div className='grid gap-4 md:grid-cols-2'>
|
||||
<div>
|
||||
<label className='mb-1 block text-sm font-semibold'>Label</label>
|
||||
<FormField label='Label'>
|
||||
<input
|
||||
className='w-full rounded border border-gray-300 px-2 py-2 dark:border-dark-700 dark:bg-dark-800'
|
||||
value={label}
|
||||
onChange={(event) => setLabel(event.target.value)}
|
||||
disabled={!hasUpdatePermission}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className='mb-1 block text-sm font-semibold'>Target page</label>
|
||||
<select
|
||||
className='w-full rounded border border-gray-300 px-2 py-2 dark:border-dark-700 dark:bg-dark-800'
|
||||
value={targetPageId}
|
||||
onChange={(event) => setTargetPageId(event.target.value)}
|
||||
disabled={!hasUpdatePermission}
|
||||
>
|
||||
<option value=''>None</option>
|
||||
{projectPages.map((page) => (
|
||||
<option key={page.id} value={page.id}>
|
||||
{page.name || page.id}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className='mb-1 block text-sm font-semibold'>X percent</label>
|
||||
</FormField>
|
||||
<FormField label='X percent'>
|
||||
<input
|
||||
className='w-full rounded border border-gray-300 px-2 py-2 dark:border-dark-700 dark:bg-dark-800'
|
||||
value={xPercent}
|
||||
onChange={(event) => setXPercent(event.target.value)}
|
||||
disabled={!hasUpdatePermission}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className='mb-1 block text-sm font-semibold'>Y percent</label>
|
||||
</FormField>
|
||||
<FormField label='Y percent'>
|
||||
<input
|
||||
className='w-full rounded border border-gray-300 px-2 py-2 dark:border-dark-700 dark:bg-dark-800'
|
||||
value={yPercent}
|
||||
onChange={(event) => setYPercent(event.target.value)}
|
||||
disabled={!hasUpdatePermission}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className='mb-1 block text-sm font-semibold'>Appear delay (sec)</label>
|
||||
</FormField>
|
||||
<FormField label='Appear delay (sec)'>
|
||||
<input
|
||||
className='w-full rounded border border-gray-300 px-2 py-2 dark:border-dark-700 dark:bg-dark-800'
|
||||
value={appearDelaySec}
|
||||
onChange={(event) => setAppearDelaySec(event.target.value)}
|
||||
disabled={!hasUpdatePermission}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className='mb-1 block text-sm font-semibold'>Appear duration (sec)</label>
|
||||
</FormField>
|
||||
<FormField label='Appear duration (sec)'>
|
||||
<input
|
||||
className='w-full rounded border border-gray-300 px-2 py-2 dark:border-dark-700 dark:bg-dark-800'
|
||||
value={appearDurationSec}
|
||||
onChange={(event) => setAppearDurationSec(event.target.value)}
|
||||
placeholder='Leave empty for none'
|
||||
disabled={!hasUpdatePermission}
|
||||
/>
|
||||
</div>
|
||||
</FormField>
|
||||
</div>
|
||||
</CardBox>
|
||||
|
||||
<CardBox className='mb-4'>
|
||||
<h3 className='mb-3 text-sm font-semibold'>Navigation / Text Settings</h3>
|
||||
<div className='grid gap-4 md:grid-cols-2'>
|
||||
<div>
|
||||
<label className='mb-1 block text-sm font-semibold'>Navigation label</label>
|
||||
<input
|
||||
className='w-full rounded border border-gray-300 px-2 py-2 dark:border-dark-700 dark:bg-dark-800'
|
||||
value={navLabel}
|
||||
onChange={(event) => setNavLabel(event.target.value)}
|
||||
disabled={!hasUpdatePermission}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className='mb-1 block text-sm font-semibold'>Tooltip title</label>
|
||||
<input
|
||||
className='w-full rounded border border-gray-300 px-2 py-2 dark:border-dark-700 dark:bg-dark-800'
|
||||
value={tooltipTitle}
|
||||
onChange={(event) => setTooltipTitle(event.target.value)}
|
||||
disabled={!hasUpdatePermission}
|
||||
/>
|
||||
</div>
|
||||
<div className='md:col-span-2'>
|
||||
<label className='mb-1 block text-sm font-semibold'>Tooltip text</label>
|
||||
<textarea
|
||||
className='h-24 w-full rounded border border-gray-300 px-2 py-2 dark:border-dark-700 dark:bg-dark-800'
|
||||
value={tooltipText}
|
||||
onChange={(event) => setTooltipText(event.target.value)}
|
||||
disabled={!hasUpdatePermission}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className='mb-1 block text-sm font-semibold'>Description title</label>
|
||||
<input
|
||||
className='w-full rounded border border-gray-300 px-2 py-2 dark:border-dark-700 dark:bg-dark-800'
|
||||
value={descriptionTitle}
|
||||
onChange={(event) => setDescriptionTitle(event.target.value)}
|
||||
disabled={!hasUpdatePermission}
|
||||
/>
|
||||
</div>
|
||||
<div className='md:col-span-2'>
|
||||
<label className='mb-1 block text-sm font-semibold'>Description text</label>
|
||||
<textarea
|
||||
className='h-24 w-full rounded border border-gray-300 px-2 py-2 dark:border-dark-700 dark:bg-dark-800'
|
||||
value={descriptionText}
|
||||
onChange={(event) => setDescriptionText(event.target.value)}
|
||||
disabled={!hasUpdatePermission}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</CardBox>
|
||||
|
||||
<CardBox className='mb-4'>
|
||||
<h3 className='mb-3 text-sm font-semibold'>Media</h3>
|
||||
<div className='grid gap-4 md:grid-cols-2'>
|
||||
<div className='md:col-span-2'>
|
||||
<label className='mb-1 block text-sm font-semibold'>Media URL</label>
|
||||
<input
|
||||
className='w-full rounded border border-gray-300 px-2 py-2 dark:border-dark-700 dark:bg-dark-800'
|
||||
value={mediaUrl}
|
||||
onChange={(event) => setMediaUrl(event.target.value)}
|
||||
disabled={!hasUpdatePermission}
|
||||
/>
|
||||
</div>
|
||||
<label className='flex items-center gap-2 text-sm'>
|
||||
<input
|
||||
type='checkbox'
|
||||
checked={mediaAutoplay}
|
||||
onChange={(event) => setMediaAutoplay(event.target.checked)}
|
||||
disabled={!hasUpdatePermission}
|
||||
/>
|
||||
Autoplay
|
||||
</label>
|
||||
<label className='flex items-center gap-2 text-sm'>
|
||||
<input
|
||||
type='checkbox'
|
||||
checked={mediaLoop}
|
||||
onChange={(event) => setMediaLoop(event.target.checked)}
|
||||
disabled={!hasUpdatePermission}
|
||||
/>
|
||||
Loop
|
||||
</label>
|
||||
<label className='flex items-center gap-2 text-sm'>
|
||||
<input
|
||||
type='checkbox'
|
||||
checked={mediaMuted}
|
||||
onChange={(event) => setMediaMuted(event.target.checked)}
|
||||
disabled={!hasUpdatePermission}
|
||||
/>
|
||||
Muted
|
||||
</label>
|
||||
</div>
|
||||
</CardBox>
|
||||
|
||||
{element.type === 'gallery' ? (
|
||||
{isNavigationType ? (
|
||||
<CardBox className='mb-4'>
|
||||
<h3 className='mb-3 text-sm font-semibold'>Gallery cards JSON</h3>
|
||||
<textarea
|
||||
className='h-56 w-full rounded border border-gray-300 px-2 py-2 font-mono text-xs dark:border-dark-700 dark:bg-dark-800'
|
||||
value={galleryCardsJson}
|
||||
onChange={(event) => setGalleryCardsJson(event.target.value)}
|
||||
disabled={!hasUpdatePermission}
|
||||
/>
|
||||
<h3 className='mb-3 text-sm font-semibold'>Navigation</h3>
|
||||
<div className='grid gap-4 md:grid-cols-2'>
|
||||
<FormField label='Icon URL'>
|
||||
<input
|
||||
value={iconUrl}
|
||||
onChange={(event) => setIconUrl(event.target.value)}
|
||||
disabled={!hasUpdatePermission}
|
||||
/>
|
||||
</FormField>
|
||||
<FormField label='Navigation label'>
|
||||
<input
|
||||
value={navLabel}
|
||||
onChange={(event) => setNavLabel(event.target.value)}
|
||||
disabled={!hasUpdatePermission}
|
||||
/>
|
||||
</FormField>
|
||||
<FormField label='Navigation type'>
|
||||
<select
|
||||
value={navType}
|
||||
onChange={(event) => setNavType(event.target.value === 'back' ? 'back' : 'forward')}
|
||||
disabled={!hasUpdatePermission}
|
||||
>
|
||||
<option value='forward'>Forward</option>
|
||||
<option value='back'>Back</option>
|
||||
</select>
|
||||
</FormField>
|
||||
<FormField label='Target page'>
|
||||
<select
|
||||
value={targetPageId}
|
||||
onChange={(event) => setTargetPageId(event.target.value)}
|
||||
disabled={!hasUpdatePermission}
|
||||
>
|
||||
<option value=''>None</option>
|
||||
{projectPages.map((page) => (
|
||||
<option key={page.id} value={page.id}>
|
||||
{page.name || page.id}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</FormField>
|
||||
<FormField label='Transition video URL'>
|
||||
<input
|
||||
value={transitionVideoUrl}
|
||||
onChange={(event) => setTransitionVideoUrl(event.target.value)}
|
||||
disabled={!hasUpdatePermission}
|
||||
/>
|
||||
</FormField>
|
||||
<FormField label='Reverse mode'>
|
||||
<select
|
||||
value={transitionReverseMode}
|
||||
onChange={(event) =>
|
||||
setTransitionReverseMode(
|
||||
event.target.value === 'separate_video' ? 'separate_video' : 'auto_reverse',
|
||||
)
|
||||
}
|
||||
disabled={!hasUpdatePermission}
|
||||
>
|
||||
<option value='auto_reverse'>Auto reverse</option>
|
||||
<option value='separate_video'>Separate reverse video</option>
|
||||
</select>
|
||||
</FormField>
|
||||
{transitionReverseMode === 'separate_video' ? (
|
||||
<FormField label='Reverse video URL'>
|
||||
<input
|
||||
value={reverseVideoUrl}
|
||||
onChange={(event) => setReverseVideoUrl(event.target.value)}
|
||||
disabled={!hasUpdatePermission}
|
||||
/>
|
||||
</FormField>
|
||||
) : null}
|
||||
<FormField label='Transition duration (sec)'>
|
||||
<input
|
||||
value={transitionDurationSec}
|
||||
onChange={(event) => setTransitionDurationSec(event.target.value)}
|
||||
disabled={!hasUpdatePermission}
|
||||
/>
|
||||
</FormField>
|
||||
</div>
|
||||
</CardBox>
|
||||
) : null}
|
||||
|
||||
{element.type === 'carousel' ? (
|
||||
{isTooltipType ? (
|
||||
<CardBox className='mb-4'>
|
||||
<h3 className='mb-3 text-sm font-semibold'>Carousel slides JSON</h3>
|
||||
<textarea
|
||||
className='h-56 w-full rounded border border-gray-300 px-2 py-2 font-mono text-xs dark:border-dark-700 dark:bg-dark-800'
|
||||
value={carouselSlidesJson}
|
||||
onChange={(event) => setCarouselSlidesJson(event.target.value)}
|
||||
disabled={!hasUpdatePermission}
|
||||
/>
|
||||
<h3 className='mb-3 text-sm font-semibold'>Tooltip</h3>
|
||||
<div className='grid gap-4 md:grid-cols-2'>
|
||||
<FormField label='Icon URL'>
|
||||
<input
|
||||
value={iconUrl}
|
||||
onChange={(event) => setIconUrl(event.target.value)}
|
||||
disabled={!hasUpdatePermission}
|
||||
/>
|
||||
</FormField>
|
||||
<FormField label='Tooltip title'>
|
||||
<input
|
||||
value={tooltipTitle}
|
||||
onChange={(event) => setTooltipTitle(event.target.value)}
|
||||
disabled={!hasUpdatePermission}
|
||||
/>
|
||||
</FormField>
|
||||
<div className='md:col-span-2'>
|
||||
<FormField label='Tooltip text' hasTextareaHeight>
|
||||
<textarea
|
||||
className='h-24 w-full rounded border border-gray-300 px-2 py-2 dark:border-dark-700 dark:bg-dark-800'
|
||||
value={tooltipText}
|
||||
onChange={(event) => setTooltipText(event.target.value)}
|
||||
disabled={!hasUpdatePermission}
|
||||
/>
|
||||
</FormField>
|
||||
</div>
|
||||
</div>
|
||||
</CardBox>
|
||||
) : null}
|
||||
|
||||
{isDescriptionType ? (
|
||||
<CardBox className='mb-4'>
|
||||
<h3 className='mb-3 text-sm font-semibold'>Description</h3>
|
||||
<div className='grid gap-4 md:grid-cols-2'>
|
||||
<FormField label='Icon URL'>
|
||||
<input
|
||||
value={iconUrl}
|
||||
onChange={(event) => setIconUrl(event.target.value)}
|
||||
disabled={!hasUpdatePermission}
|
||||
/>
|
||||
</FormField>
|
||||
<FormField label='Description title'>
|
||||
<input
|
||||
value={descriptionTitle}
|
||||
onChange={(event) => setDescriptionTitle(event.target.value)}
|
||||
disabled={!hasUpdatePermission}
|
||||
/>
|
||||
</FormField>
|
||||
<div className='md:col-span-2'>
|
||||
<FormField label='Description text' hasTextareaHeight>
|
||||
<textarea
|
||||
className='h-24 w-full rounded border border-gray-300 px-2 py-2 dark:border-dark-700 dark:bg-dark-800'
|
||||
value={descriptionText}
|
||||
onChange={(event) => setDescriptionText(event.target.value)}
|
||||
disabled={!hasUpdatePermission}
|
||||
/>
|
||||
</FormField>
|
||||
</div>
|
||||
</div>
|
||||
</CardBox>
|
||||
) : null}
|
||||
|
||||
{isMediaType ? (
|
||||
<CardBox className='mb-4'>
|
||||
<h3 className='mb-3 text-sm font-semibold'>Media</h3>
|
||||
<div className='grid gap-4 md:grid-cols-2'>
|
||||
<div className='md:col-span-2'>
|
||||
<FormField label='Media URL'>
|
||||
<input
|
||||
value={mediaUrl}
|
||||
onChange={(event) => setMediaUrl(event.target.value)}
|
||||
disabled={!hasUpdatePermission}
|
||||
/>
|
||||
</FormField>
|
||||
</div>
|
||||
<FormField label='Playback options'>
|
||||
<div className='flex flex-wrap gap-4 pt-2'>
|
||||
<label className='flex items-center gap-2 text-sm'>
|
||||
<input
|
||||
type='checkbox'
|
||||
checked={mediaAutoplay}
|
||||
onChange={(event) => setMediaAutoplay(event.target.checked)}
|
||||
disabled={!hasUpdatePermission}
|
||||
/>
|
||||
Autoplay
|
||||
</label>
|
||||
<label className='flex items-center gap-2 text-sm'>
|
||||
<input
|
||||
type='checkbox'
|
||||
checked={mediaLoop}
|
||||
onChange={(event) => setMediaLoop(event.target.checked)}
|
||||
disabled={!hasUpdatePermission}
|
||||
/>
|
||||
Loop
|
||||
</label>
|
||||
<label className='flex items-center gap-2 text-sm'>
|
||||
<input
|
||||
type='checkbox'
|
||||
checked={mediaMuted}
|
||||
onChange={(event) => setMediaMuted(event.target.checked)}
|
||||
disabled={!hasUpdatePermission}
|
||||
/>
|
||||
Muted
|
||||
</label>
|
||||
</div>
|
||||
</FormField>
|
||||
</div>
|
||||
</CardBox>
|
||||
) : null}
|
||||
|
||||
{isGalleryType ? (
|
||||
<CardBox className='mb-4'>
|
||||
<div className='mb-3 flex items-center justify-between'>
|
||||
<h3 className='text-sm font-semibold'>Gallery cards</h3>
|
||||
<BaseButton
|
||||
color='info'
|
||||
icon={mdiPlus}
|
||||
small
|
||||
label='Add card'
|
||||
onClick={addGalleryCard}
|
||||
disabled={!hasUpdatePermission}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='space-y-4'>
|
||||
{galleryCards.length === 0 ? (
|
||||
<p className='text-sm text-gray-500'>No cards yet.</p>
|
||||
) : (
|
||||
galleryCards.map((card, index) => (
|
||||
<CardBox key={card.id} className='border border-gray-200 dark:border-dark-700'>
|
||||
<div className='mb-3 flex items-center justify-between'>
|
||||
<h4 className='text-sm font-semibold'>Card {index + 1}</h4>
|
||||
<BaseButton
|
||||
color='danger'
|
||||
icon={mdiTrashCan}
|
||||
small
|
||||
outline
|
||||
onClick={() => removeGalleryCard(card.id)}
|
||||
disabled={!hasUpdatePermission}
|
||||
/>
|
||||
</div>
|
||||
<div className='grid gap-3 md:grid-cols-2'>
|
||||
<FormField label='Image URL'>
|
||||
<input
|
||||
value={card.imageUrl}
|
||||
onChange={(event) => updateGalleryCard(card.id, 'imageUrl', event.target.value)}
|
||||
disabled={!hasUpdatePermission}
|
||||
/>
|
||||
</FormField>
|
||||
<FormField label='Title'>
|
||||
<input
|
||||
value={card.title}
|
||||
onChange={(event) => updateGalleryCard(card.id, 'title', event.target.value)}
|
||||
disabled={!hasUpdatePermission}
|
||||
/>
|
||||
</FormField>
|
||||
<div className='md:col-span-2'>
|
||||
<FormField label='Description' hasTextareaHeight>
|
||||
<textarea
|
||||
className='h-24 w-full rounded border border-gray-300 px-2 py-2 dark:border-dark-700 dark:bg-dark-800'
|
||||
value={card.description}
|
||||
onChange={(event) => updateGalleryCard(card.id, 'description', event.target.value)}
|
||||
disabled={!hasUpdatePermission}
|
||||
/>
|
||||
</FormField>
|
||||
</div>
|
||||
</div>
|
||||
</CardBox>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</CardBox>
|
||||
) : null}
|
||||
|
||||
{isCarouselType ? (
|
||||
<CardBox className='mb-4'>
|
||||
<h3 className='mb-3 text-sm font-semibold'>Carousel settings</h3>
|
||||
<div className='grid gap-4 md:grid-cols-2'>
|
||||
<FormField label='Previous icon URL'>
|
||||
<input
|
||||
value={carouselPrevIconUrl}
|
||||
onChange={(event) => setCarouselPrevIconUrl(event.target.value)}
|
||||
disabled={!hasUpdatePermission}
|
||||
/>
|
||||
</FormField>
|
||||
<FormField label='Next icon URL'>
|
||||
<input
|
||||
value={carouselNextIconUrl}
|
||||
onChange={(event) => setCarouselNextIconUrl(event.target.value)}
|
||||
disabled={!hasUpdatePermission}
|
||||
/>
|
||||
</FormField>
|
||||
</div>
|
||||
|
||||
<div className='mb-3 mt-2 flex items-center justify-between'>
|
||||
<h3 className='text-sm font-semibold'>Carousel slides</h3>
|
||||
<BaseButton
|
||||
color='info'
|
||||
icon={mdiPlus}
|
||||
small
|
||||
label='Add slide'
|
||||
onClick={addCarouselSlide}
|
||||
disabled={!hasUpdatePermission}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='space-y-4'>
|
||||
{carouselSlides.length === 0 ? (
|
||||
<p className='text-sm text-gray-500'>No slides yet.</p>
|
||||
) : (
|
||||
carouselSlides.map((slide, index) => (
|
||||
<CardBox key={slide.id} className='border border-gray-200 dark:border-dark-700'>
|
||||
<div className='mb-3 flex items-center justify-between'>
|
||||
<h4 className='text-sm font-semibold'>Slide {index + 1}</h4>
|
||||
<BaseButton
|
||||
color='danger'
|
||||
icon={mdiTrashCan}
|
||||
small
|
||||
outline
|
||||
onClick={() => removeCarouselSlide(slide.id)}
|
||||
disabled={!hasUpdatePermission}
|
||||
/>
|
||||
</div>
|
||||
<div className='grid gap-3 md:grid-cols-2'>
|
||||
<FormField label='Image URL'>
|
||||
<input
|
||||
value={slide.imageUrl}
|
||||
onChange={(event) => updateCarouselSlide(slide.id, 'imageUrl', event.target.value)}
|
||||
disabled={!hasUpdatePermission}
|
||||
/>
|
||||
</FormField>
|
||||
<FormField label='Caption'>
|
||||
<input
|
||||
value={slide.caption}
|
||||
onChange={(event) => updateCarouselSlide(slide.id, 'caption', event.target.value)}
|
||||
disabled={!hasUpdatePermission}
|
||||
/>
|
||||
</FormField>
|
||||
</div>
|
||||
</CardBox>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</CardBox>
|
||||
) : null}
|
||||
</>
|
||||
|
||||
@ -1,131 +1,62 @@
|
||||
import { mdiChartTimelineVariant } from '@mdi/js';
|
||||
import Head from 'next/head';
|
||||
import { useRouter } from 'next/router';
|
||||
import React, {
|
||||
ReactElement,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useState,
|
||||
} from 'react';
|
||||
import { mdiPaletteSwatch } from '@mdi/js';
|
||||
import axios from 'axios';
|
||||
import Head from 'next/head';
|
||||
import Link from 'next/link';
|
||||
import React, { ReactElement, useCallback, useEffect, useState } from 'react';
|
||||
import CardBox from '../components/CardBox';
|
||||
import LayoutAuthenticated from '../layouts/Authenticated';
|
||||
import SectionMain from '../components/SectionMain';
|
||||
import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton';
|
||||
import { getPageTitle } from '../config';
|
||||
import ElementPreview from '../components/UiElements/ElementPreview';
|
||||
import {
|
||||
getDefaultSettings,
|
||||
normalizeUiElement,
|
||||
toElementLabel,
|
||||
UI_ELEMENT_TYPES,
|
||||
} from '../components/UiElements/defaults';
|
||||
import { UiElementItem, UiElementRow } from '../components/UiElements/types';
|
||||
|
||||
type UiElementType = {
|
||||
id: string;
|
||||
element_type: string;
|
||||
name?: string;
|
||||
sort_order?: number;
|
||||
is_active?: boolean;
|
||||
};
|
||||
|
||||
const toHumanLabel = (value: string) =>
|
||||
String(value || '')
|
||||
.split('_')
|
||||
.map((part) => part.charAt(0).toUpperCase() + part.slice(1))
|
||||
.join(' ');
|
||||
|
||||
const UiElementsPage = () => {
|
||||
const router = useRouter();
|
||||
|
||||
const [elements, setElements] = useState<UiElementItem[]>([]);
|
||||
const [rows, setRows] = useState<UiElementType[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [errorMessage, setErrorMessage] = useState('');
|
||||
|
||||
const fetchRows = useCallback(async () => {
|
||||
const response = await axios.get(
|
||||
'/ui-elements?limit=1000&page=0&sort=asc&field=sort_order',
|
||||
);
|
||||
return Array.isArray(response?.data?.rows) ? response.data.rows : [];
|
||||
}, []);
|
||||
|
||||
const bootstrapMissingElements = useCallback(async (rows: UiElementRow[]) => {
|
||||
const existingTypes = new Set(rows.map((row) => row.element_type));
|
||||
const missingTypes = UI_ELEMENT_TYPES.filter(
|
||||
(type) => !existingTypes.has(type),
|
||||
);
|
||||
|
||||
const safeStartOrder = Math.max(
|
||||
1,
|
||||
...rows
|
||||
.map((row) => Number(row.sort_order))
|
||||
.filter((value) => Number.isFinite(value))
|
||||
.map((value) => Math.trunc(value) + 1),
|
||||
);
|
||||
|
||||
if (!missingTypes.length) return;
|
||||
|
||||
const createResults = await Promise.allSettled(
|
||||
missingTypes.map((elementType, index) =>
|
||||
axios.post('/ui-elements', {
|
||||
data: {
|
||||
element_type: elementType,
|
||||
name: toElementLabel(elementType),
|
||||
sort_order: safeStartOrder + index,
|
||||
settings_json: JSON.stringify(getDefaultSettings(elementType)),
|
||||
},
|
||||
}),
|
||||
),
|
||||
);
|
||||
|
||||
const rejected = createResults.filter(
|
||||
(result) => result.status === 'rejected',
|
||||
) as PromiseRejectedResult[];
|
||||
|
||||
if (rejected.length) {
|
||||
const reasons = rejected
|
||||
.map((result) => {
|
||||
const err = result.reason;
|
||||
return (
|
||||
err?.response?.data?.message ||
|
||||
err?.message ||
|
||||
'Unknown create error'
|
||||
);
|
||||
})
|
||||
.join('; ');
|
||||
|
||||
throw new Error(`Failed to bootstrap some UI elements: ${reasons}`);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const loadElements = useCallback(async () => {
|
||||
setIsLoading(true);
|
||||
setErrorMessage('');
|
||||
|
||||
const loadRows = useCallback(async () => {
|
||||
try {
|
||||
const initialRows = (await fetchRows()) as UiElementRow[];
|
||||
await bootstrapMissingElements(initialRows);
|
||||
setIsLoading(true);
|
||||
setErrorMessage('');
|
||||
|
||||
const rowsAfterBootstrap = (await fetchRows()) as UiElementRow[];
|
||||
const normalized = rowsAfterBootstrap
|
||||
.map((row) => normalizeUiElement(row))
|
||||
.sort(
|
||||
(a, b) => a.sortOrder - b.sortOrder || a.name.localeCompare(b.name),
|
||||
);
|
||||
const response = await axios.get(
|
||||
'/ui-elements?limit=1000&page=0&sort=asc&field=sort_order',
|
||||
);
|
||||
|
||||
setElements(normalized);
|
||||
const nextRows: UiElementType[] = Array.isArray(response?.data?.rows)
|
||||
? response.data.rows
|
||||
: [];
|
||||
setRows(nextRows);
|
||||
} catch (error: any) {
|
||||
const message =
|
||||
error?.response?.data?.message ||
|
||||
error?.message ||
|
||||
'Failed to load UI elements.';
|
||||
'Failed to load UI element types.';
|
||||
console.error('Failed to load UI element defaults:', error);
|
||||
setErrorMessage(message);
|
||||
setElements([]);
|
||||
console.error('Failed to load UI elements:', error);
|
||||
setRows([]);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, [bootstrapMissingElements, fetchRows]);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
loadElements();
|
||||
}, [loadElements]);
|
||||
|
||||
const sortedElements = useMemo(
|
||||
() =>
|
||||
[...elements].sort(
|
||||
(a, b) => a.sortOrder - b.sortOrder || a.name.localeCompare(b.name),
|
||||
),
|
||||
[elements],
|
||||
);
|
||||
loadRows();
|
||||
}, [loadRows]);
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -134,54 +65,38 @@ const UiElementsPage = () => {
|
||||
</Head>
|
||||
<SectionMain>
|
||||
<SectionTitleLineWithButton
|
||||
icon={mdiChartTimelineVariant}
|
||||
title='UI Elements'
|
||||
icon={mdiPaletteSwatch}
|
||||
title='UI Elements Defaults'
|
||||
main
|
||||
>
|
||||
{''}
|
||||
</SectionTitleLineWithButton>
|
||||
|
||||
{errorMessage ? (
|
||||
<CardBox className='mb-4 text-sm text-red-600'>
|
||||
{errorMessage}
|
||||
</CardBox>
|
||||
) : null}
|
||||
|
||||
<CardBox>
|
||||
{isLoading ? (
|
||||
<p className='text-sm text-gray-500'>
|
||||
Loading platform elements...
|
||||
</p>
|
||||
) : !sortedElements.length ? (
|
||||
<p className='text-sm text-gray-500'>No UI elements found.</p>
|
||||
<p className='text-sm text-gray-500'>Loading UI element types...</p>
|
||||
) : errorMessage ? (
|
||||
<p className='text-sm text-red-600'>{errorMessage}</p>
|
||||
) : rows.length === 0 ? (
|
||||
<p className='text-sm text-gray-500'>No UI element types found.</p>
|
||||
) : (
|
||||
<div className='overflow-x-auto'>
|
||||
<table className='w-full min-w-[680px] text-sm'>
|
||||
<thead>
|
||||
<tr className='border-b border-gray-200 text-left dark:border-dark-700'>
|
||||
<th className='py-2 pr-3 font-semibold'>Name</th>
|
||||
<th className='py-2 pr-3 font-semibold'>Type</th>
|
||||
<th className='py-2 pr-3 font-semibold'>Preview</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{sortedElements.map((item) => (
|
||||
<tr
|
||||
key={item.id}
|
||||
className='cursor-pointer border-b border-gray-100 hover:bg-gray-50 dark:border-dark-800 dark:hover:bg-dark-800'
|
||||
onClick={() => router.push(`/ui-elements/${item.id}`)}
|
||||
>
|
||||
<td className='py-3 pr-3 font-semibold'>{item.name}</td>
|
||||
<td className='py-3 pr-3 text-xs text-gray-500'>
|
||||
{toElementLabel(item.elementType)}
|
||||
</td>
|
||||
<td className='py-3 pr-3'>
|
||||
<ElementPreview item={item} />
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<div className='space-y-2'>
|
||||
{rows.map((item) => (
|
||||
<Link
|
||||
key={item.id}
|
||||
href={`/ui-elements/${item.id}`}
|
||||
className='block rounded border border-gray-200 px-3 py-2 hover:bg-gray-50 dark:border-dark-700 dark:hover:bg-dark-800'
|
||||
>
|
||||
<p className='text-sm font-semibold'>
|
||||
{item.name || toHumanLabel(item.element_type)}
|
||||
</p>
|
||||
<p className='text-xs text-gray-500'>
|
||||
{toHumanLabel(item.element_type)} • Order{' '}
|
||||
{Number(item.sort_order || 0)} •{' '}
|
||||
{item.is_active ? 'Active' : 'Inactive'}
|
||||
</p>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardBox>
|
||||
@ -191,7 +106,11 @@ const UiElementsPage = () => {
|
||||
};
|
||||
|
||||
UiElementsPage.getLayout = function getLayout(page: ReactElement) {
|
||||
return <LayoutAuthenticated>{page}</LayoutAuthenticated>;
|
||||
return (
|
||||
<LayoutAuthenticated permission='READ_PAGE_ELEMENTS'>
|
||||
{page}
|
||||
</LayoutAuthenticated>
|
||||
);
|
||||
};
|
||||
|
||||
export default UiElementsPage;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user