Skip to content

Commit

Permalink
Merge pull request #240 from bcgov/stories/SS-771-remember-previously…
Browse files Browse the repository at this point in the history 
…-selected-view-on-duty-roster

SS-771: Remember previously selected view on Duty Roster screen
  • Loading branch information
@WadeBarnes
WadeBarnes authored Jun 28, 2024
2 parents f1dd3a0 + f418bc5 commit 25b611a
Show file tree
Hide file tree
Showing 2 changed files with 51 additions and 22 deletions.
61 changes: 39 additions & 22 deletions web/src/components/DutyRoster/components/DutyRosterHeader.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<b-navbar-nav>
<h3 style="width:11rem; margin-bottom: 0px;" class="text-white ml-2 mr-auto font-weight-normal">Duty Roster</h3>
</b-navbar-nav>
<b-navbar-nav v-if="activetab =='Day'">
<b-navbar-nav v-if="activeTab =='Day'">
<b-tabs nav-wrapper-class = "bg-primary text-dark"
active-nav-item-class="text-uppercase font-weight-bold text-warning bg-primary"
pills
Expand All @@ -24,15 +24,15 @@
<b-button class="mr-1 text-white" @click="zoomInOut(10)" variant="transparant"><b-icon-zoom-in /></b-button>
<b-button class="text-white" @click="zoomInOut(-10)" variant="transparant"><b-icon-zoom-out /></b-button>
</b-navbar-nav>
<b-navbar-nav v-if="activetab!='Day'">
<b-navbar-nav v-if="activeTab!='Day'">
<h3 style="width:8rem; margin-bottom: 0px;" class="text-white ml-2 mr-auto font-weight-normal"></h3>
</b-navbar-nav>
<b-navbar-nav :class="{'custom-navbar':true, 'full-view':sheriffFullview}">
<b-col class="my-1">
<b-row :style="activetab=='Day'?'width:17.75rem':'width:25.6rem'">
<b-row :style="activeTab=='Day'?'width:17.75rem':'width:25.6rem'">
<b-button style=" height: 2rem;" size="sm" variant="secondary" @click="previousDateRange" class="my-0 mx-1"><b-icon-chevron-left /></b-button>

<div v-if="activetab=='Day'" class="m-0 bg-white" style="padding:0.2rem 0.52rem; border-radius:3px; font-weight:bold;">{{selectedDate|beautify-date-weekday}}</div>
<div v-if="activeTab=='Day'" class="m-0 bg-white" style="padding:0.2rem 0.52rem; border-radius:3px; font-weight:bold;">{{selectedDate|beautify-date-weekday}}</div>
<div v-else class="m-0 p-1 bg-white" style=" border-radius:3px; font-weight:bold;">{{selectedDateBegin|beautify-date-weekday}} - {{selectedDateEnd|beautify-date-weekday}}</div>

<b-form-datepicker
Expand All @@ -53,8 +53,8 @@

</b-col>
</b-navbar-nav>
<b-navbar-nav v-if="activetab!='Day'" >
<b-tabs nav-wrapper-class = "bg-primary text-dark"
<b-navbar-nav v-if="activeTab!='Day'" >
<b-tabs v-model="activeHrsTabIndex" nav-wrapper-class = "bg-primary text-dark"
active-nav-item-class="text-uppercase font-weight-bold text-warning bg-primary"
pills
no-body
Expand All @@ -64,12 +64,11 @@
:key="'tab-24h-'+index"
:title="tabMapping"
v-on:click="tab12h24hChanged(tabMapping)"
v-bind:class="[ active24htab === tabMapping ? 'active p-0 my-0' : 'p-0 my-0' ]"
/>
</b-tabs>
</b-navbar-nav>
<b-navbar-nav v-if="!sheriffFullview">
<b-tabs nav-wrapper-class = "bg-primary text-dark my-1 p-0"
<b-tabs v-model="activeDayTabIndex" nav-wrapper-class = "bg-primary text-dark my-1 p-0"
active-nav-item-class="text-uppercase font-weight-bold text-warning bg-primary"
pills
no-body
Expand All @@ -79,7 +78,6 @@
:key="'tab-day'+index"
:title="tabMapping"
v-on:click="tabChanged(tabMapping)"
v-bind:class="[ activetab === tabMapping ? 'active p-0 my-0' : 'p-0 my-0' ]"
/>
</b-tabs>
</b-navbar-nav>
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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']
Expand Down Expand Up @@ -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();
}
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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])
Expand Down Expand Up @@ -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') {
Expand All @@ -876,7 +891,8 @@
}
public tabChanged(tabInfo){
this.activetab = tabInfo;
this.activeTab = tabInfo;
this.UpdateActiveTab(tabInfo);
this.loadNewDateRange();
}
Expand All @@ -886,7 +902,8 @@
this.UpdateView24h(false)
else
this.UpdateView24h(true)
this.$emit('change',this.activetab);
this.$emit('change',this.activeTab);
}
public tabMyTeamChanged(tabInfo){
Expand All @@ -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) {
Expand Down
12 changes: 12 additions & 0 deletions web/src/store/modules/DutyRosterInformation.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ class DutyRosterInformation extends VuexModule {
public dutyRosterAssignmentsWeek: assignmentCardWeekInfoType[] = [];

public selectedDuties: selectedDutyCardInfoType[] = [];

public activeTab: 'Day' | 'Week' = 'Day';

@Mutation
public setDutyRangeInfo(dutyRangeInfo): void {
Expand All @@ -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;
Expand Down

0 comments on commit 25b611a

Please sign in to comment.