Compare commits
42 Commits
6d5363e5e7
...
603e8abdc9
Author | SHA1 | Date |
---|---|---|
renovate | 603e8abdc9 | |
kolaente | a4c3939fb6 | |
kolaente | ef0fe0b11d | |
kolaente | 99cd68ad43 | |
kolaente | 302728526a | |
kolaente | 99a5afc817 | |
kolaente | 4a8b7a726a | |
kolaente | 579cff647d | |
kolaente | 2a20c95ba5 | |
kolaente | 97e6147351 | |
kolaente | e8705c66dd | |
kolaente | 6973d76e17 | |
kolaente | cc079336a8 | |
kolaente | ab7bf7d8f9 | |
Dominik Pschenitschni | 6e54929104 | |
kolaente | dff5d84ebb | |
kolaente | 990639dd24 | |
kolaente | a073cfac66 | |
kolaente | 40b30079c1 | |
Dominik Pschenitschni | f3835d7dfe | |
Dominik Pschenitschni | 9a26310ad6 | |
Dominik Pschenitschni | 6ddede4863 | |
Dominik Pschenitschni | 12544c52ca | |
Dominik Pschenitschni | 02f985d8a3 | |
Dominik Pschenitschni | 3b9bc5b2f8 | |
Dominik Pschenitschni | 9e1ec72739 | |
Dominik Pschenitschni | 2c2fc4c9ee | |
Dominik Pschenitschni | c6d214b9eb | |
Dominik Pschenitschni | 77466e3373 | |
Dominik Pschenitschni | 8f82dd2783 | |
Dominik Pschenitschni | 58358481bc | |
Dominik Pschenitschni | 321850ec20 | |
Dominik Pschenitschni | 7fe9f17e43 | |
Dominik Pschenitschni | d064f0acc0 | |
Dominik Pschenitschni | c6aac15d24 | |
Dominik Pschenitschni | 513a51fb73 | |
Dominik Pschenitschni | 4070d64404 | |
Dominik Pschenitschni | 4cd6857072 | |
kolaente | 580b012993 | |
renovate | f9b892e32f | |
renovate | 6b4964c5a8 | |
renovate | 6d36cec91e |
|
@ -0,0 +1,51 @@
|
|||
module.exports = {
|
||||
'root': true,
|
||||
'env': {
|
||||
'browser': true,
|
||||
'es2021': true,
|
||||
'node': true,
|
||||
'vue/setup-compiler-macros': true,
|
||||
},
|
||||
'extends': [
|
||||
'eslint:recommended',
|
||||
'plugin:vue/vue3-essential',
|
||||
'@vue/typescript',
|
||||
],
|
||||
'rules': {
|
||||
'vue/html-quotes': [
|
||||
'error',
|
||||
'double',
|
||||
],
|
||||
'quotes': [
|
||||
'error',
|
||||
'single',
|
||||
],
|
||||
'comma-dangle': [
|
||||
'error',
|
||||
'always-multiline',
|
||||
],
|
||||
'semi': [
|
||||
'error',
|
||||
'never',
|
||||
],
|
||||
'vue/script-setup-uses-vars': 'error',
|
||||
|
||||
// see https://segmentfault.com/q/1010000040813116/a-1020000041134455 (original in chinese)
|
||||
'no-unused-vars': 'off',
|
||||
'@typescript-eslint/no-unused-vars': ['error', { vars: 'all', args: 'after-used', ignoreRestSiblings: true }],
|
||||
|
||||
'vue/multi-word-component-names': 0,
|
||||
},
|
||||
'parser': 'vue-eslint-parser',
|
||||
'parserOptions': {
|
||||
'parser': '@typescript-eslint/parser',
|
||||
'ecmaVersion': 2022,
|
||||
},
|
||||
'ignorePatterns': [
|
||||
'*.test.*',
|
||||
'cypress/*',
|
||||
],
|
||||
'globals': {
|
||||
'defineProps': 'readonly',
|
||||
},
|
||||
}
|
|
@ -18,13 +18,11 @@
|
|||
"javascriptreact",
|
||||
"vue"
|
||||
],
|
||||
"vetur.validation.template": false,
|
||||
|
||||
// i18n ally
|
||||
"i18n-ally.localesPaths": [
|
||||
"src/i18n/lang"
|
||||
],
|
||||
"i18n-ally.sortKeys": true,
|
||||
"i18n-ally.keepFulfilled": true,
|
||||
"i18n-ally.keystyle": "nested",
|
||||
"i18n-ally.keystyle": "nested"
|
||||
}
|
|
@ -1,22 +1,25 @@
|
|||
import { defineConfig } from 'cypress'
|
||||
import {defineConfig} from 'cypress'
|
||||
|
||||
export default defineConfig({
|
||||
env: {
|
||||
API_URL: 'http://localhost:3456/api/v1',
|
||||
TEST_SECRET: 'averyLongSecretToSe33dtheDB',
|
||||
},
|
||||
video: false,
|
||||
retries: {
|
||||
runMode: 2,
|
||||
},
|
||||
projectId: '181c7x',
|
||||
e2e: {
|
||||
// We've imported your old cypress plugins here.
|
||||
// You may want to clean this up later by importing these.
|
||||
setupNodeEvents(on, config) {
|
||||
return require('./cypress/plugins/index.js')(on, config)
|
||||
},
|
||||
baseUrl: 'http://localhost:4173',
|
||||
specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
|
||||
},
|
||||
env: {
|
||||
API_URL: 'http://localhost:3456/api/v1',
|
||||
TEST_SECRET: 'averyLongSecretToSe33dtheDB',
|
||||
},
|
||||
video: false,
|
||||
retries: {
|
||||
runMode: 2,
|
||||
},
|
||||
projectId: '181c7x',
|
||||
e2e: {
|
||||
baseUrl: 'http://localhost:4173',
|
||||
specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
|
||||
},
|
||||
component: {
|
||||
devServer: {
|
||||
framework: 'vue',
|
||||
bundler: 'vite',
|
||||
},
|
||||
},
|
||||
viewportWidth: 1600,
|
||||
viewportHeight: 900,
|
||||
})
|
||||
|
|
|
@ -61,7 +61,7 @@ describe('List View List', () => {
|
|||
})
|
||||
cy.visit(`/lists/${lists[1].id}/`)
|
||||
|
||||
cy.get('.list-title a.icon')
|
||||
cy.get('.list-title .icon')
|
||||
.should('not.exist')
|
||||
cy.get('input.input[placeholder="Add a new task..."')
|
||||
.should('not.exist')
|
||||
|
@ -91,7 +91,9 @@ describe('List View List', () => {
|
|||
cy.visit('/lists/1/list')
|
||||
|
||||
cy.get('.tasks-container .tasks')
|
||||
.should('contain', tasks[99].title)
|
||||
.should('contain', tasks[1].title)
|
||||
cy.get('.tasks-container .tasks')
|
||||
.should('not.contain', tasks[99].title)
|
||||
|
||||
cy.get('.card-content .pagination .pagination-link')
|
||||
.contains('2')
|
||||
|
@ -100,8 +102,8 @@ describe('List View List', () => {
|
|||
cy.url()
|
||||
.should('contain', '?page=2')
|
||||
cy.get('.tasks-container .tasks')
|
||||
.should('contain', tasks[1].title)
|
||||
.should('contain', tasks[99].title)
|
||||
cy.get('.tasks-container .tasks')
|
||||
.should('not.contain', tasks[99].title)
|
||||
.should('not.contain', tasks[1].title)
|
||||
})
|
||||
})
|
|
@ -52,9 +52,9 @@ describe('Lists', () => {
|
|||
cy.get('.list-title h1')
|
||||
.should('contain', 'First List')
|
||||
|
||||
cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list li:first-child .dropdown .dropdown-trigger')
|
||||
cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child .dropdown .dropdown-trigger')
|
||||
.click()
|
||||
cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list li:first-child .dropdown .dropdown-content')
|
||||
cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child .dropdown .dropdown-content')
|
||||
.contains('Edit')
|
||||
.click()
|
||||
cy.get('#title')
|
||||
|
@ -68,7 +68,7 @@ describe('Lists', () => {
|
|||
cy.get('.list-title h1')
|
||||
.should('contain', newListName)
|
||||
.should('not.contain', lists[0].title)
|
||||
cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list li:first-child')
|
||||
cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child')
|
||||
.should('contain', newListName)
|
||||
.should('not.contain', lists[0].title)
|
||||
cy.visit('/')
|
||||
|
@ -80,9 +80,9 @@ describe('Lists', () => {
|
|||
it('Should remove a list', () => {
|
||||
cy.visit(`/lists/${lists[0].id}`)
|
||||
|
||||
cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list li:first-child .dropdown .dropdown-trigger')
|
||||
cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child .dropdown .dropdown-trigger')
|
||||
.click()
|
||||
cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list li:first-child .dropdown .dropdown-content')
|
||||
cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child .dropdown .dropdown-content')
|
||||
.contains('Delete')
|
||||
.click()
|
||||
cy.url()
|
||||
|
@ -93,7 +93,7 @@ describe('Lists', () => {
|
|||
|
||||
cy.get('.global-notification')
|
||||
.should('contain', 'Success')
|
||||
cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list')
|
||||
cy.get('.namespace-container .menu.namespaces-lists .menu-list')
|
||||
.should('not.contain', lists[0].title)
|
||||
cy.location('pathname')
|
||||
.should('equal', '/')
|
||||
|
@ -112,7 +112,7 @@ describe('Lists', () => {
|
|||
cy.get('.modal-content [data-cy=modalPrimary]')
|
||||
.click()
|
||||
|
||||
cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list')
|
||||
cy.get('.namespace-container .menu.namespaces-lists .menu-list')
|
||||
.should('not.contain', lists[0].title)
|
||||
cy.get('main.app-content')
|
||||
.should('contain.text', 'This list is archived. It is not possible to create new or edit tasks for it.')
|
|
@ -165,7 +165,7 @@ describe('Task', () => {
|
|||
})
|
||||
cy.visit(`/tasks/${tasks[0].id}`)
|
||||
|
||||
cy.get('.task-view .details.content.description .editor a')
|
||||
cy.get('.task-view .details.content.description .editor button')
|
||||
.click()
|
||||
cy.get('.task-view .details.content.description .editor .vue-easymde .EasyMDEContainer .CodeMirror-scroll')
|
||||
.type('{selectall}New Description')
|
||||
|
@ -297,7 +297,7 @@ describe('Task', () => {
|
|||
cy.visit(`/tasks/${tasks[0].id}`)
|
||||
|
||||
cy.get('.task-view .column.assignees .multiselect .input-wrapper span.assignee')
|
||||
.get('a.remove-assignee')
|
||||
.get('.remove-assignee')
|
||||
.click()
|
||||
|
||||
cy.get('.global-notification')
|
||||
|
@ -340,6 +340,7 @@ describe('Task', () => {
|
|||
list_id: 1,
|
||||
})
|
||||
const labels = LabelFactory.create(1)
|
||||
LabelTaskFactory.truncate()
|
||||
|
||||
cy.visit(`/tasks/${tasks[0].id}`)
|
||||
|
||||
|
@ -402,7 +403,7 @@ describe('Task', () => {
|
|||
.contains('Due Date')
|
||||
.get('.date-input .datepicker .show')
|
||||
.click()
|
||||
cy.get('.datepicker .datepicker-popup a')
|
||||
cy.get('.datepicker .datepicker-popup button')
|
||||
.contains('Tomorrow')
|
||||
.click()
|
||||
cy.get('[data-cy="closeDatepicker"]')
|
|
@ -15,6 +15,7 @@ export class TaskFactory extends Factory {
|
|||
list_id: 1,
|
||||
created_by_id: 1,
|
||||
index: '{increment}',
|
||||
position: '{increment}',
|
||||
created: formatISO(now),
|
||||
updated: formatISO(now)
|
||||
}
|
|
@ -14,6 +14,7 @@ export class UserFactory extends Factory {
|
|||
username: faker.lorem.word(10) + faker.datatype.uuid(),
|
||||
password: '$2a$14$dcadBoMBL9jQoOcZK8Fju.cy0Ptx2oZECkKLnaa8ekRoTFe1w7To.', // 1234
|
||||
status: 0,
|
||||
issuer: 'local',
|
||||
created: formatISO(now),
|
||||
updated: formatISO(now)
|
||||
}
|
|
@ -1,21 +0,0 @@
|
|||
/// <reference types="cypress" />
|
||||
// ***********************************************************
|
||||
// This example plugins/index.js can be used to load plugins
|
||||
//
|
||||
// You can change the location of this file or turn off loading
|
||||
// the plugins file with the 'pluginsFile' configuration option.
|
||||
//
|
||||
// You can read more here:
|
||||
// https://on.cypress.io/plugins-guide
|
||||
// ***********************************************************
|
||||
|
||||
// This function is called when a project is opened or re-opened (e.g. due to
|
||||
// the project's config changing)
|
||||
|
||||
/**
|
||||
* @type {Cypress.PluginConfig}
|
||||
*/
|
||||
module.exports = (on, config) => {
|
||||
// `on` is used to hook into various events Cypress emits
|
||||
// `config` is the resolved Cypress config
|
||||
}
|
|
@ -1,33 +0,0 @@
|
|||
/**
|
||||
* Recursively gets an element, returning only after it's determined to be attached to the DOM for good.
|
||||
*
|
||||
* Source: https://github.com/cypress-io/cypress/issues/7306#issuecomment-850621378
|
||||
*/
|
||||
Cypress.Commands.add('getSettled', (selector, opts = {}) => {
|
||||
const retries = opts.retries || 3
|
||||
const delay = opts.delay || 100
|
||||
|
||||
const isAttached = (resolve, count = 0) => {
|
||||
const el = Cypress.$(selector)
|
||||
|
||||
// is element attached to the DOM?
|
||||
count = Cypress.dom.isAttached(el) ? count + 1 : 0
|
||||
|
||||
// hit our base case, return the element
|
||||
if (count >= retries) {
|
||||
return resolve(el)
|
||||
}
|
||||
|
||||
// retry after a bit of a delay
|
||||
setTimeout(() => isAttached(resolve, count), delay)
|
||||
}
|
||||
|
||||
// wrap, so we can chain cypress commands off the result
|
||||
return cy.wrap(null).then(() => {
|
||||
return new Cypress.Promise((resolve) => {
|
||||
return isAttached(resolve, 0)
|
||||
}).then((el) => {
|
||||
return cy.wrap(el)
|
||||
})
|
||||
})
|
||||
})
|
|
@ -0,0 +1,71 @@
|
|||
/// <reference types="cypress" />
|
||||
// ***********************************************
|
||||
// This example commands.ts shows you how to
|
||||
// create various custom commands and overwrite
|
||||
// existing commands.
|
||||
//
|
||||
// For more comprehensive examples of custom
|
||||
// commands please read more here:
|
||||
// https://on.cypress.io/custom-commands
|
||||
// ***********************************************
|
||||
//
|
||||
//
|
||||
// -- This is a parent command --
|
||||
// Cypress.Commands.add('login', (email, password) => { ... })
|
||||
//
|
||||
//
|
||||
// -- This is a child command --
|
||||
// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
|
||||
//
|
||||
//
|
||||
// -- This is a dual command --
|
||||
// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
|
||||
//
|
||||
//
|
||||
// -- This will overwrite an existing command --
|
||||
// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
|
||||
//
|
||||
// declare global {
|
||||
// namespace Cypress {
|
||||
// interface Chainable {
|
||||
// login(email: string, password: string): Chainable<void>
|
||||
// drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
|
||||
// dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
|
||||
// visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
/**
|
||||
* Recursively gets an element, returning only after it's determined to be attached to the DOM for good.
|
||||
*
|
||||
* Source: https://github.com/cypress-io/cypress/issues/7306#issuecomment-850621378
|
||||
*/
|
||||
Cypress.Commands.add('getSettled', (selector, opts = {}) => {
|
||||
const retries = opts.retries || 3
|
||||
const delay = opts.delay || 100
|
||||
|
||||
const isAttached = (resolve, count = 0) => {
|
||||
const el = Cypress.$(selector)
|
||||
|
||||
// is element attached to the DOM?
|
||||
count = Cypress.dom.isAttached(el) ? count + 1 : 0
|
||||
|
||||
// hit our base case, return the element
|
||||
if (count >= retries) {
|
||||
return resolve(el)
|
||||
}
|
||||
|
||||
// retry after a bit of a delay
|
||||
setTimeout(() => isAttached(resolve, count), delay)
|
||||
}
|
||||
|
||||
// wrap, so we can chain cypress commands off the result
|
||||
return cy.wrap(null).then(() => {
|
||||
return new Cypress.Promise((resolve) => {
|
||||
return isAttached(resolve, 0)
|
||||
}).then((el) => {
|
||||
return cy.wrap(el)
|
||||
})
|
||||
})
|
||||
})
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<title>Components App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div data-cy-root></div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,29 @@
|
|||
// ***********************************************************
|
||||
// This example support/component.ts is processed and
|
||||
// loaded automatically before your test files.
|
||||
//
|
||||
// This is a great place to put global configuration and
|
||||
// behavior that modifies Cypress.
|
||||
//
|
||||
// You can change the location of this file or turn off
|
||||
// automatically serving support files with the
|
||||
// 'supportFile' configuration option.
|
||||
//
|
||||
// You can read more here:
|
||||
// https://on.cypress.io/configuration
|
||||
// ***********************************************************
|
||||
|
||||
// Import commands.js using ES2015 syntax:
|
||||
import './commands'
|
||||
|
||||
// Alternatively you can use CommonJS syntax:
|
||||
// require('./commands')
|
||||
|
||||
import { mount } from 'cypress/vue'
|
||||
// Ensure global styles are loaded
|
||||
import '../../src/styles/global.scss';
|
||||
|
||||
Cypress.Commands.add('mount', mount)
|
||||
|
||||
// Example use:
|
||||
// cy.mount(MyComponent)
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"extends": "@vue/tsconfig/tsconfig.web.json",
|
||||
"include": ["./integration/**/*", "./support/**/*"],
|
||||
"compilerOptions": {
|
||||
"isolatedModules": false,
|
||||
"target": "es5",
|
||||
"lib": ["es5", "dom"],
|
||||
"types": ["cypress"]
|
||||
}
|
||||
}
|
|
@ -0,0 +1,3 @@
|
|||
/// <reference types="vite/client" />
|
||||
/// <reference types="vite-svg-loader" />
|
||||
/// <reference types="cypress" />
|
66
package.json
66
package.json
|
@ -9,19 +9,19 @@
|
|||
"build": "vite build && workbox copyLibraries dist/",
|
||||
"build:modern-only": "BUILD_MODERN_ONLY=true vite build && workbox copyLibraries dist/",
|
||||
"build:dev": "vite build -m development --outDir dist-dev/",
|
||||
"typecheck": "vue-tsc --noEmit",
|
||||
"lint": "eslint --ignore-pattern '*.test.*' ./src --ext .vue,.js,.ts",
|
||||
"cypress:open": "cypress open",
|
||||
"test:unit": "vitest run",
|
||||
"test:unit": "vitest",
|
||||
"test:unit-watch": "vitest watch",
|
||||
"test:frontend": "cypress run",
|
||||
"typecheck": "vue-tsc --noEmit && vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
|
||||
"browserslist:update": "npx browserslist@latest --update-db"
|
||||
},
|
||||
"dependencies": {
|
||||
"@github/hotkey": "2.0.0",
|
||||
"@kyvg/vue3-notification": "2.3.4",
|
||||
"@sentry/tracing": "7.4.1",
|
||||
"@sentry/vue": "7.4.1",
|
||||
"@sentry/tracing": "7.5.0",
|
||||
"@sentry/vue": "7.5.0",
|
||||
"@types/is-touch-device": "1.0.0",
|
||||
"@types/sortablejs": "1.13.0",
|
||||
"@vueuse/core": "8.7.5",
|
||||
|
@ -49,13 +49,15 @@
|
|||
"vue-drag-resize": "2.0.3",
|
||||
"vue-flatpickr-component": "9.0.6",
|
||||
"vue-i18n": "9.2.0-beta.36",
|
||||
"vue-router": "4.0.16",
|
||||
"vue-router": "4.1.0",
|
||||
"vuex": "4.0.2",
|
||||
"workbox-precaching": "6.5.3",
|
||||
"zhyswan-vuedraggable": "4.1.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@4tw/cypress-drag-drop": "2.2.1",
|
||||
"@cypress/vite-dev-server": "2.2.2",
|
||||
"@cypress/vue": "3.1.1",
|
||||
"@faker-js/faker": "7.3.0",
|
||||
"@fortawesome/fontawesome-svg-core": "6.1.1",
|
||||
"@fortawesome/free-regular-svg-icons": "6.1.1",
|
||||
|
@ -67,17 +69,19 @@
|
|||
"@vitejs/plugin-legacy": "1.8.2",
|
||||
"@vitejs/plugin-vue": "2.3.3",
|
||||
"@vue/eslint-config-typescript": "11.0.0",
|
||||
"@vue/test-utils": "2.0.0-rc.18",
|
||||
"@vue/tsconfig": "0.1.3",
|
||||
"autoprefixer": "10.4.7",
|
||||
"axios": "0.27.2",
|
||||
"browserslist": "4.20.4",
|
||||
"caniuse-lite": "1.0.30001357",
|
||||
"browserslist": "4.21.1",
|
||||
"caniuse-lite": "1.0.30001363",
|
||||
"cypress": "10.3.0",
|
||||
"esbuild": "0.14.48",
|
||||
"eslint": "8.19.0",
|
||||
"eslint-plugin-vue": "9.1.1",
|
||||
"express": "4.18.1",
|
||||
"happy-dom": "6.0.0",
|
||||
"netlify-cli": "10.7.1",
|
||||
"netlify-cli": "10.9.0",
|
||||
"postcss": "8.4.14",
|
||||
"postcss-preset-env": "7.7.2",
|
||||
"rollup": "2.75.7",
|
||||
|
@ -92,52 +96,6 @@
|
|||
"wait-on": "6.0.1",
|
||||
"workbox-cli": "6.5.3"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
"env": {
|
||||
"browser": true,
|
||||
"es2021": true,
|
||||
"node": true,
|
||||
"vue/setup-compiler-macros": true
|
||||
},
|
||||
"extends": [
|
||||
"eslint:recommended",
|
||||
"plugin:vue/vue3-essential",
|
||||
"@vue/typescript"
|
||||
],
|
||||
"rules": {
|
||||
"vue/html-quotes": [
|
||||
"error",
|
||||
"double"
|
||||
],
|
||||
"quotes": [
|
||||
"error",
|
||||
"single"
|
||||
],
|
||||
"comma-dangle": [
|
||||
"error",
|
||||
"always-multiline"
|
||||
],
|
||||
"semi": [
|
||||
"error",
|
||||
"never"
|
||||
],
|
||||
"vue/script-setup-uses-vars": "error",
|
||||
"vue/multi-word-component-names": 0
|
||||
},
|
||||
"parser": "vue-eslint-parser",
|
||||
"parserOptions": {
|
||||
"parser": "@typescript-eslint/parser",
|
||||
"ecmaVersion": 2022
|
||||
},
|
||||
"ignorePatterns": [
|
||||
"*.test.*",
|
||||
"cypress/*"
|
||||
],
|
||||
"globals": {
|
||||
"defineProps": "readonly"
|
||||
}
|
||||
},
|
||||
"postcss": {
|
||||
"plugins": {
|
||||
"autoprefixer": {}
|
||||
|
|
|
@ -5,6 +5,7 @@
|
|||
:class="{ 'base-button--type-button': isButton }"
|
||||
v-bind="elementBindings"
|
||||
:disabled="disabled || undefined"
|
||||
ref="button"
|
||||
>
|
||||
<slot />
|
||||
</component>
|
||||
|
@ -53,7 +54,8 @@ const props = defineProps({
|
|||
const componentNodeName = ref<Node['nodeName']>('button')
|
||||
interface ElementBindings {
|
||||
type?: string;
|
||||
rel?: string,
|
||||
rel?: string;
|
||||
target?: string;
|
||||
}
|
||||
|
||||
const elementBindings = ref({})
|
||||
|
@ -74,7 +76,10 @@ watchEffect(() => {
|
|||
// we also set a predefined value for the attribute rel, but make it possible to overwrite this by the user.
|
||||
if ('href' in attrs) {
|
||||
nodeName = 'a'
|
||||
bindings = {rel: 'noreferrer noopener nofollow'}
|
||||
bindings = {
|
||||
rel: 'noreferrer noopener nofollow',
|
||||
target: '_blank',
|
||||
}
|
||||
}
|
||||
|
||||
componentNodeName.value = nodeName
|
||||
|
@ -85,6 +90,15 @@ watchEffect(() => {
|
|||
})
|
||||
|
||||
const isButton = computed(() => componentNodeName.value === 'button')
|
||||
|
||||
const button = ref()
|
||||
function focus() {
|
||||
button.value.focus()
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
focus,
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
@ -103,7 +117,7 @@ const isButton = computed(() => componentNodeName.value === 'button')
|
|||
|
||||
:where(.base-button) {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
display: inline-block;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
user-select: none;
|
||||
|
|
|
@ -85,7 +85,12 @@ import DatemathHelp from '@/components/date/datemathHelp.vue'
|
|||
const store = useStore()
|
||||
const {t} = useI18n({useScope: 'global'})
|
||||
|
||||
const emit = defineEmits(['dateChanged'])
|
||||
const emit = defineEmits(['dateChanged', 'update:modelValue'])
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
required: false,
|
||||
},
|
||||
})
|
||||
|
||||
// FIXME: This seems to always contain the default value - that breaks the picker
|
||||
const weekStart = computed<number>(() => store.state.auth.settings.weekStart ?? 0)
|
||||
|
@ -108,11 +113,22 @@ const flatpickrRange = ref('')
|
|||
const from = ref('')
|
||||
const to = ref('')
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
newValue => {
|
||||
from.value = newValue.dateFrom
|
||||
to.value = newValue.dateTo
|
||||
flatpickrRange.value = `${from.value} to ${to.value}`
|
||||
},
|
||||
)
|
||||
|
||||
function emitChanged() {
|
||||
emit('dateChanged', {
|
||||
const args = {
|
||||
dateFrom: from.value === '' ? null : from.value,
|
||||
dateTo: to.value === '' ? null : to.value,
|
||||
})
|
||||
}
|
||||
emit('dateChanged', args)
|
||||
emit('update:modelValue', args)
|
||||
}
|
||||
|
||||
watch(
|
||||
|
|
|
@ -22,14 +22,14 @@
|
|||
|
||||
<div class="navbar-end">
|
||||
<update/>
|
||||
<a
|
||||
<BaseButton
|
||||
@click="openQuickActions"
|
||||
class="trigger-button pr-0"
|
||||
v-shortcut="'Control+k'"
|
||||
:title="$t('keyboardShortcuts.quickSearch')"
|
||||
>
|
||||
<icon icon="search"/>
|
||||
</a>
|
||||
</BaseButton>
|
||||
<notifications/>
|
||||
<div class="user">
|
||||
<dropdown class="is-right" ref="usernameDropdown">
|
||||
|
|
|
@ -49,13 +49,13 @@
|
|||
</modal>
|
||||
</transition>
|
||||
|
||||
<a
|
||||
<BaseButton
|
||||
class="keyboard-shortcuts-button d-print-none"
|
||||
@click="showKeyboardShortcuts()"
|
||||
v-shortcut="'?'"
|
||||
>
|
||||
<icon icon="keyboard"/>
|
||||
</a>
|
||||
</BaseButton>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -51,7 +51,7 @@
|
|||
<nav class="menu namespaces-lists loader-container is-loading-small" :class="{'is-loading': loading}">
|
||||
<template v-for="(n, nk) in namespaces" :key="n.id">
|
||||
<div class="namespace-title" :class="{'has-menu': n.id > 0}">
|
||||
<span
|
||||
<BaseButton
|
||||
@click="toggleLists(n.id)"
|
||||
class="menu-label"
|
||||
v-tooltip="namespaceTitles[nk]"
|
||||
|
@ -61,32 +61,25 @@
|
|||
:style="{ backgroundColor: n.hexColor }"
|
||||
class="color-bubble"
|
||||
/>
|
||||
<span class="name">
|
||||
{{ namespaceTitles[nk] }}
|
||||
</span>
|
||||
<a
|
||||
<span class="name">{{ namespaceTitles[nk] }}</span>
|
||||
<div
|
||||
class="icon is-small toggle-lists-icon pl-2"
|
||||
:class="{'active': typeof listsVisible[n.id] !== 'undefined' ? listsVisible[n.id] : true}"
|
||||
@click="toggleLists(n.id)"
|
||||
>
|
||||
<icon icon="chevron-down"/>
|
||||
</a>
|
||||
</div>
|
||||
<span class="count" :class="{'ml-2 mr-0': n.id > 0}">
|
||||
({{ namespaceListsCount[nk] }})
|
||||
</span>
|
||||
</span>
|
||||
</BaseButton>
|
||||
<namespace-settings-dropdown :namespace="n" v-if="n.id > 0"/>
|
||||
</div>
|
||||
<div
|
||||
v-if="listsVisible[n.id] ?? true"
|
||||
:key="n.id + 'child'"
|
||||
class="more-container"
|
||||
>
|
||||
<!--
|
||||
NOTE: a v-model / computed setter is not possible, since the updateActiveLists function
|
||||
triggered by the change needs to have access to the current namespace
|
||||
-->
|
||||
<draggable
|
||||
v-if="listsVisible[n.id] ?? true"
|
||||
v-bind="dragOptions"
|
||||
:modelValue="activeLists[nk]"
|
||||
@update:modelValue="(lists) => updateActiveLists(n, lists)"
|
||||
|
@ -111,45 +104,36 @@
|
|||
>
|
||||
<template #item="{element: l}">
|
||||
<li
|
||||
class="loader-container is-loading-small"
|
||||
class="list-menu loader-container is-loading-small"
|
||||
:class="{'is-loading': listUpdating[l.id]}"
|
||||
>
|
||||
<router-link
|
||||
<BaseButton
|
||||
:to="{ name: 'list.index', params: { listId: l.id} }"
|
||||
v-slot="{ href, navigate, isActive }"
|
||||
custom
|
||||
class="list-menu-link"
|
||||
:class="{'router-link-exact-active': currentList.id === l.id}"
|
||||
>
|
||||
<a
|
||||
@click="navigate"
|
||||
:href="href"
|
||||
class="list-menu-link"
|
||||
:class="{'router-link-exact-active': isActive || currentList?.id === l.id}"
|
||||
>
|
||||
<span class="icon handle">
|
||||
<icon icon="grip-lines"/>
|
||||
</span>
|
||||
<span
|
||||
:style="{ backgroundColor: l.hexColor }"
|
||||
class="color-bubble"
|
||||
v-if="l.hexColor !== ''">
|
||||
</span>
|
||||
<span class="list-menu-title">
|
||||
{{ getListTitle(l) }}
|
||||
</span>
|
||||
<span
|
||||
:class="{'is-favorite': l.isFavorite}"
|
||||
@click.prevent.stop="toggleFavoriteList(l)"
|
||||
class="favorite">
|
||||
<icon :icon="l.isFavorite ? 'star' : ['far', 'star']"/>
|
||||
</span>
|
||||
</a>
|
||||
</router-link>
|
||||
<span class="icon handle">
|
||||
<icon icon="grip-lines"/>
|
||||
</span>
|
||||
<span
|
||||
:style="{ backgroundColor: l.hexColor }"
|
||||
class="color-bubble"
|
||||
v-if="l.hexColor !== ''">
|
||||
</span>
|
||||
<span class="list-menu-title">{{ getListTitle(l) }}</span>
|
||||
</BaseButton>
|
||||
<BaseButton
|
||||
class="favorite"
|
||||
:class="{'is-favorite': l.isFavorite}"
|
||||
@click="toggleFavoriteList(l)"
|
||||
>
|
||||
<icon :icon="l.isFavorite ? 'star' : ['far', 'star']"/>
|
||||
</BaseButton>
|
||||
<list-settings-dropdown :list="l" v-if="l.id > 0"/>
|
||||
<span class="list-setting-spacer" v-else></span>
|
||||
</li>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
</template>
|
||||
</nav>
|
||||
<PoweredByLink/>
|
||||
|
@ -162,6 +146,7 @@ import {useStore} from 'vuex'
|
|||
import draggable from 'zhyswan-vuedraggable'
|
||||
import {SortableEvent} from 'sortablejs'
|
||||
|
||||
import BaseButton from '@/components/base/BaseButton.vue'
|
||||
import ListSettingsDropdown from '@/components/list/list-settings-dropdown.vue'
|
||||
import NamespaceSettingsDropdown from '@/components/namespace/namespace-settings-dropdown.vue'
|
||||
import PoweredByLink from '@/components/home/PoweredByLink.vue'
|
||||
|
@ -334,7 +319,7 @@ $vikunja-nav-selected-width: 0.4rem;
|
|||
}
|
||||
|
||||
.menu-label,
|
||||
.menu-list span.list-menu-link,
|
||||
.menu-list .list-menu-link,
|
||||
.menu-list a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
@ -352,28 +337,21 @@ $vikunja-nav-selected-width: 0.4rem;
|
|||
flex: 0 0 12px;
|
||||
}
|
||||
|
||||
.favorite {
|
||||
margin-left: .25rem;
|
||||
transition: opacity $transition, color $transition;
|
||||
opacity: 0;
|
||||
}
|
||||
.favorite {
|
||||
margin-left: .25rem;
|
||||
transition: opacity $transition, color $transition;
|
||||
opacity: 0;
|
||||
|
||||
&:hover {
|
||||
color: var(--warning);
|
||||
}
|
||||
|
||||
&.is-favorite {
|
||||
opacity: 1;
|
||||
color: var(--warning);
|
||||
}
|
||||
&:hover,
|
||||
&.is-favorite {
|
||||
color: var(--warning);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .favorite {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: transparent;
|
||||
}
|
||||
.favorite.is-favorite,
|
||||
.list-menu:hover .favorite {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.menu-label {
|
||||
|
@ -392,6 +370,8 @@ $vikunja-nav-selected-width: 0.4rem;
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: $vikunja-nav-color;
|
||||
padding: 0 .25rem;
|
||||
|
||||
.menu-label {
|
||||
margin-bottom: 0;
|
||||
|
@ -410,11 +390,6 @@ $vikunja-nav-selected-width: 0.4rem;
|
|||
}
|
||||
}
|
||||
|
||||
a:not(.dropdown-item) {
|
||||
color: $vikunja-nav-color;
|
||||
padding: 0 .25rem;
|
||||
}
|
||||
|
||||
:deep(.dropdown-trigger) {
|
||||
padding: .5rem;
|
||||
cursor: pointer;
|
||||
|
@ -444,7 +419,7 @@ $vikunja-nav-selected-width: 0.4rem;
|
|||
|
||||
.menu-label,
|
||||
.nsettings,
|
||||
.menu-list span.list-menu-link,
|
||||
.menu-list .list-menu-link,
|
||||
.menu-list a {
|
||||
color: $vikunja-nav-color;
|
||||
}
|
||||
|
@ -483,7 +458,11 @@ $vikunja-nav-selected-width: 0.4rem;
|
|||
}
|
||||
}
|
||||
|
||||
span.list-menu-link, li > a {
|
||||
a:hover {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.list-menu-link, li > a {
|
||||
padding: 0.75rem .5rem 0.75rem ($navbar-padding * 1.5 - 1.75rem);
|
||||
transition: all 0.2s ease;
|
||||
|
||||
|
@ -556,7 +535,7 @@ $vikunja-nav-selected-width: 0.4rem;
|
|||
font-family: $vikunja-font;
|
||||
}
|
||||
|
||||
span.list-menu-link, li > a {
|
||||
.list-menu-link, li > a {
|
||||
padding-left: 2rem;
|
||||
display: inline-block;
|
||||
|
||||
|
|
|
@ -1,95 +1,73 @@
|
|||
<template>
|
||||
<div class="datepicker" :class="{'disabled': disabled}">
|
||||
<a @click.stop="toggleDatePopup" class="show">
|
||||
<template v-if="date === null">
|
||||
{{ chooseDateLabel }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ formatDateShort(date) }}
|
||||
</template>
|
||||
</a>
|
||||
<div class="datepicker">
|
||||
<BaseButton @click.stop="toggleDatePopup" class="show" :disabled="disabled || undefined">
|
||||
{{ date === null ? chooseDateLabel : formatDateShort(date) }}
|
||||
</BaseButton>
|
||||
|
||||
<transition name="fade">
|
||||
<div v-if="show" class="datepicker-popup" ref="datepickerPopup">
|
||||
|
||||
<a @click.stop="() => setDate('today')" v-if="(new Date()).getHours() < 21">
|
||||
<span class="icon">
|
||||
<icon :icon="['far', 'calendar-alt']"/>
|
||||
</span>
|
||||
<BaseButton
|
||||
v-if="(new Date()).getHours() < 21"
|
||||
class="datepicker__quick-select-date"
|
||||
@click.stop="setDate('today')"
|
||||
>
|
||||
<span class="icon"><icon :icon="['far', 'calendar-alt']"/></span>
|
||||
<span class="text">
|
||||
<span>
|
||||
{{ $t('input.datepicker.today') }}
|
||||
</span>
|
||||
<span class="weekday">
|
||||
{{ getWeekdayFromStringInterval('today') }}
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
<a @click.stop="() => setDate('tomorrow')">
|
||||
<span class="icon">
|
||||
<icon :icon="['far', 'sun']"/>
|
||||
<span>{{ $t('input.datepicker.today') }}</span>
|
||||
<span class="weekday">{{ getWeekdayFromStringInterval('today') }}</span>
|
||||
</span>
|
||||
</BaseButton>
|
||||
<BaseButton
|
||||
class="datepicker__quick-select-date"
|
||||
@click.stop="setDate('tomorrow')"
|
||||
>
|
||||
<span class="icon"><icon :icon="['far', 'sun']"/></span>
|
||||
<span class="text">
|
||||
<span>
|
||||
{{ $t('input.datepicker.tomorrow') }}
|
||||
</span>
|
||||
<span class="weekday">
|
||||
{{ getWeekdayFromStringInterval('tomorrow') }}
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
<a @click.stop="() => setDate('nextMonday')">
|
||||
<span class="icon">
|
||||
<icon icon="coffee"/>
|
||||
<span>{{ $t('input.datepicker.tomorrow') }}</span>
|
||||
<span class="weekday">{{ getWeekdayFromStringInterval('tomorrow') }}</span>
|
||||
</span>
|
||||
</BaseButton>
|
||||
<BaseButton
|
||||
class="datepicker__quick-select-date"
|
||||
@click.stop="setDate('nextMonday')"
|
||||
>
|
||||
<span class="icon"><icon icon="coffee"/></span>
|
||||
<span class="text">
|
||||
<span>
|
||||
{{ $t('input.datepicker.nextMonday') }}
|
||||
</span>
|
||||
<span class="weekday">
|
||||
{{ getWeekdayFromStringInterval('nextMonday') }}
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
<a @click.stop="() => setDate('thisWeekend')">
|
||||
<span class="icon">
|
||||
<icon icon="cocktail"/>
|
||||
<span>{{ $t('input.datepicker.nextMonday') }}</span>
|
||||
<span class="weekday">{{ getWeekdayFromStringInterval('nextMonday') }}</span>
|
||||
</span>
|
||||
</BaseButton>
|
||||
<BaseButton
|
||||
class="datepicker__quick-select-date"
|
||||
@click.stop="setDate('thisWeekend')"
|
||||
>
|
||||
<span class="icon"><icon icon="cocktail"/></span>
|
||||
<span class="text">
|
||||
<span>
|
||||
{{ $t('input.datepicker.thisWeekend') }}
|
||||
</span>
|
||||
<span class="weekday">
|
||||
{{ getWeekdayFromStringInterval('thisWeekend') }}
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
<a @click.stop="() => setDate('laterThisWeek')">
|
||||
<span class="icon">
|
||||
<icon icon="chess-knight"/>
|
||||
<span>{{ $t('input.datepicker.thisWeekend') }}</span>
|
||||
<span class="weekday">{{ getWeekdayFromStringInterval('thisWeekend') }}</span>
|
||||
</span>
|
||||
</BaseButton>
|
||||
<BaseButton
|
||||
class="datepicker__quick-select-date"
|
||||
@click.stop="setDate('laterThisWeek')"
|
||||
>
|
||||
<span class="icon"><icon icon="chess-knight"/></span>
|
||||
<span class="text">
|
||||
<span>
|
||||
{{ $t('input.datepicker.laterThisWeek') }}
|
||||
</span>
|
||||
<span class="weekday">
|
||||
{{ getWeekdayFromStringInterval('laterThisWeek') }}
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
<a @click.stop="() => setDate('nextWeek')">
|
||||
<span class="icon">
|
||||
<icon icon="forward"/>
|
||||
<span>{{ $t('input.datepicker.laterThisWeek') }}</span>
|
||||
<span class="weekday">{{ getWeekdayFromStringInterval('laterThisWeek') }}</span>
|
||||
</span>
|
||||
</BaseButton>
|
||||
<BaseButton
|
||||
class="datepicker__quick-select-date"
|
||||
@click.stop="setDate('nextWeek')"
|
||||
>
|
||||
<span class="icon"><icon icon="forward"/></span>
|
||||
<span class="text">
|
||||
<span>
|
||||
{{ $t('input.datepicker.nextWeek') }}
|
||||
</span>
|
||||
<span class="weekday">
|
||||
{{ getWeekdayFromStringInterval('nextWeek') }}
|
||||
</span>
|
||||
<span>{{ $t('input.datepicker.nextWeek') }}</span>
|
||||
<span class="weekday">{{ getWeekdayFromStringInterval('nextWeek') }}</span>
|
||||
</span>
|
||||
</a>
|
||||
</BaseButton>
|
||||
|
||||
<flat-pickr
|
||||
:config="flatPickerConfig"
|
||||
|
@ -98,7 +76,7 @@
|
|||
/>
|
||||
|
||||
<x-button
|
||||
class="is-fullwidth"
|
||||
class="datepicker__close-button is-fullwidth"
|
||||
:shadow="false"
|
||||
@click="close"
|
||||
v-cy="'closeDatepicker'"
|
||||
|
@ -117,6 +95,8 @@ import flatPickr from 'vue-flatpickr-component'
|
|||
import 'flatpickr/dist/flatpickr.css'
|
||||
import {i18n} from '@/i18n'
|
||||
|
||||
import BaseButton from '@/components/base/BaseButton.vue'
|
||||
|
||||
import {format} from 'date-fns'
|
||||
import {calculateDayInterval} from '@/helpers/time/calculateDayInterval'
|
||||
import {calculateNearestHours} from '@/helpers/time/calculateNearestHours'
|
||||
|
@ -134,6 +114,7 @@ export default defineComponent({
|
|||
},
|
||||
components: {
|
||||
flatPickr,
|
||||
BaseButton,
|
||||
},
|
||||
props: {
|
||||
modelValue: {
|
||||
|
@ -263,68 +244,64 @@ export default defineComponent({
|
|||
input.input {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled a {
|
||||
cursor: default;
|
||||
}
|
||||
.datepicker-popup {
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
width: 320px;
|
||||
background: var(--white);
|
||||
border-radius: $radius;
|
||||
box-shadow: $shadow;
|
||||
|
||||
.datepicker-popup {
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
width: 320px;
|
||||
background: var(--white);
|
||||
border-radius: $radius;
|
||||
box-shadow: $shadow;
|
||||
|
||||
@media screen and (max-width: ($tablet)) {
|
||||
width: calc(100vw - 5rem);
|
||||
}
|
||||
|
||||
a:not(.button) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 .5rem;
|
||||
width: 100%;
|
||||
height: 2.25rem;
|
||||
color: var(--text);
|
||||
transition: all $transition;
|
||||
|
||||
&:first-child {
|
||||
border-radius: $radius $radius 0 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--grey-100);
|
||||
}
|
||||
|
||||
.text {
|
||||
width: 100%;
|
||||
font-size: .85rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-right: .25rem;
|
||||
|
||||
.weekday {
|
||||
color: var(--text-light);
|
||||
text-transform: capitalize;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
a.button {
|
||||
margin: 1rem;
|
||||
width: calc(100% - 2rem);
|
||||
}
|
||||
|
||||
:deep(.flatpickr-calendar) {
|
||||
margin: 0 auto 8px;
|
||||
box-shadow: none;
|
||||
}
|
||||
@media screen and (max-width: ($tablet)) {
|
||||
width: calc(100vw - 5rem);
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker__quick-select-date {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 .5rem;
|
||||
width: 100%;
|
||||
height: 2.25rem;
|
||||
color: var(--text);
|
||||
transition: all $transition;
|
||||
|
||||
&:first-child {
|
||||
border-radius: $radius $radius 0 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--grey-100);
|
||||
}
|
||||
|
||||
.text {
|
||||
width: 100%;
|
||||
font-size: .85rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-right: .25rem;
|
||||
|
||||
.weekday {
|
||||
color: var(--text-light);
|
||||
text-transform: capitalize;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker__close-button {
|
||||
margin: 1rem;
|
||||
width: calc(100% - 2rem);
|
||||
}
|
||||
|
||||
:deep(.flatpickr-calendar) {
|
||||
margin: 0 auto 8px;
|
||||
box-shadow: none;
|
||||
}
|
||||
</style>
|
|
@ -16,23 +16,23 @@
|
|||
<p class="has-text-centered has-text-grey is-italic my-5" v-if="showPreviewText">
|
||||
{{ emptyText }}
|
||||
<template v-if="isEditEnabled">
|
||||
<a @click="toggleEdit" class="d-print-none">{{ $t('input.editor.edit') }}</a>.
|
||||
<ButtonLink @click="toggleEdit" class="d-print-none">{{ $t('input.editor.edit') }}</ButtonLink>.
|
||||
</template>
|
||||
</p>
|
||||
|
||||
<ul class="actions d-print-none" v-if="bottomActions.length > 0">
|
||||
<li v-if="isEditEnabled && !showPreviewText && showSave">
|
||||
<a v-if="showEditButton" @click="toggleEdit">{{ $t('input.editor.edit') }}</a>
|
||||
<a v-else-if="isEditActive" @click="toggleEdit" class="done-edit">{{ $t('misc.save') }}</a>
|
||||
<BaseButton v-if="showEditButton" @click="toggleEdit">{{ $t('input.editor.edit') }}</BaseButton>
|
||||
<BaseButton v-else-if="isEditActive" @click="toggleEdit" class="done-edit">{{ $t('misc.save') }}</BaseButton>
|
||||
</li>
|
||||
<li v-for="(action, k) in bottomActions" :key="k">
|
||||
<a @click="action.action">{{ action.title }}</a>
|
||||
<BaseButton @click="action.action">{{ action.title }}</BaseButton>
|
||||
</li>
|
||||
</ul>
|
||||
<template v-else-if="isEditEnabled && showSave">
|
||||
<ul v-if="showEditButton" class="actions d-print-none">
|
||||
<li>
|
||||
<a @click="toggleEdit">{{ $t('input.editor.edit') }}</a>
|
||||
<BaseButton @click="toggleEdit">{{ $t('input.editor.edit') }}</BaseButton>
|
||||
</li>
|
||||
</ul>
|
||||
<x-button
|
||||
|
@ -62,10 +62,15 @@ import AttachmentService from '../../services/attachment'
|
|||
import {findCheckboxesInText} from '../../helpers/checklistFromText'
|
||||
import {createRandomID} from '@/helpers/randomId'
|
||||
|
||||
import BaseButton from '@/components/base/BaseButton.vue'
|
||||
import ButtonLink from '@/components/misc/ButtonLink.vue'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'editor',
|
||||
components: {
|
||||
VueEasymde,
|
||||
BaseButton,
|
||||
ButtonLink,
|
||||
},
|
||||
props: {
|
||||
modelValue: {
|
||||
|
|
|
@ -15,7 +15,7 @@
|
|||
<slot name="tag" :item="item">
|
||||
<span :key="`item${key}`" class="tag ml-2 mt-2">
|
||||
{{ label !== '' ? item[label] : item }}
|
||||
<a @click="() => remove(item)" class="delete is-small"></a>
|
||||
<BaseButton @click="() => remove(item)" class="delete is-small"></BaseButton>
|
||||
</span>
|
||||
</slot>
|
||||
</template>
|
||||
|
@ -37,7 +37,7 @@
|
|||
|
||||
<transition name="fade">
|
||||
<div class="search-results" :class="{'search-results-inline': inline}" v-if="searchResultsVisible">
|
||||
<button
|
||||
<BaseButton
|
||||
class="is-fullwidth"
|
||||
v-for="(data, key) in filteredSearchResults"
|
||||
:key="key"
|
||||
|
@ -54,9 +54,9 @@
|
|||
<span class="hint-text">
|
||||
{{ selectPlaceholder }}
|
||||
</span>
|
||||
</button>
|
||||
</BaseButton>
|
||||
|
||||
<button
|
||||
<BaseButton
|
||||
v-if="creatableAvailable"
|
||||
class="is-fullwidth"
|
||||
:ref="`result-${filteredSearchResults.length}`"
|
||||
|
@ -75,7 +75,7 @@
|
|||
<span class="hint-text">
|
||||
{{ createPlaceholder }}
|
||||
</span>
|
||||
</button>
|
||||
</BaseButton>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
|
@ -87,8 +87,22 @@ import {defineComponent} from 'vue'
|
|||
import {i18n} from '@/i18n'
|
||||
import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
|
||||
|
||||
import BaseButton from '@/components/base/BaseButton.vue'
|
||||
|
||||
function elementInResults(elem: string | any, label: string, query: string): boolean {
|
||||
// Don't make create available if we have an exact match in our search results.
|
||||
if (label !== '') {
|
||||
return elem[label] === query
|
||||
}
|
||||
|
||||
return elem === query
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'multiselect',
|
||||
components: {
|
||||
BaseButton,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
query: '',
|
||||
|
@ -217,14 +231,12 @@ export default defineComponent({
|
|||
)
|
||||
},
|
||||
creatableAvailable() {
|
||||
return this.creatable && this.query !== '' && !this.filteredSearchResults.some(elem => {
|
||||
// Don't make create available if we have an exact match in our search results.
|
||||
if (this.label !== '') {
|
||||
return elem[this.label] === this.query
|
||||
}
|
||||
const hasResult = this.filteredSearchResults.some(elem => elementInResults(elem, this.label, this.query))
|
||||
const hasQueryAlreadyAdded = Array.isArray(this.internalValue) && this.internalValue.some(elem => elementInResults(elem, this.label, this.query))
|
||||
|
||||
return elem === this.query
|
||||
})
|
||||
return this.creatable
|
||||
&& this.query !== ''
|
||||
&& !(hasResult || hasQueryAlreadyAdded)
|
||||
},
|
||||
filteredSearchResults() {
|
||||
if (this.multiple && this.internalValue !== null && Array.isArray(this.internalValue)) {
|
||||
|
@ -347,6 +359,12 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
if (!this.creatableAvailable) {
|
||||
// Check if there's an exact match for our search term
|
||||
const exactMatch = this.filteredSearchResults.find(elem => elementInResults(elem, this.label, this.query))
|
||||
if(exactMatch) {
|
||||
this.select(exactMatch)
|
||||
}
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
|
|
|
@ -45,7 +45,7 @@ const password = ref('')
|
|||
const isValid = ref(!props.validateInitially)
|
||||
|
||||
watch(
|
||||
props.validateInitially,
|
||||
() => props.validateInitially,
|
||||
() => props.validateInitially && validate(),
|
||||
{immediate: true},
|
||||
)
|
||||
|
|
|
@ -67,7 +67,9 @@
|
|||
<div class="field">
|
||||
<label class="label">{{ $t('task.attributes.dueDate') }}</label>
|
||||
<div class="control">
|
||||
<datepicker-with-range @dateChanged="values => setDateFilter('due_date', values)">
|
||||
<datepicker-with-range
|
||||
@dateChanged="values => setDateFilter('due_date', values)"
|
||||
v-model="filters.dueDate">
|
||||
<template #trigger="{toggle, buttonText}">
|
||||
<x-button @click.prevent.stop="toggle()" variant="secondary" :shadow="false" class="mb-2">
|
||||
{{ buttonText }}
|
||||
|
@ -79,7 +81,9 @@
|
|||
<div class="field">
|
||||
<label class="label">{{ $t('task.attributes.startDate') }}</label>
|
||||
<div class="control">
|
||||
<datepicker-with-range @dateChanged="values => setDateFilter('start_date', values)">
|
||||
<datepicker-with-range
|
||||
@dateChanged="values => setDateFilter('start_date', values)"
|
||||
v-model="filters.startDate">
|
||||
<template #trigger="{toggle, buttonText}">
|
||||
<x-button @click.prevent.stop="toggle()" variant="secondary" :shadow="false" class="mb-2">
|
||||
{{ buttonText }}
|
||||
|
@ -91,7 +95,9 @@
|
|||
<div class="field">
|
||||
<label class="label">{{ $t('task.attributes.endDate') }}</label>
|
||||
<div class="control">
|
||||
<datepicker-with-range @dateChanged="values => setDateFilter('end_date', values)">
|
||||
<datepicker-with-range
|
||||
@dateChanged="values => setDateFilter('end_date', values)"
|
||||
v-model="filters.endDate">
|
||||
<template #trigger="{toggle, buttonText}">
|
||||
<x-button @click.prevent.stop="toggle()" variant="secondary" :shadow="false" class="mb-2">
|
||||
{{ buttonText }}
|
||||
|
@ -103,7 +109,9 @@
|
|||
<div class="field">
|
||||
<label class="label">{{ $t('task.attributes.reminders') }}</label>
|
||||
<div class="control">
|
||||
<datepicker-with-range @dateChanged="values => setDateFilter('reminders', values)">
|
||||
<datepicker-with-range
|
||||
@dateChanged="values => setDateFilter('reminders', values)"
|
||||
v-model="filters.reminders">
|
||||
<template #trigger="{toggle, buttonText}">
|
||||
<x-button @click.prevent.stop="toggle()" variant="secondary" :shadow="false" class="mb-2">
|
||||
{{ buttonText }}
|
||||
|
@ -137,7 +145,8 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<template v-if="$route.name === 'filters.create' || $route.name === 'list.edit'">
|
||||
<template
|
||||
v-if="$route.name === 'filters.create' || $route.name === 'list.edit' || $route.name === 'filter.settings.edit'">
|
||||
<div class="field">
|
||||
<label class="label">{{ $t('list.lists') }}</label>
|
||||
<div class="control">
|
||||
|
@ -193,6 +202,7 @@ import EditLabels from '@/components/tasks/partials/editLabels.vue'
|
|||
|
||||
import {objectToSnakeCase} from '@/helpers/case'
|
||||
import {getDefaultParams} from '@/composables/taskList'
|
||||
import {camelCase} from 'camel-case'
|
||||
|
||||
// FIXME: merge with DEFAULT_PARAMS in taskList.js
|
||||
const DEFAULT_PARAMS = {
|
||||
|
@ -368,6 +378,8 @@ export default defineComponent({
|
|||
this.params.filter_comparator.push('less_equals')
|
||||
this.params.filter_value.push(dateTo)
|
||||
}
|
||||
|
||||
this.filters[camelCase(filterName)] = {dateFrom, dateTo}
|
||||
this.change()
|
||||
return
|
||||
}
|
||||
|
@ -397,9 +409,16 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
if (foundDateStart !== false && foundDateEnd !== false) {
|
||||
const start = new Date(this.params.filter_value[foundDateStart])
|
||||
const end = new Date(this.params.filter_value[foundDateEnd])
|
||||
this.filters[variableName] = `${start.getFullYear()}-${start.getMonth() + 1}-${start.getDate()} to ${end.getFullYear()}-${end.getMonth() + 1}-${end.getDate()}`
|
||||
const startDate = new Date(this.params.filter_value[foundDateStart])
|
||||
const endDate = new Date(this.params.filter_value[foundDateEnd])
|
||||
this.filters[variableName] = {
|
||||
dateFrom: !isNaN(startDate)
|
||||
? `${startDate.getFullYear()}-${startDate.getMonth() + 1}-${startDate.getDate()}`
|
||||
: this.params.filter_value[foundDateStart],
|
||||
dateTo: !isNaN(endDate)
|
||||
? `${endDate.getFullYear()}-${endDate.getMonth() + 1}-${endDate.getDate()}`
|
||||
: this.params.filter_value[foundDateEnd],
|
||||
}
|
||||
}
|
||||
},
|
||||
setSingleValueFilter(filterName, variableName, useVariableName = '', comparator = 'equals') {
|
||||
|
|
|
@ -15,19 +15,21 @@
|
|||
<div
|
||||
class="list-background background-fade-in"
|
||||
:class="{'is-visible': background}"
|
||||
:style="{'background-image': background !== null ? `url(${background})` : false}"></div>
|
||||
:style="{'background-image': background !== null ? `url(${background})` : undefined}"
|
||||
/>
|
||||
<div class="list-content">
|
||||
<div class="is-archived-container">
|
||||
<span class="is-archived" v-if="list.isArchived">
|
||||
{{ $t('namespace.archived') }}
|
||||
</span>
|
||||
<span
|
||||
:class="{'is-favorite': list.isFavorite, 'is-archived': list.isArchived}"
|
||||
@click.stop="toggleFavoriteList(list)"
|
||||
class="favorite">
|
||||
<BaseButton
|
||||
v-else
|
||||
:class="{'is-favorite': list.isFavorite}"
|
||||
@click.stop="toggleFavoriteList(list)"
|
||||
class="favorite"
|
||||
>
|
||||
<icon :icon="list.isFavorite ? 'star' : ['far', 'star']"/>
|
||||
</span>
|
||||
</div>
|
||||
</BaseButton>
|
||||
|
||||
<div class="title">{{ list.title }}</div>
|
||||
</div>
|
||||
</router-link>
|
||||
|
@ -43,6 +45,8 @@ import {getBlobFromBlurHash} from '@/helpers/getBlobFromBlurHash'
|
|||
import {colorIsDark} from '@/helpers/color/colorIsDark'
|
||||
import ListModel from '@/models/list'
|
||||
|
||||
import BaseButton from '@/components/base/BaseButton.vue'
|
||||
|
||||
const background = ref<string | null>(null)
|
||||
const backgroundLoading = ref(false)
|
||||
const blurHashUrl = ref('')
|
||||
|
@ -109,13 +113,14 @@ function toggleFavoriteList(list: ListModel) {
|
|||
color: var(--grey-100);
|
||||
}
|
||||
|
||||
&.has-background, .list-background {
|
||||
&.has-background,
|
||||
.list-background {
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
&.has-background .list-content .title {
|
||||
&.has-background .title {
|
||||
text-shadow: 0 0 10px var(--black), 1px 1px 5px var(--grey-700), -1px -1px 5px var(--grey-700);
|
||||
color: var(--white);
|
||||
}
|
||||
|
@ -176,23 +181,35 @@ function toggleFavoriteList(list: ListModel) {
|
|||
|
||||
.list-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
padding: 1rem;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.is-archived-container {
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
|
||||
.is-archived {
|
||||
font-size: .75rem;
|
||||
float: left;
|
||||
.is-archived {
|
||||
font-size: .75rem;
|
||||
}
|
||||
|
||||
.favorite {
|
||||
margin-left: auto;
|
||||
transition: opacity $transition, color $transition;
|
||||
opacity: 0;
|
||||
display: block;
|
||||
|
||||
&:hover,
|
||||
&.is-favorite {
|
||||
color: var(--warning);
|
||||
}
|
||||
}
|
||||
|
||||
.favorite.is-favorite,
|
||||
&:hover .favorite {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.title {
|
||||
align-self: flex-end;
|
||||
font-family: $vikunja-font;
|
||||
|
@ -209,30 +226,6 @@ function toggleFavoriteList(list: ListModel) {
|
|||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.favorite {
|
||||
transition: opacity $transition, color $transition;
|
||||
opacity: 0;
|
||||
|
||||
&:hover {
|
||||
color: var(--warning);
|
||||
}
|
||||
|
||||
&.is-archived {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.is-favorite {
|
||||
display: inline-block;
|
||||
opacity: 1;
|
||||
color: var(--warning);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .favorite {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -0,0 +1,17 @@
|
|||
<template>
|
||||
<BaseButton class="button-link"><slot/></BaseButton>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import BaseButton from '@/components/base/BaseButton.vue'
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.button-link {
|
||||
color: var(--link);
|
||||
|
||||
&:hover {
|
||||
color: var(--link-hover);
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -27,7 +27,7 @@
|
|||
<span class="url" v-tooltip="apiUrl"> {{ apiDomain }} </span>
|
||||
</i18n-t>
|
||||
<br/>
|
||||
<a @click="() => (configureApi = true)">{{ $t('apiConfig.change') }}</a>
|
||||
<ButtonLink class="api-config__change-button" @click="() => (configureApi = true)">{{ $t('apiConfig.change') }}</ButtonLink>
|
||||
</div>
|
||||
|
||||
<message variant="success" v-if="successMsg !== '' && errorMsg === ''" class="mt-2">
|
||||
|
@ -48,6 +48,7 @@ import {checkAndSetApiUrl} from '@/helpers/checkAndSetApiUrl'
|
|||
import {success} from '@/message'
|
||||
|
||||
import Message from '@/components/misc/message.vue'
|
||||
import ButtonLink from '@/components/misc/ButtonLink.vue'
|
||||
|
||||
const props = defineProps({
|
||||
configureOpen: {
|
||||
|
@ -117,4 +118,9 @@ async function setApiUrl() {
|
|||
.url {
|
||||
border-bottom: 1px dashed var(--primary);
|
||||
}
|
||||
|
||||
.api-config__change-button {
|
||||
display: inline-block;
|
||||
color: var(--link);
|
||||
}
|
||||
</style>
|
|
@ -4,7 +4,7 @@
|
|||
<p class="card-header-title">
|
||||
{{ title }}
|
||||
</p>
|
||||
<a
|
||||
<BaseButton
|
||||
v-if="hasClose"
|
||||
class="card-header-icon"
|
||||
:aria-label="$t('misc.close')"
|
||||
|
@ -14,7 +14,7 @@
|
|||
<span class="icon">
|
||||
<icon :icon="closeIcon"/>
|
||||
</span>
|
||||
</a>
|
||||
</BaseButton>
|
||||
</header>
|
||||
<div class="card-content loader-container" :class="{'p-0': !padding, 'is-loading': loading}">
|
||||
<div :class="{'content': hasContent}">
|
||||
|
@ -25,6 +25,8 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import BaseButton from '@/components/base/BaseButton.vue'
|
||||
|
||||
defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
|
|
|
@ -1,14 +1,15 @@
|
|||
<template>
|
||||
<message variant="danger">
|
||||
<i18n-t keypath="loadingError.failed">
|
||||
<a @click="reload">{{ $t('loadingError.tryAgain') }}</a>
|
||||
<a href="https://vikunja.io/contact/" rel="noreferrer noopener nofollow" target="_blank">{{ $t('loadingError.contact') }}</a>
|
||||
<ButtonLink @click="reload">{{ $t('loadingError.tryAgain') }}</ButtonLink>
|
||||
<ButtonLink href="https://vikunja.io/contact/">{{ $t('loadingError.contact') }}</ButtonLink>
|
||||
</i18n-t>
|
||||
</message>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Message from '@/components/misc/message.vue'
|
||||
import ButtonLink from '@/components/misc/ButtonLink.vue'
|
||||
|
||||
function reload() {
|
||||
window.location.reload()
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import {RouteLocation} from 'vue-router'
|
||||
import type {RouteLocation} from 'vue-router'
|
||||
|
||||
import {isAppleDevice} from '@/helpers/isAppleDevice'
|
||||
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<div class="legal-links">
|
||||
<a :href="imprintUrl" rel="noreferrer noopener nofollow" target="_blank" v-if="imprintUrl">{{ $t('navigation.imprint') }}</a>
|
||||
<BaseButton :href="imprintUrl" v-if="imprintUrl">{{ $t('navigation.imprint') }}</BaseButton>
|
||||
<span v-if="imprintUrl && privacyPolicyUrl"> | </span>
|
||||
<a :href="privacyPolicyUrl" rel="noreferrer noopener nofollow" target="_blank" v-if="privacyPolicyUrl">{{ $t('navigation.privacy') }}</a>
|
||||
<BaseButton :href="privacyPolicyUrl" v-if="privacyPolicyUrl">{{ $t('navigation.privacy') }}</BaseButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -10,6 +10,8 @@
|
|||
import {computed} from 'vue'
|
||||
import {useStore} from 'vuex'
|
||||
|
||||
import BaseButton from '@/components/base/BaseButton.vue'
|
||||
|
||||
const store = useStore()
|
||||
|
||||
const imprintUrl = computed(() => store.state.config.legal.imprintUrl)
|
||||
|
|
|
@ -6,10 +6,11 @@
|
|||
v-if="enabled"
|
||||
class="modal-mask"
|
||||
:class="[
|
||||
{ 'has-overflow': overflow },
|
||||
variant,
|
||||
]"
|
||||
{ 'has-overflow': overflow },
|
||||
variant,
|
||||
]"
|
||||
ref="modal"
|
||||
v-bind="attrs"
|
||||
>
|
||||
<div
|
||||
class="modal-container"
|
||||
|
@ -62,11 +63,18 @@
|
|||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
inheritAttrs: false,
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import BaseButton from '@/components/base/BaseButton.vue'
|
||||
import {onUnmounted, ref, watch} from 'vue'
|
||||
import {onUnmounted, ref, useAttrs, watch} from 'vue'
|
||||
import {useScrollLock} from '@vueuse/core'
|
||||
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
enabled?: boolean,
|
||||
overflow?: boolean,
|
||||
|
@ -81,6 +89,8 @@ const props = withDefaults(defineProps<{
|
|||
|
||||
defineEmits(['close', 'submit'])
|
||||
|
||||
const attrs = useAttrs()
|
||||
|
||||
const modal = ref<HTMLElement | null>(null)
|
||||
const scrollLock = useScrollLock(modal)
|
||||
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<notifications position="bottom left" :max="2" class="global-notification">
|
||||
<template #body="{ item, close }">
|
||||
<!-- FIXME: overlay whole notification with button and add event listener on that button instead -->
|
||||
<div
|
||||
:class="[
|
||||
'vue-notification-template',
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<div class="notifications">
|
||||
<div class="is-flex is-justify-content-center">
|
||||
<a @click.stop="showNotifications = !showNotifications" class="trigger-button">
|
||||
<BaseButton @click.stop="showNotifications = !showNotifications" class="trigger-button">
|
||||
<span class="unread-indicator" v-if="unreadNotifications > 0"></span>
|
||||
<icon icon="bell"/>
|
||||
</a>
|
||||
</BaseButton>
|
||||
</div>
|
||||
|
||||
<transition name="fade">
|
||||
|
@ -26,9 +26,9 @@
|
|||
<span class="has-text-weight-bold mr-1" v-if="n.notification.doer">
|
||||
{{ n.notification.doer.getDisplayName() }}
|
||||
</span>
|
||||
<a @click="() => to(n, index)()">
|
||||
<BaseButton @click="() => to(n, index)()">
|
||||
{{ n.toText(userInfo) }}
|
||||
</a>
|
||||
</BaseButton>
|
||||
</div>
|
||||
<span class="created" v-tooltip="formatDate(n.created)">
|
||||
{{ formatDateSince(n.created) }}
|
||||
|
@ -50,6 +50,7 @@
|
|||
import {computed, onMounted, onUnmounted, ref} from 'vue'
|
||||
|
||||
import NotificationService from '@/services/notification'
|
||||
import BaseButton from '@/components/base/BaseButton.vue'
|
||||
import User from '@/components/misc/user.vue'
|
||||
import names from '@/models/constants/notificationNames.json'
|
||||
import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
|
||||
|
|
|
@ -32,7 +32,7 @@
|
|||
{{ r.title }}
|
||||
</span>
|
||||
<div class="result-items">
|
||||
<button
|
||||
<BaseButton
|
||||
v-for="(i, key) in r.items"
|
||||
:key="key"
|
||||
:ref="`result-${k}_${key}`"
|
||||
|
@ -44,7 +44,7 @@
|
|||
:class="{'is-strikethrough': i.done}"
|
||||
>
|
||||
{{ i.title }}
|
||||
</button>
|
||||
</BaseButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -63,6 +63,8 @@ import TeamModel from '@/models/team'
|
|||
|
||||
import {CURRENT_LIST, LOADING, LOADING_MODULE, QUICK_ACTIONS_ACTIVE} from '@/store/mutation-types'
|
||||
import ListModel from '@/models/list'
|
||||
|
||||
import BaseButton from '@/components/base/BaseButton.vue'
|
||||
import QuickAddMagic from '@/components/tasks/partials/quick-add-magic.vue'
|
||||
import {getHistory} from '@/modules/listHistory'
|
||||
import {parseTaskText, PrefixMode} from '@/modules/parseTaskText'
|
||||
|
@ -86,7 +88,10 @@ const SEARCH_MODE_TEAMS = 'teams'
|
|||
|
||||
export default defineComponent({
|
||||
name: 'quick-actions',
|
||||
components: {QuickAddMagic},
|
||||
components: {
|
||||
BaseButton,
|
||||
QuickAddMagic,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
query: '',
|
||||
|
|
|
@ -16,7 +16,7 @@
|
|||
class="month"
|
||||
v-for="(m, mk) in days[yk]"
|
||||
>
|
||||
{{ formatYear(new Date(`${yk}-${parseInt(mk) + 1}-01`)) }}
|
||||
{{ formatMonthAndYear(yk, parseInt(mk) + 1) }}
|
||||
<div class="days">
|
||||
<div
|
||||
:class="{ today: d.toDateString() === now.toDateString() }"
|
||||
|
@ -96,9 +96,10 @@
|
|||
</span>
|
||||
<priority-label :priority="t.priority" :done="t.done"/>
|
||||
<!-- using the key here forces vue to use the updated version model and not the response returned by the api -->
|
||||
<a @click="editTask(theTasks[k])" class="edit-toggle">
|
||||
<!-- FIXME: add label -->
|
||||
<BaseButton @click="editTask(theTasks[k])" class="edit-toggle">
|
||||
<icon icon="pen"/>
|
||||
</a>
|
||||
</BaseButton>
|
||||
</VueDragResize>
|
||||
</div>
|
||||
<template v-if="showTaskswithoutDates">
|
||||
|
@ -184,12 +185,14 @@ import TaskCollectionService from '../../services/taskCollection'
|
|||
import {mapState} from 'vuex'
|
||||
import Rights from '../../models/constants/rights.json'
|
||||
import FilterPopup from '@/components/list/partials/filter-popup.vue'
|
||||
import BaseButton from '@/components/base/BaseButton.vue'
|
||||
|
||||
import {colorIsDark} from '@/helpers/color/colorIsDark'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'GanttChart',
|
||||
components: {
|
||||
BaseButton,
|
||||
FilterPopup,
|
||||
PriorityLabel,
|
||||
EditTask,
|
||||
|
@ -433,7 +436,9 @@ export default defineComponent({
|
|||
this.newTaskTitle = ''
|
||||
this.hideCrateNewTask()
|
||||
},
|
||||
formatYear(date) {
|
||||
formatMonthAndYear(year, month) {
|
||||
month = month < 10 ? '0' + month : month
|
||||
const date = new Date(`${year}-${month}-01`)
|
||||
return this.format(date, 'MMMM, yyyy')
|
||||
},
|
||||
},
|
||||
|
|
|
@ -26,6 +26,9 @@
|
|||
</progress>
|
||||
|
||||
<div class="files" v-if="attachments.length > 0">
|
||||
<!-- FIXME: don't use a for element that wraps other links / buttons
|
||||
Instead: overlay element with button that is inside.
|
||||
-->
|
||||
<a
|
||||
class="attachment"
|
||||
v-for="a in attachments"
|
||||
|
@ -53,25 +56,28 @@
|
|||
</span>
|
||||
</p>
|
||||
<p>
|
||||
<a
|
||||
<BaseButton
|
||||
class="attachment-info-meta-button"
|
||||
@click.prevent.stop="downloadAttachment(a)"
|
||||
v-tooltip="$t('task.attachment.downloadTooltip')"
|
||||
>
|
||||
{{ $t('misc.download') }}
|
||||
</a>
|
||||
<a
|
||||
</BaseButton>
|
||||
<BaseButton
|
||||
class="attachment-info-meta-button"
|
||||
@click.stop="copyUrl(a)"
|
||||
v-tooltip="$t('task.attachment.copyUrlTooltip')"
|
||||
>
|
||||
{{ $t('task.attachment.copyUrl') }}
|
||||
</a>
|
||||
<a
|
||||
@click.prevent.stop="() => {attachmentToDelete = a; showDeleteModal = true}"
|
||||
</BaseButton>
|
||||
<BaseButton
|
||||
v-if="editEnabled"
|
||||
class="attachment-info-meta-button"
|
||||
@click.prevent.stop="() => {attachmentToDelete = a; showDeleteModal = true}"
|
||||
v-tooltip="$t('task.attachment.deleteTooltip')"
|
||||
>
|
||||
{{ $t('misc.delete') }}
|
||||
</a>
|
||||
</BaseButton>
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
|
@ -148,9 +154,12 @@ import {mapState} from 'vuex'
|
|||
import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
|
||||
import { uploadFiles, generateAttachmentUrl } from '@/helpers/attachments'
|
||||
|
||||
import BaseButton from '@/components/base/BaseButton'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'attachments',
|
||||
components: {
|
||||
BaseButton,
|
||||
User,
|
||||
},
|
||||
data() {
|
||||
|
@ -297,7 +306,7 @@ export default defineComponent({
|
|||
display: flex;
|
||||
|
||||
> span:not(:last-child):after,
|
||||
> a:not(:last-child):after {
|
||||
> button:not(:last-child):after {
|
||||
content: '·';
|
||||
padding: 0 .25rem;
|
||||
}
|
||||
|
@ -377,7 +386,7 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
> span:not(:last-child):after,
|
||||
> a:not(:last-child):after {
|
||||
> button:not(:last-child):after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
@ -387,6 +396,10 @@ export default defineComponent({
|
|||
}
|
||||
}
|
||||
|
||||
.attachment-info-meta-button {
|
||||
color: var(--link);
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
from,
|
||||
20%,
|
||||
|
|
|
@ -18,9 +18,9 @@
|
|||
<template #tag="{item: user}">
|
||||
<span class="assignee">
|
||||
<user :avatar-size="32" :show-username="false" :user="user"/>
|
||||
<a @click="removeAssignee(user)" class="remove-assignee" v-if="!disabled">
|
||||
<BaseButton @click="removeAssignee(user)" class="remove-assignee" v-if="!disabled">
|
||||
<icon icon="times"/>
|
||||
</a>
|
||||
</BaseButton>
|
||||
</span>
|
||||
</template>
|
||||
</Multiselect>
|
||||
|
@ -34,6 +34,7 @@ import {useI18n} from 'vue-i18n'
|
|||
|
||||
import User from '@/components/misc/user.vue'
|
||||
import Multiselect from '@/components/input/multiselect.vue'
|
||||
import BaseButton from '@/components/base/BaseButton.vue'
|
||||
|
||||
import {includesById} from '@/helpers/utils'
|
||||
import UserModel from '@/models/user'
|
||||
|
@ -95,7 +96,7 @@ async function removeAssignee(user: UserModel) {
|
|||
success({message: t('task.assignee.unassignSuccess')})
|
||||
}
|
||||
|
||||
async function findUser(query) {
|
||||
async function findUser(query: string) {
|
||||
if (query === '') {
|
||||
clearAllFoundUsers()
|
||||
return
|
||||
|
|
|
@ -19,7 +19,7 @@
|
|||
:style="{'background': label.hexColor, 'color': label.textColor}"
|
||||
class="tag">
|
||||
<span>{{ label.title }}</span>
|
||||
<button type="button" v-cy="'taskDetail.removeLabel'" @click="removeLabel(label)" class="delete is-small" />
|
||||
<BaseButton v-cy="'taskDetail.removeLabel'" @click="removeLabel(label)" class="delete is-small" />
|
||||
</span>
|
||||
</template>
|
||||
<template #searchResult="{option}">
|
||||
|
@ -47,6 +47,7 @@ import LabelModel from '@/models/label'
|
|||
import LabelTaskService from '@/services/labelTask'
|
||||
import {success} from '@/message'
|
||||
|
||||
import BaseButton from '@/components/base/BaseButton.vue'
|
||||
import Multiselect from '@/components/input/multiselect.vue'
|
||||
|
||||
const props = defineProps({
|
||||
|
|
|
@ -4,9 +4,9 @@
|
|||
:class="{
|
||||
'is-loading': loadingInternal || loading,
|
||||
'draggable': !(loadingInternal || loading),
|
||||
'has-light-text': task.getHexColor() !== TASK_DEFAULT_COLOR && !colorIsDark(task.getHexColor()),
|
||||
'has-light-text': color !== TASK_DEFAULT_COLOR && !colorIsDark(color),
|
||||
}"
|
||||
:style="{'background-color': task.hexColor !== '#' && task.hexColor !== '' ? task.hexColor : false}"
|
||||
:style="{'background-color': color !== TASK_DEFAULT_COLOR ? color : false}"
|
||||
@click.exact="openTaskDetail()"
|
||||
@click.ctrl="() => toggleTaskDone(task)"
|
||||
@click.meta="() => toggleTaskDone(task)"
|
||||
|
@ -103,6 +103,13 @@ export default defineComponent({
|
|||
default: false,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
color() {
|
||||
return this.task.getHexColor
|
||||
? this.task.getHexColor()
|
||||
: TASK_DEFAULT_COLOR
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
colorIsDark,
|
||||
async toggleTaskDone(task) {
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
<div v-if="available">
|
||||
<p class="help has-text-grey">
|
||||
{{ $t('task.quickAddMagic.hint') }}.
|
||||
<a @click="() => visible = true">{{ $t('task.quickAddMagic.what') }}</a>
|
||||
<ButtonLink @click="() => visible = true">{{ $t('task.quickAddMagic.what') }}</ButtonLink>
|
||||
</p>
|
||||
<modal
|
||||
@close="() => visible = false"
|
||||
|
@ -42,6 +42,10 @@
|
|||
{{ $t('task.quickAddMagic.list1', {prefix: prefixes.list}) }}
|
||||
{{ $t('task.quickAddMagic.list2') }}
|
||||
</p>
|
||||
<p>
|
||||
{{ $t('task.quickAddMagic.list3') }}
|
||||
{{ $t('task.quickAddMagic.list4', {prefix: prefixes.list}) }}
|
||||
</p>
|
||||
|
||||
<h3>{{ $t('task.quickAddMagic.dateAndTime') }}</h3>
|
||||
<p>
|
||||
|
@ -86,13 +90,16 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref, computed} from 'vue'
|
||||
|
||||
import ButtonLink from '@/components/misc/ButtonLink.vue'
|
||||
|
||||
import {getQuickAddMagicMode} from '@/helpers/quickAddMagicMode'
|
||||
import {PREFIXES} from '@/modules/parseTaskText'
|
||||
import {ref, computed} from 'vue'
|
||||
|
||||
const visible = ref(false)
|
||||
const mode = ref(getQuickAddMagicMode())
|
||||
|
||||
const available = computed(() => mode.value !== 'disabled')
|
||||
const prefixes = computed(() =>PREFIXES[mode.value])
|
||||
const prefixes = computed(() => PREFIXES[mode.value])
|
||||
</script>
|
||||
|
|
|
@ -35,6 +35,7 @@
|
|||
:creatable="true"
|
||||
:create-placeholder="$t('task.relation.createPlaceholder')"
|
||||
@create="createAndRelateTask"
|
||||
@select="addTaskRelation"
|
||||
>
|
||||
<template #searchResult="props">
|
||||
<span v-if="typeof props.option !== 'string'" class="search-result">
|
||||
|
@ -103,12 +104,13 @@
|
|||
</span>
|
||||
{{ t.title }}
|
||||
</router-link>
|
||||
<a
|
||||
<BaseButton
|
||||
v-if="editEnabled"
|
||||
@click="() => {showDeleteModal = true; relationToDelete = {relationKind: rts.kind, otherTaskId: t.id}}"
|
||||
class="remove"
|
||||
v-if="editEnabled">
|
||||
>
|
||||
<icon icon="trash-alt"/>
|
||||
</a>
|
||||
</BaseButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -145,6 +147,7 @@ import TaskRelationService from '../../../services/taskRelation'
|
|||
import relationKinds from '../../../models/constants/relationKinds'
|
||||
import TaskRelationModel from '../../../models/taskRelation'
|
||||
|
||||
import BaseButton from '@/components/base/BaseButton.vue'
|
||||
import Multiselect from '@/components/input/multiselect.vue'
|
||||
|
||||
export default defineComponent({
|
||||
|
@ -166,6 +169,7 @@ export default defineComponent({
|
|||
}
|
||||
},
|
||||
components: {
|
||||
BaseButton,
|
||||
Multiselect,
|
||||
},
|
||||
props: {
|
||||
|
|
|
@ -11,9 +11,9 @@
|
|||
:disabled="disabled"
|
||||
@close-on-change="() => addReminderDate(index)"
|
||||
/>
|
||||
<a @click="removeReminderByIndex(index)" v-if="!disabled" class="remove">
|
||||
<BaseButton @click="removeReminderByIndex(index)" v-if="!disabled" class="remove">
|
||||
<icon icon="times"></icon>
|
||||
</a>
|
||||
</BaseButton>
|
||||
</div>
|
||||
<div class="reminder-input" v-if="!disabled">
|
||||
<Datepicker
|
||||
|
@ -28,10 +28,13 @@
|
|||
<script setup lang="ts">
|
||||
import {PropType, ref, onMounted, watch} from 'vue'
|
||||
|
||||
import BaseButton from '@/components/base/BaseButton.vue'
|
||||
import Datepicker from '@/components/input/datepicker.vue'
|
||||
|
||||
type Reminder = Date | string
|
||||
|
||||
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Array as PropType<Reminder[]>,
|
||||
|
@ -115,7 +118,7 @@ function removeReminderByIndex(index: number) {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&.overdue :deep(.datepicker a.show) {
|
||||
&.overdue :deep(.datepicker .show) {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
|
@ -123,7 +126,7 @@ function removeReminderByIndex(index: number) {
|
|||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
a.remove {
|
||||
.remove {
|
||||
color: var(--danger);
|
||||
padding-left: .5rem;
|
||||
}
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div :class="{'is-loading': taskService.loading}" class="task loader-container">
|
||||
<fancycheckbox :disabled="isArchived || disabled" @change="markAsDone" v-model="task.done"/>
|
||||
<fancycheckbox :disabled="(isArchived || disabled) && !canMarkAsDone" @change="markAsDone" v-model="task.done"/>
|
||||
<span
|
||||
v-if="showListColor && listColor !== ''"
|
||||
:style="{backgroundColor: listColor }"
|
||||
|
@ -39,17 +39,21 @@
|
|||
:user="a"
|
||||
v-for="(a, i) in task.assignees"
|
||||
/>
|
||||
<time
|
||||
:datetime="formatISO(task.dueDate)"
|
||||
:class="{'overdue': task.dueDate <= new Date() && !task.done}"
|
||||
class="is-italic"
|
||||
@click.prevent.stop="showDefer = !showDefer"
|
||||
<BaseButton
|
||||
v-if="+new Date(task.dueDate) > 0"
|
||||
class="dueDate"
|
||||
@click.prevent.stop="showDefer = !showDefer"
|
||||
v-tooltip="formatDate(task.dueDate)"
|
||||
:aria-expanded="showDefer ? 'true' : 'false'"
|
||||
>
|
||||
- {{ $t('task.detail.due', {at: formatDateSince(task.dueDate)}) }}
|
||||
</time>
|
||||
<time
|
||||
:datetime="formatISO(task.dueDate)"
|
||||
:class="{'overdue': task.dueDate <= new Date() && !task.done}"
|
||||
class="is-italic"
|
||||
:aria-expanded="showDefer ? 'true' : 'false'"
|
||||
>
|
||||
- {{ $t('task.detail.due', {at: formatDateSince(task.dueDate)}) }}
|
||||
</time>
|
||||
</BaseButton>
|
||||
<transition name="fade">
|
||||
<defer-task v-if="+new Date(task.dueDate) > 0 && showDefer" v-model="task" ref="deferDueDate"/>
|
||||
</transition>
|
||||
|
@ -80,13 +84,13 @@
|
|||
v-tooltip="$t('task.detail.belongsToList', {list: $store.getters['lists/getListById'](task.listId).title})">
|
||||
{{ $store.getters['lists/getListById'](task.listId).title }}
|
||||
</router-link>
|
||||
<a
|
||||
<BaseButton
|
||||
:class="{'is-favorite': task.isFavorite}"
|
||||
@click="toggleFavorite"
|
||||
class="favorite">
|
||||
<icon icon="star" v-if="task.isFavorite"/>
|
||||
<icon :icon="['far', 'star']" v-else/>
|
||||
</a>
|
||||
</BaseButton>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -99,6 +103,7 @@ import PriorityLabel from './priorityLabel'
|
|||
import TaskService from '../../../services/task'
|
||||
import Labels from './labels'
|
||||
import User from '../../misc/user'
|
||||
import BaseButton from '@/components/base/BaseButton.vue'
|
||||
import Fancycheckbox from '../../input/fancycheckbox'
|
||||
import DeferTask from './defer-task'
|
||||
import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
|
||||
|
@ -115,6 +120,7 @@ export default defineComponent({
|
|||
}
|
||||
},
|
||||
components: {
|
||||
BaseButton,
|
||||
ChecklistSummary,
|
||||
DeferTask,
|
||||
Fancycheckbox,
|
||||
|
@ -143,6 +149,10 @@ export default defineComponent({
|
|||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
canMarkAsDone: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
emits: ['task-updated'],
|
||||
watch: {
|
||||
|
@ -249,6 +259,11 @@ export default defineComponent({
|
|||
display: inline-block;
|
||||
flex: 1 0 50%;
|
||||
|
||||
.dueDate {
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.overdue {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { ref, shallowReactive, watch, computed } from 'vue'
|
||||
import {ref, shallowReactive, watch, computed} from 'vue'
|
||||
import {useRoute} from 'vue-router'
|
||||
|
||||
import TaskCollectionService from '@/services/taskCollection'
|
||||
|
@ -20,14 +20,13 @@ const SORT_BY_DEFAULT = {
|
|||
/**
|
||||
* This mixin provides a base set of methods and properties to get tasks on a list.
|
||||
*/
|
||||
export function useTaskList(listId) {
|
||||
export function useTaskList(listId, sortByDefault = SORT_BY_DEFAULT) {
|
||||
const params = ref({...getDefaultParams()})
|
||||
|
||||
const search = ref('')
|
||||
const page = ref(1)
|
||||
|
||||
const sortBy = ref({ ...SORT_BY_DEFAULT })
|
||||
|
||||
const sortBy = ref({ ...sortByDefault })
|
||||
|
||||
// This makes sure an id sort order is always sorted last.
|
||||
// When tasks would be sorted first by id and then by whatever else was specified, the id sort takes
|
||||
|
@ -108,5 +107,6 @@ export function useTaskList(listId) {
|
|||
loadTasks,
|
||||
searchTerm: search,
|
||||
params,
|
||||
sortByParam: sortBy,
|
||||
}
|
||||
}
|
|
@ -1,5 +1,6 @@
|
|||
import {computed, watch, readonly} from 'vue'
|
||||
import {useStorage, createSharedComposable, BasicColorSchema, usePreferredColorScheme, tryOnMounted} from '@vueuse/core'
|
||||
import {useStorage, createSharedComposable, usePreferredColorScheme, tryOnMounted} from '@vueuse/core'
|
||||
import type {BasicColorSchema} from '@vueuse/core'
|
||||
|
||||
const STORAGE_KEY = 'color-scheme'
|
||||
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import {ref, computed, Ref} from 'vue'
|
||||
import {ref, computed} from 'vue'
|
||||
import {useStore} from 'vuex'
|
||||
|
||||
export function useNameSpaceSearch() {
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import {ref} from 'vue'
|
||||
import {useOnline as useNetworkOnline, ConfigurableWindow} from '@vueuse/core'
|
||||
|
||||
import {useOnline as useNetworkOnline} from '@vueuse/core'
|
||||
import type {ConfigurableWindow} from '@vueuse/core'
|
||||
|
||||
export function useOnline(options?: ConfigurableWindow) {
|
||||
const fakeOnlineState = !!import.meta.env.VITE_IS_ONLINE
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import { computed, watchEffect } from 'vue'
|
||||
import { setTitle } from '@/helpers/setTitle'
|
||||
import type { ComputedGetter } from 'vue'
|
||||
|
||||
import { ComputedGetter } from 'vue'
|
||||
import { setTitle } from '@/helpers/setTitle'
|
||||
|
||||
export function useTitle(titleGetter: ComputedGetter<string>) {
|
||||
const titleRef = computed(titleGetter)
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import {Directive} from 'vue'
|
||||
import type {Directive} from 'vue'
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import {Directive} from 'vue'
|
||||
import type {Directive} from 'vue'
|
||||
import {install, uninstall} from '@github/hotkey'
|
||||
import {isAppleDevice} from '@/helpers/isAppleDevice'
|
||||
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import {i18n} from '@/i18n'
|
||||
|
||||
import ListModal from '@/modals/list'
|
||||
import type ListModal from '@/models/list'
|
||||
|
||||
export function getListTitle(l: ListModal) {
|
||||
if (l.id === -1) {
|
||||
|
|
|
@ -222,8 +222,8 @@ export const getDateFromTextIn = (text: string, now: Date = new Date()) => {
|
|||
}
|
||||
|
||||
const getDateFromWeekday = (text: string): dateFoundResult => {
|
||||
const matcher: RegExp = / (next )?(monday|mon|tuesday|tue|wednesday|wed|thursday|thu|friday|fri|saturday|sat|sunday|sun)($| )/ig
|
||||
const results: string[] | null = matcher.exec(text)
|
||||
const matcher: RegExp = / (next )?(monday|mon|tuesday|tue|wednesday|wed|thursday|thu|friday|fri|saturday|sat|sunday|sun)($| )/g
|
||||
const results: string[] | null = matcher.exec(text.toLowerCase()) // The i modifier does not seem to work.
|
||||
if (results === null) {
|
||||
return {
|
||||
foundText: null,
|
||||
|
|
|
@ -793,13 +793,15 @@
|
|||
"multiple": "You can use this multiple times.",
|
||||
"label1": "To add a label, simply prefix the name of the label with {prefix}.",
|
||||
"label2": "Vikunja will first check if the label already exist and create it if not.",
|
||||
"label3": "To use spaces, simply add a \" around the label name.",
|
||||
"label3": "To use spaces, simply add a \" or ' around the label name.",
|
||||
"label4": "For example: {prefix}\"Label with spaces\".",
|
||||
"priority1": "To set a task's priority, add a number 1-5, prefixed with a {prefix}.",
|
||||
"priority2": "The higher the number, the higher the priority.",
|
||||
"assignees": "To directly assign the task to a user, add their username prefixed with {prefix} to the task.",
|
||||
"list1": "To set a list for the task to appear in, enter its name prefixed with {prefix}.",
|
||||
"list2": "This will return an error if the list does not exist.",
|
||||
"list3": "To use spaces, simply add a \" or ' around the list name.",
|
||||
"list4": "For example: {prefix}\"List with spaces\".",
|
||||
"dateAndTime": "Date and time",
|
||||
"date": "Any date will be used as the due date of the new task. You can use dates in any of these formats:",
|
||||
"dateWeekday": "any weekday, will use the next date with that date",
|
||||
|
|
|
@ -77,7 +77,7 @@
|
|||
"newName": "Il nuovo nome",
|
||||
"savedSuccess": "Impostazioni salvate con successo.",
|
||||
"emailReminders": "Inviami promemoria per le attività via e-mail",
|
||||
"overdueReminders": "Send me a summary of my undone overdue tasks every day",
|
||||
"overdueReminders": "Inviami ogni giorno un riassunto delle attività in ritardo",
|
||||
"discoverableByName": "Lascia che altri utenti mi trovino cercando il mio nome",
|
||||
"discoverableByEmail": "Lascia che altri utenti mi trovino quando cercano il mio indirizzo e-mail completo",
|
||||
"playSoundWhenDone": "Riproduci un suono quando le attività vengono segnate come fatte",
|
||||
|
@ -87,7 +87,7 @@
|
|||
"language": "Lingua",
|
||||
"defaultList": "Lista predefinita",
|
||||
"timezone": "Fuso Orario",
|
||||
"overdueTasksRemindersTime": "Overdue tasks reminder email time"
|
||||
"overdueTasksRemindersTime": "Orario email del promemoria attività in ritardo"
|
||||
},
|
||||
"totp": {
|
||||
"title": "Autenticazione a due fattori",
|
||||
|
@ -728,16 +728,16 @@
|
|||
"removeSuccess": "Etichetta eliminata.",
|
||||
"addCreateSuccess": "Etichetta creata e aggiunta.",
|
||||
"delete": {
|
||||
"header": "Delete this label",
|
||||
"text1": "Are you sure you want to delete this label?",
|
||||
"text2": "This will remove it from all tasks and cannot be restored."
|
||||
"header": "Elimina etichetta",
|
||||
"text1": "Sei sicuro di voler eliminare questa etichetta?",
|
||||
"text2": "Verrà rimossa da tutte le attività e non potrà essere ripristinata."
|
||||
}
|
||||
},
|
||||
"priority": {
|
||||
"unset": "Azzera",
|
||||
"low": "Bassa",
|
||||
"medium": "Media",
|
||||
"high": "High",
|
||||
"high": "Alta",
|
||||
"urgent": "Urgente",
|
||||
"doNow": "FARE ORA"
|
||||
},
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import {Document, SimpleDocumentSearchResultSetUnit} from 'flexsearch'
|
||||
import {Document} from 'flexsearch'
|
||||
|
||||
export interface withId {
|
||||
id: number,
|
||||
|
|
20
src/main.ts
20
src/main.ts
|
@ -5,16 +5,8 @@ import router from './router'
|
|||
|
||||
import {error, success} from './message'
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
API_URL: string;
|
||||
SENTRY_ENABLED: boolean;
|
||||
SENTRY_DSN: string;
|
||||
}
|
||||
}
|
||||
|
||||
import {formatDate, formatDateShort, formatDateLong, formatDateSince, formatISO} from '@/helpers/time/formatDate'
|
||||
// @ts-ignore
|
||||
|
||||
import {VERSION} from './version.json'
|
||||
|
||||
// Notifications
|
||||
|
@ -28,6 +20,14 @@ import {store} from './store'
|
|||
// i18n
|
||||
import {i18n} from './i18n'
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
API_URL: string;
|
||||
SENTRY_ENABLED: boolean;
|
||||
SENTRY_DSN: string;
|
||||
}
|
||||
}
|
||||
|
||||
console.info(`Vikunja frontend version ${VERSION}`)
|
||||
|
||||
// Check if we have an api url in local storage and use it if that's the case
|
||||
|
@ -95,7 +95,7 @@ app.config.errorHandler = (err, vm, info) => {
|
|||
}
|
||||
|
||||
if (import.meta.env.DEV) {
|
||||
app.config.warnHandler = (msg, vm, info) => {
|
||||
app.config.warnHandler = (msg) => {
|
||||
error(msg)
|
||||
throw(msg)
|
||||
}
|
||||
|
|
|
@ -122,6 +122,18 @@ describe('Parse Task Text', () => {
|
|||
expect(result.date.getMonth()).toBe(nextMonday.getMonth())
|
||||
expect(result.date.getDate()).toBe(nextMonday.getDate())
|
||||
})
|
||||
it('should recognize next monday and ignore casing', () => {
|
||||
const result = parseTaskText('Lorem Ipsum nExt Monday')
|
||||
|
||||
const untilNextMonday = calculateDayInterval('nextMonday')
|
||||
|
||||
expect(result.text).toBe('Lorem Ipsum')
|
||||
const nextMonday = new Date()
|
||||
nextMonday.setDate(nextMonday.getDate() + untilNextMonday)
|
||||
expect(result.date.getFullYear()).toBe(nextMonday.getFullYear())
|
||||
expect(result.date.getMonth()).toBe(nextMonday.getMonth())
|
||||
expect(result.date.getDate()).toBe(nextMonday.getDate())
|
||||
})
|
||||
it('should recognize this weekend', () => {
|
||||
const result = parseTaskText('Lorem Ipsum this weekend')
|
||||
|
||||
|
@ -201,14 +213,47 @@ describe('Parse Task Text', () => {
|
|||
expect(result.date.getMonth()).toBe(date.getMonth())
|
||||
expect(result.date.getDate()).toBe(date.getDate())
|
||||
})
|
||||
it('should recognize weekdays', () => {
|
||||
const result = parseTaskText('Lorem Ipsum thu')
|
||||
|
||||
expect(result.text).toBe('Lorem Ipsum')
|
||||
const nextThursday = new Date()
|
||||
nextThursday.setDate(nextThursday.getDate() + ((4 + 7 - nextThursday.getDay()) % 7))
|
||||
expect(`${result.date.getFullYear()}-${result.date.getMonth()}-${result.date.getDate()}`).toBe(`${nextThursday.getFullYear()}-${nextThursday.getMonth()}-${nextThursday.getDate()}`)
|
||||
})
|
||||
const cases = {
|
||||
'monday': 1,
|
||||
'Monday': 1,
|
||||
'mon': 1,
|
||||
'Mon': 1,
|
||||
'tuesday': 2,
|
||||
'Tuesday': 2,
|
||||
'tue': 2,
|
||||
'Tue': 2,
|
||||
'wednesday': 3,
|
||||
'Wednesday': 3,
|
||||
'wed': 3,
|
||||
'Wed': 3,
|
||||
'thursday': 4,
|
||||
'Thursday': 4,
|
||||
'thu': 4,
|
||||
'Thu': 4,
|
||||
'friday': 5,
|
||||
'Friday': 5,
|
||||
'fri': 5,
|
||||
'Fri': 5,
|
||||
'saturday': 6,
|
||||
'Saturday': 6,
|
||||
'sat': 6,
|
||||
'Sat': 6,
|
||||
'sunday': 7,
|
||||
'Sunday': 7,
|
||||
'sun': 7,
|
||||
'Sun': 7,
|
||||
}
|
||||
for (const c in cases) {
|
||||
it(`should recognize ${c} as weekday`, () => {
|
||||
const result = parseTaskText(`Lorem Ipsum ${c}`)
|
||||
|
||||
expect(result.text).toBe('Lorem Ipsum')
|
||||
const nextDate = new Date()
|
||||
nextDate.setDate(nextDate.getDate() + ((cases[c] + 7 - nextDate.getDay()) % 7))
|
||||
expect(`${result.date.getFullYear()}-${result.date.getMonth()}-${result.date.getDate()}`).toBe(`${nextDate.getFullYear()}-${nextDate.getMonth()}-${nextDate.getDate()}`)
|
||||
})
|
||||
}
|
||||
it('should recognize weekdays with time', () => {
|
||||
const result = parseTaskText('Lorem Ipsum thu at 14:00')
|
||||
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import { createRouter, createWebHistory, RouteLocation } from 'vue-router'
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import type { RouteLocation } from 'vue-router'
|
||||
import {saveLastVisited} from '@/helpers/saveLastVisited'
|
||||
import {store} from '@/store'
|
||||
|
||||
|
|
|
@ -0,0 +1,12 @@
|
|||
import { mount } from 'cypress/vue'
|
||||
|
||||
type MountParams = Parameters<typeof mount>;
|
||||
type OptionsParam = MountParams[1];
|
||||
|
||||
declare global {
|
||||
namespace Cypress {
|
||||
interface Chainable {
|
||||
mount: typeof mount;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1,5 +1,4 @@
|
|||
// https://next.vuex.vuejs.org/guide/migrating-to-4-0-from-3-x.html#typescript-support
|
||||
import { ComponentCustomProperties } from 'vue'
|
||||
import { Store } from 'vuex'
|
||||
|
||||
declare module '@vue/runtime-core' {
|
||||
|
|
|
@ -1 +0,0 @@
|
|||
/// <reference types="vite-svg-loader" />
|
|
@ -1 +0,0 @@
|
|||
/// <reference types="vite/client" />
|
|
@ -52,11 +52,11 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, shallowRef, computed, watch } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { store } from '@/store'
|
||||
import { success } from '@/message'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import {ref, shallowRef, computed, watch} from 'vue'
|
||||
import {useRouter, useRoute} from 'vue-router'
|
||||
import {store} from '@/store'
|
||||
import {success} from '@/message'
|
||||
import {useI18n} from 'vue-i18n'
|
||||
|
||||
import {default as Editor} from '@/components/input/AsyncEditor'
|
||||
import CreateEdit from '@/components/misc/create-edit.vue'
|
||||
|
@ -68,7 +68,7 @@ import SavedFilterService from '@/services/savedFilter'
|
|||
import {objectToSnakeCase} from '@/helpers/case'
|
||||
import {getSavedFilterIdFromListId} from '@/helpers/savedFilter'
|
||||
|
||||
const { t } = useI18n({useScope: 'global'})
|
||||
const {t} = useI18n({useScope: 'global'})
|
||||
|
||||
function useSavedFilter(listId) {
|
||||
const filterService = shallowRef(new SavedFilterService())
|
||||
|
@ -80,24 +80,24 @@ function useSavedFilter(listId) {
|
|||
filter.value.filters = value
|
||||
},
|
||||
})
|
||||
|
||||
|
||||
// loadSavedFilter
|
||||
watch(listId, async () => {
|
||||
// We assume the listId in the route is the pseudolist
|
||||
const savedFilterId = getSavedFilterIdFromListId(route.params.listId)
|
||||
|
||||
filter.value = new SavedFilterModel({id: savedFilterId })
|
||||
filter.value = new SavedFilterModel({id: savedFilterId})
|
||||
const response = await filterService.value.get(filter.value)
|
||||
response.filters = objectToSnakeCase(filter.value.filters)
|
||||
response.filters = objectToSnakeCase(response.filters)
|
||||
filter.value = response
|
||||
}, { immediate: true })
|
||||
}, {immediate: true})
|
||||
|
||||
async function save() {
|
||||
filter.value.filters = filters.value
|
||||
const response = await filterService.value.update(filter.value)
|
||||
await store.dispatch('namespaces/loadNamespaces')
|
||||
success({message: t('filters.edit.success')})
|
||||
response.filters = objectToSnakeCase(filter.value.filters)
|
||||
response.filters = objectToSnakeCase(response.filters)
|
||||
filter.value = response
|
||||
}
|
||||
|
||||
|
@ -110,7 +110,7 @@ function useSavedFilter(listId) {
|
|||
}
|
||||
|
||||
const route = useRoute()
|
||||
const listId = computed(() => route.params.listId)
|
||||
const listId = computed(() => route.params.listId)
|
||||
|
||||
const {
|
||||
save,
|
||||
|
@ -120,6 +120,7 @@ const {
|
|||
} = useSavedFilter(listId)
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
async function saveSavedFilter() {
|
||||
await save()
|
||||
router.back()
|
||||
|
|
|
@ -32,13 +32,13 @@
|
|||
v-tooltip.bottom="$t('label.edit.forbidden')">
|
||||
{{ l.title }}
|
||||
</span>
|
||||
<a
|
||||
<BaseButton
|
||||
:style="{'color': l.textColor}"
|
||||
@click="editLabel(l)"
|
||||
v-else>
|
||||
{{ l.title }}
|
||||
</a>
|
||||
<a @click="showDeleteDialoge(l)" class="delete is-small" v-if="userInfo.id === l.createdBy.id"></a>
|
||||
</BaseButton>
|
||||
<BaseButton @click="showDeleteDialoge(l)" class="delete is-small" v-if="userInfo.id === l.createdBy.id" />
|
||||
</span>
|
||||
</div>
|
||||
<div class="column is-4" v-if="isLabelEdit">
|
||||
|
@ -116,12 +116,14 @@ import {mapState} from 'vuex'
|
|||
import LabelModel from '../../models/label'
|
||||
import {LOADING, LOADING_MODULE} from '@/store/mutation-types'
|
||||
|
||||
import BaseButton from '@/components/base/BaseButton.vue'
|
||||
import AsyncEditor from '@/components/input/AsyncEditor'
|
||||
import ColorPicker from '@/components/input/colorPicker'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ListLabels',
|
||||
components: {
|
||||
BaseButton,
|
||||
ColorPicker,
|
||||
editor: AsyncEditor,
|
||||
},
|
||||
|
|
|
@ -408,7 +408,6 @@ export default defineComponent({
|
|||
// of the drop target works all the time.
|
||||
const bucketIndex = parseInt(e.to.dataset.bucketIndex)
|
||||
|
||||
|
||||
const newBucket = this.buckets[bucketIndex]
|
||||
|
||||
// HACK:
|
||||
|
@ -429,11 +428,28 @@ export default defineComponent({
|
|||
const taskAfter = newBucket.tasks[newTaskIndex + 1] ?? null
|
||||
|
||||
const newTask = cloneDeep(task) // cloning the task to avoid vuex store mutations
|
||||
newTask.bucketId = newBucket.id,
|
||||
newTask.kanbanPosition = calculateItemPosition(taskBefore !== null ? taskBefore.kanbanPosition : null, taskAfter !== null ? taskAfter.kanbanPosition : null)
|
||||
newTask.bucketId = newBucket.id
|
||||
newTask.kanbanPosition = calculateItemPosition(
|
||||
taskBefore !== null ? taskBefore.kanbanPosition : null,
|
||||
taskAfter !== null ? taskAfter.kanbanPosition : null,
|
||||
)
|
||||
|
||||
try {
|
||||
await this.$store.dispatch('tasks/update', newTask)
|
||||
|
||||
// Make sure the first and second task don't both get position 0 assigned
|
||||
if(newTaskIndex === 0 && taskAfter.kanbanPosition === 0) {
|
||||
console.log('first', taskAfter.id, taskAfter.kanbanPosition)
|
||||
const taskAfterAfter = newBucket.tasks[newTaskIndex + 2] ?? null
|
||||
const newTaskAfter = cloneDeep(taskAfter) // cloning the task to avoid vuex store mutations
|
||||
newTaskAfter.bucketId = newBucket.id
|
||||
newTaskAfter.kanbanPosition = calculateItemPosition(
|
||||
0,
|
||||
taskAfterAfter !== null ? taskAfterAfter.kanbanPosition : null,
|
||||
)
|
||||
|
||||
await this.$store.dispatch('tasks/update', newTaskAfter)
|
||||
}
|
||||
} finally {
|
||||
this.taskUpdating[task.id] = false
|
||||
this.oneTaskUpdating = false
|
||||
|
|
|
@ -54,7 +54,7 @@
|
|||
>
|
||||
<card :padding="false" :has-content="false" class="has-overflow">
|
||||
<template
|
||||
v-if="!list.isArchived && canWrite && list.id > 0"
|
||||
v-if="!list.isArchived && canWrite"
|
||||
>
|
||||
<add-task
|
||||
@taskAdded="updateTaskList"
|
||||
|
@ -65,9 +65,9 @@
|
|||
|
||||
<nothing v-if="ctaVisible && tasks.length === 0 && !loading">
|
||||
{{ $t('list.list.empty') }}
|
||||
<a @click="focusNewTaskInput()">
|
||||
<ButtonLink @click="focusNewTaskInput()">
|
||||
{{ $t('list.list.newTaskCta') }}
|
||||
</a>
|
||||
</ButtonLink>
|
||||
</nothing>
|
||||
|
||||
<div class="tasks-container" :class="{ 'has-task-edit-open': isTaskEdit }">
|
||||
|
@ -99,13 +99,13 @@
|
|||
<span class="icon handle">
|
||||
<icon icon="grip-lines"/>
|
||||
</span>
|
||||
<div
|
||||
<BaseButton
|
||||
@click="editTask(t.id)"
|
||||
class="icon settings"
|
||||
v-if="!list.isArchived"
|
||||
>
|
||||
<icon icon="pencil-alt"/>
|
||||
</div>
|
||||
</BaseButton>
|
||||
</template>
|
||||
</single-task-in-list>
|
||||
</template>
|
||||
|
@ -134,10 +134,12 @@
|
|||
<script lang="ts">
|
||||
import { ref, toRef, defineComponent } from 'vue'
|
||||
|
||||
import BaseButton from '@/components/base/BaseButton.vue'
|
||||
import ButtonLink from '@/components/misc/ButtonLink.vue'
|
||||
import ListWrapper from './ListWrapper.vue'
|
||||
import EditTask from '@/components/tasks/edit-task'
|
||||
import AddTask from '@/components/tasks/add-task'
|
||||
import SingleTaskInList from '@/components/tasks/partials/singleTaskInList'
|
||||
import EditTask from '@/components/tasks/edit-task.vue'
|
||||
import AddTask from '@/components/tasks/add-task.vue'
|
||||
import SingleTaskInList from '@/components/tasks/partials/singleTaskInList.vue'
|
||||
import { useTaskList } from '@/composables/taskList'
|
||||
import Rights from '../../models/constants/rights.json'
|
||||
import FilterPopup from '@/components/list/partials/filter-popup.vue'
|
||||
|
@ -190,6 +192,7 @@ export default defineComponent({
|
|||
}
|
||||
},
|
||||
components: {
|
||||
BaseButton,
|
||||
ListWrapper,
|
||||
Nothing,
|
||||
FilterPopup,
|
||||
|
@ -198,6 +201,7 @@ export default defineComponent({
|
|||
AddTask,
|
||||
draggable,
|
||||
Pagination,
|
||||
ButtonLink,
|
||||
},
|
||||
|
||||
setup(props) {
|
||||
|
@ -210,7 +214,9 @@ export default defineComponent({
|
|||
// isTaskEdit.value = false
|
||||
// }
|
||||
|
||||
const taskList = useTaskList(toRef(props, 'listId'))
|
||||
const taskList = useTaskList(toRef(props, 'listId'), {
|
||||
position: 'asc',
|
||||
})
|
||||
|
||||
return {
|
||||
taskEditTask,
|
||||
|
|
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue