User note See merge request pleroma/pleroma-fe!1612merge-requests/1722/head
commit
e009510c52
@ -0,0 +1,45 @@
|
||||
const UserNote = {
|
||||
props: {
|
||||
user: Object,
|
||||
relationship: Object,
|
||||
editable: Boolean
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
localNote: '',
|
||||
editing: false,
|
||||
frozen: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
shouldShow () {
|
||||
return this.relationship.note || this.editing
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
startEditing () {
|
||||
this.localNote = this.relationship.note
|
||||
this.editing = true
|
||||
},
|
||||
cancelEditing () {
|
||||
this.editing = false
|
||||
},
|
||||
finalizeEditing () {
|
||||
this.frozen = true
|
||||
|
||||
this.$store.dispatch('editUserNote', {
|
||||
id: this.user.id,
|
||||
comment: this.localNote
|
||||
})
|
||||
.then(() => {
|
||||
this.frozen = false
|
||||
this.editing = false
|
||||
})
|
||||
.catch(() => {
|
||||
this.frozen = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default UserNote
|
@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<div
|
||||
class="user-note"
|
||||
>
|
||||
<div class="heading">
|
||||
<span>{{ $t('user_card.note') }}</span>
|
||||
<div class="buttons">
|
||||
<button
|
||||
v-show="!editing && editable"
|
||||
class="button-default btn"
|
||||
@click="startEditing"
|
||||
>
|
||||
{{ $t('user_card.edit_note') }}
|
||||
</button>
|
||||
<button
|
||||
v-show="editing"
|
||||
class="button-default btn"
|
||||
:disabled="frozen"
|
||||
@click="finalizeEditing"
|
||||
>
|
||||
{{ $t('user_card.edit_note_apply') }}
|
||||
</button>
|
||||
<button
|
||||
v-show="editing"
|
||||
class="button-default btn"
|
||||
:disabled="frozen"
|
||||
@click="cancelEditing"
|
||||
>
|
||||
{{ $t('user_card.edit_note_cancel') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<textarea
|
||||
v-show="editing"
|
||||
v-model="localNote"
|
||||
class="note-text"
|
||||
/>
|
||||
<span
|
||||
v-show="!editing"
|
||||
class="note-text"
|
||||
:class="{ '-blank': !relationship.note }"
|
||||
>
|
||||
{{ relationship.note || $t('user_card.note_blank') }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="./user_note.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../variables';
|
||||
|
||||
.user-note {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.heading {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0.75em;
|
||||
|
||||
.btn {
|
||||
min-width: 95px;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: right;
|
||||
|
||||
.btn {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.note-text {
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.note-text.-blank {
|
||||
font-style: italic;
|
||||
color: var(--faint, $fallback--faint);
|
||||
}
|
||||
}
|
||||
</style>
|
Loading…
Reference in new issue