123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208 |
- <template>
- <NcSettingsSection :name="$t('dav', 'Availability')"
- :description="$t('dav', 'If you configure your working hours, other users will see when you are out of office when they book a meeting.')">
- <div class="time-zone">
- <strong>
- {{ $t('dav', 'Time zone:') }}
- </strong>
- <span class="time-zone-text">
- <NcTimezonePicker v-model="timezone" />
- </span>
- </div>
- <CalendarAvailability :slots.sync="slots"
- :loading="loading"
- :l10n-to="$t('dav', 'to')"
- :l10n-delete-slot="$t('dav', 'Delete slot')"
- :l10n-empty-day="$t('dav', 'No working hours set')"
- :l10n-add-slot="$t('dav', 'Add slot')"
- :l10n-monday="$t('dav', 'Monday')"
- :l10n-tuesday="$t('dav', 'Tuesday')"
- :l10n-wednesday="$t('dav', 'Wednesday')"
- :l10n-thursday="$t('dav', 'Thursday')"
- :l10n-friday="$t('dav', 'Friday')"
- :l10n-saturday="$t('dav', 'Saturday')"
- :l10n-sunday="$t('dav', 'Sunday')" />
- <NcCheckboxRadioSwitch :checked.sync="automated">
- {{ $t('dav', 'Automatically set user status to "Do not disturb" outside of availability to mute all notifications.') }}
- </NcCheckboxRadioSwitch>
- <NcButton :disabled="loading || saving"
- type="primary"
- @click="save">
- {{ $t('dav', 'Save') }}
- </NcButton>
- </NcSettingsSection>
- </template>
- <script>
- import { CalendarAvailability } from '@nextcloud/calendar-availability-vue'
- import { loadState } from '@nextcloud/initial-state'
- import {
- showError,
- showSuccess,
- } from '@nextcloud/dialogs'
- import {
- findScheduleInboxAvailability,
- getEmptySlots,
- saveScheduleInboxAvailability,
- } from '../service/CalendarService.js'
- import {
- enableUserStatusAutomation,
- disableUserStatusAutomation,
- } from '../service/PreferenceService.js'
- import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
- import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
- import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
- import NcTimezonePicker from '@nextcloud/vue/dist/Components/NcTimezonePicker.js'
- export default {
- name: 'Availability',
- components: {
- NcButton,
- NcCheckboxRadioSwitch,
- CalendarAvailability,
- NcSettingsSection,
- NcTimezonePicker,
- },
- data() {
- // Try to determine the current timezone, and fall back to UTC otherwise
- const defaultTimezoneId = (new Intl.DateTimeFormat())?.resolvedOptions()?.timeZone ?? 'UTC'
- return {
- loading: true,
- saving: false,
- timezone: defaultTimezoneId,
- slots: getEmptySlots(),
- automated: loadState('dav', 'user_status_automation') === 'yes',
- }
- },
- async mounted() {
- try {
- const slotData = await findScheduleInboxAvailability()
- if (!slotData) {
- console.info('no availability is set')
- this.slots = getEmptySlots()
- } else {
- const { slots, timezoneId } = slotData
- this.slots = slots
- if (timezoneId) {
- this.timezone = timezoneId
- }
- console.info('availability loaded', this.slots, this.timezoneId)
- }
- } catch (e) {
- console.error('could not load existing availability', e)
- showError(t('dav', 'Failed to load availability'))
- } finally {
- this.loading = false
- }
- },
- methods: {
- async save() {
- try {
- this.saving = true
- await saveScheduleInboxAvailability(this.slots, this.timezone)
- if (this.automated) {
- await enableUserStatusAutomation()
- } else {
- await disableUserStatusAutomation()
- }
- showSuccess(t('dav', 'Saved availability'))
- } catch (e) {
- console.error('could not save availability', e)
- showError(t('dav', 'Failed to save availability'))
- } finally {
- this.saving = false
- }
- },
- },
- }
- </script>
- <style lang="scss" scoped>
- .availability-day {
- padding: 0 10px 0 10px;
- position: absolute;
- }
- .availability-slots {
- display: flex;
- white-space: nowrap;
- }
- .availability-slot {
- display: flex;
- flex-direction: row;
- align-items: center;
- }
- .availability-slot-group {
- display: flex;
- flex-direction: column;
- }
- ::v-deep .mx-input-wrapper {
- width: 85px;
- }
- ::v-deep .mx-datepicker {
- width: 97px;
- }
- ::v-deep .multiselect {
- border: 1px solid var(--color-border-dark);
- width: 120px;
- }
- .time-zone {
- padding: 32px 12px 12px 0;
- }
- .grid-table {
- display: grid;
- margin-bottom: 32px;
- grid-column-gap: 24px;
- grid-row-gap: 6px;
- grid-template-columns: min-content min-content min-content;
- }
- .button {
- align-self: flex-end;
- }
- .label-weekday {
- position: relative;
- display: inline-flex;
- padding-top: 4px;
- }
- .delete-slot {
- background-color: transparent;
- border: none;
- padding-bottom: 12px;
- opacity: .5;
- &:hover {
- opacity: 1;
- }
- }
- .add-another {
- background-color: transparent;
- border: none;
- opacity: .5;
- display: inline-flex;
- padding: 0;
- margin: 0;
- margin-bottom: 3px;
- &:hover {
- opacity: 1;
- }
- }
- .to-text {
- padding-right: 12px;
- }
- .time-zone-text{
- padding-left: 22px;
- }
- .empty-content {
- color: var(--color-text-lighter);
- margin-top: 4px;
- }
- </style>
|