Improve webpack configuration

This commit is contained in:
Raimund Schlüßler 2018-08-30 22:22:27 +02:00
parent 928026cb5e
commit 93d27c1b94
No known key found for this signature in database
GPG key ID: 036FA7EB1A599178
78 changed files with 17369 additions and 618 deletions

59
.eslintrc.js Normal file
View file

@ -0,0 +1,59 @@
module.exports = {
root: true,
env: {
browser: true,
es6: true,
node: true,
jest: true
},
globals: {
t: false,
n: false,
OC: false,
OCA: false
},
parserOptions: {
parser: 'babel-eslint'
},
extends: [
'eslint:recommended',
'plugin:node/recommended',
'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' }],
// es6 import/export and require
'node/no-unpublished-require': ['off'],
'node/no-unsupported-features': ['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
}
}
]
}
};

6
.gitignore vendored
View file

@ -1,11 +1,9 @@
######################
## Files build by make
######################
/css/src/sprite.scss
/css/style.scss
/css/src/sprites.scss
/img/sprites.svg
/js/public/
/js/vendor/
/js/
#################
## PhpStorm

View file

@ -1,47 +0,0 @@
{
"esnext": true,
"curly": true,
"eqeqeq": true,
"immed": true,
"indent": 4,
"latedef": true,
"newcap": true,
"noarg": true,
"noempty": true,
"nonew": true,
"plusplus": false,
"node": true,
"undef": true,
"unused": false,
"strict": true,
"maxparams": false,
"maxdepth": 4,
"browser": true,
"devel": true,
"jquery": true,
"jasmine": true,
"globals": {
"jQuery": true,
"ICAL": true,
"jstz": true,
"moment": true,
"angular": true,
"app": true,
"OC": true,
"oc_current_user":true,
"oc_requesttoken": true,
"requestToken": true,
"inject": true,
"module": true,
"t": true,
"n": true,
"it": true,
"exports": true,
"escapeHTML": true,
"possible": true,
"dav": true,
"OCA": true,
"Vue": true,
"VueRouter": true
}
}

1
.prettierrc.js Normal file
View file

@ -0,0 +1 @@
module.exports = {};

View file

