diff --git a/src/components/CscTimeRange.vue b/src/components/CscTimeRange.vue new file mode 100644 index 00000000..5248af98 --- /dev/null +++ b/src/components/CscTimeRange.vue @@ -0,0 +1,168 @@ + + + + diff --git a/src/components/pages/NewCallForward/CscCallForwardGroup.vue b/src/components/pages/NewCallForward/CscCallForwardGroup.vue index 24b30a1b..3aff6c8b 100644 --- a/src/components/pages/NewCallForward/CscCallForwardGroup.vue +++ b/src/components/pages/NewCallForward/CscCallForwardGroup.vue @@ -16,23 +16,20 @@ {{ $t('pages.newCallForward.conditionBtnLabelPrefix') }} {{ $t('pages.newCallForward.fromLabelShort') +'"'+ groupSourceset +'"' }} + + + - - - - {{ $t('pages.newCallForward.dateRangeShort') + groupTimeRange }} {{ $t('pages.newCallForward.conditionBtnLabelPrefix') }} + {{ $t('pages.newCallForward.conditionBtnLabelPrefix') }} + + {{ officeHoursLabelShort +' '+ readableOfficeHours }} + + + + + + {{ $t('pages.newCallForward.conditionBtnLabelPrefix') }} @@ -160,7 +182,7 @@ {{ $t('pages.newCallForward.fromLabel') }} {{ $t('pages.newCallForward.dateIsLabel') }} {{ $t('pages.newCallForward.dateRangeLabel') }} {{ $t('pages.newCallForward.weekdaysLabel') }} + + {{ $t('pages.newCallForward.officeHoursLabel') }} + + + + + + @@ -344,7 +385,6 @@ {{ $t('pages.newCallForward.addDestinationLabel') }} @@ -368,18 +408,17 @@ ref="numberForm" :no-parent-event="true" :class="{ 'csc-cf-popover-hide': toggleNumberForm }" - @show="showNewDestNumber()" > -
+
@@ -399,6 +438,7 @@ import CscNewCallForwardAddDestinationForm from './CscNewCallForwardAddDestinati import CscNewCallForwardEditSources from './CscNewCallForwardEditSources' import CscNewCallForwardAddSourcesetForm from './CscNewCallForwardAddSourcesetForm' import CscNewCallForwardAddWeekdayForm from './CscNewCallForwardAddWeekdayForm' +import CscNewCallForwardAddOfficeHoursForm from './CscNewCallForwardAddOfficeHoursForm' import CscNewCallForwardDestinationTypeForm from './CscNewCallForwardDestinationTypeForm' import CscNewCallForwardDateRange from './CscNewCallForwardDateRange' export default { @@ -410,6 +450,7 @@ export default { CscNewCallForwardEditSources, CscNewCallForwardAddSourcesetForm, CscNewCallForwardAddWeekdayForm, + CscNewCallForwardAddOfficeHoursForm, CscNewCallForwardDestinationTypeForm, CscNewCallForwardDateRange }, @@ -426,13 +467,8 @@ export default { data () { return { firstDestinationInCreation: false, - toggleGroup: true, isEnabled: true, toggleNumberForm: true, - toggleConditionFromForm: true, - toggleWeekdayPanel: true, - toggleIsDatePanel: true, - toggleIsRangePanel: true, groupIsLoading: false, sourceSet: null, sources: [], @@ -441,7 +477,8 @@ export default { action: null, enabled: false, day: null, - today: new Date().toString() + today: new Date().toString(), + sameOfficeHoursForAllDays: false } }, computed: { @@ -549,52 +586,53 @@ export default { ? `${this.$t('pages.newCallForward.weekdaysLabelShort')}` : `${this.$t('pages.newCallForward.weekdayLabelShort')}` }, + officeHoursLabelShort () { + return this.$tc('pages.newCallForward.officeHoursLabelShort', this.timeSet.times.length) + }, groupWeekdays () { - let retVal = '' let times = _.cloneDeep(_.get(this.timeSet, 'times', [])) times = times.sort((a, b) => (parseInt(a.wday) > parseInt(b.wday)) ? 1 : ((parseInt(b.wday) > parseInt(a.wday)) ? -1 : 0)) - times.forEach((time, index) => { - const separator = (index === times.length - 1) ? '' : ', ' - switch (time.wday) { - case '2': - retVal += `${this.$t('pages.callForward.times.monday')}` - break - case '3': - retVal += `${this.$t('pages.callForward.times.tuesday')}` - break - case '4': - retVal += `${this.$t('pages.callForward.times.wednesday')}` - break - case '5': - retVal += `${this.$t('pages.callForward.times.thursday')}` - break - case '6': - retVal += `${this.$t('pages.callForward.times.friday')}` - break - case '7': - retVal += `${this.$t('pages.callForward.times.saturday')}` - break - case '1': - retVal += `${this.$t('pages.callForward.times.sunday')}` - break + return this.parseWeekDays(times) + }, + readableOfficeHours () { + // TODO improve + // The goal here is to transform the timeranges from the endpoint format + // to a human readable format like: + // + // - Tuesday 12:30 - 14:30, Wednesday 19:12 - 12:45 in case of different + // timeranges in different days + // - Monday, Tuesday, Friday 13:39 - 14:45 in case of same timeranges in + // different days + + const times = _.cloneDeep(_.get(this.timeSet, 'times', [])) + let days = [] + for (const time of times) { + if (days[time.wday]) { + continue } - retVal += separator - }) - return retVal + days[time.wday] = times.filter(($time) => { + return $time.wday === time.wday + }).map(item => ' ' + item.hour.split('-')[0] + ':' + item.minute.split('-')[0] + '-' + item.hour.split('-')[1] + ':' + item.minute.split('-')[1]) + } + days = Object.keys(days).map((key) => { return { wday: key, times: days[key] } }) + this.checkOfficeHoursForAllDays(days.map(day => day.times)) + if (this.sameOfficeHoursForAllDays) { + return this.parseWeekDays(days) + ' ' + days[0].times + } else { + return days.map(day => this.parseWeekDays([day]) + day.times).join(', ') + } }, isWeekdays () { - const isWeekdays = this.timeSet && - this.timeSet.times && - this.timeSet.times.length > 0 && - this.timeSet.times[0].wday && - this.timeSet.times[0].wday > 0 - return isWeekdays + return this.timeSet && this.timeSet.times && this.timeSet.times.length > 0 && this.timeSet.times[0].wday !== null + }, + isOfficeHours () { + return this.isWeekdays && this.timeSet.times[0].hour !== null && this.timeSet.times[0].minute !== null }, isTempGroup () { return this.group.id.toString().includes('temp-') }, - isFirstDestInCreation () { - return this.group.id.toString() === this.getFirstDestinationInCreation + hasTimeset () { + return this.groupTimeset || this.isRange || this.isWeekdays }, toggleLabel () { return this.toggleDefaultNumber ? `${this.$t('pages.newCallForward.primarNumberEnabled')}` : `${this.$t('pages.newCallForward.primarNumberDisabled')}` @@ -651,13 +689,6 @@ export default { } }, methods: { - // we need to generate key because destinations have no id - genKey () { - return Math.random() - }, - showNewDestNumber () { - this.$refs.addDestinationForm.add() - }, async showNext () { switch (this.getSelectedDestinationType) { case 'destination': @@ -680,13 +711,8 @@ export default { } else { firstDestinationCmp.movePopoverToTop() } - firstDestinationCmp.$refs.destTypeForm.show() }, - setCondition (action) { - this.action = action - this.$refs.conditions.hide() - }, showConditionForm () { if (this.isTempGroup) { this.showFirstDestMenu() @@ -695,33 +721,22 @@ export default { const action = this.action switch (action) { case 'addFromCondition': - this.toggleConditionFromForm = false - this.$refs.onlineSourceset.show() + this.$refs.addSourcesetMenu.show() break case 'addDateIsCondition': - this.toggleIsDatePanel = false - this.$refs.dayWidgetFromMenu.show() + this.$refs.addDateFromMenu.show() break case 'addDateRangeCondition': - this.toggleIsRangePanel = false - this.$refs.daterangeFromMenu.show() + this.$refs.addDateRangeMenu.show() break case 'addWeekdayCondition': - this.toggleWeekdayPanel = false - this.$refs.weekdayPanel.show() + this.$refs.addWeekdayMenu.show() + break + case 'addOfficeHoursCondition': + this.$refs.officeHoursPanel.show() break } }, - showDestTypeForm () { - this.toggleNumberForm = true - this.$refs.selectDestinationType.add() - }, - showWeekdayEditForm () { - this.$refs.weekdayEditForm.add() - }, - getDestName (index) { - return 'destination' + index - }, getDestination (index) { const destination = { ...this.group.destinations[index] } if (index === 0) { @@ -740,30 +755,9 @@ export default { }) this.$store.dispatch('newCallForward/removeGroupLoader', this.group.id) }, - openConditionsPopover () { - this.$refs.conditions.show() - }, - showConditions () { - this.$refs.addCondition.add() - }, - showSourcesetForm () { - this.$refs.addSourceSet.add() - }, - showWeekdayPanel () { - this.$refs.weekdayForm.add() - }, - showSources () { - this.$refs.editSources.add() - }, - resetToggleCondition () { - this.toggleConditionFromForm = true - }, resetAction () { this.action = null }, - resetWeekdayCondition () { - this.toggleWeekdayPanel = true - }, async updateSourcesetNames () { const mappings = this.getMappings const groupMappingId = await this.$store.dispatch('newCallForward/getMappingIdByGroupName', this.group.name) @@ -860,11 +854,21 @@ export default { console.log(e) } }, - rangeChanged () { - this.$refs.daterange.show() - }, minDate (day) { return day >= date.formatDate(new Date(), 'YYYY/MM/DD') + }, + parseWeekDays (times) { + const weekDays = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'] + return times + .map(time => this.$t('pages.callForward.times.' + weekDays[Number(time.wday) - 1])) + .join(', ') + }, + checkOfficeHoursForAllDays (times) { + const weekdaysObj = _.groupBy(_.cloneDeep(this.times), 'wday') + this.sameOfficeHoursForAllDays = Object.keys(weekdaysObj).length > 1 && times.every(array => array.join() === times[0].join()) + }, + cloneTimes (times) { + return _.cloneDeep(times) } } } diff --git a/src/components/pages/NewCallForward/CscNewCallForwardAddDestinationForm.vue b/src/components/pages/NewCallForward/CscNewCallForwardAddDestinationForm.vue index d83b4ff7..9fc60cb8 100644 --- a/src/components/pages/NewCallForward/CscNewCallForwardAddDestinationForm.vue +++ b/src/components/pages/NewCallForward/CscNewCallForwardAddDestinationForm.vue @@ -1,6 +1,5 @@ + + + diff --git a/src/components/pages/NewCallForward/CscNewCallForwardAddSourcesetForm.vue b/src/components/pages/NewCallForward/CscNewCallForwardAddSourcesetForm.vue index fb822ae1..71cf451a 100644 --- a/src/components/pages/NewCallForward/CscNewCallForwardAddSourcesetForm.vue +++ b/src/components/pages/NewCallForward/CscNewCallForwardAddSourcesetForm.vue @@ -1,6 +1,5 @@