Skip to content

Commit

Permalink
Merge branch 'vuetifyv3' of https://github.com/bcgov/EDUC-GRAD-ADMIN …
Browse files Browse the repository at this point in the history 
…into sam-styling
  • Loading branch information
@suzalflueck
suzalflueck committed Oct 7, 2024
2 parents ade1b32 + cbfa7bb commit 3078326
Show file tree
Hide file tree
Showing 9 changed files with 243 additions and 201 deletions.
7 changes: 6 additions & 1 deletion frontend/src/components/Batch/Forms/DistrunForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,12 @@
<ProgramInput></ProgramInput>
</v-row>
<v-row v-if="group == 'School'">
<SchoolInput></SchoolInput>
<SchoolInput
:disableSelectStudents="
getCredential == 'Blank certificate print' ||
getCredential == 'Blank transcript print'
"
></SchoolInput>
</v-row>
</v-stepper-window-item>
<v-stepper-window-item value="3">
Expand Down
188 changes: 103 additions & 85 deletions frontend/src/components/Batch/Forms/FormInputs/DateRangeInput.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
v-model="gradDateFrom"
label="Graduation Date From:"
placeholder="yyyy-mm-dd"
@blur="validateAndFormatDate(gradDateFrom, 'gradDateFrom')"
@blur="validateAndFormatDate('gradDateFrom')"
@input="debouncedCheckAndConvertDate('from')"
></v-text-field>
<div v-if="v$.gradDateFrom.$invalid && !v$.gradDateFrom.$pending">
Expand All @@ -31,7 +31,7 @@
v-model="gradDateTo"
label="Graduation Date To:"
placeholder="yyyy-mm-dd"
@blur="validateAndFormatDate(gradDateTo, 'gradDateTo')"
@blur="validateAndFormatDate('gradDateTo')"
@input="debouncedCheckAndConvertDate('to')"
></v-text-field>
<div
Expand All @@ -56,117 +56,135 @@
</template>

