1
1
<template >
2
2
<div class =" sidebar" >
3
+ <confirmation :text =" confirmationText" v-if =" isConfirmationOpen" />
3
4
<div class =" sidebar-header" >
4
5
<h1 class =" top header-title" >Semester Schedule Builder</h1 >
5
6
<div class =" semester" >
71
72
<script lang="ts">
72
73
import { defineComponent } from ' vue' ;
73
74
import RequirementCourses from ' @/components/ScheduleGenerate/RequirementCourses.vue' ;
75
+ import Confirmation from ' @/components/Modals/Confirmation.vue' ;
74
76
75
77
export default defineComponent ({
76
78
data(): {
77
79
requirements: string [];
78
80
availableRequirements: Record <string , string >;
79
81
numberOfRequirements: number ;
82
+ isConfirmationOpen: boolean ;
83
+ confirmationText: string ;
80
84
} {
81
85
return {
82
86
requirements: [],
@@ -86,10 +90,13 @@ export default defineComponent({
86
90
' Liberal Studies' : ' Liberal Studies' ,
87
91
},
88
92
numberOfRequirements: 3 ,
93
+ isConfirmationOpen: false ,
94
+ confirmationText: ' ' ,
89
95
};
90
96
},
91
97
components: {
92
98
RequirementCourses ,
99
+ Confirmation ,
93
100
},
94
101
props: {
95
102
// current semester being generated for
@@ -99,6 +106,18 @@ export default defineComponent({
99
106
},
100
107
emits: [' openScheduleGenerateModal' ],
101
108
methods: {
109
+ openConfirmationModal(msg : string ) {
110
+ // Set text and display confirmation modal, then have it disappear after 3 seconds
111
+ this .confirmationText = msg ;
112
+ this .isConfirmationOpen = true ;
113
+
114
+ setTimeout (() => {
115
+ this .closeConfirmationModal ();
116
+ }, 2000 );
117
+ },
118
+ closeConfirmationModal() {
119
+ this .isConfirmationOpen = false ;
120
+ },
102
121
addRequirement() {
103
122
this .requirements = [... this .requirements , ' ' ];
104
123
},
@@ -112,11 +131,15 @@ export default defineComponent({
112
131
if (requirement !== ' ' ) this .availableRequirements [requirement ] = requirement ;
113
132
},
114
133
deleteRequirement(index : number ) {
134
+ const requirement = this .requirements [index ];
115
135
// add back to the availableRequirements record
116
- this .addAvailableRequirement (this . requirements [ index ] );
136
+ this .addAvailableRequirement (requirement );
117
137
118
138
// delete this requirement from list
119
139
this .requirements .splice (index , 1 );
140
+ this .openConfirmationModal (
141
+ ` Removed ${requirement === ' ' ? ' requirement' : requirement } from schedule builder `
142
+ );
120
143
},
121
144
openScheduleGenerateModal() {
122
145
this .$emit (' openScheduleGenerateModal' );
0 commit comments