You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
143 lines
3.0 KiB
143 lines
3.0 KiB
<template>
|
|
<div class="grid grid-cols-3 gap-4">
|
|
<div class="col-span-2">
|
|
<BaseInputText
|
|
id="item_title"
|
|
v-model="v$.item.title.$model"
|
|
v-model:error-text="v$.item.title.required.$message"
|
|
v-model:is-invalid="v$.item.title.$invalid"
|
|
:label="t('Title')"
|
|
/>
|
|
|
|
<slot></slot>
|
|
</div>
|
|
|
|
<div>
|
|
<div v-if="attachments && attachments.length > 0">
|
|
<div
|
|
v-t="'Attachments'"
|
|
class="text-h6"
|
|
/>
|
|
|
|
<ul>
|
|
<li
|
|
v-for="(attachment, index) in attachments"
|
|
:key="index"
|
|
class="my-2"
|
|
>
|
|
<audio
|
|
v-if="attachment.type.indexOf('audio') === 0"
|
|
class="max-w-full"
|
|
controls
|
|
>
|
|
<source :src="URL.createObjectURL(attachment)" />
|
|
</audio>
|
|
</li>
|
|
</ul>
|
|
|
|
<hr />
|
|
</div>
|
|
|
|
<AudioRecorder @attach-audio="attachAudios" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import has from "lodash/has"
|
|
import useVuelidate from "@vuelidate/core"
|
|
import { required } from "@vuelidate/validators"
|
|
import AudioRecorder from "../AudioRecorder"
|
|
import BaseInputText from "../basecomponents/BaseInputText.vue"
|
|
import { useI18n } from "vue-i18n"
|
|
|
|
export default {
|
|
name: "MessageForm",
|
|
components: { AudioRecorder, BaseInputText },
|
|
emits: ["update:attachments"],
|
|
setup() {
|
|
const { t } = useI18n()
|
|
|
|
return { v$: useVuelidate(), URL, t }
|
|
},
|
|
props: {
|
|
values: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
errors: {
|
|
type: Object,
|
|
default: () => {},
|
|
},
|
|
initialValues: {
|
|
type: Object,
|
|
default: () => {},
|
|
},
|
|
attachments: {
|
|
type: Array,
|
|
required: false,
|
|
default: () => [],
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
title: null,
|
|
parentResourceNodeId: null,
|
|
receiversTo: [],
|
|
receiversCc: [],
|
|
}
|
|
},
|
|
computed: {
|
|
item() {
|
|
return this.initialValues || this.values
|
|
},
|
|
receiversErrors() {
|
|
const errors = []
|
|
if (!this.v$.item.receiversTo.$dirty) return errors
|
|
has(this.violations, "receiversTo") && errors.push(this.violations.receiversTo)
|
|
|
|
if (this.v$.item.receiversTo.required) {
|
|
return this.$t("Field is required")
|
|
}
|
|
|
|
return errors
|
|
},
|
|
titleErrors() {
|
|
const errors = []
|
|
if (!this.v$.item.title.$dirty) return errors
|
|
has(this.violations, "title") && errors.push(this.violations.title)
|
|
|
|
if (this.v$.item.title.required) {
|
|
return this.$t("Field is required")
|
|
}
|
|
|
|
return errors
|
|
},
|
|
|
|
violations() {
|
|
return this.errors || {}
|
|
},
|
|
},
|
|
methods: {
|
|
attachAudios(audio) {
|
|
this.$emit("update:attachments", [...this.attachments, audio])
|
|
},
|
|
},
|
|
validations: {
|
|
item: {
|
|
title: {
|
|
required,
|
|
},
|
|
receiversTo: {
|
|
required,
|
|
},
|
|
/*receiversCc: {
|
|
required,
|
|
},*/
|
|
content: {
|
|
required,
|
|
},
|
|
},
|
|
},
|
|
}
|
|
</script> |