Skip to content

Commit

Permalink
Migrate to vue3
Browse files Browse the repository at this point in the history
Signed-off-by: Raimund Schlüßler <[email protected]>
  • Loading branch information
raimund-schluessler committed Jan 29, 2024
1 parent 2313157 commit b2833a6
Show file tree
Hide file tree
Showing 36 changed files with 823 additions and 1,166 deletions.
1,321 changes: 512 additions & 809 deletions package-lock.json

Large diffs are not rendered by default.

20 changes: 9 additions & 11 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -31,14 +31,14 @@
"@nextcloud/axios": "^2.4.0",
"@nextcloud/calendar-js": "6.1.0",
"@nextcloud/cdav-library": "1.1.0",
"@nextcloud/dialogs": "^5.1.1",
"@nextcloud/dialogs": "4.1.0",
"@nextcloud/event-bus": "^3.1.0",
"@nextcloud/initial-state": "2.1.0",
"@nextcloud/l10n": "^2.2.0",
"@nextcloud/logger": "^2.7.0",
"@nextcloud/moment": "^1.3.1",
"@nextcloud/router": "^2.2.1",
"@nextcloud/vue": "8.5.1",
"@nextcloud/vue": "9.0.0-alpha.0",
"@vueuse/components": "^10.7.2",
"color-convert": "^2.0.1",
"debounce": "^2.0.0",
Expand All @@ -51,22 +51,20 @@
"markdown-it-task-lists": "^2.1.1",
"md5": "^2.3.0",
"p-limit": "^5.0.0",
"sortablejs-vue3": "^1.2.11",
"uuid": "^9.0.1",
"vue": "^2.7.16",
"vue": "^3.4.15",
"vue-material-design-icons": "^5.2.0",
"vue-router": "^3.6.5",
"vuedraggable": "^2.24.3",
"vuex": "^3.6.2",
"vuex-router-sync": "^5.0.0"
"vue-router": "^4.2.5",
"vuex": "^4.1.0"
},
"devDependencies": {
"@nextcloud/babel-config": "^1.0.0",
"@nextcloud/browserslist-config": "^3.0.0",
"@nextcloud/eslint-config": "^8.3.0",
"@nextcloud/eslint-config": "github:nextcloud-libraries/eslint-config#vue3",
"@nextcloud/stylelint-config": "^2.4.0",
"@nextcloud/vite-config": "^1.2.0",
"@vue/test-utils": "^1.3.6",
"babel-core": "^7.0.0-bridge.0",
"@nextcloud/vite-config": "github:nextcloud-libraries/nextcloud-vite-config#vue3",
"@vue/test-utils": "^2.4.3",
"happy-dom": "^13.3.1",
"mockdate": "^3.0.5",
"regenerator-runtime": "^0.14.1",
Expand Down
5 changes: 3 additions & 2 deletions src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,9 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.

<template>
<NcContent app-name="tasks">
<AppNavigation @click.native="closeAppSidebar($event)" />
<AppNavigation @click="closeAppSidebar($event)" />

<NcAppContent @click.native="closeAppSidebar($event)">
<NcAppContent @click="closeAppSidebar($event)">
<RouterView />
</NcAppContent>

Expand All @@ -49,6 +49,7 @@ export default {
NcAppContent,
NcContent,
},
inject: ['$OCA'],
data() {
return {
searchString: '',
Expand Down
4 changes: 2 additions & 2 deletions src/components/AppNavigation/CalendarSharee.vue
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.

<template #counter>
<NcCheckboxRadioSwitch :disabled="loading"
:checked="writeable"
@update:checked="editSharee">
:model-value="writeable"
@update:model-value="editSharee">
{{ t('tasks', 'Can edit') }}
</NcCheckboxRadioSwitch>
</template>
Expand Down
12 changes: 6 additions & 6 deletions src/components/AppNavigation/ListItemCalendar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,10 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
:name="calendar.displayName"
:class="{'list--edit': editing, 'list--deleted': !!deleteTimeout}"
class="list reactive"
@drop.native="dropTask"
@dragover.native="dragOver"
@dragenter.native="dragEnter"
@dragleave.native="dragLeave">
@drop="dropTask"
@dragover="dragOver"
@dragenter="dragEnter"
@dragleave="dragLeave">
<template #icon>
<NcAppNavigationIconBullet :color="calendar.color" />
</template>
Expand Down Expand Up @@ -111,6 +111,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
<ShareCalendar v-if="shareOpen && !calendar.readOnly && !deleteTimeout" :calendar="calendar" />
<div v-if="!deleteTimeout" :class="{error: nameError}" class="app-navigation-entry-edit">
<NcTextField ref="editListInput"
v-model="newCalendarName"
v-tooltip="{
content: tooltipMessage,
shown: showTooltip('list_' + calendar.id),
Expand All @@ -119,14 +120,13 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
type="text"
:show-trailing-button="newCalendarName !== ''"
trailing-button-icon="arrowRight"
:value.sync="newCalendarName"
:error="nameError"
:label="t('tasks', 'List name')"
@trailing-button-click="save(calendar)"
@keyup="checkName($event, calendar)">
<Pencil :size="16" />
</NcTextField>
<Colorpicker :selected-color="selectedColor" @color-selected="setColor(...arguments)" />
<Colorpicker :selected-color="selectedColor" @color-selected="setColor" />
</div>
</li>
</NcAppNavigationItem>
Expand Down
8 changes: 4 additions & 4 deletions src/components/AppNavigation/Trashbin.vue
Original file line number Diff line number Diff line change
Expand Up @@ -70,8 +70,8 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
<div class="table__header">
&nbsp;
</div>
<template v-for="item in items">
<div :key="`${item.url}desc`" class="table__body">
<template v-for="item in items" :key="`${item.url}body`">
<div class="table__body">
<div class="icon-bullet"
:style="{ 'background-color': item.color }" />
<div class="item-description">
Expand All @@ -83,10 +83,10 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
</div>
</div>
</div>
<div :key="`${item.url}date`" class="table__body table__body--deletedAt">
<div class="table__body table__body--deletedAt">
<NcDateTime class="timestamp" :timestamp="item.deletedAt" :ignore-seconds="true" />
</div>
<div :key="`${item.url}action`" class="table__body">
<div class="table__body">
<NcButton @click="restore(item)">
<template #icon>
<Undo :size="20" />
Expand Down
2 changes: 1 addition & 1 deletion src/components/AppSidebar/CalendarPickerItem.vue
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
:disabled="isDisabled"
:clearable="false"
:options="calendarsMap"
:value="calendarMap"
:model-value="calendarMap"
:placeholder="t('tasks', 'Select a calendar')"
:append-to-body="false"
@option:selected="change">
Expand Down
2 changes: 1 addition & 1 deletion src/components/AppSidebar/MultiselectItem.vue
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
<NcSelect label="displayName"
:disabled="isDisabled"
:options="options"
:value="value"
:model-value="value"
:placeholder="placeholder"
:multiple="false"
:searchable="false"
Expand Down
4 changes: 2 additions & 2 deletions src/components/AppSidebar/NotesItem.vue
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
<pre><span>{{ newValue }}</span><br><br></pre>
<textarea ref="note__editor"
v-model="newValue"
@keyup.27="setEditing(false)"
@keyup.escape="setEditing(false)"
@keydown.enter.ctrl.prevent="setValue()"
@change="setValue()" />
</div>
Expand Down Expand Up @@ -101,7 +101,7 @@ export default {
mounted() {
subscribe('tasks:edit-appsidebar-notes', this.setNotes)
},
beforeDestroy() {
beforeUnmount() {
unsubscribe('tasks:edit-appsidebar-notes', this.setNotes)
},
methods: {
Expand Down
2 changes: 1 addition & 1 deletion src/components/AppSidebar/SliderItem.vue
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
type="number"
:min="minValue"
:max="maxValue"
@keyup.27="setEditing(false)"
@keyup.escape="setEditing(false)"
@keydown.enter.prevent="setValue()">
<input v-model="newValue"
type="range"
Expand Down
4 changes: 2 additions & 2 deletions src/components/AppSidebar/TagsItem.vue
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
<div class="multiselect__icon">
<component :is="icon" :size="20" />
</div>
<NcSelect :value="tags"
<NcSelect :model-value="tags"
taggable
:disabled="disabled"
:options="options"
Expand All @@ -36,7 +36,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
:close-on-select="false"
:append-to-body="false"
:tag-placeholder="t('tasks', 'Add this as a new tag')"
@input="setTags"
@update:model-value="setTags"
@tag="addTag">
<template #no-options>
{{ t('tasks', 'No tag available. Create one!') }}
Expand Down
2 changes: 1 addition & 1 deletion src/components/AppSidebar/TextItem.vue
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
<input ref="input"
v-model="newValue"
type="string"
@keyup.27="setEditing(false)"
@keyup.escape="setEditing(false)"
@keydown.enter.prevent="setValue()">
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/components/FilterDropdown.vue
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,8 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
:multiple="true"
:append-to-body="true"
:options="tags"
:value="filter.tags"
@input="setTags">
:model-value="filter.tags"
@update:model-value="setTags">
<template #icon>
<TagMultiple :size="20" />
</template>
Expand Down
6 changes: 4 additions & 2 deletions src/components/HeaderBar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
<div v-if="$route.params.collectionId !== 'completed' && calendar && !calendar.readOnly"
class="header__input">
<NcTextField ref="input"
:value.sync="newTaskName"
v-model="newTaskName"
:label="placeholder"
autocomplete="off"
class="reactive"
Expand All @@ -35,7 +35,9 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
@keyup.esc="clearNewTask($event)"
@keyup.enter="addTask"
@paste.stop="addMultipleTasks">
<Plus :size="20" />
<template #icon>
<Plus :size="20" />
</template>
</NcTextField>
</div>
<FilterDropdown />
Expand Down
8 changes: 5 additions & 3 deletions src/components/TaskBody.vue
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
:size="20"
:title="t('tasks', 'Task has a note')"
@click="openAppSidebarTab($event, 'app-sidebar-tab-notes')"
@dblclick.native.stop="openAppSidebarTab($event, 'app-sidebar-tab-notes', true)" />
@dblclick.stop="openAppSidebarTab($event, 'app-sidebar-tab-notes', true)" />
<div v-if="task.due || task.completed" :class="{'date--overdue': overdue(task.dueMoment) && !task.completed}" class="date">
<span class="date__short" :class="{ 'date__short--completed': task.completed }">{{ dueDateShort }}</span>
<span class="date__long" :class="{ 'date__long--date-only': task.allDay && !task.completed, 'date__long--completed': task.completed }">{{ dueDateLong }}</span>
Expand Down Expand Up @@ -151,7 +151,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
v-click-outside="closeSubtaskInput"
class="task-item task-item__input">
<NcTextField ref="input"
:value.sync="newTaskName"
v-model="newTaskName"
:placeholder="subtasksCreationPlaceholder"
:label-outside="true"
:disabled="isAddingTask"
Expand All @@ -164,7 +164,9 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
@keyup.esc="showSubtaskInput = false"
@keyup.enter="addTask"
@paste.stop="addMultipleTasks">
<Plus :size="20" />
<template #icon>
<Plus :size="20" />
</template>
</NcTextField>
</div>
<TaskDragContainer :tasks="filteredSubtasksShown"
Expand Down
34 changes: 19 additions & 15 deletions src/components/TaskDragContainer.vue
Original file line number Diff line number Diff line change
Expand Up @@ -20,31 +20,32 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
-->

<template>
<draggable tag="ol"
:list="['']"
<Sortable tag="ol"
:list="sortedTasks"
:set-data="setDragData"
v-bind="{group: 'tasks', swapThreshold: 0.30, delay: 500, delayOnTouchOnly: true, touchStartThreshold: 3, disabled: disabled, filter: '.readOnly'}"
:move="onMove"
item-key="key"
:options="{group: 'tasks', swapThreshold: 0.30, delay: 500, delayOnTouchOnly: true, touchStartThreshold: 3, disabled: disabled, filter: '.readOnly'}"
@move="onMove"
@add="onAdd"
@end="onEnd">
<TaskBody v-for="task in sortedTasks"
:key="task.key"
:task="task"
:collection-string="collectionString" />
</draggable>
<template #item="{element}">
<TaskBody :task="element"
:collection-string="collectionString" />
</template>
</Sortable>
</template>

<script>
import Task from '../models/task.js'
import { sort } from '../store/storeHelper.js'
import draggable from 'vuedraggable'
import { Sortable } from 'sortablejs-vue3'
import { mapGetters, mapActions, mapMutations } from 'vuex'
export default {
name: 'TaskDragContainer',
components: {
draggable,
Sortable,
},
props: {
tasks: {
Expand Down Expand Up @@ -182,20 +183,23 @@ export default {
*
* @param {object} $event The event which caused the drop
*/
onAdd($event) {
async onAdd($event) {
let task
// The task to move
const taskAttribute = $event.item.attributes['task-id']
if (taskAttribute) {
task = this.getTask(taskAttribute.value)
}
// Remove the drag item from the DOM, so it doesn't show up twice.
const item = $event.item
item.parentElement?.removeChild(item)
/**
* We have to adjust the sortOrder property of the tasks
* to achieve the desired sort order.
*/
this.adjustSortOrder(task, $event.newIndex, -1)
// Move the task to a new calendar or parent.
this.prepareMoving(task, $event)
await this.prepareMoving(task, $event)
this.prepareCollecting(task, $event)
$event.stopPropagation()
},
Expand Down Expand Up @@ -244,7 +248,7 @@ export default {
* @param {Task} task The task to change
* @param {object} $event The event which caused the move
*/
prepareMoving(task, $event) {
async prepareMoving(task, $event) {
let parent, calendar
// The new calendar --> make the moved task a root task
const calendarAttribute = $event.to.attributes['calendar-id']
Expand All @@ -263,7 +267,7 @@ export default {
calendar = task.calendar
}
// Move the task to the appropriate calendar and parent.
this.moveTask({ task, calendar, parent })
await this.moveTask({ task, calendar, parent })
},
/**
Expand Down
18 changes: 5 additions & 13 deletions src/dashboard.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,21 +25,13 @@
import Dashboard from './views/Dashboard.vue'
import store from './store/store.js'

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

Vue.prototype.$OC = OC
Vue.prototype.$OCA = OCA
import { createApp } from 'vue'

document.addEventListener('DOMContentLoaded', () => {
OCA.Dashboard.register('tasks', (el) => {
const View = Vue.extend(Dashboard)
const vm = new View({
propsData: {},
store,
}).$mount(el)
return vm
const item = createApp(Dashboard)
.use(store)
.mount(el)
return item
})
})
Loading

0 comments on commit b2833a6

Please sign in to comment.