use/useDetailView

Overview

Provides all reactive state and behaviour for a detail view that fetches and displays a single model instance. Handles object fetching, title computation, action and transition availability, error combination, and populating a form initial-values object from the fetched data.

Used directly by DetailView.vue and intended as a building block for custom detail-view shells in consuming projects.

Examples

<script setup>
import { useDetailView } from "@vueda/use/useDetailView.js";
import { useForm } from "@vueda/use/useForm.js";
import { useObjectForm } from "@vueda/use/useObjectForm.js";
import { reactive, toRef } from "vue";

const props = defineProps({ app: String, model: String, pk: String });
const formContextProps = reactive({ initialValues: {} });
useForm(formContextProps);
const { modelConfig, instance, actions } = useDetailView(props, formContextProps.initialValues);
</script>

import { usePageTitle } from "@vueda/use/usePageTitle.js";

// The layout's PageTitle shows a skeleton while the title is empty.
usePageTitle(() => ({ title: instance.titleStr, loading: instance.pageLoading }));

<template v-for="actionName in actions.nonDetailActions" :key="actionName">
    <link-model-view :app="app" :model="model" :view="actionName" />
</template>
<template v-for="actionName in actions.detailActions" :key="actionName">
    <link-model-view :app="app" :model="model" :pk="pk" :view="actionName" button />
</template>
<template v-for="transition in actions.availableTransitions" :key="transition">
    <link-model-view :app="app" :model="model" :pk="pk" :view="transition" button />
</template>

<error-display
    :error="instance.combinedError"
    :errored="instance.combinedErrored"
    :while-text="instance.combinedWhileText"
/>
<form :id="instance.formId" @submit.prevent="objectForm.submit">
    <form-model v-bind="instance.combinedFormProps" />
</form>
<!-- Required: resolves submit-time warning confirmations (HTTP 409); without it warned saves are cancelled. -->
<form-confirm-dialog :controller="objectForm.confirmation" />

Methods

• useDetailView - Extracts all reactive state and wiring for a detail view of a single model instance.

Types

DetailViewActionsGroup

DetailViewContext

DetailViewInstanceGroup

DetailViewOptions

Required identification.

Source

client/lib/use/useDetailView.js:1