konrad
4b3f92ae34
All checks were successful
continuous-integration/drone/push Build is passing
Make backgrounds list responsive Show initial collection of backgrounds Remove test data Fix "backgroundInformation is null" when navigating Fix kanban height Remove debug log Move list title to top header Add styling for title in top header Set the current list (and background) when loading settings Only load the background if it changed Make task detail view look good again Fix bottom spacing Make list and table view look good again Make pages with background at least 100vh Fix kanban height Make extra buttons look good again Move list title and view-switcher in one row Add styling for backgrounds Set background globally Add getting list background and putting it in vuex Add setting list background Move list background setting to seperate list Add search timeout to not search on every keypress Add getting thumbnails through api Add basic search for unsplash backgrounds Co-authored-by: kolaente <k@knt.li> Reviewed-on: #144
223 lines
6.0 KiB
Vue
223 lines
6.0 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">
|
|
<verte
|
|
v-model="list.hexColor"
|
|
menuPosition="top"
|
|
picker="square"
|
|
model="hex"
|
|
:enableAlpha="false"
|
|
:rgbSliders="true"/>
|
|
</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 verte from 'verte'
|
|
import 'verte/dist/verte.css'
|
|
|
|
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'
|
|
|
|
export default {
|
|
name: "EditList",
|
|
data() {
|
|
return {
|
|
list: ListModel,
|
|
listService: ListService,
|
|
|
|
showDeleteModal: false,
|
|
|
|
manageUsersComponent: '',
|
|
manageTeamsComponent: '',
|
|
}
|
|
},
|
|
components: {
|
|
Background,
|
|
Fancycheckbox,
|
|
LinkSharing,
|
|
manageSharing,
|
|
verte,
|
|
},
|
|
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>
|