step 8 : simulation when edit for set value dob and tahun, bulan, hari

This commit is contained in:
sindhu
2024-05-31 18:55:55 +07:00
parent 5680dccd8c
commit ea38d1cdcd
3 changed files with 63 additions and 34 deletions

View File

@@ -371,6 +371,14 @@ func (lh *MdDoctorHandler) HandleShowMdDoctorScreen(c echo.Context) error {
ID: "doctortglnow",
Value: dataTglNow,
},
models.CustomTextFieldv2Prm{
Label: "Tanggal Lahir Edit",
Name: "doctortgllahiredit",
Placeholder: "Tanggal Lahir Edit",
Type: "text",
ID: "doctortgllahiredit",
// Value: "2021-01-01",
},
models.CustomDropdownv1Prm{
Label: "Sapaan",
Name: "doctorsapaan",

View File

@@ -63,6 +63,7 @@ script HandleFormAfterRequest() {
templ BodyFormDoctor(
inputId models.CustomTextFieldv2Prm,
inputTglNow models.CustomTextFieldv2Prm,
inputTglLahirEdit models.CustomTextFieldv2Prm,
dropdownDoctorSapaan models.CustomDropdownv1Prm,
listItemSapaan templ.Component,
InputImbuhanAwal1 models.CustomTextFieldv2Prm,
@@ -121,6 +122,8 @@ templ BodyFormDoctor(
inputId)
@customtextfield.CustomTextFieldv2(
inputTglNow)
@customtextfield.CustomTextFieldv2(
inputTglLahirEdit)
<div class="row mt-5">
<!-- col 1 start -->
<div class="col-4">
@@ -289,6 +292,30 @@ templ BodyFormDoctor(
</div>
</div>
<script>
function formatDate(todayInput, birthdateValue)
{
var today = new Date(todayInput);
var years = today.getFullYear() - birthdateValue.getFullYear();
var months = today.getMonth() - birthdateValue.getMonth();
var days = today.getDate() - birthdateValue.getDate();
if (days < 0) {
months--;
days += new Date(today.getFullYear(), today.getMonth(), 0).getDate();
}
if (months < 0) {
years--;
months += 12;
}
document.querySelector("[name='doctorimbuhantahun']").value = years + ' Tahun';
document.querySelector("[name='doctorimbuhanbulan']").value = months + ' Bulan';
document.querySelector("[name='doctorimbuhanhari']").value = days + ' Hari';
}
document.addEventListener('htmx:afterSwap', function(event) {
// Reinitialize selectpicker after HTMX content swap
$('.selectpicker').selectpicker('refresh');
@@ -310,30 +337,18 @@ templ BodyFormDoctor(
birthdateInput.addEventListener('change', function() {
var birthdateValue = new Date(birthdateInput.value);
if (!isNaN(birthdateValue)) {
var today = new Date(todayInput.value);
var years = today.getFullYear() - birthdateValue.getFullYear();
var months = today.getMonth() - birthdateValue.getMonth();
var days = today.getDate() - birthdateValue.getDate();
if (days < 0) {
months--;
days += new Date(today.getFullYear(), today.getMonth(), 0).getDate();
}
if (months < 0) {
years--;
months += 12;
}
document.querySelector("[name='doctorimbuhantahun']").value = years + ' Tahun';
document.querySelector("[name='doctorimbuhanbulan']").value = months + ' Bulan';
document.querySelector("[name='doctorimbuhanhari']").value = days + ' Hari';
formatDate(todayInput.value, birthdateValue)
} else{
birthdateInput.classList.add('is-invalid');
invalidFeedback.textContent = 'Tanggal lahir tidak valid.';
}
})
var birthdateNowEdit = document.querySelector("#doctortgllahiredit");
if (birthdateNowEdit.value.trim() !== "") {
birthdateInput.value = birthdateNowEdit.value
formatDate(todayInput.value, new Date(birthdateInput.value))
}
});
</script>
}

View File

@@ -190,6 +190,7 @@ func HandleFormAfterRequest() templ.ComponentScript {
func BodyFormDoctor(
inputId models.CustomTextFieldv2Prm,
inputTglNow models.CustomTextFieldv2Prm,
inputTglLahirEdit models.CustomTextFieldv2Prm,
dropdownDoctorSapaan models.CustomDropdownv1Prm,
listItemSapaan templ.Component,
InputImbuhanAwal1 models.CustomTextFieldv2Prm,
@@ -245,7 +246,7 @@ func BodyFormDoctor(
var templ_7745c5c3_Var10 string
templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(componentID)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mddoctor\mddoctorformmodal.templ`, Line: 98, Col: 22}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mddoctor\mddoctorformmodal.templ`, Line: 99, Col: 22}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
if templ_7745c5c3_Err != nil {
@@ -274,6 +275,11 @@ func BodyFormDoctor(
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(
inputTglLahirEdit).Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"row mt-5\"><!-- col 1 start --><div class=\"col-4\"><div class=\"form-row\"><!-- sapaan start --><div class=\"col\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
@@ -472,7 +478,7 @@ func BodyFormDoctor(
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><!-- email --></div><!-- col 3 start --></div></div></div><script>\r\n document.addEventListener('htmx:afterSwap', function(event) {\r\n // Reinitialize selectpicker after HTMX content swap\r\n $('.selectpicker').selectpicker('refresh');\r\n });\r\n\r\n\tdocument.addEventListener('DOMContentLoaded', function() {\r\n\t\tdocument.getElementById('doctorimbuhantahun').setAttribute('disabled',true)\r\n\t\tdocument.getElementById('doctorimbuhanbulan').setAttribute('disabled',true)\r\n\t\tdocument.getElementById('doctorimbuhanhari').setAttribute('disabled',true)\r\n\r\n\t\t// onchange date picker\r\n\t\tvar birthdateInput = document.querySelector(\"#doctorimbuhantanggallahir\");\r\n \tvar invalidFeedback = birthdateInput.closest(\".form-group\").querySelector(\".invalid-feedback\");\r\n\r\n \tvar birthdateValue = birthdateInput.value;\r\n\r\n\t\tvar todayInput = document.querySelector(\"#doctortglnow\");\r\n\t\r\n\t\tbirthdateInput.addEventListener('change', function() {\r\n\t\t\tvar birthdateValue = new Date(birthdateInput.value);\r\n\t\t\tif (!isNaN(birthdateValue)) {\r\n\t\t\t\tvar today = new Date(todayInput.value);\r\n\t\t\t\t\r\n\t\t\t\tvar years = today.getFullYear() - birthdateValue.getFullYear();\r\n\t\t\t\tvar months = today.getMonth() - birthdateValue.getMonth();\r\n\t\t\t\tvar days = today.getDate() - birthdateValue.getDate();\r\n\t\t\t\t\r\n\t\t\t\tif (days < 0) {\r\n\t\t\t\t\tmonths--;\r\n\t\t\t\t\tdays += new Date(today.getFullYear(), today.getMonth(), 0).getDate();\r\n\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\tif (months < 0) {\r\n\t\t\t\t\tyears--;\r\n\t\t\t\t\tmonths += 12;\r\n\t\t\t\t}\r\n\r\n\t\t\t\tdocument.querySelector(\"[name='doctorimbuhantahun']\").value = years + ' Tahun';\r\n\t\t\t\tdocument.querySelector(\"[name='doctorimbuhanbulan']\").value = months + ' Bulan';\r\n\t\t\t\tdocument.querySelector(\"[name='doctorimbuhanhari']\").value = days + ' Hari';\r\n\t\t\t} else{\r\n\t\t\t\tbirthdateInput.classList.add('is-invalid');\r\n\t\t\t\tinvalidFeedback.textContent = 'Tanggal lahir tidak valid.';\r\n\t\t\t}\r\n\t\t})\r\n\t});\r\n </script>")
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><!-- email --></div><!-- col 3 start --></div></div></div><script>\r\n\r\n\tfunction formatDate(todayInput, birthdateValue)\r\n\t{\r\n\t\tvar today = new Date(todayInput);\r\n\t\t\t\t\r\n\t\tvar years = today.getFullYear() - birthdateValue.getFullYear();\r\n\t\tvar months = today.getMonth() - birthdateValue.getMonth();\r\n\t\tvar days = today.getDate() - birthdateValue.getDate();\r\n\t\t\r\n\t\tif (days < 0) {\r\n\t\t\tmonths--;\r\n\t\t\tdays += new Date(today.getFullYear(), today.getMonth(), 0).getDate();\r\n\t\t}\r\n\t\t\r\n\t\tif (months < 0) {\r\n\t\t\tyears--;\r\n\t\t\tmonths += 12;\r\n\t\t}\r\n\r\n\t\tdocument.querySelector(\"[name='doctorimbuhantahun']\").value = years + ' Tahun';\r\n\t\tdocument.querySelector(\"[name='doctorimbuhanbulan']\").value = months + ' Bulan';\r\n\t\tdocument.querySelector(\"[name='doctorimbuhanhari']\").value = days + ' Hari';\r\n\t}\r\n\r\n document.addEventListener('htmx:afterSwap', function(event) {\r\n // Reinitialize selectpicker after HTMX content swap\r\n $('.selectpicker').selectpicker('refresh');\r\n });\r\n\r\n\tdocument.addEventListener('DOMContentLoaded', function() {\r\n\t\tdocument.getElementById('doctorimbuhantahun').setAttribute('disabled',true)\r\n\t\tdocument.getElementById('doctorimbuhanbulan').setAttribute('disabled',true)\r\n\t\tdocument.getElementById('doctorimbuhanhari').setAttribute('disabled',true)\r\n\r\n\t\t// onchange date picker\r\n\t\tvar birthdateInput = document.querySelector(\"#doctorimbuhantanggallahir\");\r\n \tvar invalidFeedback = birthdateInput.closest(\".form-group\").querySelector(\".invalid-feedback\");\r\n\r\n \tvar birthdateValue = birthdateInput.value;\r\n\r\n\t\tvar todayInput = document.querySelector(\"#doctortglnow\");\r\n\t\r\n\t\tbirthdateInput.addEventListener('change', function() {\r\n\t\t\tvar birthdateValue = new Date(birthdateInput.value);\r\n\t\t\tif (!isNaN(birthdateValue)) {\r\n\t\t\t\tformatDate(todayInput.value, birthdateValue)\r\n\t\t\t} else{\r\n\t\t\t\tbirthdateInput.classList.add('is-invalid');\r\n\t\t\t\tinvalidFeedback.textContent = 'Tanggal lahir tidak valid.';\r\n\t\t\t}\r\n\t\t})\r\n\r\n\t\tvar birthdateNowEdit = document.querySelector(\"#doctortgllahiredit\");\r\n\t\tif (birthdateNowEdit.value.trim() !== \"\") {\r\n\t\t\tbirthdateInput.value = birthdateNowEdit.value\r\n\t\t\tformatDate(todayInput.value, new Date(birthdateInput.value))\r\n\t\t}\r\n\t});\r\n </script>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@@ -552,7 +558,7 @@ func ActionFormDoctor(LinkClose string, targetClose string, hxSwapClose string,
var templ_7745c5c3_Var14 string
templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(LinkClose)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mddoctor\mddoctorformmodal.templ`, Line: 365, Col: 22}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mddoctor\mddoctorformmodal.templ`, Line: 380, Col: 22}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
if templ_7745c5c3_Err != nil {
@@ -565,7 +571,7 @@ func ActionFormDoctor(LinkClose string, targetClose string, hxSwapClose string,
var templ_7745c5c3_Var15 string
templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(targetClose)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mddoctor\mddoctorformmodal.templ`, Line: 366, Col: 26}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mddoctor\mddoctorformmodal.templ`, Line: 381, Col: 26}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
if templ_7745c5c3_Err != nil {
@@ -578,7 +584,7 @@ func ActionFormDoctor(LinkClose string, targetClose string, hxSwapClose string,
var templ_7745c5c3_Var16 string
templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwapClose)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mddoctor\mddoctorformmodal.templ`, Line: 367, Col: 24}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mddoctor\mddoctorformmodal.templ`, Line: 382, Col: 24}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
if templ_7745c5c3_Err != nil {
@@ -619,7 +625,7 @@ func BtnCloseFormDoctor(LinkClose string, targetClose string, hxSwapClose string
var templ_7745c5c3_Var18 string
templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(LinkClose)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mddoctor\mddoctorformmodal.templ`, Line: 388, Col: 21}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mddoctor\mddoctorformmodal.templ`, Line: 403, Col: 21}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
if templ_7745c5c3_Err != nil {
@@ -632,7 +638,7 @@ func BtnCloseFormDoctor(LinkClose string, targetClose string, hxSwapClose string
var templ_7745c5c3_Var19 string
templ_7745c5c3_Var19, templ_7745c5c3_Err = templ.JoinStringErrs(targetClose)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mddoctor\mddoctorformmodal.templ`, Line: 389, Col: 25}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mddoctor\mddoctorformmodal.templ`, Line: 404, Col: 25}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var19))
if templ_7745c5c3_Err != nil {
@@ -645,7 +651,7 @@ func BtnCloseFormDoctor(LinkClose string, targetClose string, hxSwapClose string
var templ_7745c5c3_Var20 string
templ_7745c5c3_Var20, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwapClose)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mddoctor\mddoctorformmodal.templ`, Line: 390, Col: 23}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mddoctor\mddoctorformmodal.templ`, Line: 405, Col: 23}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var20))
if templ_7745c5c3_Err != nil {
@@ -700,7 +706,7 @@ func DeleteConfirmationBodyDoctor(inputId models.CustomTextFieldv2Prm,
var templ_7745c5c3_Var23 string
templ_7745c5c3_Var23, templ_7745c5c3_Err = templ.JoinStringErrs(componentID)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mddoctor\mddoctorformmodal.templ`, Line: 407, Col: 22}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mddoctor\mddoctorformmodal.templ`, Line: 422, Col: 22}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var23))
if templ_7745c5c3_Err != nil {
@@ -722,7 +728,7 @@ func DeleteConfirmationBodyDoctor(inputId models.CustomTextFieldv2Prm,
var templ_7745c5c3_Var25 string
templ_7745c5c3_Var25, templ_7745c5c3_Err = templ.JoinStringErrs(message)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mddoctor\mddoctorformmodal.templ`, Line: 408, Col: 14}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mddoctor\mddoctorformmodal.templ`, Line: 423, Col: 14}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var25))
if templ_7745c5c3_Err != nil {
@@ -740,7 +746,7 @@ func DeleteConfirmationBodyDoctor(inputId models.CustomTextFieldv2Prm,
var templ_7745c5c3_Var26 string
templ_7745c5c3_Var26, templ_7745c5c3_Err = templ.JoinStringErrs(v)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mddoctor\mddoctorformmodal.templ`, Line: 413, Col: 68}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mddoctor\mddoctorformmodal.templ`, Line: 428, Col: 68}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var26))
if templ_7745c5c3_Err != nil {
@@ -763,7 +769,7 @@ func DeleteConfirmationBodyDoctor(inputId models.CustomTextFieldv2Prm,
var templ_7745c5c3_Var27 string
templ_7745c5c3_Var27, templ_7745c5c3_Err = templ.JoinStringErrs(v)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mddoctor\mddoctorformmodal.templ`, Line: 419, Col: 10}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mddoctor\mddoctorformmodal.templ`, Line: 434, Col: 10}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var27))
if templ_7745c5c3_Err != nil {
@@ -830,7 +836,7 @@ func ActionFormDoctorDelete(LinkClose string, targetClose string, hxSwapClose st
var templ_7745c5c3_Var30 string
templ_7745c5c3_Var30, templ_7745c5c3_Err = templ.JoinStringErrs(LinkClose)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mddoctor\mddoctorformmodal.templ`, Line: 433, Col: 22}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mddoctor\mddoctorformmodal.templ`, Line: 448, Col: 22}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var30))
if templ_7745c5c3_Err != nil {
@@ -843,7 +849,7 @@ func ActionFormDoctorDelete(LinkClose string, targetClose string, hxSwapClose st
var templ_7745c5c3_Var31 string
templ_7745c5c3_Var31, templ_7745c5c3_Err = templ.JoinStringErrs(targetClose)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mddoctor\mddoctorformmodal.templ`, Line: 434, Col: 26}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mddoctor\mddoctorformmodal.templ`, Line: 449, Col: 26}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var31))
if templ_7745c5c3_Err != nil {
@@ -856,7 +862,7 @@ func ActionFormDoctorDelete(LinkClose string, targetClose string, hxSwapClose st
var templ_7745c5c3_Var32 string
templ_7745c5c3_Var32, templ_7745c5c3_Err = templ.JoinStringErrs(hxSwapClose)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mddoctor\mddoctorformmodal.templ`, Line: 435, Col: 24}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mddoctor\mddoctorformmodal.templ`, Line: 450, Col: 24}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var32))
if templ_7745c5c3_Err != nil {