From c7466ce44906b6130ae5f46e3969afdf573059ed Mon Sep 17 00:00:00 2001 From: mabashian Date: Tue, 7 Aug 2018 14:27:04 -0400 Subject: [PATCH] Wraps label count validation in function --- .../job-template-add.controller.js | 77 +++++++++--------- .../job-template-edit.controller.js | 78 ++++++++++--------- .../add-workflow/workflow-add.controller.js | 72 +++++++++-------- .../edit-workflow/workflow-edit.controller.js | 72 +++++++++-------- 4 files changed, 158 insertions(+), 141 deletions(-) diff --git a/awx/ui/client/src/templates/job_templates/add-job-template/job-template-add.controller.js b/awx/ui/client/src/templates/job_templates/add-job-template/job-template-add.controller.js index e933bc5cda..f343a10ac0 100644 --- a/awx/ui/client/src/templates/job_templates/add-job-template/job-template-add.controller.js +++ b/awx/ui/client/src/templates/job_templates/add-job-template/job-template-add.controller.js @@ -496,45 +496,50 @@ $state.transitionTo('templates'); }; - /** - * This block of code specifically handles the client-side validation of the `labels` field. - * Due to it's detached nature in relation to the other job template fields, we must - * validate this field client-side in order to avoid the edge case where a user can make a - * successful POST to the `job_templates` endpoint but however encounter a 200 error from - * the `labels` endpoint due to a character limit. - * - * We leverage two of select2's available events, `select` and `unselect`, to detect when the user - * has either added or removed a label. From there, we set a flag and do simple string length - * checks to make sure a label's chacacter count remains under 512. Otherwise, we disable the "Save" button - * by invalidating the field and inform the user of the error. - */ + let handleLabelCount = () => { + /** + * This block of code specifically handles the client-side validation of the `labels` field. + * Due to it's detached nature in relation to the other job template fields, we must + * validate this field client-side in order to avoid the edge case where a user can make a + * successful POST to the `job_templates` endpoint but however encounter a 200 error from + * the `labels` endpoint due to a character limit. + * + * We leverage two of select2's available events, `select` and `unselect`, to detect when the user + * has either added or removed a label. From there, we set a flag and do simple string length + * checks to make sure a label's chacacter count remains under 512. Otherwise, we disable the "Save" button + * by invalidating the field and inform the user of the error. + */ - $scope.job_template_labels_isValid = true; - const maxCount = 512; - const jt_label_id = 'job_template_labels'; - // Detect when a new label is added - $(`#${jt_label_id}`).on('select2:select', (e) => { - const { text } = e.params.data; - - // If the character count of an added label is greater than 512, we set `labels` field as invalid - if (text.length > maxCount) { - $scope.job_template_form.labels.$setValidity(`${jt_label_id}`, false); - $scope.job_template_labels_isValid = false; - } - }); - - // Detect when a label is removed - $(`#${jt_label_id}`).on('select2:unselect', (e) => { + $scope.job_template_labels_isValid = true; const maxCount = 512; - const { text } = e.params.data; + const jt_label_id = 'job_template_labels'; - /* If the character count of a removed label is greater than 512 AND the field is currently marked - as invalid, we set it back to valid */ - if (text.length > maxCount && $scope.job_template_form.labels.$error) { - $scope.job_template_form.labels.$setValidity(`${jt_label_id}`, true); - $scope.job_template_labels_isValid = true; - } - }); + // Detect when a new label is added + $(`#${jt_label_id}`).on('select2:select', (e) => { + const { text } = e.params.data; + + // If the character count of an added label is greater than 512, we set `labels` field as invalid + if (text.length > maxCount) { + $scope.job_template_form.labels.$setValidity(`${jt_label_id}`, false); + $scope.job_template_labels_isValid = false; + } + }); + + // Detect when a label is removed + $(`#${jt_label_id}`).on('select2:unselect', (e) => { + const maxCount = 512; + const { text } = e.params.data; + + /* If the character count of a removed label is greater than 512 AND the field is currently marked + as invalid, we set it back to valid */ + if (text.length > maxCount && $scope.job_template_form.labels.$error) { + $scope.job_template_form.labels.$setValidity(`${jt_label_id}`, true); + $scope.job_template_labels_isValid = true; + } + }); + }; + + handleLabelCount(); } ]; diff --git a/awx/ui/client/src/templates/job_templates/edit-job-template/job-template-edit.controller.js b/awx/ui/client/src/templates/job_templates/edit-job-template/job-template-edit.controller.js index b9925ad814..c300ee2c73 100644 --- a/awx/ui/client/src/templates/job_templates/edit-job-template/job-template-edit.controller.js +++ b/awx/ui/client/src/templates/job_templates/edit-job-template/job-template-edit.controller.js @@ -705,45 +705,49 @@ export default $state.go('templates'); }; - /** - * This block of code specifically handles the client-side validation of the `labels` field. - * Due to it's detached nature in relation to the other job template fields, we must - * validate this field client-side in order to avoid the edge case where a user can make a - * successful POST to the `job_templates` endpoint but however encounter a 200 error from - * the `labels` endpoint due to a character limit. - * - * We leverage two of select2's available events, `select` and `unselect`, to detect when the user - * has either added or removed a label. From there, we set a flag and do simple string length - * checks to make sure a label's chacacter count remains under 512. Otherwise, we disable the "Save" button - * by invalidating the field and inform the user of the error. - */ + let handleLabelCount = () => { + /** + * This block of code specifically handles the client-side validation of the `labels` field. + * Due to it's detached nature in relation to the other job template fields, we must + * validate this field client-side in order to avoid the edge case where a user can make a + * successful POST to the `job_templates` endpoint but however encounter a 200 error from + * the `labels` endpoint due to a character limit. + * + * We leverage two of select2's available events, `select` and `unselect`, to detect when the user + * has either added or removed a label. From there, we set a flag and do simple string length + * checks to make sure a label's chacacter count remains under 512. Otherwise, we disable the "Save" button + * by invalidating the field and inform the user of the error. + */ - $scope.job_template_labels_isValid = true; - const maxCount = 512; - const jt_label_id = 'job_template_labels'; - - // Detect when a new label is added - $(`#${jt_label_id}`).on('select2:select', (e) => { - const { text } = e.params.data; - - // If the character count of an added label is greater than 512, we set `labels` field as invalid - if (text.length > maxCount) { - $scope.job_template_form.labels.$setValidity(`${jt_label_id}`, false); - $scope.job_template_labels_isValid = false; - } - }); - - // Detect when a label is removed - $(`#${jt_label_id}`).on('select2:unselect', (e) => { + $scope.job_template_labels_isValid = true; const maxCount = 512; - const { text } = e.params.data; + const jt_label_id = 'job_template_labels'; - /* If the character count of a removed label is greater than 512 AND the field is currently marked - as invalid, we set it back to valid */ - if (text.length > maxCount && $scope.job_template_form.labels.$error) { - $scope.job_template_form.labels.$setValidity(`${jt_label_id}`, true); - $scope.job_template_labels_isValid = true; - } - }); + // Detect when a new label is added + $(`#${jt_label_id}`).on('select2:select', (e) => { + const { text } = e.params.data; + + // If the character count of an added label is greater than 512, we set `labels` field as invalid + if (text.length > maxCount) { + $scope.job_template_form.labels.$setValidity(`${jt_label_id}`, false); + $scope.job_template_labels_isValid = false; + } + }); + + // Detect when a label is removed + $(`#${jt_label_id}`).on('select2:unselect', (e) => { + const maxCount = 512; + const { text } = e.params.data; + + /* If the character count of a removed label is greater than 512 AND the field is currently marked + as invalid, we set it back to valid */ + if (text.length > maxCount && $scope.job_template_form.labels.$error) { + $scope.job_template_form.labels.$setValidity(`${jt_label_id}`, true); + $scope.job_template_labels_isValid = true; + } + }); + }; + + handleLabelCount(); } ]; diff --git a/awx/ui/client/src/templates/workflows/add-workflow/workflow-add.controller.js b/awx/ui/client/src/templates/workflows/add-workflow/workflow-add.controller.js index 37a0749e3a..82d85d8168 100644 --- a/awx/ui/client/src/templates/workflows/add-workflow/workflow-add.controller.js +++ b/awx/ui/client/src/templates/workflows/add-workflow/workflow-add.controller.js @@ -179,41 +179,45 @@ export default [ $state.transitionTo('templates'); }; - /** - * This block of code specifically handles the client-side validation of the `labels` field. - * Due to it's detached nature in relation to the other job template fields, we must - * validate this field client-side in order to avoid the edge case where a user can make a - * successful POST to the `workflow_job_templates` endpoint but however encounter a 200 error from - * the `labels` endpoint due to a character limit. - * - * We leverage two of select2's available events, `select` and `unselect`, to detect when the user - * has either added or removed a label. From there, we set a flag and do simple string length - * checks to make sure a label's chacacter count remains under 512. Otherwise, we disable the "Save" button - * by invalidating the field and inform the user of the error. - */ + let handleLabelCount = () => { + /** + * This block of code specifically handles the client-side validation of the `labels` field. + * Due to it's detached nature in relation to the other job template fields, we must + * validate this field client-side in order to avoid the edge case where a user can make a + * successful POST to the `workflow_job_templates` endpoint but however encounter a 200 error from + * the `labels` endpoint due to a character limit. + * + * We leverage two of select2's available events, `select` and `unselect`, to detect when the user + * has either added or removed a label. From there, we set a flag and do simple string length + * checks to make sure a label's chacacter count remains under 512. Otherwise, we disable the "Save" button + * by invalidating the field and inform the user of the error. + */ - $scope.workflow_job_template_labels_isValid = true; - const maxCount = 512; - const wfjt_label_id = 'workflow_job_template_labels'; - // Detect when a new label is added - $(`#${wfjt_label_id}`).on('select2:select', (e) => { - const { text } = e.params.data; - // If the character count of an added label is greater than 512, we set `labels` field as invalid - if (text.length > maxCount) { - $scope.workflow_job_template_form.labels.$setValidity(`${wfjt_label_id}`, false); - $scope.workflow_job_template_labels_isValid = false; - } - }); - // Detect when a label is removed - $(`#${wfjt_label_id}`).on('select2:unselect', (e) => { + $scope.workflow_job_template_labels_isValid = true; const maxCount = 512; - const { text } = e.params.data; - /* If the character count of a removed label is greater than 512 AND the field is currently marked - as invalid, we set it back to valid */ - if (text.length > maxCount && $scope.workflow_job_template_form.labels.$error) { - $scope.workflow_job_template_form.labels.$setValidity(`${wfjt_label_id}`, true); - $scope.workflow_job_template_labels_isValid = true; - } - }); + const wfjt_label_id = 'workflow_job_template_labels'; + // Detect when a new label is added + $(`#${wfjt_label_id}`).on('select2:select', (e) => { + const { text } = e.params.data; + // If the character count of an added label is greater than 512, we set `labels` field as invalid + if (text.length > maxCount) { + $scope.workflow_job_template_form.labels.$setValidity(`${wfjt_label_id}`, false); + $scope.workflow_job_template_labels_isValid = false; + } + }); + // Detect when a label is removed + $(`#${wfjt_label_id}`).on('select2:unselect', (e) => { + const maxCount = 512; + const { text } = e.params.data; + /* If the character count of a removed label is greater than 512 AND the field is currently marked + as invalid, we set it back to valid */ + if (text.length > maxCount && $scope.workflow_job_template_form.labels.$error) { + $scope.workflow_job_template_form.labels.$setValidity(`${wfjt_label_id}`, true); + $scope.workflow_job_template_labels_isValid = true; + } + }); + }; + + handleLabelCount(); } ]; diff --git a/awx/ui/client/src/templates/workflows/edit-workflow/workflow-edit.controller.js b/awx/ui/client/src/templates/workflows/edit-workflow/workflow-edit.controller.js index 772fc75f13..0093637068 100644 --- a/awx/ui/client/src/templates/workflows/edit-workflow/workflow-edit.controller.js +++ b/awx/ui/client/src/templates/workflows/edit-workflow/workflow-edit.controller.js @@ -323,41 +323,45 @@ export default [ $scope.invalid_survey = false; }); - /** - * This block of code specifically handles the client-side validation of the `labels` field. - * Due to it's detached nature in relation to the other job template fields, we must - * validate this field client-side in order to avoid the edge case where a user can make a - * successful POST to the `workflow_job_templates` endpoint but however encounter a 200 error from - * the `labels` endpoint due to a character limit. - * - * We leverage two of select2's available events, `select` and `unselect`, to detect when the user - * has either added or removed a label. From there, we set a flag and do simple string length - * checks to make sure a label's chacacter count remains under 512. Otherwise, we disable the "Save" button - * by invalidating the field and inform the user of the error. - */ + let handleLabelCount = () => { + /** + * This block of code specifically handles the client-side validation of the `labels` field. + * Due to it's detached nature in relation to the other job template fields, we must + * validate this field client-side in order to avoid the edge case where a user can make a + * successful POST to the `workflow_job_templates` endpoint but however encounter a 200 error from + * the `labels` endpoint due to a character limit. + * + * We leverage two of select2's available events, `select` and `unselect`, to detect when the user + * has either added or removed a label. From there, we set a flag and do simple string length + * checks to make sure a label's chacacter count remains under 512. Otherwise, we disable the "Save" button + * by invalidating the field and inform the user of the error. + */ - $scope.workflow_job_template_labels_isValid = true; - const maxCount = 512; - const wfjt_label_id = 'workflow_job_template_labels'; - // Detect when a new label is added - $(`#${wfjt_label_id}`).on('select2:select', (e) => { - const { text } = e.params.data; - // If the character count of an added label is greater than 512, we set `labels` field as invalid - if (text.length > maxCount) { - $scope.workflow_job_template_form.labels.$setValidity(`${wfjt_label_id}`, false); - $scope.workflow_job_template_labels_isValid = false; - } - }); - // Detect when a label is removed - $(`#${wfjt_label_id}`).on('select2:unselect', (e) => { + $scope.workflow_job_template_labels_isValid = true; const maxCount = 512; - const { text } = e.params.data; - /* If the character count of a removed label is greater than 512 AND the field is currently marked - as invalid, we set it back to valid */ - if (text.length > maxCount && $scope.workflow_job_template_form.labels.$error) { - $scope.workflow_job_template_form.labels.$setValidity(`${wfjt_label_id}`, true); - $scope.workflow_job_template_labels_isValid = true; - } - }); + const wfjt_label_id = 'workflow_job_template_labels'; + // Detect when a new label is added + $(`#${wfjt_label_id}`).on('select2:select', (e) => { + const { text } = e.params.data; + // If the character count of an added label is greater than 512, we set `labels` field as invalid + if (text.length > maxCount) { + $scope.workflow_job_template_form.labels.$setValidity(`${wfjt_label_id}`, false); + $scope.workflow_job_template_labels_isValid = false; + } + }); + // Detect when a label is removed + $(`#${wfjt_label_id}`).on('select2:unselect', (e) => { + const maxCount = 512; + const { text } = e.params.data; + /* If the character count of a removed label is greater than 512 AND the field is currently marked + as invalid, we set it back to valid */ + if (text.length > maxCount && $scope.workflow_job_template_form.labels.$error) { + $scope.workflow_job_template_form.labels.$setValidity(`${wfjt_label_id}`, true); + $scope.workflow_job_template_labels_isValid = true; + } + }); + }; + + handleLabelCount(); } ];