Skip to content

Commit

Permalink
task/WP-11-Add/Remove Threshold Except (#156)
Browse files Browse the repository at this point in the history 
* - Updated queries to default to lowercase for
status and request_type.
- Got Add and Remove button working

* - Add and remove exception buttons that populate with AJAX
call to the DB:

* Updated so field type cannont be blank on submission

---------

Co-authored-by: edmondsgarrett <[email protected]>
  • Loading branch information
@sophia-massie @edmondsgarrett
sophia-massie and edmondsgarrett committed May 23, 2023
1 parent 7ac2987 commit 3521191
Show file tree
Hide file tree
Showing 3 changed files with 211 additions and 48 deletions.
8 changes: 6 additions & 2 deletions apcd-cms/src/apps/exception/static/forms/css/exception_submission_form.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,14 @@ input[id^="threshold-requested"]::-webkit-outer-spin-button
-moz-appearance:textfield;
}

/* Field Widths */
#threshold-requested, #expiration-date {
/* Field Sizes */
[id^="threshold-requested"], [id^="expiration-date"] {
min-width: 15ch;
}
/* To make sure sup values are not cut off when set as a label*/
label[name^="date-row"] {
margin-top: 1rem;
}
/* Field Layouts */

[id^="exception_block"] {
Expand Down
243 changes: 201 additions & 42 deletions ...-cms/src/apps/exception/templates/exception_submission_form/exception_threshold_form.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ <h1>Threshold Exception Request</h1>
eligible for an exception to certain data submission requirements under H.B. 2090 (87(R))
and associated regulations. Please review the legislation and regulation before
submitting this form. Links to both can be found on the
<a href="https://sph.uth.edu/research/centers/chcd/apcd/" target="_blank">Texas All-Payor Claims Database
<a href="https://sph.uth.edu/research/centers/chcd/apcd/#TID-44be0947-bee9-41b1-b81a-ddea0b971e14-3" target="_blank">Texas All-Payor Claims Database
website.</a>
</p>
<div class="forms">
Expand All @@ -30,7 +30,7 @@ <h1>Threshold Exception Request</h1>
<div class="exception-header-1">
<hr />
<h4>File Type</h4>
<p>Select submission file type for your requested threshold reduction:
<p>Select submission file type for your requested threshold reduction.

</p>
</div>
Expand Down Expand Up @@ -73,20 +73,19 @@ <h4>Requested Threshold Reduction</h4>
<div id="exception_block_1">
<div class="field-wrapper select required" >
<div class="field-errors" style="display: none"></div>
<label for="field-threshold-exception">Field Code <span class="asterisk">*</span></label>
<label for="field-threshold-exception_1">Field Code <span class="asterisk">*</span></label>

<select name="field-threshold-exception" required="required" class="choicefield"
id="field-threshold-exception">
<!-- Populates in script -->
<select name="field-threshold-exception_1" required="required" class="choicefield"
id="field-threshold-exception_1">
<!-- Populates in jQuery script -->
<option class=dropdown-text value=''>-- Select a File Type Above First --</option>
<option class="dropdown-text" value={{cdl.field_list_code}}></option>
</select>
</div>
<div class="o-grid o-grid--col-auto-count">
<div class="field-wrapper numberinput required">
<div class="field-errors" style="display: none"></div>

<label for="expiration-date">Expiriation Date<sup>*</sup><span class="asterisk">*</span> </label>
<label name="date-row" for="expiration-date">Expiriation Date<sup>*</sup><span class="asterisk">*</span> </label>

<input type="date" name="expiration-date" class="numeric" id="expiration-date" inputmode="numeric"
pattern="\d{4}-\d{2}-\d{2}" required />
Expand All @@ -95,7 +94,7 @@ <h4>Requested Threshold Reduction</h4>

<div class="field-wrapper numberinput required">
<div class="field-errors" style="display: none"></div>
<label for="threshold-requested">
<label name="date-row" for="threshold-requested">
Requested Threshold Percentage <span class="asterisk">*</span>
</label>

Expand All @@ -105,11 +104,23 @@ <h4>Requested Threshold Reduction</h4>
<span class="s-affixed-input-wrapper__suffix">%</span>
</div>
<!-- Populates in script-->
<div id="help-text-threshold-requested" class="help-text">
<div id="help-text-threshold-requested_1" class="help-text">
</div>
</div>
</div>
</div>
<h4 id="exception_header_2" style="display:none">Requested Threshold Reduction 2</h4>
<div id="exception_block_2"></div>
<h4 id="exception_header_3" style="display:none">Requested Threshold Reduction 3</h4>
<div id="exception_block_3"></div>
<h4 id="exception_header_4" style="display:none">Requested Threshold Reduction 4</h4>
<div id="exception_block_4"></div>
<h4 id="exception_header_5" style="display:none">Requested Threshold Reduction 5</h4>
<div id="exception_block_5"></div>
<button class="c-button c-button--primary" id="exception-add-btn" type="button">+ Add Another Threshold
Exception </button>
<button class="c-button c-button--secondary" id="exception-drop-btn" type="button">- Remove Last Threshold
Exception</button>
<hr />
<h4>Justification</h4>
<div class="field-wrapper textarea required">
Expand Down Expand Up @@ -236,55 +247,203 @@ <h4>Acknowledgment of Terms</h4>
$('#expiration-date').attr('max', maxDate);
});
</script>
<!-- To fetch CDL codes on file type input change -->
<!-- Broke out functions necessary for dynamic drop down and help text related to CDLs-->
<script>
const fileTypeSelect = document.querySelector('#file_type');
const fieldTypeSelect = document.querySelector('#field-threshold-exception');
const helpText = document.getElementById('help-text-threshold-requested')
fileTypeSelect.addEventListener('change', function (event) {
/*Clears help text when file type changes*/
helpText.innerHTML = '';
selectedFileType = event.target.value;
fieldTypeSelect.innerHTML = '';


//Disables and enables buttons based on number of exception blocks
function btnStatus(exceptions) {
let addExceptionBtn = document.getElementById("exception-add-btn");
let dropExceptionBtn = document.getElementById("exception-drop-btn");
addExceptionBtn.disabled = (exceptions == 5 ? true : false);
dropExceptionBtn.disabled = (exceptions == 1 ? true : false);
};
// Adds inner HTML to previously hidden exception blocks
function addException(exceptions) {
if (exceptions < 5) {
exceptions += 1;
let exceptionBlock = document.getElementById(`exception_block_${exceptions}`);
document.getElementById(`exception_header_${exceptions}`).style.display = 'block';
exceptionBlock.innerHTML = `
<div class="field-wrapper select required" >
<div class="field-errors" style="display: none"></div>
<label for="field-threshold-exception_${exceptions}">Field Code <span class="asterisk">*</span></label>
<select name="field-threshold-exception_${exceptions}" required="required" class="choicefield"
id="field-threshold-exception_${exceptions}">
<option class=dropdown-text value=''>-- Select a File Type Above First --</option>
<option class="dropdown-text" value={{cdl.field_list_code}}></option>
</select>
</div>
<div class="o-grid o-grid--col-auto-count">
<div class="field-wrapper numberinput required">
<div class="field-errors" style="display: none"></div>
<label for="expiration-date_${exceptions}">Expiriation Date<sup>*</sup><span class="asterisk">*</span> </label>
<input type="date" name="expiration-date_${exceptions}" class="numeric" id="expiration-date_${exceptions}" inputmode="numeric"
pattern="\d{4}-\d{2}-\d{2}" required />
</div>
<div class="field-wrapper numberinput required">
<div class="field-errors" style="display: none"></div>
<label for="threshold-requested_${exceptions}">
Requested Threshold Percentage <span class="asterisk">*</span>
</label>
<div class="s-affixed-input-wrapper">
<input type="number" name="threshold-requested_${exceptions}" class="textinput" id="threshold-requested_${exceptions}"
inputmode="numeric" min="0" max="99" required />
<span class="s-affixed-input-wrapper__suffix">%</span></div>
<!-- Populates in script-->
<div id="help-text-threshold-requested_${exceptions}" class="help-text">
</div>
</div>
</div>`
};
return exceptions
};
// Removes inner HTML to added exception blocks and sets display to hidden
function removeException(exceptions) {
if (exceptions > 1) {
let exceptionBlock = document.getElementById(`exception_block_${exceptions}`);
let exceptionHeader = document.getElementById(`exception_header_${exceptions}`);

exceptionBlock.innerHTML = "";
// Required or it will show the header for that block when remove button clicked
exceptionHeader.style.display = "none";
exceptions = exceptions - 1;
};
return exceptions
};
// Removes helper text and field select options
function clearDataOnFileChange() {
helpText = Array.from($('[id^="help-text-threshold-requested"]'));
fieldDropDown = Array.from($('[id^="field-threshold-exception"]'));
for (let i = 0; i < fieldDropDown.length; i++) {
fieldDropDown[i].innerHTML = "";
helpText[i].innerHTML = "";
};
};
// Gets cdl data from AJAX
function getDynamicCDLData(file_type) {
helpText = Array.from($('[id^="help-text-threshold-requested"]'));
fieldDropDown = Array.from($('[id^="field-threshold-exception"]'));
$.ajax({
url: "{% url 'exception:get-cdls' %}",
type: 'GET',
data: {
'file_type': file_type
},
success: function(response) {
let cdls = response;
if (file_type != '') {
// Loop over each fieldTypeSelect element and set its innerHTML to the dropDownHTML
for (let i = 0; i < fieldDropDown.length; i++) {
fieldDropDown[i].options.add(new Option('-- Select a Field Type --', ""));
for (let j = 0; j < cdls.length; j++) {
fieldDropDown[i].options.add(new Option(`${cdls[j].field_list_value}: ${cdls[j].field_list_code}`, `${cdls[j].field_list_code}`));
};
};
};
},
error: function(xhr, status, error) {
console.log(error);
}
});
</script>
<script>
$(document).ready(function() {
$('#file_type').change(function() {
let file_type = $(this).val();
let cdls;
$.ajax({
};
// To access previously hiddenexception blocks and populate with info from AJAX call.
// Ppulates based on sliced id name of select element to get exception block number
function getDynamicCDLDataforNewBlock(file_type, exceptions) {
helpText = $(`#help-text-threshold-requested_${exceptions}`)
fieldDropDown = $(`#field-threshold-exception_${exceptions}`);
$.ajax({
url: "{% url 'exception:get-cdls' %}",
type: 'GET',
data: {
'file_type': file_type
},
success: function(response) {
let cdls = response;
if (selectedFileType != '') {
let dropDownHTML = `<option class='dropdown-text value=''>-- Select a Field Type --</option>`
if (file_type != '') {
fieldDropDown.empty(); // Clear existing options
fieldDropDown.append($('<option>', {
value: '',
text: '-- Select a Field Type --'
}));
for (let i = 0; i < cdls.length; i++) {
dropDownHTML = dropDownHTML +
`<option class="dropdown-text" value="${cdls[i].field_list_code}">${cdls[i].field_list_value}: ${cdls[i].field_list_code}</option>`;
}
fieldTypeSelect.innerHTML = dropDownHTML;
//To change help text for requested threshold percentage
fieldTypeSelect.addEventListener('change', function (event) {
selectedFieldType = event.target.value;
if (selectedFieldType != '') {
for (let i = 0; i < cdls.length; i++)
if (selectedFieldType == cdls[i].field_list_code) {
helpText.innerHTML = `Must be less than the ${cdls[i].threshold_value}% required.`
}
fieldDropDown.append($('<option>', {
value: cdls[i].field_list_code,
text: `${cdls[i].field_list_value}: ${cdls[i].field_list_code}`
}));
}
});
}
},
error: function(xhr, status, error) {
console.log(error);
}
});
};
// Gets helper text from AJAX call and populates based on sliced id name of help text to get
// exception block number
function getHelpText(fieldSelection, file_type, exceptions) {
helpText = document.getElementById(`help-text-threshold-requested_${exceptions}`);
$.ajax({
url: "{% url 'exception:get-cdls' %}",
type: 'GET',
data: {
'file_type': file_type
},
success: function(response) {
let cdls = response;
//To change help text for requested threshold percentage
for (let i = 0; i < cdls.length; i++)
if (fieldSelection == cdls[i].field_list_code) {
helpText.innerHTML = "";
helpText.innerHTML = `Must be less than the ${cdls[i].threshold_value}% required.`
};
},
error: function(xhr, status, error) {
console.log(error);
}
});
};

$(document).ready(function() {
let exceptions = 1;
btnStatus(exceptions);

$('#exception-add-btn').click(function() {
let file_type = $("#file_type").val();
addException(exceptions);
// To track how many exception blocks there are for button logic
exceptions = addException(exceptions);
btnStatus(exceptions);
getDynamicCDLDataforNewBlock(file_type, exceptions);
// Gets help text for additional added blocks
$('[id^="field-threshold-exception"]').change(function() {
let fieldSelection = $(this).val();
// Gets exception number by id name
let exceptionsNum = $(this).attr('id').slice(-1);
let file_type = $('#file_type').val();
getHelpText(fieldSelection, file_type, exceptionsNum);
});
});

$('#exception-drop-btn').click(function() {
removeException(exceptions);
// To track how many exception blocks there are for button logic
exceptions = removeException(exceptions);
btnStatus(exceptions);
});

$('#file_type').change(function() {
clearDataOnFileChange()
let file_type = $(this).val();
getDynamicCDLData(file_type);
});

$('[id^="field-threshold-exception"]').change(function() {
let fieldSelection = $(this).val();
// Gets exception number by id name
let exceptionsNum = $(this).attr('id').slice(-1);
let file_type = $('#file_type').val();
getHelpText(fieldSelection, file_type, exceptionsNum);
});
});
</script>
Expand Down
8 changes: 4 additions & 4 deletions apcd-cms/src/apps/utils/apcd_database.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -773,13 +773,13 @@ def create_threshold_exception(form, sub_data):
sub_data[3],
_clean_value(form['requestor-name']),
_clean_email(form['requestor-email']),
"Threshold",
"threshold",
_clean_date(form['expiration-date']),
_clean_value(form['file_type']),
_clean_value(form['field-threshold-exception']),
_clean_value(form['threshold-requested']),
_clean_value(form['justification']),
"Pending"
"pending"
)
cur = conn.cursor()
cur.execute(operation, values)
Expand Down Expand Up @@ -1069,7 +1069,7 @@ def create_extension(form, iteration, sub_data):
None,
_clean_value(form['extension-type_{}'.format(iteration)]),
int(form['applicable-data-period_{}'.format(iteration)].replace('-', '')),
"Pending",
"pending",
_clean_value(sub_data[1]),
_clean_value(sub_data[2]),
_clean_value(sub_data[3]),
Expand All @@ -1085,7 +1085,7 @@ def create_extension(form, iteration, sub_data):
None,
_clean_value(form['extension-type']),
int(form['applicable-data-period'].replace('-', '')),
"Pending",
"pending",

_clean_value(sub_data[1]),
_clean_value(sub_data[2]),
Expand Down

0 comments on commit 3521191

Please sign in to comment.