Allow to change calendar name and color
This commit is contained in:
Raimund Schlüßler
parent
a504c256a2
commit
a14f3cdb74
2 changed files with 119 additions and 111 deletions
|
|
@ -166,7 +166,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapGetters } from 'vuex'
|
||||
import { mapState, mapGetters, mapActions } from 'vuex'
|
||||
import Colorpicker from './Colorpicker'
|
||||
import PopoverMenu from './PopoverMenu'
|
||||
import Confirmation from './Confirmation'
|
||||
|
|
@ -219,112 +219,116 @@ export default {
|
|||
isCalendarNameUsed: 'isCalendarNameUsed'
|
||||
})
|
||||
),
|
||||
methods: {
|
||||
hideCollection: function(collection) {
|
||||
switch (collection.show) {
|
||||
case 0:
|
||||
return true
|
||||
case 1:
|
||||
return false
|
||||
case 2:
|
||||
return this.collectionCount(collection.id) < 1
|
||||
}
|
||||
},
|
||||
showTooltip: function(target) {
|
||||
return this.tooltipTarget === target
|
||||
},
|
||||
edit: function(calendar) {
|
||||
this.editing = calendar.id
|
||||
this.newCalendarName = calendar.displayName
|
||||
this.selectedColor = calendar.color
|
||||
this.nameError = false
|
||||
this.tooltipTarget = ''
|
||||
},
|
||||
resetView: function(calendar) {
|
||||
if (this.editing === calendar.id) {
|
||||
this.editing = ''
|
||||
}
|
||||
if (this.caldav === calendar.id) {
|
||||
this.caldav = ''
|
||||
}
|
||||
this.tooltipTarget = ''
|
||||
},
|
||||
showCalDAVUrl: function(calendar) {
|
||||
this.caldav = calendar.id
|
||||
},
|
||||
exportUrl(calendar) {
|
||||
var url = calendar.url
|
||||
// cut off last slash to have a fancy name for the ics
|
||||
if (url.slice(url.length - 1) === '/') {
|
||||
url = url.slice(0, url.length - 1)
|
||||
}
|
||||
url += '?export'
|
||||
return url
|
||||
},
|
||||
setColor: function(color) {
|
||||
this.selectedColor = color
|
||||
},
|
||||
startCreate: function(e) {
|
||||
if (OCA.Theming) {
|
||||
this.selectedColor = OCA.Theming.color
|
||||
} else {
|
||||
this.selectedColor = '#0082C9'
|
||||
}
|
||||
this.newCalendarName = ''
|
||||
this.creating = true
|
||||
e.stopPropagation()
|
||||
},
|
||||
cancelCreate: function() {
|
||||
this.creating = false
|
||||
},
|
||||
create: function() {
|
||||
// TODO: Call correct methods of store
|
||||
console.log('Create new calendar with name ' + this.newCalendarName + ' and color ' + this.selectedColor)
|
||||
this.creating = false
|
||||
},
|
||||
save: function(calendar) {
|
||||
// TODO: Call correct methods of store
|
||||
console.log('Change name and color of calendar ' + calendar.id + ' to ' + this.newCalendarName + ' and ' + this.selectedColor)
|
||||
this.editing = false
|
||||
},
|
||||
checkName: function(event, id) {
|
||||
var check = this.isNameAllowed(this.newCalendarName, id)
|
||||
this.tooltipMessage = check.msg
|
||||
if (!check.allowed) {
|
||||
this.tooltipTarget = id
|
||||
this.nameError = true
|
||||
} else {
|
||||
this.tooltipTarget = ''
|
||||
methods: Object.assign(
|
||||
mapActions([
|
||||
'changeCalendar'
|
||||
]),
|
||||
{
|
||||
hideCollection: function(collection) {
|
||||
switch (collection.show) {
|
||||
case 0:
|
||||
return true
|
||||
case 1:
|
||||
return false
|
||||
case 2:
|
||||
return this.collectionCount(collection.id) < 1
|
||||
}
|
||||
},
|
||||
showTooltip: function(target) {
|
||||
return this.tooltipTarget === target
|
||||
},
|
||||
edit: function(calendar) {
|
||||
this.editing = calendar.id
|
||||
this.newCalendarName = calendar.displayName
|
||||
this.selectedColor = calendar.color
|
||||
this.nameError = false
|
||||
}
|
||||
if (event.keyCode === 27) {
|
||||
event.preventDefault()
|
||||
this.tooltipTarget = ''
|
||||
},
|
||||
resetView: function(calendar) {
|
||||
if (this.editing === calendar.id) {
|
||||
this.editing = ''
|
||||
}
|
||||
if (this.caldav === calendar.id) {
|
||||
this.caldav = ''
|
||||
}
|
||||
this.tooltipTarget = ''
|
||||
},
|
||||
showCalDAVUrl: function(calendar) {
|
||||
this.caldav = calendar.id
|
||||
},
|
||||
exportUrl(calendar) {
|
||||
var url = calendar.url
|
||||
// cut off last slash to have a fancy name for the ics
|
||||
if (url.slice(url.length - 1) === '/') {
|
||||
url = url.slice(0, url.length - 1)
|
||||
}
|
||||
url += '?export'
|
||||
return url
|
||||
},
|
||||
setColor: function(color) {
|
||||
this.selectedColor = color
|
||||
},
|
||||
startCreate: function(e) {
|
||||
if (OCA.Theming) {
|
||||
this.selectedColor = OCA.Theming.color
|
||||
} else {
|
||||
this.selectedColor = '#0082C9'
|
||||
}
|
||||
this.newCalendarName = ''
|
||||
this.creating = true
|
||||
e.stopPropagation()
|
||||
},
|
||||
cancelCreate: function() {
|
||||
this.creating = false
|
||||
},
|
||||
create: function() {
|
||||
// TODO: Call correct methods of store
|
||||
console.log('Create new calendar with name ' + this.newCalendarName + ' and color ' + this.selectedColor)
|
||||
this.creating = false
|
||||
},
|
||||
save: function(calendar) {
|
||||
this.changeCalendar({ calendar: calendar, newName: this.newCalendarName, newColor: this.selectedColor })
|
||||
this.editing = false
|
||||
this.nameError = false
|
||||
},
|
||||
checkName: function(event, id) {
|
||||
var check = this.isNameAllowed(this.newCalendarName, id)
|
||||
this.tooltipMessage = check.msg
|
||||
if (!check.allowed) {
|
||||
this.tooltipTarget = id
|
||||
this.nameError = true
|
||||
} else {
|
||||
this.tooltipTarget = ''
|
||||
this.nameError = false
|
||||
}
|
||||
if (event.keyCode === 27) {
|
||||
event.preventDefault()
|
||||
this.tooltipTarget = ''
|
||||
this.creating = false
|
||||
this.editing = false
|
||||
this.nameError = false
|
||||
}
|
||||
},
|
||||
isNameAllowed: function(name, id) {
|
||||
var check = {
|
||||
allowed: false,
|
||||
msg: ''
|
||||
}
|
||||
if (this.isCalendarNameUsed(name, id)) {
|
||||
check.msg = t('tasks', 'The name "%s" is already used.').replace('%s', name)
|
||||
} else if (!name) {
|
||||
check.msg = t('tasks', 'An empty name is not allowed.')
|
||||
} else {
|
||||
check.allowed = true
|
||||
}
|
||||
return check
|
||||
},
|
||||
deleteMessage: function(name) {
|
||||
return t('tasks', 'This will delete the calendar "%s" and all corresponding events and tasks.').replace('%s', name)
|
||||
},
|
||||
deleteCalendar: function(calendar) {
|
||||
console.log('Delete calendar ' + calendar.id)
|
||||
}
|
||||
},
|
||||
isNameAllowed: function(name, id) {
|
||||
var check = {
|
||||
allowed: false,
|
||||
msg: ''
|
||||
}
|
||||
if (this.isCalendarNameUsed(name, id)) {
|
||||
check.msg = t('tasks', 'The name "%s" is already used.').replace('%s', name)
|
||||
} else if (!name) {
|
||||
check.msg = t('tasks', 'An empty name is not allowed.')
|
||||
} else {
|
||||
check.allowed = true
|
||||
}
|
||||
return check
|
||||
},
|
||||
deleteMessage: function(name) {
|
||||
return t('tasks', 'This will delete the calendar "%s" and all corresponding events and tasks.').replace('%s', name)
|
||||
},
|
||||
deleteCalendar: function(calendar) {
|
||||
console.log('Delete calendar ' + calendar.id)
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -212,15 +212,17 @@ const mutations = {
|
|||
},
|
||||
|
||||
/**
|
||||
* Rename a calendar
|
||||
* Change name and color of calendar
|
||||
* @param {Object} context the store mutations
|
||||
* @param {Object} data destructuring object
|
||||
* @param {Object} data.calendar the calendar to rename
|
||||
* @param {Object} data.calendar the calendar to change
|
||||
* @param {String} data.newName the new name of the calendar
|
||||
* @param {String} data.newColor the new color of the calendar
|
||||
*/
|
||||
renameCalendar(context, { calendar, newName }) {
|
||||
renameCalendar(context, { calendar, newName, newColor }) {
|
||||
calendar = state.calendars.find(search => search.id === calendar.id)
|
||||
calendar.displayName = newName
|
||||
calendar.color = newColor
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -338,10 +340,10 @@ const actions = {
|
|||
return mapDavCollectionToCalendar(calendar)
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
// remove calendars which don't support tasks
|
||||
calendars = calendars.filter(calendar => calendar.supportsTasks)
|
||||
|
||||
|
||||
calendars.forEach(calendar => {
|
||||
context.commit('addCalendar', calendar)
|
||||
})
|
||||
|
|
@ -397,16 +399,18 @@ const actions = {
|
|||
},
|
||||
|
||||
/**
|
||||
* Rename a calendar
|
||||
* Change name and color of calendar
|
||||
* @param {Object} context the store mutations Current context
|
||||
* @param {Object} data.calendar the calendar to rename
|
||||
* @param {Object} data.calendar the calendar to change
|
||||
* @param {String} data.newName the new name of the calendar
|
||||
* @param {String} data.newColor the new color of the calendar
|
||||
* @returns {Promise}
|
||||
*/
|
||||
async renameCalendar(context, { calendar, newName }) {
|
||||
async changeCalendar(context, { calendar, newName, newColor }) {
|
||||
calendar.dav.displayname = newName
|
||||
calendar.dav.color = newColor
|
||||
return calendar.dav.update()
|
||||
.then((response) => context.commit('renameCalendar', { calendar, newName }))
|
||||
.then((response) => context.commit('renameCalendar', { calendar, newName, newColor }))
|
||||
.catch((error) => { throw error })
|
||||
},
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue