NguyenThanhToan/cms.techvanguard.vn
1
0
Fork 0
forked from UKSOURCE/cms.lams
Code Pull Requests Activity

feat(cms): enhance content editors with dynamic UI configs and validation

Browse Source 
Implement a more flexible, configuration-driven approach for CMS editors across accreditation, admissions, and partnerships modules.
- Move UI labels, help texts, and field limits from hardcoded views to `editorUi` configurations in config files.
- Add server-side and client-side validation to prevent duplicate category tabs in accreditation and partnerships editors.
- Refactor partnership and admission views to dynamically render tabs and fields based on the provided configuration.
- Update field length constraints and default values across multiple content editors to better align with frontend requirements.
- Improve the admissions calculator editor with dynamic field configurations and default value fallbacks.
This commit is contained in:
Tống Thành Đạt
2026-04-22 18:06:03 +07:00
parent a44d005c13
commit a39c336dd4
19 changed files with 790 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files
views/admin/partnerships/partials/templates.ejs
+41 -35
View File
@@ -1,3 +1,8 @@
<% const directoryUi = editorUi.directory || {}; %>
<% const partnerFields = directoryUi.partnerFields || {}; %>
<% const inquiryUi = editorUi.inquiryForm || {}; %>
<% const inquiryFieldFields = inquiryUi.fieldFields || {}; %>
<template id="directoryTabTemplate">
<div class="card cms-item-card mb-3" data-item="directory-tab">
<div class="card-header d-flex justify-content-between align-items-center gap-2">
@@ -17,8 +22,8 @@
</div>
</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">
<label class="form-label fw-semibold"><%= directoryUi.tabs?.itemLabel || "Tab label" %></label>
<input class="form-control" data-field="label" maxlength="<%= directoryUi.tabs?.itemSchema?.maxLength || 30 %>" placeholder="<%= directoryUi.tabs?.itemSchema?.placeholder || 'Industry' %>">
</div>
</div>
</template>
@@ -47,44 +52,44 @@
<div class="card-body">
<div class="row g-3">
<div class="col-md-4">
<label class="form-label fw-semibold">Partner name</label>
<input class="form-control" data-field="name" maxlength="90">
<label class="form-label fw-semibold"><%= partnerFields.name?.label || "Partner name" %></label>
<input class="form-control" data-field="name" maxlength="<%= partnerFields.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="">
<label class="form-label fw-semibold"><%= partnerFields.category?.label || "Category" %></label>
<input class="form-control" data-field="category" list="" maxlength="<%= partnerFields.category?.maxLength || 30 %>">
</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>
<label class="form-label fw-semibold"><%= partnerFields.summary?.label || "Card summary" %></label>
<textarea class="form-control" data-field="summary" rows="<%= partnerFields.summary?.rows || 3 %>" maxlength="<%= partnerFields.summary?.maxLength || 130 %>"></textarea>
<div class="form-text"><%= partnerFields.summary?.helpText || "" %></div>
</div>
<div class="col-12">
<label class="form-label fw-semibold">Partner logo</label>
<label class="form-label fw-semibold"><%= partnerFields.logo?.label || "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>
<div class="form-text"><%= [partnerFields.logo?.helpText, partnerFields.logo?.imageHint].filter(Boolean).join(" ") %></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">
<label class="form-label fw-semibold"><%= partnerFields.logoAlt?.label || "Logo alt text" %></label>
<input class="form-control" data-field="logoAlt" maxlength="<%= partnerFields.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">
<label class="form-label fw-semibold"><%= partnerFields.collabType?.label || "Collaboration type" %></label>
<input class="form-control" data-field="collabType" maxlength="<%= partnerFields.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>
<label class="form-label fw-semibold"><%= partnerFields.about?.label || "About text" %></label>
<textarea class="form-control" data-field="about" rows="<%= partnerFields.about?.rows || 5 %>" maxlength="<%= partnerFields.about?.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>
<label class="form-label fw-semibold"><%= partnerFields.benefits?.label || "Benefits" %></label>
<textarea class="form-control" data-field="benefits" rows="<%= partnerFields.benefits?.rows || 4 %>" maxlength="<%= partnerFields.benefits?.maxLength || 240 %>"></textarea>
</div>
</div>
</div>
@@ -115,43 +120,44 @@
<div class="card-body">
<div class="row g-3">
<div class="col-md-4">
<label class="form-label fw-semibold">Field label</label>
<input class="form-control" data-field="label" maxlength="40">
<label class="form-label fw-semibold"><%= inquiryFieldFields.label?.label || "Field label" %></label>
<input class="form-control" data-field="label" maxlength="<%= inquiryFieldFields.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">
<label class="form-label fw-semibold"><%= inquiryFieldFields.placeholder?.label || "Placeholder text" %></label>
<input class="form-control" data-field="placeholder" maxlength="<%= inquiryFieldFields.placeholder?.maxLength || 80 %>">
</div>
<div class="col-md-4">
<label class="form-label fw-semibold">Field type</label>
<label class="form-label fw-semibold"><%= inquiryFieldFields.type?.label || "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>
<% (inquiryFieldFields.type?.options || []).forEach((option) => { %>
<option value="<%= option.value %>"><%= option.label %></option>
<% }) %>
</select>
</div>
<div class="col-md-4">
<label class="form-label fw-semibold">Field width</label>
<label class="form-label fw-semibold"><%= inquiryFieldFields.width?.label || "Field width" %></label>
<select class="form-select" data-field="width">
<option value="half">Half width</option>
<option value="full">Full width</option>
<% (inquiryFieldFields.width?.options || []).forEach((option) => { %>
<option value="<%= option.value %>"><%= option.label %></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>
<label class="form-check-label fw-semibold"><%= inquiryFieldFields.required?.label || "Required field" %></label>
</div>
</div>
<div class="col-12" data-options-wrap>
<div class="cms-editor-group">
<div class="mb-2">
<label class="form-label fw-semibold mb-0">Dropdown options</label>
<label class="form-label fw-semibold mb-0"><%= inquiryFieldFields.options?.label || "Dropdown options" %></label>
</div>
<div class="form-text mb-2">Only used when the field type is Dropdown.</div>
<div class="form-text mb-2"><%= inquiryFieldFields.options?.helpText || "" %></div>
<div data-options-list></div>
<button type="button" class="cms-add-button mt-3" data-add-option>
<i class="fas fa-plus me-2"></i>Add Option
<i class="fas fa-plus me-2"></i><%= inquiryFieldFields.options?.addLabel || "Add Option" %>
</button>
</div>
</div>
@@ -165,7 +171,7 @@
<button type="button" class="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">
<input class="form-control" data-option-value maxlength="<%= inquiryFieldFields.options?.itemSchema?.maxLength || 50 %>" placeholder="<%= inquiryFieldFields.options?.itemSchema?.placeholder || 'Option label' %>">
<button type="button" class="cms-remove-button" data-remove-item title="Remove option">
<i class="fas fa-trash-alt"></i>
</button>