From 67b851fa543659286ff62d3e3df99e6e369ebcd1 Mon Sep 17 00:00:00 2001
From: Avisha Sodhi <38086281+SodhiA1@users.noreply.github.com>
Date: Fri, 11 Oct 2024 15:52:03 -0700
Subject: [PATCH 1/2] UI: Issue NEW PEN

---
 backend/src/components/sdc/sdc.js             |  12 +-
 .../PenMatchStudentDetails.vue                |  53 +--
 .../data-collection/SDCIssueNewPEN.vue        | 365 ++++++++++++++++++
 frontend/src/utils/common.js                  |  18 +
 4 files changed, 420 insertions(+), 28 deletions(-)
 create mode 100644 frontend/src/components/data-collection/SDCIssueNewPEN.vue

diff --git a/backend/src/components/sdc/sdc.js b/backend/src/components/sdc/sdc.js
index 0b44f81bd..091f1bb6e 100644
--- a/backend/src/components/sdc/sdc.js
+++ b/backend/src/components/sdc/sdc.js
@@ -565,12 +565,20 @@ async function updateStudentPEN(req, res) {
     payload.updateUser = utils.getUser(req).idir_username;
     payload.enrolledProgramCodes = null;
     payload.penMatchResult = null;
-
+    if (payload?.numberOfCourses) {
+      payload.numberOfCourses = stripNumberFormattingNumberOfCourses(payload.numberOfCourses);
+    }
     const data = await postData(`${config.get('sdc:schoolCollectionStudentURL')}/update-pen/type/${req.params.penCode}`, payload);
     return res.status(HttpStatus.OK).json(data);
   } catch (e) {
     logApiError(e, 'Error updating student PEN');
-    return errorResponse(res);
+    if (e.status === 400 && e.data.message === 'SdcSchoolCollectionStudent was not saved to the database because it would create a provincial duplicate.') {
+      return res.status(HttpStatus.CONFLICT).json({
+        status: HttpStatus.CONFLICT,
+        message: 'Student was not saved because it would create provincial a duplicate.'
+      });
+    }
+    return handleExceptionResponse(e, res); 
   }
 }
 
diff --git a/frontend/src/components/data-collection/PenMatchStudentDetails.vue b/frontend/src/components/data-collection/PenMatchStudentDetails.vue
index c836c4667..34830d504 100644
--- a/frontend/src/components/data-collection/PenMatchStudentDetails.vue
+++ b/frontend/src/components/data-collection/PenMatchStudentDetails.vue
@@ -81,7 +81,7 @@
                   :loading="isIssuingNewPen"
                   :disabled="studentDetails?.penMatchResult === 'NEW' || studentDetails?.penMatchResult === 'MATCH'"
                   text="Issue new PEN"
-                  @click-action="issueNewPen"
+                  @click-action="togglePENRequestDialog"
                 />
               </v-row>
               <v-row
@@ -150,6 +150,16 @@
       </v-col>
     </v-row>
   </v-container>
+  <v-dialog
+    v-model="showPenRequestDialog"
+    :max-width="600"
+  >
+    <SDCIssueNewPEN
+      :sdc-student="clonedStudentDetail"
+      @cancel="togglePENRequestDialog"
+      @save-new-pen="saveNewPen"
+    />
+  </v-dialog>
 </template>
 <script>
 
@@ -167,6 +177,8 @@ import PenMatchResults from './PenMatchResults.vue';
 import {sdcCollectionStore} from '@/store/modules/sdcCollection';
 import PrimaryButton from '../util/PrimaryButton.vue';
 import _ from 'lodash';
