123 lines
3.6 KiB
Vue
123 lines
3.6 KiB
Vue
<template>
|
|
<div
|
|
class="row w-100 mx-auto"
|
|
v-if="dataReady"
|
|
>
|
|
<div class="col-12 col-xl-4 mb-3 mb-md-0">
|
|
<ClaimActions
|
|
:auth-user-id="authUserId"
|
|
:claim-model="claimModel"
|
|
:brand-models="brandModels"
|
|
:claim-subject-models="claimSubjectModels"
|
|
:claim-template-models="claimTemplateModels"
|
|
:enums="enums"
|
|
:can="can"
|
|
:all-errors="allErrors"
|
|
@update-messages="udpateMessages"
|
|
/>
|
|
</div>
|
|
<div class="col-12 col-xl-8">
|
|
<ClaimConversation
|
|
:auth-user-id="authUserId"
|
|
:claim-model="claimModel"
|
|
:claim-message-models="claimMessageModels"
|
|
:all-errors="allErrors"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, useAttrs, onMounted, ref } from "vue";
|
|
import type { PropType } from "vue";
|
|
import ClaimActions from "./ClaimActionsComponent.vue";
|
|
import ClaimConversation from "./ClaimConversationComponent.vue";
|
|
|
|
defineOptions({
|
|
name: "ClaimWrapperComponent",
|
|
});
|
|
|
|
// * ATTRIBUTES
|
|
const attrs = useAttrs();
|
|
|
|
// * PROPS
|
|
const props = defineProps({
|
|
authUserId: {
|
|
type: Number,
|
|
default: Math.pow(10, 16) / Math.random(),
|
|
},
|
|
claimModel: {
|
|
type: Object as PropType<LaravelModel & LaravelModelClaimRelations>,
|
|
default: () => { return {}; },
|
|
},
|
|
brandModels: {
|
|
type: Object as PropType<LaravelPaginator>,
|
|
default: () => { return {}; },
|
|
},
|
|
claimSubjectModels: {
|
|
type: Object as PropType<LaravelPaginator>,
|
|
default: () => { return {}; },
|
|
},
|
|
claimTemplateModels: {
|
|
type: Object as PropType<LaravelPaginator>,
|
|
default: () => { return {}; },
|
|
},
|
|
claimMessageModels: {
|
|
type: Object as PropType<Array<LaravelModel & LaravelModelUserRelation>>,
|
|
default: () => { return []; },
|
|
},
|
|
enums: {
|
|
type: Object as PropType<Record<string, Array<Enum>>>,
|
|
default: () => { return {}; },
|
|
},
|
|
can: {
|
|
type: Object as PropType<Record<string, boolean>>,
|
|
default: () => { return {}; },
|
|
},
|
|
allErrors: {
|
|
type: Object as PropType<LaravelValidationErrors>,
|
|
default: () => { return {}; },
|
|
},
|
|
});
|
|
|
|
// * DATA
|
|
const dataReady = ref(false);
|
|
const authUserId = ref<number>(props.authUserId);
|
|
const claimModel = ref<LaravelModel & LaravelModelClaimRelations>(props.claimModel);
|
|
const brandModels = ref<LaravelPaginator>(props.brandModels);
|
|
const claimSubjectModels = ref<LaravelPaginator>(props.claimSubjectModels);
|
|
const claimTemplateModels = ref<LaravelPaginator>(props.claimTemplateModels);
|
|
const claimMessageModels = ref<Array<LaravelModel & LaravelModelUserRelation>>(props.claimMessageModels);
|
|
const enums = ref<Record<string,Array<Enum>>>(props.enums);
|
|
const can = ref<Record<string,boolean>>(props.can);
|
|
const allErrors = ref<LaravelValidationErrors>(props.allErrors);
|
|
|
|
// * COMPUTED
|
|
const isUsedWithProps = computed<boolean>(() => attrs.json === undefined);
|
|
|
|
// * LIFECYCLE
|
|
onMounted((): void => {
|
|
const json = String(attrs.json ?? "{}"),
|
|
data = JSON.parse(json);
|
|
if (!isUsedWithProps.value) {
|
|
authUserId.value = data.authUserId;
|
|
claimModel.value = data.claimModel;
|
|
claimSubjectModels.value = data.claimSubjectModels;
|
|
claimTemplateModels.value = data.claimTemplateModels;
|
|
claimMessageModels.value = data.claimMessageModels;
|
|
brandModels.value = data.brandModels;
|
|
enums.value = data.enums;
|
|
can.value = data.can;
|
|
allErrors.value = data.allErrors;
|
|
}
|
|
dataReady.value = true;
|
|
});
|
|
|
|
/**
|
|
* Updae conversation messages.
|
|
* @return void
|
|
*/
|
|
function udpateMessages(messagesList: typeof claimMessageModels.value): void {
|
|
claimMessageModels.value = messagesList;
|
|
}
|
|
</script>
|