Improve webpack configuration
This commit is contained in:
Raimund Schlüßler
parent
928026cb5e
commit
93d27c1b94
78 changed files with 17369 additions and 618 deletions
59
.eslintrc.js
Normal file
59
.eslintrc.js
Normal 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
6
.gitignore
vendored
|
|
@ -1,11 +1,9 @@
|
||||||
######################
|
######################
|
||||||
## Files build by make
|
## Files build by make
|
||||||
######################
|
######################
|
||||||
/css/src/sprite.scss
|
/css/src/sprites.scss
|
||||||
/css/style.scss
|
|
||||||
/img/sprites.svg
|
/img/sprites.svg
|
||||||
/js/public/
|
/js/
|
||||||
/js/vendor/
|
|
||||||
|
|
||||||
#################
|
#################
|
||||||
## PhpStorm
|
## PhpStorm
|
||||||
|
|
|
||||||
47
.jshintrc
47
.jshintrc
|
|
@ -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
1
.prettierrc.js
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
module.exports = {};
|
||||||
37
.stylelintrc
37
.stylelintrc
|
|
@ -1,19 +1,22 @@
|
||||||
{
|
{
|
||||||
"extends": "stylelint-config-standard",
|
"extends": "stylelint-config-recommended-scss",
|
||||||
"plugins": [
|
"rules": {
|
||||||
"stylelint-scss"
|
"indentation": "tab",
|
||||||
],
|
"selector-type-no-unknown": null,
|
||||||
"ignoreFiles": [
|
"number-leading-zero": null,
|
||||||
"./css/src/sprite.scss"
|
"rule-empty-line-before": ["always", {
|
||||||
],
|
"ignore": ["after-comment", "inside-block"]
|
||||||
"rules": {
|
}],
|
||||||
"indentation": "tab",
|
"declaration-empty-line-before": ["never", {
|
||||||
"number-leading-zero": "never",
|
"ignore": ["after-declaration"]
|
||||||
"comment-empty-line-before": ["always", {
|
}],
|
||||||
"except": ["first-nested"]
|
"comment-empty-line-before": null,
|
||||||
}],
|
"selector-type-case": null,
|
||||||
"at-rule-no-unknown": null,
|
"selector-list-comma-newline-after": null,
|
||||||
"scss/at-rule-no-unknown": true,
|
"no-descending-specificity": null,
|
||||||
"no-descending-specificity": null
|
"string-quotes": null
|
||||||
}
|
},
|
||||||
|
"plugins": [
|
||||||
|
"stylelint-scss"
|
||||||
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -90,11 +90,11 @@ $white: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-navigation-entry-edit {
|
.app-navigation-entry-edit {
|
||||||
&.name input[type="text"] {
|
&.name input[type='text'] {
|
||||||
width: calc(100% - 72px);
|
width: calc(100% - 72px);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.caldav input[type="text"] {
|
&.caldav input[type='text'] {
|
||||||
width: calc(100% - 36px);
|
width: calc(100% - 36px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -248,7 +248,6 @@ $white: #fff;
|
||||||
|
|
||||||
.confirmation-confirm {
|
.confirmation-confirm {
|
||||||
@extend .confirmation-abort;
|
@extend .confirmation-abort;
|
||||||
|
|
||||||
background-color: $red !important;
|
background-color: $red !important;
|
||||||
cursor: default !important;
|
cursor: default !important;
|
||||||
}
|
}
|
||||||
|
|
@ -915,14 +914,14 @@ ol[dnd-list] {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="range"] {
|
input[type='range'] {
|
||||||
border: medium none;
|
border: medium none;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
width: calc(100% - 50px);
|
width: calc(100% - 50px);
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="text"] {
|
input[type='text'] {
|
||||||
background: none repeat scroll 0 0 $gray_easy;
|
background: none repeat scroll 0 0 $gray_easy;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
|
|
@ -1193,7 +1192,7 @@ ol[dnd-list] {
|
||||||
|
|
||||||
&.icon-checkmark,
|
&.icon-checkmark,
|
||||||
&.icon-tag-active,
|
&.icon-tag-active,
|
||||||
&[class*=" icon-task-star-"] {
|
&[class*=' icon-task-star-'] {
|
||||||
opacity: 1 !important;
|
opacity: 1 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1296,7 +1295,7 @@ ol[dnd-list] {
|
||||||
& > a span {
|
& > a span {
|
||||||
opacity: 1 !important;
|
opacity: 1 !important;
|
||||||
|
|
||||||
&[class*=" icon-"] {
|
&[class*=' icon-'] {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
background-size: auto;
|
background-size: auto;
|
||||||
|
|
||||||
|
|
|
||||||
24
css/tasks.scss
Normal file
24
css/tasks.scss
Normal 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';
|
||||||
71
gulpfile.js
71
gulpfile.js
|
|
@ -19,31 +19,13 @@
|
||||||
|
|
||||||
// get plugins
|
// get plugins
|
||||||
const gulp = require('gulp'),
|
const gulp = require('gulp'),
|
||||||
jshint = require('gulp-jshint'),
|
|
||||||
concat = require('gulp-concat'),
|
|
||||||
stylelint = require('gulp-stylelint'),
|
|
||||||
svgSprite = require('gulp-svg-sprite'),
|
svgSprite = require('gulp-svg-sprite'),
|
||||||
webpackStream = require('webpack-stream'),
|
webpackStream = require('webpack-stream'),
|
||||||
webpackDevelopmentConfig = require('./webpack.common.js'),
|
webpackDevelopmentConfig = require('./webpack.dev.js'),
|
||||||
webpackProductionConfig = require('./webpack.prod.js');
|
webpackProductionConfig = require('./webpack.prod.js');
|
||||||
|
|
||||||
// configure
|
// configure
|
||||||
const destinationFolder = __dirname + '/js/public/';
|
const destinationFolder = __dirname + '/js/';
|
||||||
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 svgConfig = {
|
const svgConfig = {
|
||||||
shape: {
|
shape: {
|
||||||
|
|
@ -55,10 +37,10 @@ const svgConfig = {
|
||||||
common: 'icon',
|
common: 'icon',
|
||||||
dimensions: '',
|
dimensions: '',
|
||||||
prefix: '.icon-%s',
|
prefix: '.icon-%s',
|
||||||
sprite: "../img/sprites.svg",
|
sprite: '../img/sprites.svg',
|
||||||
render: {
|
render: {
|
||||||
scss: {
|
scss: {
|
||||||
dest: "src/sprites.scss"
|
dest: 'src/sprites.scss'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -69,57 +51,16 @@ const svgConfig = {
|
||||||
|
|
||||||
gulp.task('default', ['build']);
|
gulp.task('default', ['build']);
|
||||||
|
|
||||||
gulp.task('build', ['lint', 'scssConcat'], function(callback) {
|
gulp.task('build', ['svg_sprite'], function(callback) {
|
||||||
return webpackStream(webpackProductionConfig, require('webpack'))
|
return webpackStream(webpackProductionConfig, require('webpack'))
|
||||||
.pipe(gulp.dest(destinationFolder));
|
.pipe(gulp.dest(destinationFolder));
|
||||||
});
|
});
|
||||||
|
|
||||||
gulp.task('development', ['lint', 'scssConcat'], function(callback) {
|
gulp.task('development', ['svg_sprite'], function(callback) {
|
||||||
return webpackStream(webpackDevelopmentConfig, require('webpack'))
|
return webpackStream(webpackDevelopmentConfig, require('webpack'))
|
||||||
.pipe(gulp.dest(destinationFolder));
|
.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', () => {
|
gulp.task('svg_sprite', () => {
|
||||||
return gulp.src('**/*.svg', {cwd: 'img/src'})
|
return gulp.src('**/*.svg', {cwd: 'img/src'})
|
||||||
.pipe(svgSprite(svgConfig))
|
.pipe(svgSprite(svgConfig))
|
||||||
|
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
[
|
|
||||||
"public/build.js"
|
|
||||||
]
|
|
||||||
16785
package-lock.json
generated
Normal file
16785
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
203
package.json
203
package.json
|
|
@ -1,99 +1,108 @@
|
||||||
{
|
{
|
||||||
"name": "tasks",
|
"name": "tasks",
|
||||||
"description": "Nextcloud - Tasks",
|
"description": "Nextcloud - Tasks",
|
||||||
"version": "0.9.8",
|
"version": "0.9.7",
|
||||||
"author": {
|
"author": {
|
||||||
"name": "Raimund Schlüßler",
|
"name": "Raimund Schlüßler",
|
||||||
"email": "raimund.schluessler@mailbox.org"
|
"email": "raimund.schluessler@mailbox.org"
|
||||||
},
|
},
|
||||||
"license": "AGPLv3",
|
"license": "AGPLv3",
|
||||||
"private": true,
|
"private": true,
|
||||||
"homepage": "https://github.com/nextcloud/tasks",
|
"homepage": "https://github.com/nextcloud/tasks",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"test": "jest --verbose",
|
"test": "jest --verbose",
|
||||||
"prebuild": "npm install && npm upgrade",
|
"prebuild": "npm install && npm upgrade",
|
||||||
"build": "node node_modules/gulp-cli/bin/gulp.js build",
|
"build": "node node_modules/gulp-cli/bin/gulp.js build",
|
||||||
"development": "node node_modules/gulp-cli/bin/gulp.js development",
|
"lint": "eslint --ext .js,.vue src tests",
|
||||||
"watch": "node node_modules/gulp-cli/bin/gulp.js watch"
|
"lint:fix": "eslint --ext .js,.vue src tests --fix",
|
||||||
},
|
"dev": "node node_modules/gulp-cli/bin/gulp.js development",
|
||||||
"repository": {
|
"watch": "webpack --progress --watch --config webpack.dev.js"
|
||||||
"type": "git",
|
},
|
||||||
"url": "git@github.com:nextcloud/tasks.git"
|
"repository": {
|
||||||
},
|
"type": "git",
|
||||||
"bugs": "https://github.com/nextcloud/tasks/issues",
|
"url": "git@github.com:nextcloud/tasks.git"
|
||||||
"contributors": [],
|
},
|
||||||
"dependencies": {
|
"bugs": "https://github.com/nextcloud/tasks/issues",
|
||||||
"axios": "^0.18.0",
|
"contributors": [],
|
||||||
"vue": "^2.5.17",
|
"dependencies": {
|
||||||
"vue-router": "3.0.1",
|
"axios": "^0.18.0",
|
||||||
"vuex": "^3.0.1",
|
"babel-polyfill": "^6.26.0",
|
||||||
"ical.js": "~1.2.2",
|
"ical.js": "~1.2.2",
|
||||||
"jstimezonedetect": "",
|
"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",
|
||||||
"devDependencies": {
|
"vue-router": "3.0.1",
|
||||||
"@vue/test-utils": "^1.0.0-beta.24",
|
"vuex": "^3.0.1"
|
||||||
"babel-core": "^6.26.3",
|
},
|
||||||
"babel-jest": "^23.4.2",
|
"devDependencies": {
|
||||||
"babel-loader": "^7.1.5",
|
"@vue/test-utils": "^1.0.0-beta.24",
|
||||||
"babel-preset-env": "^1.7.0",
|
"babel-core": "^6.26.3",
|
||||||
"cross-env": "^5.2.0",
|
"babel-eslint": "^8.2.5",
|
||||||
"css-loader": "^1.0.0",
|
"babel-jest": "^23.4.2",
|
||||||
"expect": "^23.5.0",
|
"babel-loader": "^7.1.4",
|
||||||
"file-loader": "^1.1.11",
|
"babel-preset-env": "^1.7.0",
|
||||||
"gulp": "^3.9.1",
|
"css-loader": "^1.0.0",
|
||||||
"gulp-cli": "^2.0.1",
|
"eslint": "^4.19.1",
|
||||||
"gulp-concat": "^2.6.1",
|
"eslint-config-standard": "^11.0.0",
|
||||||
"gulp-jshint": "^2.1.0",
|
"eslint-friendly-formatter": "^4.0.1",
|
||||||
"gulp-stylelint": "^7.0.0",
|
"eslint-loader": "^2.0.0",
|
||||||
"gulp-svg-sprite": "1.4.0",
|
"eslint-plugin-import": "^2.13.0",
|
||||||
"jest": "^23.5.0",
|
"eslint-plugin-node": "^6.0.1",
|
||||||
"jest-serializer-vue": "^2.0.2",
|
"eslint-plugin-promise": "^3.8.0",
|
||||||
"jsdom": "^11.12.0",
|
"eslint-plugin-standard": "^3.1.0",
|
||||||
"jsdom-global": "^3.0.2",
|
"eslint-plugin-vue": "^4.5.0",
|
||||||
"jshint": "^2.9.6",
|
"expect": "^23.5.0",
|
||||||
"stylelint": "^9.4.0",
|
"file-loader": "^1.1.11",
|
||||||
"stylelint-config-standard": "^18.2.0",
|
"gulp": "^3.9.1",
|
||||||
"stylelint-scss": "^3.2.0",
|
"gulp-cli": "^2.0.1",
|
||||||
"uglifyjs-webpack-plugin": "^1.2.7",
|
"gulp-svg-sprite": "1.4.0",
|
||||||
"vue-jest": "^2.6.0",
|
"jest": "^23.5.0",
|
||||||
"vue-loader": "^15.3.0",
|
"jest-serializer-vue": "^2.0.2",
|
||||||
"vue-template-compiler": "^2.5.17",
|
"prettier-eslint": "^8.8.2",
|
||||||
"webpack": "^4.16.5",
|
"raw-loader": "^0.5.1",
|
||||||
"webpack-cli": "^3.1.0",
|
"sass-loader": "^7.0.3",
|
||||||
"webpack-dev-server": "^3.1.5",
|
"stylelint": "^8.4.0",
|
||||||
"webpack-merge": "^4.1.4",
|
"stylelint-config-recommended-scss": "^3.2.0",
|
||||||
"webpack-node-externals": "^1.6.0",
|
"stylelint-scss": "^3.1.3",
|
||||||
"webpack-stream": "^5.1.1"
|
"stylelint-webpack-plugin": "^0.10.5",
|
||||||
},
|
"vue-jest": "^2.6.0",
|
||||||
"engines": {
|
"vue-loader": "^15.4.1",
|
||||||
"node": ">=6"
|
"vue-template-compiler": "^2.5.17",
|
||||||
},
|
"webpack": "^4.17.1",
|
||||||
"jest": {
|
"webpack-cli": "^3.1.0",
|
||||||
"moduleFileExtensions": [
|
"webpack-dev-server": "^3.1.7",
|
||||||
"js",
|
"webpack-merge": "^4.1.4",
|
||||||
"vue"
|
"webpack-node-externals": "^1.6.0",
|
||||||
],
|
"webpack-stream": "^5.1.1"
|
||||||
"moduleNameMapper": {
|
},
|
||||||
"^@/(.*)$": "<rootDir>/js/app/$1"
|
"engines": {
|
||||||
},
|
"node": ">=6"
|
||||||
"transform": {
|
},
|
||||||
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
|
"jest": {
|
||||||
".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
|
"moduleFileExtensions": [
|
||||||
},
|
"js",
|
||||||
"snapshotSerializers": [
|
"vue"
|
||||||
"<rootDir>/node_modules/jest-serializer-vue"
|
],
|
||||||
],
|
"moduleNameMapper": {
|
||||||
"collectCoverage": true,
|
"^@/(.*)$": "<rootDir>/src/$1"
|
||||||
"collectCoverageFrom": [
|
},
|
||||||
"<rootDir>/js/app/**/*.{js,vue}",
|
"transform": {
|
||||||
"!**/node_modules/**",
|
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
|
||||||
"!**/vendor/**"
|
".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
|
||||||
],
|
},
|
||||||
"coverageReporters": [
|
"snapshotSerializers": [
|
||||||
"json",
|
"<rootDir>/node_modules/jest-serializer-vue"
|
||||||
"text",
|
],
|
||||||
"html"
|
"collectCoverage": true,
|
||||||
]
|
"collectCoverageFrom": [
|
||||||
}
|
"<rootDir>/src/**/*.{js,vue}",
|
||||||
|
"!**/node_modules/**",
|
||||||
|
"!**/vendor/**"
|
||||||
|
],
|
||||||
|
"coverageReporters": [
|
||||||
|
"json",
|
||||||
|
"text",
|
||||||
|
"html"
|
||||||
|
]
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -18,12 +18,12 @@ 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/>.
|
License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
||||||
|
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div id="content" class="app-tasks">
|
<div id="content" class="app-tasks">
|
||||||
<div id="app-navigation">
|
<div id="app-navigation">
|
||||||
<theList/>
|
<theList />
|
||||||
<theSettings/>
|
<theSettings />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="app-content"
|
<div id="app-content"
|
||||||
|
|
@ -39,15 +39,15 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
||||||
ng-click="focusTaskInput()"
|
ng-click="focusTaskInput()"
|
||||||
class="transparent"
|
class="transparent"
|
||||||
ng-model="status.taskName"
|
ng-model="status.taskName"
|
||||||
ng-keydown="checkTaskInput($event)"/>
|
ng-keydown="checkTaskInput($event)">
|
||||||
<!-- placeholder="{{ getAddString() }}"/> -->
|
<!-- placeholder="{{ getAddString() }}"> -->
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<div class="app-navigation-entry-utils">
|
<div class="app-navigation-entry-utils">
|
||||||
<div class="app-navigation-entry-utils-menu-button" title="<?php p($l->t('Change sort order')); ?>">
|
<div class="app-navigation-entry-utils-menu-button" title="<?php p($l->t('Change sort order')); ?>">
|
||||||
<button class="sortorder-dropdown-button">
|
<button class="sortorder-dropdown-button">
|
||||||
<span class="icon" ng-class="getSortOrderIcon()"></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}"></span>
|
<span class="icon sort-indicator" ng-class="{'icon-sort-up': settingsmodel.getById('various').sortDirection, 'icon-sort-down': !settingsmodel.getById('various').sortDirection}" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -55,65 +55,65 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
||||||
<ul>
|
<ul>
|
||||||
<li ng-click="setSortOrder($event, 'default')" ng-class="{active: settingsmodel.getById('various').sortOrder == 'default'}" class="handler">
|
<li ng-click="setSortOrder($event, 'default')" ng-class="{active: settingsmodel.getById('various').sortOrder == 'default'}" class="handler">
|
||||||
<a>
|
<a>
|
||||||
<span class="icon icon-list"></span>
|
<span class="icon icon-list" />
|
||||||
<span class="label">{{ t('tasks', 'Default') }}</span>
|
<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>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li ng-click="setSortOrder($event, 'due')" ng-class="{active: settingsmodel.getById('various').sortOrder == 'due'}">
|
<li ng-click="setSortOrder($event, 'due')" ng-class="{active: settingsmodel.getById('various').sortOrder == 'due'}">
|
||||||
<a>
|
<a>
|
||||||
<span class="icon icon-calendar"></span>
|
<span class="icon icon-calendar" />
|
||||||
<span class="label">{{ t('tasks', 'Due date') }}</span>
|
<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>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li ng-click="setSortOrder($event, 'start')" ng-class="{active: settingsmodel.getById('various').sortOrder == 'start'}">
|
<li ng-click="setSortOrder($event, 'start')" ng-class="{active: settingsmodel.getById('various').sortOrder == 'start'}">
|
||||||
<a>
|
<a>
|
||||||
<span class="icon icon-calendar"></span>
|
<span class="icon icon-calendar" />
|
||||||
<span class="label">{{ t('tasks', 'Start date') }}</span>
|
<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>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li ng-click="setSortOrder($event, 'priority')" ng-class="{active: settingsmodel.getById('various').sortOrder == 'priority'}">
|
<li ng-click="setSortOrder($event, 'priority')" ng-class="{active: settingsmodel.getById('various').sortOrder == 'priority'}">
|
||||||
<a>
|
<a>
|
||||||
<span class="icon icon-task-star"></span>
|
<span class="icon icon-task-star" />
|
||||||
<span class="label">{{ t('tasks', 'Priority') }}</span>
|
<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>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li ng-click="setSortOrder($event, 'alphabetically')" ng-class="{active: settingsmodel.getById('various').sortOrder == 'alphabetically'}">
|
<li ng-click="setSortOrder($event, 'alphabetically')" ng-class="{active: settingsmodel.getById('various').sortOrder == 'alphabetically'}">
|
||||||
<a>
|
<a>
|
||||||
<span class="icon icon-alphabetically"></span>
|
<span class="icon icon-alphabetically" />
|
||||||
<span class="label">{{ t('tasks', 'Alphabetically') }}</span>
|
<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>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<!-- <li ng-click="setSortOrder($event, 'manual')" ng-class="{active: settingsmodel.getById('various').sortOrder == 'manual'}">
|
<!-- <li ng-click="setSortOrder($event, 'manual')" ng-class="{active: settingsmodel.getById('various').sortOrder == 'manual'}">
|
||||||
<a>
|
<a>
|
||||||
<span class="icon icon-manual"></span>
|
<span class="icon icon-manual" />
|
||||||
<span class="label">{{ t('tasks', 'Manually') }</span>
|
<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>
|
</a>
|
||||||
</li> -->
|
</li> -->
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="task-list">
|
<div class="task-list">
|
||||||
<router-view />
|
<router-view />
|
||||||
<div id="searchresults"></div>
|
<div id="searchresults" />
|
||||||
<div class="task-item template">
|
<div class="task-item template">
|
||||||
<div class="task-body">
|
<div class="task-body">
|
||||||
<div class="percentdone"></div>
|
<div class="percentdone" />
|
||||||
<a class="task-checkbox" name="toggleCompleted" ng-click="toggleCompleted()">
|
<a class="task-checkbox" name="toggleCompleted" ng-click="toggleCompleted()">
|
||||||
<span class="icon task-checkbox"></span>
|
<span class="icon task-checkbox" />
|
||||||
</a>
|
</a>
|
||||||
<a class="icon task-separator"></a>
|
<a class="icon task-separator" />
|
||||||
<a class="task-star" ng-click="toggleStarred(task.id)">
|
<a class="task-star" ng-click="toggleStarred(task.id)">
|
||||||
<span class="icon task-star faded"></span>
|
<span class="icon task-star faded" />
|
||||||
</a>
|
</a>
|
||||||
<!-- <a class="duedate" ng-class="{overdue: TasksModel.overdue(task.due)}">{{ task.due | dateTaskList }}</a> -->
|
<!-- <a class="duedate" ng-class="{overdue: TasksModel.overdue(task.due)}">{{ task.due | dateTaskList }}</a> -->
|
||||||
<div class="title-wrapper">
|
<div class="title-wrapper">
|
||||||
<span class="title"></span>
|
<span class="title" />
|
||||||
<span class="icon task-attachment"></span>
|
<span class="icon task-attachment" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -122,19 +122,18 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="app-sidebar">
|
<div id="app-sidebar">
|
||||||
<theDetails/>
|
<theDetails />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { mapState } from 'vuex';
|
import TheList from './components/TheList'
|
||||||
import TheList from './components/TheList.vue';
|
import TheSettings from './components/TheSettings'
|
||||||
import TheSettings from './components/TheSettings.vue';
|
import TheDetails from './components/TheDetails'
|
||||||
import TheDetails from './components/TheDetails.vue';
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'app',
|
name: 'App',
|
||||||
components: {
|
components: {
|
||||||
'theSettings': TheSettings,
|
'theSettings': TheSettings,
|
||||||
'theList': TheList,
|
'theList': TheList,
|
||||||
|
|
@ -24,19 +24,17 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
||||||
<li ng-repeat="color in colors"
|
<li ng-repeat="color in colors"
|
||||||
ng-class="{ selected: (color===selected) }"
|
ng-class="{ selected: (color===selected) }"
|
||||||
ng-click="pick(color)"
|
ng-click="pick(color)"
|
||||||
ng-style="{ 'background-color':color}; "></li>
|
ng-style="{ 'background-color':color}; " />
|
||||||
<li class="randomcolour"
|
<li class="randomcolour"
|
||||||
ng-click="randomizeColour()"
|
ng-click="randomizeColour()"
|
||||||
ng-style="{ 'background-color':random}; ">
|
ng-style="{ 'background-color':random}; ">
|
||||||
<span class="icon icon-random"></span>
|
<span class="icon icon-random" />
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { mapState } from 'vuex';
|
export default {
|
||||||
|
name: 'Colorpicker'
|
||||||
export default {
|
}
|
||||||
name: 'colorpicker'
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -21,56 +21,53 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="task-body-component">
|
<div class="task-body-component">
|
||||||
<div class="task-body"
|
<div :taskID="task.uri"
|
||||||
|
class="task-body"
|
||||||
type="task"
|
type="task"
|
||||||
:taskID="task.uri"
|
|
||||||
ng-class="{active: route.taskID==task.uri, subtasks: hasSubtasks(task), completedsubtasks: hasCompletedSubtasks(task), subtaskshidden: task.hideSubtasks, attachment: task.note!=''}">
|
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="percentbar" ng-if="task.complete > 0 ">
|
||||||
<div class="percentdone"
|
<div :style="{ width: task.complete, 'background-color': task.calendar.color }"
|
||||||
:style="{ width: task.complete, 'background-color': task.calendar.color }">
|
class="percentdone">
|
||||||
<!-- aria-label="{{ task.complete | percentDetails}}"> -->
|
<!-- aria-label="{{ task.complete | percentDetails}}"> -->
|
||||||
</div>
|
</div>
|
||||||
</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"
|
name="toggleCompleted"
|
||||||
ng-click="toggleCompleted(task)"
|
ng-click="toggleCompleted(task)"
|
||||||
role="checkbox"
|
role="checkbox">
|
||||||
:aria-checked="task.completed"
|
<span :class="{'icon-checkmark': task.completed}" class="icon task-checkbox reactive" />
|
||||||
:aria-label="t('tasks', 'Task is completed')">
|
|
||||||
<span class="icon task-checkbox reactive" :class="{'icon-checkmark': task.completed}"></span>
|
|
||||||
</a>
|
</a>
|
||||||
<a class="icon task-separator"></a>
|
<a class="icon task-separator" />
|
||||||
<a class="task-star handler" ng-click="toggleStarred(task)">
|
<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 :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" />
|
||||||
</span>
|
|
||||||
</a>
|
</a>
|
||||||
<a class="task-addsubtask handler add-subtask"
|
<a class="task-addsubtask handler add-subtask"
|
||||||
ng-show="task.calendar.writable"
|
ng-show="task.calendar.writable"
|
||||||
ng-click="showSubtaskInput(task.uid)"
|
ng-click="showSubtaskInput(task.uid)"
|
||||||
oc-click-focus="{selector: '.add-subtask input', timeout: 0}">
|
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>
|
||||||
<a class="handler" ng-click="toggleSubtasks(task)">
|
<a class="handler" ng-click="toggleSubtasks(task)">
|
||||||
<span class="icon right large subtasks reactive"
|
<span :title="t('tasks', 'Toggle subtasks')"
|
||||||
ng-class="task.hideSubtasks ? 'icon-subtasks-hidden' : 'icon-subtasks-visible'"
|
class="icon right large subtasks reactive"
|
||||||
:title="t('tasks', 'Toggle subtasks')">
|
ng-class="task.hideSubtasks ? 'icon-subtasks-hidden' : 'icon-subtasks-visible'" />
|
||||||
</span>
|
|
||||||
</a>
|
</a>
|
||||||
<a class="handler" ng-click="toggleCompletedSubtasks(task)">
|
<a class="handler" ng-click="toggleCompletedSubtasks(task)">
|
||||||
<span class="icon icon-toggle right large toggle-completed-subtasks reactive"
|
<span :title="t('tasks', 'Toggle completed subtasks')"
|
||||||
ng-class="{'active': !task.hideCompletedSubtasks}"
|
class="icon icon-toggle right large toggle-completed-subtasks reactive"
|
||||||
:title="t('tasks', 'Toggle completed subtasks')">
|
ng-class="{'active': !task.hideCompletedSubtasks}" />
|
||||||
</span>
|
|
||||||
</a>
|
</a>
|
||||||
<a>
|
<a>
|
||||||
<span class="icon icon-note right large"></span>
|
<span class="icon icon-note right large" />
|
||||||
</a>
|
</a>
|
||||||
<!-- <a class="duedate" ng-class="{overdue: TasksModel.overdue(task.due)}">{{ task.due | dateTaskList }}</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>
|
<a ng-show="route.collectionID=='week'" class="listname">{{ task.calendar.displayname }}</a>
|
||||||
<div class="title-wrapper">
|
<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">
|
<span class="categories-list">
|
||||||
<ul>
|
<ul>
|
||||||
<li ng-repeat="category in task.categories"><span>{{ category }}</span></li>
|
<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>
|
||||||
<div class="subtasks-container"
|
<div class="subtasks-container"
|
||||||
ng-class="{subtaskshidden: hideSubtasks(task)}">
|
ng-class="{subtaskshidden: hideSubtasks(task)}">
|
||||||
<ol dnd-list="draggedTasks"
|
<ol :calendarID="task.calendar.uri"
|
||||||
:calendarID="task.calendar.uri"
|
dnd-list="draggedTasks"
|
||||||
dnd-drop="dropAsSubtask(event, item, index)"
|
dnd-drop="dropAsSubtask(event, item, index)"
|
||||||
dnd-dragover="dragover(event, index)">
|
dnd-dragover="dragover(event, index)">
|
||||||
<li class="task-item ui-draggable handler add-subtask"
|
<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-disabled="isAddingTask"
|
||||||
ng-click="focusInput()"
|
ng-click="focusInput()"
|
||||||
ng-model="status.subtaskName"
|
ng-model="status.subtaskName"
|
||||||
ng-keydown="checkTaskInput($event)"/>
|
ng-keydown="checkTaskInput($event)">
|
||||||
<!-- placeholder="{{ getSubAddString(task.summary) }}"/> -->
|
<!-- placeholder="{{ getSubAddString(task.summary) }}"/> -->
|
||||||
</form>
|
</form>
|
||||||
</li>
|
</li>
|
||||||
<li :taskID="task.uri"
|
<li :taskID="task.uri"
|
||||||
|
:class="{done: task.completed}"
|
||||||
class="task-item ui-draggable handler subtask"
|
class="task-item ui-draggable handler subtask"
|
||||||
ng-repeat="task in getSubTasks(filtered,task) | orderBy:getSortOrder():settingsmodel.getById('various').sortDirection"
|
ng-repeat="task in getSubTasks(filtered,task) | orderBy:getSortOrder():settingsmodel.getById('various').sortDirection"
|
||||||
ng-click="openDetails(task.uri,$event)"
|
ng-click="openDetails(task.uri,$event)"
|
||||||
:class="{done: task.completed}"
|
|
||||||
dnd-draggable="task"
|
dnd-draggable="task"
|
||||||
dnd-dragstart="dragStart(event)"
|
dnd-dragstart="dragStart(event)"
|
||||||
dnd-dragend="dragEnd(event)">
|
dnd-dragend="dragEnd(event)">
|
||||||
|
|
@ -112,13 +109,13 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { mapState } from 'vuex';
|
import { mapState } from 'vuex'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'task-body-component',
|
name: 'TaskBodyComponent',
|
||||||
computed: mapState({
|
components: {
|
||||||
}),
|
},
|
||||||
components: {
|
computed: mapState({
|
||||||
}
|
})
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -23,46 +23,46 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
||||||
<div>
|
<div>
|
||||||
<div class="grouped-tasks"
|
<div class="grouped-tasks"
|
||||||
ng-class="{'completed-hidden':!settingsmodel.getById('various').showHidden}">
|
ng-class="{'completed-hidden':!settingsmodel.getById('various').showHidden}">
|
||||||
<ol class="tasks"
|
<ol :calendarID="$route.params.calendarId"
|
||||||
:calendarID="$route.params.calendarId"
|
class="tasks"
|
||||||
collectionID="uncompleted"
|
collectionID="uncompleted"
|
||||||
type="list"
|
type="list"
|
||||||
dnd-list="draggedTasks"
|
dnd-list="draggedTasks"
|
||||||
dnd-drop="dropAsRootTask(event, item, index)"
|
dnd-drop="dropAsRootTask(event, item, index)"
|
||||||
dnd-dragover="dragover(event, index)">
|
dnd-dragover="dragover(event, index)">
|
||||||
<li class="task-item ui-draggable handler"
|
<li v-for="task in tasks"
|
||||||
:taskID="task.uri"
|
:taskID="task.uri"
|
||||||
|
:key="task.id"
|
||||||
|
class="task-item ui-draggable handler"
|
||||||
ng-click="openDetails(task.uri,$event)"
|
ng-click="openDetails(task.uri,$event)"
|
||||||
ng-class="{done: task.completed}"
|
ng-class="{done: task.completed}"
|
||||||
dnd-draggable="task"
|
dnd-draggable="task"
|
||||||
dnd-dragstart="dragStart(event)"
|
dnd-dragstart="dragStart(event)"
|
||||||
dnd-dragend="dragEnd(event)"
|
dnd-dragend="dragEnd(event)">
|
||||||
v-for="task in tasks"
|
|
||||||
:key="task.id">
|
|
||||||
<!-- ng-repeat="task in filtered = filteredTasks() | filter:hasNoParent(task) | filter:filterTasks(task,route.calendarID) | filter:{'completed':'false'} | orderBy:getSortOrder():settingsmodel.getById('various').sortDirection"> -->
|
<!-- 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) }}"> -->
|
<!-- dnd-effect-allowed="{{ allow(task) }}"> -->
|
||||||
<task />
|
<task />
|
||||||
</li>
|
</li>
|
||||||
</ol>
|
</ol>
|
||||||
<h2 class="heading-hiddentasks icon-triangle-s handler" ng-show="getCount(route.calendarID,'completed')" ng-click="toggleHidden()">
|
<h2 class="heading-hiddentasks icon-triangle-s handler" ng-show="getCount(route.calendarID,'completed')" ng-click="toggleHidden()">
|
||||||
<!-- {{ getCountString(route.calendarID,'completed') }} -->
|
<!-- {{ getCountString(route.calendarID,'completed') }} -->
|
||||||
</h2>
|
</h2>
|
||||||
<ol class="completed-tasks"
|
<ol :calendarID="$route.params.calendarId"
|
||||||
:calendarID="$route.params.calendarId"
|
class="completed-tasks"
|
||||||
collectionID="completed"
|
collectionID="completed"
|
||||||
type="list"
|
type="list"
|
||||||
dnd-list="draggedTasks"
|
dnd-list="draggedTasks"
|
||||||
dnd-drop="dropAsRootTask(event, item, index)"
|
dnd-drop="dropAsRootTask(event, item, index)"
|
||||||
dnd-dragover="dragover(event, index)">
|
dnd-dragover="dragover(event, index)">
|
||||||
<li class="task-item handler"
|
<li v-for="task in tasks"
|
||||||
:taskID="task.uri"
|
:taskID="task.uri"
|
||||||
|
:key="task.id"
|
||||||
|
class="task-item handler"
|
||||||
ng-click="openDetails(task.uri,$event)"
|
ng-click="openDetails(task.uri,$event)"
|
||||||
ng-class="{done: task.completed}"
|
ng-class="{done: task.completed}"
|
||||||
dnd-draggable="task"
|
dnd-draggable="task"
|
||||||
dnd-dragstart="dragStart(event)"
|
dnd-dragstart="dragStart(event)"
|
||||||
dnd-dragend="dragEnd(event)"
|
dnd-dragend="dragEnd(event)">
|
||||||
v-for="task in tasks"
|
|
||||||
:key="task.id">
|
|
||||||
<!-- ng-repeat="task in filtered = filteredTasks() | filter:hasNoParent(task) | filter:filterTasks(task,route.calendarID) | filter:{'completed':true} | orderBy:'completed_date':true"> -->
|
<!-- 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) }}"> -->
|
<!-- dnd-effect-allowed="{{ allow(task) }}"> -->
|
||||||
<task />
|
<task />
|
||||||
|
|
@ -76,17 +76,17 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { mapState } from 'vuex';
|
import { mapState } from 'vuex'
|
||||||
import Task from '../Task.vue';
|
import Task from '../Task'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
computed: Object.assign({},
|
components: {
|
||||||
mapState({
|
'task': Task
|
||||||
tasks: state => state.tasks
|
},
|
||||||
})
|
computed: Object.assign({},
|
||||||
),
|
mapState({
|
||||||
components: {
|
tasks: state => state.tasks
|
||||||
'task': Task
|
})
|
||||||
}
|
)
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -24,28 +24,28 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
||||||
<div>
|
<div>
|
||||||
<div v-for="calendar in calendars"
|
<div v-for="calendar in calendars"
|
||||||
:key="calendar.id"
|
:key="calendar.id"
|
||||||
class="grouped-tasks ui-droppable"
|
:rel="calendar.uri"
|
||||||
:rel="calendar.uri">
|
class="grouped-tasks ui-droppable">
|
||||||
<h2 class="heading">
|
<h2 class="heading">
|
||||||
<text>{{ calendar.displayname }}</text>
|
<text>{{ calendar.displayname }}</text>
|
||||||
</h2>
|
</h2>
|
||||||
<ol class="tasks"
|
<ol :calendarID="calendar.uri"
|
||||||
:calendarID="calendar.uri"
|
|
||||||
:collectionID="$route.params.collectionId"
|
:collectionID="$route.params.collectionId"
|
||||||
|
class="tasks"
|
||||||
type="list"
|
type="list"
|
||||||
dnd-list="draggedTasks"
|
dnd-list="draggedTasks"
|
||||||
dnd-drop="dropAsRootTask(event, item, index)"
|
dnd-drop="dropAsRootTask(event, item, index)"
|
||||||
dnd-dragover="dragover(event, index)">
|
dnd-dragover="dragover(event, index)">
|
||||||
<li class="task-item ui-draggable handler"
|
<li v-for="task in tasks"
|
||||||
:taskID="task.uri"
|
:taskID="task.uri"
|
||||||
|
:key="task.id"
|
||||||
|
class="task-item ui-draggable handler"
|
||||||
ng-animate="'animate'"
|
ng-animate="'animate'"
|
||||||
ng-click="openDetails(task.uri,$event)"
|
ng-click="openDetails(task.uri,$event)"
|
||||||
ng-class="{done: task.completed}"
|
ng-class="{done: task.completed}"
|
||||||
dnd-draggable="task"
|
dnd-draggable="task"
|
||||||
dnd-dragstart="dragStart(event)"
|
dnd-dragstart="dragStart(event)"
|
||||||
dnd-dragend="dragEnd(event)"
|
dnd-dragend="dragEnd(event)">
|
||||||
v-for="task in tasks"
|
|
||||||
:key="task.id">
|
|
||||||
<!-- 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"> -->
|
<!-- 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) }}"> -->
|
<!-- dnd-effect-allowed="{{ allow(task) }}"> -->
|
||||||
<task-body />
|
<task-body />
|
||||||
|
|
@ -59,18 +59,18 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { mapState } from 'vuex';
|
import { mapState } from 'vuex'
|
||||||
import TaskBody from '../Task.vue';
|
import TaskBody from '../Task'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
computed: Object.assign({},
|
components: {
|
||||||
mapState({
|
'task-body': TaskBody
|
||||||
calendars: state => state.calendars,
|
},
|
||||||
tasks: state => state.tasks
|
computed: Object.assign({},
|
||||||
})
|
mapState({
|
||||||
),
|
calendars: state => state.calendars,
|
||||||
components: {
|
tasks: state => state.tasks
|
||||||
'task-body': TaskBody
|
})
|
||||||
}
|
)
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -24,23 +24,23 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
||||||
<h2 class="heading">
|
<h2 class="heading">
|
||||||
<!-- <text>{{ day | day }}</text> -->
|
<!-- <text>{{ day | day }}</text> -->
|
||||||
</h2>
|
</h2>
|
||||||
<ol class="tasks"
|
<ol :collectionID="$route.params.collectionId"
|
||||||
|
class="tasks"
|
||||||
listID=""
|
listID=""
|
||||||
:collectionID="$route.params.collectionId"
|
|
||||||
type="list"
|
type="list"
|
||||||
dnd-list="draggedTasks"
|
dnd-list="draggedTasks"
|
||||||
dnd-drop="dropAsRootTask(event, item, index)"
|
dnd-drop="dropAsRootTask(event, item, index)"
|
||||||
dnd-dragover="dragover(event, index)">
|
dnd-dragover="dragover(event, index)">
|
||||||
<li class="task-item ui-draggable handler"
|
<li v-for="task in tasks"
|
||||||
:taskID="task.uri"
|
:taskID="task.uri"
|
||||||
|
:key="task.id"
|
||||||
|
class="task-item ui-draggable handler"
|
||||||
ng-animate="'animate'"
|
ng-animate="'animate'"
|
||||||
ng-click="openDetails(task.uri,$event)"
|
ng-click="openDetails(task.uri,$event)"
|
||||||
ng-class="{done: task.completed}"
|
ng-class="{done: task.completed}"
|
||||||
dnd-draggable="task"
|
dnd-draggable="task"
|
||||||
dnd-dragstart="dragStart(event)"
|
dnd-dragstart="dragStart(event)"
|
||||||
dnd-dragend="dragEnd(event)"
|
dnd-dragend="dragEnd(event)">
|
||||||
v-for="task in tasks"
|
|
||||||
:key="task.id">
|
|
||||||
<!-- ng-repeat="task in filtered = filteredTasks() | filter:taskAtDay(task,day) | filter:hasNoParent(task) | filter:{'completed':'false'} | orderBy:getSortOrder():settingsmodel.getById('various').sortDirection"> -->
|
<!-- 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) }}"> -->
|
<!-- dnd-effect-allowed="{{ allow(task) }}"> -->
|
||||||
<task />
|
<task />
|
||||||
|
|
@ -50,17 +50,17 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { mapState } from 'vuex';
|
import { mapState } from 'vuex'
|
||||||
import Task from '../Task.vue';
|
import Task from '../Task'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
computed: Object.assign({},
|
components: {
|
||||||
mapState({
|
'task': Task
|
||||||
tasks: state => state.tasks
|
},
|
||||||
})
|
computed: Object.assign({},
|
||||||
),
|
mapState({
|
||||||
components: {
|
tasks: state => state.tasks
|
||||||
'task': Task
|
})
|
||||||
}
|
)
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -26,32 +26,30 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
||||||
ng-show="TaskState()=='found'"
|
ng-show="TaskState()=='found'"
|
||||||
ng-class="{'disabled': !task.calendar.writable}">
|
ng-class="{'disabled': !task.calendar.writable}">
|
||||||
<div class="title" ng-class="{'editing':route.parameter=='name'}">
|
<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)"
|
ng-click="toggleCompleted(task)"
|
||||||
role="checkbox"
|
role="checkbox">
|
||||||
:aria-checked="task.completed"
|
<span class="icon detail-checkbox" ng-class="{'icon-checkmark':task.completed, 'disabled': !task.calendar.writable}" />
|
||||||
:aria-label="t('tasks', 'Task is completed')">
|
|
||||||
<span class="icon detail-checkbox" ng-class="{'icon-checkmark':task.completed, 'disabled': !task.calendar.writable}"></span>
|
|
||||||
</a>
|
</a>
|
||||||
<a class="star reactive" ng-click="toggleStarred(task)">
|
<a class="star reactive" ng-click="toggleStarred(task)">
|
||||||
<span class="icon icon-task-star"
|
<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-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>
|
class="icon icon-task-star" />
|
||||||
</a>
|
</a>
|
||||||
<div class="title-text handler"
|
<div :class="{'strike-through':task.completed}"
|
||||||
:class="{'strike-through':task.completed}"
|
class="title-text handler"
|
||||||
ng-click="editName($event, task)"
|
ng-click="editName($event, task)"
|
||||||
oc-click-focus="{selector: '#editName', timeout: 0}"
|
oc-click-focus="{selector: '#editName', timeout: 0}"
|
||||||
ng-bind-html="task.summary | linky:'_blank':{rel: 'nofollow'}">
|
ng-bind-html="task.summary | linky:'_blank':{rel: 'nofollow'}" />
|
||||||
</div>
|
|
||||||
<div class="expandable-container handler">
|
<div class="expandable-container handler">
|
||||||
<div class="expandingArea active">
|
<div class="expandingArea active">
|
||||||
<pre><span>{{ task.summary }}</span><br /></pre>
|
<pre><span>{{ task.summary }}</span><br></pre>
|
||||||
<textarea id="editName"
|
<textarea id="editName"
|
||||||
maxlength="200"
|
maxlength="200"
|
||||||
ng-model="task.summary"
|
ng-model="task.summary"
|
||||||
ng-keydown="endName($event)"
|
ng-keydown="endName($event)"
|
||||||
ng-change="triggerUpdate(task)">
|
ng-change="triggerUpdate(task)" />
|
||||||
</textarea>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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)">
|
ng-click="editStart($event, task)">
|
||||||
<div>
|
<div>
|
||||||
<span class="icon icon-calendar" ng-class="{'icon-calendar-due':isDue(task.start),
|
<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">
|
<span class="section-title">
|
||||||
<!-- <text>{{ task.start | startDetails }}</text> -->
|
<!-- <text>{{ task.start | startDetails }}</text> -->
|
||||||
</span>
|
</span>
|
||||||
|
|
@ -84,10 +82,10 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
||||||
</div>
|
</div>
|
||||||
<div class="utils">
|
<div class="utils">
|
||||||
<a>
|
<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>
|
||||||
<a class="handler end-edit" ng-click="deleteStartDate(task)">
|
<a class="handler end-edit" ng-click="deleteStartDate(task)">
|
||||||
<span class="icon icon-trash reactive"></span>
|
<span class="icon icon-trash reactive" />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</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-class="{'date':isDue(task.due), 'editing':route.parameter=='duedate', 'high':isOverDue(task.due)}"
|
||||||
ng-click="editDueDate($event, task)">
|
ng-click="editDueDate($event, task)">
|
||||||
<div>
|
<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">
|
<span class="section-title">
|
||||||
<!-- <text>{{ task.due | dateDetails }}</text> -->
|
<!-- <text>{{ task.due | dateDetails }}</text> -->
|
||||||
</span>
|
</span>
|
||||||
|
|
@ -117,20 +115,20 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
||||||
</div>
|
</div>
|
||||||
<div class="utils">
|
<div class="utils">
|
||||||
<a>
|
<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>
|
||||||
<a class="handler end-edit" ng-click="deleteDueDate(task)">
|
<a class="handler end-edit" ng-click="deleteDueDate(task)">
|
||||||
<span class="icon icon-trash reactive"></span>
|
<span class="icon icon-trash reactive" />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</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-click="toggleAllDay(task)"
|
||||||
ng-if="isAllDayPossible(task)"
|
ng-if="isAllDayPossible(task)"
|
||||||
role="checkbox"
|
role="checkbox">
|
||||||
:aria-checked="task.allDay">
|
|
||||||
<div>
|
<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">
|
<span class="section-title">
|
||||||
<text>{{ t('tasks', 'All day') }}</text>
|
<text>{{ t('tasks', 'All day') }}</text>
|
||||||
</span>
|
</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-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)">
|
ng-click="editPriority($event, task)">
|
||||||
<div>
|
<div>
|
||||||
<span class="icon icon-task-star"
|
<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-task-star-high':task.priority>5,'icon-task-star-medium':task.priority==5,'icon-task-star-low':task.priority > 0 && task.priority < 5}"></span>
|
class="icon icon-task-star" />
|
||||||
<span class="section-title">
|
<span class="section-title">
|
||||||
<!-- <text>{{ task.priority | priorityDetails}}</text> -->
|
<!-- <text>{{ task.priority | priorityDetails}}</text> -->
|
||||||
</span>
|
</span>
|
||||||
|
|
@ -160,10 +158,10 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
||||||
</div>
|
</div>
|
||||||
<div class="utils">
|
<div class="utils">
|
||||||
<a>
|
<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>
|
||||||
<a class="handler end-edit" ng-click="deletePriority(task)">
|
<a class="handler end-edit" ng-click="deletePriority(task)">
|
||||||
<span class="icon icon-trash reactive"></span>
|
<span class="icon icon-trash reactive" />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</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-class="{'editing':route.parameter=='percent', 'date':task.complete>0}"
|
||||||
ng-click="editPercent($event, task)">
|
ng-click="editPercent($event, task)">
|
||||||
<div>
|
<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">
|
<span class="section-title">
|
||||||
<!-- <text>{{ task.complete | percentDetails}}</text> -->
|
<!-- <text>{{ task.complete | percentDetails}}</text> -->
|
||||||
</span>
|
</span>
|
||||||
|
|
@ -190,17 +188,17 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
||||||
</div>
|
</div>
|
||||||
<div class="utils">
|
<div class="utils">
|
||||||
<a>
|
<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>
|
||||||
<a class="handler end-edit" ng-click="deletePercent(task)">
|
<a class="handler end-edit" ng-click="deletePercent(task)">
|
||||||
<span class="icon icon-trash reactive"></span>
|
<span class="icon icon-trash reactive" />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="section detail-categories" ng-class="{'active':task.cats.length>0}">
|
<li class="section detail-categories" ng-class="{'active':task.cats.length>0}">
|
||||||
<div>
|
<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 -->
|
<!-- Edit line 1080 to show placeholder -->
|
||||||
<div class="detail-categories-container">
|
<div class="detail-categories-container">
|
||||||
<!-- <ui-select
|
<!-- <ui-select
|
||||||
multiple
|
multiple
|
||||||
|
|
@ -226,11 +224,11 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
||||||
ng-click="editNote($event, task)"
|
ng-click="editNote($event, task)"
|
||||||
oc-click-focus="{selector: '.expandingArea textarea', timeout: 0}">
|
oc-click-focus="{selector: '.expandingArea textarea', timeout: 0}">
|
||||||
<div class="content-fakeable" ng-class="{'editing':route.parameter=='note'}">
|
<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="edit-view">
|
||||||
<div class="expandingArea active">
|
<div class="expandingArea active">
|
||||||
<pre><span>{{ task.note }}</span><br /><br /></pre>
|
<pre><span>{{ task.note }}</span><br><br></pre>
|
||||||
<textarea ng-model="task.note" ng-change="triggerUpdate(task)"></textarea>
|
<textarea ng-model="task.note" ng-change="triggerUpdate(task)" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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"
|
<a class="handler left close-all reactive"
|
||||||
ng-click="deleteTask(task)"
|
ng-click="deleteTask(task)"
|
||||||
ng-show="task.calendar.writable">
|
ng-show="task.calendar.writable">
|
||||||
<span class="icon icon-trash"></span>
|
<span class="icon icon-trash" />
|
||||||
</a>
|
</a>
|
||||||
<a class="handler right close-all reactive">
|
<a class="handler right close-all reactive">
|
||||||
<span class="icon icon-hide"></span>
|
<span class="icon icon-hide" />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -261,26 +259,26 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { mapState } from 'vuex';
|
import { mapState } from 'vuex'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
computed: mapState({
|
components: {
|
||||||
}),
|
},
|
||||||
components: {
|
data: function() {
|
||||||
},
|
return {
|
||||||
data: function () {
|
task: {
|
||||||
return {
|
calendar: {
|
||||||
task: {
|
writable: true
|
||||||
calendar: {
|
},
|
||||||
writable: true
|
complete: 4,
|
||||||
},
|
completed: false,
|
||||||
complete: 4,
|
priority: 5,
|
||||||
completed: false,
|
cats: [],
|
||||||
priority: 5,
|
note: 'Migrate this app to vue.'
|
||||||
cats: [],
|
}
|
||||||
note: "Migrate this app to vue."
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
computed: mapState({
|
||||||
|
})
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -23,19 +23,19 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
||||||
<ul id="collections">
|
<ul id="collections">
|
||||||
<router-link
|
<router-link
|
||||||
v-for="collection in collections"
|
v-for="collection in collections"
|
||||||
tag="li"
|
:id="'collection_' + collection.id"
|
||||||
v-bind:id="'collection_' + collection.id"
|
:collection-id="collection.id"
|
||||||
v-bind:collectionID="collection.id"
|
|
||||||
:to="'/collections/' + collection.id"
|
:to="'/collections/' + collection.id"
|
||||||
:key="collection.id"
|
:key="collection.id"
|
||||||
class="collection reactive" :class="collection.icon"
|
:class="collection.icon"
|
||||||
|
tag="li" class="collection reactive"
|
||||||
active-class="active"
|
active-class="active"
|
||||||
ng-class="{'animate-up': hideCollection(collection.id)}"
|
ng-class="{'animate-up': hideCollection(collection.id)}"
|
||||||
dnd-list="draggedTasks"
|
dnd-list="draggedTasks"
|
||||||
dnd-drop="dropCollection(event, index, item)"
|
dnd-drop="dropCollection(event, index, item)"
|
||||||
dnd-dragover="dragoverCollection(event, index)">
|
dnd-dragover="dragoverCollection(event, index)">
|
||||||
<a class="sprite">
|
<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>
|
<span class="title">{{ collection.displayname }}</span>
|
||||||
</a>
|
</a>
|
||||||
<div class="app-navigation-entry-utils">
|
<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>
|
||||||
<router-link
|
<router-link
|
||||||
v-for="calendar in calendars"
|
v-for="calendar in calendars"
|
||||||
tag="li"
|
:id="'list_' + calendar.uri"
|
||||||
v-bind:id="'list_' + calendar.uri"
|
:calendar-id="calendar.uri"
|
||||||
v-bind:calendarID="calendar.uri"
|
|
||||||
:to="'/calendars/' + calendar.uri"
|
:to="'/calendars/' + calendar.uri"
|
||||||
:key="calendar.uri"
|
:key="calendar.uri"
|
||||||
|
tag="li"
|
||||||
class="list with-menu handler editing"
|
class="list with-menu handler editing"
|
||||||
active-class="active"
|
active-class="active"
|
||||||
ng-class="edit:route.listparameter == 'name' && route.calendarID == calendar.uri,
|
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-list="draggedTasks"
|
||||||
dnd-drop="dropList(event, index, item)"
|
dnd-drop="dropList(event, index, item)"
|
||||||
dnd-dragover="dragoverList(event, index)">
|
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)">
|
<a ng-dblclick="startRename(calendar)">
|
||||||
<span class="title">{{ calendar.displayname }}</span>
|
<span class="title">{{ calendar.displayname }}</span>
|
||||||
</a>
|
</a>
|
||||||
<div class="app-navigation-entry-utils">
|
<div class="app-navigation-entry-utils">
|
||||||
<ul>
|
<ul>
|
||||||
<!-- <li class="app-navigation-entry-utils-counter">{{ getListCount(calendar.uri,'all') | counterFormatter }}</li> -->
|
<!-- <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>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="app-navigation-entry-menu" v-show="calendar.writable">
|
<div v-show="calendar.writable" class="app-navigation-entry-menu">
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<a ng-click="startEdit(calendar)">
|
<a ng-click="startEdit(calendar)">
|
||||||
<span class="icon-rename"></span>
|
<span class="icon-rename" />
|
||||||
<span>{{ t('tasks', 'Edit') }}</span>
|
<span>{{ t('tasks', 'Edit') }}</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a ng-click="showCalDAVUrl(calendar)">
|
<a ng-click="showCalDAVUrl(calendar)">
|
||||||
<span class="icon-public"></span>
|
<span class="icon-public" />
|
||||||
<span>{{ t('tasks', 'Link') }}</span>
|
<span>{{ t('tasks', 'Link') }}</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a :href="calendar.exportUrl" :download="calendar.uri + '.ics'">
|
<a :href="calendar.exportUrl" :download="calendar.uri + '.ics'">
|
||||||
<span class="icon-download"></span>
|
<span class="icon-download" />
|
||||||
<span>{{ t('tasks', 'Download') }}</span>
|
<span>{{ t('tasks', 'Download') }}</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li confirmation="delete(calendar)" confirmation-message="deleteMessage(calendar)">
|
<li confirmation="delete(calendar)" confirmation-message="deleteMessage(calendar)" />
|
||||||
</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="app-navigation-entry-edit name" ng-class="{error: nameError}">
|
<div class="app-navigation-entry-edit name" ng-class="{error: nameError}">
|
||||||
|
|
@ -99,30 +98,30 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
||||||
type="text"
|
type="text"
|
||||||
ng-keyup="checkEdit($event,calendar)"
|
ng-keyup="checkEdit($event,calendar)"
|
||||||
autofocus-on-insert>
|
autofocus-on-insert>
|
||||||
<input type="cancel"
|
<input :title="t('tasks', 'Cancel')"
|
||||||
|
type="cancel"
|
||||||
value=""
|
value=""
|
||||||
class="action icon-close"
|
class="action icon-close"
|
||||||
ng-click="cancelEdit(calendar)"
|
ng-click="cancelEdit(calendar)">
|
||||||
v-bind:title="t('tasks', 'Cancel')">
|
<input :title="t('tasks', 'Save')"
|
||||||
<input type="submit"
|
type="submit"
|
||||||
value=""
|
value=""
|
||||||
class="action icon-checkmark"
|
class="action icon-checkmark"
|
||||||
ng-click="saveEdit(calendar)"
|
ng-click="saveEdit(calendar)">
|
||||||
v-bind:title="t('tasks', 'Save')">
|
|
||||||
</form>
|
</form>
|
||||||
<colorpicker class="colorpicker" selected="calendar.color"/>
|
<colorpicker class="colorpicker" selected="calendar.color" />
|
||||||
</div>
|
</div>
|
||||||
<div class="app-navigation-entry-edit caldav">
|
<div class="app-navigation-entry-edit caldav">
|
||||||
<form>
|
<form>
|
||||||
<input class="caldav"
|
<input class="caldav"
|
||||||
ng-value="calendar.caldav"
|
ng-value="calendar.caldav"
|
||||||
readonly
|
readonly
|
||||||
type="text"/>
|
type="text">
|
||||||
<input type="cancel"
|
<input :title="t('tasks', 'Cancel')"
|
||||||
|
type="cancel"
|
||||||
value=""
|
value=""
|
||||||
class="action icon-close"
|
class="action icon-close"
|
||||||
ng-click="hideCalDAVUrl()"
|
ng-click="hideCalDAVUrl()">
|
||||||
v-bind:title="t('tasks', 'Cancel')">
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</router-link>
|
</router-link>
|
||||||
|
|
@ -135,43 +134,43 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
||||||
<div class="app-navigation-entry-edit name" ng-class="{error: nameError}">
|
<div class="app-navigation-entry-edit name" ng-class="{error: nameError}">
|
||||||
<form ng-disabled="isAddingList">
|
<form ng-disabled="isAddingList">
|
||||||
<input id="newList"
|
<input id="newList"
|
||||||
|
:placeholder="t('tasks', 'New List')"
|
||||||
ng-model="status.newListName"
|
ng-model="status.newListName"
|
||||||
class="edit hasTooltip"
|
class="edit hasTooltip"
|
||||||
type="text"
|
type="text"
|
||||||
autofocus-on-insert
|
autofocus-on-insert
|
||||||
v-bind:placeholder="t('tasks', 'New List')"
|
|
||||||
ng-keyup="checkNew($event,status.newListName)">
|
ng-keyup="checkNew($event,status.newListName)">
|
||||||
<input type="cancel"
|
<input :title="t('tasks', 'Cancel')"
|
||||||
|
type="cancel"
|
||||||
value=""
|
value=""
|
||||||
class="action icon-close"
|
class="action icon-close"
|
||||||
ng-click="cancelCreate()"
|
ng-click="cancelCreate()">
|
||||||
v-bind:title="t('tasks', 'Cancel')">
|
<input :title="t('tasks', 'Save')"
|
||||||
<input type="submit"
|
type="submit"
|
||||||
value=""
|
value=""
|
||||||
class="action icon-checkmark"
|
class="action icon-checkmark"
|
||||||
ng-click="create($event)"
|
ng-click="create($event)">
|
||||||
v-bind:title="t('tasks', 'Save')">
|
|
||||||
</form>
|
</form>
|
||||||
<colorpicker class="colorpicker" selected="color"/>
|
<colorpicker class="colorpicker" selected="color" />
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { mapState } from 'vuex';
|
import { mapState } from 'vuex'
|
||||||
import Colorpicker from './Colorpicker.vue';
|
import Colorpicker from './Colorpicker'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
computed: Object.assign({},
|
components: {
|
||||||
mapState({
|
'colorpicker': Colorpicker
|
||||||
collections: state => state.collections,
|
},
|
||||||
calendars: state => state.calendars,
|
computed: Object.assign({},
|
||||||
dayOfMonth: state => state.dayOfMonth
|
mapState({
|
||||||
})
|
collections: state => state.collections,
|
||||||
),
|
calendars: state => state.calendars,
|
||||||
components: {
|
dayOfMonth: state => state.dayOfMonth
|
||||||
'colorpicker': Colorpicker,
|
})
|
||||||
}
|
)
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -19,12 +19,12 @@
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import Vue from "vue";
|
import Vue from 'vue'
|
||||||
import VueRouter from "vue-router";
|
import VueRouter from 'vue-router'
|
||||||
|
|
||||||
import CollectionGeneral from "./TheCollections/General.vue";
|
import CollectionGeneral from './TheCollections/General'
|
||||||
import CollectionWeek from "./TheCollections/Week.vue";
|
import CollectionWeek from './TheCollections/Week'
|
||||||
import CollectionCalendar from "./TheCollections/Calendar.vue";
|
import CollectionCalendar from './TheCollections/Calendar'
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
// using
|
// using
|
||||||
|
|
@ -34,13 +34,13 @@ const routes = [
|
||||||
// would also be an option, but it currently does not work
|
// would also be an option, but it currently does not work
|
||||||
// reliably with router-link due to
|
// reliably with router-link due to
|
||||||
// https://github.com/vuejs/vue-router/issues/419
|
// https://github.com/vuejs/vue-router/issues/419
|
||||||
{ path: '/collections/week', component: CollectionWeek},
|
{ path: '/collections/week', component: CollectionWeek },
|
||||||
{ path: '/collections/:collectionId', component: CollectionGeneral},
|
{ 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({
|
export default new VueRouter({
|
||||||
routes, // short for `routes: routes`
|
routes // short for `routes: routes`
|
||||||
});
|
})
|
||||||
|
|
@ -33,8 +33,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
||||||
<select id="startOfWeek"
|
<select id="startOfWeek"
|
||||||
ng-change="setStartOfWeek()"
|
ng-change="setStartOfWeek()"
|
||||||
ng-model="settingsmodel.getById('various').startOfWeek"
|
ng-model="settingsmodel.getById('various').startOfWeek"
|
||||||
ng-options="startOfWeekOption.id as startOfWeekOption.name for startOfWeekOption in startOfWeekOptions">
|
ng-options="startOfWeekOption.id as startOfWeekOption.name for startOfWeekOption in startOfWeekOptions" />
|
||||||
</select>
|
|
||||||
</li>
|
</li>
|
||||||
<li class="headline">
|
<li class="headline">
|
||||||
{{ t('tasks', 'Visibility of Smart Collections') }}
|
{{ 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"
|
<li v-for="collection in collections"
|
||||||
:key="collection.id">
|
:key="collection.id">
|
||||||
<div class="label-container">
|
<div class="label-container">
|
||||||
<span class="icon" :class="collection.icon">
|
<span :class="collection.icon" class="icon">
|
||||||
<text ng-show="collection.id=='today'">{{ dayOfMonth }}</text>
|
<text ng-show="collection.id=='today'">{{ dayOfMonth }}</text>
|
||||||
</span>
|
</span>
|
||||||
<label :for="'visibilityCollection-' + collection.id" class="title">{{ collection.displayname }}</label>
|
<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"
|
<select :id="'visibilityCollection-' + collection.id"
|
||||||
ng-change="setVisibility(collection.id)"
|
ng-change="setVisibility(collection.id)"
|
||||||
ng-model="collection.show"
|
ng-model="collection.show"
|
||||||
ng-options="collectionOption.id as collectionOption.name for collectionOption in collectionOptions">
|
ng-options="collectionOption.id as collectionOption.name for collectionOption in collectionOptions" />
|
||||||
</select>
|
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -59,17 +57,17 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { mapState } from 'vuex';
|
import { mapState } from 'vuex'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
computed: Object.assign({},
|
components: {
|
||||||
mapState({
|
},
|
||||||
collections: state => state.collections,
|
computed: Object.assign({},
|
||||||
calendars: state => state.calendars,
|
mapState({
|
||||||
dayOfMonth: state => state.dayOfMonth
|
collections: state => state.collections,
|
||||||
})
|
calendars: state => state.calendars,
|
||||||
),
|
dayOfMonth: state => state.dayOfMonth
|
||||||
components: {
|
})
|
||||||
}
|
)
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -18,63 +18,61 @@
|
||||||
* License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
* 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) {
|
if (!OCA.Tasks) {
|
||||||
/**
|
/**
|
||||||
* @namespace OCA.Tasks
|
* @namespace OCA.Tasks
|
||||||
*/
|
*/
|
||||||
OCA.Tasks = {};
|
OCA.Tasks = {}
|
||||||
}
|
}
|
||||||
|
|
||||||
import App from './app.vue';
|
Vue.prototype.t = t
|
||||||
|
Vue.prototype.n = n
|
||||||
import Vue from 'vue';
|
Vue.prototype.OC = OC
|
||||||
import Vuex from 'vuex';
|
Vue.prototype.OCA = OCA
|
||||||
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;
|
|
||||||
|
|
||||||
OCA.Tasks.App = new Vue({
|
OCA.Tasks.App = new Vue({
|
||||||
el: '.app-tasks',
|
el: '.app-tasks',
|
||||||
router,
|
router,
|
||||||
store,
|
store,
|
||||||
data: function () {
|
data: function() {
|
||||||
return {
|
return {
|
||||||
searchString: ''
|
searchString: ''
|
||||||
};
|
}
|
||||||
},
|
},
|
||||||
mounted: function() {
|
mounted: function() {
|
||||||
var version = OC.config.version.split('.');
|
var version = OC.config.version.split('.')
|
||||||
|
|
||||||
if (version[0] >= 14) {
|
if (version[0] >= 14) {
|
||||||
OC.Search = new OCA.Search(this.filter, this.cleanSearch);
|
OC.Search = new OCA.Search(this.filter, this.cleanSearch)
|
||||||
} else {
|
} else {
|
||||||
OCA.Tasks.Search = {
|
OCA.Tasks.Search = {
|
||||||
attach: function (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() {
|
beforeMount() {
|
||||||
this.$store.dispatch('loadCollections');
|
this.$store.dispatch('loadCollections')
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
filter(query) {
|
filter(query) {
|
||||||
this.searchString = query;
|
this.searchString = query
|
||||||
},
|
},
|
||||||
cleanSearch() {
|
cleanSearch() {
|
||||||
this.searchString = '';
|
this.searchString = ''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
render: h => h(App)
|
render: h => h(App)
|
||||||
});
|
})
|
||||||
|
|
@ -18,15 +18,15 @@
|
||||||
* License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
* License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
'use strict';
|
'use strict'
|
||||||
|
|
||||||
import Axios from 'axios';
|
import Axios from 'axios'
|
||||||
Axios.defaults.headers.common.requesttoken = OC.requestToken;
|
Axios.defaults.headers.common.requesttoken = OC.requestToken
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
get(url) {
|
get(url) {
|
||||||
return Axios.get(url)
|
return Axios.get(url)
|
||||||
.then((response) => Promise.resolve(response))
|
.then((response) => Promise.resolve(response))
|
||||||
.catch((error) => Promise.reject(error));
|
.catch((error) => Promise.reject(error))
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
@ -18,13 +18,13 @@
|
||||||
* License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
* License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
'use strict';
|
'use strict'
|
||||||
|
|
||||||
import Vue from 'vue';
|
import Vue from 'vue'
|
||||||
import Vuex from 'vuex';
|
import Vuex from 'vuex'
|
||||||
import Requests from './services/requests';
|
import Requests from './services/requests'
|
||||||
|
|
||||||
Vue.use(Vuex);
|
Vue.use(Vuex)
|
||||||
|
|
||||||
export default new Vuex.Store({
|
export default new Vuex.Store({
|
||||||
state: {
|
state: {
|
||||||
|
|
@ -33,21 +33,21 @@ export default new Vuex.Store({
|
||||||
],
|
],
|
||||||
calendars: [
|
calendars: [
|
||||||
{
|
{
|
||||||
uri: "test-1",
|
uri: 'test-1',
|
||||||
displayname: "Test 1",
|
displayname: 'Test 1',
|
||||||
color: "#eef",
|
color: '#eef',
|
||||||
writable: true
|
writable: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
uri: "test-2",
|
uri: 'test-2',
|
||||||
displayname: "Test 2",
|
displayname: 'Test 2',
|
||||||
color: "#eef",
|
color: '#eef',
|
||||||
writable: false
|
writable: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
uri: "test-3",
|
uri: 'test-3',
|
||||||
displayname: "Test 3",
|
displayname: 'Test 3',
|
||||||
color: "#112233",
|
color: '#112233',
|
||||||
writable: true
|
writable: true
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
|
@ -55,23 +55,20 @@ export default new Vuex.Store({
|
||||||
},
|
},
|
||||||
mutations: {
|
mutations: {
|
||||||
setCollections(state, payload) {
|
setCollections(state, payload) {
|
||||||
state.collections = payload.collections;
|
state.collections = payload.collections
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
actions: {
|
actions: {
|
||||||
loadCollections({commit}) {
|
loadCollections({ commit }) {
|
||||||
return new Promise(function(resolve) {
|
return new Promise(function(resolve) {
|
||||||
Requests.get(OC.generateUrl('apps/tasks/collections'))
|
Requests.get(OC.generateUrl('apps/tasks/collections'))
|
||||||
.then(response => {
|
.then(response => {
|
||||||
commit('setCollections' , {
|
commit('setCollections', {
|
||||||
collections: response.data.data.collections
|
collections: response.data.data.collections
|
||||||
});
|
})
|
||||||
resolve();
|
resolve()
|
||||||
})
|
})
|
||||||
.catch(error => {
|
})
|
||||||
console.log(error);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
|
Before Width: | Height: | Size: 260 B After Width: | Height: | Size: 260 B |
|
Before Width: | Height: | Size: 251 B After Width: | Height: | Size: 251 B |
|
Before Width: | Height: | Size: 178 B After Width: | Height: | Size: 178 B |
|
Before Width: | Height: | Size: 104 B After Width: | Height: | Size: 104 B |
|
Before Width: | Height: | Size: 125 B After Width: | Height: | Size: 125 B |
|
Before Width: | Height: | Size: 105 B After Width: | Height: | Size: 105 B |
|
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 3.7 KiB |
|
Before Width: | Height: | Size: 90 B After Width: | Height: | Size: 90 B |
|
Before Width: | Height: | Size: 129 B After Width: | Height: | Size: 129 B |
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.3 KiB |
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.3 KiB |
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.3 KiB |
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.3 KiB |
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.3 KiB |
|
Before Width: | Height: | Size: 7.7 KiB After Width: | Height: | Size: 7.7 KiB |
|
|
@ -1,4 +1,4 @@
|
||||||
<?php
|
<?php
|
||||||
script('tasks', 'merged');
|
script('tasks', 'tasks');
|
||||||
style('tasks', 'style');
|
style('tasks', 'tasks');
|
||||||
?>
|
?>
|
||||||
|
|
|
||||||
|
|
@ -1,22 +1,32 @@
|
||||||
var path = require('path');
|
const path = require('path');
|
||||||
var VueLoaderPlugin = require('vue-loader/lib/plugin');
|
const { VueLoaderPlugin } = require('vue-loader');
|
||||||
|
const StyleLintPlugin = require('stylelint-webpack-plugin');
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
mode: 'development',
|
entry: ['babel-polyfill', path.join(__dirname, 'src', 'main.js')],
|
||||||
entry: './js/app/main.js',
|
|
||||||
output: {
|
output: {
|
||||||
path: path.resolve(__dirname, './js/public'),
|
path: path.resolve(__dirname, './js'),
|
||||||
publicPath: '/public/',
|
publicPath: '/js/',
|
||||||
filename: 'build.js'
|
filename: 'tasks.js'
|
||||||
},
|
},
|
||||||
plugins: [
|
|
||||||
new VueLoaderPlugin()
|
|
||||||
],
|
|
||||||
module: {
|
module: {
|
||||||
rules: [
|
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$/,
|
test: /\.vue$/,
|
||||||
loader: 'vue-loader',
|
loader: 'vue-loader'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
test: /\.js$/,
|
test: /\.js$/,
|
||||||
|
|
@ -29,29 +39,14 @@ module.exports = {
|
||||||
options: {
|
options: {
|
||||||
name: '[name].[ext]?[hash]'
|
name: '[name].[ext]?[hash]'
|
||||||
}
|
}
|
||||||
},
|
|
||||||
{
|
|
||||||
test: /\.css$/,
|
|
||||||
use: [
|
|
||||||
'vue-style-loader',
|
|
||||||
'css-loader'
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
plugins: [new VueLoaderPlugin(), new StyleLintPlugin()],
|
||||||
resolve: {
|
resolve: {
|
||||||
alias: {
|
alias: {
|
||||||
'vue$': 'vue/dist/vue.esm.js',
|
vue$: 'vue/dist/vue.esm.js'
|
||||||
'@': path.resolve(__dirname, 'js/app')
|
},
|
||||||
}
|
extensions: ['*', '.js', '.vue', '.json']
|
||||||
},
|
}
|
||||||
devServer: {
|
|
||||||
historyApiFallback: true,
|
|
||||||
noInfo: true,
|
|
||||||
overlay: true
|
|
||||||
},
|
|
||||||
performance: {
|
|
||||||
hints: false
|
|
||||||
},
|
|
||||||
devtool: '#eval-source-map'
|
|
||||||
};
|
};
|
||||||
|
|
|
||||||
12
webpack.dev.js
Normal file
12
webpack.dev.js
Normal 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',
|
||||||
|
});
|
||||||
|
|
@ -1,16 +1,7 @@
|
||||||
const merge = require('webpack-merge');
|
const merge = require('webpack-merge');
|
||||||
const common = require('./webpack.common');
|
const common = require('./webpack.common.js');
|
||||||
const webpack = require('webpack');
|
|
||||||
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
|
|
||||||
|
|
||||||
module.exports = merge(common, {
|
module.exports = merge(common, {
|
||||||
devtool: 'none',
|
|
||||||
mode: 'production',
|
mode: 'production',
|
||||||
// http://vue-loader.vuejs.org/en/workflow/production.html
|
devtool: '#source-map'
|
||||||
plugins: [
|
|
||||||
new UglifyJSPlugin(),
|
|
||||||
new webpack.LoaderOptionsPlugin({
|
|
||||||
minimize: true
|
|
||||||
})
|
|
||||||
]
|
|
||||||
});
|
});
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue