opensourcemirror
/
nextcloud-calendar
mirror of https://github.com/nextcloud/calendar.git
1
0
Fork 0
Code Issues Releases Wiki Activity

use eslint-config-nextcloud 

Signed-off-by: Georg Ehrke <developer@georgehrke.com>
This commit is contained in:
Georg Ehrke 2019-10-19 13:51:18 +02:00
parent e103356663
commit 62322a722d
No known key found for this signature in database
GPG Key ID: 9D98FD9380A1CB43
68 changed files with 511 additions and 781 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
.eslintrc.js
View File

@ -1,78 +1,5 @@
module.exports = { module.exports = {
root: true,
env: {
browser: true,
es6: true,
node: true,
jest: true
},
globals: {
dayNames: true,
dayNamesMin: true,
monthNames: true,
monthNamesShort: true,
},
parserOptions: {
parser: 'babel-eslint'
},
extends: [ extends: [
'eslint:recommended', 'nextcloud'
'plugin:node/recommended', ]
'plugin:vue/essential',
'plugin:vue/recommended',
'standard'
],
plugins: ['vue', 'node'],
rules: {
// space before function ()
'space-before-function-paren': ['error', 'never'],
// curly braces always space
'object-curly-spacing': ['error', 'always'],
// stay consistent with array brackets
'array-bracket-newline': ['error', 'consistent'],
// 1tbs brace style
'brace-style': 'error',
// tabs only
indent: ['error', 'tab'],
'no-tabs': 0,
'vue/html-indent': ['error', 'tab'],
// only debug console
'no-console': ['error', { allow: ['error', 'warn', 'debug'] }],
// classes blocks
'padded-blocks': ['error', { classes: 'always' }],
// always add a trailing comma, for diff readability
'comma-dangle': ["error", "only-multiline"],
// always have the operator in front
'operator-linebreak': ['error', 'before'],
// ternary on multiline
'multiline-ternary': ['error', 'always-multiline'],
// force proper JSDocs
'valid-jsdoc': [2, {
'prefer': {
'return': 'returns'
},
'requireReturn': false,
'requireReturnDescription': false
}],
// es6 import/export and require
'node/no-unpublished-require': ['off'],
'node/no-unsupported-features/es-syntax': ['off'],
'node/no-unsupported-features/es-builtins': ['off'],
// space before self-closing elements
'vue/html-closing-bracket-spacing': 'error',
// code spacing with attributes
'vue/max-attributes-per-line': [
'error',
{
singleline: 3,
multiline: {
max: 3,
allowFirstLine: true
}
}
],
"node/no-missing-import": ["error", {
"tryExtensions": [".js", ".vue"]
}]
}
}; };

36
css/app-sidebar.scss
View File

@ -491,24 +491,6 @@
} }
} }
.calendar-picker-option {
width: 100%;
display: flex;
align-items: center;
&__color-indicator {
width: 12px;
height: 12px;
border-radius: 50%;
border: none;
margin-right: 8px;
}
&__avatar {
margin-left: auto;
}
}
.illustration-header { .illustration-header {
max-height: 150px; max-height: 150px;
height: 150px; height: 150px;
@ -601,3 +583,21 @@
border-bottom-color: var(--color-background-dark); border-bottom-color: var(--color-background-dark);
} }
} }
.calendar-picker-option {
width: 100%;
display: flex;
align-items: center;
&__color-indicator {
width: 12px;
height: 12px;
border-radius: 50%;
border: none;
margin-right: 8px;
}
&__avatar {
margin-left: auto;
}
}

21
package-lock.json generated
View File

