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:
parent
72eef554ea
commit
b4ae9e5a95
6 changed files with 50 additions and 116 deletions
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue