Teren-app/resources/js/Pages/Cases/Show.vue

<script setup>
import PersonInfoGrid from '@/Components/PersonInfoGrid.vue';
import SectionTitle from '@/Components/SectionTitle.vue';
import AppLayout from '@/Layouts/AppLayout.vue';
import { Link, useForm } from '@inertiajs/vue3';
import { FwbA, FwbButton } from 'flowbite-vue';
import { ref } from 'vue';
import ContractDrawer from './Partials/ContractDrawer.vue';
import ContractTable from './Partials/ContractTable.vue';
import ActivityDrawer from './Partials/ActivityDrawer.vue';
import ActivityTable from './Partials/ActivityTable.vue';

const props = defineProps({
    client: Object,
    client_case: Object,
    contracts: Array,
    activities: Object,
    contract_types: Array,
    actions: Array
});

console.log(props.actions);

//Client and case person info card
const clientMainAddress = props.client.person.addresses.filter( a => a.type.id === 1 )[0] ?? '';
const personMainAddress = props.client_case.person.addresses.filter( a => a.type.id === 1 )[0] ?? '';

const clientInfo = new Object({
    nu: props.client.person.nu,
    full_name: props.client.person.full_name,
    main_address: (clientMainAddress.country !== '') ? `${clientMainAddress.address} - ${clientMainAddress.country}` : clientMainAddress.address,
    tax_number: props.client.person.tax_number,
    social_security_number: props.client.person.social_security_number,
    description: props.client.person.description
});

const casePersonInfo = new Object({
    nu: props.client_case.person.nu,
    full_name: props.client_case.person.full_name,
    main_address: (personMainAddress.country !== '') ? `${personMainAddress.address} - ${personMainAddress.country}` : personMainAddress.address,
    tax_number: props.client_case.person.tax_number,
    social_security_number: props.client_case.person.social_security_number,
    description: props.client_case.person.description
});

//Drawer add new contract

const drawerCreateContract = ref(false);

const openDrawerCreateContract = () => {
    drawerCreateContract.value = true;
}

//Drawer add new activity

const drawerAddActivity = ref(false);

const openDrawerAddActivity = () => {
    drawerAddActivity.value = true;
}

//Close drawer (all)
const closeDrawer = () => {
    drawerCreateContract.value = false;
    drawerAddActivity.value = false;
}


</script>
<template>
    <AppLayout title="Client case">
        <template #header></template>
        <div class="pt-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg border-l-4 border-blue-400">
                    <div class="mx-auto max-w-4x1 p-3">
                        <SectionTitle>
                            <template #title>
                                <FwbA class= "hover:text-blue-500" :href="route('client.show', client)">
                                    Client
                                </FwbA>
                            </template>
                            
                        </SectionTitle>
                    </div>
                </div>
            </div>
        </div>
        <div class="pt-1">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg border-l-4 border-blue-400">
                    <div class="mx-auto max-w-4x1 p-3">
                        <PersonInfoGrid :person="clientInfo" />
                    </div>
                </div>
            </div>
        </div>
        <div class="pt-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg border-l-4 border-red-400">
                    <div class="mx-auto max-w-4x1 p-3">
                        <SectionTitle>
                            <template #title>
                                Case
                            </template>
                            
                        </SectionTitle>
                    </div>
                </div>
            </div>
        </div>
        <div class="pt-1">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg border-l-4 border-red-400">
                    <div class="mx-auto max-w-4x1 p-3">
                        <PersonInfoGrid :person="casePersonInfo" />
                    </div>
                </div>
            </div>
        </div>
        <div class="pt-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg border-l-4">
                    <div class="mx-auto max-w-4x1">
                        <div class="flex justify-between p-3">
                            <SectionTitle>
                                <template #title>
                                    Contracts
                                </template>
                            </SectionTitle>
                            <FwbButton @click="openDrawerCreateContract">Add new</FwbButton>
                        </div>
                        <ContractTable 
                            :client_case="client_case"
                            :contracts="contracts"
                            :contract_types="contract_types"
                        />
                    </div>
                </div>
            </div>
        </div>
        <div class="pt-12 pb-6">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg border-l-4">
                    <div class="mx-auto max-w-4x1">
                        <div class="flex justify-between p-3">
                            <SectionTitle>
                                <template #title>
                                    Activities
                                </template>
                            </SectionTitle>
                            <FwbButton @click="openDrawerAddActivity">Add new</FwbButton>
                        </div>
                        <ActivityTable 
                            :client_case="client_case"
                            :activities="activities"
                        />
                    </div>
                </div>
            </div>
        </div>
    </AppLayout>
    <ContractDrawer  
        :show="drawerCreateContract"
        @close="closeDrawer"
        :types="contract_types"
        :client_case="client_case"
    />
    <ActivityDrawer 
        :show="drawerAddActivity"
        @close="closeDrawer"
        :client_case="client_case"
        :actions="actions"
    />
</template>