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

140 lines
3.2 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"
:disabled="!isValid"
type="is-primary"
icon-left="check"
outlined
@click="onCastVote(true)"
>
{{ $t('for') }}
</b-button>
<b-button
v-else
:disabled="!isValid"
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: ''
}
}),
computed: {
isValid() {
return this.validate()
}
},
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() {
if (this.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>