Skip to content

Required field indicators - Usability Implementation Plan #247

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
apodacaduron wants to merge 30 commits into
base: main
Choose a base branch
from
Open

Required field indicators - Usability Implementation Plan #247

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
0ae45a4
add asterisk to bulletin dialog required fields
apodacaduron Jan 27, 2026
5d1524f
allow passing a slot to date and search components
apodacaduron Jan 27, 2026
8474a77
refactor events section to add dynamic asterisks and red outlines dyn…
apodacaduron Jan 27, 2026
6db3e50
import asterisk on actors and incidents
apodacaduron Jan 27, 2026
ec1bb84
add asterisk to actor and incident form
apodacaduron Jan 27, 2026
a149cee
add asterisk to locations form
apodacaduron Jan 27, 2026
7ac5071
add asterisks and required field to sources page
apodacaduron Jan 27, 2026
e6e78dd
add asterisk and form with required fields to labels
apodacaduron Jan 27, 2026
2887926
add asterisk and form with required fields to eventtypes
apodacaduron Jan 27, 2026
2aa6979
refactor editable table to support form and dynamic required fields w…
apodacaduron Jan 27, 2026
ccb2a4e
pass required fields to component data page and fix infinite loop on …
apodacaduron Jan 27, 2026
4b93a8c
make group name required using form and add asterisk to label
apodacaduron Jan 28, 2026
4e4f738
make group color required, replace input for color input and add hex …
apodacaduron Jan 28, 2026
96cd560
rename keys from title to name
apodacaduron Jan 28, 2026
d567f55
add asterisks to required fields in shortactordialog
apodacaduron Jan 28, 2026
6e1f044
add asterisk to change password form
apodacaduron Jan 28, 2026
9af15ee
add asterisk to import csv dialog and required validation
apodacaduron Jan 29, 2026
ffcf4e3
add asterisk to import csv dialog and required validation souces page
apodacaduron Jan 29, 2026
e16c0aa
unify import csv dialogs and add asterisk and form validation
apodacaduron Jan 29, 2026
801d783
add import csv dialog to roles page
apodacaduron Jan 29, 2026
9e4044a
replace span in geomap for shared Asterisk component and import it in…
apodacaduron Jan 29, 2026
d7403b2
add semantic text to asterisk
apodacaduron Jan 29, 2026
cab8865
add translation to hex validator
apodacaduron Jan 29, 2026
0f26a80
scroll to first error of closest dialog first
apodacaduron Jan 29, 2026
8f3d88c
Merge branch 'main' of https://github.com/sjacorg/bayanat into requir…
apodacaduron Feb 6, 2026
9d00948
Merge branch 'main' of https://github.com/sjacorg/bayanat into requir…
apodacaduron Mar 11, 2026
5bd81f7
remove extra }
apodacaduron Mar 11, 2026
dc165bc
add missing form
apodacaduron Mar 11, 2026
0a9f78c
Merge branch 'main' into required-field-indicators
apodacaduron Mar 16, 2026
8061270
Merge branch 'main' into required-field-indicators
apodacaduron Mar 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions enferno/admin/templates/admin/activity.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,6 +154,7 @@
<script src="/static/js/mixins/media-mixin.js"></script>
<script src="/static/js/mixins/form-builder-mixin.js"></script>

<script src="/static/js/components/Asterisk.js"></script>
<script src="/static/js/components/GeoMap.js"></script>
<script src="/static/js/components/GlobalMap.js"></script>
<script src="/static/js/components/EntityFlowMap.js"></script>
Expand Down Expand Up @@ -404,6 +405,7 @@
app.component('UniField', UniField);
app.component('DualField', DualField);

app.component('Asterisk', Asterisk);
app.component('GeoMap', GeoMap);
app.component('GeoLocations', GeoLocations);
app.component('GlobalMap', GlobalMap);
Expand Down
2 changes: 2 additions & 0 deletions enferno/admin/templates/admin/actors.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -407,6 +407,7 @@
<script src="/static/js/components/DocxViewer.js"></script>
<script src="/static/js/components/SnapshotDialog.js"></script>
<script src="/static/js/components/Visualization.js"></script>
<script src="/static/js/components/Asterisk.js"></script>
<script src="/static/js/force-graph.min.js"></script>

