Merge pull request #54 from simonsobs/dev

Show error on dialog when adding or removing on queue fails

src/components/queue/ErrorDialog.vue

@@ -0,0 +1,29 @@
+<template>
+  <v-dialog v-model="show" max-width="800">
+    <v-card class="pa-2">
+      <v-card-title class="text-error"> An error occurred</v-card-title>
+      <v-card-text class="text-error"> <pre>{{ error }}</pre> </v-card-text>
+      <v-card-actions class="mt-5">
+        <v-spacer></v-spacer>
+        <v-btn variant="text" color="primary" @click="onOk"> OK </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import type { CombinedError } from '@urql/vue';
+const show = defineModel<boolean>();
+interface Props {
+  error?: CombinedError;
+}
+type Emits = {
+  ok: [];
+};
+defineProps<Props>();
+const emit = defineEmits<Emits>();
+function onOk() {
+  emit("ok");
+  show.value = false;
+}
+</script>

src/components/queue/add/AddDialog.vue

@@ -27,20 +27,24 @@
     </v-sheet>
     <discard-confirmation-dialog
       v-model="dialogConfirmDiscard"
-      @confirm="discardConfirmed"
+      @confirm="clearAndClose"
     >
     </discard-confirmation-dialog>
     <LoadingIndicator v-model="loading"> </LoadingIndicator>
+    <ErrorDialog v-model="dialogError" :error="error">
+    </ErrorDialog>
   </v-dialog>
 </template>
 
 <script setup lang="ts">
 import { ref, computed } from "vue";
 import { useDisplay } from "vuetify";
+import type { CombinedError } from "@urql/vue";
 import ItemAdd from "./ItemAdd.vue";
 import type { State } from "./ItemAdd.vue";
 import DiscardConfirmationDialog from "./DiscardConfirmationDialog.vue";
 import LoadingIndicator from "../LoadingIndicator.vue";
+import ErrorDialog from "../ErrorDialog.vue";
 import { useItems } from "../items";
 const show = defineModel<boolean>();
 const { mobile } = useDisplay();
@@ -52,30 +56,36 @@ const valid = ref<boolean>();
 const dirty = ref<boolean>();
 const dialogConfirmDiscard = ref<boolean>(false);
 const loading = ref<boolean>(false);
+const dialogError = ref<boolean>(false);
+const error = ref<CombinedError>();
+
+function clearAndClose() {
+  state.value = undefined;
+  show.value = false;
+}
 
 // Show the confirmation dialog if the form is edited
 function onClickCancel() {
   if (dirty.value) {
     dialogConfirmDiscard.value = true;
   } else {
-    show.value = false;
+    clearAndClose();
   }
 }
 
-function discardConfirmed() {
-  state.value = undefined;
-  show.value = false;
-}
-
 const { addItem } = useItems();
 
 async function onClickAdd() {
   if (state.value === undefined) return;
   loading.value = true;
-  await addItem(state.value);
+  const result = await addItem(state.value);
   loading.value = false;
-  state.value = undefined;
-  show.value = false;
+  if(result.error) {
+    error.value = result.error;
+    dialogError.value = true;
+    return;
+  }
+  clearAndClose();
 }
 </script>
 

src/components/queue/items.ts

@@ -1,12 +1,17 @@
 import { computed } from "vue";
 import type { Ref, ComputedRef } from "vue";
+import type { OperationResult, AnyVariables } from "@urql/vue";
 import { formatDateTime } from "@/utils/format-date-time";
 import { useSubscribeScheduleQueueItems } from "@/api/use-schedule-queue-items-subscription";
 import {
   useScheduleQueuePushMutation,
   useScheduleQueueRemoveMutation,
 } from "@/graphql/codegen/generated";
-import type { ScheduleQueuePushInput } from "@/graphql/codegen/generated";
+import type {
+  ScheduleQueuePushInput,
+  ScheduleQueuePushMutation,
+  ScheduleQueueRemoveMutation
+} from "@/graphql/codegen/generated";
 
 export interface Item {
   id: number;
@@ -15,11 +20,14 @@ export interface Item {
   script: string;
 }
 
+type AddItemResult = OperationResult<ScheduleQueuePushMutation, AnyVariables>;
+type DeleteItemResult = OperationResult<ScheduleQueueRemoveMutation, AnyVariables>;
+
 interface _UseItemsResponse {
   items: ComputedRef<Item[] | undefined>;
   loading: Ref<boolean>;
-  addItem: (item: ScheduleQueuePushInput) => Promise<void>;
-  deleteItem: (item: Item) => Promise<void>;
+  addItem: (item: ScheduleQueuePushInput) => Promise<AddItemResult>;
+  deleteItem: (item: Item) => Promise<DeleteItemResult>;
 }
 
 type UseItemsResponse = _UseItemsResponse & PromiseLike<_UseItemsResponse>;
@@ -55,15 +63,15 @@ function useAddItem() {
   const { executeMutation } = useScheduleQueuePushMutation();
 
   async function addItem(newItem: ScheduleQueuePushInput) {
-    await executeMutation({ input: newItem });
+    return await executeMutation({ input: newItem });
   }
   return { addItem };
 }
 
 function useDeleteItem() {
   const { executeMutation } = useScheduleQueueRemoveMutation();
   async function deleteItem(item: Item) {
-    await executeMutation({ id: item.id });
+    return await executeMutation({ id: item.id });
   }
 
   return { deleteItem };

src/components/queue/view/ViewDialog.vue

@@ -30,17 +30,21 @@
     >
     </delete-confirmation-dialog>
     <LoadingIndicator v-model="loading"> </LoadingIndicator>
+    <ErrorDialog v-model="dialogError" :error="error">
+    </ErrorDialog>
   </v-dialog>
 </template>
 
 <script setup lang="ts">
 import { ref, computed, toRefs } from "vue";
 import { useDisplay } from "vuetify";
+import type { CombinedError } from "@urql/vue";
 import ItemView from "./ItemView.vue";
 import { useItems } from "../items";
 import type { Item } from "../items";
 import DeleteConfirmationDialog from "./DeleteConfirmationDialog.vue";
 import LoadingIndicator from "../LoadingIndicator.vue";
+import ErrorDialog from "../ErrorDialog.vue";
 
 const { mobile } = useDisplay();
 
@@ -54,14 +58,21 @@ interface Props {
 const props = defineProps<Props>();
 const { item } = toRefs(props);
 const show = defineModel<boolean>();
-
 const dialogConfirmDelete = ref(false);
 const loading = ref<boolean>(false);
+const dialogError = ref<boolean>(false);
+const error = ref<CombinedError>();
+
 const { deleteItem } = useItems();
 async function onDeleteConfirmed() {
   loading.value = true;
-  await deleteItem(item.value);
+  const result = await deleteItem(item.value);
   loading.value = false;
+  if(result.error) {
+    error.value = result.error;
+    dialogError.value = true;
+    return;
+  }
   show.value = false;
 }
 </script>