Implement show and hide logic within workflow form

This commit is contained in:
2024-07-11 15:15:41 +02:00
parent 8d543be5cc
commit 52a3d1be1b
3 changed files with 126 additions and 9 deletions

View File

@@ -4,8 +4,86 @@ window.addEventListener('DOMContentLoaded', function() {
let
divTransitions = document.querySelector('#transitions'),
futureDestUsersContainer = document.querySelector('#futureDests')
personSignatureField = document.querySelector('#person-signature-field');
userSignatureField = document.querySelector('#user-signature-field');
signatureTypeChoices = document.querySelector('#signature-type-choice');
;
console.log('signature type', signatureTypeChoices);
let
transitionFilterContainer = document.querySelector('#transitionFilter'),
transitionsContainer = document.querySelector('#transitions')
;
personSignatureField.style.display = 'none';
userSignatureField.style.display = 'none';
futureDestUsersContainer.style.display = 'none';
signatureTypeChoices.style.display = 'none';
// ShowHide instance for signatureTypeChoices and futureDestUsersContainer
new ShowHide({
load_event: null,
froms: [transitionsContainer],
container: [signatureTypeChoices, futureDestUsersContainer],
test: function() {
const selectedTransition = document.querySelector('input[name="workflow_step[transition]"]:checked');
console.log('transition', selectedTransition)
if (!selectedTransition) {
return false; // No transition selected, hide all
}
const isSignature = JSON.parse(selectedTransition.getAttribute('data-is-signature') || '[]');
if (isSignature.includes('person') && isSignature.includes('user')) {
signatureTypeChoices.style.display = '';
} else {
signatureTypeChoices.style.display = 'none';
}
if (!isSignature.length) {
futureDestUsersContainer.style.display = '';
personSignatureField.style.display = 'none';
userSignatureField.style.display = 'none';
} else {
futureDestUsersContainer.style.display = 'none';
}
return true; // Always return true to ensure ShowHide manages visibility
}
});
// Event listener for changes in signature type selection
signatureTypeChoices.addEventListener('change', function() {
// ShowHide instance for personSignatureField and userSignatureField
new ShowHide({
load_event: null,
froms: [signatureTypeChoices],
container: [personSignatureField, userSignatureField],
test: function() {
console.log(signatureTypeChoices)
const selectedSignatureType = document.querySelector('input[name="workflow_step[isPersonOrUserSignature]"]:checked');
console.log('signataure type', selectedSignatureType)
if (!selectedSignatureType) {
return false; // No signature type selected, hide both fields
}
if (selectedSignatureType.value === 'person') {
personSignatureField.style.display = '';
userSignatureField.style.display = 'none';
} else if (selectedSignatureType.value === 'user') {
personSignatureField.style.display = 'none';
userSignatureField.style.display = '';
} else {
personSignatureField.style.display = 'none';
userSignatureField.style.display = 'none';
}
return true; // Always return true to ensure ShowHide manages visibility
}
});
});
if (null !== divTransitions) {
new ShowHide({
load_event: null,
@@ -29,13 +107,8 @@ window.addEventListener('DOMContentLoaded', function() {
});
}
let
transitionFilterContainer = document.querySelector('#transitionFilter'),
transitions = document.querySelector('#transitions')
;
if (null !== transitionFilterContainer) {
transitions.querySelectorAll('.form-check').forEach(function(row) {
transitionsContainer.querySelectorAll('.form-check').forEach(function(row) {
const isForward = row.querySelector('input').dataset.isForward;
@@ -66,5 +139,4 @@ window.addEventListener('DOMContentLoaded', function() {
});
});
}
});