<script src="/static/js/components/MapVisualization.js"></script>
Expand Down Expand Up @@ -1812,6 +1813,7 @@
app.component('EventsSection', EventsSection);
app.component('ReadMore', ReadMore);
app.component('FieldRenderer', FieldRenderer);
app.component('Asterisk', Asterisk);
app.component('OcrTextLayer', OcrTextLayer);
app.component('MediaTranscriptionDialog', MediaTranscriptionDialog);

Expand Down
2 changes: 2 additions & 0 deletions enferno/admin/templates/admin/bulletins.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -440,6 +440,7 @@
<script src="/static/js/components/EventsSection.js"></script>
<script src="/static/js/components/ReadMore.js"></script>
<script src="/static/js/components/FieldRenderer.js"></script>
<script src="/static/js/components/Asterisk.js"></script>
<script src="/static/js/components/OcrTextLayer.js"></script>
<script src="/static/js/components/MediaTranscriptionDialog.js"></script>

Expand Down Expand Up @@ -1812,6 +1813,7 @@
app.component('IdNumberDynamicField', IdNumberDynamicField);
app.component('EventsSection', EventsSection);
app.component('FieldRenderer', FieldRenderer);
app.component('Asterisk', Asterisk);
app.component('OcrTextLayer', OcrTextLayer);
app.component('MediaTranscriptionDialog', MediaTranscriptionDialog);

Expand Down
108 changes: 61 additions & 47 deletions enferno/admin/templates/admin/component-data.html
View file
Open in desktop

Large diffs are not rendered by default.

236 changes: 94 additions & 142 deletions enferno/admin/templates/admin/eventtypes.html
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions enferno/admin/templates/admin/incidents.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -359,6 +359,7 @@
<script src="/static/js/components/RelationEditorCard.js"></script>
<script src="/static/js/components/EventsSection.js"></script>
<script src="/static/js/components/FieldRenderer.js"></script>
<script src="/static/js/components/Asterisk.js"></script>

<script src="/static/js/components/PdfViewer.js"></script>
<script src="/static/js/components/DocxViewer.js"></script>
Expand Down Expand Up @@ -1569,6 +1570,7 @@
app.component('RelationEditorCard', RelationEditorCard);
app.component('EventsSection', EventsSection);
app.component('FieldRenderer', FieldRenderer);
app.component('Asterisk', Asterisk);

