nidus-sync/ts/view/review/Contact.vue

<template>
	<ThreeColumn>
		<template #left>
			<ReviewContactColumnList
				:contacts="contacts"
				:loading="storeResource.contact.loadingAll()"
				@selection-change="handleSelectionChange"
			/>
		</template>
		<template #center>
			<ReviewContactColumnDetail :contact="selectedContact" />
		</template>
		<template #right>
			<ReviewContactColumnAction />
		</template>
	</ThreeColumn>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { computedAsync } from "@vueuse/core";

import ThreeColumn from "@/components/layout/ThreeColumn.vue";
import ReviewContactColumnAction from "@/components/ReviewContactColumnAction.vue";
import ReviewContactColumnDetail from "@/components/ReviewContactColumnDetail.vue";
import ReviewContactColumnList from "@/components/ReviewContactColumnList.vue";
import { useStoreResource } from "@/store/resource";
import { Contact } from "@/type/api";

const storeResource = useStoreResource();
const contacts = computedAsync(() => {
	return Array.from(storeResource.contact.byURI.values());
});
const selectedContact = ref<Contact | undefined>(undefined);
const handleSelectionChange = (selection: Contact | undefined) => {
	selectedContact.value = selection;
};
onMounted(async () => {
	await storeResource.contact.fetchAll();
});
</script>