forked from UKSOURCE/cms.lams
feat(cms): refactor page content management and implement detailed editors
Refactor the CMS page content system to use a more modular configuration-driven approach. This replaces the monolithic `pageContentConfig.js` with individual configuration files for each page and introduces a shared field utility to standardize editor components. Key changes: - Implement a generic `_renderSingletonPageView` helper to reduce duplication across controllers. - Enhance `_createPageContentController` with `normalizeForEditor`, `normalizeForApi`, and `preparePayload` hooks for custom data transformation. - Create dedicated configuration and view structures for Partnerships, History, Accreditation, Admissions, and Policies pages. - Add a specialized section editor for Policies to manage complex nested content. - Improve the frontend `page-content-editor.js` with support for visibility logic, auto-sequencing for arrays, and URL synchronization for active tabs. - Update data JSON files to align with the new schema.
This commit is contained in:
Tống Thành Đạt
@@ -0,0 +1,167 @@
|
||||
<template id="directoryTabTemplate">
|
||||
<div class="card shadow-sm border-0 mb-3" data-item="directory-tab">
|
||||
<div class="bg-white border-bottom px-3 py-3 d-flex justify-content-between align-items-center gap-2">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<button type="button" class="btn btn-light btn-sm border drag-handle" title="Drag to reorder">
|
||||
<i class="fas fa-grip-vertical"></i>
|
||||
</button>
|
||||
<div class="fw-semibold">Category Tab</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-outline-danger btn-sm" data-remove-item>
|
||||
<i class="fas fa-trash-alt me-1"></i>Remove
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<label class="form-label fw-semibold">Tab label</label>
|
||||
<input class="form-control" data-field="label" maxlength="30" placeholder="Industry">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template id="partnerTemplate">
|
||||
<div class="card shadow-sm border-0 mb-3" data-item="partner">
|
||||
<div class="bg-white border-bottom px-3 py-3 d-flex justify-content-between align-items-center gap-2 flex-wrap">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<button type="button" class="btn btn-light btn-sm border drag-handle" title="Drag to reorder">
|
||||
<i class="fas fa-grip-vertical"></i>
|
||||
</button>
|
||||
<div>
|
||||
<div class="fw-semibold" data-title>Partner</div>
|
||||
<div class="small text-muted" data-subtitle></div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-outline-danger btn-sm" data-remove-item>
|
||||
<i class="fas fa-trash-alt me-1"></i>Remove
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-4">
|
||||
<label class="form-label fw-semibold">Partner key</label>
|
||||
<input class="form-control" data-field="id" maxlength="50">
|
||||
<div class="form-text">Use a short unique key.</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label fw-semibold">Partner name</label>
|
||||
<input class="form-control" data-field="name" maxlength="90">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label fw-semibold">Category</label>
|
||||
<input class="form-control" data-field="category" list="">
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label class="form-label fw-semibold">Card summary</label>
|
||||
<textarea class="form-control" data-field="summary" rows="3" maxlength="130"></textarea>
|
||||
<div class="form-text">The card preview is capped at 130 characters.</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label class="form-label fw-semibold">Partner logo</label>
|
||||
<div class="input-group">
|
||||
<input class="form-control" data-field="logo">
|
||||
<button class="btn btn-outline-primary" type="button" data-upload-button>
|
||||
<i class="fas fa-upload me-1"></i>Upload
|
||||
</button>
|
||||
</div>
|
||||
<div class="form-text">Recommended 105x80 px minimum visible ratio</div>
|
||||
<img class="img-thumbnail mt-2 d-none" data-preview style="max-height: 180px;">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label fw-semibold">Logo alt text</label>
|
||||
<input class="form-control" data-field="logoAlt" maxlength="120">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label fw-semibold">Collaboration type</label>
|
||||
<input class="form-control" data-field="collabType" maxlength="40">
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label class="form-label fw-semibold">About text</label>
|
||||
<textarea class="form-control" data-field="about" rows="5" maxlength="600"></textarea>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label class="form-label fw-semibold">Benefits</label>
|
||||
<textarea class="form-control" data-field="benefits" rows="4" maxlength="240"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template id="inquiryFieldTemplate">
|
||||
<div class="card shadow-sm border-0 mb-3" data-item="inquiry-field">
|
||||
<div class="bg-white border-bottom px-3 py-3 d-flex justify-content-between align-items-center gap-2 flex-wrap">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<button type="button" class="btn btn-light btn-sm border drag-handle" title="Drag to reorder">
|
||||
<i class="fas fa-grip-vertical"></i>
|
||||
</button>
|
||||
<div>
|
||||
<div class="fw-semibold" data-title>Field</div>
|
||||
<div class="small text-muted" data-subtitle></div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-outline-danger btn-sm" data-remove-item>
|
||||
<i class="fas fa-trash-alt me-1"></i>Remove
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-4">
|
||||
<label class="form-label fw-semibold">Field key</label>
|
||||
<input class="form-control" data-field="id" maxlength="40">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label fw-semibold">Field label</label>
|
||||
<input class="form-control" data-field="label" maxlength="40">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label fw-semibold">Placeholder text</label>
|
||||
<input class="form-control" data-field="placeholder" maxlength="80">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label fw-semibold">Field type</label>
|
||||
<select class="form-select" data-field="type">
|
||||
<option value="text">Single line text</option>
|
||||
<option value="textarea">Paragraph</option>
|
||||
<option value="select">Dropdown</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label fw-semibold">Field width</label>
|
||||
<select class="form-select" data-field="width">
|
||||
<option value="half">Half width</option>
|
||||
<option value="full">Full width</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-4 d-flex align-items-end">
|
||||
<div class="form-check mb-2">
|
||||
<input class="form-check-input" type="checkbox" data-field="required">
|
||||
<label class="form-check-label fw-semibold">Required field</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12" data-options-wrap>
|
||||
<div class="border rounded-3 p-3 bg-light">
|
||||
<div class="d-flex justify-content-between align-items-center mb-2">
|
||||
<label class="form-label fw-semibold mb-0">Dropdown options</label>
|
||||
<button type="button" class="btn btn-outline-primary btn-sm" data-add-option>
|
||||
<i class="fas fa-plus me-1"></i>Add Option
|
||||
</button>
|
||||
</div>
|
||||
<div class="form-text mb-2">Only used when the field type is Dropdown.</div>
|
||||
<div data-options-list></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template id="inquiryOptionTemplate">
|
||||
<div class="input-group mb-2" data-item="inquiry-option">
|
||||
<button type="button" class="btn btn-light border drag-handle" title="Drag to reorder">
|
||||
<i class="fas fa-grip-vertical"></i>
|
||||
</button>
|
||||
<input class="form-control" data-option-value maxlength="50" placeholder="Option label">
|
||||
<button type="button" class="btn btn-outline-danger" data-remove-item>
|
||||
<i class="fas fa-trash-alt"></i>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user