app.use(router).use(vuetify);
router.isReady().then(() => {
Expand Down
7 changes: 6 additions & 1 deletion enferno/admin/templates/admin/jsapi.jinja2
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,7 @@ markFieldAsRequired_: "{{ _('Make the field required') }}",
markFieldAsSearchable_: "{{ _('Make the field searchable') }}",
showField_: "{{ _('Show Field') }}",
hideField_: "{{ _('Hide Field') }}",
requiredFields_: "{{ _('Required fields') }}",
showOption_: "{{ _('Show Option') }}",
hideOption_: "{{ _('Hide Option') }}",
deleteField_: "{{ _('Delete Field') }}",
Expand Down Expand Up @@ -169,6 +170,7 @@ allUnsavedEditsHaveBeenDiscarded_: "{{ _('All unsaved edits in the form have bee
reviewAndConfirmChanges_: "{{ _('Review & Confirm Changes') }}",
youreAboutToDeleteAField_: "{{ _('You\'re about to delete a field') }}",
fieldsSavedSuccessfully_: "{{ _('Fields saved successfully') }}",
invalidHexColorFormat_: "{{ _('Invalid hex color format (e.g., #F53, #FF5733, or #FF5733FF)') }}",
cityListWithMore_: (names, num) => "{{ _('{names} and {num} more') }}".replace('{names}', names).replace('{num}', num),
viewEditTranscription_: "{{ _('View/Edit Transcription') }}",
transcribe_: "{{ _('Transcribe') }}",
Expand All @@ -181,6 +183,8 @@ locationOrDateRequired_: "{{ _('Location or Date is required') }}",
titleOrTypeRequired_: "{{ _('Title or Event Type is required') }}",
preview_ : "{{ _('Preview') }}",
pleaseReviewFormForErrors_ : "{{ _('Please review the form for errors.') }}",
importCsv_ : "{{ _('Import CSV') }}",
selectCsvFile_ : "{{ _('Select CSV file') }}",
accessGroupsRequired_ : "{{ _('Access Group(s) are required unless unrestricted.') }}",
saveActor_: "{{ _('Save Actor') }}",
title_: "{{ _('Title') }}",
Expand All @@ -207,9 +211,10 @@ to_: "{{ _('To') }}",
comments_: "{{ _('Comments') }}",
commentsAr_: "{{ _('Comments (Ar)') }}",
status_: "{{ _('Status') }}",
restrictToAccessGroups_: "{{ _('Restrict Actor to Access Group(s)') }}",
restrictActorToAccessGroups_: "{{ _('Restrict Actor to Access Group(s)') }}",
noAccessAccessGroups_: "{{ _('No Access Access Groups') }}",
profile_: "{{ _('Profile') }}",
location_: "{{ _('Location') }}",
noItemsAvailable_: "{{ _('No items available') }}",
noMoreItemsToLoad_: "{{ _('No more items to load') }}",

Expand Down
195 changes: 105 additions & 90 deletions enferno/admin/templates/admin/labels.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,82 +121,84 @@

<!-- Create/Edit dialog -->
<v-dialog v-model="dialog" max-width="790px">
<v-card :title="formTitle">
<v-card-text class="pt-6">
<v-row>
<v-col cols="12" md="6">
<v-text-field v-model="editedItem.title">
<template v-slot:label>{{ _('Title') }} <span class="text-error">*</span></template>
<template v-if="editedItem.parent" v-slot:append-inner>
<v-tooltip location="bottom">
<template v-slot:activator="{ props }">
<v-btn
icon="mdi-subdirectory-arrow-right"
density="comfortable"
variant="text"
@click="prependParentName"
v-bind="props"
></v-btn>
</template>
{{ _('Add parent name to title') }}
</v-tooltip>
</template>
</v-text-field>
</v-col>
<v-col cols="12" md="6">
<v-text-field v-model="editedItem.title_ar" label="{{ _('Title (AR)') }}"></v-text-field>
</v-col>
</v-row>
<v-row>
<v-col cols="12" md="6">
<v-text-field v-model="editedItem.comments" label="{{ _('Comments') }}"></v-text-field>
</v-col>
<v-col cols="12" md="6">
<v-text-field v-model="editedItem.comments_ar" label="{{ _('Comments (AR)') }}"></v-text-field>
</v-col>
</v-row>
<v-row>
<v-col cols="12" md="6">
<search-field
api="/admin/api/labels/"
item-title="title"
item-subtitle="path"
label="{{ _('Parent') }}"
v-model="editedItem.parent"
:filter-items="filterCircularParents"
item-value="id"
:multiple="false"
:query-params="parentQueryParams"
></search-field>
</v-col>
</v-row>
<div class="mb-3">{{ _('Available In') }}</div>
<v-row>
<v-col
v-for="opt in availabilityOptions"
:key="opt.key"
cols="12"
md="2"
>
<v-btn
@click="editedItem[opt.key] = !editedItem[opt.key]"
:prepend-icon="editedItem[opt.key] ? 'mdi-check' : undefined"
:variant="editedItem[opt.key] ? 'flat' : 'outlined'"
:color="editedItem[opt.key] ? 'primary' : undefined"
:class="['w-100', editedItem[opt.key] ? '' : 'border-thin opacity-50']"
<v-form ref="form" @submit.prevent="save">
<v-card :title="formTitle">
<v-card-text class="pt-6">
<v-row>
<v-col cols="12" md="6">
<v-text-field v-model="editedItem.title" :rules="[validationRules.required()]">
<template v-slot:label>{{ _('Title') }} <Asterisk /></template>
<template v-if="editedItem.parent" v-slot:append-inner>
<v-tooltip location="bottom">
<template v-slot:activator="{ props }">
<v-btn
icon="mdi-subdirectory-arrow-right"
density="comfortable"
variant="text"
@click="prependParentName"
v-bind="props"
></v-btn>
</template>
{{ _('Add parent name to title') }}
</v-tooltip>
</template>
</v-text-field>
</v-col>
<v-col cols="12" md="6">
<v-text-field v-model="editedItem.title_ar" label="{{ _('Title (AR)') }}"></v-text-field>
</v-col>
</v-row>
<v-row>
<v-col cols="12" md="6">
<v-text-field v-model="editedItem.comments" label="{{ _('Comments') }}"></v-text-field>
</v-col>
<v-col cols="12" md="6">
<v-text-field v-model="editedItem.comments_ar" label="{{ _('Comments (AR)') }}"></v-text-field>
</v-col>
</v-row>
<v-row>
<v-col cols="12" md="6">
<search-field
api="/admin/api/labels/"
item-title="title"
item-subtitle="path"
label="{{ _('Parent') }}"
v-model="editedItem.parent"
:filter-items="filterCircularParents"
item-value="id"
:multiple="false"
:query-params="parentQueryParams"
></search-field>
</v-col>
</v-row>
<div class="mb-3">{{ _('Available In') }}</div>
<v-row>
<v-col
v-for="opt in availabilityOptions"
:key="opt.key"
cols="12"
md="2"
>
${opt.label}
</v-btn>
</v-col>
</v-row>

</v-card-text>
<v-card-actions class="mt-4 px-6 pb-5">
<v-spacer></v-spacer>
<v-btn @click="close">{{ _('Cancel') }}</v-btn>
<v-btn color="primary" variant="elevated" @click="save">{{ _('Save') }}</v-btn>
</v-card-actions>
</v-card>
<v-btn
@click="editedItem[opt.key] = !editedItem[opt.key]"
:prepend-icon="editedItem[opt.key] ? 'mdi-check' : undefined"
:variant="editedItem[opt.key] ? 'flat' : 'outlined'"
:color="editedItem[opt.key] ? 'primary' : undefined"
:class="['w-100', editedItem[opt.key] ? '' : 'border-thin opacity-50']"
>
${opt.label}
</v-btn>
</v-col>
</v-row>

</v-card-text>
<v-card-actions class="mt-4 px-6 pb-5">
<v-spacer></v-spacer>
<v-btn @click="close">{{ _('Cancel') }}</v-btn>
<v-btn color="primary" variant="elevated" @click="save">{{ _('Save') }}</v-btn>
</v-card-actions>
</v-card>
</v-form>
</v-dialog>

<!-- Import CSV dialog -->
Expand All @@ -217,6 +219,8 @@

{% endblock %} {% block js %}
<script src="/static/js/components/SearchField.js"></script>
<script src="/static/js/components/Asterisk.js"></script>
<script src="/static/js/components/ImportCsvDialog.js"></script>
<script nonce="{{ csp_nonce() }}">

const {createApp} = Vue;
Expand All @@ -230,6 +234,7 @@
tab: 'labels',
viewMode: 'table',
dialog: dialog,
validationRules: validationRules,
imDialog: false,
drawer: drawer,
loading: true,
Expand Down Expand Up @@ -410,24 +415,34 @@
},

save() {
if (this.isEditing && this.editedItem.id) {
api.put(`/admin/api/label/${this.editedItem.id}`, {item: this.editedItem}).then(response => {
this.showSnack(response.data);
if (this.viewMode === 'table') this.refresh();
else this.loadTree();
});
} else {
api.post("/admin/api/label/", {item: this.editedItem}).then(response => {
this.showSnack(response.data);
if (this.viewMode === 'table') this.refresh();
else this.loadTree();
});
}
this.close();
this.$refs.form.validate().then(({ valid }) => {
if (!valid) {
this.showSnack("{{ _('Please review form for errors.') }}");
return;
}

if (this.isEditing && this.editedItem.id) {
api.put(`/admin/api/label/${this.editedItem.id}`, {item: this.editedItem}).then(response => {
this.showSnack(response.data);
if (this.viewMode === 'table') this.refresh();
else this.loadTree();
this.close();
});
} else {
api.post("/admin/api/label/", {item: this.editedItem}).then(response => {
this.showSnack(response.data);
if (this.viewMode === 'table') this.refresh();
else this.loadTree();
this.close();
});
}
});
},
}
});
app.component('SearchField', SearchField);
app.component('Asterisk', Asterisk);
app.component('ImportCsvDialog', ImportCsvDialog);
app.use(vuetify).mount('#app');
</script>
{% endblock %}
{% endblock %}
Loading
Loading