refs #2068 Change edit icon in lists index

This commit is contained in:
AkiraFukushima 2021-01-24 15:31:34 +09:00
parent 4ccde9926f
commit bd6ca2a4dd
1 changed files with 32 additions and 34 deletions

View File

@ -1,24 +1,24 @@
<template> <template>
<div id="lists"> <div id="lists">
<div class="new-list" v-loading="creating" :element-loading-background="loadingBackground"> <div class="new-list" v-loading="creating" :element-loading-background="loadingBackground">
<el-form :inline="true"> <el-form :inline="true">
<input v-model="title" :placeholder="$t('lists.index.new_list')" class="list-title"></input> <input v-model="title" :placeholder="$t('lists.index.new_list')" class="list-title" />
<el-button type="text" class="create" @click="createList"> <el-button type="text" class="create" @click="createList">
<icon name="plus"></icon> <icon name="plus"></icon>
</el-button> </el-button>
</el-form> </el-form>
</div> </div>
<div class="list" v-for="list in lists" :key="list.id"> <div class="list" v-for="list in lists" :key="list.id">
<router-link tag="div" class="title" :to="`/${id()}/lists/${list.id}`"> <router-link tag="div" class="title" :to="`/${id()}/lists/${list.id}`">
{{ list.title }} {{ list.title }}
</router-link> </router-link>
<div class="tools"> <div class="tools">
<el-button type="text" @click="edit(list)"> <el-button type="text" @click="edit(list)">
{{ $t('lists.index.edit') }} <icon name="regular/edit"></icon>
</el-button> </el-button>
</div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
@ -26,7 +26,7 @@ import { mapState } from 'vuex'
export default { export default {
name: 'lists', name: 'lists',
data () { data() {
return { return {
title: '', title: '',
creating: false creating: false
@ -38,27 +38,25 @@ export default {
loadingBackground: state => state.App.theme.wrapper_mask_color loadingBackground: state => state.App.theme.wrapper_mask_color
}) })
}, },
created () { created() {
this.$store.commit('TimelineSpace/changeLoading', true) this.$store.commit('TimelineSpace/changeLoading', true)
this.fetch() this.fetch().finally(() => {
.finally(() => { this.$store.commit('TimelineSpace/changeLoading', false)
this.$store.commit('TimelineSpace/changeLoading', false) })
})
}, },
methods: { methods: {
id () { id() {
return this.$route.params.id return this.$route.params.id
}, },
fetch () { fetch() {
return this.$store.dispatch('TimelineSpace/Contents/Lists/Index/fetchLists') return this.$store.dispatch('TimelineSpace/Contents/Lists/Index/fetchLists').catch(() => {
.catch(() => { this.$message({
this.$message({ message: this.$t('message.lists_fetch_error'),
message: this.$t('message.lists_fetch_error'), type: 'error'
type: 'error'
})
}) })
})
}, },
async createList () { async createList() {
this.creating = true this.creating = true
try { try {
await this.$store.dispatch('TimelineSpace/Contents/Lists/Index/createList', this.title) await this.$store.dispatch('TimelineSpace/Contents/Lists/Index/createList', this.title)
@ -73,7 +71,7 @@ export default {
} }
await this.$store.dispatch('TimelineSpace/SideMenu/fetchLists') await this.$store.dispatch('TimelineSpace/SideMenu/fetchLists')
}, },
edit (list) { edit(list) {
return this.$router.push(`/${this.id()}/lists/${list.id}/edit`) return this.$router.push(`/${this.id()}/lists/${list.id}/edit`)
} }
} }