forked from vikunja/frontend
konrad
cac8b09263
Prevent dropping a task onto a bucket which has its limit reached Fix closing the dropdown Add notice to show the limit Add input to change kanban bucket limit Add menu item to save bucket limit Fix parsing dates from the api Co-authored-by: kolaente <k@knt.li> Reviewed-on: vikunja/frontend#234
194 lines
6.4 KiB
JavaScript
194 lines
6.4 KiB
JavaScript
import Vue from 'vue'
|
|
import App from './App.vue'
|
|
import router from './router'
|
|
|
|
import {VERSION} from './version.json'
|
|
console.info(`Vikunja frontend version ${VERSION}`)
|
|
|
|
// Make sure the api url does not contain a / at the end
|
|
if(window.API_URL.substr(window.API_URL.length - 1, window.API_URL.length) === '/') {
|
|
window.API_URL = window.API_URL.substr(0, window.API_URL.length - 1)
|
|
}
|
|
|
|
// Register the modal
|
|
import Modal from './components/modal/modal'
|
|
Vue.component('modal', Modal)
|
|
|
|
// Add CSS
|
|
import './styles/vikunja.scss'
|
|
|
|
Vue.config.productionTip = false
|
|
|
|
// Notifications
|
|
import Notifications from 'vue-notification'
|
|
Vue.use(Notifications)
|
|
|
|
// Icons
|
|
import { library } from '@fortawesome/fontawesome-svg-core'
|
|
import { faSignOutAlt } from '@fortawesome/free-solid-svg-icons'
|
|
import { faPlus } from '@fortawesome/free-solid-svg-icons'
|
|
import { faListOl } from '@fortawesome/free-solid-svg-icons'
|
|
import { faTasks } from '@fortawesome/free-solid-svg-icons'
|
|
import { faCog } from '@fortawesome/free-solid-svg-icons'
|
|
import { faAngleRight } from '@fortawesome/free-solid-svg-icons'
|
|
import { faLayerGroup } from '@fortawesome/free-solid-svg-icons'
|
|
import { faTrashAlt } from '@fortawesome/free-solid-svg-icons'
|
|
import { faUsers } from '@fortawesome/free-solid-svg-icons'
|
|
import { faUser } from '@fortawesome/free-solid-svg-icons'
|
|
import { faLock } from '@fortawesome/free-solid-svg-icons'
|
|
import { faPen } from '@fortawesome/free-solid-svg-icons'
|
|
import { faTimes } from '@fortawesome/free-solid-svg-icons'
|
|
import { faTachometerAlt } from '@fortawesome/free-solid-svg-icons'
|
|
import { faCalendar } from '@fortawesome/free-solid-svg-icons'
|
|
import { faBars } from '@fortawesome/free-solid-svg-icons'
|
|
import { faPowerOff } from '@fortawesome/free-solid-svg-icons'
|
|
import { faCalendarWeek } from '@fortawesome/free-solid-svg-icons'
|
|
import { faExclamation } from '@fortawesome/free-solid-svg-icons'
|
|
import { faTags } from '@fortawesome/free-solid-svg-icons'
|
|
import { faChevronDown } from '@fortawesome/free-solid-svg-icons'
|
|
import { faCheck } from '@fortawesome/free-solid-svg-icons'
|
|
import { faPaste } from '@fortawesome/free-solid-svg-icons'
|
|
import { faPencilAlt } from '@fortawesome/free-solid-svg-icons'
|
|
import { faTimesCircle } from '@fortawesome/free-regular-svg-icons'
|
|
import { faCalendarAlt } from '@fortawesome/free-regular-svg-icons'
|
|
import { faCloudDownloadAlt } from '@fortawesome/free-solid-svg-icons'
|
|
import { faCloudUploadAlt } from '@fortawesome/free-solid-svg-icons'
|
|
import { faPercent } from '@fortawesome/free-solid-svg-icons'
|
|
import { faStar } from '@fortawesome/free-regular-svg-icons'
|
|
import { faAlignLeft } from '@fortawesome/free-solid-svg-icons'
|
|
import { faPaperclip } from '@fortawesome/free-solid-svg-icons'
|
|
import { faClock } from '@fortawesome/free-regular-svg-icons'
|
|
import { faHistory } from '@fortawesome/free-solid-svg-icons'
|
|
import { faSearch } from '@fortawesome/free-solid-svg-icons'
|
|
import { faCheckDouble } from '@fortawesome/free-solid-svg-icons'
|
|
import { faTh } from '@fortawesome/free-solid-svg-icons'
|
|
import { faSort } from '@fortawesome/free-solid-svg-icons'
|
|
import { faSortUp } from '@fortawesome/free-solid-svg-icons'
|
|
import { faList } from '@fortawesome/free-solid-svg-icons'
|
|
import { faEllipsisV } from '@fortawesome/free-solid-svg-icons'
|
|
import { faFilter } from '@fortawesome/free-solid-svg-icons'
|
|
import { faFillDrip } from '@fortawesome/free-solid-svg-icons'
|
|
import { faKeyboard } from '@fortawesome/free-solid-svg-icons'
|
|
import { faComments } from '@fortawesome/free-regular-svg-icons'
|
|
import { faSave } from '@fortawesome/free-regular-svg-icons'
|
|
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
|
|
|
library.add(faSignOutAlt)
|
|
library.add(faPlus)
|
|
library.add(faListOl)
|
|
library.add(faTasks)
|
|
library.add(faCog)
|
|
library.add(faAngleRight)
|
|
library.add(faLayerGroup)
|
|
library.add(faTrashAlt)
|
|
library.add(faUsers)
|
|
library.add(faUser)
|
|
library.add(faLock)
|
|
library.add(faPen)
|
|
library.add(faTimes)
|
|
library.add(faTachometerAlt)
|
|
library.add(faCalendar)
|
|
library.add(faTimesCircle)
|
|
library.add(faBars)
|
|
library.add(faPowerOff)
|
|
library.add(faCalendarWeek)
|
|
library.add(faCalendarAlt)
|
|
library.add(faExclamation)
|
|
library.add(faTags)
|
|
library.add(faChevronDown)
|
|
library.add(faCheck)
|
|
library.add(faPaste)
|
|
library.add(faPencilAlt)
|
|
library.add(faCloudDownloadAlt)
|
|
library.add(faCloudUploadAlt)
|
|
library.add(faPercent)
|
|
library.add(faStar)
|
|
library.add(faAlignLeft)
|
|
library.add(faPaperclip)
|
|
library.add(faClock)
|
|
library.add(faHistory)
|
|
library.add(faSearch)
|
|
library.add(faCheckDouble)
|
|
library.add(faComments)
|
|
library.add(faTh)
|
|
library.add(faSort)
|
|
library.add(faSortUp)
|
|
library.add(faList)
|
|
library.add(faEllipsisV)
|
|
library.add(faFilter)
|
|
library.add(faFillDrip)
|
|
library.add(faKeyboard)
|
|
library.add(faSave)
|
|
|
|
Vue.component('icon', FontAwesomeIcon)
|
|
|
|
// Tooltip
|
|
import VTooltip from 'v-tooltip'
|
|
Vue.use(VTooltip, {defaultHtml: false})
|
|
|
|
// PWA
|
|
import './registerServiceWorker'
|
|
|
|
// Shortcuts
|
|
import vueShortkey from 'vue-shortkey'
|
|
Vue.use(vueShortkey)
|
|
|
|
// Set focus
|
|
Vue.directive('focus', {
|
|
// When the bound element is inserted into the DOM...
|
|
inserted: (el, {modifiers}) => {
|
|
// Focus the element only if the viewport is big enough
|
|
// auto focusing elements on mobile can be annoying since in these cases the
|
|
// keyboard always pops up and takes half of the available space on the screen.
|
|
// The threshhold is the same as the breakpoints in css.
|
|
if (window.innerWidth > 769 || (typeof modifiers.always !== 'undefined' && modifiers.always)) {
|
|
el.focus()
|
|
}
|
|
}
|
|
})
|
|
|
|
// Mixins
|
|
import message from './message'
|
|
import {format, formatDistance} from 'date-fns'
|
|
import {colorIsDark} from './helpers/colorIsDark'
|
|
import {setTitle} from './helpers/setTitle'
|
|
Vue.mixin({
|
|
methods: {
|
|
formatDateSince: date => {
|
|
if (typeof date === 'string') {
|
|
date = new Date(date)
|
|
}
|
|
const currentDate = new Date()
|
|
let formatted = '';
|
|
if (date > currentDate) {
|
|
formatted += 'in '
|
|
}
|
|
formatted += formatDistance(date, currentDate)
|
|
if(date < currentDate) {
|
|
formatted += ' ago'
|
|
}
|
|
|
|
return formatted;
|
|
},
|
|
formatDate: date => {
|
|
if (typeof date === 'string') {
|
|
date = new Date(date)
|
|
}
|
|
return date ? format(date, 'PPPPpppp'): ''
|
|
},
|
|
error: (e, context, actions = []) => message.error(e, context, actions),
|
|
success: (s, context, actions = []) => message.success(s, context, actions),
|
|
colorIsDark: colorIsDark,
|
|
setTitle: setTitle,
|
|
}
|
|
})
|
|
|
|
// Vuex
|
|
import {store} from './store'
|
|
|
|
new Vue({
|
|
router,
|
|
store,
|
|
render: h => h(App)
|
|
}).$mount('#app')
|