gitea_admin/Styleguide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Show duplicate list name validation

Browse Source
This commit is contained in:
Mathias Gläser
2026-06-16 08:39:41 +02:00
parent d35afc0228
commit 6a3c29b5c3
1 changed files with 45 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/delete-confirmation-overlay.html
+45 -7
View File
@@ -157,13 +157,17 @@
<div class="sg-form-sections-card__field-group">
<label class="sg-labeled-input-row">
<span class="sg-label">Name</span>
<input
class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
type="text"
placeholder="Name eingeben"
aria-label="Name"
maxlength="80"
>
<span class="sg-input-validation-stack">
<input
class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
type="text"
placeholder="Name eingeben"
aria-label="Name"
maxlength="80"
aria-describedby="create-list-name-error"
>
<span class="sg-form-validation-text" id="create-list-name-error" data-create-list-name-error hidden>Eine Liste mit diesem Namen existiert bereits.</span>
</span>
</label>
<label class="sg-labeled-input-row">
@@ -206,6 +210,7 @@
const createListTitle = stage.querySelector('[data-create-list-title]');
const createListSegment = stage.querySelector('[data-create-list-form]');
const createListNameInput = stage.querySelector('[data-create-list-form] input[aria-label="Name"]');
const createListNameError = stage.querySelector('[data-create-list-name-error]');
const createListDescriptionInput = stage.querySelector('[data-create-list-form] textarea[aria-label="Beschreibung"]');
const isAddToListOverlay = stage.dataset.pattern === 'add-to-list-overlay';
const committedListIds = new Set(
@@ -289,6 +294,20 @@
return listId;
};
const setCreateListNameErrorState = (isInvalid) => {
if (!createListNameInput || !createListNameError) {
return;
}
createListNameInput.setAttribute('aria-invalid', String(isInvalid));
createListNameError.hidden = !isInvalid;
if (!isInvalid) {
createListNameInput.removeAttribute('aria-describedby');
} else {
createListNameInput.setAttribute('aria-describedby', 'create-list-name-error');
}
};
if (confirmationInput && confirmationSubmitButton) {
const updateConfirmationState = () => {
const isValid = confirmationInput.value === expectedConfirmationValue;
@@ -310,6 +329,7 @@
resetAddToListDraftState = () => {
draftListIds = new Set(committedListIds);
syncOverlayListState();
setCreateListNameErrorState(false);
if (createListSegment) {
createListSegment.hidden = true;
@@ -331,6 +351,7 @@
createListFormToggle.addEventListener('click', (event) => {
event.preventDefault();
setCreateListNameErrorState(false);
if (createListSegment) {
createListSegment.hidden = false;
}
@@ -393,6 +414,23 @@
event.preventDefault();
if (isAddToListOverlay) {
const createdListTitle = createListNameInput?.value.trim() ?? '';
const existingListNames = new Set(
Array.from(stage.querySelectorAll('.sg-delete-confirmation-pattern__list-label'))
.map((label) => label.textContent?.trim().toLowerCase())
.filter(Boolean)
);
if (!createdListTitle) {
setCreateListNameErrorState(true);
return;
}
if (existingListNames.has(createdListTitle.toLowerCase())) {
setCreateListNameErrorState(true);
return;
}
setCreateListNameErrorState(false);
if (createdListTitle) {
const createdListId = appendCreatedListButton(createdListTitle);
if (createdListId) {