Move communication workbench to use resource store

Because it's getting better all the time, including by adding the
ability to get new resources when they get created over SSE.
This commit is contained in:
Eli Ribble 2026-05-20 23:49:59 +00:00
parent 72eef554ea
commit b4ae9e5a95
No known key found for this signature in database
6 changed files with 50 additions and 116 deletions

View file

@ -16,14 +16,17 @@
<CommunicationColumnList
:all="visibleCommunications"
@deselect="handleDeselect"
:loading="storeCommunication.loading"
:loading="storeResource.communication.loadingAll()"
:selectedID="selectedId"
@select="handleSelect"
/>
</template>
<template #center>
<CommunicationColumnDetail
:loading="storePublicReport.loading || storeCommunication.loading"
:loading="
storePublicReport.loading ||
storeResource.communication.loadingURI(selectedCommunication?.uri)
"
:mapBounds="mapBounds || undefined"
:mapMarkers="mapMarkers"
:selectedCommunication="selectedCommunication"
@ -33,7 +36,10 @@
</template>
<template #right>
<CommunicationColumnAction
:isLoading="storePublicReport.loading || storeCommunication.loading"
:isLoading="
storePublicReport.loading ||
storeResource.communication.loadingURI(selectedCommunication?.uri)
"
@markInvalid="markInvalid"
@markPendingResponse="markPendingResponse"
@markPossibleIssue="markPossibleIssue"
@ -73,7 +79,7 @@ import ThreeColumn from "@/components/layout/ThreeColumn.vue";
import ToastNotification from "@/components/ToastNotification.vue";
import { useQueryParam } from "@/composable/use-query-param";
import { SSEManager } from "@/SSEManager";
import { useCommunicationStore } from "@/store/communication";
import { useStoreResource } from "@/store/resource";
import { useSessionStore } from "@/store/session";
import type { Marker } from "@/types";
import { Bounds, type Communication, PublicReport } from "@/type/api";
@ -88,8 +94,8 @@ const currentImageIndex = ref<number>(0);
const paramCommunication = useQueryParam("communication");
const selectedId = ref<string | undefined>(undefined);
const showImageModal = ref(false);
const storeCommunication = useCommunicationStore();
const storePublicReport = useStorePublicReport();
const storeResource = useStoreResource();
const toastMessage = ref("");
const toastShow = ref(false);
const toastTitle = ref("");
@ -168,16 +174,13 @@ const mapMarkers = computed<Marker[]>((): Marker[] => {
}
return markers;
});
const selectedCommunication = computed<Communication | null>(
(): Communication | null => {
const selectedCommunication = computedAsync(
async (): Promise<Communication | undefined> => {
if (selectedId.value == undefined) {
return null;
return undefined;
}
if (storeCommunication.all == null) {
return null;
}
const result = storeCommunication.all.find((c) => c.id == selectedId.value);
return result || null;
const all = await storeResource.communication.byAll();
return all.find((c: Communication) => c.id == selectedId.value);
},
);
const selectedReport = computedAsync(
@ -192,14 +195,14 @@ const selectedReport = computedAsync(
return await storePublicReport.byURI(selectedCommunication.value.source);
},
);
const visibleCommunications = computed((): Communication[] => {
if (!storeCommunication.all) {
return [];
}
return storeCommunication.all.filter((c: Communication) => {
return c.status == "new" || c.status == "opened";
});
});
const visibleCommunications = computedAsync(
async (): Promise<Communication[]> => {
const all = await storeResource.communication.byAll();
return all.filter((c: Communication) => {
return c.status == "new" || c.status == "opened";
});
},
);
const handleDeselect = (id: string) => {
selectedId.value = undefined;
};
@ -245,27 +248,9 @@ async function markReport(title: string, status: string) {
`Report Marked ${title}`,
`Report #${selectedCommunication.value.id} has been updated`,
);
removeCurrentFromList();
await storeCommunication.fetchAll();
await storeResource.communication.fetchAll();
}
function removeCurrentFromList() {
if (storeCommunication.all == null) {
return;
}
const index = storeCommunication.all.findIndex(
(c) => c.id === selectedId.value,
);
if (index > -1) {
storeCommunication.all.splice(index, 1);
}
if (storeCommunication.all.length > 0) {
const nextIndex = Math.min(index, storeCommunication.all.length - 1);
selectedId.value = storeCommunication.all[nextIndex].id;
} else {
selectedId.value = undefined;
}
}
async function sendMessage(message: string) {
if (!message.trim()) return;
if (selectedCommunication.value == null) return;
@ -306,7 +291,7 @@ function showNotification(title: string, message: string) {
// Lifecycle hooks
onMounted(async () => {
await storeCommunication.fetchAll();
await storeResource.communication.fetchAll();
});
watch(
paramCommunication.value,