@ -1,19 +1,22 @@
{
"extends": "stylelint-config-standard",
"plugins": [
"stylelint-scss"
],
"ignoreFiles": [
"./css/src/sprite.scss"
],
"extends": "stylelint-config-recommended-scss",
"rules": {
"indentation": "tab",
"number-leading-zero": "never",
"comment-empty-line-before": ["always", {
"except": ["first-nested"]
"selector-type-no-unknown": null,
"number-leading-zero": null,
"rule-empty-line-before": ["always", {
"ignore": ["after-comment", "inside-block"]
}],
"at-rule-no-unknown": null,
"scss/at-rule-no-unknown": true,
"no-descending-specificity": null
}
"declaration-empty-line-before": ["never", {
"ignore": ["after-declaration"]
}],
"comment-empty-line-before": null,
"selector-type-case": null,
"selector-list-comma-newline-after": null,
"no-descending-specificity": null,
"string-quotes": null
},
"plugins": [
"stylelint-scss"
]
}

View file

@ -90,11 +90,11 @@ $white: #fff;
}
.app-navigation-entry-edit {
&.name input[type="text"] {
&.name input[type='text'] {
width: calc(100% - 72px);
}
&.caldav input[type="text"] {
&.caldav input[type='text'] {
width: calc(100% - 36px);
}
@ -248,7 +248,6 @@ $white: #fff;
.confirmation-confirm {
@extend .confirmation-abort;
background-color: $red !important;
cursor: default !important;
}
@ -915,14 +914,14 @@ ol[dnd-list] {
}
}
input[type="range"] {
input[type='range'] {
border: medium none;
box-shadow: none;
width: calc(100% - 50px);
vertical-align: middle;
}
input[type="text"] {
input[type='text'] {
background: none repeat scroll 0 0 $gray_easy;
margin: 0;
min-height: 0;
@ -1193,7 +1192,7 @@ ol[dnd-list] {
&.icon-checkmark,
&.icon-tag-active,
&[class*=" icon-task-star-"] {
&[class*=' icon-task-star-'] {
opacity: 1 !important;
}
@ -1296,7 +1295,7 @@ ol[dnd-list] {
& > a span {
opacity: 1 !important;
&[class*=" icon-"] {
&[class*=' icon-'] {
padding: 0;
background-size: auto;

24
css/tasks.scss Normal file
View file

@ -0,0 +1,24 @@
/**
* Nextcloud - Tasks
*
* @author Raimund Schlüßler
* @copyright 2018 Raimund Schlüßler <raimund.schluessler@mailbox.org>
*
* This library is free software; you can redistribute it and/or
* modify it under the terms of the GNU AFFERO GENERAL PUBLIC LICENSE
* License as published by the Free Software Foundation; either
* version 3 of the License, or any later version.
*
* This library is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU AFFERO GENERAL PUBLIC LICENSE for more details.
*
* You should have received a copy of the GNU Affero General Public
* License along with this library. If not, see <http://www.gnu.org/licenses/>.
*
*/
@import './src/nc12';
@import './src/sprites';
@import './src/style';

View file

@ -19,31 +19,13 @@
// get plugins
const gulp = require('gulp'),
jshint = require('gulp-jshint'),
concat = require('gulp-concat'),
stylelint = require('gulp-stylelint'),
svgSprite = require('gulp-svg-sprite'),
webpackStream = require('webpack-stream'),
webpackDevelopmentConfig = require('./webpack.common.js'),
webpackDevelopmentConfig = require('./webpack.dev.js'),
webpackProductionConfig = require('./webpack.prod.js');
// configure
const destinationFolder = __dirname + '/js/public/';
const scssBuildTarget = 'style.scss';
const scssDestinationFolder = __dirname + '/css/';
const jsSources = [
'js/app/**/*.js'
];
const scssSources = [
'css/src/*.scss'
];
const testSources = [
'test/**/*.js'
];
const lintSources = jsSources.concat(testSources).concat(['*.js']);
const watchSources = jsSources.concat(['js/app/**/*.vue']);
const destinationFolder = __dirname + '/js/';
const svgConfig = {
shape: {
@ -55,10 +37,10 @@ const svgConfig = {
common: 'icon',
dimensions: '',
prefix: '.icon-%s',
sprite: "../img/sprites.svg",
sprite: '../img/sprites.svg',
render: {
scss: {
dest: "src/sprites.scss"
dest: 'src/sprites.scss'
}
}
}
@ -69,57 +51,16 @@ const svgConfig = {
gulp.task('default', ['build']);
gulp.task('build', ['lint', 'scssConcat'], function(callback) {
gulp.task('build', ['svg_sprite'], function(callback) {
return webpackStream(webpackProductionConfig, require('webpack'))
.pipe(gulp.dest(destinationFolder));
});
gulp.task('development', ['lint', 'scssConcat'], function(callback) {
gulp.task('development', ['svg_sprite'], function(callback) {
return webpackStream(webpackDevelopmentConfig, require('webpack'))
.pipe(gulp.dest(destinationFolder));
});
gulp.task('jsWatch', ['jslint'], function(callback) {
return webpackStream(webpackDevelopmentConfig, require('webpack'))
.pipe(gulp.dest(destinationFolder));
});
gulp.task('lint', ['jslint', 'scsslint']);
gulp.task('jslint', () => {
return gulp.src(lintSources)
.pipe(jshint('.jshintrc'))
.pipe(jshint.reporter('default'))
.pipe(jshint.reporter('fail'));
});
gulp.task('scsslint', () => {
return gulp.src(scssSources)
.pipe(stylelint ({
reporters: [{
formatter: 'string',
console: true
}]
}));
});
gulp.task('scssConcat', ['svg_sprite'], () => {
return gulp.src(scssSources)
.pipe(concat(scssBuildTarget))
.pipe(gulp.dest(scssDestinationFolder));
});
gulp.task('scssConcatWatch', ['scsslint'], () => {
return gulp.src(scssSources)
.pipe(concat(scssBuildTarget))
.pipe(gulp.dest(scssDestinationFolder));
});
gulp.task('watch', () => {
gulp.watch(watchSources, ['jsWatch']);
gulp.watch(scssSources, ['scssConcatWatch']);
});
gulp.task('svg_sprite', () => {
return gulp.src('**/*.svg', {cwd: 'img/src'})
.pipe(svgSprite(svgConfig))

View file

@ -1,3 +0,0 @@
[
"public/build.js"
]

16785
package-lock.json generated Normal file

File diff suppressed because it is too large Load diff

View file

@ -1,7 +1,7 @@
{
"name": "tasks",
"description": "Nextcloud - Tasks",
"version": "0.9.8",
"version": "0.9.7",
"author": {
"name": "Raimund Schlüßler",
"email": "raimund.schluessler@mailbox.org"
@ -13,8 +13,10 @@
"test": "jest --verbose",
"prebuild": "npm install && npm upgrade",
"build": "node node_modules/gulp-cli/bin/gulp.js build",
"development": "node node_modules/gulp-cli/bin/gulp.js development",
"watch": "node node_modules/gulp-cli/bin/gulp.js watch"
"lint": "eslint --ext .js,.vue src tests",
"lint:fix": "eslint --ext .js,.vue src tests --fix",
"dev": "node node_modules/gulp-cli/bin/gulp.js development",
"watch": "webpack --progress --watch --config webpack.dev.js"
},
"repository": {
"type": "git",
@ -24,44 +26,51 @@
"contributors": [],
"dependencies": {
"axios": "^0.18.0",
"vue": "^2.5.17",
"vue-router": "3.0.1",
"vuex": "^3.0.1",
"babel-polyfill": "^6.26.0",
"ical.js": "~1.2.2",
"jstimezonedetect": "",
"ui-select": "git+https://github.com/angular-ui/ui-select.git#v0.19.8"
"ui-select": "git+https://github.com/angular-ui/ui-select.git#v0.19.8",
"vue": "^2.5.17",
"vue-router": "3.0.1",
"vuex": "^3.0.1"
},
"devDependencies": {
"@vue/test-utils": "^1.0.0-beta.24",
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.5",
"babel-jest": "^23.4.2",
"babel-loader": "^7.1.5",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"cross-env": "^5.2.0",
"css-loader": "^1.0.0",
"eslint": "^4.19.1",
"eslint-config-standard": "^11.0.0",
"eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^2.0.0",
"eslint-plugin-import": "^2.13.0",
"eslint-plugin-node": "^6.0.1",
"eslint-plugin-promise": "^3.8.0",
"eslint-plugin-standard": "^3.1.0",
"eslint-plugin-vue": "^4.5.0",
"expect": "^23.5.0",
"file-loader": "^1.1.11",
"gulp": "^3.9.1",
"gulp-cli": "^2.0.1",
"gulp-concat": "^2.6.1",
"gulp-jshint": "^2.1.0",
"gulp-stylelint": "^7.0.0",
"gulp-svg-sprite": "1.4.0",
"jest": "^23.5.0",
"jest-serializer-vue": "^2.0.2",
"jsdom": "^11.12.0",
"jsdom-global": "^3.0.2",
"jshint": "^2.9.6",
"stylelint": "^9.4.0",
"stylelint-config-standard": "^18.2.0",
"stylelint-scss": "^3.2.0",
"uglifyjs-webpack-plugin": "^1.2.7",
"prettier-eslint": "^8.8.2",
"raw-loader": "^0.5.1",
"sass-loader": "^7.0.3",
"stylelint": "^8.4.0",
"stylelint-config-recommended-scss": "^3.2.0",
"stylelint-scss": "^3.1.3",
"stylelint-webpack-plugin": "^0.10.5",
"vue-jest": "^2.6.0",
"vue-loader": "^15.3.0",
"vue-loader": "^15.4.1",
"vue-template-compiler": "^2.5.17",
"webpack": "^4.16.5",
"webpack": "^4.17.1",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5",
"webpack-dev-server": "^3.1.7",
"webpack-merge": "^4.1.4",
"webpack-node-externals": "^1.6.0",
"webpack-stream": "^5.1.1"
@ -75,7 +84,7 @@
"vue"
],
"moduleNameMapper": {
"^@/(.*)$": "<rootDir>/js/app/$1"
"^@/(.*)$": "<rootDir>/src/$1"
},
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
@ -86,7 +95,7 @@
],
"collectCoverage": true,
"collectCoverageFrom": [
"<rootDir>/js/app/**/*.{js,vue}",
"<rootDir>/src/**/*.{js,vue}",
"!**/node_modules/**",
"!**/vendor/**"
],

View file

@ -39,15 +39,15 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
ng-click="focusTaskInput()"
class="transparent"
ng-model="status.taskName"
ng-keydown="checkTaskInput($event)"/>
<!-- placeholder="{{ getAddString() }}"/> -->
ng-keydown="checkTaskInput($event)">
<!-- placeholder="{{ getAddString() }}"> -->
</form>
</div>
<div class="app-navigation-entry-utils">
<div class="app-navigation-entry-utils-menu-button" title="<?php p($l->t('Change sort order')); ?>">
<button class="sortorder-dropdown-button">
<span class="icon" ng-class="getSortOrderIcon()"></span>
<span class="icon sort-indicator" ng-class="{'icon-sort-up': settingsmodel.getById('various').sortDirection, 'icon-sort-down': !settingsmodel.getById('various').sortDirection}"></span>
<span class="icon" ng-class="getSortOrderIcon()" />
<span class="icon sort-indicator" ng-class="{'icon-sort-up': settingsmodel.getById('various').sortDirection, 'icon-sort-down': !settingsmodel.getById('various').sortDirection}" />
</button>
</div>
</div>
@ -55,65 +55,65 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
<ul>
<li ng-click="setSortOrder($event, 'default')" ng-class="{active: settingsmodel.getById('various').sortOrder == 'default'}" class="handler">
<a>
<span class="icon icon-list"></span>
<span class="icon icon-list" />
<span class="label">{{ t('tasks', 'Default') }}</span>
<span class="icon sort-indicator" ng-class="{'icon-sort-up': settingsmodel.getById('various').sortDirection, 'icon-sort-down': !settingsmodel.getById('various').sortDirection}"></span>
<span class="icon sort-indicator" ng-class="{'icon-sort-up': settingsmodel.getById('various').sortDirection, 'icon-sort-down': !settingsmodel.getById('various').sortDirection}" />
</a>
</li>
<li ng-click="setSortOrder($event, 'due')" ng-class="{active: settingsmodel.getById('various').sortOrder == 'due'}">
<a>
<span class="icon icon-calendar"></span>
<span class="icon icon-calendar" />
<span class="label">{{ t('tasks', 'Due date') }}</span>
<span class="icon sort-indicator" ng-class="{'icon-sort-up': settingsmodel.getById('various').sortDirection, 'icon-sort-down': !settingsmodel.getById('various').sortDirection}"></span>
<span class="icon sort-indicator" ng-class="{'icon-sort-up': settingsmodel.getById('various').sortDirection, 'icon-sort-down': !settingsmodel.getById('various').sortDirection}" />
</a>
</li>
<li ng-click="setSortOrder($event, 'start')" ng-class="{active: settingsmodel.getById('various').sortOrder == 'start'}">
<a>
<span class="icon icon-calendar"></span>
<span class="icon icon-calendar" />
<span class="label">{{ t('tasks', 'Start date') }}</span>
<span class="icon sort-indicator" ng-class="{'icon-sort-up': settingsmodel.getById('various').sortDirection, 'icon-sort-down': !settingsmodel.getById('various').sortDirection}"></span>
<span class="icon sort-indicator" ng-class="{'icon-sort-up': settingsmodel.getById('various').sortDirection, 'icon-sort-down': !settingsmodel.getById('various').sortDirection}" />
</a>
</li>
<li ng-click="setSortOrder($event, 'priority')" ng-class="{active: settingsmodel.getById('various').sortOrder == 'priority'}">
<a>
<span class="icon icon-task-star"></span>
<span class="icon icon-task-star" />
<span class="label">{{ t('tasks', 'Priority') }}</span>
<span class="icon sort-indicator" ng-class="{'icon-sort-up': settingsmodel.getById('various').sortDirection, 'icon-sort-down': !settingsmodel.getById('various').sortDirection}"></span>
<span class="icon sort-indicator" ng-class="{'icon-sort-up': settingsmodel.getById('various').sortDirection, 'icon-sort-down': !settingsmodel.getById('various').sortDirection}" />
</a>
</li>
<li ng-click="setSortOrder($event, 'alphabetically')" ng-class="{active: settingsmodel.getById('various').sortOrder == 'alphabetically'}">
<a>
<span class="icon icon-alphabetically"></span>
<span class="icon icon-alphabetically" />
<span class="label">{{ t('tasks', 'Alphabetically') }}</span>
<span class="icon sort-indicator" ng-class="{'icon-sort-up': settingsmodel.getById('various').sortDirection, 'icon-sort-down': !settingsmodel.getById('various').sortDirection}"></span>
<span class="icon sort-indicator" ng-class="{'icon-sort-up': settingsmodel.getById('various').sortDirection, 'icon-sort-down': !settingsmodel.getById('various').sortDirection}" />
</a>
</li>
<!-- <li ng-click="setSortOrder($event, 'manual')" ng-class="{active: settingsmodel.getById('various').sortOrder == 'manual'}">
<a>
<span class="icon icon-manual"></span>
<span class="icon icon-manual" />
<span class="label">{{ t('tasks', 'Manually') }</span>
<span class="icon sort-indicator" ng-class="{'icon-sort-up': settingsmodel.getById('various').sortDirection, 'icon-sort-down': !settingsmodel.getById('various').sortDirection}"></span>
<span class="icon sort-indicator" ng-class="{'icon-sort-up': settingsmodel.getById('various').sortDirection, 'icon-sort-down': !settingsmodel.getById('various').sortDirection}" />
</a>
</li> -->
</ul>
</div>
<div class="task-list">
<router-view />
<div id="searchresults"></div>
<div id="searchresults" />
<div class="task-item template">
<div class="task-body">
<div class="percentdone"></div>
<div class="percentdone" />
<a class="task-checkbox" name="toggleCompleted" ng-click="toggleCompleted()">
<span class="icon task-checkbox"></span>
<span class="icon task-checkbox" />
</a>
<a class="icon task-separator"></a>
<a class="icon task-separator" />
<a class="task-star" ng-click="toggleStarred(task.id)">
<span class="icon task-star faded"></span>
<span class="icon task-star faded" />
</a>
<!-- <a class="duedate" ng-class="{overdue: TasksModel.overdue(task.due)}">{{ task.due | dateTaskList }}</a> -->
<div class="title-wrapper">
<span class="title"></span>
<span class="icon task-attachment"></span>
<span class="title" />
<span class="icon task-attachment" />
</div>
</div>
</div>
@ -128,13 +128,12 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
</template>
<script>
import { mapState } from 'vuex';
import TheList from './components/TheList.vue';
import TheSettings from './components/TheSettings.vue';
import TheDetails from './components/TheDetails.vue';
import TheList from './components/TheList'
import TheSettings from './components/TheSettings'
import TheDetails from './components/TheDetails'
export default {
name: 'app',
name: 'App',
components: {
'theSettings': TheSettings,
'theList': TheList,

View file

@ -24,19 +24,17 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
<li ng-repeat="color in colors"
ng-class="{ selected: (color===selected) }"
ng-click="pick(color)"
ng-style="{ 'background-color':color}; "></li>
ng-style="{ 'background-color':color}; " />
<li class="randomcolour"
ng-click="randomizeColour()"
ng-style="{ 'background-color':random}; ">
<span class="icon icon-random"></span>
<span class="icon icon-random" />
</li>
</ul>
</template>
<script>
import { mapState } from 'vuex';
export default {
name: 'colorpicker'
name: 'Colorpicker'
}
</script>

View file

@ -21,56 +21,53 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
<template>
<div class="task-body-component">
<div class="task-body"
<div :taskID="task.uri"
class="task-body"
type="task"
:taskID="task.uri"
ng-class="{active: route.taskID==task.uri, subtasks: hasSubtasks(task), completedsubtasks: hasCompletedSubtasks(task), subtaskshidden: task.hideSubtasks, attachment: task.note!=''}">
<div class="percentbar" ng-if="task.complete > 0 ">
<div class="percentdone"
:style="{ width: task.complete, 'background-color': task.calendar.color }">
<div :style="{ width: task.complete, 'background-color': task.calendar.color }"
class="percentdone">
<!-- aria-label="{{ task.complete | percentDetails}}"> -->
</div>
</div>
<a class="task-checkbox handler"
<a :aria-checked="task.completed"
:aria-label="t('tasks', 'Task is completed')"
class="task-checkbox handler"
name="toggleCompleted"
ng-click="toggleCompleted(task)"
role="checkbox"
:aria-checked="task.completed"
:aria-label="t('tasks', 'Task is completed')">
<span class="icon task-checkbox reactive" :class="{'icon-checkmark': task.completed}"></span>
role="checkbox">
<span :class="{'icon-checkmark': task.completed}" class="icon task-checkbox reactive" />
</a>
<a class="icon task-separator"></a>
<a class="icon task-separator" />
<a class="task-star handler" ng-click="toggleStarred(task)">
<span class="icon icon-task-star right large reactive" :class="{'icon-task-star-high':task.priority > 5, 'icon-task-star-medium':task.priority == 5, 'icon-task-star-low':task.priority > 0 && task.priority < 5}">
</span>
<span :class="{'icon-task-star-high':task.priority > 5, 'icon-task-star-medium':task.priority == 5, 'icon-task-star-low':task.priority > 0 && task.priority < 5}" class="icon icon-task-star right large reactive" />
</a>
<a class="task-addsubtask handler add-subtask"
ng-show="task.calendar.writable"
ng-click="showSubtaskInput(task.uid)"
oc-click-focus="{selector: '.add-subtask input', timeout: 0}">
<span class="icon icon-add right large reactive" :title="t('tasks', 'Add a subtask to subtasks') + ' ' + task.summary"></span>
<span :title="t('tasks', 'Add a subtask to subtasks') + ' ' + task.summary" class="icon icon-add right large reactive" />
</a>
<a class="handler" ng-click="toggleSubtasks(task)">
<span class="icon right large subtasks reactive"
ng-class="task.hideSubtasks ? 'icon-subtasks-hidden' : 'icon-subtasks-visible'"
:title="t('tasks', 'Toggle subtasks')">
</span>
<span :title="t('tasks', 'Toggle subtasks')"
class="icon right large subtasks reactive"
ng-class="task.hideSubtasks ? 'icon-subtasks-hidden' : 'icon-subtasks-visible'" />
</a>
<a class="handler" ng-click="toggleCompletedSubtasks(task)">
<span class="icon icon-toggle right large toggle-completed-subtasks reactive"
ng-class="{'active': !task.hideCompletedSubtasks}"
:title="t('tasks', 'Toggle completed subtasks')">
</span>
<span :title="t('tasks', 'Toggle completed subtasks')"
class="icon icon-toggle right large toggle-completed-subtasks reactive"
ng-class="{'active': !task.hideCompletedSubtasks}" />
</a>
<a>
<span class="icon icon-note right large"></span>
<span class="icon icon-note right large" />
</a>
<!-- <a class="duedate" ng-class="{overdue: TasksModel.overdue(task.due)}">{{ task.due | dateTaskList }}</a> -->
<a ng-show="route.collectionID=='week'" class="listname">{{ task.calendar.displayname }}</a>
<div class="title-wrapper">
<span class="title" ng-bind-html="task.summary | linky:'_blank':{rel: 'nofollow'}"></span>
<span class="title" ng-bind-html="task.summary | linky:'_blank':{rel: 'nofollow'}" />
<span class="categories-list">
<ul>
<li ng-repeat="category in task.categories"><span>{{ category }}</span></li>
@ -80,8 +77,8 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
</div>
<div class="subtasks-container"
ng-class="{subtaskshidden: hideSubtasks(task)}">
<ol dnd-list="draggedTasks"
:calendarID="task.calendar.uri"
<ol :calendarID="task.calendar.uri"
dnd-list="draggedTasks"
dnd-drop="dropAsSubtask(event, item, index)"
dnd-dragover="dragover(event, index)">
<li class="task-item ui-draggable handler add-subtask"
@ -91,15 +88,15 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
ng-disabled="isAddingTask"
ng-click="focusInput()"
ng-model="status.subtaskName"
ng-keydown="checkTaskInput($event)"/>
ng-keydown="checkTaskInput($event)">
<!-- placeholder="{{ getSubAddString(task.summary) }}"/> -->
</form>
</li>
<li :taskID="task.uri"
:class="{done: task.completed}"
class="task-item ui-draggable handler subtask"
ng-repeat="task in getSubTasks(filtered,task) | orderBy:getSortOrder():settingsmodel.getById('various').sortDirection"
ng-click="openDetails(task.uri,$event)"
:class="{done: task.completed}"
dnd-draggable="task"
dnd-dragstart="dragStart(event)"
dnd-dragend="dragEnd(event)">
@ -112,13 +109,13 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
</template>
<script>
import { mapState } from 'vuex';
import { mapState } from 'vuex'
export default {
name: 'task-body-component',
computed: mapState({
}),
name: 'TaskBodyComponent',
components: {
}
},
computed: mapState({
})
}
</script>

View file

@ -23,22 +23,22 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
<div>
<div class="grouped-tasks"
ng-class="{'completed-hidden':!settingsmodel.getById('various').showHidden}">
<ol class="tasks"
:calendarID="$route.params.calendarId"
<ol :calendarID="$route.params.calendarId"
class="tasks"
collectionID="uncompleted"
type="list"
dnd-list="draggedTasks"
dnd-drop="dropAsRootTask(event, item, index)"
dnd-dragover="dragover(event, index)">
<li class="task-item ui-draggable handler"
<li v-for="task in tasks"
:taskID="task.uri"
:key="task.id"
class="task-item ui-draggable handler"
ng-click="openDetails(task.uri,$event)"
ng-class="{done: task.completed}"
dnd-draggable="task"
dnd-dragstart="dragStart(event)"
dnd-dragend="dragEnd(event)"
v-for="task in tasks"
:key="task.id">
dnd-dragend="dragEnd(event)">
<!-- ng-repeat="task in filtered = filteredTasks() | filter:hasNoParent(task) | filter:filterTasks(task,route.calendarID) | filter:{'completed':'false'} | orderBy:getSortOrder():settingsmodel.getById('various').sortDirection"> -->
<!-- dnd-effect-allowed="{{ allow(task) }}"> -->
<task />
@ -47,22 +47,22 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
<h2 class="heading-hiddentasks icon-triangle-s handler" ng-show="getCount(route.calendarID,'completed')" ng-click="toggleHidden()">
<!-- {{ getCountString(route.calendarID,'completed') }} -->
</h2>
<ol class="completed-tasks"
:calendarID="$route.params.calendarId"
<ol :calendarID="$route.params.calendarId"
class="completed-tasks"
collectionID="completed"
type="list"
dnd-list="draggedTasks"
dnd-drop="dropAsRootTask(event, item, index)"
dnd-dragover="dragover(event, index)">
<li class="task-item handler"
<li v-for="task in tasks"
:taskID="task.uri"
:key="task.id"
class="task-item handler"
ng-click="openDetails(task.uri,$event)"
ng-class="{done: task.completed}"
dnd-draggable="task"
dnd-dragstart="dragStart(event)"
dnd-dragend="dragEnd(event)"
v-for="task in tasks"
:key="task.id">
dnd-dragend="dragEnd(event)">
<!-- ng-repeat="task in filtered = filteredTasks() | filter:hasNoParent(task) | filter:filterTasks(task,route.calendarID) | filter:{'completed':true} | orderBy:'completed_date':true"> -->
<!-- dnd-effect-allowed="{{ allow(task) }}"> -->
<task />
@ -76,17 +76,17 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
</template>
<script>
import { mapState } from 'vuex';
import Task from '../Task.vue';
import { mapState } from 'vuex'
import Task from '../Task'
export default {
components: {
'task': Task
},
computed: Object.assign({},
mapState({
tasks: state => state.tasks
})
),
components: {
'task': Task
}
)
}
</script>

View file

@ -24,28 +24,28 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
<div>
<div v-for="calendar in calendars"
:key="calendar.id"
class="grouped-tasks ui-droppable"
:rel="calendar.uri">
:rel="calendar.uri"
class="grouped-tasks ui-droppable">
<h2 class="heading">
<text>{{ calendar.displayname }}</text>
</h2>
<ol class="tasks"
:calendarID="calendar.uri"
<ol :calendarID="calendar.uri"
:collectionID="$route.params.collectionId"
class="tasks"
type="list"
dnd-list="draggedTasks"
dnd-drop="dropAsRootTask(event, item, index)"
dnd-dragover="dragover(event, index)">
<li class="task-item ui-draggable handler"
<li v-for="task in tasks"
:taskID="task.uri"
:key="task.id"
class="task-item ui-draggable handler"
ng-animate="'animate'"
ng-click="openDetails(task.uri,$event)"
ng-class="{done: task.completed}"
dnd-draggable="task"
dnd-dragstart="dragStart(event)"
dnd-dragend="dragEnd(event)"
v-for="task in tasks"
:key="task.id">
dnd-dragend="dragEnd(event)">
<!-- ng-repeat="task in filtered = filteredTasks() | filter:hasNoParent(task) | filter:filterTasks(task,calendar.uri) | filter:filterTasks(task,route.collectionID) | orderBy:getSortOrder():settingsmodel.getById('various').sortDirection"> -->
<!-- dnd-effect-allowed="{{ allow(task) }}"> -->
<task-body />
@ -59,18 +59,18 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
</template>
<script>
import { mapState } from 'vuex';
import TaskBody from '../Task.vue';
import { mapState } from 'vuex'
import TaskBody from '../Task'
export default {
components: {
'task-body': TaskBody
},
computed: Object.assign({},
mapState({
calendars: state => state.calendars,
tasks: state => state.tasks
})
),
components: {
'task-body': TaskBody
}
)
}
</script>

View file

@ -24,23 +24,23 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
<h2 class="heading">
<!-- <text>{{ day | day }}</text> -->
</h2>
<ol class="tasks"
<ol :collectionID="$route.params.collectionId"
class="tasks"
listID=""
:collectionID="$route.params.collectionId"
type="list"
dnd-list="draggedTasks"
dnd-drop="dropAsRootTask(event, item, index)"
dnd-dragover="dragover(event, index)">
<li class="task-item ui-draggable handler"
<li v-for="task in tasks"
:taskID="task.uri"
:key="task.id"
class="task-item ui-draggable handler"
ng-animate="'animate'"
ng-click="openDetails(task.uri,$event)"
ng-class="{done: task.completed}"
dnd-draggable="task"
dnd-dragstart="dragStart(event)"
dnd-dragend="dragEnd(event)"
v-for="task in tasks"
:key="task.id">
dnd-dragend="dragEnd(event)">
<!-- ng-repeat="task in filtered = filteredTasks() | filter:taskAtDay(task,day) | filter:hasNoParent(task) | filter:{'completed':'false'} | orderBy:getSortOrder():settingsmodel.getById('various').sortDirection"> -->
<!-- dnd-effect-allowed="{{ allow(task) }}"> -->
<task />
@ -50,17 +50,17 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
</template>
<script>
import { mapState } from 'vuex';
import Task from '../Task.vue';
import { mapState } from 'vuex'
import Task from '../Task'
export default {
components: {
'task': Task
},
computed: Object.assign({},
mapState({
tasks: state => state.tasks
})
),
components: {
'task': Task
}
)
}
</script>

View file

@ -26,32 +26,30 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
ng-show="TaskState()=='found'"
ng-class="{'disabled': !task.calendar.writable}">
<div class="title" ng-class="{'editing':route.parameter=='name'}">
<a class="checkbox reactive"
<a :aria-checked="task.completed"
:aria-label="t('tasks', 'Task is completed')"
class="checkbox reactive"
ng-click="toggleCompleted(task)"
role="checkbox"
:aria-checked="task.completed"
:aria-label="t('tasks', 'Task is completed')">
<span class="icon detail-checkbox" ng-class="{'icon-checkmark':task.completed, 'disabled': !task.calendar.writable}"></span>
role="checkbox">
<span class="icon detail-checkbox" ng-class="{'icon-checkmark':task.completed, 'disabled': !task.calendar.writable}" />
</a>
<a class="star reactive" ng-click="toggleStarred(task)">
<span class="icon icon-task-star"
:class="{'icon-task-star-high': task.priority>5, 'icon-task-star-medium':task.priority==5, 'icon-task-star-low':task.priority > 0 && task.priority < 5, 'disabled': !task.calendar.writable}"></span>
<span :class="{'icon-task-star-high': task.priority>5, 'icon-task-star-medium':task.priority==5, 'icon-task-star-low':task.priority > 0 && task.priority < 5, 'disabled': !task.calendar.writable}"
class="icon icon-task-star" />
</a>
<div class="title-text handler"
:class="{'strike-through':task.completed}"
<div :class="{'strike-through':task.completed}"
class="title-text handler"
ng-click="editName($event, task)"
oc-click-focus="{selector: '#editName', timeout: 0}"
ng-bind-html="task.summary | linky:'_blank':{rel: 'nofollow'}">
</div>
ng-bind-html="task.summary | linky:'_blank':{rel: 'nofollow'}" />
<div class="expandable-container handler">
<div class="expandingArea active">
<pre><span>{{ task.summary }}</span><br /></pre>
<pre><span>{{ task.summary }}</span><br></pre>
<textarea id="editName"
maxlength="200"
ng-model="task.summary"
ng-keydown="endName($event)"
ng-change="triggerUpdate(task)">
</textarea>
ng-change="triggerUpdate(task)" />
</div>
</div>
</div>
@ -62,7 +60,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
ng-click="editStart($event, task)">
<div>
<span class="icon icon-calendar" ng-class="{'icon-calendar-due':isDue(task.start),
'icon-calendar-overdue':isOverDue(task.start)}"></span>
'icon-calendar-overdue':isOverDue(task.start)}" />
<span class="section-title">
<!-- <text>{{ task.start | startDetails }}</text> -->
</span>
@ -84,10 +82,10 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
</div>
<div class="utils">
<a>
<span class="icon detail-save icon-checkmark-color handler end-edit reactive"></span>
<span class="icon detail-save icon-checkmark-color handler end-edit reactive" />
</a>
<a class="handler end-edit" ng-click="deleteStartDate(task)">
<span class="icon icon-trash reactive"></span>
<span class="icon icon-trash reactive" />
</a>
</div>
</li>
@ -95,7 +93,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
ng-class="{'date':isDue(task.due), 'editing':route.parameter=='duedate', 'high':isOverDue(task.due)}"
ng-click="editDueDate($event, task)">
<div>
<span class="icon icon-calendar" ng-class="{'icon-calendar-due':isDue(task.due), 'icon-calendar-overdue':isOverDue(task.due)}"></span>
<span class="icon icon-calendar" ng-class="{'icon-calendar-due':isDue(task.due), 'icon-calendar-overdue':isOverDue(task.due)}" />
<span class="section-title">
<!-- <text>{{ task.due | dateDetails }}</text> -->
</span>
@ -117,20 +115,20 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
</div>
<div class="utils">
<a>
<span class="icon detail-save icon-checkmark-color handler end-edit reactive"></span>
<span class="icon detail-save icon-checkmark-color handler end-edit reactive" />
</a>
<a class="handler end-edit" ng-click="deleteDueDate(task)">
<span class="icon icon-trash reactive"></span>
<span class="icon icon-trash reactive" />
</a>
</div>
</li>
<li class="section detail-all-day handler reactive"
<li :aria-checked="task.allDay"
class="section detail-all-day handler reactive"
ng-click="toggleAllDay(task)"
ng-if="isAllDayPossible(task)"
role="checkbox"
:aria-checked="task.allDay">
role="checkbox">
<div>
<span class="icon detail-checkbox" ng-class="{'icon-checkmark': task.allDay, 'disabled': !task.calendar.writable}"></span>
<span class="icon detail-checkbox" ng-class="{'icon-checkmark': task.allDay, 'disabled': !task.calendar.writable}" />
<span class="section-title">
<text>{{ t('tasks', 'All day') }}</text>
</span>
@ -140,8 +138,8 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
ng-class="{'editing':route.parameter=='priority','high':task.priority>5,'medium':task.priority==5,'low':task.priority > 0 && task.priority < 5, 'date':task.priority>0}"
ng-click="editPriority($event, task)">
<div>
<span class="icon icon-task-star"
:class="{'icon-task-star-high':task.priority>5,'icon-task-star-medium':task.priority==5,'icon-task-star-low':task.priority > 0 && task.priority < 5}"></span>
<span :class="{'icon-task-star-high':task.priority>5,'icon-task-star-medium':task.priority==5,'icon-task-star-low':task.priority > 0 && task.priority < 5}"
class="icon icon-task-star" />
<span class="section-title">
<!-- <text>{{ task.priority | priorityDetails}}</text> -->
</span>
@ -160,10 +158,10 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
</div>
<div class="utils">
<a>
<span class="icon detail-save icon-checkmark-color handler end-edit reactive"></span>
<span class="icon detail-save icon-checkmark-color handler end-edit reactive" />
</a>
<a class="handler end-edit" ng-click="deletePriority(task)">
<span class="icon icon-trash reactive"></span>
<span class="icon icon-trash reactive" />
</a>
</div>
</li>
@ -171,7 +169,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
ng-class="{'editing':route.parameter=='percent', 'date':task.complete>0}"
ng-click="editPercent($event, task)">
<div>
<span class="icon icon-percent" ng-class="{'icon-percent-active':task.complete>0}"></span>
<span class="icon icon-percent" ng-class="{'icon-percent-active':task.complete>0}" />
<span class="section-title">
<!-- <text>{{ task.complete | percentDetails}}</text> -->
</span>
@ -190,16 +188,16 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
</div>
<div class="utils">
<a>
<span class="icon detail-save icon-checkmark-color handler end-edit reactive"></span>
<span class="icon detail-save icon-checkmark-color handler end-edit reactive" />
</a>
<a class="handler end-edit" ng-click="deletePercent(task)">
<span class="icon icon-trash reactive"></span>
<span class="icon icon-trash reactive" />
</a>
</div>
</li>
<li class="section detail-categories" ng-class="{'active':task.cats.length>0}">
<div>
<span class="icon icon-tag detail-categories" ng-class="{'icon-tag-active':task.cats.length>0}"></span>
<span class="icon icon-tag detail-categories" ng-class="{'icon-tag-active':task.cats.length>0}" />
<!-- Edit line 1080 to show placeholder -->
<div class="detail-categories-container">
<!-- <ui-select
@ -226,11 +224,11 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
ng-click="editNote($event, task)"
oc-click-focus="{selector: '.expandingArea textarea', timeout: 0}">
<div class="content-fakeable" ng-class="{'editing':route.parameter=='note'}">
<div class="display-view" ng-bind-html="task.note | linky:'_blank':{rel: 'nofollow'}"></div>
<div class="display-view" ng-bind-html="task.note | linky:'_blank':{rel: 'nofollow'}" />
<div class="edit-view">
<div class="expandingArea active">
<pre><span>{{ task.note }}</span><br /><br /></pre>
<textarea ng-model="task.note" ng-change="triggerUpdate(task)"></textarea>
<pre><span>{{ task.note }}</span><br><br></pre>
<textarea ng-model="task.note" ng-change="triggerUpdate(task)" />
</div>
</div>
</div>
@ -243,10 +241,10 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
<a class="handler left close-all reactive"
ng-click="deleteTask(task)"
ng-show="task.calendar.writable">
<span class="icon icon-trash"></span>
<span class="icon icon-trash" />
</a>
<a class="handler right close-all reactive">
<span class="icon icon-hide"></span>
<span class="icon icon-hide" />
</a>
</div>
</div>
@ -261,11 +259,9 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
</template>
<script>
import { mapState } from 'vuex';
import { mapState } from 'vuex'
export default {
computed: mapState({
}),
components: {
},
data: function() {
@ -278,9 +274,11 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
completed: false,
priority: 5,
cats: [],
note: "Migrate this app to vue."
note: 'Migrate this app to vue.'
}
};
}
},
computed: mapState({
})
}
</script>

View file

@ -23,19 +23,19 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
<ul id="collections">
<router-link
v-for="collection in collections"
tag="li"
v-bind:id="'collection_' + collection.id"
v-bind:collectionID="collection.id"
:id="'collection_' + collection.id"
:collection-id="collection.id"
:to="'/collections/' + collection.id"
:key="collection.id"
class="collection reactive" :class="collection.icon"
:class="collection.icon"
tag="li" class="collection reactive"
active-class="active"
ng-class="{'animate-up': hideCollection(collection.id)}"
dnd-list="draggedTasks"
dnd-drop="dropCollection(event, index, item)"
dnd-dragover="dragoverCollection(event, index)">
<a class="sprite">
<span class="date" v-if="collection.id=='today'">{{ dayOfMonth }}</span>
<span v-if="collection.id=='today'" class="date">{{ dayOfMonth }}</span>
<span class="title">{{ collection.displayname }}</span>
</a>
<div class="app-navigation-entry-utils">
@ -46,11 +46,11 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
</router-link>
<router-link
v-for="calendar in calendars"
tag="li"
v-bind:id="'list_' + calendar.uri"
v-bind:calendarID="calendar.uri"
:id="'list_' + calendar.uri"
:calendar-id="calendar.uri"
:to="'/calendars/' + calendar.uri"
:key="calendar.uri"
tag="li"
class="list with-menu handler editing"
active-class="active"
ng-class="edit:route.listparameter == 'name' && route.calendarID == calendar.uri,
@ -58,38 +58,37 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
dnd-list="draggedTasks"
dnd-drop="dropList(event, index, item)"
dnd-dragover="dragoverList(event, index)">
<div class="app-navigation-entry-bullet" :style="'background-color: ' + calendar.color + ';'"></div>
<div :style="'background-color: ' + calendar.color + ';'" class="app-navigation-entry-bullet" />
<a ng-dblclick="startRename(calendar)">
<span class="title">{{ calendar.displayname }}</span>
</a>
<div class="app-navigation-entry-utils">
<ul>
<!-- <li class="app-navigation-entry-utils-counter">{{ getListCount(calendar.uri,'all') | counterFormatter }}</li> -->
<li class="app-navigation-entry-utils-menu-button" v-show="calendar.writable"><button></button></li>
<li v-show="calendar.writable" class="app-navigation-entry-utils-menu-button"><button /></li>
</ul>
</div>
<div class="app-navigation-entry-menu" v-show="calendar.writable">
<div v-show="calendar.writable" class="app-navigation-entry-menu">
<ul>
<li>
<a ng-click="startEdit(calendar)">
<span class="icon-rename"></span>
<span class="icon-rename" />
<span>{{ t('tasks', 'Edit') }}</span>
</a>
</li>
<li>
<a ng-click="showCalDAVUrl(calendar)">
<span class="icon-public"></span>
<span class="icon-public" />
<span>{{ t('tasks', 'Link') }}</span>
</a>
</li>
<li>
<a :href="calendar.exportUrl" :download="calendar.uri + '.ics'">
<span class="icon-download"></span>
<span class="icon-download" />
<span>{{ t('tasks', 'Download') }}</span>
</a>
</li>
<li confirmation="delete(calendar)" confirmation-message="deleteMessage(calendar)">
</li>
<li confirmation="delete(calendar)" confirmation-message="deleteMessage(calendar)" />
</ul>
</div>
<div class="app-navigation-entry-edit name" ng-class="{error: nameError}">
@ -99,16 +98,16 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
type="text"
ng-keyup="checkEdit($event,calendar)"
autofocus-on-insert>
<input type="cancel"
<input :title="t('tasks', 'Cancel')"
type="cancel"
value=""
class="action icon-close"
ng-click="cancelEdit(calendar)"
v-bind:title="t('tasks', 'Cancel')">
<input type="submit"
ng-click="cancelEdit(calendar)">
<input :title="t('tasks', 'Save')"
type="submit"
value=""
class="action icon-checkmark"
ng-click="saveEdit(calendar)"
v-bind:title="t('tasks', 'Save')">
ng-click="saveEdit(calendar)">
</form>
<colorpicker class="colorpicker" selected="calendar.color" />
</div>
@ -117,12 +116,12 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
<input class="caldav"
ng-value="calendar.caldav"
readonly
type="text"/>
<input type="cancel"
type="text">
<input :title="t('tasks', 'Cancel')"
type="cancel"
value=""
class="action icon-close"
ng-click="hideCalDAVUrl()"
v-bind:title="t('tasks', 'Cancel')">
ng-click="hideCalDAVUrl()">
</form>
</div>
</router-link>
@ -135,22 +134,22 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
<div class="app-navigation-entry-edit name" ng-class="{error: nameError}">
<form ng-disabled="isAddingList">
<input id="newList"
:placeholder="t('tasks', 'New List')"
ng-model="status.newListName"
class="edit hasTooltip"
type="text"
autofocus-on-insert
v-bind:placeholder="t('tasks', 'New List')"
ng-keyup="checkNew($event,status.newListName)">
<input type="cancel"
<input :title="t('tasks', 'Cancel')"
type="cancel"
value=""
class="action icon-close"
ng-click="cancelCreate()"
v-bind:title="t('tasks', 'Cancel')">
<input type="submit"
ng-click="cancelCreate()">
<input :title="t('tasks', 'Save')"
type="submit"
value=""
class="action icon-checkmark"
ng-click="create($event)"
v-bind:title="t('tasks', 'Save')">
ng-click="create($event)">
</form>
<colorpicker class="colorpicker" selected="color" />
</div>
@ -159,19 +158,19 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
</template>
<script>
import { mapState } from 'vuex';
import Colorpicker from './Colorpicker.vue';
import { mapState } from 'vuex'
import Colorpicker from './Colorpicker'
export default {
components: {
'colorpicker': Colorpicker
},
computed: Object.assign({},
mapState({
collections: state => state.collections,
calendars: state => state.calendars,
dayOfMonth: state => state.dayOfMonth
})
),
components: {
'colorpicker': Colorpicker,
}
)
}
</script>

View file

@ -19,12 +19,12 @@
*
*/
import Vue from "vue";
import VueRouter from "vue-router";
import Vue from 'vue'
import VueRouter from 'vue-router'
import CollectionGeneral from "./TheCollections/General.vue";
import CollectionWeek from "./TheCollections/Week.vue";
import CollectionCalendar from "./TheCollections/Calendar.vue";
import CollectionGeneral from './TheCollections/General'
import CollectionWeek from './TheCollections/Week'
import CollectionCalendar from './TheCollections/Calendar'
const routes = [
// using
@ -36,11 +36,11 @@ const routes = [
// https://github.com/vuejs/vue-router/issues/419
{ path: '/collections/week', component: CollectionWeek },
{ path: '/collections/:collectionId', component: CollectionGeneral },
{ path: '/calendars/:id', component: CollectionCalendar, props: true},
];
{ path: '/calendars/:id', component: CollectionCalendar, props: true }
]
Vue.use(VueRouter);
Vue.use(VueRouter)
export default new VueRouter({
routes, // short for `routes: routes`
});
routes // short for `routes: routes`
})

View file

@ -33,8 +33,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
<select id="startOfWeek"
ng-change="setStartOfWeek()"
ng-model="settingsmodel.getById('various').startOfWeek"
ng-options="startOfWeekOption.id as startOfWeekOption.name for startOfWeekOption in startOfWeekOptions">
</select>
ng-options="startOfWeekOption.id as startOfWeekOption.name for startOfWeekOption in startOfWeekOptions" />
</li>
<li class="headline">
{{ t('tasks', 'Visibility of Smart Collections') }}
@ -42,7 +41,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
<li v-for="collection in collections"
:key="collection.id">
<div class="label-container">
<span class="icon" :class="collection.icon">
<span :class="collection.icon" class="icon">
<text ng-show="collection.id=='today'">{{ dayOfMonth }}</text>
</span>
<label :for="'visibilityCollection-' + collection.id" class="title">{{ collection.displayname }}</label>
@ -50,8 +49,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
<select :id="'visibilityCollection-' + collection.id"
ng-change="setVisibility(collection.id)"
ng-model="collection.show"
ng-options="collectionOption.id as collectionOption.name for collectionOption in collectionOptions">
</select>
ng-options="collectionOption.id as collectionOption.name for collectionOption in collectionOptions" />
</li>
</ul>
</div>
@ -59,17 +57,17 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
</template>
<script>
import { mapState } from 'vuex';
import { mapState } from 'vuex'
export default {
components: {
},
computed: Object.assign({},
mapState({
collections: state => state.collections,
calendars: state => state.calendars,
dayOfMonth: state => state.dayOfMonth
})
),
components: {
}
)
}
</script>

View file

@ -18,28 +18,26 @@
* License along with this library. If not, see <http://www.gnu.org/licenses/>.
*
*/
'use strict';
'use strict'
import App from './app'
import Vue from 'vue'
import router from './components/TheRouter'
import store from './store'
if (!OCA.Tasks) {
/**
* @namespace OCA.Tasks
*/
OCA.Tasks = {};
OCA.Tasks = {}
}
import App from './app.vue';
import Vue from 'vue';
import Vuex from 'vuex';
import VueRouter from 'vue-router';
import router from './components/TheRouter.js';
import store from './store';
Vue.prototype.t = t;
Vue.prototype.n = n;
Vue.prototype.OC = OC;
Vue.prototype.OCA = OCA;
Vue.prototype.t = t
Vue.prototype.n = n
Vue.prototype.OC = OC
Vue.prototype.OCA = OCA
OCA.Tasks.App = new Vue({
el: '.app-tasks',
@ -48,33 +46,33 @@ OCA.Tasks.App = new Vue({
data: function() {
return {
searchString: ''
};
}
},
mounted: function() {
var version = OC.config.version.split('.');
var version = OC.config.version.split('.')
if (version[0] >= 14) {
OC.Search = new OCA.Search(this.filter, this.cleanSearch);
OC.Search = new OCA.Search(this.filter, this.cleanSearch)
} else {
OCA.Tasks.Search = {
attach: function(search) {
search.setFilter('tasks', this.filter);
search.setFilter('tasks', this.filter)
}
}
};
OC.Plugins.register('OCA.Search', OCA.Tasks.Search);
OC.Plugins.register('OCA.Search', OCA.Tasks.Search)
}
},
beforeMount() {
this.$store.dispatch('loadCollections');
this.$store.dispatch('loadCollections')
},
methods: {
filter(query) {
this.searchString = query;
this.searchString = query
},
cleanSearch() {
this.searchString = '';
this.searchString = ''
}
},
render: h => h(App)
});
})

View file

@ -18,15 +18,15 @@
* License along with this library. If not, see <http://www.gnu.org/licenses/>.
*
*/
'use strict';
'use strict'
import Axios from 'axios';
Axios.defaults.headers.common.requesttoken = OC.requestToken;
import Axios from 'axios'
Axios.defaults.headers.common.requesttoken = OC.requestToken
export default {
get(url) {
return Axios.get(url)
.then((response) => Promise.resolve(response))
.catch((error) => Promise.reject(error));
.catch((error) => Promise.reject(error))
}
}
};

View file

@ -18,13 +18,13 @@
* License along with this library. If not, see <http://www.gnu.org/licenses/>.
*
*/
'use strict';
'use strict'
import Vue from 'vue';
import Vuex from 'vuex';
import Requests from './services/requests';
import Vue from 'vue'
import Vuex from 'vuex'
import Requests from './services/requests'
Vue.use(Vuex);
Vue.use(Vuex)
export default new Vuex.Store({
state: {
@ -33,21 +33,21 @@ export default new Vuex.Store({
],
calendars: [
{
uri: "test-1",
displayname: "Test 1",
color: "#eef",
uri: 'test-1',
displayname: 'Test 1',
color: '#eef',
writable: true
},
{
uri: "test-2",
displayname: "Test 2",
color: "#eef",
uri: 'test-2',
displayname: 'Test 2',
color: '#eef',
writable: false
},
{
uri: "test-3",
displayname: "Test 3",
color: "#112233",
uri: 'test-3',
displayname: 'Test 3',
color: '#112233',
writable: true
}
],
@ -55,7 +55,7 @@ export default new Vuex.Store({
},
mutations: {
setCollections(state, payload) {
state.collections = payload.collections;
state.collections = payload.collections
}
},
actions: {
@ -65,13 +65,10 @@ export default new Vuex.Store({
.then(response => {
commit('setCollections', {
collections: response.data.data.collections
});
resolve();
})
.catch(error => {
console.log(error);
});
});
resolve()
})
})
}
}
});
})

View file

Before

Width:  |  Height:  |  Size: 7.7 KiB

After

Width:  |  Height:  |  Size: 7.7 KiB

View file

@ -1,4 +1,4 @@
<?php
script('tasks', 'merged');
style('tasks', 'style');
script('tasks', 'tasks');
style('tasks', 'tasks');
?>

View file

@ -1,22 +1,32 @@
var path = require('path');
var VueLoaderPlugin = require('vue-loader/lib/plugin');
const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');
const StyleLintPlugin = require('stylelint-webpack-plugin');
module.exports = {
mode: 'development',
entry: './js/app/main.js',
entry: ['babel-polyfill', path.join(__dirname, 'src', 'main.js')],
output: {
path: path.resolve(__dirname, './js/public'),
publicPath: '/public/',
filename: 'build.js'
path: path.resolve(__dirname, './js'),
publicPath: '/js/',
filename: 'tasks.js'
},
plugins: [
new VueLoaderPlugin()
],
module: {
rules: [
{
test: /\.css$/,
use: ['vue-style-loader', 'css-loader']
},
{
test: /\.scss$/,
use: ['vue-style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.(js|vue)$/,
use: 'eslint-loader',
enforce: 'pre'
},
{
test: /\.vue$/,
loader: 'vue-loader',
loader: 'vue-loader'
},
{
test: /\.js$/,
@ -29,29 +39,14 @@ module.exports = {
options: {
name: '[name].[ext]?[hash]'
}
},
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
}
]
},
plugins: [new VueLoaderPlugin(), new StyleLintPlugin()],
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': path.resolve(__dirname, 'js/app')
vue$: 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
}
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
};

12
webpack.dev.js Normal file
View file

@ -0,0 +1,12 @@
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'development',
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
devtool: '#eval-source-map',
});

View file

@ -1,16 +1,7 @@
const merge = require('webpack-merge');
const common = require('./webpack.common');
const webpack = require('webpack');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const common = require('./webpack.common.js');
module.exports = merge(common, {
devtool: 'none',
mode: 'production',
// http://vue-loader.vuejs.org/en/workflow/production.html
plugins: [
new UglifyJSPlugin(),
new webpack.LoaderOptionsPlugin({
minimize: true
})
]
devtool: '#source-map'
});