From f418bc5949cae213e1bd7cef678bbe42481e57b1 Mon Sep 17 00:00:00 2001 From: Hemanth Kona Date: Thu, 27 Jun 2024 14:17:57 -0700 Subject: [PATCH] SS-771: Remember previosly selected view on Duty Roster screen --- .../components/DutyRosterHeader.vue | 61 ++++++++++++------- .../store/modules/DutyRosterInformation.ts | 12 ++++ 2 files changed, 51 insertions(+), 22 deletions(-) diff --git a/web/src/components/DutyRoster/components/DutyRosterHeader.vue b/web/src/components/DutyRoster/components/DutyRosterHeader.vue index 1b674653..6078447a 100644 --- a/web/src/components/DutyRoster/components/DutyRosterHeader.vue +++ b/web/src/components/DutyRoster/components/DutyRosterHeader.vue @@ -5,7 +5,7 @@

Duty Roster

 - + - +

- + -
{{selectedDate|beautify-date-weekday}}
+
{{selectedDate|beautify-date-weekday}}
{{selectedDateBegin|beautify-date-weekday}} - {{selectedDateEnd|beautify-date-weekday}}
 - - + - @@ -378,7 +376,16 @@ public UpdateDutyRangeInfo!: (newDutyRangeInfo: dutyRangeInfoType) => void @dutyState.Action - public UpdateView24h!: (newView24h: boolean) => void + public UpdateView24h!: (newView24h: boolean) => void; + + @dutyState.State + public activeTab!: 'Day' | 'Week'; + + @dutyState.State + public view24h!: boolean; + + @dutyState.Action + public UpdateActiveTab!: (activeTab: 'Day' | 'Week') => void; @commonState.State public userDetails!: userInfoType; @@ -409,9 +416,10 @@ active24htab = '12h'; tabs12h24h = ['12h','24h']; + activeHrsTabIndex = 0; - activetab = 'Day'; tabs =['Day', 'Week'] + activeDayTabIndex = 0; activeMyTeamTab = 'Assignments View' tabsMyTeamToggle = ['Assignments View', 'My Team View'] @@ -478,8 +486,15 @@ weekDayNames = ['sunday','monday','tuesday','wednesday','thursday','friday','saturday']; mounted() { - this.runMethod.$on('addassign', this.addAssignment) - this.selectedDate = moment().format().substring(0,10); + this.runMethod.$on('addassign', this.addAssignment); + + this.active24htab = this.view24h ? '24h': '12h'; + this.activeHrsTabIndex = this.view24h ? 1 : 0; + + this.activeDayTabIndex = this.activeTab === 'Week' ? 1 : 0; + + this.selectedDate = this.dutyRangeInfo?.startDate ? this.dutyRangeInfo.startDate : moment().format().substring(0,10); + this.loadNewDateRange(); } @@ -772,7 +787,7 @@ .then(response => { if(response.data){ this.confirmedCloseAssignmentWindow(); - this.$emit('change',this.activetab); + this.$emit('change',this.activeTab); } }, err => { const errMsg = err.response.data; @@ -804,7 +819,7 @@ const splitStartTime = assignment.start.split(":"); const splitEndTime = assignment.end.split(":"); - if (this.activetab === 'Day') { + if (this.activeTab === 'Day') { const startDate = moment(this.dutyRangeInfo.startDate) .tz(this.location.timezone) .hours(splitStartTime[0]) @@ -863,7 +878,7 @@ const dutyRosterUrl = 'api/dutyroster'; // Construct duties for the date range this.$http.post(dutyRosterUrl, dutyRosters).then((res) => { - this.$emit('change', this.activetab); + this.$emit('change', this.activeTab); }, err => { this.errorText = err.response.statusText+' '+err.response.status + ' - ' + moment().format(); if (err.response.status != '401') { @@ -876,7 +891,8 @@ } public tabChanged(tabInfo){ - this.activetab = tabInfo; + this.activeTab = tabInfo; + this.UpdateActiveTab(tabInfo); this.loadNewDateRange(); } @@ -886,7 +902,8 @@ this.UpdateView24h(false) else this.UpdateView24h(true) - this.$emit('change',this.activetab); + + this.$emit('change',this.activeTab); } public tabMyTeamChanged(tabInfo){ @@ -906,25 +923,25 @@ } public nextDateRange() { - const days =(this.activetab == 'Day')? 1 :7; + const days =(this.activeTab == 'Day')? 1 :7; this.selectedDate = moment(this.selectedDate).add(days, 'days').format().substring(0,10); this.loadNewDateRange(); } public previousDateRange() { - const days =(this.activetab == 'Day')? 1 :7; + const days =(this.activeTab == 'Day')? 1 :7; this.selectedDate = moment(this.selectedDate).subtract(days, 'days').format().substring(0,10); this.loadNewDateRange(); } public loadNewDateRange() { - const dateType = (this.activetab == 'Day')?'day':'week' + const dateType = (this.activeTab == 'Day')?'day':'week' this.selectedDateBegin = moment(this.selectedDate).startOf(dateType).format() this.selectedDateEnd = moment(this.selectedDate).endOf(dateType).format(); const dateRange = {startDate: this.selectedDateBegin, endDate: this.selectedDateEnd} this.UpdateDutyRangeInfo(dateRange); - this.$emit('change',this.activetab); + this.$emit('change',this.activeTab); } public timeFormat(value , event) { diff --git a/web/src/store/modules/DutyRosterInformation.ts b/web/src/store/modules/DutyRosterInformation.ts index d8e025cf..2a2d1cd2 100644 --- a/web/src/store/modules/DutyRosterInformation.ts +++ b/web/src/store/modules/DutyRosterInformation.ts @@ -20,6 +20,8 @@ class DutyRosterInformation extends VuexModule { public dutyRosterAssignmentsWeek: assignmentCardWeekInfoType[] = []; public selectedDuties: selectedDutyCardInfoType[] = []; + + public activeTab: 'Day' | 'Week' = 'Day'; @Mutation public setDutyRangeInfo(dutyRangeInfo): void { @@ -31,6 +33,16 @@ class DutyRosterInformation extends VuexModule { this.context.commit('setDutyRangeInfo', newDutyRangeInfo) } + @Mutation + public setActiveTab(activeTab): void { + this.activeTab = activeTab + } + + @Action + public UpdateActiveTab(activeTab): void { + this.context.commit('setActiveTab', activeTab) + } + @Mutation public setShiftAvailabilityInfo(shiftAvailabilityInfo): void { this.shiftAvailabilityInfo = shiftAvailabilityInfo;