<script>
import { ref, watch, defineComponent } from "vue";
import { required, helpers } from "@vuelidate/validators";
import { ref, watch } from "vue";
import useVuelidate from "@vuelidate/core";
import { useBatchRequestFormStore } from "../../../../store/modules/batchRequestFormStore";
import { debounce } from "lodash";
const formatDateString = (dateString) => {
const dateParts = dateString.split("-");
if (dateParts.length === 3) {
const [year, month, day] = dateParts.map(Number);
const date = new Date(year, month - 1, day);
return !isNaN(date.getTime()) ? date.toISOString().slice(0, 10) : "";
}
return "";
};
export default {
data() {
return {
gradDateFrom: "",
gradDateTo: "",
includeStudents: "Current Students",
};
},
computed: {
batchRequestFormStore() {
return useBatchRequestFormStore();
},
},
validations() {
return {
gradDateFrom: {
required:
this.includeStudents === "Date Range"
? helpers.withMessage("Start Date is required", required)
: false,
dateFormat:
this.includeStudents === "Date Range"
? (value) =>
/^\d{4}-\d{2}-\d{2}$/.test(value) ||
"Invalid date format (yyyy-mm-dd)"
: false,
},
gradDateTo: {
required:
this.includeStudents === "Date Range"
? helpers.withMessage("End Date is required", required)
: false,
dateFormat:
this.includeStudents === "Date Range"
? (value) =>
/^\d{4}-\d{2}-\d{2}$/.test(value) ||
"Invalid date format (yyyy-mm-dd)"
: false,
},
};
},
export default defineComponent({
setup() {
const batchRequestFormStore = useBatchRequestFormStore();
// Reactive references from the store
const gradDateFrom = ref(batchRequestFormStore.gradDateFrom);
const gradDateTo = ref(batchRequestFormStore.gradDateTo);
const rules = {
gradDateFrom: {
required: helpers.withMessage("Start Date is required", required),
dateFormat: (value) =>
/^\d{4}-\d{2}-\d{2}$/.test(value) ||
"Invalid date format (yyyy-mm-dd)",
},
gradDateTo: {
required: helpers.withMessage("End Date is required", required),
dateFormat: (value) =>
/^\d{4}-\d{2}-\d{2}$/.test(value) ||
"Invalid date format (yyyy-mm-dd)",
},
watch(gradDateFrom, (newValue) => {
batchRequestFormStore.gradDateFrom = newValue;
});
watch(gradDateTo, (newValue) => {
batchRequestFormStore.gradDateTo = newValue;
});
return {
gradDateFrom,
gradDateTo,
v$: useVuelidate(),
};
},
const v$ = useVuelidate(rules, { gradDateFrom, gradDateTo });
const validateAndFormatDate = (dateRef, emitKey) => {
if (dateRef.value) {
const formatted = formatDateString(dateRef.value);
dateRef.value = formatted;
watch: {
includeStudents(newValue) {
if (newValue === "Current Students") {
this.clearDateFields();
}
},
},
methods: {
clearDateFields() {
this.gradDateFrom = "";
this.gradDateTo = "";
this.batchRequestFormStore.gradDateFrom = "";
this.batchRequestFormStore.gradDateTo = "";
},
validateAndFormatDate(dateRef) {
if (this[dateRef]) {
const formatted = this.formatDateString(this[dateRef]);
this[dateRef] = formatted;
// Emit updates to the store
batchRequestFormStore[emitKey] = formatted;
this.batchRequestFormStore[dateRef] = formatted;
}
};
const checkAndConvertDate = (type) => {
const targetDate = type === "from" ? gradDateFrom : gradDateTo;
},
checkAndConvertDate(type) {
const targetDate = type === "from" ? this.gradDateFrom : this.gradDateTo;
// Check if the input length is 8
if (targetDate.value.length === 8) {
const year = targetDate.value.substring(0, 4);
const month = targetDate.value.substring(4, 6);
const day = targetDate.value.substring(6, 8);
targetDate.value = `${year}-${month}-${day}`;
if (targetDate.length === 8) {
const year = targetDate.substring(0, 4);
const month = targetDate.substring(4, 6);
const day = targetDate.substring(6, 8);
this[
type === "from" ? "gradDateFrom" : "gradDateTo"
] = `${year}-${month}-${day}`;
// Emit the change to the store
if (type === "from") {
batchRequestFormStore.gradDateFrom = targetDate.value;
this.batchRequestFormStore.gradDateFrom = this.gradDateFrom;
} else {
batchRequestFormStore.gradDateTo = targetDate.value;
this.batchRequestFormStore.gradDateTo = this.gradDateTo;
}
}
};
// Create a debounced version of checkAndConvertDate
const debouncedCheckAndConvertDate = debounce(checkAndConvertDate, 300); // 300 ms delay
const handleStudentSelectionChange = (newValue) => {
},
formatDateString(dateString) {
const dateParts = dateString.split("-");
if (dateParts.length === 3) {
const [year, month, day] = dateParts.map(Number);
const date = new Date(year, month - 1, day);
return !isNaN(date.getTime()) ? date.toISOString().slice(0, 10) : "";
}
return "";
},
handleStudentSelectionChange(newValue) {
console.log("Student selection changed:", newValue);
if (newValue === "Current Students") {
console.log("Clearing gradDateFrom and gradDateTo");
gradDateFrom.value = ""; // Clear local ref
gradDateTo.value = ""; // Clear local ref
// Update the store
batchRequestFormStore.gradDateFrom = "";
batchRequestFormStore.gradDateTo = "";
this.clearDateFields();
}
};
// Watch for store updates to keep component state in sync
watch(
() => batchRequestFormStore.gradDateFrom,
(newValue) => {
gradDateFrom.value = newValue;
}
);
watch(
() => batchRequestFormStore.gradDateTo,
(newValue) => {
gradDateTo.value = newValue;
}
);
return {
gradDateFrom,
gradDateTo,
v$,
validateAndFormatDate,
debouncedCheckAndConvertDate,
handleStudentSelectionChange,
};
},
},
data() {
return {
includeStudents: "Current Students",
};
mounted() {
// Debounced version of checkAndConvertDate
this.debouncedCheckAndConvertDate = debounce(this.checkAndConvertDate, 300); // 300 ms delay
},
});
};
</script>

<style scoped>
Expand Down
Loading

0 comments on commit 3078326

Please sign in to comment.