refactor(client): Use v-model for note component, freeze object

Related: #6595
This commit is contained in:
syuilo 2020-07-27 23:25:37 +09:00
parent cf43dd6ec5
commit 14b7f05af4
10 changed files with 111 additions and 70 deletions

View file

@ -15,7 +15,7 @@
</div>
<x-list ref="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed">
<x-note :note="note" :detail="detail" :key="note._featuredId_ || note._prId_ || note.id"/>
<x-note :note="note" @updated="updated(note, $event)" :detail="detail" :key="note._featuredId_ || note._prId_ || note.id"/>
</x-list>
<div v-show="more && !reversed" style="margin-top: var(--margin);">
@ -62,14 +62,15 @@ export default Vue.extend({
default: false
},
extract: {
prop: {
type: String,
required: false
}
},
computed: {
notes(): any[] {
return this.extract ? this.extract(this.items) : this.items;
return this.prop ? this.items.map(item => item[this.prop]) : this.items;
},
reversed(): boolean {
@ -78,6 +79,15 @@ export default Vue.extend({
},
methods: {
updated(oldValue, newValue) {
const i = this.notes.findIndex(n => n === oldValue);
if (this.prop) {
Vue.set(this.items[i], this.prop, newValue);
} else {
Vue.set(this.items, i, newValue);
}
},
focus() {
this.$refs.notes.focus();
}