<template>
<Head title="Module" />
<BreezeAuthenticatedLayout>
<template #header>
<div class="grid grid-flow-col">
<div class="col-span-8">
<Title :module="$page.props.module" page_description="Details" />
</div>
<div class="col-span-4">
<HeadButtons
class="col-span-2"
:module="$page.props.module"
:permissions="$page.props.permissions"
:allowed="['import', 'add', 'export', 'edit', 'delete', 'convert_to', 'audit_log']"
:record="$page.props.record"
/>
</div>
</div>
</template>
<BreadCrumbs :levels="$page.props.breadcrumbs" />
<div class="max-w-full grid col-end-auto col-auto place-items-end">
<div>
<label class="input-group">
<a class="btn btn-ghost" v-if="$page.props.previous" :href="`/module/${$page.props.module.name}/view/${$page.props.previous}`" method="get" as="button">
Previous
</a>
<a class="btn btn-ghost" v-if="$page.props.next" :href="`/module/${$page.props.module.name}/view/${$page.props.next}`" method="get" as="button">
Next
</a>
</label>
</div>
</div>
<div class="max-w-full sm:px-3 lg:px-4">
<div class="max-w-full bg-primary shadow-sm sm:rounded-lg">
<div class="p-6 bg-base-200 text-base-content border-b border-gray-200">
<div class="">
<div class="grid grid-col-1 md:grid-cols-3 gap-4">
<div class="card shadow-xl bg-base-100" v-for="field in $page.props.fields">
<div class="card-body h-100 w-200">
<h2 class="card-title font-light text-xs">{{field.label}}</h2>
<Display class="font-medium"
v-bind:data_value="$page.props.record[field.name]"
v-bind:record="$page.props.record"
v-bind:field="field"
v-bind:remove_links="1"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="max-w-full grid col-end-auto col-auto place-items-end">
<div>
<label class="input-group">
<a class="btn btn-ghost" v-if="$page.props.previous" :href="`/module/${$page.props.module.name}/view/${$page.props.previous}`" method="get" as="button">
Previous
</a>
<a class="btn btn-ghost" v-if="$page.props.next" :href="`/module/${$page.props.module.name}/view/${$page.props.next}`" method="get" as="button">
Next
</a>
</label>
</div>
</div>
<div class="max-w-full grid col-auto">
<div class="p-5" v-for="subpanel_id in $page.props.subpanel_ids">
<Subpanel
:record_id="$page.props.record.id"
:module_id="$page.props.module.id"
v-bind:id="subpanel_id"
:permissions="$page.props.permissions"
/>
</div>
</div>
</BreezeAuthenticatedLayout>
</template>
<script setup>
import BreezeAuthenticatedLayout from '@/Layouts/Authenticated.vue';
import { Head } from '@inertiajs/inertia-vue3';
import Display from '@/Components/Fields/Display';
import Subpanel from "@/Pages/Subpanel";
import BreadCrumbs from "@/Components/BreadCrumbs";
import HeadButtons from "@/Components/Header/Buttons";
import Title from "@/Components/Header/Title";
</script>
|