37 lines
1.2 KiB
Vue
37 lines
1.2 KiB
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 { 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 storeResource.contact.byAll();
|
|
});
|
|
const selectedContact = ref<Contact | undefined>(undefined);
|
|
const handleSelectionChange = (selection: Contact | undefined) => {
|
|
selectedContact.value = selection;
|
|
};
|
|
</script>
|