fa/breadcrumb-the-shire
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(helpdesk): polish handover schema editor UI/UX

Browse Source 
Auto-generate field keys and option values from labels via slugify,
add live preview panel with hover-highlight, insert-between-fields
dividers, and various spacing/styling improvements.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Felix Schneider
2026-04-15 18:08:12 +02:00
parent 44153f513f
commit 2ec632ac8b
7 changed files with 494 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
modules/helpdesk/pages/helpdesk/software-products/_form.phtml
View File

@@ -27,42 +27,47 @@ $handoverSchemaFields = is_array($handoverSchemaFields ?? null) ? $handoverSchem
</div>
<div data-tab-panel="handover-protocol">
<fieldset>
<legend><?php e(t('Handover protocol schema')); ?></legend>
<p class="app-field-hint"><?php e(t('Define the fields that make up the handover protocol for this product.')); ?></p>
<div
id="handover-schema-editor"
data-initial-fields="<?php e(json_encode($handoverSchemaFields, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE)); ?>"
data-translations="<?php e(json_encode([
'add_field' => t('Add field'),
'remove_field' => t('Remove field'),
'move_up' => t('Move up'),
'move_down' => t('Move down'),
'field_key' => t('Field key'),
'field_label' => t('Field label'),
'field_type' => t('Field type'),
'required' => t('Required'),
'options' => t('Options'),
'add_option' => t('Add option'),
'remove_option' => t('Remove option'),
'option_value' => t('Option value'),
'option_label' => t('Option label'),
'no_fields' => t('No fields defined yet. Click "Add field" to get started.'),
'type_heading' => t('Heading'),
'type_paragraph' => t('Paragraph'),
'type_text' => t('Text'),
'type_textarea' => t('Textarea'),
'type_number' => t('Number'),
'type_date' => t('Date'),
'type_checkbox' => t('Checkbox'),
'type_select' => t('Select'),
'text_content' => t('Text content'),
], JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE)); ?>"
></div>
<input type="hidden" name="handover_schema_json" id="handover-schema-json" value="">
</fieldset>
<div class="handover-schema-split">
<div class="handover-schema-split-editor">
<div
id="handover-schema-editor"
data-initial-fields="<?php e(json_encode($handoverSchemaFields, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE)); ?>"
data-translations="<?php e(json_encode([
'add_field' => t('Add field'),
'remove_field' => t('Remove field'),
'move_up' => t('Move up'),
'move_down' => t('Move down'),
'field_key' => t('Field key'),
'field_label' => t('Field label'),
'field_type' => t('Field type'),
'required' => t('Required'),
'options' => t('Options'),
'add_option' => t('Add option'),
'remove_option' => t('Remove option'),
'option_value' => t('Option value'),
'option_label' => t('Option label'),
'no_fields' => t('No fields defined yet. Click "Add field" to get started.'),
'type_heading' => t('Heading'),
'type_paragraph' => t('Paragraph'),
'type_text' => t('Text'),
'type_textarea' => t('Textarea'),
'type_number' => t('Number'),
'type_date' => t('Date'),
'type_checkbox' => t('Checkbox'),
'type_select' => t('Select'),
'text_content' => t('Text content'),
'field' => t('Field'),
'preview' => t('Preview'),
'preview_empty' => t('Add fields to see a live preview.'),
], JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE)); ?>"
></div>
<input type="hidden" name="handover_schema_json" id="handover-schema-json" value="">
</div>
<div class="handover-schema-split-preview">
<div class="handover-schema-preview-header"><?php e(t('Preview')); ?></div>
<div id="handover-schema-preview" class="handover-schema-preview"></div>
</div>
</div>
</div>
</div>