Merge pull request #241 from bcgov/stories/ss-770-add-button-to-creat…

…e-assignment-duties-for-the-week SS-770: add a confirmation popup modal before populating duties for all assignments
bcgov · Jul 2, 2024 · eeb37f6 · eeb37f6
2 parents 25b611a + 4aa275d
commit eeb37f6
Showing 1 changed file with 25 additions and 1 deletion.
diff --git a/web/src/components/DutyRoster/components/DutyRosterHeader.vue b/web/src/components/DutyRoster/components/DutyRosterHeader.vue
@@ -88,7 +88,7 @@
 						style="max-height: 40px;" 
 						size="sm"
 						variant="white"						
-						@click="populateAllAssignmentDutiesForTheCurrentDateRange()" 
+						@click="confirmPopulateAllAssignmentDuties()" 
 						class="my-1 mr-3">
 						<b-icon icon="file-plus" font-scale="2.0" variant="white"/>
 					</b-button>						
@@ -347,6 +347,22 @@
                 >&times;</b-button>
             </template>
         </b-modal>
+
+		<b-modal v-model="showConfirmPopulateAllAssignmentDuties" header-class="bg-warning text-light">
+            <template v-slot:modal-title>
+				<h2 class="mb-0 text-light"> Confirm Populate Assignments </h2>
+			</template>
+			<h4 >Are you sure you want to populate Duties for all Assignments shown in the current date range?</h4>           
+            <template v-slot:modal-footer>
+                <b-button variant="success" @click="populateAllAssignmentDutiesForTheCurrentDateRange()">Confirm</b-button>
+				<b-button variant="primary" @click="showConfirmPopulateAllAssignmentDuties=false">Cancel</b-button>
+            </template>            
+            <template v-slot:modal-header-close>                 
+                <b-button variant="outline-warning" class="text-light closeButton" @click="showConfirmPopulateAllAssignmentDuties=false">
+				&times;
+				</b-button>
+            </template>
+        </b-modal>
 
 	</div>
 </template>
@@ -483,6 +499,8 @@
 		assignmentErrorMsg = '';
 		assignmentErrorMsgDesc = '';
 
+		showConfirmPopulateAllAssignmentDuties = false;
+
 		weekDayNames = ['sunday','monday','tuesday','wednesday','thursday','friday','saturday'];
 
         mounted() {
@@ -797,7 +815,13 @@
 				})
 		}
 
+		public confirmPopulateAllAssignmentDuties() {
+			this.showConfirmPopulateAllAssignmentDuties = true;
+		}
+
 		public populateAllAssignmentDutiesForTheCurrentDateRange() {
+			this.showConfirmPopulateAllAssignmentDuties = false;
+
 			// Get all assignment for the current location for the current date range
 			const assignmentsQueryString = `?locationId=${this.location.id}&start=${this.dutyRangeInfo.startDate}&end=${this.dutyRangeInfo.endDate}`;
 			const assignmentUrl = `api/assignment${assignmentsQueryString}`;