konrad
cf136132e3
All checks were successful
continuous-integration/drone/push Build is passing
Center list backgrounds Better alignment of new namespace and filter button Make creating new namespace button clear Hide archived lists unless the user wants it Make all cards responsive Cleanup Show it if a namespace is archived Show if a list is archived Fix not updating the list in store after updating the background Make task cards smaller Display list backgrounds in cards and look good while doing it lighter shadow Change background to stripes Set list backgrounds as card backgrounds Add background color check to color appropriatly Move color check to mixin Use background color from tasks Change list card color Make create new namespace button stick to the right Shadow all the things Don't keep list backgrounds set when navigating back Make links to list clickable Add seperate page for namespaces Co-authored-by: kolaente <k@knt.li> Reviewed-on: #160
215 lines
5.9 KiB
Vue
215 lines
5.9 KiB
Vue
<template>
|
|
<div class="loader-container edit-list" :class="{ 'is-loading': listService.loading}">
|
|
<div class="notification is-warning" v-if="list.isArchived">
|
|
This list is archived.
|
|
It is not possible to create new or edit tasks or it.
|
|
</div>
|
|
<div class="card">
|
|
<header class="card-header">
|
|
<p class="card-header-title">
|
|
Edit List
|
|
</p>
|
|
</header>
|
|
<div class="card-content">
|
|
<div class="content">
|
|
<form @submit.prevent="submit()">
|
|
<div class="field">
|
|
<label class="label" for="listtext">List Name</label>
|
|
<div class="control">
|
|
<input
|
|
v-focus
|
|
:class="{ 'disabled': listService.loading}"
|
|
:disabled="listService.loading"
|
|
class="input"
|
|
type="text"
|
|
id="listtext"
|
|
placeholder="The list title goes here..."
|
|
@keyup.enter="submit"
|
|
v-model="list.title"/>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label
|
|
class="label"
|
|
for="listtext"
|
|
v-tooltip="'The list identifier can be used to uniquely identify a task across lists. You can set it to empty to disable it.'">
|
|
List Identifier
|
|
</label>
|
|
<div class="control">
|
|
<input
|
|
v-focus
|
|
:class="{ 'disabled': listService.loading}"
|
|
:disabled="listService.loading"
|
|
class="input"
|
|
type="text"
|
|
id="listtext"
|
|
placeholder="The list identifier goes here..."
|
|
@keyup.enter="submit"
|
|
v-model="list.identifier"/>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label class="label" for="listdescription">Description</label>
|
|
<div class="control">
|
|
<textarea
|
|
:class="{ 'disabled': listService.loading}"
|
|
:disabled="listService.loading"
|
|
class="textarea"
|
|
placeholder="The lists description goes here..."
|
|
id="listdescription"
|
|
v-model="list.description"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label class="label" for="isArchivedCheck">Is Archived</label>
|
|
<div class="control">
|
|
<fancycheckbox
|
|
v-model="list.isArchived"
|
|
v-tooltip="'If a list is archived, you cannot create new tasks or edit the list or existing tasks.'">
|
|
This list is archived
|
|
</fancycheckbox>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label class="label">Color</label>
|
|
<div class="control">
|
|
<color-picker v-model="list.hexColor"/>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="columns bigbuttons">
|
|
<div class="column">
|
|
<button @click="submit()" class="button is-primary is-fullwidth"
|
|
:class="{ 'is-loading': listService.loading}">
|
|
Save
|
|
</button>
|
|
</div>
|
|
<div class="column is-1">
|
|
<button @click="showDeleteModal = true" class="button is-danger is-fullwidth"
|
|
:class="{ 'is-loading': listService.loading}">
|
|
<span class="icon is-small">
|
|
<icon icon="trash-alt"/>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<background :list-id="$route.params.id"/>
|
|
|
|
<component
|
|
:is="manageUsersComponent"
|
|
:id="list.id"
|
|
type="list"
|
|
shareType="user"
|
|
:userIsAdmin="userIsAdmin"/>
|
|
<component
|
|
:is="manageTeamsComponent"
|
|
:id="list.id"
|
|
type="list"
|
|
shareType="team"
|
|
:userIsAdmin="userIsAdmin"/>
|
|
|
|
<link-sharing :list-id="$route.params.id" v-if="linkSharingEnabled"/>
|
|
|
|
<modal
|
|
v-if="showDeleteModal"
|
|
@close="showDeleteModal = false"
|
|
@submit="deleteList()">
|
|
<span slot="header">Delete the list</span>
|
|
<p slot="text">Are you sure you want to delete this list and all of its contents?
|
|
<br/>This includes all tasks and <b>CANNOT BE UNDONE!</b></p>
|
|
</modal>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import router from '../../router'
|
|
import manageSharing from '../sharing/userTeam'
|
|
import LinkSharing from '../sharing/linkSharing'
|
|
|
|
import ListModel from '../../models/list'
|
|
import ListService from '../../services/list'
|
|
import Fancycheckbox from '../global/fancycheckbox'
|
|
import Background from './settings/background'
|
|
import {CURRENT_LIST} from '../../store/mutation-types'
|
|
import ColorPicker from '../global/colorPicker'
|
|
|
|
export default {
|
|
name: 'EditList',
|
|
data() {
|
|
return {
|
|
list: ListModel,
|
|
listService: ListService,
|
|
|
|
showDeleteModal: false,
|
|
|
|
manageUsersComponent: '',
|
|
manageTeamsComponent: '',
|
|
}
|
|
},
|
|
components: {
|
|
ColorPicker,
|
|
Background,
|
|
Fancycheckbox,
|
|
LinkSharing,
|
|
manageSharing,
|
|
},
|
|
created() {
|
|
this.listService = new ListService()
|
|
this.loadList()
|
|
},
|
|
watch: {
|
|
// call again the method if the route changes
|
|
'$route': 'loadList'
|
|
},
|
|
computed: {
|
|
linkSharingEnabled() {
|
|
return this.$store.state.config.linkSharingEnabled
|
|
},
|
|
userIsAdmin() {
|
|
return this.list.owner && this.list.owner.id === this.$store.state.auth.info.id
|
|
},
|
|
},
|
|
methods: {
|
|
loadList() {
|
|
let list = new ListModel({id: this.$route.params.id})
|
|
this.listService.get(list)
|
|
.then(r => {
|
|
this.$set(this, 'list', r)
|
|
this.$store.commit(CURRENT_LIST, r)
|
|
// This will trigger the dynamic loading of components once we actually have all the data to pass to them
|
|
this.manageTeamsComponent = 'manageSharing'
|
|
this.manageUsersComponent = 'manageSharing'
|
|
})
|
|
.catch(e => {
|
|
this.error(e, this)
|
|
})
|
|
},
|
|
submit() {
|
|
this.listService.update(this.list)
|
|
.then(r => {
|
|
this.$store.commit('namespaces/setListInNamespaceById', r)
|
|
this.success({message: 'The list was successfully updated.'}, this)
|
|
})
|
|
.catch(e => {
|
|
this.error(e, this)
|
|
})
|
|
},
|
|
deleteList() {
|
|
this.listService.delete(this.list)
|
|
.then(() => {
|
|
this.success({message: 'The list was successfully deleted.'}, this)
|
|
router.push({name: 'home'})
|
|
})
|
|
.catch(e => {
|
|
this.error(e, this)
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|