forked from UKSOURCE/cms.lams
Tống Thành Đạt
5d0fae6d51
Improve the CMS administration interface across multiple pages (Accreditation, Admissions, History, Partnerships, and Policies) with a focus on usability and data integrity. Key changes include: - Implement `ensureUniqueIds` utility to automatically generate and maintain unique slugs for content items, removing the need for manual ID entry in the UI. - Refactor the Admissions calculator to support detailed per-option editing via a new dedicated view and routes. - Replace basic datalists with a custom, searchable icon combobox component for better visual selection. - Update `_renderSingletonPageView` to handle active tab persistence via query parameters. - Streamline editor configurations by removing redundant fields and improving help text. - Enhance the Admissions "Key Dates" editor with a dynamic table interface for managing columns and rows. - Normalize data payloads in controllers to ensure consistent API responses and internal linking.
174 lines
7.4 KiB
Plaintext
174 lines
7.4 KiB
Plaintext
<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">Tab label</label>
|
|
<input class="form-control" data-field="label" maxlength="30" 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">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 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">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="cms-editor-group">
|
|
<div class="mb-2">
|
|
<label class="form-label fw-semibold mb-0">Dropdown options</label>
|
|
</div>
|
|
<div class="form-text mb-2">Only used when the field type is Dropdown.</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
|
|
</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="50" 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>
|