@ -6400,6 +6400,12 @@
} }
} }
}, },
"eslint-config-nextcloud": {
"version": "0.0.6",
"resolved": "https://registry.npmjs.org/eslint-config-nextcloud/-/eslint-config-nextcloud-0.0.6.tgz",
"integrity": "sha512-ktCzXVA8GrqZVljutkBKOq2hgKvzKyLhNCAB5bCjdmMo7DIky2ZYeMtDmiEUZCPoXbSJY0kyvnZPbcN4VYzyCg==",
"dev": true
},
"eslint-config-standard": { "eslint-config-standard": {
"version": "12.0.0", "version": "12.0.0",
"resolved": "http://registry.npmjs.org/eslint-config-standard/-/eslint-config-standard-12.0.0.tgz", "resolved": "http://registry.npmjs.org/eslint-config-standard/-/eslint-config-standard-12.0.0.tgz",
@ -6689,6 +6695,15 @@
} }
} }
}, },
"eslint-plugin-nextcloud": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/eslint-plugin-nextcloud/-/eslint-plugin-nextcloud-0.3.0.tgz",
"integrity": "sha512-LUD2qdirGL0BRt4uaMDGxen17mWVq9JwuGDt7P7Celz7bzdu0X48RrS8mhXn9e0w78+nYN5kPoULG2Bw04r4HA==",
"dev": true,
"requires": {
"requireindex": "~1.2.0"
}
},
"eslint-plugin-node": { "eslint-plugin-node": {
"version": "10.0.0", "version": "10.0.0",
"resolved": "https://registry.npmjs.org/eslint-plugin-node/-/eslint-plugin-node-10.0.0.tgz", "resolved": "https://registry.npmjs.org/eslint-plugin-node/-/eslint-plugin-node-10.0.0.tgz",
@ -12392,6 +12407,12 @@
"integrity": "sha1-eZlTn8ngR6N5KPoZb44VY9q9Nt4=", "integrity": "sha1-eZlTn8ngR6N5KPoZb44VY9q9Nt4=",
"dev": true "dev": true
}, },
"requireindex": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/requireindex/-/requireindex-1.2.0.tgz",
"integrity": "sha512-L9jEkOi3ASd9PYit2cwRfyppc9NoABujTP8/5gFcbERmo5jUoAKovIC3fsF17pkTnGsrByysqX+Kxd2OTNI1ww==",
"dev": true
},
"resolve": { "resolve": {
"version": "1.8.1", "version": "1.8.1",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.8.1.tgz", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.8.1.tgz",

2
package.json
View File

@ -83,10 +83,12 @@
"browserslist-config-nextcloud": "0.0.1", "browserslist-config-nextcloud": "0.0.1",
"css-loader": "^3.2.0", "css-loader": "^3.2.0",
"eslint": "^5.16.0", "eslint": "^5.16.0",
"eslint-config-nextcloud": "0.0.6",
"eslint-config-standard": "^12.0.0", "eslint-config-standard": "^12.0.0",
"eslint-friendly-formatter": "^4.0.1", "eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^3.0.2", "eslint-loader": "^3.0.2",
"eslint-plugin-import": "^2.18.2", "eslint-plugin-import": "^2.18.2",
"eslint-plugin-nextcloud": "^0.3.0",
"eslint-plugin-node": "^10.0.0", "eslint-plugin-node": "^10.0.0",
"eslint-plugin-promise": "^4.2.1", "eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.1", "eslint-plugin-standard": "^4.0.1",

14
src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderDatePicker.vue
View File

@ -27,17 +27,15 @@
class="datepicker-button-section__previous button icon icon-leftarrow" class="datepicker-button-section__previous button icon icon-leftarrow"
:title="previousLabel" :title="previousLabel"
type="button" type="button"
@click="navigateToPreviousTimeRange" @click="navigateToPreviousTimeRange" />
/>
<button <button
class="datepicker-button-section__datepicker-label button datepicker-label" class="datepicker-button-section__datepicker-label button datepicker-label"
@click.stop.prevent="toggleDatepicker" @click.stop.prevent="toggleDatepicker"
@mousedown.stop.prevent="doNothing" @mousedown.stop.prevent="doNothing"
@mouseup.stop.prevent="doNothing" @mouseup.stop.prevent="doNothing">
>
{{ selectedDate | formatDateRage(view) }} {{ selectedDate | formatDateRage(view) }}
</button> </button>
<datetime-picker <DatetimePicker
ref="datepicker" ref="datepicker"
class="datepicker-button-section__datepicker" class="datepicker-button-section__datepicker"
:first-day-of-week="firstDay" :first-day-of-week="firstDay"
@ -48,15 +46,13 @@
:not-after="maximumDate" :not-after="maximumDate"
:value="selectedDate" :value="selectedDate"
:input-attr="inputItemAttributes" :input-attr="inputItemAttributes"
@change="navigateToDate" @change="navigateToDate" />
/>
<button <button
:aria-label="nextLabel" :aria-label="nextLabel"
class="datepicker-button-section__next button icon icon-rightarrow" class="datepicker-button-section__next button icon icon-rightarrow"
:title="nextLabel" :title="nextLabel"
type="button" type="button"
@click="navigateToNextTimeRange" @click="navigateToNextTimeRange" />
/>
</div> </div>
</template> </template>

3
src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderTodayButton.vue
View File

@ -26,8 +26,7 @@
:aria-label="title" :aria-label="title"
class="button" class="button"
:title="title" :title="title"
@click="today()" @click="today()">
>
{{ $t('calendar', 'Today') }} {{ $t('calendar', 'Today') }}
</button> </button>
</div> </div>

46
src/components/AppNavigation/CalendarList.vue
View File

@ -20,40 +20,38 @@
--> -->
<template> <template>
<transition-group v-if="!isPublic" id="calendars-list" name="list" <transition-group v-if="!isPublic"
tag="ul" id="calendars-list"
> name="list"
<calendar-list-new tag="ul">
:key="newCalendarKey" :disabled="loadingCalendars" <CalendarListNew
/> :key="newCalendarKey"
<calendar-list-item-loading-placeholder v-if="loadingCalendars" :key="loadingKeyCalendars" /> :disabled="loadingCalendars" />
<calendar-list-item <CalendarListItemLoadingPlaceholder v-if="loadingCalendars" :key="loadingKeyCalendars" />
<CalendarListItem
v-for="calendar in calendars" v-for="calendar in calendars"
:key="calendar.id" :key="calendar.id"
:calendar="calendar" :calendar="calendar" />
/>
<AppNavigationSpacer <AppNavigationSpacer
:key="spacerKey" :key="spacerKey" />
/>
<subscription-list-new :key="newSubscriptionKey" :disabled="loadingCalendars" /> <SubscriptionListNew :key="newSubscriptionKey" :disabled="loadingCalendars" />
<calendar-list-item-loading-placeholder v-if="loadingCalendars" :key="loadingKeySubscriptions" /> <CalendarListItemLoadingPlaceholder v-if="loadingCalendars" :key="loadingKeySubscriptions" />
<calendar-list-item <CalendarListItem
v-for="calendar in subscriptions" v-for="calendar in subscriptions"
:key="calendar.id" :key="calendar.id"
:calendar="calendar" :calendar="calendar" />
/>
</transition-group> </transition-group>
<transition-group v-else id="calendars-list" name="list" <transition-group v-else
tag="ul" id="calendars-list"
> name="list"
<calendar-list-item-loading-placeholder v-if="loadingCalendars" :key="loadingKeySubscriptions" /> tag="ul">
<public-calendar-list-item <CalendarListItemLoadingPlaceholder v-if="loadingCalendars" :key="loadingKeySubscriptions" />
<PublicCalendarListItem
v-for="calendar in subscriptions" v-for="calendar in subscriptions"
:key="calendar.id" :key="calendar.id"
:calendar="calendar" :calendar="calendar" />
/>
</transition-group> </transition-group>
</template> </template>

63
src/components/AppNavigation/CalendarList/CalendarListItem.vue
View File

@ -25,19 +25,16 @@
:loading="calendar.loading" :loading="calendar.loading"
:title="calendar.displayName || $t('calendar', 'Untitled calendar')" :title="calendar.displayName || $t('calendar', 'Untitled calendar')"
:class="{deleted: !!deleteTimeout, disabled: !calendar.enabled, 'open-sharing': shareMenuOpen}" :class="{deleted: !!deleteTimeout, disabled: !calendar.enabled, 'open-sharing': shareMenuOpen}"
@click.prevent.stop="toggleEnabled" @click.prevent.stop="toggleEnabled">
>
<AppNavigationIconBullet <AppNavigationIconBullet
v-if="calendar.enabled" v-if="calendar.enabled"
slot="icon" slot="icon"
:color="calendar.color" :color="calendar.color"
@click.prevent.stop="toggleEnabled" @click.prevent.stop="toggleEnabled" />
/>
<AppNavigationDisabledCalendarIconBullet <AppNavigationDisabledCalendarIconBullet
v-if="!calendar.enabled" v-if="!calendar.enabled"
slot="icon" slot="icon"
@click.prevent.stop="toggleEnabled" @click.prevent.stop="toggleEnabled" />
/>
<template v-if="!deleteTimeout" slot="counter"> <template v-if="!deleteTimeout" slot="counter">
<Actions v-if="showSharingIcon"> <Actions v-if="showSharingIcon">
@ -54,27 +51,23 @@
<ActionButton <ActionButton
v-if="showRenameLabel" v-if="showRenameLabel"
icon="icon-rename" icon="icon-rename"
@click.prevent.stop="openRenameInput" @click.prevent.stop="openRenameInput">
>
{{ $t('calendar', 'Edit name') }} {{ $t('calendar', 'Edit name') }}
</ActionButton> </ActionButton>
<ActionInput <ActionInput
v-if="showRenameInput" v-if="showRenameInput"
icon="icon-rename" icon="icon-rename"
:value="calendar.displayName" :value="calendar.displayName"
@submit.prevent.stop="saveRenameInput" @submit.prevent.stop="saveRenameInput" />
/>
<ActionText <ActionText
v-if="showRenameSaving" v-if="showRenameSaving"
icon="icon-loading-small" icon="icon-loading-small">
>
{{ $t('calendar', 'Saving name ...') }} {{ $t('calendar', 'Saving name ...') }}
</ActionText> </ActionText>
<ActionButton <ActionButton
v-if="showColorLabel" v-if="showColorLabel"
icon="icon-rename" icon="icon-rename"
@click.prevent.stop="openColorInput" @click.prevent.stop="openColorInput">
>
{{ $t('calendar', 'Edit color') }} {{ $t('calendar', 'Edit color') }}
</ActionButton> </ActionButton>
<ActionInput <ActionInput
@ -82,38 +75,32 @@
icon="icon-rename" icon="icon-rename"
:value="calendar.color" :value="calendar.color"
type="color" type="color"
@submit.prevent.stop="saveColorInput" @submit.prevent.stop="saveColorInput" />
/>
<ActionText <ActionText
v-if="showColorSaving" v-if="showColorSaving"
icon="icon-loading-small" icon="icon-loading-small">
>
{{ $t('calendar', 'Saving color ...') }} {{ $t('calendar', 'Saving color ...') }}
</ActionText> </ActionText>
<ActionButton <ActionButton
icon="icon-clippy" icon="icon-clippy"
@click.stop.prevent="copyLink" @click.stop.prevent="copyLink">
>
{{ $t('calendar', 'Copy private link') }} {{ $t('calendar', 'Copy private link') }}
</ActionButton> </ActionButton>
<ActionLink <ActionLink
icon="icon-download" icon="icon-download"
target="_blank" target="_blank"
:href="downloadUrl" :href="downloadUrl"
:title="$t('calendar', 'Download')" :title="$t('calendar', 'Download')" />
/>
<ActionButton <ActionButton
v-if="calendar.isSharedWithMe" v-if="calendar.isSharedWithMe"
icon="icon-delete" icon="icon-delete"
@click.prevent.stop="deleteCalendar" @click.prevent.stop="deleteCalendar">
>
{{ $t('calendar', 'Unshare from me') }} {{ $t('calendar', 'Unshare from me') }}
</ActionButton> </ActionButton>
<ActionButton <ActionButton
v-if="!calendar.isSharedWithMe" v-if="!calendar.isSharedWithMe"
icon="icon-delete" icon="icon-delete"
@click.prevent.stop="deleteCalendar" @click.prevent.stop="deleteCalendar">
>
{{ $t('calendar', 'Delete') }} {{ $t('calendar', 'Delete') }}
</ActionButton> </ActionButton>
</template> </template>
@ -122,26 +109,26 @@
<ActionButton <ActionButton
v-if="calendar.isSharedWithMe" v-if="calendar.isSharedWithMe"
icon="icon-history" icon="icon-history"
@click.prevent.stop="cancelDeleteCalendar" @click.prevent.stop="cancelDeleteCalendar">
>
{{ $n('calendar', 'Unsharing the calendar in {countdown} second', 'Unsharing the calendar in {countdown} seconds', countdown, { countdown }) }} {{ $n('calendar', 'Unsharing the calendar in {countdown} second', 'Unsharing the calendar in {countdown} seconds', countdown, { countdown }) }}
</ActionButton> </ActionButton>
<ActionButton <ActionButton
v-if="!calendar.isSharedWithMe" v-if="!calendar.isSharedWithMe"
icon="icon-history" icon="icon-history"
@click.prevent.stop="cancelDeleteCalendar" @click.prevent.stop="cancelDeleteCalendar">
>
{{ $n('calendar', 'Deleting the calendar in {countdown} second', 'Deleting the calendar in {countdown} seconds', countdown, { countdown }) }} {{ $n('calendar', 'Deleting the calendar in {countdown} second', 'Deleting the calendar in {countdown} seconds', countdown, { countdown }) }}
</ActionButton> </ActionButton>
</template> </template>
<template v-if="!deleteTimeout"> <template v-if="!deleteTimeout">
<div v-show="shareMenuOpen" class="sharing-section"> <div v-show="shareMenuOpen" class="sharing-section">
<calendar-list-item-sharing-search v-if="calendar.canBeShared" :calendar="calendar" /> <CalendarListItemSharingSearch v-if="calendar.canBeShared" :calendar="calendar" />
<calendar-list-item-sharing-publish-item v-if="calendar.canBePublished" :calendar="calendar" /> <CalendarListItemSharingPublishItem v-if="calendar.canBePublished" :calendar="calendar" />
<calendar-list-item-sharing-share-item v-for="sharee in calendar.shares" v-show="shareMenuOpen" :key="sharee.uri" <CalendarListItemSharingShareItem v-for="sharee in calendar.shares"
:sharee="sharee" :calendar="calendar" v-show="shareMenuOpen"
/> :key="sharee.uri"
:sharee="sharee"
:calendar="calendar" />
</div> </div>
</template> </template>
</AppNavigationItem> </AppNavigationItem>
@ -150,6 +137,7 @@
<script> <script>
import { import {
Avatar, Avatar,
Actions,
ActionButton, ActionButton,
ActionInput, ActionInput,
ActionLink, ActionLink,
@ -171,6 +159,7 @@ export default {
name: 'CalendarListItem', name: 'CalendarListItem',
components: { components: {
Avatar, Avatar,
Actions,
ActionButton, ActionButton,
ActionInput, ActionInput,
ActionLink, ActionLink,
@ -317,7 +306,7 @@ export default {
} }
return '' return ''
}, }
}, },
methods: { methods: {
/** /**
@ -490,7 +479,7 @@ export default {
this.showColorInput = true this.showColorInput = true
this.showColorSaving = false this.showColorSaving = false
}) })
}, }
} }
} }
</script> </script>

57
src/components/AppNavigation/CalendarList/CalendarListItemSharingPublishItem.vue
View File

@ -22,8 +22,7 @@
<template> <template>
<AppNavigationItem <AppNavigationItem
:title="$t('calendar', 'Share link')" :title="$t('calendar', 'Share link')"
:menu-open.sync="menuOpen" :menu-open.sync="menuOpen">
>
<template slot="icon"> <template slot="icon">
<div :class="{published: isPublished, 'icon-public': !isPublished, 'icon-public-white': isPublished}" class="avatar" /> <div :class="{published: isPublished, 'icon-public': !isPublished, 'icon-public-white': isPublished}" class="avatar" />
</template> </template>
@ -32,15 +31,13 @@
<ActionButton <ActionButton
v-if="!publishingCalendar" v-if="!publishingCalendar"
icon="icon-add" icon="icon-add"
@click.prevent.stop="publishCalendar" @click.prevent.stop="publishCalendar">
>
{{ $t('calendar', 'Publish calendar') }} {{ $t('calendar', 'Publish calendar') }}
</ActionButton> </ActionButton>
<ActionButton <ActionButton
v-if="publishingCalendar" v-if="publishingCalendar"
icon="icon-loading-small" icon="icon-loading-small"
:disabled="true" :disabled="true">
>
{{ $t('calendar', 'Publishing calendar') }} {{ $t('calendar', 'Publishing calendar') }}
</ActionButton> </ActionButton>
</template> </template>
@ -49,8 +46,7 @@
<Actions> <Actions>
<ActionButton <ActionButton
icon="icon-clippy" icon="icon-clippy"
@click.prevent.stop="copyPublicLink" @click.prevent.stop="copyPublicLink">
>
{{ $t('calendar', 'Copy public link') }} {{ $t('calendar', 'Copy public link') }}
</ActionButton> </ActionButton>
</Actions> </Actions>
@ -59,85 +55,72 @@
<ActionButton <ActionButton
v-if="showEMailLabel" v-if="showEMailLabel"
icon="icon-mail" icon="icon-mail"
@click.prevent.stop="openEMailLinkInput" @click.prevent.stop="openEMailLinkInput">
>
{{ $t('calendar', 'Send link to calendar via email') }} {{ $t('calendar', 'Send link to calendar via email') }}
</ActionButton> </ActionButton>
<ActionInput <ActionInput
v-if="showEMailInput" v-if="showEMailInput"
icon="icon-mail" icon="icon-mail"
@submit.prevent.stop="sendLinkViaEMail" @submit.prevent.stop="sendLinkViaEMail" />
/>
<ActionText <ActionText
v-if="showEMailSending" v-if="showEMailSending"
icon="icon-loading-small" icon="icon-loading-small">
>
{{ $t('calendar', 'Sending email ...') }} {{ $t('calendar', 'Sending email ...') }}
</ActionText> </ActionText>
<ActionButton <ActionButton
v-if="showCopySubscriptionLinkLabel" v-if="showCopySubscriptionLinkLabel"
icon="icon-calendar-dark" icon="icon-calendar-dark"
@click.prevent.stop="copySubscriptionLink" @click.prevent.stop="copySubscriptionLink">
>
{{ $t('calendar', 'Copy subscription link') }} {{ $t('calendar', 'Copy subscription link') }}
</ActionButton> </ActionButton>
<ActionText <ActionText
v-if="showCopySubscriptionLinkSpinner" v-if="showCopySubscriptionLinkSpinner"
icon="icon-loading-small" icon="icon-loading-small">
>
{{ $t('calendar', 'Copying link ...') }} {{ $t('calendar', 'Copying link ...') }}
</ActionText> </ActionText>
<ActionText <ActionText
v-if="showCopySubscriptionLinkSuccess" v-if="showCopySubscriptionLinkSuccess"
icon="icon-calendar-dark" icon="icon-calendar-dark">
>
{{ $t('calendar', 'Copied link') }} {{ $t('calendar', 'Copied link') }}
</ActionText> </ActionText>
<ActionText <ActionText
v-if="showCopySubscriptionLinkError" v-if="showCopySubscriptionLinkError"
icon="icon-calendar-dark" icon="icon-calendar-dark">
>
{{ $t('calendar', 'Could not copy link') }} {{ $t('calendar', 'Could not copy link') }}
</ActionText> </ActionText>
<ActionButton <ActionButton
v-if="showCopyEmbedCodeLinkLabel" v-if="showCopyEmbedCodeLinkLabel"
icon="icon-embed" icon="icon-embed"
@click.prevent.stop="copyEmbedCode" @click.prevent.stop="copyEmbedCode">
>
{{ $t('calendar', 'Copy embedding code') }} {{ $t('calendar', 'Copy embedding code') }}
</ActionButton> </ActionButton>
<ActionText <ActionText
v-if="showCopyEmbedCodeLinkSpinner" v-if="showCopyEmbedCodeLinkSpinner"
icon="icon-loading-small" icon="icon-loading-small">
>
{{ $t('calendar', 'Copying code ...') }} {{ $t('calendar', 'Copying code ...') }}
</ActionText> </ActionText>
<ActionText <ActionText
v-if="showCopyEmbedCodeLinkSuccess" v-if="showCopyEmbedCodeLinkSuccess"
icon="icon-embed" icon="icon-embed">
>
{{ $t('calendar', 'Copied code') }} {{ $t('calendar', 'Copied code') }}
</ActionText> </ActionText>
<ActionText <ActionText
v-if="showCopyEmbedCodeLinkError" v-if="showCopyEmbedCodeLinkError"
icon="icon-embed" icon="icon-embed">
>
{{ $t('calendar', 'Could not copy code') }} {{ $t('calendar', 'Could not copy code') }}
</ActionText> </ActionText>
<ActionButton <ActionButton
v-if="!unpublishingCalendar" v-if="!unpublishingCalendar"
icon="icon-delete" icon="icon-delete"
@click.prevent.stop="unpublishCalendar" @click.prevent.stop="unpublishCalendar">
>
{{ $t('calendar', 'Delete share link') }} {{ $t('calendar', 'Delete share link') }}
</ActionButton> </ActionButton>
<ActionText <ActionText
v-if="unpublishingCalendar" v-if="unpublishingCalendar"
icon="icon-loading-small" icon="icon-loading-small">
>
{{ $t('calendar', 'Deleting share link ...') }} {{ $t('calendar', 'Deleting share link ...') }}
</ActionText> </ActionText>
</template> </template>
@ -146,6 +129,7 @@
<script> <script>
import { import {
Actions,
ActionButton, ActionButton,
ActionInput, ActionInput,
ActionText, ActionText,
@ -160,6 +144,7 @@ import {
export default { export default {
name: 'CalendarListItemSharingPublishItem', name: 'CalendarListItemSharingPublishItem',
components: { components: {
Actions,
ActionButton, ActionButton,
ActionInput, ActionInput,
ActionText, ActionText,
@ -198,13 +183,13 @@ export default {
// delete public link // delete public link
unpublishingCalendar: false, unpublishingCalendar: false,
// Status of actions menu: // Status of actions menu:
menuOpen: false, menuOpen: false
} }
}, },
computed: { computed: {
isPublished() { isPublished() {
return this.calendar.publishURL !== null return this.calendar.publishURL !== null
}, }
}, },
methods: { methods: {
publishCalendar() { publishCalendar() {

13
src/components/AppNavigation/CalendarList/CalendarListItemSharingSearch.vue
View File

@ -24,7 +24,7 @@
<template> <template>
<li class="app-navigation-entry__multiselect"> <li class="app-navigation-entry__multiselect">
<multiselect <Multiselect
id="users-groups-search" id="users-groups-search"
:options="usersOrGroups" :options="usersOrGroups"
:searchable="true" :searchable="true"
@ -38,10 +38,9 @@
track-by="user" track-by="user"
label="user" label="user"
@search-change="findSharee" @search-change="findSharee"
@change="shareCalendar" @change="shareCalendar">
>
<span slot="noResult">{{ $t('calendar', 'No users or groups') }}</span> <span slot="noResult">{{ $t('calendar', 'No users or groups') }}</span>
</multiselect> </Multiselect>
</li> </li>
</template> </template>
@ -50,14 +49,18 @@ import client from '../../../services/caldavService.js'
import HttpClient from '@nextcloud/axios' import HttpClient from '@nextcloud/axios'
import debounce from 'debounce' import debounce from 'debounce'
import { generateOcsUrl } from '@nextcloud/router' import { generateOcsUrl } from '@nextcloud/router'
import { Multiselect } from '@nextcloud/vue'
export default { export default {
name: 'CalendarListItemSharingSearch', name: 'CalendarListItemSharingSearch',
components: {
Multiselect
},
props: { props: {
calendar: { calendar: {
type: Object, type: Object,
required: true required: true
}, }
}, },
data() { data() {
return { return {

13
src/components/AppNavigation/CalendarList/CalendarListItemSharingShareItem.vue
View File

@ -21,8 +21,7 @@
<template> <template>
<AppNavigationItem <AppNavigationItem
:title="sharee.displayName" :title="sharee.displayName">
>
<template slot="icon"> <template slot="icon">
<div v-if="sharee.isGroup" class="avatar icon-group" /> <div v-if="sharee.isGroup" class="avatar icon-group" />
<div v-else-if="sharee.isCircle" class="avatar icon-circle" /> <div v-else-if="sharee.isCircle" class="avatar icon-circle" />
@ -33,8 +32,7 @@
<ActionCheckbox <ActionCheckbox
:disabled="updatingSharee" :disabled="updatingSharee"
:checked="sharee.writeable" :checked="sharee.writeable"
@update:checked="updatePermission" @update:checked="updatePermission">
>
{{ $t('calendar', 'can edit') }} {{ $t('calendar', 'can edit') }}
</ActionCheckbox> </ActionCheckbox>
</template> </template>
@ -43,8 +41,7 @@
<ActionButton <ActionButton
icon="icon-delete" icon="icon-delete"
:disabled="updatingSharee" :disabled="updatingSharee"
@click.prevent.stop="unshare" @click.prevent.stop="unshare">
>
{{ $t('calendar', 'Unshare with {displayName}', { displayName: sharee.displayName }) }} {{ $t('calendar', 'Unshare with {displayName}', { displayName: sharee.displayName }) }}
</ActionButton> </ActionButton>
</template> </template>
@ -60,7 +57,7 @@ import {
} from '@nextcloud/vue' } from '@nextcloud/vue'
export default { export default {
name: 'CalendarLisItemSharingShareItem', name: 'CalendarListItemSharingShareItem',
components: { components: {
ActionButton, ActionButton,
ActionCheckbox, ActionCheckbox,
@ -79,7 +76,7 @@ export default {
}, },
data() { data() {
return { return {
updatingSharee: false, updatingSharee: false
} }
}, },
computed: { computed: {

8
src/components/AppNavigation/CalendarList/CalendarListNew.vue
View File

@ -25,8 +25,7 @@
icon="icon-add" icon="icon-add"
:class="{disabled: disabled}" :class="{disabled: disabled}"
:title="$t('calendar', 'New calendar')" :title="$t('calendar', 'New calendar')"
@click.prevent.stop="openDialog" @click.prevent.stop="openDialog" />
/>
<ActionInput <ActionInput
v-else v-else
@ -34,8 +33,7 @@
:icon="inputIcon" :icon="inputIcon"
:value="name" :value="name"
:disabled="isCreating" :disabled="isCreating"
@submit.prevent.stop="addCalendar" @submit.prevent.stop="addCalendar">
>
{{ $t('calendar', 'Name of calendar') }} {{ $t('calendar', 'Name of calendar') }}
</ActionInput> </ActionInput>
</template> </template>
@ -67,7 +65,7 @@ export default {
return { return {
isCreating: false, isCreating: false,
showForm: false, showForm: false,
name: '', name: ''
} }
}, },
computed: { computed: {

28
src/components/AppNavigation/CalendarList/PublicCalendarListItem.vue
View File

@ -24,48 +24,41 @@
:loading="calendar.loading" :loading="calendar.loading"
:title="calendar.displayName || $t('calendar', 'Untitled calendar')" :title="calendar.displayName || $t('calendar', 'Untitled calendar')"
:menu-open.sync="menuOpen" :menu-open.sync="menuOpen"
@click.prevent.stop="toggleEnabled" @click.prevent.stop="toggleEnabled">
>
<AppNavigationIconBullet <AppNavigationIconBullet
v-if="calendar.enabled" v-if="calendar.enabled"
slot="icon" slot="icon"
:color="calendar.color" :color="calendar.color"
@click.prevent.stop="toggleEnabled" @click.prevent.stop="toggleEnabled" />
/>
<template slot="counter"> <template slot="counter">
<Avatar <Avatar
:user="owner" :user="owner"
:is-guest="true" :is-guest="true"
:disable-tooltip="true" :disable-tooltip="true"
:disable-menu="true" :disable-menu="true" />
/>
</template> </template>
<template slot="actions"> <template slot="actions">
<ActionButton <ActionButton
v-if="showCopySubscriptionLinkLabel" v-if="showCopySubscriptionLinkLabel"
icon="icon-calendar-dark" icon="icon-calendar-dark"
@click.prevent.stop="copySubscriptionLink" @click.prevent.stop="copySubscriptionLink">
>
{{ $t('calendar', 'Copy subscription link') }} {{ $t('calendar', 'Copy subscription link') }}
</ActionButton> </ActionButton>
<ActionText <ActionText
v-if="showCopySubscriptionLinkSpinner" v-if="showCopySubscriptionLinkSpinner"
icon="icon-loading-small" icon="icon-loading-small">
>
{{ $t('calendar', 'Copying link ...') }} {{ $t('calendar', 'Copying link ...') }}
</ActionText> </ActionText>
<ActionText <ActionText
v-if="showCopySubscriptionLinkSuccess" v-if="showCopySubscriptionLinkSuccess"
icon="icon-calendar-dark" icon="icon-calendar-dark">
>
{{ $t('calendar', 'Copied link') }} {{ $t('calendar', 'Copied link') }}
</ActionText> </ActionText>
<ActionText <ActionText
v-if="showCopySubscriptionLinkError" v-if="showCopySubscriptionLinkError"
icon="icon-calendar-dark" icon="icon-calendar-dark">
>
{{ $t('calendar', 'Could not copy link') }} {{ $t('calendar', 'Could not copy link') }}
</ActionText> </ActionText>
@ -73,8 +66,7 @@
icon="icon-download" icon="icon-download"
target="_blank" target="_blank"
:href="downloadUrl" :href="downloadUrl"
:title="$t('calendar', 'Download')" :title="$t('calendar', 'Download')" />
/>
</template> </template>
</AppNavigationItem> </AppNavigationItem>
</template> </template>
@ -100,7 +92,7 @@ export default {
ActionLink, ActionLink,
ActionText, ActionText,
AppNavigationIconBullet, AppNavigationIconBullet,
AppNavigationItem, AppNavigationItem
}, },
props: { props: {
calendar: { calendar: {
@ -146,7 +138,7 @@ export default {
} }
return userId return userId
}, }
}, },
methods: { methods: {
copySubscriptionLink() { copySubscriptionLink() {

6
src/components/AppNavigation/CalendarList/SubscriptionListNew.vue
View File

@ -25,8 +25,7 @@
icon="icon-add" icon="icon-add"
:class="{disabled: disabled}" :class="{disabled: disabled}"
:title="$t('calendar', 'New subscription')" :title="$t('calendar', 'New subscription')"
@click.prevent.stop="openDialog" @click.prevent.stop="openDialog" />
/>
<ActionInput <ActionInput
v-else v-else
@ -34,8 +33,7 @@
:icon="inputIcon" :icon="inputIcon"
:value="link" :value="link"
:disabled="isCreating" :disabled="isCreating"
@submit.prevent.stop="addCalendar" @submit.prevent.stop="addCalendar">
>
{{ $t('calendar', 'Link to iCal') }} {{ $t('calendar', 'Link to iCal') }}
</ActionInput> </ActionInput>
</template> </template>

8
src/components/AppNavigation/EmbedTopNavigation.vue
View File

@ -16,16 +16,14 @@
icon="icon-download" icon="icon-download"
target="_blank" target="_blank"
:href="calendar.url + '?export'" :href="calendar.url + '?export'"
:title="$t('calendar', 'Download {name}', { name: calendar.displayName || $t('calendar', 'Untitled calendar') })" :title="$t('calendar', 'Download {name}', { name: calendar.displayName || $t('calendar', 'Untitled calendar') })" />
/>
</Actions> </Actions>
<Actions default-icon="icon-calendar-dark"> <Actions default-icon="icon-calendar-dark">
<ActionButton <ActionButton
v-for="calendar in subscriptions" v-for="calendar in subscriptions"
:key="calendar.id" :key="calendar.id"
icon="icon-calendar-dark" icon="icon-calendar-dark"
@click.prevent.stop="copySubscriptionLink(calendar)" @click.prevent.stop="copySubscriptionLink(calendar)">
>
{{ $t('calendar', 'Subscribe to {name}', { name: calendar.displayName || $t('calendar', 'Untitled calendar') }) }} {{ $t('calendar', 'Subscribe to {name}', { name: calendar.displayName || $t('calendar', 'Untitled calendar') }) }}
</ActionButton> </ActionButton>
</Actions> </Actions>
@ -61,7 +59,7 @@ export default {
computed: { computed: {
...mapGetters({ ...mapGetters({
subscriptions: 'sortedSubscriptions' subscriptions: 'sortedSubscriptions'
}), })
}, },
methods: { methods: {
copySubscriptionLink(calendar) { copySubscriptionLink(calendar) {

18
src/components/AppNavigation/Settings.vue
View File

@ -27,32 +27,28 @@
class="settings-fieldset-interior-item" class="settings-fieldset-interior-item"
:checked="birthdayCalendar" :checked="birthdayCalendar"
:disabled="isBirthdayCalendarDisabled" :disabled="isBirthdayCalendarDisabled"
@update:checked="toggleBirthdayEnabled" @update:checked="toggleBirthdayEnabled">
>
{{ $t('calendar', 'Enable birthday calendar') }} {{ $t('calendar', 'Enable birthday calendar') }}
</ActionCheckbox> </ActionCheckbox>
<ActionCheckbox <ActionCheckbox
class="settings-fieldset-interior-item" class="settings-fieldset-interior-item"
:checked="showPopover" :checked="showPopover"
:disabled="savingPopover" :disabled="savingPopover"
@update:checked="togglePopoverEnabled" @update:checked="togglePopoverEnabled">
>
{{ $t('calendar', 'Enable simplified editor') }} {{ $t('calendar', 'Enable simplified editor') }}
</ActionCheckbox> </ActionCheckbox>
<ActionCheckbox <ActionCheckbox
class="settings-fieldset-interior-item" class="settings-fieldset-interior-item"
:checked="showWeekends" :checked="showWeekends"
:disabled="savingWeekend" :disabled="savingWeekend"
@update:checked="toggleWeekendsEnabled" @update:checked="toggleWeekendsEnabled">
>
{{ $t('calendar', 'Show weekends') }} {{ $t('calendar', 'Show weekends') }}
</ActionCheckbox> </ActionCheckbox>
<ActionCheckbox <ActionCheckbox
class="settings-fieldset-interior-item" class="settings-fieldset-interior-item"
:checked="showWeekNumbers" :checked="showWeekNumbers"
:disabled="savingWeekNumber" :disabled="savingWeekNumber"
@update:checked="toggleWeekNumberEnabled" @update:checked="toggleWeekNumberEnabled">
>
{{ $t('calendar', 'Show week numbers') }} {{ $t('calendar', 'Show week numbers') }}
</ActionCheckbox> </ActionCheckbox>
<SettingsTimezoneSelect :is-disabled="loadingCalendars" /> <SettingsTimezoneSelect :is-disabled="loadingCalendars" />
@ -105,7 +101,7 @@ export default {
savingBirthdayCalendar: false, savingBirthdayCalendar: false,
savingPopover: false, savingPopover: false,
savingWeekend: false, savingWeekend: false,
savingWeekNumber: false, savingWeekNumber: false
} }
}, },
computed: { computed: {
@ -116,7 +112,7 @@ export default {
showPopover: state => !state.settings.skipPopover, showPopover: state => !state.settings.skipPopover,
showWeekends: state => state.settings.showWeekends, showWeekends: state => state.settings.showWeekends,
showWeekNumbers: state => state.settings.showWeekNumbers, showWeekNumbers: state => state.settings.showWeekNumbers,
timezone: state => state.settings.timezone, timezone: state => state.settings.timezone
}), }),
isBirthdayCalendarDisabled() { isBirthdayCalendarDisabled() {
return this.savingBirthdayCalendar || this.loadingCalendars return this.savingBirthdayCalendar || this.loadingCalendars
@ -202,7 +198,7 @@ export default {
this.$copyText(url) this.$copyText(url)
.then(e => this.$toast.success(this.$t('calendar', 'CalDAV link copied to clipboard.'))) .then(e => this.$toast.success(this.$t('calendar', 'CalDAV link copied to clipboard.')))
.catch(e => this.$toast.error(this.$t('calendar', 'CalDAV link could not be copied to clipboard.'))) .catch(e => this.$toast.error(this.$t('calendar', 'CalDAV link could not be copied to clipboard.')))
}, }
} }
} }
</script> </script>

8
src/components/AppNavigation/Settings/ImportScreen.vue
View File

@ -21,7 +21,7 @@
--> -->
<template> <template>
<modal class="import-modal" size="large" @close="cancelImport"> <Modal class="import-modal" size="large" @close="cancelImport">
<h2 class="import-modal__title"> <h2 class="import-modal__title">
{{ $t('calendar', 'Import calendars') }} {{ $t('calendar', 'Import calendars') }}
</h2> </h2>
@ -38,7 +38,7 @@
{{ $t('calendar', 'Calendar to import into') }} {{ $t('calendar', 'Calendar to import into') }}
</div> </div>
</li> </li>
<import-screen-row v-for="(file, index) in files" :key="`import-file-${index}`" :file="file" /> <ImportScreenRow v-for="(file, index) in files" :key="`import-file-${index}`" :file="file" />
</transition-group> </transition-group>
<div class="import-modal__actions"> <div class="import-modal__actions">
@ -49,7 +49,7 @@
{{ $n('calendar', 'Import calendar', 'Import calendars', files.length) }} {{ $n('calendar', 'Import calendar', 'Import calendars', files.length) }}
</button> </button>
</div> </div>
</modal> </Modal>
</template> </template>
<script> <script>
@ -68,7 +68,7 @@ export default {
files: { files: {
type: Array, type: Array,
required: true required: true
}, }
}, },
computed: { computed: {
headerRowKey() { headerRowKey() {

18
src/components/AppNavigation/Settings/ImportScreenRow.vue
View File

@ -25,14 +25,16 @@
<div class="import-modal-file-item__filename"> <div class="import-modal-file-item__filename">
{{ file.name }} {{ file.name }}
</div> </div>
<calendar-picker class="import-modal-file-item__calendar-select" :calendar="calendar" <CalendarPicker class="import-modal-file-item__calendar-select"
:calendars="calendars" @selectCalendar="selectCalendar" :calendar="calendar"
/> :calendars="calendars"
@selectCalendar="selectCalendar" />
</li> </li>
</template> </template>
<script> <script>
import CalendarPicker from '../../Shared/CalendarPicker.vue' import CalendarPicker from '../../Shared/CalendarPicker.vue'
import { getDefaultColor } from '../../../utils/color.js'
export default { export default {
name: 'ImportScreenRow', name: 'ImportScreenRow',
@ -56,7 +58,10 @@ export default {
if (calendarId === 'new') { if (calendarId === 'new') {
return { return {
id: 'new', id: 'new',
displayName: this.$t('calendar', 'New calendar') displayName: this.$t('calendar', 'New calendar'),
isSharedWithMe: false,
color: getDefaultColor(), // TODO - use uid2color instead
owner: this.$store.getters.getCurrentUserPrincipal.url
} }
} }
@ -71,7 +76,10 @@ export default {
calendars.push({ calendars.push({
id: 'new', id: 'new',
displayName: this.$t('calendar', 'New calendar') displayName: this.$t('calendar', 'New calendar'),
isSharedWithMe: false,
color: getDefaultColor(), // TODO - use uid2color instead
owner: this.$store.getters.getCurrentUserPrincipal.url
}) })
return calendars return calendars

13
src/components/AppNavigation/Settings/SettingsImportSection.vue
View File

@ -24,8 +24,7 @@
<progress <progress
class="settings-fieldset-interior-item__progressbar" class="settings-fieldset-interior-item__progressbar"
:value="imported" :value="imported"
:max="total" :max="total" />
/>
</li> </li>
<li v-else class="settings-fieldset-interior-item"> <li v-else class="settings-fieldset-interior-item">
<label class="settings-fieldset-interior-item__import-button button icon icon-upload" :for="inputUid"> <label class="settings-fieldset-interior-item__import-button button icon icon-upload" :for="inputUid">
@ -38,15 +37,13 @@
:accept="supportedFileTypes" :accept="supportedFileTypes"
:disabled="disableImport" :disabled="disableImport"
multiple multiple
@change="processFiles" @change="processFiles">
>
<import-screen <ImportScreen
v-if="showImportModal" v-if="showImportModal"
:files="files" :files="files"
@cancel-import="cancelImport" @cancel-import="cancelImport"
@import-calendar="importCalendar" @import-calendar="importCalendar" />
/>
</li> </li>
</template> </template>
@ -75,7 +72,7 @@ export default {
stage: state => state.importState.stage, stage: state => state.importState.stage,
total: state => state.importState.total, total: state => state.importState.total,
accepted: state => state.importState.accepted, accepted: state => state.importState.accepted,
denied: state => state.importState.denied, denied: state => state.importState.denied
}), }),
/** /**
* Total amount of processed calendar-objects, either accepted or failed * Total amount of processed calendar-objects, either accepted or failed

9
src/components/AppNavigation/Settings/SettingsTimezoneSelect.vue
View File

@ -21,11 +21,10 @@
<template> <template>
<li class="settings-fieldset-interior-item settings-fieldset-interior-item--timezone"> <li class="settings-fieldset-interior-item settings-fieldset-interior-item--timezone">
<timezone-select <TimezoneSelect
:additional-timezones="additionalTimezones" :additional-timezones="additionalTimezones"
:value="timezone" :value="timezone"
@change="setTimezoneValue" @change="setTimezoneValue" />
/>
</li> </li>
</template> </template>
@ -65,7 +64,7 @@ export default {
detected: detectTimezone() detected: detectTimezone()
}) })
}] }]
}, }
}, },
methods: { methods: {
/** /**
@ -79,7 +78,7 @@ export default {
console.error(error) console.error(error)
this.$toast(this.$t('calendar', 'New setting was not saved successfully.')) this.$toast(this.$t('calendar', 'New setting was not saved successfully.'))
}) })
}, }
} }
} }
</script> </script>

17
src/components/Editor/Alarm/AlarmList.vue
View File

@ -22,21 +22,18 @@
<template> <template>
<div class="property-alarm-list"> <div class="property-alarm-list">
<alarm-list-item <AlarmListItem
v-for="(alarm, index) in alarms" v-for="(alarm, index) in alarms"
:key="index" :key="index"
:alarm="alarm" :alarm="alarm"
:calendar-object-instance="calendarObjectInstance" :calendar-object-instance="calendarObjectInstance"
:is-read-only="isReadOnly" :is-read-only="isReadOnly"
@removeAlarm="removeAlarm" @removeAlarm="removeAlarm" />
/> <AlarmListNew
<alarm-list-new
v-if="!isReadOnly" v-if="!isReadOnly"
@addAlarm="addAlarm" @addAlarm="addAlarm" />
/> <NoAlarmView
<no-alarm-view v-if="isListEmpty" />
v-if="isListEmpty"
/>
</div> </div>
</template> </template>
@ -61,7 +58,7 @@ export default {
calendarObjectInstance: { calendarObjectInstance: {
type: Object, type: Object,
required: true required: true
}, }
}, },
computed: { computed: {
alarms() { alarms() {

64
src/components/Editor/Alarm/AlarmListItem.vue
View File

@ -24,55 +24,47 @@
<!-- Yes, technically an alarm is a component, not a property, but for the matter of CSS names it really doesn't matter --> <!-- Yes, technically an alarm is a component, not a property, but for the matter of CSS names it really doesn't matter -->
<div <div
v-click-outside="closeAlarmEditor" v-click-outside="closeAlarmEditor"
class="property-alarm-item" class="property-alarm-item">
>
<div class="property-alarm-item__icon"> <div class="property-alarm-item__icon">
<div class="icon" :class="icon" /> <div class="icon" :class="icon" />
</div> </div>
<div <div
v-if="!isEditing" v-if="!isEditing"
class="property-alarm-item__label" class="property-alarm-item__label">
>
{{ alarm | formatAlarm(isAllDay, currentUserTimezone) }} {{ alarm | formatAlarm(isAllDay, currentUserTimezone) }}
</div> </div>
<div <div
v-if="isEditing && isRelativeAlarm && !isAllDay" v-if="isEditing && isRelativeAlarm && !isAllDay"
class="property-alarm-item__edit property-alarm-item__edit--timed" class="property-alarm-item__edit property-alarm-item__edit--timed">
>
<input <input
type="number" type="number"
min="0" min="0"
max="3600" max="3600"
:value="alarm.relativeAmountTimed" :value="alarm.relativeAmountTimed"
@input="changeRelativeAmountTimed" @input="changeRelativeAmountTimed">
> <AlarmTimeUnitSelect
<alarm-time-unit-select
:is-all-day="isAllDay" :is-all-day="isAllDay"
:count="alarm.relativeAmountTimed" :count="alarm.relativeAmountTimed"
:unit="alarm.relativeUnitTimed" :unit="alarm.relativeUnitTimed"
:disabled="false" :disabled="false"
@change="changeRelativeUnitTimed" @change="changeRelativeUnitTimed" />
/>
</div> </div>
<div <div
v-if="isEditing && isRelativeAlarm && isAllDay" v-if="isEditing && isRelativeAlarm && isAllDay"
class="property-alarm-item__edit property-alarm-item__edit--all-day" class="property-alarm-item__edit property-alarm-item__edit--all-day">
>
<div> <div>
<input <input
type="number" type="number"
min="0" min="0"
max="3600" max="3600"
:value="alarm.relativeAmountAllDay" :value="alarm.relativeAmountAllDay"
@input="changeRelativeAmountAllDay" @input="changeRelativeAmountAllDay">
> <AlarmTimeUnitSelect
<alarm-time-unit-select
:is-all-day="isAllDay" :is-all-day="isAllDay"
:count="alarm.relativeAmountAllDay" :count="alarm.relativeAmountAllDay"
:unit="alarm.relativeUnitAllDay" :unit="alarm.relativeUnitAllDay"
:disabled="false" :disabled="false"
@change="changeRelativeUnitAllDay" @change="changeRelativeUnitAllDay" />
/>
</div> </div>
<span> <span>
{{ $t('calendar', 'before at') }} {{ $t('calendar', 'before at') }}
@ -82,31 +74,26 @@
:format="timeFormat" :format="timeFormat"
type="time" type="time"
:value="relativeAllDayDate" :value="relativeAllDayDate"
@change="changeRelativeHourMinuteAllDay" @change="changeRelativeHourMinuteAllDay" />
/>
</div> </div>
<div <div
v-if="isEditing && isAbsoluteAlarm" v-if="isEditing && isAbsoluteAlarm"
class="property-alarm-item__edit property-alarm-item__edit--absolute" class="property-alarm-item__edit property-alarm-item__edit--absolute">
>
<DatetimePicker <DatetimePicker
lang="en" lang="en"
:format="absoluteDateFormat" :format="absoluteDateFormat"
type="datetime" type="datetime"
:value="alarm.absoluteDate" :value="alarm.absoluteDate"
@change="changeAbsoluteDate" @change="changeAbsoluteDate" />
/>
</div> </div>
<div <div
v-if="!isReadOnly" v-if="!isReadOnly"
class="property-alarm-item__options" class="property-alarm-item__options">
>
<Actions> <Actions>
<ActionButton <ActionButton
v-if="canEdit" v-if="canEdit"
icon="icon-edit" icon="icon-edit"
@click="editAlarm" @click="editAlarm">
>
{{ $t('calendar', 'Edit reminder') }} {{ $t('calendar', 'Edit reminder') }}
</ActionButton> </ActionButton>
@ -114,32 +101,28 @@
v-if="isEditing" v-if="isEditing"
:name="alarmTypeName" :name="alarmTypeName"
:checked="isAlarmTypeDisplay" :checked="isAlarmTypeDisplay"
@change="changeType('DISPLAY')" @change="changeType('DISPLAY')">
>
{{ $t('calendar', 'Notification') }} {{ $t('calendar', 'Notification') }}
</ActionRadio> </ActionRadio>
<ActionRadio <ActionRadio
v-if="isEditing" v-if="isEditing"
:name="alarmTypeName" :name="alarmTypeName"
:checked="isAlarmTypeEmail" :checked="isAlarmTypeEmail"
@change="changeType('EMAIL')" @change="changeType('EMAIL')">
>
{{ $t('calendar', 'Email') }} {{ $t('calendar', 'Email') }}
</ActionRadio> </ActionRadio>
<ActionRadio <ActionRadio
v-if="isEditing && isAlarmTypeAudio" v-if="isEditing && isAlarmTypeAudio"
:name="alarmTypeName" :name="alarmTypeName"
:checked="isAlarmTypeAudio" :checked="isAlarmTypeAudio"
@change="changeType('AUDIO')" @change="changeType('AUDIO')">
>
{{ $t('calendar', 'Audio notification') }} {{ $t('calendar', 'Audio notification') }}
</ActionRadio> </ActionRadio>
<ActionRadio <ActionRadio
v-if="isEditing && isAlarmTypeOther" v-if="isEditing && isAlarmTypeOther"
:name="alarmTypeName" :name="alarmTypeName"
:checked="isAlarmTypeOther" :checked="isAlarmTypeOther"
@change="changeType(alarm.type)" @change="changeType(alarm.type)">
>
{{ $t('calendar', 'Other notification') }} {{ $t('calendar', 'Other notification') }}
</ActionRadio> </ActionRadio>
@ -147,23 +130,20 @@
v-if="isEditing && !isRecurring" v-if="isEditing && !isRecurring"
:name="alarmTriggerName" :name="alarmTriggerName"
:checked="isRelativeAlarm" :checked="isRelativeAlarm"
@change="switchToRelativeAlarm" @change="switchToRelativeAlarm">
>
{{ $t('calendar', 'Relative to event') }} {{ $t('calendar', 'Relative to event') }}
</ActionRadio> </ActionRadio>
<ActionRadio <ActionRadio
v-if="isEditing && !isRecurring" v-if="isEditing && !isRecurring"
:name="alarmTriggerName" :name="alarmTriggerName"
:checked="isAbsoluteAlarm" :checked="isAbsoluteAlarm"
@change="switchToAbsoluteAlarm" @change="switchToAbsoluteAlarm">
>
{{ $t('calendar', 'On date') }} {{ $t('calendar', 'On date') }}
</ActionRadio> </ActionRadio>
<ActionButton <ActionButton
icon="icon-delete" icon="icon-delete"
@click="removeAlarm" @click="removeAlarm">
>
{{ $t('calendar', 'Remove reminder') }} {{ $t('calendar', 'Remove reminder') }}
</ActionButton> </ActionButton>
</Actions> </Actions>

3
src/components/Editor/Alarm/AlarmListNew.vue
View File

@ -23,8 +23,7 @@
<template> <template>
<button <button
class="editor-reminders-list-new-button icon-add" class="editor-reminders-list-new-button icon-add"
@click="addReminder" @click="addReminder">
>
{{ $t('calendar', 'Add reminder') }} {{ $t('calendar', 'Add reminder') }}
</button> </button>
</template> </template>

3
src/components/Editor/Alarm/AlarmTimeUnitSelect.vue
View File

@ -28,8 +28,7 @@
:disabled="disabled" :disabled="disabled"
track-by="unit" track-by="unit"
label="label" label="label"
@select="select" @select="select" />
/>
</template> </template>
<script> <script>

3
src/components/Editor/Invitees/AvatarParticipationStatus.vue
View File

@ -24,8 +24,7 @@
<div v-tooltip="tooltip" class="avatar-participation-status"> <div v-tooltip="tooltip" class="avatar-participation-status">
<Avatar <Avatar
:disable-tooltip="true" :disable-tooltip="true"
:user="avatarLink" :user="avatarLink" />
/>
<div class="avatar-participation-status__indicator" :class="className" /> <div class="avatar-participation-status__indicator" :class="className" />
</div> </div>
</template> </template>

22
src/components/Editor/Invitees/InviteesList.vue
View File

@ -22,27 +22,23 @@
<template> <template>
<div> <div>
<invitees-list-search <InviteesListSearch
v-if="!isReadOnly" v-if="!isReadOnly"
:already-invited-emails="alreadyInvitedEmails" :already-invited-emails="alreadyInvitedEmails"
@addAttendee="addAttendee" @addAttendee="addAttendee" />
/> <OrganizerListItem
<organizer-list-item
v-if="hasOrganizer" v-if="hasOrganizer"
:is-read-only="isReadOnly" :is-read-only="isReadOnly"
:organizer="calendarObjectInstance.organizer" :organizer="calendarObjectInstance.organizer" />
/> <InviteesListItem
<invitees-list-item
v-for="invitee in inviteesWithoutOrganizer" v-for="invitee in inviteesWithoutOrganizer"
:key="invitee.email" :key="invitee.email"
:attendee="invitee" :attendee="invitee"
:is-read-only="isReadOnly" :is-read-only="isReadOnly"
:organizer-display-name="organizerDisplayName" :organizer-display-name="organizerDisplayName"
@removeAttendee="removeAttendee" @removeAttendee="removeAttendee" />
/> <NoInviteesView
<no-invitees-view v-if="isListEmpty" />
v-if="isListEmpty"
/>
</div> </div>
</template> </template>
@ -68,7 +64,7 @@ export default {
calendarObjectInstance: { calendarObjectInstance: {
type: Object, type: Object,
required: true required: true
}, }
}, },
computed: { computed: {
inviteesWithoutOrganizer() { inviteesWithoutOrganizer() {

27
src/components/Editor/Invitees/InviteesListItem.vue
View File

@ -22,14 +22,13 @@
<template> <template>
<div class="invitees-list-item"> <div class="invitees-list-item">
<avatar-participation-status <AvatarParticipationStatus
:attendee-is-organizer="false" :attendee-is-organizer="false"
:is-viewed-by-organizer="isViewedByOrganizer" :is-viewed-by-organizer="isViewedByOrganizer"
:avatar-link="avatarLink" :avatar-link="avatarLink"
:participation-status="attendee.participationStatus" :participation-status="attendee.participationStatus"
:organizer-display-name="organizerDisplayName" :organizer-display-name="organizerDisplayName"
:common-name="commonName" :common-name="commonName" />
/>
<div class="invitees-list-item__displayname"> <div class="invitees-list-item__displayname">
{{ commonName }} {{ commonName }}
</div> </div>
@ -37,44 +36,38 @@
<Actions v-if="isViewedByOrganizer"> <Actions v-if="isViewedByOrganizer">
<ActionCheckbox <ActionCheckbox
:checked="attendee.rsvp" :checked="attendee.rsvp"
@change="toggleRSVP" @change="toggleRSVP">
>
{{ $t('calendar', 'Send e-mail') }} {{ $t('calendar', 'Send e-mail') }}
</ActionCheckbox> </ActionCheckbox>
<ActionRadio <ActionRadio
:name="radioName" :name="radioName"
:checked="isChair" :checked="isChair"
@change="changeRole('CHAIR')" @change="changeRole('CHAIR')">
>
{{ $t('calendar', 'Chairperson') }} {{ $t('calendar', 'Chairperson') }}
</ActionRadio> </ActionRadio>
<ActionRadio <ActionRadio
:name="radioName" :name="radioName"
:checked="isRequiredParticipant" :checked="isRequiredParticipant"
@change="changeRole('REQ-PARTICIPANT')" @change="changeRole('REQ-PARTICIPANT')">
>
{{ $t('calendar', 'Required participant') }} {{ $t('calendar', 'Required participant') }}
</ActionRadio> </ActionRadio>
<ActionRadio <ActionRadio
:name="radioName" :name="radioName"
:checked="isOptionalParticipant" :checked="isOptionalParticipant"
@change="changeRole('OPT-PARTICIPANT')" @change="changeRole('OPT-PARTICIPANT')">
>
{{ $t('calendar', 'Optional participant') }} {{ $t('calendar', 'Optional participant') }}
</ActionRadio> </ActionRadio>
<ActionRadio <ActionRadio
:name="radioName" :name="radioName"
:checked="isNonParticipant" :checked="isNonParticipant"
@change="changeRole('NON-PARTICIPANT')" @change="changeRole('NON-PARTICIPANT')">
>
{{ $t('calendar', 'Non-participant') }} {{ $t('calendar', 'Non-participant') }}
</ActionRadio> </ActionRadio>
<ActionButton <ActionButton
icon="icon-delete" icon="icon-delete"
@click="removeAttendee" @click="removeAttendee">
>
{{ $t('calendar', 'Remove attendee') }} {{ $t('calendar', 'Remove attendee') }}
</ActionButton> </ActionButton>
</Actions> </Actions>
@ -112,7 +105,7 @@ export default {
isReadOnly: { isReadOnly: {
type: Boolean, type: Boolean,
required: true required: true
}, }
}, },
computed: { computed: {
avatarLink() { avatarLink() {
@ -148,7 +141,7 @@ export default {
isViewedByOrganizer() { isViewedByOrganizer() {
// TODO: check if also viewed by organizer // TODO: check if also viewed by organizer
return !this.isReadOnly return !this.isReadOnly
}, }
}, },
methods: { methods: {
/** /**

9
src/components/Editor/Invitees/InviteesListSearch.vue
View File

@ -21,7 +21,7 @@
--> -->
<template> <template>
<multiselect <Multiselect
class="invitees-search" class="invitees-search"
:options="matches" :options="matches"
:searchable="true" :searchable="true"
@ -34,8 +34,7 @@
track-by="email" track-by="email"
label="dropdownName" label="dropdownName"
@search-change="findAttendees" @search-change="findAttendees"
@select="addAttendee" @select="addAttendee">
>
<!-- <template slot="singleLabel" slot-scope="props"><img class="option__image" :src="props.option.img" alt="No Man’s Sky"><span class="option__desc"><span class="option__title">{{ props.option.title }}</span></span></template>--> <!-- <template slot="singleLabel" slot-scope="props"><img class="option__image" :src="props.option.img" alt="No Man’s Sky"><span class="option__desc"><span class="option__title">{{ props.option.title }}</span></span></template>-->
<template slot="singleLabel" slot-scope="props"> <template slot="singleLabel" slot-scope="props">
<div class="invitees-search-list-item"> <div class="invitees-search-list-item">
@ -75,7 +74,7 @@
</div> </div>
</div> </div>
</template> </template>
</multiselect> </Multiselect>
</template> </template>
<script> <script>
@ -123,7 +122,7 @@ export default {
if (query.length > 0) { if (query.length > 0) {
const promises = [ const promises = [
this.findAttendeesFromContactsAPI(query), this.findAttendeesFromContactsAPI(query),
this.findAttendeesFromDAV(query), this.findAttendeesFromDAV(query)
] ]
const [contactsResults, davResults] = await Promise.all(promises) const [contactsResults, davResults] = await Promise.all(promises)

11
src/components/Editor/Invitees/OrganizerListItem.vue
View File

@ -22,14 +22,13 @@
<template> <template>
<div class="invitees-list-item"> <div class="invitees-list-item">
<avatar-participation-status <AvatarParticipationStatus
:attendee-is-organizer="true" :attendee-is-organizer="true"
:avatar-link="avatarLink" :avatar-link="avatarLink"
:is-viewed-by-organizer="isViewedByOrganizer" :is-viewed-by-organizer="isViewedByOrganizer"
:common-name="commonName" :common-name="commonName"
:organizer-display-name="commonName" :organizer-display-name="commonName"
participation-status="ACCEPTED" participation-status="ACCEPTED" />
/>
<div class="invitees-list-item__displayname"> <div class="invitees-list-item__displayname">
{{ commonName }} {{ commonName }}
</div> </div>
@ -50,12 +49,12 @@ export default {
props: { props: {
organizer: { organizer: {
type: Object, type: Object,
required: true, required: true
}, },
isReadOnly: { isReadOnly: {
type: Boolean, type: Boolean,
required: true required: true
}, }
}, },
computed: { computed: {
avatarLink() { avatarLink() {
@ -75,7 +74,7 @@ export default {
}, },
isViewedByOrganizer() { isViewedByOrganizer() {
return true return true
}, }
} }
} }
</script> </script>

22
src/components/Editor/Properties/PropertyCalendarPicker.vue
View File

@ -24,28 +24,24 @@
<div v-if="display" class="property-select"> <div v-if="display" class="property-select">
<div <div
class="property-select__icon icon-calendar-dark" class="property-select__icon icon-calendar-dark"
:title="$t('calendar', 'Calendar')" :title="$t('calendar', 'Calendar')" />
/>
<div <div
class="property-select__input" class="property-select__input"
:class="{ 'property-select__input--readonly-calendar-picker': isReadOnly }" :class="{ 'property-select__input--readonly-calendar-picker': isReadOnly }">
> <CalendarPicker
<calendar-picker
v-if="!isReadOnly" v-if="!isReadOnly"
:calendar="calendar" :calendar="calendar"
:calendars="calendars" :calendars="calendars"
:show-calendar-on-select="true" :show-calendar-on-select="true"
@selectCalendar="selectCalendar" @selectCalendar="selectCalendar" />
/>
<calendar-picker-option <CalendarPickerOption
v-else v-else
:color="calendar.color" :color="calendar.color"
:display-name="calendar.displayName" :display-name="calendar.displayName"
:is-shared-with-me="calendar.isSharedWithMe" :is-shared-with-me="calendar.isSharedWithMe"
:owner="calendar.owner" :owner="calendar.owner" />
/>
</div> </div>
</div> </div>
</template> </template>
@ -67,17 +63,17 @@ export default {
}, },
calendars: { calendars: {
type: Array, type: Array,
required: true, required: true
}, },
isReadOnly: { isReadOnly: {
type: Boolean, type: Boolean,
required: true required: true
}, }
}, },
computed: { computed: {
display() { display() {
return this.calendar !== undefined return this.calendar !== undefined
}, }
}, },
methods: { methods: {
selectCalendar(value) { selectCalendar(value) {

20
src/components/Editor/Properties/PropertySelect.vue
View File

@ -25,14 +25,12 @@
<div <div
class="property-select__icon" class="property-select__icon"
:class="icon" :class="icon"
:title="readableName" :title="readableName" />
/>
<div <div
class="property-select__input" class="property-select__input"
:class="{ 'property-select__input--readonly': isReadOnly }" :class="{ 'property-select__input--readonly': isReadOnly }">
> <Multiselect
<multiselect
v-if="!isReadOnly" v-if="!isReadOnly"
:options="options" :options="options"
:searchable="false" :searchable="false"
@ -41,8 +39,7 @@
:value="selectedValue" :value="selectedValue"
track-by="value" track-by="value"
label="label" label="label"
@select="changeValue" @select="changeValue" />
/>
<!-- eslint-disable-next-line vue/singleline-html-element-content-newline --> <!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
<div v-else>{{ selectedValue.label }}</div> <div v-else>{{ selectedValue.label }}</div>
</div> </div>
@ -50,16 +47,19 @@
<div <div
v-if="hasInfo" v-if="hasInfo"
v-tooltip="info" v-tooltip="info"
class="property-select__info icon-details" class="property-select__info icon-details" />
/>
</div> </div>
</template> </template>
<script> <script>
import PropertyMixin from '../../../mixins/PropertyMixin' import PropertyMixin from '../../../mixins/PropertyMixin'
import { Multiselect } from '@nextcloud/vue'
export default { export default {
name: 'PropertySelect', name: 'PropertySelect',
components: {
Multiselect
},
mixins: [ mixins: [
PropertyMixin PropertyMixin
], ],
@ -85,6 +85,6 @@ export default {
this.$emit('update:value', selectedOption) this.$emit('update:value', selectedOption)
} }
}, }
} }
</script> </script>

14
src/components/Editor/Properties/PropertyText.vue
View File

@ -25,13 +25,11 @@
<div <div
class="property-text__icon" class="property-text__icon"
:class="icon" :class="icon"
:title="readableName" :title="readableName" />
/>
<div <div
class="property-text__input" class="property-text__input"
:class="{ 'property-text__input--readonly': isReadOnly }" :class="{ 'property-text__input--readonly': isReadOnly }">
>
<textarea <textarea
v-if="!isReadOnly" v-if="!isReadOnly"
v-autosize v-autosize
@ -39,8 +37,7 @@
rows="1" rows="1"
:title="readableName" :title="readableName"
:value="value" :value="value"
@input.prevent.stop="changeValue" @input.prevent.stop="changeValue" />
/>
<!-- eslint-disable-next-line vue/singleline-html-element-content-newline --> <!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
<div v-else>{{ value }}</div> <div v-else>{{ value }}</div>
</div> </div>
@ -48,8 +45,7 @@
<div <div
v-if="hasInfo" v-if="hasInfo"
v-tooltip="info" v-tooltip="info"
class="property-text__info icon-details" class="property-text__info icon-details" />
/>
</div> </div>
</template> </template>
@ -86,7 +82,7 @@ export default {
} else { } else {
this.$emit('update:value', event.target.value) this.$emit('update:value', event.target.value)
} }
}, }
} }
} }
</script> </script>

10
src/components/Editor/Properties/PropertyTitle.vue
View File

@ -24,15 +24,13 @@
<div class="property-title"> <div class="property-title">
<div <div
class="property-title__input" class="property-title__input"
:class="{ 'property-title__input--readonly': isReadOnly }" :class="{ 'property-title__input--readonly': isReadOnly }">
>
<input <input
v-if="!isReadOnly" v-if="!isReadOnly"
type="text" type="text"
:placeholder="$t('calendar', 'Untitled event')" :placeholder="$t('calendar', 'Untitled event')"
:value="value" :value="value"
@input.prevent.stop="changeValue" @input.prevent.stop="changeValue">
>
<!-- eslint-disable-next-line vue/singleline-html-element-content-newline --> <!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
<div v-else>{{ value }}</div> <div v-else>{{ value }}</div>
</div> </div>
@ -50,12 +48,12 @@ export default {
value: { value: {
type: String, type: String,
default: '' default: ''
}, }
}, },
methods: { methods: {
changeValue(event) { changeValue(event) {
this.$emit('update:value', event.target.value) this.$emit('update:value', event.target.value)
}, }
} }
} }
</script> </script>

68
src/components/Editor/Properties/PropertyTitleTimePicker.vue
View File

@ -26,37 +26,32 @@
<div class="property-title-time-picker"> <div class="property-title-time-picker">
<div <div
v-if="!isReadOnly" v-if="!isReadOnly"
class="property-title-time-picker__time-pickers" class="property-title-time-picker__time-pickers">
>
<DatetimePicker <DatetimePicker
v-if="!isReadOnly" v-if="!isReadOnly"
lang="en" lang="en"
:format="startDateFormat" :format="startDateFormat"
:value="startDate" :value="startDate"
:type="timeType" :type="timeType"
@change="changeStart" @change="changeStart">
>
<template v-if="!isAllDay" slot="calendar-icon"> <template v-if="!isAllDay" slot="calendar-icon">
<button <button
class="datetime-picker-inline-icon icon icon-timezone" class="datetime-picker-inline-icon icon icon-timezone"
:class="{ 'datetime-picker-inline-icon--highlighted': highlightStartTimezone }" :class="{ 'datetime-picker-inline-icon--highlighted': highlightStartTimezone }"
@click.stop.prevent="showTimezonePickerForStartDate" @click.stop.prevent="showTimezonePickerForStartDate" />
/>
<Popover <Popover
:open.sync="showStartTimezone" :open.sync="showStartTimezone"
open-class="timezone-popover-wrapper" open-class="timezone-popover-wrapper">
>
<div class="timezone-popover-wrapper__title"> <div class="timezone-popover-wrapper__title">
<strong> <strong>
{{ $t('calendar', 'Please select a timezone for the start-date:') }} {{ $t('calendar', 'Please select a timezone for the start-date:') }}
</strong> </strong>
</div> </div>
<timezone-select <TimezoneSelect
v-if="!isReadOnly" v-if="!isReadOnly"
class="timezone-popover-wrapper__timezone-select" class="timezone-popover-wrapper__timezone-select"
:value="startTimezone" :value="startTimezone"
@change="changeStartTimezone" @change="changeStartTimezone" />
/>
</Popover> </Popover>
</template> </template>
</DatetimePicker> </DatetimePicker>
@ -67,37 +62,32 @@
:format="endDateFormat" :format="endDateFormat"
:value="endDate" :value="endDate"
:type="timeType" :type="timeType"
@change="changeEnd" @change="changeEnd">
>
<template v-if="!isAllDay" slot="calendar-icon"> <template v-if="!isAllDay" slot="calendar-icon">
<button <button
class="datetime-picker-inline-icon icon icon-timezone" class="datetime-picker-inline-icon icon icon-timezone"
:class="{ 'datetime-picker-inline-icon--highlighted': highlightEndTimezone }" :class="{ 'datetime-picker-inline-icon--highlighted': highlightEndTimezone }"
@click.stop.prevent="showTimezonePickerForEndDate" @click.stop.prevent="showTimezonePickerForEndDate" />
/>
<Popover <Popover
:open.sync="showEndTimezone" :open.sync="showEndTimezone"
open-class="timezone-popover-wrapper" open-class="timezone-popover-wrapper">
>
<div class="timezone-popover-wrapper__title"> <div class="timezone-popover-wrapper__title">
<strong> <strong>
{{ $t('calendar', 'Please select a timezone for the end-date:') }} {{ $t('calendar', 'Please select a timezone for the end-date:') }}
</strong> </strong>
</div> </div>
<timezone-select <TimezoneSelect
v-if="!isReadOnly" v-if="!isReadOnly"
class="timezone-popover-wrapper__timezone-select" class="timezone-popover-wrapper__timezone-select"
:value="endTimezone" :value="endTimezone"
@change="changeEndTimezone" @change="changeEndTimezone" />
/>
</Popover> </Popover>
</template> </template>
</DatetimePicker> </DatetimePicker>
</div> </div>
<div <div
v-if="isReadOnly" v-if="isReadOnly"
class="property-title-time-picker__time-pickers property-title-time-picker__time-pickers--readonly" class="property-title-time-picker__time-pickers property-title-time-picker__time-pickers--readonly">
>
<div class="property-title-time-picker-read-only-wrapper"> <div class="property-title-time-picker-read-only-wrapper">
<div class="property-title-time-picker-read-only-wrapper__label"> <div class="property-title-time-picker-read-only-wrapper__label">
{{ formattedStart }} {{ formattedStart }}
@ -106,8 +96,7 @@
v-if="!isAllDay" v-if="!isAllDay"
v-tooltip="startTimezone" v-tooltip="startTimezone"
class="property-title-time-picker-read-only-wrapper__icon icon icon-timezone" class="property-title-time-picker-read-only-wrapper__icon icon icon-timezone"
:class="{ 'property-title-time-picker-read-only-wrapper__icon--highlighted': highlightStartTimezone } " :class="{ 'property-title-time-picker-read-only-wrapper__icon--highlighted': highlightStartTimezone } " />
/>
</div> </div>
<div class="property-title-time-picker-read-only-wrapper"> <div class="property-title-time-picker-read-only-wrapper">
<div class="property-title-time-picker-read-only-wrapper__label"> <div class="property-title-time-picker-read-only-wrapper__label">
@ -117,8 +106,7 @@
v-if="!isAllDay" v-if="!isAllDay"
v-tooltip="endTimezone" v-tooltip="endTimezone"
class="property-title-time-picker-read-only-wrapper__icon icon icon-timezone" class="property-title-time-picker-read-only-wrapper__icon icon icon-timezone"
:class="{ 'property-title-time-picker-read-only-wrapper__icon--highlighted': highlightEndTimezone }" :class="{ 'property-title-time-picker-read-only-wrapper__icon--highlighted': highlightEndTimezone }" />
/>
</div> </div>
</div> </div>
@ -129,12 +117,10 @@
type="checkbox" type="checkbox"
class="checkbox" class="checkbox"
:disabled="!canModifyAllDay || isReadOnly" :disabled="!canModifyAllDay || isReadOnly"
@change="toggleAllDay" @change="toggleAllDay">
>
<label <label
v-tooltip="allDayTooltip" v-tooltip="allDayTooltip"
for="allDay" for="allDay">
>
{{ $t('calendar', 'All day') }} {{ $t('calendar', 'All day') }}
</label> </label>
</div> </div>
@ -144,9 +130,6 @@
<script> <script>
import { DatetimePicker, Popover } from '@nextcloud/vue' import { DatetimePicker, Popover } from '@nextcloud/vue'
import TimezoneSelect from '../../Shared/TimezoneSelect' import TimezoneSelect from '../../Shared/TimezoneSelect'
import {
getReadableTimezoneName,
} from '../../../utils/timezone.js'
import moment from '@nextcloud/moment' import moment from '@nextcloud/moment'
export default { export default {
@ -156,25 +139,6 @@ export default {
TimezoneSelect, TimezoneSelect,
Popover Popover
}, },
filters: {
formatDate(value, isAllDay) {
if (!value) {
return ''
}
if (isAllDay) {
return moment(value).format('ll')
} else {
return moment(value).format('lll')
}
},
formatTimezone(value) {
if (!value) {
return ''
}
return getReadableTimezoneName(value)
}
},
props: { props: {
/** /**
* Whether or not the editor is viewed in read-only * Whether or not the editor is viewed in read-only

39
src/components/Editor/Repeat/Repeat.vue
View File

@ -22,20 +22,18 @@
<template> <template>
<div> <div>
<repeat-freq-interval <RepeatFreqInterval
v-if="!isRecurrenceException" v-if="!isRecurrenceException"
:frequency="recurrenceRule.frequency" :frequency="recurrenceRule.frequency"
:interval="recurrenceRule.interval" :interval="recurrenceRule.interval"
@changeInterval="changeInterval" @changeInterval="changeInterval"
@changeFrequency="changeFrequency" @changeFrequency="changeFrequency" />
/> <RepeatFreqWeeklyOptions
<repeat-freq-weekly-options
v-if="isFreqWeekly && !isRecurrenceException" v-if="isFreqWeekly && !isRecurrenceException"
:by-day="recurrenceRule.byDay" :by-day="recurrenceRule.byDay"
@addByDay="addByDay" @addByDay="addByDay"
@removeByDay="removeByDay" @removeByDay="removeByDay" />
/> <RepeatFreqMonthlyOptions
<repeat-freq-monthly-options
v-if="isFreqMonthly && !isRecurrenceException" v-if="isFreqMonthly && !isRecurrenceException"
:by-day="recurrenceRule.byDay" :by-day="recurrenceRule.byDay"
:by-month-day="recurrenceRule.byMonthDay" :by-month-day="recurrenceRule.byMonthDay"
@ -45,9 +43,8 @@
@changeByDay="setByDay" @changeByDay="setByDay"
@changeBySetPosition="setBySetPosition" @changeBySetPosition="setBySetPosition"
@changeToBySetPosition="changeToBySetPositionMonthly" @changeToBySetPosition="changeToBySetPositionMonthly"
@changeToByDay="changeToByDayMonthly" @changeToByDay="changeToByDayMonthly" />
/> <RepeatFreqYearlyOptions
<repeat-freq-yearly-options
v-if="isFreqYearly && !isRecurrenceException" v-if="isFreqYearly && !isRecurrenceException"
:by-day="recurrenceRule.byDay" :by-day="recurrenceRule.byDay"
:by-month="recurrenceRule.byMonth" :by-month="recurrenceRule.byMonth"
@ -57,9 +54,8 @@
@addByMonth="addByMonth" @addByMonth="addByMonth"
@removeByMonth="removeByMonth" @removeByMonth="removeByMonth"
@enableBySetPosition="enableBySetPositionYearly" @enableBySetPosition="enableBySetPositionYearly"
@disableBySetPosition="disableBySetPositionYearly" @disableBySetPosition="disableBySetPositionYearly" />
/> <RepeatEndRepeat
<repeat-end-repeat
v-if="isRepeating && !isRecurrenceException" v-if="isRepeating && !isRecurrenceException"
:calendar-object-instance="calendarObjectInstance" :calendar-object-instance="calendarObjectInstance"
:until="recurrenceRule.until" :until="recurrenceRule.until"
@ -68,8 +64,7 @@
@setUntil="setUntil" @setUntil="setUntil"
@setCount="setCount" @setCount="setCount"
@changeToCount="changeToCount" @changeToCount="changeToCount"
@changeToUntil="changeToUntil" @changeToUntil="changeToUntil" />
/>
<!-- The repeat summary is definitely something I want in the future, but let's implement it later --> <!-- The repeat summary is definitely something I want in the future, but let's implement it later -->
<!--<repeat-summary--> <!--<repeat-summary-->
<!-- v-if="true"--> <!-- v-if="true"-->
@ -82,12 +77,10 @@
<!-- :until="repeatUntil"--> <!-- :until="repeatUntil"-->
<!-- :count="repeatCount"--> <!-- :count="repeatCount"-->
<!--/>--> <!--/>-->
<repeat-unsupported-warning <RepeatUnsupportedWarning
v-if="recurrenceRule.isUnsupported && !isRecurrenceException" v-if="recurrenceRule.isUnsupported && !isRecurrenceException" />
/> <RepeatExceptionWarning
<repeat-exception-warning v-if="isRecurrenceException" />
v-if="isRecurrenceException"
/>
</div> </div>
</template> </template>
@ -124,7 +117,7 @@ export default {
*/ */
recurrenceRule: { recurrenceRule: {
type: Object, type: Object,
required: true, required: true
}, },
/** /**
* Whether or not the event is read-only * Whether or not the event is read-only
@ -425,7 +418,7 @@ export default {
if (this.recurrenceRule.isUnsupported) { if (this.recurrenceRule.isUnsupported) {
this.$store.commit('markRecurrenceRuleAsSupported', { this.$store.commit('markRecurrenceRuleAsSupported', {
calendarObjectInstance: this.calendarObjectInstance, calendarObjectInstance: this.calendarObjectInstance,
recurrenceRule: this.recurrenceRule, recurrenceRule: this.recurrenceRule
}) })
} }

14
src/components/Editor/Repeat/RepeatEndRepeat.vue
View File

@ -23,7 +23,7 @@
<template> <template>
<div class="repeat-option-set repeat-option-set--end"> <div class="repeat-option-set repeat-option-set--end">
<span class="repeat-option-end__label">{{ $t('calendar', 'End repeat') }}</span> <span class="repeat-option-end__label">{{ $t('calendar', 'End repeat') }}</span>
<multiselect <Multiselect
class="repeat-option-end__end-type-select" class="repeat-option-end__end-type-select"
:options="options" :options="options"
:searchable="false" :searchable="false"
@ -32,8 +32,7 @@
:value="selectedOption" :value="selectedOption"
track-by="value" track-by="value"
label="label" label="label"
@select="changeEndType" @select="changeEndType" />
/>
<DatetimePicker <DatetimePicker
v-if="isUntil" v-if="isUntil"
class="repeat-option-end__until" class="repeat-option-end__until"
@ -41,8 +40,7 @@
:not-after="maximumDate" :not-after="maximumDate"
:value="until" :value="until"
type="date" type="date"
@change="changeUntil" @change="changeUntil" />
/>
<input <input
v-if="isCount" v-if="isCount"
class="repeat-option-end__count" class="repeat-option-end__count"
@ -50,12 +48,10 @@
min="1" min="1"
max="3500" max="3500"
:value="count" :value="count"
@input="changeCount" @input="changeCount">
>
<span <span
v-if="isCount" v-if="isCount"
class="repeat-option-end__count" class="repeat-option-end__count">
>
{{ occurrencesLabel }} {{ occurrencesLabel }}
</span> </span>
</div> </div>

3
src/components/Editor/Repeat/RepeatFirstLastSelect.vue
View File

@ -29,8 +29,7 @@
:placeholder="$t('calendar', 'first')" :placeholder="$t('calendar', 'first')"
track-by="value" track-by="value"
label="label" label="label"
@select="select" @select="select" />
/>
</template> </template>
<script> <script>

8
src/components/Editor/Repeat/RepeatFreqInterval.vue
View File

@ -32,13 +32,11 @@
min="1" min="1"
max="366" max="366"
:value="interval" :value="interval"
@input="changeInterval" @input="changeInterval">
> <RepeatFreqSelect
<repeat-freq-select
:freq="frequency" :freq="frequency"
:count="interval" :count="interval"
@change="changeFrequency" @change="changeFrequency" />
/>
</div> </div>
</template> </template>

21
src/components/Editor/Repeat/RepeatFreqMonthlyOptions.vue
View File

@ -27,8 +27,7 @@
class="repeat-option-set-section__title" class="repeat-option-set-section__title"
:name="radioInputId" :name="radioInputId"
:checked="byMonthDayEnabled" :checked="byMonthDayEnabled"
@change="enableByMonthDay" @change="enableByMonthDay">
>
{{ $t('calendar', 'By day of the month') }} {{ $t('calendar', 'By day of the month') }}
</ActionRadio> </ActionRadio>
<div class="repeat-option-set-section__grid"> <div class="repeat-option-set-section__grid">
@ -38,8 +37,7 @@
class="repeat-option-set-section-grid-item" class="repeat-option-set-section-grid-item"
:class="{ primary: option.selected }" :class="{ primary: option.selected }"
:disabled="!byMonthDayEnabled" :disabled="!byMonthDayEnabled"
@click="toggleByMonthDay(option.value)" @click="toggleByMonthDay(option.value)">
>
{{ option.label }} {{ option.label }}
</button> </button>
</div> </div>
@ -49,20 +47,17 @@
class="repeat-option-set-section__title" class="repeat-option-set-section__title"
:name="radioInputId" :name="radioInputId"
:checked="!byMonthDayEnabled" :checked="!byMonthDayEnabled"
@change="enableBySetPosition" @change="enableBySetPosition">
>
{{ $t('calendar', 'On the') }} {{ $t('calendar', 'On the') }}
</ActionRadio> </ActionRadio>
<repeat-first-last-select <RepeatFirstLastSelect
:by-set-position="bySetPosition" :by-set-position="bySetPosition"
:disabled="byMonthDayEnabled" :disabled="byMonthDayEnabled"
@change="changeBySetPosition" @change="changeBySetPosition" />
/> <RepeatOnTheSelect
<repeat-on-the-select
:by-day="byDay" :by-day="byDay"
:disabled="byMonthDayEnabled" :disabled="byMonthDayEnabled"
@change="changeByDay" @change="changeByDay" />
/>
</div> </div>
</div> </div>
</template> </template>
@ -92,7 +87,7 @@ export default {
*/ */
byMonthDay: { byMonthDay: {
type: Array, type: Array,
required: true, required: true
}, },
/** /**
* *

3
src/components/Editor/Repeat/RepeatFreqSelect.vue
View File

@ -27,8 +27,7 @@
:value="selected" :value="selected"
track-by="freq" track-by="freq"
label="label" label="label"
@select="select" @select="select" />
/>
</template> </template>
<script> <script>

5
src/components/Editor/Repeat/RepeatFreqWeeklyOptions.vue
View File

@ -31,8 +31,7 @@
:key="option.value" :key="option.value"
class="repeat-option-set-section-grid-item" class="repeat-option-set-section-grid-item"
:class="{ primary: option.selected }" :class="{ primary: option.selected }"
@click="toggleByDay(option.value)" @click="toggleByDay(option.value)">
>
{{ option.label }} {{ option.label }}
</button> </button>
</div> </div>
@ -94,7 +93,7 @@ export default {
this.$emit('removeByDay', day) this.$emit('removeByDay', day)
} }
} }
}, }
} }
} }
</script> </script>

18
src/components/Editor/Repeat/RepeatFreqYearlyOptions.vue
View File

@ -29,8 +29,7 @@
:key="option.value" :key="option.value"
class="repeat-option-set-section-grid-item" class="repeat-option-set-section-grid-item"
:class="{ primary: option.selected }" :class="{ primary: option.selected }"
@click="toggleByMonth(option.value)" @click="toggleByMonth(option.value)">
>
{{ option.label }} {{ option.label }}
</button> </button>
</div> </div>
@ -39,20 +38,17 @@
<ActionCheckbox <ActionCheckbox
class="repeat-option-set-section__title" class="repeat-option-set-section__title"
:checked="isBySetPositionEnabled" :checked="isBySetPositionEnabled"
@change="toggleBySetPosition" @change="toggleBySetPosition">
>
{{ $t('calendar', 'On the') }} {{ $t('calendar', 'On the') }}
</ActionCheckbox> </ActionCheckbox>
<repeat-first-last-select <RepeatFirstLastSelect
:by-set-position="bySetPosition" :by-set-position="bySetPosition"
:disabled="!isBySetPositionEnabled" :disabled="!isBySetPositionEnabled"
@change="changeBySetPosition" @change="changeBySetPosition" />
/> <RepeatOnTheSelect
<repeat-on-the-select
:by-day="byDay" :by-day="byDay"
:disabled="!isBySetPositionEnabled" :disabled="!isBySetPositionEnabled"
@change="changeByDay" @change="changeByDay" />
/>
</div> </div>
</div> </div>
</template> </template>
@ -84,7 +80,7 @@ export default {
*/ */
byMonth: { byMonth: {
type: Array, type: Array,
required: true, required: true
}, },
/** /**
* *

23
src/components/Editor/Repeat/RepeatOnTheSelect.vue
View File

@ -29,8 +29,7 @@
:placeholder="$t('calendar', 'Monday')" :placeholder="$t('calendar', 'Monday')"
track-by="value" track-by="value"
label="label" label="label"
@select="select" @select="select" />
/>
</template> </template>
<script> <script>
@ -61,34 +60,34 @@ export default {
return [{ return [{
label: dayNames[1], label: dayNames[1],
value: ['MO'], value: ['MO']
}, { }, {
label: dayNames[2], label: dayNames[2],
value: ['TU'], value: ['TU']
}, { }, {
label: dayNames[3], label: dayNames[3],
value: ['WE'], value: ['WE']
}, { }, {
label: dayNames[4], label: dayNames[4],
value: ['TH'], value: ['TH']
}, { }, {
label: dayNames[5], label: dayNames[5],
value: ['FR'], value: ['FR']
}, { }, {
label: dayNames[6], label: dayNames[6],
value: ['SA'], value: ['SA']
}, { }, {
label: dayNames[0], label: dayNames[0],
value: ['SU'], value: ['SU']
}, { }, {
label: this.$t('calendar', 'day'), label: this.$t('calendar', 'day'),
value: ['SU', 'MO', 'TU', 'WE', 'TH', 'FR', 'SA'], value: ['SU', 'MO', 'TU', 'WE', 'TH', 'FR', 'SA']
}, { }, {
label: this.$t('calendar', 'weekday'), label: this.$t('calendar', 'weekday'),
value: ['MO', 'TU', 'WE', 'TH', 'FR'], value: ['MO', 'TU', 'WE', 'TH', 'FR']
}, { }, {
label: this.$t('calendar', 'weekend day'), label: this.$t('calendar', 'weekend day'),
value: ['SU', 'SA'], value: ['SU', 'SA']
}] }]
}, },
selected() { selected() {

17
src/components/Editor/SaveButtons.vue
View File

@ -24,36 +24,31 @@
<div> <div>
<button <button
v-if="showMoreButton" v-if="showMoreButton"
@click="showMore" @click="showMore">
>
{{ $t('calendar', 'More') }} {{ $t('calendar', 'More') }}
</button> </button>
<button <button
v-if="showSaveButton" v-if="showSaveButton"
class="primary" class="primary"
@click="saveThisOnly" @click="saveThisOnly">
>
{{ $t('calendar', 'Save') }} {{ $t('calendar', 'Save') }}
</button> </button>
<button <button
v-if="shoUpdateButton" v-if="shoUpdateButton"
class="primary" class="primary"
@click="saveThisOnly" @click="saveThisOnly">
>
{{ $t('calendar', 'Update') }} {{ $t('calendar', 'Update') }}
</button> </button>
<button <button
v-if="showUpdateOnlyThisButton" v-if="showUpdateOnlyThisButton"
class="primary" class="primary"
@click="saveThisOnly" @click="saveThisOnly">
>
{{ $t('calendar', 'Update this occurrence') }} {{ $t('calendar', 'Update this occurrence') }}
</button> </button>
<button <button
v-if="showUpdateThisAndFutureButton" v-if="showUpdateThisAndFutureButton"
:class="{ primary: forceThisAndAllFuture}" :class="{ primary: forceThisAndAllFuture}"
@click="saveThisAndAllFuture" @click="saveThisAndAllFuture">
>
{{ $t('calendar', 'Update this and all future') }} {{ $t('calendar', 'Update this and all future') }}
</button> </button>
</div> </div>
@ -92,7 +87,7 @@ export default {
}, },
showUpdateThisAndFutureButton() { showUpdateThisAndFutureButton() {
return this.canCreateRecurrenceException return this.canCreateRecurrenceException
}, }
}, },
methods: { methods: {
saveThisOnly() { saveThisOnly() {

13
src/components/Shared/CalendarPicker.vue
View File

@ -1,19 +1,18 @@
<template> <template>
<multiselect <Multiselect
label="displayName" label="displayName"
track-by="displayName" track-by="displayName"
:disabled="isDisabled" :disabled="isDisabled"
:options="calendars" :options="calendars"
:value="calendar" :value="calendar"
@select="change" @select="change">
>
<template slot="singleLabel" slot-scope="scope"> <template slot="singleLabel" slot-scope="scope">
<CalendarPickerOption v-bind="scope.option" /> <CalendarPickerOption v-bind="scope.option" />
</template> </template>
<template slot="option" slot-scope="scope"> <template slot="option" slot-scope="scope">
<CalendarPickerOption v-bind="scope.option" /> <CalendarPickerOption v-bind="scope.option" />
</template> </template>
</multiselect> </Multiselect>
</template> </template>
<script> <script>
import { import {
@ -34,17 +33,17 @@ export default {
}, },
calendars: { calendars: {
type: Array, type: Array,
required: true, required: true
}, },
showCalendarOnSelect: { showCalendarOnSelect: {
type: Boolean, type: Boolean,
default: false default: false
}, }
}, },
computed: { computed: {
isDisabled() { isDisabled() {
return this.calendars.length < 2 return this.calendars.length < 2
}, }
}, },
methods: { methods: {
change(newCalendar) { change(newCalendar) {

6
src/components/Shared/CalendarPickerOption.vue
View File

@ -24,8 +24,7 @@
<div class="calendar-picker-option"> <div class="calendar-picker-option">
<div <div
class="calendar-picker-option__color-indicator" class="calendar-picker-option__color-indicator"
:style="{ backgroundColor: color }" :style="{ backgroundColor: color }" />
/>
<span> <span>
{{ displayName }} {{ displayName }}
@ -38,8 +37,7 @@
:disable-tooltip="true" :disable-tooltip="true"
:user="userId" :user="userId"
:display-name="userDisplayName" :display-name="userDisplayName"
:size="18" :size="18" />
/>
</div> </div>
</template> </template>

5
src/components/Shared/TimezoneSelect.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<multiselect <Multiselect
:value="selectedTimezone" :value="selectedTimezone"
:options="options" :options="options"
:multiple="false" :multiple="false"
@ -10,8 +10,7 @@
track-by="timezoneId" track-by="timezoneId"
label="label" label="label"
open-direction="above" open-direction="above"
@input="change" @input="change" />
/>
</template> </template>
<script> <script>

2
src/fullcalendar/duration.js
View File

@ -156,7 +156,7 @@ function getDurationValueFromFullCalendarDurationEncodedAsString(fcDuration) {
return DurationValue.fromData({ return DurationValue.fromData({
hours: parseInt(hours, 10), hours: parseInt(hours, 10),
minutes: parseInt(minutes, 10), minutes: parseInt(minutes, 10)
}) })
} }

2
src/fullcalendar/eventClick.js
View File

@ -39,7 +39,7 @@ export default function(store, router, route) {
const name = getPrefixedRoute(route.name, desiredRoute) const name = getPrefixedRoute(route.name, desiredRoute)
const params = Object.assign({}, store.state.route.params, { const params = Object.assign({}, store.state.route.params, {
object: event.extendedProps.objectId, object: event.extendedProps.objectId,
recurrenceId: String(event.extendedProps.recurrenceId), recurrenceId: String(event.extendedProps.recurrenceId)
}) })
// Don't push new route when day didn't change // Don't push new route when day didn't change

2
src/fullcalendar/select.js
View File

@ -37,7 +37,7 @@ export default function(store, router) {
const params = Object.assign({}, store.state.route.params, { const params = Object.assign({}, store.state.route.params, {
allDay: allDay ? '1' : '0', allDay: allDay ? '1' : '0',
dtstart: String(Math.floor(start.getTime() / 1000)), dtstart: String(Math.floor(start.getTime() / 1000)),
dtend: String(Math.floor(end.getTime() / 1000)), dtend: String(Math.floor(end.getTime() / 1000))
}) })
// Don't push new route when day didn't change // Don't push new route when day didn't change

21
src/main.js
View File

@ -23,38 +23,19 @@
*/ */
import '@babel/polyfill' import '@babel/polyfill'
/* eslint-disable import/first */
import Vue from 'vue' import Vue from 'vue'
Vue.config.devtools = true
import App from './App' import App from './App'
import router from './router' import router from './router'
import store from './store' import store from './store'
import { sync } from 'vuex-router-sync' import { sync } from 'vuex-router-sync'
import { getRequestToken } from '@nextcloud/auth' import { getRequestToken } from '@nextcloud/auth'
import { linkTo } from '@nextcloud/router' import { linkTo } from '@nextcloud/router'
import { import { translate, translatePlural } from '@nextcloud/l10n'
Actions,
DatetimePicker,
Multiselect,
PopoverMenu,
Modal
} from '@nextcloud/vue'
import {
translate,
translatePlural
} from '@nextcloud/l10n'
import ClickOutside from 'vue-click-outside' import ClickOutside from 'vue-click-outside'
import VueClipboard from 'vue-clipboard2' import VueClipboard from 'vue-clipboard2'
import VTooltip from 'v-tooltip' import VTooltip from 'v-tooltip'
VueClipboard.config.autoSetContainer = true
// register global components // register global components
Vue.component('Actions', Actions)
Vue.component('DatetimePicker', DatetimePicker)
Vue.component('Modal', Modal)
Vue.component('Multiselect', Multiselect)
Vue.component('PopoverMenu', PopoverMenu)
Vue.directive('ClickOutside', ClickOutside) Vue.directive('ClickOutside', ClickOutside)
Vue.use(VTooltip) Vue.use(VTooltip)
Vue.use(VueClipboard) Vue.use(VueClipboard)

2
src/mixins/PropertyMixin.js
View File

@ -39,7 +39,7 @@ export default {
}, },
value: { value: {
required: true required: true
}, }
}, },
computed: { computed: {
icon() { icon() {

2
src/models/calendar.js
View File

@ -68,7 +68,7 @@ export const getDefaultCalendarObject = (props = {}) => Object.assign({}, {
// All calendar-objects from this calendar that have already been fetched // All calendar-objects from this calendar that have already been fetched
calendarObjects: [], calendarObjects: [],
// Time-ranges that have already been fetched for this calendar // Time-ranges that have already been fetched for this calendar
fetchedTimeRanges: [], fetchedTimeRanges: []
}, props) }, props)
/** /**

2
src/models/calendarObjectInstance.js
View File

@ -84,7 +84,7 @@ export const getDefaultCalendarObjectInstanceObject = (props = {}) => Object.ass
// Wether or not the user is allowed to toggle the all-day checkbox // Wether or not the user is allowed to toggle the all-day checkbox
canModifyAllDay: true, canModifyAllDay: true,
// The real event-component coming from calendar-js // The real event-component coming from calendar-js
eventComponent: null, eventComponent: null
}, props) }, props)
/** /**

2
src/models/principal.js
View File

@ -40,7 +40,7 @@ export const getDefaultPrincipalObject = (props) => Object.assign({}, {
// url to the DAV-principal-resource // url to the DAV-principal-resource
url: '', url: '',
// The cdav-library object // The cdav-library object
dav: false, dav: false
}, props) }, props)
/** /**

12
src/models/rfcProps.js
View File

@ -30,7 +30,7 @@ export default {
options: [ options: [
{ value: 'PUBLIC', label: translate('calendar', 'When shared show full event') }, { value: 'PUBLIC', label: translate('calendar', 'When shared show full event') },
{ value: 'CONFIDENTIAL', label: translate('calendar', 'When shared show only busy') }, { value: 'CONFIDENTIAL', label: translate('calendar', 'When shared show only busy') },
{ value: 'PRIVATE', label: translate('calendar', 'When shared hide this event') }, { value: 'PRIVATE', label: translate('calendar', 'When shared hide this event') }
], ],
multiple: false, multiple: false,
info: translate('calendar', 'The visibility of this event in shared calendars.'), info: translate('calendar', 'The visibility of this event in shared calendars.'),
@ -51,7 +51,7 @@ export default {
name: 'description', name: 'description',
readableName: translate('calendar', 'Description'), readableName: translate('calendar', 'Description'),
placeholder: translate('calendar', 'Add a description'), placeholder: translate('calendar', 'Add a description'),
icon: 'icon-menu', icon: 'icon-menu'
}, },
geo: { geo: {
name: 'geo', name: 'geo',
@ -70,7 +70,7 @@ export default {
options: [ options: [
{ value: 7, label: translate('calendar', 'Low') }, { value: 7, label: translate('calendar', 'Low') },
{ value: 5, label: translate('calendar', 'Medium') }, { value: 5, label: translate('calendar', 'Medium') },
{ value: 3, label: translate('calendar', 'High') }, { value: 3, label: translate('calendar', 'High') }
] ]
}, },
@ -81,7 +81,7 @@ export default {
options: [ options: [
{ value: 'CONFIRMED', label: translate('calendar', 'Confirmed') }, { value: 'CONFIRMED', label: translate('calendar', 'Confirmed') },
{ value: 'TENTATIVE', label: translate('calendar', 'Tentative') }, { value: 'TENTATIVE', label: translate('calendar', 'Tentative') },
{ value: 'CANCELLED', label: translate('calendar', 'Cancelled') }, { value: 'CANCELLED', label: translate('calendar', 'Cancelled') }
], ],
multiple: false, multiple: false,
default: true, default: true,
@ -97,7 +97,7 @@ export default {
info: translate('calendar', 'Take this event into account when calculating free-busy information'), info: translate('calendar', 'Take this event into account when calculating free-busy information'),
options: [ options: [
{ value: 'TRANSPARENT', label: translate('calendar', 'Free') }, { value: 'TRANSPARENT', label: translate('calendar', 'Free') },
{ value: 'OPAQUE', label: translate('calendar', 'Busy') }, { value: 'OPAQUE', label: translate('calendar', 'Busy') }
], ],
defaultValue: 'TRANSPARENT' defaultValue: 'TRANSPARENT'
}, },
@ -137,7 +137,7 @@ export default {
multiple: false, multiple: false,
default: false, default: false,
info: translate('calendar', 'Special color of this event. Overrides the calendar-color.') info: translate('calendar', 'Special color of this event. Overrides the calendar-color.')
}, }
// To be implemented later: // To be implemented later:
// conference: { // conference: {
// readableName: translate('calendar', 'Conference system'), // readableName: translate('calendar', 'Conference system'),

36
src/router.js
View File

@ -43,13 +43,13 @@ const router = new Router({
{ {
path: '/p/:tokens/:view/:firstDay/view/popover/:object/:recurrenceId', path: '/p/:tokens/:view/:firstDay/view/popover/:object/:recurrenceId',
name: 'PublicEditPopoverView', name: 'PublicEditPopoverView',
component: EditSimple, component: EditSimple
}, },
{ {
path: '/p/:tokens/:view/:firstDay/view/sidebar/:object/:recurrenceId', path: '/p/:tokens/:view/:firstDay/view/sidebar/:object/:recurrenceId',
name: 'PublicEditSidebarView', name: 'PublicEditSidebarView',
component: EditSidebar, component: EditSidebar
}, }
] ]
}, },
{ {
@ -60,13 +60,13 @@ const router = new Router({
{ {
path: '/embed/:tokens/:view/:firstDay/view/popover/:object/:recurrenceId', path: '/embed/:tokens/:view/:firstDay/view/popover/:object/:recurrenceId',
name: 'EmbedEditPopoverView', name: 'EmbedEditPopoverView',
component: EditSimple, component: EditSimple
}, },
{ {
path: '/embed/:tokens/:view/:firstDay/view/sidebar/:object/:recurrenceId', path: '/embed/:tokens/:view/:firstDay/view/sidebar/:object/:recurrenceId',
name: 'EmbedEditSidebarView', name: 'EmbedEditSidebarView',
component: EditSidebar, component: EditSidebar
}, }
] ]
}, },
/** /**
@ -78,19 +78,19 @@ const router = new Router({
*/ */
{ {
path: '/', path: '/',
redirect: `/${getInitialView()}/now`, redirect: `/${getInitialView()}/now`
}, },
{ {
path: '/p/:tokens/:fancyName?', path: '/p/:tokens/:fancyName?',
redirect: `/p/:tokens/${getInitialView()}/now`, redirect: `/p/:tokens/${getInitialView()}/now`
}, },
{ {
path: '/public/:tokens/:fancyName?', path: '/public/:tokens/:fancyName?',
redirect: `/p/:tokens/${getInitialView()}/now`, redirect: `/p/:tokens/${getInitialView()}/now`
}, },
{ {
path: '/embed/:tokens', path: '/embed/:tokens',
redirect: `/embed/:tokens/${getInitialView()}/now`, redirect: `/embed/:tokens/${getInitialView()}/now`
}, },
/** /**
* This is the main route that contains the current view and viewed day * This is the main route that contains the current view and viewed day
@ -107,26 +107,26 @@ const router = new Router({
{ {
path: '/:view/:firstDay/edit/popover/:object/:recurrenceId', path: '/:view/:firstDay/edit/popover/:object/:recurrenceId',
name: 'EditPopoverView', name: 'EditPopoverView',
component: EditSimple, component: EditSimple
}, },
{ {
path: '/:view/:firstDay/edit/sidebar/:object/:recurrenceId', path: '/:view/:firstDay/edit/sidebar/:object/:recurrenceId',
name: 'EditSidebarView', name: 'EditSidebarView',
component: EditSidebar, component: EditSidebar
}, },
{ {
path: '/:view/:firstDay/new/popover/:allDay/:dtstart/:dtend', path: '/:view/:firstDay/new/popover/:allDay/:dtstart/:dtend',
name: 'NewPopoverView', name: 'NewPopoverView',
component: EditSimple, component: EditSimple
}, },
{ {
path: '/:view/:firstDay/new/sidebar/:allDay/:dtstart/:dtend', path: '/:view/:firstDay/new/sidebar/:allDay/:dtstart/:dtend',
name: 'NewSidebarView', name: 'NewSidebarView',
component: EditSidebar, component: EditSidebar
}, }
], ]
}, }
], ]
}) })
windowTitleService(router) windowTitleService(router)

2
src/store/calendarObjectInstance.js
View File

@ -1302,7 +1302,7 @@ const actions = {
}) })
commit('changeRecurrenceToInfinite', { commit('changeRecurrenceToInfinite', {
calendarObjectInstance, calendarObjectInstance,
recurrenceRule: calendarObjectInstance.recurrenceRule, recurrenceRule: calendarObjectInstance.recurrenceRule
}) })
dispatch('setDefaultRecurrenceByParts', { calendarObjectInstance, recurrenceRule, frequency }) dispatch('setDefaultRecurrenceByParts', { calendarObjectInstance, recurrenceRule, frequency })

2
src/store/calendarObjects.js
View File

@ -29,7 +29,7 @@ import { createEvent, getTimezoneManager } from 'calendar-js'
const state = { const state = {
calendarObjects: {}, calendarObjects: {},
modificationCount: 0, modificationCount: 0
} }
const mutations = { const mutations = {

2
src/store/calendars.js
View File

@ -852,7 +852,7 @@ const actions = {
return Promise.all(requests).then(() => { return Promise.all(requests).then(() => {
context.commit('changeStage', 'default') context.commit('changeStage', 'default')
}) })
}, }
} }
export default { state, mutations, getters, actions } export default { state, mutations, getters, actions }

2
src/store/importFiles.js
View File

@ -97,7 +97,7 @@ const mutations = {
Vue.set(state, 'importFiles', []) Vue.set(state, 'importFiles', [])
Vue.set(state, 'importFilesById', {}) Vue.set(state, 'importFilesById', {})
Vue.set(state, 'importCalendarRelation', {}) Vue.set(state, 'importCalendarRelation', {})
}, }
} }
const getters = {} const getters = {}

2
src/store/importState.js
View File

@ -26,7 +26,7 @@ const state = {
total: 0, total: 0,
accepted: 0, accepted: 0,
denied: 0, denied: 0,
stage: 'default', stage: 'default'
} }
const mutations = { const mutations = {

2
src/store/index.js
View File

@ -51,7 +51,7 @@ export default new Vuex.Store({
importState, importState,
principals, principals,
settings settings
}, }
// // Throw errors when the state is edited outside of mutations // // Throw errors when the state is edited outside of mutations
// strict: true // strict: true
}) })

2
src/store/principals.js
View File

@ -94,7 +94,7 @@ const getters = {
* @param {Object} state the store data * @param {Object} state the store data
* @returns {String} * @returns {String}
*/ */
getCurrentUserPrincipalEmail: (state) => state.principalsById[state.currentUserPrincipal].emailAddress, getCurrentUserPrincipalEmail: (state) => state.principalsById[state.currentUserPrincipal].emailAddress
} }
const actions = { const actions = {

108
src/utils/illustration.js
View File

@ -51,13 +51,13 @@ const data = [{
// TRANSLATORS This string is used for matching the event title to an illustration // TRANSLATORS This string is used for matching the event title to an illustration
translate('calendar', 'Relaxing'), translate('calendar', 'Relaxing'),
// TRANSLATORS This string is used for matching the event title to an illustration // TRANSLATORS This string is used for matching the event title to an illustration
translate('calendar', 'Relax'), translate('calendar', 'Relax')
], ],
illustrationNames: [ illustrationNames: [
'relaxation', 'relaxation',
'meditation', 'meditation',
'a_moment_to_relax' 'a_moment_to_relax'
], ]
}, { }, {
strings: [ strings: [
'Presentation', 'Presentation',
@ -65,12 +65,12 @@ const data = [{
// TRANSLATORS This string is used for matching the event title to an illustration // TRANSLATORS This string is used for matching the event title to an illustration
translate('calendar', 'Presentation'), translate('calendar', 'Presentation'),
// TRANSLATORS This string is used for matching the event title to an illustration // TRANSLATORS This string is used for matching the event title to an illustration
translate('calendar', 'Present'), translate('calendar', 'Present')
], ],
illustrationNames: [ illustrationNames: [
'presentation', 'presentation',
'business_plan' 'business_plan'
], ]
}, { }, {
strings: [ strings: [
'Camping', 'Camping',
@ -78,12 +78,12 @@ const data = [{
// TRANSLATORS This string is used for matching the event title to an illustration // TRANSLATORS This string is used for matching the event title to an illustration
translate('calendar', 'Camping'), translate('calendar', 'Camping'),
// TRANSLATORS This string is used for matching the event title to an illustration // TRANSLATORS This string is used for matching the event title to an illustration
translate('calendar', 'Camp'), translate('calendar', 'Camp')
], ],
illustrationNames: [ illustrationNames: [
'camping', 'camping',
'into_the_night' 'into_the_night'
], ]
}, { }, {
strings: [ strings: [
'Movie', 'Movie',
@ -91,20 +91,20 @@ const data = [{
// TRANSLATORS This string is used for matching the event title to an illustration // TRANSLATORS This string is used for matching the event title to an illustration
translate('calendar', 'Movie'), translate('calendar', 'Movie'),
// TRANSLATORS This string is used for matching the event title to an illustration // TRANSLATORS This string is used for matching the event title to an illustration
translate('calendar', 'Cinema'), translate('calendar', 'Cinema')
], ],
illustrationNames: [ illustrationNames: [
'movie_night' 'movie_night'
], ]
}, { }, {
strings: [ strings: [
'Graduation', 'Graduation',
// TRANSLATORS This string is used for matching the event title to an illustration // TRANSLATORS This string is used for matching the event title to an illustration
translate('calendar', 'Graduation'), translate('calendar', 'Graduation')
], ],
illustrationNames: [ illustrationNames: [
'graduation' 'graduation'
], ]
}, { }, {
strings: [ strings: [
'Brainstorm', 'Brainstorm',
@ -113,7 +113,7 @@ const data = [{
], ],
illustrationNames: [ illustrationNames: [
'creation_process' 'creation_process'
], ]
}, { }, {
strings: [ strings: [
'Baseball', 'Baseball',
@ -123,7 +123,7 @@ const data = [{
illustrationNames: [ illustrationNames: [
'home_run', 'home_run',
'greek_freak' 'greek_freak'
], ]
}, { }, {
strings: [ strings: [
'Meeting', 'Meeting',
@ -135,7 +135,7 @@ const data = [{
], ],
illustrationNames: [ illustrationNames: [
'meeting' 'meeting'
], ]
}, { }, {
strings: [ strings: [
'Office', 'Office',
@ -144,7 +144,7 @@ const data = [{
], ],
illustrationNames: [ illustrationNames: [
'in_the_office' 'in_the_office'
], ]
}, { }, {
strings: [ strings: [
'Party', 'Party',
@ -156,7 +156,7 @@ const data = [{
], ],
illustrationNames: [ illustrationNames: [
'celebration' 'celebration'
], ]
}, { }, {
strings: [ strings: [
'Mail', 'Mail',
@ -165,7 +165,7 @@ const data = [{
], ],
illustrationNames: [ illustrationNames: [
'newsletter' 'newsletter'
], ]
}, { }, {
strings: [ strings: [
'Soccer', 'Soccer',
@ -177,7 +177,7 @@ const data = [{
], ],
illustrationNames: [ illustrationNames: [
'goal' 'goal'
], ]
}, { }, {
strings: [ strings: [
'Gaming', 'Gaming',
@ -188,12 +188,12 @@ const data = [{
// TRANSLATORS This string is used for matching the event title to an illustration // TRANSLATORS This string is used for matching the event title to an illustration
translate('calendar', 'Play'), translate('calendar', 'Play'),
// TRANSLATORS This string is used for matching the event title to an illustration // TRANSLATORS This string is used for matching the event title to an illustration
translate('calendar', 'Game'), translate('calendar', 'Game')
], ],
illustrationNames: [ illustrationNames: [
'gaming', 'gaming',
'old_day' 'old_day'
], ]
}, { }, {
strings: [ strings: [
'Drive', 'Drive',
@ -202,7 +202,7 @@ const data = [{
], ],
illustrationNames: [ illustrationNames: [
'electric_car' 'electric_car'
], ]
}, { }, {
strings: [ strings: [
'Bicycle', 'Bicycle',
@ -213,12 +213,12 @@ const data = [{
// TRANSLATORS This string is used for matching the event title to an illustration // TRANSLATORS This string is used for matching the event title to an illustration
translate('calendar', 'Cycle'), translate('calendar', 'Cycle'),
// TRANSLATORS This string is used for matching the event title to an illustration // TRANSLATORS This string is used for matching the event title to an illustration
translate('calendar', 'Biking'), translate('calendar', 'Biking')
], ],
illustrationNames: [ illustrationNames: [
'bicycle', 'bicycle',
'biking' 'biking'
], ]
}, { }, {
strings: [ strings: [
'Podcast', 'Podcast',
@ -227,7 +227,7 @@ const data = [{
], ],
illustrationNames: [ illustrationNames: [
'podcast' 'podcast'
], ]
}, { }, {
strings: [ strings: [
'Basketball', 'Basketball',
@ -236,7 +236,7 @@ const data = [{
], ],
illustrationNames: [ illustrationNames: [
'basketball' 'basketball'
], ]
}, { }, {
strings: [ strings: [
'Fishing', 'Fishing',
@ -245,7 +245,7 @@ const data = [{
], ],
illustrationNames: [ illustrationNames: [
'fishing' 'fishing'
], ]
}, { }, {
strings: [ strings: [
'Hiking', 'Hiking',
@ -258,7 +258,7 @@ const data = [{
illustrationNames: [ illustrationNames: [
'exploring', 'exploring',
'hiking' 'hiking'
], ]
}, { }, {
strings: [ strings: [
'Art', 'Art',
@ -273,7 +273,7 @@ const data = [{
], ],
illustrationNames: [ illustrationNames: [
'art_lover' 'art_lover'
], ]
}, { }, {
strings: [ strings: [
'Pilates', 'Pilates',
@ -282,7 +282,7 @@ const data = [{
], ],
illustrationNames: [ illustrationNames: [
'pilates' 'pilates'
], ]
}, { }, {
strings: [ strings: [
'Park', 'Park',
@ -291,7 +291,7 @@ const data = [{
], ],
illustrationNames: [ illustrationNames: [
'a_day_at_the_park' 'a_day_at_the_park'
], ]
}, { }, {
strings: [ strings: [
'Studying', 'Studying',
@ -300,7 +300,7 @@ const data = [{
], ],
illustrationNames: [ illustrationNames: [
'studying' 'studying'
], ]
}, { }, {
strings: [ strings: [
'Doctor', 'Doctor',
@ -313,7 +313,7 @@ const data = [{
illustrationNames: [ illustrationNames: [
'doctors', 'doctors',
'medicine' 'medicine'
], ]
}, { }, {
strings: [ strings: [
'Interview', 'Interview',
@ -322,7 +322,7 @@ const data = [{
], ],
illustrationNames: [ illustrationNames: [
'interview' 'interview'
], ]
}, { }, {
strings: [ strings: [
'Training', 'Training',
@ -344,7 +344,7 @@ const data = [{
illustrationNames: [ illustrationNames: [
'personal_trainer', 'personal_trainer',
'working_out' 'working_out'
], ]
}, { }, {
strings: [ strings: [
'Barber', 'Barber',
@ -356,7 +356,7 @@ const data = [{
], ],
illustrationNames: [ illustrationNames: [
'barber' 'barber'
], ]
}, { }, {
strings: [ strings: [
'Exam', 'Exam',
@ -365,7 +365,7 @@ const data = [{
], ],
illustrationNames: [ illustrationNames: [
'exams' 'exams'
], ]
}, { }, {
strings: [ strings: [
'Working', 'Working',
@ -374,7 +374,7 @@ const data = [{
], ],
illustrationNames: [ illustrationNames: [
'working_remotely' 'working_remotely'
], ]
}, { }, {
strings: [ strings: [
'New Years Eve', 'New Years Eve',
@ -389,7 +389,7 @@ const data = [{
], ],
illustrationNames: [ illustrationNames: [
'fireworks' 'fireworks'
], ]
}, { }, {
strings: [ strings: [
'Running', 'Running',
@ -404,7 +404,7 @@ const data = [{
], ],
illustrationNames: [ illustrationNames: [
'finish_line_katerina_limpitsouni' 'finish_line_katerina_limpitsouni'
], ]
}, { }, {
strings: [ strings: [
'Call', 'Call',
@ -416,7 +416,7 @@ const data = [{
], ],
illustrationNames: [ illustrationNames: [
'calling' 'calling'
], ]
}, { }, {
strings: [ strings: [
'Christmas', 'Christmas',
@ -425,7 +425,7 @@ const data = [{
], ],
illustrationNames: [ illustrationNames: [
'christmas_tree' 'christmas_tree'
], ]
}, { }, {
strings: [ strings: [
'Conference', 'Conference',
@ -434,7 +434,7 @@ const data = [{
], ],
illustrationNames: [ illustrationNames: [
'conference_speaker' 'conference_speaker'
], ]
}, { }, {
strings: [ strings: [
'Pizza', 'Pizza',
@ -443,7 +443,7 @@ const data = [{
], ],
illustrationNames: [ illustrationNames: [
'pizza_sharing' 'pizza_sharing'
], ]
}, { }, {
strings: [ strings: [
'Travelling', 'Travelling',
@ -457,7 +457,7 @@ const data = [{
'travelers', 'travelers',
'adventure', 'adventure',
'travel_plans' 'travel_plans'
], ]
}, { }, {
strings: [ strings: [
'Journey', 'Journey',
@ -466,7 +466,7 @@ const data = [{
], ],
illustrationNames: [ illustrationNames: [
'journey' 'journey'
], ]
}, { }, {
strings: [ strings: [
'Collaborate', 'Collaborate',
@ -475,7 +475,7 @@ const data = [{
], ],
illustrationNames: [ illustrationNames: [
'collab' 'collab'
], ]
}, { }, {
strings: [ strings: [
'Lecture', 'Lecture',
@ -487,7 +487,7 @@ const data = [{
], ],
illustrationNames: [ illustrationNames: [
'professor' 'professor'
], ]
}, { }, {
strings: [ strings: [
'Photograph', 'Photograph',
@ -497,7 +497,7 @@ const data = [{
illustrationNames: [ illustrationNames: [
'camera', 'camera',
'photo_session' 'photo_session'
], ]
}, { }, {
strings: [ strings: [
'Party', 'Party',
@ -508,11 +508,11 @@ const data = [{
// TRANSLATORS This string is used for matching the event title to an illustration // TRANSLATORS This string is used for matching the event title to an illustration
translate('calendar', 'Celebration'), translate('calendar', 'Celebration'),
// TRANSLATORS This string is used for matching the event title to an illustration // TRANSLATORS This string is used for matching the event title to an illustration
translate('calendar', 'Celebrate'), translate('calendar', 'Celebrate')
], ],
illustrationNames: [ illustrationNames: [
'party' 'party'
], ]
}, { }, {
strings: [ strings: [
'Shopping', 'Shopping',
@ -522,7 +522,7 @@ const data = [{
illustrationNames: [ illustrationNames: [
'empty_cart', 'empty_cart',
'window_shopping' 'window_shopping'
], ]
}, { }, {
strings: [ strings: [
'Skate', 'Skate',
@ -534,7 +534,7 @@ const data = [{
], ],
illustrationNames: [ illustrationNames: [
'skateboard' 'skateboard'
], ]
}, { }, {
strings: [ strings: [
'Wine tasting', 'Wine tasting',
@ -543,7 +543,7 @@ const data = [{
], ],
illustrationNames: [ illustrationNames: [
'wine_tasting' 'wine_tasting'
], ]
}, { }, {
strings: [ strings: [
'Golf', 'Golf',
@ -552,7 +552,7 @@ const data = [{
], ],
illustrationNames: [ illustrationNames: [
'golf' 'golf'
], ]
}, { }, {
strings: [ strings: [
'Dinner', 'Dinner',
@ -561,5 +561,5 @@ const data = [{
], ],
illustrationNames: [ illustrationNames: [
'dinner' 'dinner'
], ]
}] }]

14
src/views/Calendar.vue
View File

@ -27,13 +27,11 @@
<!-- Calendar / Subscription List --> <!-- Calendar / Subscription List -->
<CalendarList <CalendarList
:is-public="!isAuthenticatedUser" :is-public="!isAuthenticatedUser"
:loading-calendars="loadingCalendars" :loading-calendars="loadingCalendars" />
/>
<!-- Settings and import --> <!-- Settings and import -->
<Settings <Settings
v-if="isAuthenticatedUser" v-if="isAuthenticatedUser"
:loading-calendars="loadingCalendars" :loading-calendars="loadingCalendars" />
/>
</AppNavigation> </AppNavigation>
<EmbedTopNavigation v-if="isEmbedded" /> <EmbedTopNavigation v-if="isEmbedded" />
<AppContent> <AppContent>
@ -64,12 +62,10 @@
@eventDrop="eventDrop" @eventDrop="eventDrop"
@eventResize="eventResize" @eventResize="eventResize"
@eventRender="eventRender" @eventRender="eventRender"
@select="select" @select="select" />
/>
<EmptyCalendar <EmptyCalendar
v-if="showEmptyCalendarScreen" v-if="showEmptyCalendarScreen" />
/>
</AppContent> </AppContent>
<!-- Edit modal --> <!-- Edit modal -->
<router-view v-if="!loadingCalendars" /> <router-view v-if="!loadingCalendars" />
@ -211,7 +207,7 @@ export default {
} }
return null return null
}, }
}, },
beforeRouteUpdate(to, from, next) { beforeRouteUpdate(to, from, next) {
if (to.params.firstDay !== from.params.firstDay) { if (to.params.firstDay !== from.params.firstDay) {

101
src/views/EditSidebar.vue
View File

@ -29,10 +29,9 @@
:title-placeholder="$t('calendar', 'Untitled event')" :title-placeholder="$t('calendar', 'Untitled event')"
:subtitle="subTitle" :subtitle="subTitle"
@close="cancel" @close="cancel"
@update:title="updateTitle" @update:title="updateTitle">
>
<template v-slot:primary-actions style="max-height: none !important"> <template v-slot:primary-actions style="max-height: none !important">
<property-title-time-picker <PropertyTitleTimePicker
v-if="!isLoading" v-if="!isLoading"
:start-date="startDate" :start-date="startDate"
:start-timezone="startTimezone" :start-timezone="startTimezone"
@ -46,11 +45,9 @@
@updateStartTimezone="updateStartTimezone" @updateStartTimezone="updateStartTimezone"
@updateEndDate="updateEndDate" @updateEndDate="updateEndDate"
@updateEndTimezone="updateEndTimezone" @updateEndTimezone="updateEndTimezone"
@toggleAllDay="toggleAllDay" @toggleAllDay="toggleAllDay" />
/> <PropertyTitleTimePickerLoadingPlaceholder
<property-title-time-picker-loading-placeholder v-if="isLoading" />
v-if="isLoading"
/>
</template> </template>
<template v-slot:header> <template v-slot:header>
@ -58,9 +55,10 @@
</template> </template>
<template v-slot:secondary-actions> <template v-slot:secondary-actions>
<ActionLink v-if="hasDownloadURL" icon="icon-download" :title="$t('calendar', 'Download')" <ActionLink v-if="hasDownloadURL"
:href="downloadURL" icon="icon-download"
/> :title="$t('calendar', 'Download')"
:href="downloadURL" />
<ActionButton v-if="canDelete && !canCreateRecurrenceException" icon="icon-delete" @click="deleteAndLeave(false)"> <ActionButton v-if="canDelete && !canCreateRecurrenceException" icon="icon-delete" @click="deleteAndLeave(false)">
{{ $t('calendar', 'Delete') }} {{ $t('calendar', 'Delete') }}
</ActionButton> </ActionButton>
@ -76,124 +74,109 @@
class="app-sidebar-tab" class="app-sidebar-tab"
icon="icon-details" icon="icon-details"
:name="$t('calendar', 'Details')" :name="$t('calendar', 'Details')"
:order="0" :order="0">
>
<div v-if="isLoading" class="app-sidebar-tab__loading"> <div v-if="isLoading" class="app-sidebar-tab__loading">
<div class="app-sidebar-tab-loading-indicator"> <div class="app-sidebar-tab-loading-indicator">
<div class="icon icon-loading app-sidebar-tab-loading-indicator__icon" /> <div class="icon icon-loading app-sidebar-tab-loading-indicator__icon" />
</div> </div>
</div> </div>
<div v-if="!isLoading" class="app-sidebar-tab__content"> <div v-if="!isLoading" class="app-sidebar-tab__content">
<property-calendar-picker <PropertyCalendarPicker
:calendars="calendars" :calendars="calendars"
:calendar="selectedCalendar" :calendar="selectedCalendar"
:is-read-only="isReadOnly" :is-read-only="isReadOnly"
@selectCalendar="changeCalendar" @selectCalendar="changeCalendar" />
/>
<property-text <PropertyText
:is-read-only="isReadOnly" :is-read-only="isReadOnly"
:prop-model="rfcProps.location" :prop-model="rfcProps.location"
:value="location" :value="location"
@update:value="updateLocation" @update:value="updateLocation" />
/> <PropertyText
<property-text
:is-read-only="isReadOnly" :is-read-only="isReadOnly"
:prop-model="rfcProps.description" :prop-model="rfcProps.description"
:value="description" :value="description"
@update:value="updateDescription" @update:value="updateDescription" />
/>
<property-select <PropertySelect
:is-read-only="isReadOnly" :is-read-only="isReadOnly"
:prop-model="rfcProps.status" :prop-model="rfcProps.status"
:value="status" :value="status"
@update:value="updateStatus" @update:value="updateStatus" />
/> <PropertySelect
<property-select
:is-read-only="isReadOnly" :is-read-only="isReadOnly"
:prop-model="rfcProps.class" :prop-model="rfcProps.class"
:value="accessClass" :value="accessClass"
@update:value="updateAccessClass" @update:value="updateAccessClass" />
/> <PropertySelect
<property-select
:is-read-only="isReadOnly" :is-read-only="isReadOnly"
:prop-model="rfcProps.timeTransparency" :prop-model="rfcProps.timeTransparency"
:value="timeTransparency" :value="timeTransparency"
@update:value="updateTimeTransparency" @update:value="updateTimeTransparency" />
/>
</div> </div>
<save-buttons <SaveButtons
v-if="!isReadOnly" v-if="!isReadOnly"
class="app-sidebar-tab__buttons" class="app-sidebar-tab__buttons"
:can-create-recurrence-exception="canCreateRecurrenceException" :can-create-recurrence-exception="canCreateRecurrenceException"
:is-new="isNew" :is-new="isNew"
:force-this-and-all-future="forceThisAndAllFuture" :force-this-and-all-future="forceThisAndAllFuture"
@saveThisOnly="saveAndLeave(false)" @saveThisOnly="saveAndLeave(false)"
@saveThisAndAllFuture="saveAndLeave(true)" @saveThisAndAllFuture="saveAndLeave(true)" />
/>
</AppSidebarTab> </AppSidebarTab>
<AppSidebarTab <AppSidebarTab
class="app-sidebar-tab" class="app-sidebar-tab"
icon="icon-group" icon="icon-group"
:name="$t('calendar', 'Attendees')" :name="$t('calendar', 'Attendees')"
:order="1" :order="1">
>
<div v-if="isLoading" class="app-sidebar-tab__loading"> <div v-if="isLoading" class="app-sidebar-tab__loading">
<div class="app-sidebar-tab-loading-indicator"> <div class="app-sidebar-tab-loading-indicator">
<div class="icon icon-loading app-sidebar-tab-loading-indicator__icon" /> <div class="icon icon-loading app-sidebar-tab-loading-indicator__icon" />
</div> </div>
</div> </div>
<div v-if="!isLoading" class="app-sidebar-tab__content"> <div v-if="!isLoading" class="app-sidebar-tab__content">
<invitees-list <InviteesList
v-if="!isLoading" v-if="!isLoading"
:calendar-object-instance="calendarObjectInstance" :calendar-object-instance="calendarObjectInstance"
:is-read-only="isReadOnly" :is-read-only="isReadOnly" />
/>
</div> </div>
<save-buttons <SaveButtons
v-if="!isReadOnly" v-if="!isReadOnly"
class="app-sidebar-tab__buttons" class="app-sidebar-tab__buttons"
:can-create-recurrence-exception="canCreateRecurrenceException" :can-create-recurrence-exception="canCreateRecurrenceException"
:is-new="isNew" :is-new="isNew"
:force-this-and-all-future="forceThisAndAllFuture" :force-this-and-all-future="forceThisAndAllFuture"
@saveThisOnly="saveAndLeave(false)" @saveThisOnly="saveAndLeave(false)"
@saveThisAndAllFuture="saveAndLeave(true)" @saveThisAndAllFuture="saveAndLeave(true)" />
/>
</AppSidebarTab> </AppSidebarTab>
<AppSidebarTab <AppSidebarTab
class="app-sidebar-tab" class="app-sidebar-tab"
icon="icon-reminder" icon="icon-reminder"
:name="$t('calendar', 'Reminders')" :name="$t('calendar', 'Reminders')"
:order="2" :order="2">
>
<div v-if="isLoading" class="app-sidebar-tab__loading"> <div v-if="isLoading" class="app-sidebar-tab__loading">
<div class="app-sidebar-tab-loading-indicator"> <div class="app-sidebar-tab-loading-indicator">
<div class="icon icon-loading app-sidebar-tab-loading-indicator__icon" /> <div class="icon icon-loading app-sidebar-tab-loading-indicator__icon" />
</div> </div>
</div> </div>
<div v-if="!isLoading" class="app-sidebar-tab__content"> <div v-if="!isLoading" class="app-sidebar-tab__content">
<alarm-list <AlarmList
:calendar-object-instance="calendarObjectInstance" :calendar-object-instance="calendarObjectInstance"
:is-read-only="isReadOnly" :is-read-only="isReadOnly" />
/>
</div> </div>
<save-buttons <SaveButtons
v-if="!isReadOnly" v-if="!isReadOnly"
class="app-sidebar-tab__buttons" class="app-sidebar-tab__buttons"
:can-create-recurrence-exception="canCreateRecurrenceException" :can-create-recurrence-exception="canCreateRecurrenceException"
:is-new="isNew" :is-new="isNew"
:force-this-and-all-future="forceThisAndAllFuture" :force-this-and-all-future="forceThisAndAllFuture"
@saveThisOnly="saveAndLeave(false)" @saveThisOnly="saveAndLeave(false)"
@saveThisAndAllFuture="saveAndLeave(true)" @saveThisAndAllFuture="saveAndLeave(true)" />
/>
</AppSidebarTab> </AppSidebarTab>
<AppSidebarTab <AppSidebarTab
class="app-sidebar-tab" class="app-sidebar-tab"
icon="icon-repeat" icon="icon-repeat"
:name="$t('calendar', 'Repeat')" :name="$t('calendar', 'Repeat')"
:order="3" :order="3">
>
<div v-if="isLoading" class="app-sidebar-tab__loading"> <div v-if="isLoading" class="app-sidebar-tab__loading">
<div class="app-sidebar-tab-loading-indicator"> <div class="app-sidebar-tab-loading-indicator">
<div class="icon icon-loading app-sidebar-tab-loading-indicator__icon" /> <div class="icon icon-loading app-sidebar-tab-loading-indicator__icon" />
@ -202,24 +185,22 @@
<div v-if="!isLoading" class="app-sidebar-tab__content"> <div v-if="!isLoading" class="app-sidebar-tab__content">
<!-- TODO: If not editing the master item, force updating this and all future --> <!-- TODO: If not editing the master item, force updating this and all future -->
<!-- TODO: You can't edit recurrence-rule of no-range recurrence-exception --> <!-- TODO: You can't edit recurrence-rule of no-range recurrence-exception -->
<repeat <Repeat
:calendar-object-instance="calendarObjectInstance" :calendar-object-instance="calendarObjectInstance"
:recurrence-rule="calendarObjectInstance.recurrenceRule" :recurrence-rule="calendarObjectInstance.recurrenceRule"
:is-read-only="isReadOnly" :is-read-only="isReadOnly"
:is-editing-master-item="isEditingMasterItem" :is-editing-master-item="isEditingMasterItem"
:is-recurrence-exception="isRecurrenceException" :is-recurrence-exception="isRecurrenceException"
@forceThisAndAllFuture="forceModifyingFuture" @forceThisAndAllFuture="forceModifyingFuture" />
/>
</div> </div>
<save-buttons <SaveButtons
v-if="!isReadOnly" v-if="!isReadOnly"
class="app-sidebar-tab__buttons" class="app-sidebar-tab__buttons"
:can-create-recurrence-exception="canCreateRecurrenceException" :can-create-recurrence-exception="canCreateRecurrenceException"
:is-new="isNew" :is-new="isNew"
:force-this-and-all-future="forceThisAndAllFuture" :force-this-and-all-future="forceThisAndAllFuture"
@saveThisOnly="saveAndLeave(false)" @saveThisOnly="saveAndLeave(false)"
@saveThisAndAllFuture="saveAndLeave(true)" @saveThisAndAllFuture="saveAndLeave(true)" />
/>
</AppSidebarTab> </AppSidebarTab>
<!--<AppSidebarTab :name="$t('calendar', 'Activity')" icon="icon-history" :order="4">--> <!--<AppSidebarTab :name="$t('calendar', 'Activity')" icon="icon-history" :order="4">-->
<!-- This is the activity tab--> <!-- This is the activity tab-->
@ -269,7 +250,7 @@ export default {
PropertySelect, PropertySelect,
PropertyText, PropertyText,
PropertyTitleTimePicker, PropertyTitleTimePicker,
Repeat, Repeat
}, },
mixins: [ mixins: [
EditorMixin EditorMixin
@ -339,7 +320,7 @@ export default {
calendarObjectInstance: this.calendarObjectInstance, calendarObjectInstance: this.calendarObjectInstance,
timeTransparency timeTransparency
}) })
}, }
} }
} }
</script> </script>

43
src/views/EditSimple.vue
View File

@ -27,20 +27,16 @@
:placement="placement" :placement="placement"
boundaries-element="#app-content" boundaries-element="#app-content"
open-class="event-popover" open-class="event-popover"
trigger="manual" trigger="manual">
>
<PopoverLoadingIndicator <PopoverLoadingIndicator
v-if="isLoading" v-if="isLoading" />
/>
<Actions <Actions
v-if="!isLoading" v-if="!isLoading"
class="event-popover__close-action" class="event-popover__close-action">
>
<ActionButton <ActionButton
icon="icon-close" icon="icon-close"
@click="cancel" @click="cancel">
>
{{ $t('calendar', 'Close') }} {{ $t('calendar', 'Close') }}
</ActionButton> </ActionButton>
</Actions> </Actions>
@ -48,17 +44,15 @@
<IllustrationHeader <IllustrationHeader
v-if="!isLoading" v-if="!isLoading"
:color="selectedCalendarColor" :color="selectedCalendarColor"
:illustration-url="backgroundImage" :illustration-url="backgroundImage" />
/>
<PropertyTitle <PropertyTitle
v-if="!isLoading" v-if="!isLoading"
:value="title" :value="title"
:is-read-only="isReadOnly" :is-read-only="isReadOnly"
@update:value="updateTitle" @update:value="updateTitle" />
/>
<property-title-time-picker <PropertyTitleTimePicker
v-if="!isLoading" v-if="!isLoading"
:start-date="startDate" :start-date="startDate"
:start-timezone="startTimezone" :start-timezone="startTimezone"
@ -72,33 +66,29 @@
@updateStartTimezone="updateStartTimezone" @updateStartTimezone="updateStartTimezone"
@updateEndDate="updateEndDate" @updateEndDate="updateEndDate"
@updateEndTimezone="updateEndTimezone" @updateEndTimezone="updateEndTimezone"
@toggleAllDay="toggleAllDay" @toggleAllDay="toggleAllDay" />
/>
<property-calendar-picker <PropertyCalendarPicker
v-if="!isLoading" v-if="!isLoading"
:calendars="calendars" :calendars="calendars"
:calendar="selectedCalendar" :calendar="selectedCalendar"
:is-read-only="isReadOnly" :is-read-only="isReadOnly"
@selectCalendar="changeCalendar" @selectCalendar="changeCalendar" />
/>
<property-text <PropertyText
v-if="!isLoading && hasLocation" v-if="!isLoading && hasLocation"
:is-read-only="isReadOnly" :is-read-only="isReadOnly"
:prop-model="rfcProps.location" :prop-model="rfcProps.location"
:value="location" :value="location"
@update:value="updateLocation" @update:value="updateLocation" />
/> <PropertyText
<property-text
v-if="!isLoading && hasDescription" v-if="!isLoading && hasDescription"
:is-read-only="isReadOnly" :is-read-only="isReadOnly"
:prop-model="rfcProps.description" :prop-model="rfcProps.description"
:value="description" :value="description"
@update:value="updateDescription" @update:value="updateDescription" />
/>
<save-buttons <SaveButtons
v-if="!isReadOnly" v-if="!isReadOnly"
class="event-popover__buttons" class="event-popover__buttons"
:can-create-recurrence-exception="canCreateRecurrenceException" :can-create-recurrence-exception="canCreateRecurrenceException"
@ -107,8 +97,7 @@
:show-more-button="true" :show-more-button="true"
@saveThisOnly="saveAndLeave(false)" @saveThisOnly="saveAndLeave(false)"
@saveThisAndAllFuture="saveAndLeave(true)" @saveThisAndAllFuture="saveAndLeave(true)"
@showMore="showMore" @showMore="showMore" />
/>
</Popover> </Popover>
</template> </template>
<script> <script>