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 { FwbButton } from "flowbite-vue";
import { onBeforeMount, 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";
import { AngleDownIcon, AngleUpIcon } from "@/Utilities/Icons";

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

const clientDetails = ref(true);

//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;
};

const showClientDetails = () => {
  clientDetails.value = false;
};

const hideClietnDetails = () => {
  clientDetails.value = true;
};
</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-500"
        >
          <div class="mx-auto max-w-4x1 p-3 flex justify-between">
            <SectionTitle>
              <template #title>
                <a class="hover:text-blue-500" :href="route('client.show', client)">
                  {{ client.person.full_name }}
                </a>
              </template>
            </SectionTitle>
            <button @click="showClientDetails" :hidden="clientDetails ? false : true">
              <AngleUpIcon />
            </button>
            <button :hidden="clientDetails" @click="hideClietnDetails">
              <AngleDownIcon />
            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="pt-1" :hidden="clientDetails">
      <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 :types="types" :person="client.person" />
          </div>
        </div>
      </div>
    </div>
    <div class="pt-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 border-red-400"
        >
          <div class="mx-auto max-w-4x1 p-3">
            <SectionTitle>
              <template #title> Primer - oseba </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 :types="types" tab-color="red-600" :person="client_case.person" />
          </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> Pogodbe </template>
              </SectionTitle>
              <FwbButton @click="openDrawerCreateContract">Nova</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> Aktivnosti </template>
              </SectionTitle>
              <FwbButton @click="openDrawerAddActivity">Nova</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>