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
|
||||
YARN_CACHE_FOLDER: .cache/yarn/
|
||||
CYPRESS_CACHE_FOLDER: .cache/cypress/
|
||||
CYPRESS_DEFAULT_COMMAND_TIMEOUT: 10000
|
||||
CYPRESS_DEFAULT_COMMAND_TIMEOUT: 20000
|
||||
commands:
|
||||
- sed -i 's/localhost/api/g' public/index.html
|
||||
- yarn serve & npx wait-on http://localhost:8080
|
||||
|
|
|
@ -4,5 +4,8 @@
|
|||
"API_URL": "http://localhost:3456/api/v1",
|
||||
"TEST_SECRET": "testingS3cr3et"
|
||||
},
|
||||
"video": false
|
||||
"video": false,
|
||||
"retries": {
|
||||
"runMode": 2
|
||||
}
|
||||
}
|
||||
|
|
|
@ -10,10 +10,12 @@ import {BucketFactory} from '../../factories/bucket'
|
|||
import '../../support/authenticateUser'
|
||||
|
||||
describe('Lists', () => {
|
||||
let lists
|
||||
|
||||
beforeEach(() => {
|
||||
UserFactory.create(1)
|
||||
NamespaceFactory.create(1)
|
||||
const lists = ListFactory.create(1, {
|
||||
lists = ListFactory.create(1, {
|
||||
title: 'First List'
|
||||
})
|
||||
TaskFactory.truncate()
|
||||
|
@ -54,6 +56,64 @@ describe('Lists', () => {
|
|||
.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', () => {
|
||||
it('Should be an empty list', () => {
|
||||
cy.visit('/lists/1')
|
||||
|
@ -202,11 +262,15 @@ describe('Lists', () => {
|
|||
|
||||
it('Shows tasks from the current and next month', () => {
|
||||
const now = new Date()
|
||||
const nextMonth = now
|
||||
nextMonth.setDate(1)
|
||||
nextMonth.setMonth(now.getMonth() + 1)
|
||||
|
||||
cy.visit('/lists/1/gantt')
|
||||
|
||||
cy.get('.gantt-chart-container .gantt-chart .months')
|
||||
.should('contain', format(now, 'MMMM'))
|
||||
.should('contain', format(now.setMonth(now.getMonth() + 1), 'MMMM'))
|
||||
.should('contain', format(nextMonth, 'MMMM'))
|
||||
})
|
||||
|
||||
it('Shows tasks with dates', () => {
|
||||
|
@ -401,7 +465,7 @@ describe('Lists', () => {
|
|||
})
|
||||
cy.visit('/lists/1/kanban')
|
||||
|
||||
cy.getAttached('.kanban .bucket .tasks .task')
|
||||
cy.getSettled('.kanban .bucket .tasks .task')
|
||||
.contains(tasks[0].title)
|
||||
.should('be.visible')
|
||||
.click()
|
||||
|
@ -423,7 +487,7 @@ describe('Lists', () => {
|
|||
const task = tasks[0]
|
||||
cy.visit('/lists/1/kanban')
|
||||
|
||||
cy.getAttached('.kanban .bucket .tasks .task')
|
||||
cy.getSettled('.kanban .bucket .tasks .task')
|
||||
.contains(task.title)
|
||||
.should('be.visible')
|
||||
.click()
|
||||
|
|
|
@ -3,6 +3,7 @@ import {UserFactory} from '../../factories/user'
|
|||
import '../../support/authenticateUser'
|
||||
import {ListFactory} from '../../factories/list'
|
||||
import {NamespaceFactory} from '../../factories/namespace'
|
||||
import {TaskFactory} from '../../factories/task'
|
||||
|
||||
describe('Namepaces', () => {
|
||||
let namespaces
|
||||
|
@ -20,20 +21,82 @@ describe('Namepaces', () => {
|
|||
})
|
||||
|
||||
it('Should create a new Namespace', () => {
|
||||
const newNamespaceTitle = 'New Namespace'
|
||||
|
||||
cy.visit('/namespaces')
|
||||
cy.get('a.button')
|
||||
.contains('Create namespace')
|
||||
.click()
|
||||
|
||||
cy.url()
|
||||
.should('contain', '/namespaces/new')
|
||||
cy.get('.card-header-title')
|
||||
.should('contain', 'Create a new namespace')
|
||||
cy.get('input.input')
|
||||
.type('New Namespace')
|
||||
.type(newNamespaceTitle)
|
||||
cy.get('.button')
|
||||
.contains('Create')
|
||||
.click()
|
||||
|
||||
cy.get('.global-notification')
|
||||
.should('contain', 'Success')
|
||||
cy.get('.namespace-container')
|
||||
.should('contain', newNamespaceTitle)
|
||||
cy.url()
|
||||
.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 {LabelFactory} from '../../factories/labels'
|
||||
import {LabelTaskFactory} from '../../factories/label_task'
|
||||
import {BucketFactory} from '../../factories/bucket'
|
||||
|
||||
describe('Task', () => {
|
||||
let namespaces
|
||||
|
@ -112,9 +113,10 @@ describe('Task', () => {
|
|||
cy.visit(`/tasks/${tasks[0].id}`)
|
||||
|
||||
cy.get('.task-view .heading .is-done')
|
||||
.should('exist')
|
||||
.should('be.visible')
|
||||
.should('contain', 'Done')
|
||||
cy.get('.task-view .action-buttons p.created')
|
||||
.should('be.visible')
|
||||
.should('contain', 'Done')
|
||||
})
|
||||
|
||||
|
@ -182,9 +184,11 @@ describe('Task', () => {
|
|||
cy.visit(`/tasks/${tasks[0].id}`)
|
||||
|
||||
cy.get('.task-view .comments .media.comment .editor .vue-easymde .EasyMDEContainer .CodeMirror-scroll')
|
||||
.should('be.visible')
|
||||
.type('{selectall}New Comment')
|
||||
cy.get('.task-view .comments .media.comment .button:not([disabled])')
|
||||
.contains('Comment')
|
||||
.should('be.visible')
|
||||
.click()
|
||||
|
||||
cy.get('.task-view .comments .media.comment .editor')
|
||||
|
@ -195,6 +199,9 @@ describe('Task', () => {
|
|||
|
||||
it('Can move a task to another list', () => {
|
||||
const lists = ListFactory.create(2)
|
||||
BucketFactory.create(2, {
|
||||
list_id: '{increment}'
|
||||
})
|
||||
const tasks = TaskFactory.create(1, {
|
||||
id: 1,
|
||||
list_id: lists[0].id,
|
||||
|
@ -228,6 +235,7 @@ describe('Task', () => {
|
|||
cy.visit(`/tasks/${tasks[0].id}`)
|
||||
|
||||
cy.get('.task-view .action-buttons .button')
|
||||
.should('be.visible')
|
||||
.contains('Delete task')
|
||||
.click()
|
||||
cy.get('.modal-mask .modal-container .modal-content .header')
|
||||
|
@ -310,6 +318,7 @@ describe('Task', () => {
|
|||
|
||||
cy.get('.task-view .action-buttons .button')
|
||||
.contains('Add labels')
|
||||
.should('be.visible')
|
||||
.click()
|
||||
cy.get('.task-view .details.labels-list .multiselect input')
|
||||
.type(newLabelText)
|
||||
|
@ -365,6 +374,7 @@ describe('Task', () => {
|
|||
cy.visit(`/tasks/${tasks[0].id}`)
|
||||
|
||||
cy.get('.task-view .details.labels-list .multiselect .input-wrapper')
|
||||
.should('be.visible')
|
||||
.should('contain', labels[0].title)
|
||||
cy.get('.task-view .details.labels-list .multiselect .input-wrapper')
|
||||
.children()
|
||||
|
|
|
@ -1,17 +1,33 @@
|
|||
/**
|
||||
* getAttached(selector)
|
||||
* getAttached(selectorFn)
|
||||
* Recursively gets an element, returning only after it's determined to be attached to the DOM for good.
|
||||
*
|
||||
* Waits until the selector finds an attached element, then yields it (wrapped).
|
||||
* selectorFn, if provided, is passed $(document). Don't use cy methods inside selectorFn.
|
||||
*
|
||||
* Source: https://github.com/cypress-io/cypress/issues/5743#issuecomment-650421731
|
||||
* Source: https://github.com/cypress-io/cypress/issues/7306#issuecomment-850621378
|
||||
*/
|
||||
Cypress.Commands.add('getAttached', selector => {
|
||||
const getElement = typeof selector === 'function' ? selector : $d => $d.find(selector);
|
||||
let $el = null;
|
||||
return cy.document().should($d => {
|
||||
$el = getElement(Cypress.$($d));
|
||||
expect(Cypress.dom.isDetached($el)).to.be.false;
|
||||
}).then(() => cy.wrap($el));
|
||||
});
|
||||
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)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
16
package.json
16
package.json
|
@ -17,16 +17,16 @@
|
|||
"bulma": "0.9.2",
|
||||
"camel-case": "4.1.2",
|
||||
"copy-to-clipboard": "3.3.1",
|
||||
"date-fns": "2.21.3",
|
||||
"dompurify": "2.2.8",
|
||||
"highlight.js": "10.7.2",
|
||||
"date-fns": "2.22.1",
|
||||
"dompurify": "2.2.9",
|
||||
"highlight.js": "11.0.0",
|
||||
"lodash": "4.17.21",
|
||||
"marked": "2.0.5",
|
||||
"marked": "2.0.7",
|
||||
"register-service-worker": "1.7.2",
|
||||
"sass": "1.34.0",
|
||||
"snake-case": "3.0.4",
|
||||
"verte": "0.0.12",
|
||||
"vue": "2.6.12",
|
||||
"vue": "2.6.13",
|
||||
"vue-advanced-cropper": "1.6.0",
|
||||
"vue-drag-resize": "1.5.4",
|
||||
"vue-easymde": "1.4.0",
|
||||
|
@ -49,14 +49,14 @@
|
|||
"cypress": "7.4.0",
|
||||
"cypress-file-upload": "5.0.7",
|
||||
"eslint": "7.27.0",
|
||||
"eslint-plugin-vue": "7.9.0",
|
||||
"eslint-plugin-vue": "7.10.0",
|
||||
"faker": "5.5.3",
|
||||
"jest": "27.0.1",
|
||||
"jest": "27.0.3",
|
||||
"sass-loader": "10.2.0",
|
||||
"vue-flatpickr-component": "8.1.6",
|
||||
"vue-notification": "1.3.20",
|
||||
"vue-router": "3.5.1",
|
||||
"vue-template-compiler": "2.6.12",
|
||||
"vue-template-compiler": "2.6.13",
|
||||
"wait-on": "5.3.0"
|
||||
},
|
||||
"eslintConfig": {
|
||||
|
|
|
@ -20,6 +20,8 @@
|
|||
>
|
||||
<a @click="$store.commit('menuActive', false)" class="mobile-overlay" v-if="menuActive"></a>
|
||||
|
||||
<quick-actions/>
|
||||
|
||||
<router-view/>
|
||||
|
||||
<transition name="modal">
|
||||
|
@ -43,10 +45,11 @@
|
|||
import {mapState} from 'vuex'
|
||||
import {CURRENT_LIST, KEYBOARD_SHORTCUTS_ACTIVE, MENU_ACTIVE} from '@/store/mutation-types'
|
||||
import Navigation from '@/components/home/navigation'
|
||||
import QuickActions from '@/components/quick-actions/quick-actions'
|
||||
|
||||
export default {
|
||||
name: 'contentAuth',
|
||||
components: {Navigation},
|
||||
components: {QuickActions, Navigation},
|
||||
watch: {
|
||||
'$route': 'doStuffAfterRoute',
|
||||
},
|
||||
|
@ -83,7 +86,7 @@ export default {
|
|||
this.$route.name === 'user.settings' ||
|
||||
this.$route.name === 'namespaces.index'
|
||||
) {
|
||||
this.$store.commit(CURRENT_LIST, {})
|
||||
this.$store.commit(CURRENT_LIST, null)
|
||||
}
|
||||
},
|
||||
renewTokenOnFocus() {
|
||||
|
|
|
@ -37,6 +37,14 @@
|
|||
|
||||
<div class="navbar-end">
|
||||
<update/>
|
||||
<a
|
||||
@click="openQuickActions"
|
||||
class="trigger-button pr-0"
|
||||
@shortkey="openQuickActions"
|
||||
v-shortkey="['ctrl', 'k']"
|
||||
>
|
||||
<icon icon="search"/>
|
||||
</a>
|
||||
<notifications/>
|
||||
<div class="user">
|
||||
<img :src="userAvatar" alt="" class="avatar"/>
|
||||
|
@ -83,7 +91,7 @@
|
|||
|
||||
<script>
|
||||
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 Update from '@/components/home/update'
|
||||
import ListSettingsDropdown from '@/components/list/list-settings-dropdown'
|
||||
|
@ -113,6 +121,9 @@ export default {
|
|||
this.$store.dispatch('auth/logout')
|
||||
this.$router.push({name: 'user.login'})
|
||||
},
|
||||
openQuickActions() {
|
||||
this.$store.commit(QUICK_ACTIONS_ACTIVE, true)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
@ -369,7 +369,7 @@ export default {
|
|||
highlight: function (code, language) {
|
||||
const hljs = require('highlight.js')
|
||||
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>
|
||||
|
||||
<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 '../../styles/theme/variables/all';
|
||||
|
||||
|
|
|
@ -34,7 +34,7 @@
|
|||
</div>
|
||||
|
||||
<transition name="fade">
|
||||
<div class="search-results" v-if="searchResultsVisible">
|
||||
<div class="search-results" :class="{'search-results-inline': inline}" v-if="searchResultsVisible">
|
||||
<button
|
||||
v-if="creatableAvailable"
|
||||
class="is-fullwidth"
|
||||
|
@ -166,6 +166,27 @@ export default {
|
|||
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() {
|
||||
document.addEventListener('click', this.hideSearchResultsHandler)
|
||||
|
@ -181,10 +202,14 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
searchResultsVisible() {
|
||||
if(this.query === '' && !this.showEmpty) {
|
||||
return false
|
||||
}
|
||||
|
||||
return this.showSearchResults && (
|
||||
(this.filteredSearchResults.length > 0) ||
|
||||
(this.creatable && this.query !== '')
|
||||
)
|
||||
(this.filteredSearchResults.length > 0) ||
|
||||
(this.creatable && this.query !== '')
|
||||
)
|
||||
},
|
||||
creatableAvailable() {
|
||||
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,
|
||||
// getting the value manual does.
|
||||
this.query = this.$refs.searchInput.value
|
||||
|
||||
|
||||
if (this.searchTimeout !== null) {
|
||||
clearTimeout(this.searchTimeout)
|
||||
this.searchTimeout = null
|
||||
|
@ -225,7 +250,7 @@ export default {
|
|||
this.localLoading = false
|
||||
}, 100) // The duration of the loading timeout of the services
|
||||
this.showSearchResults = true
|
||||
}, 200)
|
||||
}, this.searchDelay)
|
||||
},
|
||||
hideSearchResultsHandler(e) {
|
||||
closeWhenClickedOutside(e, this.$refs.multiselectRoot, this.closeSearchResults)
|
||||
|
|
|
@ -3,14 +3,23 @@
|
|||
<div @click.self="close()" class="modal-container">
|
||||
<div class="modal-content">
|
||||
<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>
|
||||
<strong>Toggle The Menu</strong>
|
||||
<shortcut :keys="['ctrl', 'e']"/>
|
||||
</p>
|
||||
<p>
|
||||
<strong>Open the search/quick action bar</strong>
|
||||
<shortcut :keys="['ctrl', 'k']"/>
|
||||
</p>
|
||||
<h3>Kanban</h3>
|
||||
<div class="message is-primary" v-if="$route.name === 'list.kanban'">
|
||||
<div class="message-body">
|
||||
These shortcuts work on the current page.
|
||||
These shortcuts work only on the current page.
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
|
@ -22,7 +31,7 @@
|
|||
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'">
|
||||
<div class="message-body">
|
||||
These shortcuts work on the current page.
|
||||
These shortcuts work only on the current page.
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<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>
|
||||
<icon icon="bell"/>
|
||||
</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_MODULE,
|
||||
MENU_ACTIVE,
|
||||
ONLINE,
|
||||
ONLINE, QUICK_ACTIONS_ACTIVE,
|
||||
} from './mutation-types'
|
||||
import config from './modules/config'
|
||||
import auth from './modules/auth'
|
||||
|
@ -44,6 +44,7 @@ export const store = new Vuex.Store({
|
|||
hasTasks: false,
|
||||
menuActive: true,
|
||||
keyboardShortcutsActive: false,
|
||||
quickActionsActive: false,
|
||||
},
|
||||
mutations: {
|
||||
[LOADING](state, loading) {
|
||||
|
@ -60,6 +61,12 @@ export const store = new Vuex.Store({
|
|||
},
|
||||
[CURRENT_LIST](state, currentList) {
|
||||
|
||||
if (currentList === null) {
|
||||
state.currentList = {}
|
||||
state.background = null
|
||||
return
|
||||
}
|
||||
|
||||
setTitle(currentList.title)
|
||||
|
||||
// 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) {
|
||||
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 MENU_ACTIVE = 'menuActive'
|
||||
export const KEYBOARD_SHORTCUTS_ACTIVE = 'keyboardShortcutsActive'
|
||||
export const QUICK_ACTIONS_ACTIVE = 'quickActionsActive'
|
||||
|
||||
export const CONFIG = 'config'
|
||||
export const AUTH = 'auth'
|
||||
|
|
|
@ -23,3 +23,4 @@
|
|||
@import 'api-config';
|
||||
@import 'datepicker';
|
||||
@import 'notifications';
|
||||
@import 'quick-actions';
|
||||
|
|
|
@ -72,6 +72,10 @@
|
|||
max-width: 100%;
|
||||
min-width: 100%;
|
||||
|
||||
&-inline {
|
||||
position: static;
|
||||
}
|
||||
|
||||
button {
|
||||
background: transparent;
|
||||
display: block;
|
||||
|
|
|
@ -1,24 +1,16 @@
|
|||
.notifications {
|
||||
width: 50px;
|
||||
|
||||
.trigger {
|
||||
cursor: pointer;
|
||||
color: $grey-400;
|
||||
padding: 1rem;
|
||||
font-size: 1.25rem;
|
||||
position: relative;
|
||||
.unread-indicator {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: .75rem;
|
||||
width: .75rem;
|
||||
height: .75rem;
|
||||
|
||||
.unread-indicator {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: .75rem;
|
||||
width: .75rem;
|
||||
height: .75rem;
|
||||
|
||||
background: $primary;
|
||||
border-radius: 100%;
|
||||
border: 2px solid $white;
|
||||
}
|
||||
background: $primary;
|
||||
border-radius: 100%;
|
||||
border: 2px solid $white;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar .user {
|
||||
span {
|
||||
font-family: $vikunja-font;
|
||||
.navbar {
|
||||
.trigger-button {
|
||||
cursor: pointer;
|
||||
color: $grey-400;
|
||||
padding: 1rem;
|
||||
font-size: 1.25rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
-webkit-border-radius: 100%;
|
||||
-moz-border-radius: 100%;
|
||||
border-radius: 100%;
|
||||
vertical-align: middle;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.logout-icon {
|
||||
color: $grey-900;
|
||||
|
||||
.icon {
|
||||
vertical-align: middle;
|
||||
.user {
|
||||
span {
|
||||
font-family: $vikunja-font;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-trigger .button {
|
||||
background: none;
|
||||
.avatar {
|
||||
-webkit-border-radius: 100%;
|
||||
-moz-border-radius: 100%;
|
||||
border-radius: 100%;
|
||||
vertical-align: middle;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
&:focus:not(:active), &:active {
|
||||
outline: none !important;
|
||||
-webkit-box-shadow: none !important;
|
||||
-moz-box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
.logout-icon {
|
||||
color: $grey-900;
|
||||
|
||||
.icon {
|
||||
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 {playPop} from '@/helpers/playPop'
|
||||
import TaskSubscription from '@/components/misc/subscription'
|
||||
import {CURRENT_LIST} from '@/store/mutation-types'
|
||||
|
||||
export default {
|
||||
name: 'TaskDetailView',
|
||||
|
@ -520,7 +521,9 @@ export default {
|
|||
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() {
|
||||
return this.task && this.task.maxRight && this.task.maxRight > rights.READ
|
||||
|
|
Loading…
Reference in New Issue
Block a user