Eli Ribble
cecb9ef0f0
Some checks failed
/ golint (push) Failing after 10s
These changes are meant to make it possible for new events that come in to immediately render in the components that depend on them.
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 Array.from(storeResource.contact.byURI.values());
|
|
});
|
|
const selectedContact = ref<Contact | undefined>(undefined);
|
|
const handleSelectionChange = (selection: Contact | undefined) => {
|
|
selectedContact.value = selection;
|
|
};
|
|
</script>
|