classic-ui/components/ProposalCommentFormModal.vue
2022-08-05 17:49:08 +10:00

123 lines
3.0 KiB
Vue

<template>
<div class="modal-card box box-modal">
<header class="box-modal-header is-spaced">
<div class="box-modal-title">{{ $t('proposalComment.modal-title', { id: proposal.id }) }}</div>
<button type="button" class="delete" @click="$emit('close')" />
</header>
<p class="detail" v-text="$t('proposalComment.modal-subtitle')" />
<div class="columns is-multiline">
<div class="column is-12">
<b-field>
<template #label>
{{ $t('proposalComment.form-contact') }}
<b-tooltip
:label="$t('proposalComment.form-contact-tooltip')"
size="is-medium"
position="is-top"
multilined
>
<button class="button is-primary has-icon">
<span class="icon icon-info"></span>
</button>
</b-tooltip>
</template>
<b-input
v-model.trim="form.contact"
:maxlength="limit / 2"
:has-counter="false"
:placeholder="$t('proposalComment.form-contact-placeholder')"
/>
</b-field>
</div>
<div class="column is-12">
<b-field
:message="fields.message ? '' : $t('proposalComment.form-message-required')"
:type="{ 'is-warning': !fields.message && !support }"
:label="$t('proposalComment.form-message')"
>
<b-input
v-model="form.message"
:maxlength="limit"
type="textarea"
:placeholder="
support
? $t('proposalComment.form-message-opt-placeholder')
: $t('proposalComment.form-message-placeholder')
"
/>
</b-field>
</div>
</div>
<b-button v-if="support" type="is-primary" icon-left="check" outlined @click="onCastVote(true)">
{{ $t('for') }}
</b-button>
<b-button v-else type="is-danger" icon-left="close" outlined @click="onCastVote(false)">
{{ $t('against') }}
</b-button>
</div>
</template>
<script>
const MESSAGE_LIMIT = 100
export default {
props: {
support: {
type: Boolean,
required: true
},
proposal: {
type: Object,
required: true,
validator: (prop) => 'id' in prop
}
},
data: () => ({
limit: MESSAGE_LIMIT,
fields: {
contact: true,
message: true
},
form: {
contact: '',
message: ''
}
}),
methods: {
validate() {
const { form, fields, support } = this
fields.contact = form.contact.length <= this.limit
fields.message = support
? form.message.length <= this.limit
: form.message.length > 2 && form.message.length <= this.limit
return fields.contact && fields.message
},
onCastVote() {
const isValid = this.validate()
if (isValid) {
this.$emit('castVote', this.form)
this.$emit('close')
}
}
}
}
</script>
<style lang="scss" scoped>
.box-modal {
overflow: initial !important;
}
.detail {
margin-bottom: 1.25rem;
}
</style>