forked from UKSOURCE/cms.lams
Tống Thành Đạt
a39c336dd4
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.
180 lines
9.1 KiB
Plaintext
180 lines
9.1 KiB
Plaintext
<% 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">
|
|
<div class="d-flex align-items-center gap-2">
|
|
<button type="button" class="drag-handle" title="Drag to reorder">
|
|
<i class="fas fa-grip-vertical"></i>
|
|
</button>
|
|
<div class="fw-semibold">Category Tab</div>
|
|
</div>
|
|
<div class="d-flex align-items-center gap-2">
|
|
<button type="button" class="cms-collapse-toggle" data-toggle-item title="Collapse item">
|
|
<i class="fas fa-chevron-down"></i>
|
|
</button>
|
|
<button type="button" class="cms-remove-button" data-remove-item title="Remove item">
|
|
<i class="fas fa-trash-alt"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<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>
|
|
|
|
<template id="partnerTemplate">
|
|
<div class="card cms-item-card mb-3" data-item="partner">
|
|
<div class="card-header 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="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>
|
|
<div class="d-flex align-items-center gap-2">
|
|
<button type="button" class="cms-collapse-toggle" data-toggle-item title="Collapse item">
|
|
<i class="fas fa-chevron-down"></i>
|
|
</button>
|
|
<button type="button" class="cms-remove-button" data-remove-item title="Remove item">
|
|
<i class="fas fa-trash-alt"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row g-3">
|
|
<div class="col-md-4">
|
|
<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"><%= 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"><%= 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"><%= 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"><%= [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"><%= 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"><%= 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"><%= 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"><%= 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>
|
|
</div>
|
|
</template>
|
|
|
|
<template id="inquiryFieldTemplate">
|
|
<div class="card cms-item-card mb-3" data-item="inquiry-field">
|
|
<div class="card-header 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="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>
|
|
<div class="d-flex align-items-center gap-2">
|
|
<button type="button" class="cms-collapse-toggle" data-toggle-item title="Collapse item">
|
|
<i class="fas fa-chevron-down"></i>
|
|
</button>
|
|
<button type="button" class="cms-remove-button" data-remove-item title="Remove item">
|
|
<i class="fas fa-trash-alt"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row g-3">
|
|
<div class="col-md-4">
|
|
<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"><%= 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"><%= inquiryFieldFields.type?.label || "Field type" %></label>
|
|
<select class="form-select" data-field="type">
|
|
<% (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"><%= inquiryFieldFields.width?.label || "Field width" %></label>
|
|
<select class="form-select" data-field="width">
|
|
<% (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"><%= 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"><%= inquiryFieldFields.options?.label || "Dropdown options" %></label>
|
|
</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><%= inquiryFieldFields.options?.addLabel || "Add Option" %>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template id="inquiryOptionTemplate">
|
|
<div class="input-group mb-2" data-item="inquiry-option">
|
|
<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="<%= 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>
|
|
</div>
|
|
</template>
|