+import SDCIssueNewPEN from './SDCIssueNewPEN.vue';
+import {constructPenMatchObjectFromSdcStudent} from '../../utils/common';
 
 export default {
   name: 'PenMatchStudentDetails',
@@ -174,7 +186,8 @@ export default {
     Spinner,
     StudentDetailsPanel,
     PenMatchResults,
-    PrimaryButton
+    PrimaryButton,
+    SDCIssueNewPEN
   },
   mixins: [alertMixin],
   async beforeRouteUpdate(to, from) {
@@ -210,6 +223,7 @@ export default {
         'MATCH' : '#2E8540',
         'NEW' : '#2E8540',
       },
+      showPenRequestDialog: false,
     };
   },
   beforeUnmount() {
@@ -234,6 +248,9 @@ export default {
   },
   methods: {
     ...mapActions(sdcCollectionStore, ['setSelectedIDs', 'setNavigationPage']),
+    togglePENRequestDialog(){
+      this.showPenRequestDialog = !this.showPenRequestDialog;
+    },
     backButtonClick() {
       this.$router.push({name: 'collection-view', query: {penMatch: true}, params: {collectionID: this.activeCollection?.collectionID}});
     },
@@ -281,7 +298,7 @@ export default {
       this.showPossibleMatch = false;
       this.possibleMatches = [];
       try {
-        const result = await getPossibleMatches(this.constructPenMatchObjectFromStudent());
+        const result = await getPossibleMatches(constructPenMatchObjectFromSdcStudent(this.studentDetails));
         this.isIssuePenDisabled = false;
         this.possibleMatches = result.data ?? [];
         await this.checkForDuplicates();
@@ -331,12 +348,13 @@ export default {
         this.getSdcSchoolCollectionStudentDetail(this.$route.params.studentID);
       });
     },
-    async issueNewPen() {
+    async saveNewPen(newPenDetails) {
       this.isIssuingNewPen = true;
-      this.clonedStudentDetail.assignedPen = null;
-      this.clonedStudentDetail.assignedStudentId = null;
+      this.clonedStudentDetail.assignedPen = newPenDetails.assignedPen;
+      this.clonedStudentDetail.assignedStudentId = newPenDetails.assignedstudentId;
       this.updatePEN('NEW').finally(() => {
         this.isIssuingNewPen = false;
+        this.togglePENRequestDialog();
         this.getSdcSchoolCollectionStudentDetail(this.$route.params.studentID);
       });
     },
@@ -344,9 +362,9 @@ export default {
       return ApiService.apiAxios.post(`${Routes.sdc.SDC_SCHOOL_COLLECTION_STUDENT}/${this.clonedStudentDetail.sdcSchoolCollectionStudentID}/update-pen/${type}`, this.clonedStudentDetail)
         .then(() => {
           if(type === 'NEW') {
-            this.setSuccessAlert('Your request to issue new PEN is accepted.');
+            this.setSuccessAlert('PEN updated successfully.');
           } else {
-            this.setSuccessAlert('PEN has been MATCHED successfully');
+            this.setSuccessAlert('PEN has been MATCHED successfully.');
           }
           
           if(!this.nextDisabled) {
@@ -354,30 +372,13 @@ export default {
           }
         })
         .catch(error => {
-          this.setFailureAlert('An error occurred while updating PEN. Please try again later.');
+          this.setFailureAlert(error?.response?.data?.message ? error?.response?.data?.message : 'An error occurred while updating PEN. Please try again later.');
           console.log(error);
         });
     },
     clickOpenSearch(){
       this.modifySearchDialog = true;
     },
-    constructPenMatchObjectFromStudent() {
-      return {
-        pen: this.studentDetails.studentPen,
-        localID: this.studentDetails.localID,
-        surname: this.studentDetails.legalLastName,
-        givenName: this.studentDetails.legalFirstName,
-        middleName: this.studentDetails.legalMiddleNames,
-        usualSurname: this.studentDetails.usualLastName,
-        usualGiven: this.studentDetails.usualFirstName,
-        usualMiddleName: this.studentDetails.usualMiddleNames,
-        dob: this.studentDetails.dob,
-        sex: this.studentDetails.gender,
-        enrolledGradeCode: this.studentDetails.enrolledGradeCode,
-        mincode: '00807005',
-        postal: this.studentDetails.postalCode
-      };
-    },
     async modifySearchParams(updatedStudent) {
       if(updatedStudent) {
         if(!_.isEqual(this.studentDetails, updatedStudent)) {
diff --git a/frontend/src/components/data-collection/SDCIssueNewPEN.vue b/frontend/src/components/data-collection/SDCIssueNewPEN.vue
new file mode 100644
index 000000000..f7a4d0860
--- /dev/null
+++ b/frontend/src/components/data-collection/SDCIssueNewPEN.vue
@@ -0,0 +1,365 @@
+<template>
+  <v-card v-if="isLoadingMatches">
+    <v-card-text>
+      <Spinner
+        :flat="true"
+      />
+    </v-card-text>
+  </v-card>
+  <div v-else>
+    <v-card>
+      <v-card-title>
+        <span>PEN Match</span>
+      </v-card-title>
+      <v-card-text>
+        <div
+          ref="topDiv"
+        >
+          <v-row>
+            <v-col
+              class="pt-0"
+              cols="12"
+            >
+              <v-form
+                ref="studentDetailsForm"
+                v-model="studentDetailsFormValid"
+              >
+                <v-row>
+                  <v-col cols="12">
+                    <v-row class="mt-4">
+                      <v-col>
+                        <v-text-field
+                          id="legalLastName"
+                          v-model="sdcStudent.legalLastName"
+                          label="Legal Surname"
+                          variant="underlined"
+                          :rules="[rules.required()]"
+                          :maxlength="25"
+                          :error-messages="err.legalLastNameError"
+                          density="compact"
+                          @update:model-value="formUpdated"
+                        />
+                      </v-col>
+                      <v-col>
+                        <v-text-field
+                          id="usualLastName"
+                          v-model="sdcStudent.usualLastName"
+                          label="Usual Surname"
+                          variant="underlined"
+                          :maxlength="25"
+                          :error-messages="err.usualLastNameError"
+                          density="compact"
+                          @update:model-value="formUpdated"
+                        />
+                      </v-col>
+                    </v-row>
+                    <v-row class="mt-n4">
+                      <v-col>
+                        <v-text-field
+                          id="legalFirstName"
+                          v-model="sdcStudent.legalFirstName"
+                          label="Legal Given"
+                          variant="underlined"
+                          :maxlength="25"
+                          :error-messages="err.legalFirstNameError"
+                          density="compact"
+                          @update:model-value="formUpdated"
+                        />
+                      </v-col>
+                      <v-col>
+                        <v-text-field
+                          id="usualFirstName"
+                          v-model="sdcStudent.usualFirstName"
+                          label="Usual Given"
+                          variant="underlined"
+                          :maxlength="25"
+                          :error-messages="err.usualFirstNameError"
+                          density="compact"
+                          @update:model-value="formUpdated"
+                        />
+                      </v-col>
+                    </v-row>
+                    <v-row class="mt-n4">
+                      <v-col>
+                        <v-text-field
+                          id="legalMiddleNames"
+                          v-model="sdcStudent.legalMiddleNames"
+                          label="Legal Middle"
+                          variant="underlined"
+                          :maxlength="25"
+                          :error-messages="err.legalMiddleNamesError"
+                          density="compact"
+                          @update:model-value="formUpdated"
+                        />
+                      </v-col>
+                      <v-col>
+                        <v-text-field
+                          id="usualMiddleNames"
+                          v-model="sdcStudent.usualMiddleNames"
+                          label="Usual Middle"
+                          variant="underlined"
+                          :maxlength="25"
+                          :error-messages="err.usualMiddleNamesError"
+                          density="compact"
+                          @update:model-value="formUpdated"
+                        />
+                      </v-col>
+                    </v-row>
+                    <v-row class="mt-n4">
+                      <v-col>
+                        <DatePicker
+                          id="dobPicker"
+                          v-model="sdcStudent.dob"
+                          label="Birthdate"
+                          style="z-index: 20000"
+                          :rules="[rules.required()]"
+                          model-type="yyyyMMdd"
+                          :error-message="err.birthDateError"
+                          density="compact"
+                          @update:model-value="formUpdated"
+                        />
+                      </v-col>
+                      <v-col>
+                        <v-select
+                          id="gender"
+                          v-model="sdcStudent.gender"
+                          :items="sdcCollection.genderCodes"
+                          item-value="genderCode"
+                          item-title="dropdownText"
+                          label="Gender"
+                          variant="underlined"
+                          :rules="[rules.required()]"
+                          :error-messages="err.genderError"
+                          density="compact"
+                          @update:model-value="formUpdated"
+                        />
+                      </v-col>
+                    </v-row>
+                    <v-row class="mt-n4">
+                      <v-col>
+                        <v-text-field
+                          id="localID"
+                          v-model="sdcStudent.localID"
+                          label="Local ID"
+                          variant="underlined"
+                          :maxlength="12"
+                          density="compact"
+                          @update:model-value="formUpdated"
+                        />
+                      </v-col>
+                      <v-col>
+                        <v-select
+                          id="enrolledGradeCode"
+                          v-model="sdcStudent.enrolledGradeCode"
+                          label="Grade"
+                          variant="underlined"
+                          :items="sdcCollection.enrolledGradeCodes"
+                          item-value="enrolledGradeCode"
+                          item-title="dropdownText"
+                          :rules="[rules.required()]"
+                          density="compact"
+                          @update:model-value="formUpdated"
+                        />
+                      </v-col>
+                    </v-row>
+                    <v-row class="mt-n4">
+                      <v-col cols="6">
+                        <v-text-field
+                          id="postalCode"
+                          v-model="sdcStudent.postalCode"
+                          label="Postal Code"
+                          variant="underlined"
+                          :maxlength="6"
+                          density="compact"
+                          @update:model-value="formUpdated"
+                        />
+                      </v-col>
+                    </v-row>
+                  </v-col>
+                </v-row>
+              </v-form>
+            </v-col>
+          </v-row>
+        </div>
+        
+        
+      </v-card-text>
+      <v-card-actions>
+        <div v-if="bestMatchPEN">
+          <v-row>
+            <v-col>
+              <v-alert
+                id="collection-submission"
+                density="compact"
+                type="success"
+                variant="tonal"
+                :text="newPenText"
+              />
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col class="d-flex justify-end">
+              <v-btn
+                id="saveNewPEN"
+                color="#003366"
+                variant="elevated"
+                text="Update Student"
+                :disabled="!bestMatchPEN"
+                @click="saveNewPen"
+              />
+            </v-col>
+          </v-row>
+        </div>
+        
+
+        <v-row v-else>
+          <v-col class="d-flex justify-end">
+            <v-btn
+              id="cancelMatchButton"
+              color="#003366"
+              text="Cancel"
+              variant="outlined"
+              @click="cancelClicked"
+            />
+            <v-btn
+              id="generatePEN"
+              color="#003366"
+              variant="elevated"
+              text="Generate PEN"
+              :disabled="!studentDetailsFormValid"
+              @click="issueNewPEN"
+            />
+          </v-col>
+        </v-row>
+      </v-card-actions>
+    </v-card>
+  </div>
+</template>
+
+<script>
+
+import {getDemogValidationResults, constructPenMatchObjectFromSdcStudent} from '../../utils/common';
+import {Routes} from '@/utils/constants';
+import Spinner from '../common/Spinner.vue';
+import alertMixin from '@/mixins/alertMixin';
+import ApiService from '@/common/apiService';
+import DatePicker from '@/components/util/DatePicker.vue';
+import {isValidPEN} from '@/utils/validation';
+import * as Rules from '@/utils/institute/formRules';
+import {sdcCollectionStore} from '@/store/modules/sdcCollection';
+import {mapState} from 'pinia';
+import {penRequestBatchStore} from '@/store/modules/penRequestBatch';
+
+export default {
+  name: 'SDCIssueNewPEN',
+  components: {DatePicker, Spinner},
+  mixins: [alertMixin],
+  props: {
+    sdcStudent: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ['cancel', 'saveNewPen'],
+  data() {
+    return {
+      penRules: [v => (!v || isValidPEN(v) || 'Must be a valid PEN')],
+      rules: Rules,
+      err: {
+        usualMiddleNamesError: '',
+        usualFirstNameError: '',
+        usualLastNameError: '',
+        legalMiddleNamesError: '',
+        legalFirstNameError: '',
+        legalLastNameError: '',
+        birthDateError: '',
+        genderError: ''
+      },
+      sdcCollection: sdcCollectionStore(),
+      studentDetailsFormValid: false,
+      penMatchStatus: null,
+      isLoadingMatches: false,
+      isSearchingStudent: false,
+      showMatchStatus: false,
+      showMultiStatus: false,
+      showNewStatus: false,
+      bestMatchPEN: null,
+      newPenText: null,
+      newPenDetails: null
+    };
+  },
+  computed: {
+    ...mapState(penRequestBatchStore, ['prbValidationIssueTypeCodes'])
+  },
+  created() {
+    penRequestBatchStore().getCodes();
+    this.$nextTick().then(this.validateForm);
+  },
+  methods: {
+    cancelClicked(){
+      this.$emit('cancel');
+    },
+    formUpdated(){
+      Object.keys(this.err).forEach(key => {
+        this.err[key] = '';
+      });
+    },
+    saveNewPen(){
+      this.$emit('saveNewPen', this.newPenDetails);
+    },
+    async issueNewPEN() {
+      if (this.$refs.studentDetailsForm.validate()) {
+        this.isLoadingMatches = true;
+        try {
+          const payload = {
+            student: {
+              ...this.sdcStudent,
+              genderCode: this.sdcStudent.gender
+            }
+          };
+          console.log(payload)
+          const result = await getDemogValidationResults(payload);
+          const onlyErrors = result.filter(el => el.penRequestBatchValidationIssueSeverityCode === 'ERROR');
+          let validationIssues = onlyErrors.map(y => {
+            y.penRequestBatchValidationIssueTypeCode = this.prbValidationIssueTypeCodes.find(obj => obj.code === y.penRequestBatchValidationIssueTypeCode)?.description || y.penRequestBatchValidationIssueTypeCode;
+            return y;
+          });
+          if (validationIssues?.length > 0) {
+            this.err.legalLastNameError = validationIssues.find(el => el.penRequestBatchValidationFieldCode === 'LEGALLAST')?.penRequestBatchValidationIssueTypeCode || '';
+            this.err.legalFirstNameError = validationIssues.find(el => el.penRequestBatchValidationFieldCode === 'LEGALFIRST')?.penRequestBatchValidationIssueTypeCode || '';
+            this.err.legalMiddleNamesError = validationIssues.find(el => el.penRequestBatchValidationFieldCode === 'LEGALMID')?.penRequestBatchValidationIssueTypeCode || '';
+            this.err.usualFirstNameError = validationIssues.find(el => el.penRequestBatchValidationFieldCode === 'USUALFIRST')?.penRequestBatchValidationIssueTypeCode || '';
+            this.err.usualLastNameError = validationIssues.find(el => el.penRequestBatchValidationFieldCode === 'USUALLAST')?.penRequestBatchValidationIssueTypeCode || '';
+            this.err.usualMiddleNamesError = validationIssues.find(el => el.penRequestBatchValidationFieldCode === 'USUALMID')?.penRequestBatchValidationIssueTypeCode || '';
+            this.err.birthDateError = validationIssues.find(el => el.penRequestBatchValidationFieldCode === 'BIRTHDATE')?.penRequestBatchValidationIssueTypeCode || '';
+            this.err.genderError = validationIssues.find(el => el.penRequestBatchValidationFieldCode === 'GENDER')?.penRequestBatchValidationIssueTypeCode || '';
+          } else {
+            // const studentResponse = await ApiService.apiAxios.post(ApiRoutes.studentRequest.ROOT_ENDPOINT + '/sdcSchoolCollection/' + this.sdcStudent.sdcSchoolCollectionID + '/createStudent', payload);
+            const studentResponse = await ApiService.apiAxios.post(Routes.student.ROOT_ENDPOINT, payload);
+            this.bestMatchPEN = studentResponse.data.pen;
+            this.newPenDetails = {
+              assignedPen: studentResponse.data.pen,
+              assignedstudentId: studentResponse.data.studentID
+            }
+            this.newPenText = `New PEN: ${this.bestMatchPEN} generated. Please update the student record.`;
+          }
+        } catch (e) {
+          console.error(e);
+          this.setFailureAlert('PEN could not be created, Please retry later.');
+        } finally {
+          this.isLoadingMatches = false;
+        }
+      }
+    },
+    validateForm() {
+      this.$refs?.studentDetailsForm?.validate();
+    }
+  }
+};
+</script>
+
+<style scoped>
+:deep(#dobPicker > div.dp__outer_menu_wrap.dp--menu-wrapper > div){
+  position: fixed;
+}
+</style>
diff --git a/frontend/src/utils/common.js b/frontend/src/utils/common.js
index f628840d1..ff40d60ff 100644
--- a/frontend/src/utils/common.js
+++ b/frontend/src/utils/common.js
@@ -99,6 +99,24 @@ export function getDemogValidationResults(student) {
   });
 }
 
+export function constructPenMatchObjectFromSdcStudent(student) {
+  return {
+    pen: student.studentPen,
+    localID: student.localID,
+    surname: student.legalLastName,
+    givenName: student.legalFirstName,
+    middleName: student.legalMiddleNames,
+    usualSurname: student.usualLastName,
+    usualGiven: student.usualFirstName,
+    usualMiddleName: student.usualMiddleNames,
+    dob: student.dob,
+    sex: student.gender,
+    enrolledGradeCode: student.enrolledGradeCode,
+    postal: student.postalCode,
+    mincode: student.mincode
+  };
+}
+
 /**
  * this function will only return the below structure
  String possibleMatchID;

From 0f86ccf0448176165147254c022ed9c46f73711f Mon Sep 17 00:00:00 2001
From: Avisha Sodhi <38086281+SodhiA1@users.noreply.github.com>
Date: Fri, 11 Oct 2024 15:54:23 -0700
Subject: [PATCH 2/2] Update SDCIssueNewPEN.vue

---
 frontend/src/components/data-collection/SDCIssueNewPEN.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/data-collection/SDCIssueNewPEN.vue b/frontend/src/components/data-collection/SDCIssueNewPEN.vue
index f7a4d0860..e3d188fbc 100644
--- a/frontend/src/components/data-collection/SDCIssueNewPEN.vue
+++ b/frontend/src/components/data-collection/SDCIssueNewPEN.vue
@@ -238,7 +238,7 @@
 
 <script>
 
-import {getDemogValidationResults, constructPenMatchObjectFromSdcStudent} from '../../utils/common';
+import {getDemogValidationResults} from '../../utils/common';
 import {Routes} from '@/utils/constants';
 import Spinner from '../common/Spinner.vue';
 import alertMixin from '@/mixins/alertMixin';