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 = {
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: [
'eslint:recommended',
'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"]
}]
}
'nextcloud'
]
};

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 {
max-height: 150px;
height: 150px;
@ -601,3 +583,21 @@
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": {
"version": "12.0.0",
"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": {
"version": "10.0.0",
"resolved": "https://registry.npmjs.org/eslint-plugin-node/-/eslint-plugin-node-10.0.0.tgz",
@ -12392,6 +12407,12 @@
"integrity": "sha1-eZlTn8ngR6N5KPoZb44VY9q9Nt4=",
"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": {
"version": "1.8.1",
"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",
"css-loader": "^3.2.0",
"eslint": "^5.16.0",
"eslint-config-nextcloud": "0.0.6",
"eslint-config-standard": "^12.0.0",
"eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^3.0.2",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-nextcloud": "^0.3.0",
"eslint-plugin-node": "^10.0.0",
"eslint-plugin-promise": "^4.2.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"
:title="previousLabel"
type="button"
@click="navigateToPreviousTimeRange"
/>
@click="navigateToPreviousTimeRange" />
<button
class="datepicker-button-section__datepicker-label button datepicker-label"
@click.stop.prevent="toggleDatepicker"
@mousedown.stop.prevent="doNothing"
@mouseup.stop.prevent="doNothing"
>
@mouseup.stop.prevent="doNothing">
{{ selectedDate | formatDateRage(view) }}
</button>
<datetime-picker
<DatetimePicker
ref="datepicker"
class="datepicker-button-section__datepicker"
:first-day-of-week="firstDay"
@ -48,15 +46,13 @@
:not-after="maximumDate"
:value="selectedDate"
:input-attr="inputItemAttributes"
@change="navigateToDate"
/>
@change="navigateToDate" />
<button
:aria-label="nextLabel"
class="datepicker-button-section__next button icon icon-rightarrow"
:title="nextLabel"
type="button"
@click="navigateToNextTimeRange"
/>
@click="navigateToNextTimeRange" />
</div>
</template>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -16,16 +16,14 @@
icon="icon-download"
target="_blank"
: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 default-icon="icon-calendar-dark">
<ActionButton
v-for="calendar in subscriptions"
:key="calendar.id"
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') }) }}
</ActionButton>
</Actions>
@ -61,7 +59,7 @@ export default {
computed: {
...mapGetters({
subscriptions: 'sortedSubscriptions'
}),
})
},
methods: {
copySubscriptionLink(calendar) {

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

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

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

@ -21,7 +21,7 @@
-->
<template>
<modal class="import-modal" size="large" @close="cancelImport">
<Modal class="import-modal" size="large" @close="cancelImport">
<h2 class="import-modal__title">
{{ $t('calendar', 'Import calendars') }}
</h2>
@ -38,7 +38,7 @@
{{ $t('calendar', 'Calendar to import into') }}
</div>
</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>
<div class="import-modal__actions">
@ -49,7 +49,7 @@
{{ $n('calendar', 'Import calendar', 'Import calendars', files.length) }}
</button>
</div>
</modal>
</Modal>
</template>
<script>
@ -68,7 +68,7 @@ export default {
files: {
type: Array,
required: true
},
}
},
computed: {
headerRowKey() {

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

@ -25,14 +25,16 @@
<div class="import-modal-file-item__filename">
{{ file.name }}
</div>
<calendar-picker class="import-modal-file-item__calendar-select" :calendar="calendar"
:calendars="calendars" @selectCalendar="selectCalendar"
/>
<CalendarPicker class="import-modal-file-item__calendar-select"
:calendar="calendar"
:calendars="calendars"
@selectCalendar="selectCalendar" />
</li>
</template>
<script>
import CalendarPicker from '../../Shared/CalendarPicker.vue'
import { getDefaultColor } from '../../../utils/color.js'
export default {
name: 'ImportScreenRow',
@ -56,7 +58,10 @@ export default {
if (calendarId === 'new') {
return {
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({
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

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

@ -24,8 +24,7 @@
<progress
class="settings-fieldset-interior-item__progressbar"
:value="imported"
:max="total"
/>
:max="total" />
</li>
<li v-else class="settings-fieldset-interior-item">
<label class="settings-fieldset-interior-item__import-button button icon icon-upload" :for="inputUid">
@ -38,15 +37,13 @@
:accept="supportedFileTypes"
:disabled="disableImport"
multiple
@change="processFiles"
>
@change="processFiles">
<import-screen
<ImportScreen
v-if="showImportModal"
:files="files"
@cancel-import="cancelImport"
@import-calendar="importCalendar"
/>
@import-calendar="importCalendar" />
</li>
</template>
@ -75,7 +72,7 @@ export default {
stage: state => state.importState.stage,
total: state => state.importState.total,
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

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

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

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

@ -22,21 +22,18 @@
<template>
<div class="property-alarm-list">
<alarm-list-item
<AlarmListItem
v-for="(alarm, index) in alarms"
:key="index"
:alarm="alarm"
:calendar-object-instance="calendarObjectInstance"
:is-read-only="isReadOnly"
@removeAlarm="removeAlarm"
/>
<alarm-list-new
@removeAlarm="removeAlarm" />
<AlarmListNew
v-if="!isReadOnly"
@addAlarm="addAlarm"
/>
<no-alarm-view
v-if="isListEmpty"
/>
@addAlarm="addAlarm" />
<NoAlarmView
v-if="isListEmpty" />
</div>
</template>
@ -61,7 +58,7 @@ export default {
calendarObjectInstance: {
type: Object,
required: true
},
}
},
computed: {
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 -->
<div
v-click-outside="closeAlarmEditor"
class="property-alarm-item"
>
class="property-alarm-item">
<div class="property-alarm-item__icon">
<div class="icon" :class="icon" />
</div>
<div
v-if="!isEditing"
class="property-alarm-item__label"
>
class="property-alarm-item__label">
{{ alarm | formatAlarm(isAllDay, currentUserTimezone) }}
</div>
<div
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
type="number"
min="0"
max="3600"
:value="alarm.relativeAmountTimed"
@input="changeRelativeAmountTimed"
>
<alarm-time-unit-select
@input="changeRelativeAmountTimed">
<AlarmTimeUnitSelect
:is-all-day="isAllDay"
:count="alarm.relativeAmountTimed"
:unit="alarm.relativeUnitTimed"
:disabled="false"
@change="changeRelativeUnitTimed"
/>
@change="changeRelativeUnitTimed" />
</div>
<div
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>
<input
type="number"
min="0"
max="3600"
:value="alarm.relativeAmountAllDay"
@input="changeRelativeAmountAllDay"
>
<alarm-time-unit-select
@input="changeRelativeAmountAllDay">
<AlarmTimeUnitSelect
:is-all-day="isAllDay"
:count="alarm.relativeAmountAllDay"
:unit="alarm.relativeUnitAllDay"
:disabled="false"
@change="changeRelativeUnitAllDay"
/>
@change="changeRelativeUnitAllDay" />
</div>
<span>
{{ $t('calendar', 'before at') }}
@ -82,31 +74,26 @@
:format="timeFormat"
type="time"
:value="relativeAllDayDate"
@change="changeRelativeHourMinuteAllDay"
/>
@change="changeRelativeHourMinuteAllDay" />
</div>
<div
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
lang="en"
:format="absoluteDateFormat"
type="datetime"
:value="alarm.absoluteDate"
@change="changeAbsoluteDate"
/>
@change="changeAbsoluteDate" />
</div>
<div
v-if="!isReadOnly"
class="property-alarm-item__options"
>
class="property-alarm-item__options">
<Actions>
<ActionButton
v-if="canEdit"
icon="icon-edit"
@click="editAlarm"
>
@click="editAlarm">
{{ $t('calendar', 'Edit reminder') }}
</ActionButton>
@ -114,32 +101,28 @@
v-if="isEditing"
:name="alarmTypeName"
:checked="isAlarmTypeDisplay"
@change="changeType('DISPLAY')"
>
@change="changeType('DISPLAY')">
{{ $t('calendar', 'Notification') }}
</ActionRadio>
<ActionRadio
v-if="isEditing"
:name="alarmTypeName"
:checked="isAlarmTypeEmail"
@change="changeType('EMAIL')"
>
@change="changeType('EMAIL')">
{{ $t('calendar', 'Email') }}
</ActionRadio>
<ActionRadio
v-if="isEditing && isAlarmTypeAudio"
:name="alarmTypeName"
:checked="isAlarmTypeAudio"
@change="changeType('AUDIO')"
>
@change="changeType('AUDIO')">
{{ $t('calendar', 'Audio notification') }}
</ActionRadio>
<ActionRadio
v-if="isEditing && isAlarmTypeOther"
:name="alarmTypeName"
:checked="isAlarmTypeOther"
@change="changeType(alarm.type)"
>
@change="changeType(alarm.type)">
{{ $t('calendar', 'Other notification') }}
</ActionRadio>
@ -147,23 +130,20 @@
v-if="isEditing && !isRecurring"
:name="alarmTriggerName"
:checked="isRelativeAlarm"
@change="switchToRelativeAlarm"
>
@change="switchToRelativeAlarm">
{{ $t('calendar', 'Relative to event') }}
</ActionRadio>
<ActionRadio
v-if="isEditing && !isRecurring"
:name="alarmTriggerName"
:checked="isAbsoluteAlarm"
@change="switchToAbsoluteAlarm"
>
@change="switchToAbsoluteAlarm">
{{ $t('calendar', 'On date') }}
</ActionRadio>
<ActionButton
icon="icon-delete"
@click="removeAlarm"
>
@click="removeAlarm">
{{ $t('calendar', 'Remove reminder') }}
</ActionButton>
</Actions>

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

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

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

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

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

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

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

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

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

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

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

@ -21,7 +21,7 @@
-->
<template>
<multiselect
<Multiselect
class="invitees-search"
:options="matches"
:searchable="true"
@ -34,8 +34,7 @@
track-by="email"
label="dropdownName"
@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">
<div class="invitees-search-list-item">
@ -75,7 +74,7 @@
</div>
</div>
</template>
</multiselect>
</Multiselect>
</template>
<script>
@ -123,7 +122,7 @@ export default {
if (query.length > 0) {
const promises = [
this.findAttendeesFromContactsAPI(query),
this.findAttendeesFromDAV(query),
this.findAttendeesFromDAV(query)
]
const [contactsResults, davResults] = await Promise.all(promises)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2
src/fullcalendar/duration.js
View File

@ -156,7 +156,7 @@ function getDurationValueFromFullCalendarDurationEncodedAsString(fcDuration) {
return DurationValue.fromData({
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 params = Object.assign({}, store.state.route.params, {
object: event.extendedProps.objectId,
recurrenceId: String(event.extendedProps.recurrenceId),
recurrenceId: String(event.extendedProps.recurrenceId)
})
// 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, {
allDay: allDay ? '1' : '0',
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

21
src/main.js
View File

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

2
src/mixins/PropertyMixin.js
View File

@ -39,7 +39,7 @@ export default {
},
value: {
required: true
},
}
},
computed: {
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
calendarObjects: [],
// Time-ranges that have already been fetched for this calendar
fetchedTimeRanges: [],
fetchedTimeRanges: []
}, 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
canModifyAllDay: true,
// The real event-component coming from calendar-js
eventComponent: null,
eventComponent: null
}, 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: '',
// The cdav-library object
dav: false,
dav: false
}, props)
/**

12
src/models/rfcProps.js
View File

@ -30,7 +30,7 @@ export default {
options: [
{ value: 'PUBLIC', label: translate('calendar', 'When shared show full event') },
{ 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,
info: translate('calendar', 'The visibility of this event in shared calendars.'),
@ -51,7 +51,7 @@ export default {
name: 'description',
readableName: translate('calendar', 'Description'),
placeholder: translate('calendar', 'Add a description'),
icon: 'icon-menu',
icon: 'icon-menu'
},
geo: {
name: 'geo',
@ -70,7 +70,7 @@ export default {
options: [
{ value: 7, label: translate('calendar', 'Low') },
{ 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: [
{ value: 'CONFIRMED', label: translate('calendar', 'Confirmed') },
{ value: 'TENTATIVE', label: translate('calendar', 'Tentative') },
{ value: 'CANCELLED', label: translate('calendar', 'Cancelled') },
{ value: 'CANCELLED', label: translate('calendar', 'Cancelled') }
],
multiple: false,
default: true,
@ -97,7 +97,7 @@ export default {
info: translate('calendar', 'Take this event into account when calculating free-busy information'),
options: [
{ value: 'TRANSPARENT', label: translate('calendar', 'Free') },
{ value: 'OPAQUE', label: translate('calendar', 'Busy') },
{ value: 'OPAQUE', label: translate('calendar', 'Busy') }
],
defaultValue: 'TRANSPARENT'
},
@ -137,7 +137,7 @@ export default {
multiple: false,
default: false,
info: translate('calendar', 'Special color of this event. Overrides the calendar-color.')
},
}
// To be implemented later:
// conference: {
// 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',
name: 'PublicEditPopoverView',
component: EditSimple,
component: EditSimple
},
{
path: '/p/:tokens/:view/:firstDay/view/sidebar/:object/:recurrenceId',
name: 'PublicEditSidebarView',
component: EditSidebar,
},
component: EditSidebar
}
]
},
{
@ -60,13 +60,13 @@ const router = new Router({
{
path: '/embed/:tokens/:view/:firstDay/view/popover/:object/:recurrenceId',
name: 'EmbedEditPopoverView',
component: EditSimple,
component: EditSimple
},
{
path: '/embed/:tokens/:view/:firstDay/view/sidebar/:object/:recurrenceId',
name: 'EmbedEditSidebarView',
component: EditSidebar,
},
component: EditSidebar
}
]
},
/**
@ -78,19 +78,19 @@ const router = new Router({
*/
{
path: '/',
redirect: `/${getInitialView()}/now`,
redirect: `/${getInitialView()}/now`
},
{
path: '/p/:tokens/:fancyName?',
redirect: `/p/:tokens/${getInitialView()}/now`,
redirect: `/p/:tokens/${getInitialView()}/now`
},
{
path: '/public/:tokens/:fancyName?',
redirect: `/p/:tokens/${getInitialView()}/now`,
redirect: `/p/:tokens/${getInitialView()}/now`
},
{
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
@ -107,26 +107,26 @@ const router = new Router({
{
path: '/:view/:firstDay/edit/popover/:object/:recurrenceId',
name: 'EditPopoverView',
component: EditSimple,
component: EditSimple
},
{
path: '/:view/:firstDay/edit/sidebar/:object/:recurrenceId',
name: 'EditSidebarView',
component: EditSidebar,
component: EditSidebar
},
{
path: '/:view/:firstDay/new/popover/:allDay/:dtstart/:dtend',
name: 'NewPopoverView',
component: EditSimple,
component: EditSimple
},
{
path: '/:view/:firstDay/new/sidebar/:allDay/:dtstart/:dtend',
name: 'NewSidebarView',
component: EditSidebar,
},
],
},
],
component: EditSidebar
}
]
}
]
})
windowTitleService(router)

2
src/store/calendarObjectInstance.js
View File

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

2
src/store/calendarObjects.js
View File

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

2
src/store/calendars.js
View File

@ -852,7 +852,7 @@ const actions = {
return Promise.all(requests).then(() => {
context.commit('changeStage', 'default')
})
},
}
}
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, 'importFilesById', {})
Vue.set(state, 'importCalendarRelation', {})
},
}
}
const getters = {}

2
src/store/importState.js
View File

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

2
src/store/index.js
View File

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

2
src/store/principals.js
View File

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

14
src/views/Calendar.vue
View File

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

101
src/views/EditSidebar.vue
View File

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

43
src/views/EditSimple.vue
View File

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