forked from vikunja/frontend
Compare commits
17 Commits
a4b64f9bc6
...
034a30046c
Author | SHA1 | Date | |
---|---|---|---|
|
034a30046c | ||
ab02c2d896 | |||
324d387d0a | |||
570cfc8610 | |||
af9fd856eb | |||
80471f95e2 | |||
9c2d076f58 | |||
1969bd8190 | |||
7690cada78 | |||
b85beb06eb | |||
dff84209f0 | |||
30e53d7aa2 | |||
3834f961de | |||
6e3ac2a7c0 | |||
9e75d2b461 | |||
a4ec322ce2 | |||
8c3dd387a3 |
|
@ -95,7 +95,7 @@ steps:
|
||||||
CYPRESS_TEST_SECRET: averyLongSecretToSe33dtheDB
|
CYPRESS_TEST_SECRET: averyLongSecretToSe33dtheDB
|
||||||
YARN_CACHE_FOLDER: .cache/yarn/
|
YARN_CACHE_FOLDER: .cache/yarn/
|
||||||
CYPRESS_CACHE_FOLDER: .cache/cypress/
|
CYPRESS_CACHE_FOLDER: .cache/cypress/
|
||||||
CYPRESS_DEFAULT_COMMAND_TIMEOUT: 10000
|
CYPRESS_DEFAULT_COMMAND_TIMEOUT: 20000
|
||||||
commands:
|
commands:
|
||||||
- sed -i 's/localhost/api/g' public/index.html
|
- sed -i 's/localhost/api/g' public/index.html
|
||||||
- yarn serve & npx wait-on http://localhost:8080
|
- yarn serve & npx wait-on http://localhost:8080
|
||||||
|
|
|
@ -4,5 +4,8 @@
|
||||||
"API_URL": "http://localhost:3456/api/v1",
|
"API_URL": "http://localhost:3456/api/v1",
|
||||||
"TEST_SECRET": "testingS3cr3et"
|
"TEST_SECRET": "testingS3cr3et"
|
||||||
},
|
},
|
||||||
"video": false
|
"video": false,
|
||||||
|
"retries": {
|
||||||
|
"runMode": 2
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -10,10 +10,12 @@ import {BucketFactory} from '../../factories/bucket'
|
||||||
import '../../support/authenticateUser'
|
import '../../support/authenticateUser'
|
||||||
|
|
||||||
describe('Lists', () => {
|
describe('Lists', () => {
|
||||||
|
let lists
|
||||||
|
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
UserFactory.create(1)
|
UserFactory.create(1)
|
||||||
NamespaceFactory.create(1)
|
NamespaceFactory.create(1)
|
||||||
const lists = ListFactory.create(1, {
|
lists = ListFactory.create(1, {
|
||||||
title: 'First List'
|
title: 'First List'
|
||||||
})
|
})
|
||||||
TaskFactory.truncate()
|
TaskFactory.truncate()
|
||||||
|
@ -54,6 +56,64 @@ describe('Lists', () => {
|
||||||
.should('contain', '/lists/1/kanban')
|
.should('contain', '/lists/1/kanban')
|
||||||
})
|
})
|
||||||
|
|
||||||
|
it('Should rename the list in all places', () => {
|
||||||
|
const tasks = TaskFactory.create(5, {
|
||||||
|
id: '{increment}',
|
||||||
|
list_id: 1,
|
||||||
|
})
|
||||||
|
const newListName = 'New list name'
|
||||||
|
|
||||||
|
cy.visit('/lists/1')
|
||||||
|
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')
|
||||||
|
.click()
|
||||||
|
cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list li:first-child .dropdown .dropdown-content')
|
||||||
|
.contains('Edit')
|
||||||
|
.click()
|
||||||
|
cy.get('#listtext')
|
||||||
|
.type(`{selectall}${newListName}`)
|
||||||
|
cy.get('footer.modal-card-foot .button')
|
||||||
|
.contains('Save')
|
||||||
|
.click()
|
||||||
|
|
||||||
|
cy.get('.global-notification')
|
||||||
|
.should('contain', 'Success')
|
||||||
|
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')
|
||||||
|
.should('contain', newListName)
|
||||||
|
.should('not.contain', lists[0].title)
|
||||||
|
cy.visit('/')
|
||||||
|
cy.get('.card-content .tasks')
|
||||||
|
.should('contain', newListName)
|
||||||
|
.should('not.contain', lists[0].title)
|
||||||
|
})
|
||||||
|
|
||||||
|
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')
|
||||||
|
.click()
|
||||||
|
cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list li:first-child .dropdown .dropdown-content')
|
||||||
|
.contains('Delete')
|
||||||
|
.click()
|
||||||
|
cy.url()
|
||||||
|
.should('contain', '/settings/delete')
|
||||||
|
cy.get('.modal-mask .modal-container .modal-content .actions a.button')
|
||||||
|
.contains('Do it')
|
||||||
|
.click()
|
||||||
|
|
||||||
|
cy.get('.global-notification')
|
||||||
|
.should('contain', 'Success')
|
||||||
|
cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list')
|
||||||
|
.should('not.contain', lists[0].title)
|
||||||
|
cy.location('pathname')
|
||||||
|
.should('equal', '/')
|
||||||
|
})
|
||||||
|
|
||||||
describe('List View', () => {
|
describe('List View', () => {
|
||||||
it('Should be an empty list', () => {
|
it('Should be an empty list', () => {
|
||||||
cy.visit('/lists/1')
|
cy.visit('/lists/1')
|
||||||
|
@ -202,11 +262,15 @@ describe('Lists', () => {
|
||||||
|
|
||||||
it('Shows tasks from the current and next month', () => {
|
it('Shows tasks from the current and next month', () => {
|
||||||
const now = new Date()
|
const now = new Date()
|
||||||
|
const nextMonth = now
|
||||||
|
nextMonth.setDate(1)
|
||||||
|
nextMonth.setMonth(now.getMonth() + 1)
|
||||||
|
|
||||||
cy.visit('/lists/1/gantt')
|
cy.visit('/lists/1/gantt')
|
||||||
|
|
||||||
cy.get('.gantt-chart-container .gantt-chart .months')
|
cy.get('.gantt-chart-container .gantt-chart .months')
|
||||||
.should('contain', format(now, 'MMMM'))
|
.should('contain', format(now, 'MMMM'))
|
||||||
.should('contain', format(now.setMonth(now.getMonth() + 1), 'MMMM'))
|
.should('contain', format(nextMonth, 'MMMM'))
|
||||||
})
|
})
|
||||||
|
|
||||||
it('Shows tasks with dates', () => {
|
it('Shows tasks with dates', () => {
|
||||||
|
@ -401,7 +465,7 @@ describe('Lists', () => {
|
||||||
})
|
})
|
||||||
cy.visit('/lists/1/kanban')
|
cy.visit('/lists/1/kanban')
|
||||||
|
|
||||||
cy.getAttached('.kanban .bucket .tasks .task')
|
cy.getSettled('.kanban .bucket .tasks .task')
|
||||||
.contains(tasks[0].title)
|
.contains(tasks[0].title)
|
||||||
.should('be.visible')
|
.should('be.visible')
|
||||||
.click()
|
.click()
|
||||||
|
@ -423,7 +487,7 @@ describe('Lists', () => {
|
||||||
const task = tasks[0]
|
const task = tasks[0]
|
||||||
cy.visit('/lists/1/kanban')
|
cy.visit('/lists/1/kanban')
|
||||||
|
|
||||||
cy.getAttached('.kanban .bucket .tasks .task')
|
cy.getSettled('.kanban .bucket .tasks .task')
|
||||||
.contains(task.title)
|
.contains(task.title)
|
||||||
.should('be.visible')
|
.should('be.visible')
|
||||||
.click()
|
.click()
|
||||||
|
|
|
@ -3,6 +3,7 @@ import {UserFactory} from '../../factories/user'
|
||||||
import '../../support/authenticateUser'
|
import '../../support/authenticateUser'
|
||||||
import {ListFactory} from '../../factories/list'
|
import {ListFactory} from '../../factories/list'
|
||||||
import {NamespaceFactory} from '../../factories/namespace'
|
import {NamespaceFactory} from '../../factories/namespace'
|
||||||
|
import {TaskFactory} from '../../factories/task'
|
||||||
|
|
||||||
describe('Namepaces', () => {
|
describe('Namepaces', () => {
|
||||||
let namespaces
|
let namespaces
|
||||||
|
@ -20,20 +21,82 @@ describe('Namepaces', () => {
|
||||||
})
|
})
|
||||||
|
|
||||||
it('Should create a new Namespace', () => {
|
it('Should create a new Namespace', () => {
|
||||||
|
const newNamespaceTitle = 'New Namespace'
|
||||||
|
|
||||||
cy.visit('/namespaces')
|
cy.visit('/namespaces')
|
||||||
cy.get('a.button')
|
cy.get('a.button')
|
||||||
.contains('Create namespace')
|
.contains('Create namespace')
|
||||||
.click()
|
.click()
|
||||||
|
|
||||||
cy.url()
|
cy.url()
|
||||||
.should('contain', '/namespaces/new')
|
.should('contain', '/namespaces/new')
|
||||||
cy.get('.card-header-title')
|
cy.get('.card-header-title')
|
||||||
.should('contain', 'Create a new namespace')
|
.should('contain', 'Create a new namespace')
|
||||||
cy.get('input.input')
|
cy.get('input.input')
|
||||||
.type('New Namespace')
|
.type(newNamespaceTitle)
|
||||||
cy.get('.button')
|
cy.get('.button')
|
||||||
.contains('Create')
|
.contains('Create')
|
||||||
.click()
|
.click()
|
||||||
|
|
||||||
|
cy.get('.global-notification')
|
||||||
|
.should('contain', 'Success')
|
||||||
|
cy.get('.namespace-container')
|
||||||
|
.should('contain', newNamespaceTitle)
|
||||||
cy.url()
|
cy.url()
|
||||||
.should('contain', '/namespaces')
|
.should('contain', '/namespaces')
|
||||||
})
|
})
|
||||||
|
|
||||||
|
it('Should rename the namespace all places', () => {
|
||||||
|
const newNamespaces = NamespaceFactory.create(5)
|
||||||
|
const newNamespaceName = 'New namespace name'
|
||||||
|
|
||||||
|
cy.visit('/namespaces')
|
||||||
|
|
||||||
|
cy.get(`.namespace-container .menu.namespaces-lists .namespace-title:contains(${newNamespaces[0].title}) .dropdown .dropdown-trigger`)
|
||||||
|
.click()
|
||||||
|
cy.get('.namespace-container .menu.namespaces-lists .namespace-title .dropdown .dropdown-content')
|
||||||
|
.contains('Edit')
|
||||||
|
.click()
|
||||||
|
cy.url()
|
||||||
|
.should('contain', '/settings/edit')
|
||||||
|
cy.get('#namespacetext')
|
||||||
|
.invoke('val')
|
||||||
|
.should('equal', newNamespaces[0].title) // wait until the namespace data is loaded
|
||||||
|
cy.get('#namespacetext')
|
||||||
|
.type(`{selectall}${newNamespaceName}`)
|
||||||
|
cy.get('footer.modal-card-foot .button')
|
||||||
|
.contains('Save')
|
||||||
|
.click()
|
||||||
|
|
||||||
|
cy.get('.global-notification')
|
||||||
|
.should('contain', 'Success')
|
||||||
|
cy.get('.namespace-container .menu.namespaces-lists')
|
||||||
|
.should('contain', newNamespaceName)
|
||||||
|
.should('not.contain', newNamespaces[0].title)
|
||||||
|
cy.get('.content.namespaces-list')
|
||||||
|
.should('contain', newNamespaceName)
|
||||||
|
.should('not.contain', newNamespaces[0].title)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('Should remove a namespace when deleting it', () => {
|
||||||
|
const newNamespaces = NamespaceFactory.create(5)
|
||||||
|
|
||||||
|
cy.visit('/')
|
||||||
|
|
||||||
|
cy.get(`.namespace-container .menu.namespaces-lists .namespace-title:contains(${newNamespaces[0].title}) .dropdown .dropdown-trigger`)
|
||||||
|
.click()
|
||||||
|
cy.get('.namespace-container .menu.namespaces-lists .namespace-title .dropdown .dropdown-content')
|
||||||
|
.contains('Delete')
|
||||||
|
.click()
|
||||||
|
cy.url()
|
||||||
|
.should('contain', '/settings/delete')
|
||||||
|
cy.get('.modal-mask .modal-container .modal-content .actions a.button')
|
||||||
|
.contains('Do it')
|
||||||
|
.click()
|
||||||
|
|
||||||
|
cy.get('.global-notification')
|
||||||
|
.should('contain', 'Success')
|
||||||
|
cy.get('.namespace-container .menu.namespaces-lists')
|
||||||
|
.should('not.contain', newNamespaces[0].title)
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|
|
@ -11,6 +11,7 @@ import '../../support/authenticateUser'
|
||||||
import {TaskAssigneeFactory} from '../../factories/task_assignee'
|
import {TaskAssigneeFactory} from '../../factories/task_assignee'
|
||||||
import {LabelFactory} from '../../factories/labels'
|
import {LabelFactory} from '../../factories/labels'
|
||||||
import {LabelTaskFactory} from '../../factories/label_task'
|
import {LabelTaskFactory} from '../../factories/label_task'
|
||||||
|
import {BucketFactory} from '../../factories/bucket'
|
||||||
|
|
||||||
describe('Task', () => {
|
describe('Task', () => {
|
||||||
let namespaces
|
let namespaces
|
||||||
|
@ -112,9 +113,10 @@ describe('Task', () => {
|
||||||
cy.visit(`/tasks/${tasks[0].id}`)
|
cy.visit(`/tasks/${tasks[0].id}`)
|
||||||
|
|
||||||
cy.get('.task-view .heading .is-done')
|
cy.get('.task-view .heading .is-done')
|
||||||
.should('exist')
|
.should('be.visible')
|
||||||
.should('contain', 'Done')
|
.should('contain', 'Done')
|
||||||
cy.get('.task-view .action-buttons p.created')
|
cy.get('.task-view .action-buttons p.created')
|
||||||
|
.should('be.visible')
|
||||||
.should('contain', 'Done')
|
.should('contain', 'Done')
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@ -182,9 +184,11 @@ describe('Task', () => {
|
||||||
cy.visit(`/tasks/${tasks[0].id}`)
|
cy.visit(`/tasks/${tasks[0].id}`)
|
||||||
|
|
||||||
cy.get('.task-view .comments .media.comment .editor .vue-easymde .EasyMDEContainer .CodeMirror-scroll')
|
cy.get('.task-view .comments .media.comment .editor .vue-easymde .EasyMDEContainer .CodeMirror-scroll')
|
||||||
|
.should('be.visible')
|
||||||
.type('{selectall}New Comment')
|
.type('{selectall}New Comment')
|
||||||
cy.get('.task-view .comments .media.comment .button:not([disabled])')
|
cy.get('.task-view .comments .media.comment .button:not([disabled])')
|
||||||
.contains('Comment')
|
.contains('Comment')
|
||||||
|
.should('be.visible')
|
||||||
.click()
|
.click()
|
||||||
|
|
||||||
cy.get('.task-view .comments .media.comment .editor')
|
cy.get('.task-view .comments .media.comment .editor')
|
||||||
|
@ -195,6 +199,9 @@ describe('Task', () => {
|
||||||
|
|
||||||
it('Can move a task to another list', () => {
|
it('Can move a task to another list', () => {
|
||||||
const lists = ListFactory.create(2)
|
const lists = ListFactory.create(2)
|
||||||
|
BucketFactory.create(2, {
|
||||||
|
list_id: '{increment}'
|
||||||
|
})
|
||||||
const tasks = TaskFactory.create(1, {
|
const tasks = TaskFactory.create(1, {
|
||||||
id: 1,
|
id: 1,
|
||||||
list_id: lists[0].id,
|
list_id: lists[0].id,
|
||||||
|
@ -228,6 +235,7 @@ describe('Task', () => {
|
||||||
cy.visit(`/tasks/${tasks[0].id}`)
|
cy.visit(`/tasks/${tasks[0].id}`)
|
||||||
|
|
||||||
cy.get('.task-view .action-buttons .button')
|
cy.get('.task-view .action-buttons .button')
|
||||||
|
.should('be.visible')
|
||||||
.contains('Delete task')
|
.contains('Delete task')
|
||||||
.click()
|
.click()
|
||||||
cy.get('.modal-mask .modal-container .modal-content .header')
|
cy.get('.modal-mask .modal-container .modal-content .header')
|
||||||
|
@ -310,6 +318,7 @@ describe('Task', () => {
|
||||||
|
|
||||||
cy.get('.task-view .action-buttons .button')
|
cy.get('.task-view .action-buttons .button')
|
||||||
.contains('Add labels')
|
.contains('Add labels')
|
||||||
|
.should('be.visible')
|
||||||
.click()
|
.click()
|
||||||
cy.get('.task-view .details.labels-list .multiselect input')
|
cy.get('.task-view .details.labels-list .multiselect input')
|
||||||
.type(newLabelText)
|
.type(newLabelText)
|
||||||
|
@ -365,6 +374,7 @@ describe('Task', () => {
|
||||||
cy.visit(`/tasks/${tasks[0].id}`)
|
cy.visit(`/tasks/${tasks[0].id}`)
|
||||||
|
|
||||||
cy.get('.task-view .details.labels-list .multiselect .input-wrapper')
|
cy.get('.task-view .details.labels-list .multiselect .input-wrapper')
|
||||||
|
.should('be.visible')
|
||||||
.should('contain', labels[0].title)
|
.should('contain', labels[0].title)
|
||||||
cy.get('.task-view .details.labels-list .multiselect .input-wrapper')
|
cy.get('.task-view .details.labels-list .multiselect .input-wrapper')
|
||||||
.children()
|
.children()
|
||||||
|
|
|
@ -1,17 +1,33 @@
|
||||||
/**
|
/**
|
||||||
* getAttached(selector)
|
* Recursively gets an element, returning only after it's determined to be attached to the DOM for good.
|
||||||
* getAttached(selectorFn)
|
|
||||||
*
|
*
|
||||||
* Waits until the selector finds an attached element, then yields it (wrapped).
|
* Source: https://github.com/cypress-io/cypress/issues/7306#issuecomment-850621378
|
||||||
* selectorFn, if provided, is passed $(document). Don't use cy methods inside selectorFn.
|
|
||||||
*
|
|
||||||
* Source: https://github.com/cypress-io/cypress/issues/5743#issuecomment-650421731
|
|
||||||
*/
|
*/
|
||||||
Cypress.Commands.add('getAttached', selector => {
|
Cypress.Commands.add('getSettled', (selector, opts = {}) => {
|
||||||
const getElement = typeof selector === 'function' ? selector : $d => $d.find(selector);
|
const retries = opts.retries || 3
|
||||||
let $el = null;
|
const delay = opts.delay || 100
|
||||||
return cy.document().should($d => {
|
|
||||||
$el = getElement(Cypress.$($d));
|
const isAttached = (resolve, count = 0) => {
|
||||||
expect(Cypress.dom.isDetached($el)).to.be.false;
|
const el = Cypress.$(selector)
|
||||||
}).then(() => cy.wrap($el));
|
|
||||||
});
|
// 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)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
16
package.json
16
package.json
|
@ -17,16 +17,16 @@
|
||||||
"bulma": "0.9.2",
|
"bulma": "0.9.2",
|
||||||
"camel-case": "4.1.2",
|
"camel-case": "4.1.2",
|
||||||
"copy-to-clipboard": "3.3.1",
|
"copy-to-clipboard": "3.3.1",
|
||||||
"date-fns": "2.21.3",
|
"date-fns": "2.22.1",
|
||||||
"dompurify": "2.2.8",
|
"dompurify": "2.2.9",
|
||||||
"highlight.js": "10.7.2",
|
"highlight.js": "11.0.0",
|
||||||
"lodash": "4.17.21",
|
"lodash": "4.17.21",
|
||||||
"marked": "2.0.5",
|
"marked": "2.0.7",
|
||||||
"register-service-worker": "1.7.2",
|
"register-service-worker": "1.7.2",
|
||||||
"sass": "1.34.0",
|
"sass": "1.34.0",
|
||||||
"snake-case": "3.0.4",
|
"snake-case": "3.0.4",
|
||||||
"verte": "0.0.12",
|
"verte": "0.0.12",
|
||||||
"vue": "2.6.12",
|
"vue": "2.6.13",
|
||||||
"vue-advanced-cropper": "1.6.0",
|
"vue-advanced-cropper": "1.6.0",
|
||||||
"vue-drag-resize": "1.5.4",
|
"vue-drag-resize": "1.5.4",
|
||||||
"vue-easymde": "1.4.0",
|
"vue-easymde": "1.4.0",
|
||||||
|
@ -49,14 +49,14 @@
|
||||||
"cypress": "7.4.0",
|
"cypress": "7.4.0",
|
||||||
"cypress-file-upload": "5.0.7",
|
"cypress-file-upload": "5.0.7",
|
||||||
"eslint": "7.27.0",
|
"eslint": "7.27.0",
|
||||||
"eslint-plugin-vue": "7.9.0",
|
"eslint-plugin-vue": "7.10.0",
|
||||||
"faker": "5.5.3",
|
"faker": "5.5.3",
|
||||||
"jest": "27.0.1",
|
"jest": "27.0.3",
|
||||||
"sass-loader": "10.2.0",
|
"sass-loader": "10.2.0",
|
||||||
"vue-flatpickr-component": "8.1.6",
|
"vue-flatpickr-component": "8.1.6",
|
||||||
"vue-notification": "1.3.20",
|
"vue-notification": "1.3.20",
|
||||||
"vue-router": "3.5.1",
|
"vue-router": "3.5.1",
|
||||||
"vue-template-compiler": "2.6.12",
|
"vue-template-compiler": "2.6.13",
|
||||||
"wait-on": "5.3.0"
|
"wait-on": "5.3.0"
|
||||||
},
|
},
|
||||||
"eslintConfig": {
|
"eslintConfig": {
|
||||||
|
|
|
@ -20,6 +20,8 @@
|
||||||
>
|
>
|
||||||
<a @click="$store.commit('menuActive', false)" class="mobile-overlay" v-if="menuActive"></a>
|
<a @click="$store.commit('menuActive', false)" class="mobile-overlay" v-if="menuActive"></a>
|
||||||
|
|
||||||
|
<quick-actions/>
|
||||||
|
|
||||||
<router-view/>
|
<router-view/>
|
||||||
|
|
||||||
<transition name="modal">
|
<transition name="modal">
|
||||||
|
@ -43,10 +45,11 @@
|
||||||
import {mapState} from 'vuex'
|
import {mapState} from 'vuex'
|
||||||
import {CURRENT_LIST, KEYBOARD_SHORTCUTS_ACTIVE, MENU_ACTIVE} from '@/store/mutation-types'
|
import {CURRENT_LIST, KEYBOARD_SHORTCUTS_ACTIVE, MENU_ACTIVE} from '@/store/mutation-types'
|
||||||
import Navigation from '@/components/home/navigation'
|
import Navigation from '@/components/home/navigation'
|
||||||
|
import QuickActions from '@/components/quick-actions/quick-actions'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'contentAuth',
|
name: 'contentAuth',
|
||||||
components: {Navigation},
|
components: {QuickActions, Navigation},
|
||||||
watch: {
|
watch: {
|
||||||
'$route': 'doStuffAfterRoute',
|
'$route': 'doStuffAfterRoute',
|
||||||
},
|
},
|
||||||
|
@ -83,7 +86,7 @@ export default {
|
||||||
this.$route.name === 'user.settings' ||
|
this.$route.name === 'user.settings' ||
|
||||||
this.$route.name === 'namespaces.index'
|
this.$route.name === 'namespaces.index'
|
||||||
) {
|
) {
|
||||||
this.$store.commit(CURRENT_LIST, {})
|
this.$store.commit(CURRENT_LIST, null)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
renewTokenOnFocus() {
|
renewTokenOnFocus() {
|
||||||
|
|
|
@ -37,6 +37,14 @@
|
||||||
|
|
||||||
<div class="navbar-end">
|
<div class="navbar-end">
|
||||||
<update/>
|
<update/>
|
||||||
|
<a
|
||||||
|
@click="openQuickActions"
|
||||||
|
class="trigger-button pr-0"
|
||||||
|
@shortkey="openQuickActions"
|
||||||
|
v-shortkey="['ctrl', 'k']"
|
||||||
|
>
|
||||||
|
<icon icon="search"/>
|
||||||
|
</a>
|
||||||
<notifications/>
|
<notifications/>
|
||||||
<div class="user">
|
<div class="user">
|
||||||
<img :src="userAvatar" alt="" class="avatar"/>
|
<img :src="userAvatar" alt="" class="avatar"/>
|
||||||
|
@ -83,7 +91,7 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {mapState} from 'vuex'
|
import {mapState} from 'vuex'
|
||||||
import {CURRENT_LIST} from '@/store/mutation-types'
|
import {CURRENT_LIST, QUICK_ACTIONS_ACTIVE} from '@/store/mutation-types'
|
||||||
import Rights from '@/models/rights.json'
|
import Rights from '@/models/rights.json'
|
||||||
import Update from '@/components/home/update'
|
import Update from '@/components/home/update'
|
||||||
import ListSettingsDropdown from '@/components/list/list-settings-dropdown'
|
import ListSettingsDropdown from '@/components/list/list-settings-dropdown'
|
||||||
|
@ -113,6 +121,9 @@ export default {
|
||||||
this.$store.dispatch('auth/logout')
|
this.$store.dispatch('auth/logout')
|
||||||
this.$router.push({name: 'user.login'})
|
this.$router.push({name: 'user.login'})
|
||||||
},
|
},
|
||||||
|
openQuickActions() {
|
||||||
|
this.$store.commit(QUICK_ACTIONS_ACTIVE, true)
|
||||||
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -369,7 +369,7 @@ export default {
|
||||||
highlight: function (code, language) {
|
highlight: function (code, language) {
|
||||||
const hljs = require('highlight.js')
|
const hljs = require('highlight.js')
|
||||||
const validLanguage = hljs.getLanguage(language) ? language : 'plaintext'
|
const validLanguage = hljs.getLanguage(language) ? language : 'plaintext'
|
||||||
return hljs.highlight(validLanguage, code).value
|
return hljs.highlight(code, {language: validLanguage}).value
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@ -448,7 +448,7 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import '../../../node_modules/highlight.js/scss/atelier-heath-light';
|
@import '../../../node_modules/highlight.js/scss/base16/equilibrium-gray-light';
|
||||||
@import '../../../node_modules/easymde/dist/easymde.min.css';
|
@import '../../../node_modules/easymde/dist/easymde.min.css';
|
||||||
@import '../../styles/theme/variables/all';
|
@import '../../styles/theme/variables/all';
|
||||||
|
|
||||||
|
|
|
@ -34,7 +34,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<transition name="fade">
|
<transition name="fade">
|
||||||
<div class="search-results" v-if="searchResultsVisible">
|
<div class="search-results" :class="{'search-results-inline': inline}" v-if="searchResultsVisible">
|
||||||
<button
|
<button
|
||||||
v-if="creatableAvailable"
|
v-if="creatableAvailable"
|
||||||
class="is-fullwidth"
|
class="is-fullwidth"
|
||||||
|
@ -166,6 +166,27 @@ export default {
|
||||||
return false
|
return false
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
// If true, displays the search results inline instead of using a dropdown.
|
||||||
|
inline: {
|
||||||
|
type: Boolean,
|
||||||
|
default() {
|
||||||
|
return false
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// If true, shows search results when no query is specified.
|
||||||
|
showEmpty: {
|
||||||
|
type: Boolean,
|
||||||
|
default() {
|
||||||
|
return true
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// The delay in ms after which the search event will be fired. Used to avoid hitting the network on every keystroke.
|
||||||
|
searchDelay: {
|
||||||
|
type: Number,
|
||||||
|
default() {
|
||||||
|
return 200
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
document.addEventListener('click', this.hideSearchResultsHandler)
|
document.addEventListener('click', this.hideSearchResultsHandler)
|
||||||
|
@ -181,10 +202,14 @@ export default {
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
searchResultsVisible() {
|
searchResultsVisible() {
|
||||||
|
if(this.query === '' && !this.showEmpty) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
return this.showSearchResults && (
|
return this.showSearchResults && (
|
||||||
(this.filteredSearchResults.length > 0) ||
|
(this.filteredSearchResults.length > 0) ||
|
||||||
(this.creatable && this.query !== '')
|
(this.creatable && this.query !== '')
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
creatableAvailable() {
|
creatableAvailable() {
|
||||||
return this.creatable && this.query !== '' && !this.filteredSearchResults.some(elem => {
|
return this.creatable && this.query !== '' && !this.filteredSearchResults.some(elem => {
|
||||||
|
@ -211,7 +236,7 @@ export default {
|
||||||
// Updating the query with a binding does not work on mobile for some reason,
|
// Updating the query with a binding does not work on mobile for some reason,
|
||||||
// getting the value manual does.
|
// getting the value manual does.
|
||||||
this.query = this.$refs.searchInput.value
|
this.query = this.$refs.searchInput.value
|
||||||
|
|
||||||
if (this.searchTimeout !== null) {
|
if (this.searchTimeout !== null) {
|
||||||
clearTimeout(this.searchTimeout)
|
clearTimeout(this.searchTimeout)
|
||||||
this.searchTimeout = null
|
this.searchTimeout = null
|
||||||
|
@ -225,7 +250,7 @@ export default {
|
||||||
this.localLoading = false
|
this.localLoading = false
|
||||||
}, 100) // The duration of the loading timeout of the services
|
}, 100) // The duration of the loading timeout of the services
|
||||||
this.showSearchResults = true
|
this.showSearchResults = true
|
||||||
}, 200)
|
}, this.searchDelay)
|
||||||
},
|
},
|
||||||
hideSearchResultsHandler(e) {
|
hideSearchResultsHandler(e) {
|
||||||
closeWhenClickedOutside(e, this.$refs.multiselectRoot, this.closeSearchResults)
|
closeWhenClickedOutside(e, this.$refs.multiselectRoot, this.closeSearchResults)
|
||||||
|
|
|
@ -3,14 +3,23 @@
|
||||||
<div @click.self="close()" class="modal-container">
|
<div @click.self="close()" class="modal-container">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<card class="has-background-white has-no-shadow" title="Available Keyboard Shortcuts">
|
<card class="has-background-white has-no-shadow" title="Available Keyboard Shortcuts">
|
||||||
|
<div class="message is-primary">
|
||||||
|
<div class="message-body">
|
||||||
|
These shortcuts work on all pages.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<p>
|
<p>
|
||||||
<strong>Toggle The Menu</strong>
|
<strong>Toggle The Menu</strong>
|
||||||
<shortcut :keys="['ctrl', 'e']"/>
|
<shortcut :keys="['ctrl', 'e']"/>
|
||||||
</p>
|
</p>
|
||||||
|
<p>
|
||||||
|
<strong>Open the search/quick action bar</strong>
|
||||||
|
<shortcut :keys="['ctrl', 'k']"/>
|
||||||
|
</p>
|
||||||
<h3>Kanban</h3>
|
<h3>Kanban</h3>
|
||||||
<div class="message is-primary" v-if="$route.name === 'list.kanban'">
|
<div class="message is-primary" v-if="$route.name === 'list.kanban'">
|
||||||
<div class="message-body">
|
<div class="message-body">
|
||||||
These shortcuts work on the current page.
|
These shortcuts work only on the current page.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p>
|
<p>
|
||||||
|
@ -22,7 +31,7 @@
|
||||||
class="message is-primary"
|
class="message is-primary"
|
||||||
v-if="$route.name === 'task.detail' || $route.name === 'task.list.detail' || $route.name === 'task.gantt.detail' || $route.name === 'task.kanban.detail' || $route.name === 'task.detail'">
|
v-if="$route.name === 'task.detail' || $route.name === 'task.list.detail' || $route.name === 'task.gantt.detail' || $route.name === 'task.kanban.detail' || $route.name === 'task.detail'">
|
||||||
<div class="message-body">
|
<div class="message-body">
|
||||||
These shortcuts work on the current page.
|
These shortcuts work only on the current page.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p>
|
<p>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="notifications">
|
<div class="notifications">
|
||||||
<a @click.stop="showNotifications = !showNotifications" class="trigger">
|
<a @click.stop="showNotifications = !showNotifications" class="trigger-button">
|
||||||
<span class="unread-indicator" v-if="unreadNotifications > 0"></span>
|
<span class="unread-indicator" v-if="unreadNotifications > 0"></span>
|
||||||
<icon icon="bell"/>
|
<icon icon="bell"/>
|
||||||
</a>
|
</a>
|
||||||
|
|
388
src/components/quick-actions/quick-actions.vue
Normal file
388
src/components/quick-actions/quick-actions.vue
Normal file
|
@ -0,0 +1,388 @@
|
||||||
|
<template>
|
||||||
|
<modal v-if="active" class="quick-actions" @close="closeQuickActions">
|
||||||
|
<div class="card">
|
||||||
|
<div class="action-input" :class="{'has-active-cmd': selectedCmd !== null}">
|
||||||
|
<div class="active-cmd tag" v-if="selectedCmd !== null">
|
||||||
|
{{ selectedCmd.title }}
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
v-focus
|
||||||
|
class="input"
|
||||||
|
:class="{'is-loading': loading}"
|
||||||
|
v-model="query"
|
||||||
|
:placeholder="placeholder"
|
||||||
|
@keyup="search"
|
||||||
|
ref="searchInput"
|
||||||
|
@keydown.down.prevent="() => select(0, 0)"
|
||||||
|
@keyup.prevent.delete="unselectCmd"
|
||||||
|
@keyup.prevent.enter="doCmd"
|
||||||
|
@keyup.prevent.esc="closeQuickActions"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="has-text-grey-light p-4" v-if="hintText !== ''">
|
||||||
|
{{ hintText }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="results" v-if="selectedCmd === null">
|
||||||
|
<div v-for="(r, k) in results" :key="k" class="result">
|
||||||
|
<span class="result-title">
|
||||||
|
{{ r.title }}
|
||||||
|
</span>
|
||||||
|
<div class="result-items">
|
||||||
|
<button
|
||||||
|
v-for="(i, key) in r.items"
|
||||||
|
:key="key"
|
||||||
|
:ref="`result-${k}_${key}`"
|
||||||
|
@keydown.up.prevent="() => select(k, key - 1)"
|
||||||
|
@keydown.down.prevent="() => select(k, key + 1)"
|
||||||
|
@click.prevent.stop="() => doAction(r.type, i)"
|
||||||
|
@keyup.prevent.enter="() => doAction(r.type, i)"
|
||||||
|
@keyup.prevent.esc="() => $refs.searchInput.focus()"
|
||||||
|
>
|
||||||
|
{{ i.title }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</modal>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import TaskService from '@/services/task'
|
||||||
|
import ListService from '@/services/list'
|
||||||
|
import NamespaceService from '@/services/namespace'
|
||||||
|
import TeamService from '@/services/team'
|
||||||
|
|
||||||
|
import TaskModel from '@/models/task'
|
||||||
|
import NamespaceModel from '@/models/namespace'
|
||||||
|
import TeamModel from '@/models/team'
|
||||||
|
|
||||||
|
import {CURRENT_LIST, QUICK_ACTIONS_ACTIVE} from '@/store/mutation-types'
|
||||||
|
import ListModel from '@/models/list'
|
||||||
|
|
||||||
|
const TYPE_LIST = 'list'
|
||||||
|
const TYPE_TASK = 'task'
|
||||||
|
const TYPE_CMD = 'cmd'
|
||||||
|
const TYPE_TEAM = 'team'
|
||||||
|
|
||||||
|
const CMD_NEW_TASK = 'newTask'
|
||||||
|
const CMD_NEW_LIST = 'newList'
|
||||||
|
const CMD_NEW_NAMESPACE = 'newNamespace'
|
||||||
|
const CMD_NEW_TEAM = 'newTeam'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'quick-actions',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
query: '',
|
||||||
|
selectedCmd: null,
|
||||||
|
|
||||||
|
foundTasks: [],
|
||||||
|
taskSearchTimeout: null,
|
||||||
|
taskService: null,
|
||||||
|
|
||||||
|
foundTeams: [],
|
||||||
|
teamService: null,
|
||||||
|
|
||||||
|
namespaceService: null,
|
||||||
|
listService: null,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
active() {
|
||||||
|
const active = this.$store.state[QUICK_ACTIONS_ACTIVE]
|
||||||
|
if (!active) {
|
||||||
|
this.reset()
|
||||||
|
}
|
||||||
|
return active
|
||||||
|
},
|
||||||
|
results() {
|
||||||
|
const lists = (Object.values(this.$store.state.lists).filter(l => {
|
||||||
|
return l.title.toLowerCase().includes(this.query.toLowerCase())
|
||||||
|
}) ?? [])
|
||||||
|
|
||||||
|
const cmds = this.availableCmds
|
||||||
|
.filter(a => a.title.toLowerCase().includes(this.query.toLowerCase()))
|
||||||
|
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
type: TYPE_CMD,
|
||||||
|
title: 'Commands',
|
||||||
|
items: cmds,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: TYPE_TASK,
|
||||||
|
title: 'Tasks',
|
||||||
|
items: this.foundTasks,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: TYPE_LIST,
|
||||||
|
title: 'Lists',
|
||||||
|
items: lists,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: TYPE_TEAM,
|
||||||
|
title: 'Teams',
|
||||||
|
items: this.foundTeams,
|
||||||
|
},
|
||||||
|
].filter(i => i.items.length > 0)
|
||||||
|
},
|
||||||
|
nothing() {
|
||||||
|
return this.search === '' || Object.keys(this.results).length === 0
|
||||||
|
},
|
||||||
|
loading() {
|
||||||
|
return this.taskService.loading ||
|
||||||
|
this.listService.loading ||
|
||||||
|
this.namespaceService.loading ||
|
||||||
|
this.teamService.loading
|
||||||
|
},
|
||||||
|
placeholder() {
|
||||||
|
if (this.selectedCmd !== null) {
|
||||||
|
switch (this.selectedCmd.action) {
|
||||||
|
case CMD_NEW_TASK:
|
||||||
|
return 'Enter the title of the new task...'
|
||||||
|
case CMD_NEW_LIST:
|
||||||
|
return 'Enter the title of the new list...'
|
||||||
|
case CMD_NEW_NAMESPACE:
|
||||||
|
return 'Enter the title of the new namespace...'
|
||||||
|
case CMD_NEW_TEAM:
|
||||||
|
return 'Enter the name of the new team...'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return 'Type a command or search...'
|
||||||
|
},
|
||||||
|
hintText() {
|
||||||
|
let namespace
|
||||||
|
|
||||||
|
if (this.selectedCmd !== null && this.currentList !== null) {
|
||||||
|
switch (this.selectedCmd.action) {
|
||||||
|
case CMD_NEW_TASK:
|
||||||
|
return `Create a task in the current list (${this.currentList.title})`
|
||||||
|
case CMD_NEW_LIST:
|
||||||
|
namespace = this.$store.getters['namespaces/getNamespaceById'](this.currentList.namespaceId)
|
||||||
|
return `Create a list in the current namespace (${namespace.title})`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return ''
|
||||||
|
},
|
||||||
|
currentList() {
|
||||||
|
return Object.keys(this.$store.state[CURRENT_LIST]).length === 0 ? null : this.$store.state[CURRENT_LIST]
|
||||||
|
},
|
||||||
|
availableCmds() {
|
||||||
|
const cmds = []
|
||||||
|
|
||||||
|
if (this.currentList !== null) {
|
||||||
|
cmds.push({
|
||||||
|
title: 'New task',
|
||||||
|
action: CMD_NEW_TASK,
|
||||||
|
})
|
||||||
|
cmds.push({
|
||||||
|
title: 'New list',
|
||||||
|
action: CMD_NEW_LIST,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
cmds.push({
|
||||||
|
title: 'New namespace',
|
||||||
|
action: CMD_NEW_NAMESPACE,
|
||||||
|
})
|
||||||
|
cmds.push({
|
||||||
|
title: 'New Team',
|
||||||
|
action: CMD_NEW_TEAM,
|
||||||
|
})
|
||||||
|
|
||||||
|
return cmds
|
||||||
|
},
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.taskService = new TaskService()
|
||||||
|
this.listService = new ListService()
|
||||||
|
this.namespaceService = new NamespaceService()
|
||||||
|
this.teamService = new TeamService()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
search() {
|
||||||
|
this.searchTasks()
|
||||||
|
},
|
||||||
|
searchTasks() {
|
||||||
|
if (this.query === '' || this.selectedCmd !== null) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.taskSearchTimeout !== null) {
|
||||||
|
clearTimeout(this.taskSearchTimeout)
|
||||||
|
this.taskSearchTimeout = null
|
||||||
|
}
|
||||||
|
|
||||||
|
this.taskSearchTimeout = setTimeout(() => {
|
||||||
|
this.taskService.getAll({}, {s: this.query})
|
||||||
|
.then(r => {
|
||||||
|
r = r.map(t => {
|
||||||
|
t.type = TYPE_TASK
|
||||||
|
const list = this.$store.getters['lists/getListById'](t.listId) === null ? null : this.$store.getters['lists/getListById'](t.listId)
|
||||||
|
if (list !== null) {
|
||||||
|
t.title = `${t.title} (${list.title})`
|
||||||
|
}
|
||||||
|
|
||||||
|
return t
|
||||||
|
})
|
||||||
|
this.$set(this, 'foundTasks', r)
|
||||||
|
})
|
||||||
|
}, 150)
|
||||||
|
},
|
||||||
|
closeQuickActions() {
|
||||||
|
this.$store.commit(QUICK_ACTIONS_ACTIVE, false)
|
||||||
|
},
|
||||||
|
doAction(type, item) {
|
||||||
|
switch (type) {
|
||||||
|
case TYPE_LIST:
|
||||||
|
this.$router.push({name: 'list.index', params: {listId: item.id}})
|
||||||
|
this.closeQuickActions()
|
||||||
|
break
|
||||||
|
case TYPE_TASK:
|
||||||
|
this.$router.push({name: 'task.detail', params: {id: item.id}})
|
||||||
|
this.closeQuickActions()
|
||||||
|
break
|
||||||
|
case TYPE_CMD:
|
||||||
|
this.query = ''
|
||||||
|
this.selectedCmd = item
|
||||||
|
this.$refs.searchInput.focus()
|
||||||
|
break
|
||||||
|
}
|
||||||
|
},
|
||||||
|
doCmd() {
|
||||||
|
if (this.selectedCmd === null) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.query === '') {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
switch (this.selectedCmd.action) {
|
||||||
|
case CMD_NEW_TASK:
|
||||||
|
this.newTask()
|
||||||
|
break
|
||||||
|
case CMD_NEW_LIST:
|
||||||
|
this.newList()
|
||||||
|
break
|
||||||
|
case CMD_NEW_NAMESPACE:
|
||||||
|
this.newNamespace()
|
||||||
|
break
|
||||||
|
case CMD_NEW_TEAM:
|
||||||
|
this.newTeam()
|
||||||
|
break
|
||||||
|
}
|
||||||
|
},
|
||||||
|
newTask() {
|
||||||
|
if (this.currentList === null) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const newTask = new TaskModel({
|
||||||
|
title: this.query,
|
||||||
|
listId: this.currentList.id,
|
||||||
|
})
|
||||||
|
this.taskService.create(newTask)
|
||||||
|
.then(r => {
|
||||||
|
this.success({message: 'The task was successfully created.'}, this)
|
||||||
|
this.$router.push({name: 'task.detail', params: {id: r.id}})
|
||||||
|
this.closeQuickActions()
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
this.error(e, this)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
newList() {
|
||||||
|
if (this.currentList === null) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const newList = new ListModel({
|
||||||
|
title: this.query,
|
||||||
|
namespaceId: this.currentList.namespaceId,
|
||||||
|
})
|
||||||
|
this.listService.create(newList)
|
||||||
|
.then(r => {
|
||||||
|
this.success({message: 'The list was successfully created.'}, this)
|
||||||
|
this.$router.push({name: 'list.index', params: {listId: r.id}})
|
||||||
|
this.closeQuickActions()
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
this.error(e, this)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
newNamespace() {
|
||||||
|
const newNamespace = new NamespaceModel({title: this.query})
|
||||||
|
this.namespaceService.create(newNamespace)
|
||||||
|
.then(r => {
|
||||||
|
this.$store.commit('namespaces/addNamespace', r)
|
||||||
|
this.success({message: 'The namespace was successfully created.'}, this)
|
||||||
|
this.$router.back()
|
||||||
|
this.closeQuickActions()
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
this.error(e, this)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
newTeam() {
|
||||||
|
const newTeam = new TeamModel({name: this.query})
|
||||||
|
this.teamService.create(newTeam)
|
||||||
|
.then(r => {
|
||||||
|
this.$router.push({
|
||||||
|
name: 'teams.edit',
|
||||||
|
params: {id: r.id},
|
||||||
|
})
|
||||||
|
this.success({message: 'The team was successfully created.'}, this)
|
||||||
|
this.closeQuickActions()
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
this.error(e, this)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
select(parentIndex, index) {
|
||||||
|
|
||||||
|
if (index < 0 && parentIndex === 0) {
|
||||||
|
this.$refs.searchInput.focus()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (index < 0) {
|
||||||
|
parentIndex--
|
||||||
|
index = this.results[parentIndex].items.length - 1
|
||||||
|
}
|
||||||
|
|
||||||
|
let elems = this.$refs[`result-${parentIndex}_${index}`]
|
||||||
|
|
||||||
|
if (this.results[parentIndex].items.length === index) {
|
||||||
|
elems = this.$refs[`result-${parentIndex + 1}_0`]
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof elems === 'undefined' || elems.length === 0) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (Array.isArray(elems)) {
|
||||||
|
elems[0].focus()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
elems.focus()
|
||||||
|
},
|
||||||
|
unselectCmd() {
|
||||||
|
if (this.query !== '') {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
this.selectedCmd = null
|
||||||
|
},
|
||||||
|
reset() {
|
||||||
|
this.query = ''
|
||||||
|
this.selectedCmd = null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
|
@ -8,7 +8,7 @@ import {
|
||||||
LOADING,
|
LOADING,
|
||||||
LOADING_MODULE,
|
LOADING_MODULE,
|
||||||
MENU_ACTIVE,
|
MENU_ACTIVE,
|
||||||
ONLINE,
|
ONLINE, QUICK_ACTIONS_ACTIVE,
|
||||||
} from './mutation-types'
|
} from './mutation-types'
|
||||||
import config from './modules/config'
|
import config from './modules/config'
|
||||||
import auth from './modules/auth'
|
import auth from './modules/auth'
|
||||||
|
@ -44,6 +44,7 @@ export const store = new Vuex.Store({
|
||||||
hasTasks: false,
|
hasTasks: false,
|
||||||
menuActive: true,
|
menuActive: true,
|
||||||
keyboardShortcutsActive: false,
|
keyboardShortcutsActive: false,
|
||||||
|
quickActionsActive: false,
|
||||||
},
|
},
|
||||||
mutations: {
|
mutations: {
|
||||||
[LOADING](state, loading) {
|
[LOADING](state, loading) {
|
||||||
|
@ -60,6 +61,12 @@ export const store = new Vuex.Store({
|
||||||
},
|
},
|
||||||
[CURRENT_LIST](state, currentList) {
|
[CURRENT_LIST](state, currentList) {
|
||||||
|
|
||||||
|
if (currentList === null) {
|
||||||
|
state.currentList = {}
|
||||||
|
state.background = null
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
setTitle(currentList.title)
|
setTitle(currentList.title)
|
||||||
|
|
||||||
// Not sure if this is the right way to do it but hey, it works
|
// Not sure if this is the right way to do it but hey, it works
|
||||||
|
@ -127,5 +134,8 @@ export const store = new Vuex.Store({
|
||||||
[KEYBOARD_SHORTCUTS_ACTIVE](state, active) {
|
[KEYBOARD_SHORTCUTS_ACTIVE](state, active) {
|
||||||
state.keyboardShortcutsActive = active
|
state.keyboardShortcutsActive = active
|
||||||
},
|
},
|
||||||
|
[QUICK_ACTIONS_ACTIVE](state, active) {
|
||||||
|
state.quickActionsActive = active
|
||||||
|
},
|
||||||
},
|
},
|
||||||
})
|
})
|
|
@ -6,6 +6,7 @@ export const CURRENT_LIST = 'currentList'
|
||||||
export const HAS_TASKS = 'hasTasks'
|
export const HAS_TASKS = 'hasTasks'
|
||||||
export const MENU_ACTIVE = 'menuActive'
|
export const MENU_ACTIVE = 'menuActive'
|
||||||
export const KEYBOARD_SHORTCUTS_ACTIVE = 'keyboardShortcutsActive'
|
export const KEYBOARD_SHORTCUTS_ACTIVE = 'keyboardShortcutsActive'
|
||||||
|
export const QUICK_ACTIONS_ACTIVE = 'quickActionsActive'
|
||||||
|
|
||||||
export const CONFIG = 'config'
|
export const CONFIG = 'config'
|
||||||
export const AUTH = 'auth'
|
export const AUTH = 'auth'
|
||||||
|
|
|
@ -23,3 +23,4 @@
|
||||||
@import 'api-config';
|
@import 'api-config';
|
||||||
@import 'datepicker';
|
@import 'datepicker';
|
||||||
@import 'notifications';
|
@import 'notifications';
|
||||||
|
@import 'quick-actions';
|
||||||
|
|
|
@ -72,6 +72,10 @@
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
|
|
||||||
|
&-inline {
|
||||||
|
position: static;
|
||||||
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
display: block;
|
display: block;
|
||||||
|
|
|
@ -1,24 +1,16 @@
|
||||||
.notifications {
|
.notifications {
|
||||||
width: 50px;
|
width: 50px;
|
||||||
|
|
||||||
.trigger {
|
.unread-indicator {
|
||||||
cursor: pointer;
|
position: absolute;
|
||||||
color: $grey-400;
|
top: 1rem;
|
||||||
padding: 1rem;
|
right: .75rem;
|
||||||
font-size: 1.25rem;
|
width: .75rem;
|
||||||
position: relative;
|
height: .75rem;
|
||||||
|
|
||||||
.unread-indicator {
|
background: $primary;
|
||||||
position: absolute;
|
border-radius: 100%;
|
||||||
top: 1rem;
|
border: 2px solid $white;
|
||||||
right: .75rem;
|
|
||||||
width: .75rem;
|
|
||||||
height: .75rem;
|
|
||||||
|
|
||||||
background: $primary;
|
|
||||||
border-radius: 100%;
|
|
||||||
border: 2px solid $white;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.notifications-list {
|
.notifications-list {
|
||||||
|
|
67
src/styles/components/quick-actions.scss
Normal file
67
src/styles/components/quick-actions.scss
Normal file
|
@ -0,0 +1,67 @@
|
||||||
|
.quick-actions {
|
||||||
|
|
||||||
|
.modal-content {
|
||||||
|
top: 6rem !important;
|
||||||
|
transform: translate(-50%, -3rem) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-input {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.input {
|
||||||
|
border: 0;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.has-active-cmd .input {
|
||||||
|
padding-left: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active-cmd {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
margin-left: .5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.results {
|
||||||
|
text-align: left;
|
||||||
|
width: 100%;
|
||||||
|
color: $grey-800;
|
||||||
|
|
||||||
|
.result {
|
||||||
|
&-title {
|
||||||
|
background: $grey-50;
|
||||||
|
padding: .5rem;
|
||||||
|
display: block;
|
||||||
|
font-size: .75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-items {
|
||||||
|
button {
|
||||||
|
font-size: .9rem;
|
||||||
|
width: 100%;
|
||||||
|
background: transparent;
|
||||||
|
text-align: left;
|
||||||
|
box-shadow: none;
|
||||||
|
border-radius: 0;
|
||||||
|
text-transform: none;
|
||||||
|
font-family: $family-sans-serif;
|
||||||
|
font-weight: normal;
|
||||||
|
padding: .5rem .75rem;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:focus, &:hover {
|
||||||
|
background: $grey-50;
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background: $grey-100;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -318,39 +318,50 @@
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar .user {
|
.navbar {
|
||||||
span {
|
.trigger-button {
|
||||||
font-family: $vikunja-font;
|
cursor: pointer;
|
||||||
|
color: $grey-400;
|
||||||
|
padding: 1rem;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar {
|
.user {
|
||||||
-webkit-border-radius: 100%;
|
span {
|
||||||
-moz-border-radius: 100%;
|
font-family: $vikunja-font;
|
||||||
border-radius: 100%;
|
|
||||||
vertical-align: middle;
|
|
||||||
height: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logout-icon {
|
|
||||||
color: $grey-900;
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-trigger .button {
|
.avatar {
|
||||||
background: none;
|
-webkit-border-radius: 100%;
|
||||||
|
-moz-border-radius: 100%;
|
||||||
|
border-radius: 100%;
|
||||||
|
vertical-align: middle;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
&:focus:not(:active), &:active {
|
.logout-icon {
|
||||||
outline: none !important;
|
color: $grey-900;
|
||||||
-webkit-box-shadow: none !important;
|
|
||||||
-moz-box-shadow: none !important;
|
.icon {
|
||||||
box-shadow: none !important;
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-trigger .button {
|
||||||
|
background: none;
|
||||||
|
|
||||||
|
&:focus:not(:active), &:active {
|
||||||
|
outline: none !important;
|
||||||
|
-webkit-box-shadow: none !important;
|
||||||
|
-moz-box-shadow: none !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -429,6 +429,7 @@ import heading from '@/components/tasks/partials/heading'
|
||||||
import Datepicker from '@/components/input/datepicker'
|
import Datepicker from '@/components/input/datepicker'
|
||||||
import {playPop} from '@/helpers/playPop'
|
import {playPop} from '@/helpers/playPop'
|
||||||
import TaskSubscription from '@/components/misc/subscription'
|
import TaskSubscription from '@/components/misc/subscription'
|
||||||
|
import {CURRENT_LIST} from '@/store/mutation-types'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'TaskDetailView',
|
name: 'TaskDetailView',
|
||||||
|
@ -520,7 +521,9 @@ export default {
|
||||||
return null
|
return null
|
||||||
}
|
}
|
||||||
|
|
||||||
return this.$store.getters['namespaces/getListAndNamespaceById'](this.task.listId)
|
const list = this.$store.getters['namespaces/getListAndNamespaceById'](this.task.listId)
|
||||||
|
this.$store.commit(CURRENT_LIST, list.list)
|
||||||
|
return list
|
||||||
},
|
},
|
||||||
canWrite() {
|
canWrite() {
|
||||||
return this.task && this.task.maxRight && this.task.maxRight > rights.READ
|
return this.task && this.task.maxRight && this.task.maxRight > rights.READ
|
||||||
|
|
Loading…
Reference in New Issue
Block a user