Merge pull request #955 from fdm-monster/feat/batch-reprint-dialog

Feature: batch reprint dialog for intermediate batch print selection

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fdm-monster/client",
-  "version": "1.5.0-rc6",
+  "version": "1.5.0-rc7",
   "author": "David Zwart",
   "license": "AGPL-3.0-or-later",
   "repository": {

src/App.vue

@@ -25,6 +25,7 @@
     <BatchJsonCreateDialog />
     <YamlImportExportDialog />
     <FileExplorerSideNav />
+    <BatchReprintDialog />
   </v-app>
 </template>
 
@@ -42,6 +43,7 @@ import { useSettingsStore } from "./store/settings.store";
 import { useDialogsStore } from "@/store/dialog.store";
 import BatchJsonCreateDialog from "@/components/Generic/Dialogs/BatchJsonCreateDialog.vue";
 import YamlImportExportDialog from "@/components/Generic/Dialogs/YamlImportExportDialog.vue";
+import BatchReprintDialog from "@/components/Generic/Dialogs/BatchReprintDialog.vue";
 import { useFeatureStore } from "./store/features.store";
 import { useSnackbar } from "./shared/snackbar.composable";
 import AppProgressSnackbar from "./components/Generic/Snackbars/AppProgressSnackbar.vue";
@@ -71,6 +73,7 @@ export default defineComponent({
     PrinterMaintenanceDialog,
     FileExplorerSideNav,
     BatchJsonCreateDialog,
+    BatchReprintDialog,
   },
   setup: () => {
     return {

src/backend/batch.service.ts

@@ -1,5 +1,7 @@
 import { BaseService } from "./base.service";
 import { IdType } from "@/utils/id.type";
+import { ServerApi } from "@/backend/server.api";
+import { ReprintFileDto } from "@/models/batch/reprint.dto";
 
 export class BatchService extends BaseService {
   static async batchConnectUsb(printerIds: IdType[]) {
@@ -13,4 +15,14 @@ export class BatchService extends BaseService {
   static async batchToggleEnabled(printerIds: IdType[], enabled: boolean) {
     return await this.postApi(`api/batch/toggle-enabled`, { printerIds, enabled });
   }
+
+  static async batchGetLastPrintedFiles(printerIds: IdType[]) {
+    const path = ServerApi.batchGetLastPrintedFilesRoute;
+    return await this.postApi<ReprintFileDto[]>(path, { printerIds });
+  }
+
+  static async batchReprintFiles(prints: { printerId: IdType; path: string }[]) {
+    const path = ServerApi.batchReprintFilesRoute;
+    return await this.postApi(path, { prints });
+  }
 }

src/backend/printer-file.service.ts

@@ -23,11 +23,6 @@ export class PrinterFileService extends BaseService {
     return (await this.getApi(path)) as PrinterFileDto[];
   }
 
-  static async batchReprintFiles(printerIds: IdType[]) {
-    const path = ServerApi.printerFilesBatchReprintRoute;
-    return await this.postApi(path, { printerIds });
-  }
-
   static async selectAndPrintFile(printerId: IdType, filePath: string, print = true) {
     const path = ServerApi.printerFilesSelectAndPrintRoute(printerId);
     return await this.postApi(path, { filePath, print });

src/backend/server.api.ts

@@ -14,10 +14,14 @@ export class ServerApi {
 
   static floorRoute = `${ServerApi.base}/floor`;
 
+  static batchRoute = `${ServerApi.base}/batch`;
+  static batchGetLastPrintedFilesRoute = `${ServerApi.batchRoute}/reprint/list`;
+  static batchReprintFilesRoute = `${ServerApi.batchRoute}/reprint/execute`;
+
   static printCompletionRoute = `${ServerApi.base}/print-completion`;
 
   static printerFilesRoute = `${ServerApi.base}/printer-files`;
-  static printerFilesBatchReprintRoute = `${ServerApi.printerFilesRoute}/batch/reprint-files`;
+
   static printerFilesPurgeRoute = `${ServerApi.printerFilesRoute}/purge`;
 
   static customGCodeRoute = `${ServerApi.base}/custom-gcode`;

src/components/AboutHelp/AboutView.vue

@@ -108,30 +108,18 @@
   </v-card>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref } from "vue";
-import { AppService } from "../../backend/app.service";
-import { version } from "../../../package.json";
+<script lang="ts" setup>
+import { onMounted, ref } from "vue";
+import { AppService } from "@/backend/app.service";
+import { version as clientVersion } from "../../../package.json";
 
-export default defineComponent({
-  name: "AboutView",
-  components: {},
-  setup: () => {
-    return {
-      serverVersion: ref(""),
-      monsterPiVersion: ref<string | null>(""),
-      version,
-    };
-  },
-  async created() {},
-  async mounted() {
-    const versionSpec = await AppService.getVersion();
-    this.serverVersion = versionSpec.version;
-    this.monsterPiVersion = versionSpec.monsterPi;
-  },
-  props: {},
-  computed: {},
-  methods: {},
-  watch: {},
+const serverVersion = ref("");
+const monsterPiVersion = ref<string | null>("");
+const version = ref(clientVersion);
+
+onMounted(async () => {
+  const versionSpec = await AppService.getVersion();
+  serverVersion.value = versionSpec.version;
+  monsterPiVersion.value = versionSpec.monsterPi;
 });
 </script>

src/components/Generic/Actions/PrinterCreateAction.vue

@@ -26,7 +26,7 @@ export default defineComponent({
   computed: {},
   methods: {
     openCreatePrinterDialog() {
-      this.dialogsStore.openDialog(DialogName.AddOrUpdatePrinterDialog);
+      this.dialogsStore.openDialogWithContext(DialogName.AddOrUpdatePrinterDialog);
     },
   },
 });

src/components/Generic/Dialogs/BaseDialog.vue

@@ -9,65 +9,64 @@
     <slot></slot>
   </v-dialog>
 </template>
-<script lang="ts">
-import { defineComponent } from "vue";
-import { usePrinterStore } from "../../../store/printer.store";
+
+<script lang="ts" setup>
+import { computed, onBeforeUnmount, onMounted } from "vue";
 import { useDialogsStore } from "@/store/dialog.store";
 import { DialogName } from "@/components/Generic/Dialogs/dialog.constants";
 import { onKeyStroke } from "@vueuse/core";
+import { useDialog } from "@/shared/dialog.composable";
 
-export default defineComponent({
-  name: "BaseDialog",
-  components: {},
-  setup: () => {
-    return {
-      printersStore: usePrinterStore(),
-      dialogsStore: useDialogsStore(),
-    };
-  },
-  async created() {
-    onKeyStroke("Escape", (e) => {
-      if (this.showingDialog) {
-        e.preventDefault();
-        this.emitEscape();
-      }
-    });
-  },
-  async mounted() {
-    this.dialogsStore.registerDialogReference(this.id);
-  },
-  beforeDestroy() {
-    this.dialogsStore.unregisterDialogReference(this.id);
+const props = defineProps({
+  id: {
+    type: String as () => DialogName,
+    required: true,
   },
-  props: {
-    id: {
-      type: String as () => DialogName,
-      required: true,
-    },
-    maxWidth: {
-      type: String,
-      default: "400px",
-    },
+  maxWidth: {
+    type: String,
+    default: "400px",
   },
-  computed: {
-    dialog() {
-      return this.id ? this.dialogsStore.dialogsById[this.id] : undefined;
-    },
-    showingDialog() {
-      if (!this.id) return;
+});
+const dialogsStore = useDialogsStore();
+const emit = defineEmits(["escape", "opened", "beforeOpened"]);
+const dialog = useDialog(props.id);
 
-      const isOpened = this.dialogsStore.isDialogOpened(this.id);
-      if (isOpened) {
-        console.debug(`[BaseDialog ${this.id}] Showing dialog: ${this.dialog?.opened}`);
-      }
-      return isOpened;
-    },
-  },
-  methods: {
-    emitEscape() {
-      this.$emit("escape");
-    },
-  },
-  watch: {},
+function openedCallback(input: any) {
+  return emit("opened", input);
+}
+
+function beforeOpenedCallback(input: any) {
+  return emit("beforeOpened", input);
+}
+
+onMounted(async () => {
+  onKeyStroke("Escape", (e) => {
+    if (showingDialog.value) {
+      e.preventDefault();
+      emitEscape();
+    }
+  });
+  dialogsStore.registerDialogReference(props.id, {
+    beforeOpenedCallback,
+    openedCallback,
+  });
+});
+
+onBeforeUnmount(() => {
+  dialogsStore.unregisterDialogReference(props.id);
 });
+
+const showingDialog = computed(() => {
+  if (!props.id) return;
+
+  const isOpened = dialogsStore.isDialogOpened(props.id);
+  if (isOpened) {
+    console.debug(`[BaseDialog ${props.id}] Showing dialog: ${dialog?.isDialogOpened()}`);
+  }
+  return isOpened;
+});
+
+function emitEscape() {
+  emit("escape");
+}
 </script>

src/components/Generic/Dialogs/BatchReprintDialog.ts

@@ -0,0 +1,5 @@
+import { IdType } from "@/utils/id.type";
+
+interface ReprintPrinterIds {
+  printerIds: IdType[];
+}