@fdm-monster/client-next 0.0.1

package/src/components/Generic/Dialogs/AddOrUpdatePrinterDialog.vue

@@ -0,0 +1,303 @@
+<template>
+  <BaseDialog
+    :id="dialog.dialogId"
+    :max-width="showChecksPanel ? '900px' : '700px'"
+    @escape="closeDialog()"
+  >
+    <v-card class="pa-4">
+      <v-card-title>
+        <span class="text-h5">
+          <v-avatar
+            color="primary"
+            size="56"
+          >
+            {{ avatarInitials }}
+          </v-avatar>
+          <span v-if="isUpdating"> Updating Printer </span>
+          <span v-else> New Printer </span>
+        </span>
+      </v-card-title>
+      <v-card-text>
+        <v-row>
+          <v-col :cols="showChecksPanel ? 8 : 12">
+            <v-row v-if="formData">
+              <v-col>
+                <!--                  :rules="printerNameRules"-->
+                <v-text-field
+                  v-model="formData.name"
+                  :counter="printerNameRules.max"
+                  autofocus
+                  class="ma-1"
+                  label="Printer name*"
+                  required
+                />
+              </v-col>
+              <v-col>
+                <v-checkbox
+                  v-model="formData.enabled"
+                  hint="Disabling makes the printer passive"
+                  label="Enabled*"
+                  persistent-hint
+                  required
+                />
+              </v-col>
+            </v-row>
+
+            <!--              persistent-hint-->
+            <!--              rules="required|url">-->
+            <v-text-field
+              v-model="formData.printerURL"
+              class="ma-1"
+              hint="F.e. 'octopi.local' or 'https://my.printer.com'"
+              label="Printer URL*"
+            />
+
+            <!--              :rules="apiKeyRules"-->
+            <v-text-field
+              v-model="formData.apiKey"
+              :counter="apiKeyRules.length"
+              class="ma-1"
+              hint="User or Application Key only (Global API key fails)"
+              label="API Key*"
+              persistent-hint
+              required
+            />
+            <!--            </validation-provider>-->
+          </v-col>
+
+          <PrinterChecksPanel
+            v-if="showChecksPanel"
+            :cols="4"
+          >
+            <v-btn @click="showChecksPanel = false"> Hide checks </v-btn>
+          </PrinterChecksPanel>
+        </v-row>
+        <v-alert
+          color="primary"
+          class="my-3"
+          v-if="printerValidationError?.length"
+        >
+          {{ printerValidationError }}
+          <v-checkbox
+            color="warning"
+            v-model="forceSavePrinter"
+            label="Force save"
+          />
+        </v-alert>
+        <v-alert
+          class="my-3"
+          v-if="validatingPrinter"
+        >
+          Validating printer
+          <v-progress-circular indeterminate />
+        </v-alert>
+      </v-card-text>
+      <v-card-actions>
+        <em class="text-red"> * indicates required field </em>
+        <v-spacer />
+        <v-btn
+          variant="text"
+          @click="closeDialog()"
+        >
+          Close
+        </v-btn>
+        <v-btn
+          v-if="isUpdating"
+          color="gray"
+          variant="text"
+          @click="duplicatePrinter()"
+        >
+          Duplicate
+        </v-btn>
+        <v-btn
+          color="warning"
+          variant="text"
+          @click="testPrinter()"
+        >
+          Test connection
+        </v-btn>
+
+        <v-btn
+          color="blue-darken-1"
+          variant="text"
+          @click="submit()"
+        >
+          {{ submitButtonText }}
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </BaseDialog>
+</template>
+
+<script lang="ts" setup>
+import { inject } from 'vue'
+import {
+  generateInitials,
+  newRandomNamePair
+} from '@/shared/noun-adjectives.data'
+import { usePrinterStore } from '@/store/printer.store'
+import { PrintersService } from '@/backend'
+import { DialogName } from '@/components/Generic/Dialogs/dialog.constants'
+import { useTestPrinterStore } from '@/store/test-printer.store'
+import {
+  CreatePrinter,
+  getDefaultCreatePrinter
+} from '@/models/printers/crud/create-printer.model'
+import { useDialog } from '@/shared/dialog.composable'
+import { AppConstants } from '@/shared/app.constants'
+import { useSnackbar } from '@/shared/snackbar.composable'
+import { AxiosError } from 'axios'
+
+const dialog = useDialog(DialogName.AddOrUpdatePrinterDialog)
+const printersStore = usePrinterStore()
+const testPrinterStore = useTestPrinterStore()
+const appConstants = inject('appConstants') as AppConstants
+const snackbar = useSnackbar()
+
+const printerValidationError = ref<null | string>(null)
+const validatingPrinter = ref(false)
+const forceSavePrinter = ref(false)
+const showChecksPanel = ref(false)
+const copyPasteConnectionString = ref('')
+const formData = ref(getDefaultCreatePrinter())
+
+const printerId = computed(() => {
+  return printersStore.updateDialogPrinter?.id
+})
+
+onMounted(async () => {
+  if (printerId.value) {
+    const crudeData = printersStore.printer(printerId.value) as CreatePrinter
+    formData.value = PrintersService.convertPrinterToCreateForm(crudeData)
+  }
+})
+
+watch(printerId, (val) => {
+  if (!val) return
+  const printer = printersStore.printer(val) as CreatePrinter
+  formData.value = PrintersService.convertPrinterToCreateForm(printer)
+})
+
+const storedPrinter = computed(() => {
+  return printersStore.updateDialogPrinter
+})
+
+const isUpdating = computed(() => {
+  return !!storedPrinter
+})
+
+const submitButtonText = computed(() => {
+  return isUpdating ? 'Save' : 'Create'
+})
+
+const avatarInitials = computed(() => {
+  if (formData) {
+    return generateInitials(formData.value?.name)
+  }
+  return '?'
+})
+
+const printerNameRules = computed(() => {
+  return { required: true, max: appConstants.maxPrinterNameLength }
+})
+
+const apiKeyRules = computed(() => {
+  return {
+    required: true,
+    length: appConstants.apiKeyLength,
+    alpha_num: true
+  }
+})
+
+function resetForm() {
+  formData.value = getDefaultCreatePrinter()
+}
+
+function openTestPanel() {
+  showChecksPanel.value = true
+}
+
+async function testPrinter() {
+  if (!formData) return
+
+  testPrinterStore.clearEvents()
+  openTestPanel()
+
+  const { correlationToken } = await testPrinterStore.createTestPrinter(
+    formData.value as CreatePrinter
+  )
+  testPrinterStore.currentCorrelationToken = correlationToken
+}
+
+async function createPrinter(newPrinterData: CreatePrinter) {
+  await printersStore.createPrinter(newPrinterData, forceSavePrinter.value)
+  snackbar.openInfoMessage({
+    title: `Printer ${newPrinterData.name} created`
+  })
+}
+
+async function updatePrinter(updatedPrinter: CreatePrinter) {
+  const printerId = updatedPrinter.id
+
+  await printersStore.updatePrinter(
+    {
+      printerId: printerId as string,
+      updatedPrinter
+    },
+    forceSavePrinter.value
+  )
+
+  snackbar.openInfoMessage({
+    title: `Printer ${updatedPrinter.name} updated`
+  })
+}
+
+async function submit() {
+  // if (!(await isValid())) return
+  if (!formData) return
+
+  printerValidationError.value = null
+  validatingPrinter.value = true
+  const createdPrinter = formData.value as CreatePrinter
+
+  try {
+    if (isUpdating.value) {
+      await updatePrinter(createdPrinter)
+    } else {
+      await createPrinter(createdPrinter)
+    }
+    closeDialog()
+  } catch (error) {
+    if (error instanceof AxiosError) {
+      printerValidationError.value =
+        error.response?.data?.error || error.message
+      snackbar.error('Validation Failed', (error as Error).message)
+    } else {
+      printerValidationError.value = (error as Error).message
+      snackbar.error('Error', (error as Error).message)
+    }
+  } finally {
+    validatingPrinter.value = false
+    forceSavePrinter.value = false
+  }
+}
+
+async function duplicatePrinter() {
+  formData.value.name = newRandomNamePair()
+  printersStore.updateDialogPrinter = undefined
+  printerValidationError.value = null
+  forceSavePrinter.value = false
+  printerValidationError.value = null
+}
+
+function closeDialog() {
+  dialog.closeDialog()
+  forceSavePrinter.value = false
+  printerValidationError.value = null
+  showChecksPanel.value = false
+  testPrinterStore.clearEvents()
+  resetForm()
+  printersStore.updateDialogPrinter = undefined
+  copyPasteConnectionString.value = ''
+}
+</script>

package/src/components/Generic/Dialogs/BaseDialog.vue

@@ -0,0 +1,81 @@
+<template>
+  <v-dialog
+    :max-width="maxWidth"
+    :retain-focus="false"
+    :model-value="showingDialog"
+    persistent
+    @close="emitEscape()"
+  >
+    <slot>
+      <div class="pa-3 text--primary">
+        No content defined in dialog.
+        <v-btn @click="dialog.closeDialog()">
+          <v-icon class="mr-3">close</v-icon>Close
+        </v-btn>
+      </div>
+    </slot>
+  </v-dialog>
+</template>
+
+<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'
+
+const props = defineProps({
+  id: {
+    type: String as () => DialogName,
+    required: true
+  },
+  maxWidth: {
+    type: String,
+    default: '400px'
+  }
+})
+const dialogsStore = useDialogsStore()
+const emit = defineEmits(['escape', 'opened', 'beforeOpened'])
+const dialog = useDialog(props.id)
+
+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>

package/src/components/Generic/Dialogs/BatchJsonCreateDialog.vue

@@ -0,0 +1,109 @@
+<template>
+  <BaseDialog
+    :id="dialog.dialogId"
+    max-width="700px"
+    @escape="closeDialog()"
+  >
+    <v-card class="pa-4">
+      <v-card-title>
+        <span class="text-h5"> Batch Import JSON printers </span>
+      </v-card-title>
+      <v-card-text>
+        <v-row>
+          <v-col cols="12">
+            v-slot="{ errors }" name="JSON" rules="required|json">
+            <v-textarea
+              v-model="formData.json"
+              data-vv-validate-on="change|blur"
+              rows="10"
+              @change="updatePrinterCount()"
+            >
+              <template #label>
+                <div>JSON import <small> (optional) </small></div>
+              </template>
+            </v-textarea>
+            {{ numPrinters }} printers found
+          </v-col>
+        </v-row>
+        <v-btn class="mt-2"> Validate printers </v-btn>
+      </v-card-text>
+      <v-card-actions>
+        <em class="text-red"> * indicates required field </em>
+        <v-spacer />
+        <v-btn
+          variant="text"
+          @click="closeDialog()"
+        >
+          Close
+        </v-btn>
+        <v-btn
+          color="blue-darken-1"
+          variant="text"
+          @click="submit()"
+        >
+          Create
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </BaseDialog>
+</template>
+
+<script lang="ts" setup>
+import { PrintersService } from '@/backend'
+import { DialogName } from '@/components/Generic/Dialogs/dialog.constants'
+import { useDialog } from '@/shared/dialog.composable'
+
+const dialog = useDialog(DialogName.BatchJsonCreate)
+
+const formData = {
+  json: ''
+}
+
+let numPrinters = 0
+
+const parsedPrinters = async () => {
+  const data = JSON.parse(formData.json)
+  if (!Array.isArray(data)) return []
+  return data
+}
+
+const updatePrinterCount = async () => {
+  numPrinters = (await parsedPrinters()).length
+}
+
+const submit = async () => {
+  const printers = await parsedPrinters()
+
+  const numPrinters = printers.length
+  const answer = confirm(`Are you sure to import ${numPrinters} printers?`)
+  if (answer) {
+    printers.forEach((p) => {
+      if (p['_id']) {
+        delete p['_id']
+      }
+      if (p['apikey']) {
+        p.apiKey = p['apikey']
+        delete p['apikey']
+      }
+      if (p['settingsApperance']) {
+        p.settingsAppearance = p['settingsApperance']
+        delete p['settingsApperance']
+      }
+      if (p['name']) {
+        if (!p.settingsAppearance) {
+          p.settingsAppearance = {}
+        }
+        p.settingsAppearance.name = p['name']
+        delete p['name']
+      }
+    })
+    await PrintersService.batchImportPrinters(printers)
+  }
+
+  closeDialog()
+}
+
+const closeDialog = () => {
+  dialog.closeDialog()
+}
+</script>

package/src/components/Generic/Dialogs/BatchReprintDialog.vue

@@ -0,0 +1,190 @@
+<template>
+  <BaseDialog
+    :id="dialog.dialogId"
+    max-width="1000px"
+    @before-opened="onBeforeDialogOpened"
+    @escape="closeDialog()"
+    @opened="onDialogOpened"
+  >
+    <v-card class="pa-4">
+      <v-card-title>
+        <span class="text-h5"> Batch - Submit Reprint Jobs </span>
+      </v-card-title>
+      <v-card-text>
+        <v-alert
+          v-if="errorLoading?.length"
+          color="error"
+        >
+          {{ errorLoading }}
+        </v-alert>
+        <span v-if="loading"> Loading... </span>
+        <div v-else>
+          <v-list density="compact">
+            <v-list-subheader>
+              Reprinted Files - Select from list
+            </v-list-subheader>
+            <v-list-group
+              v-model="selectedItems"
+              multiple
+            >
+              <v-list-item
+                v-for="(item, i) in reprintableFiles"
+                :key="i"
+                :value="item"
+                :disabled="
+                  item.connectionState !== 'Operational' ||
+                  item.reprintState !== ReprintState.LastPrintReady
+                "
+              >
+                <template #prepend>
+                  <v-icon
+                    v-if="item.reprintState == ReprintState.LastPrintReady"
+                    >checklist</v-icon
+                  >
+                  <v-icon v-if="item.reprintState == ReprintState.NoLastPrint">
+                    question_mark
+                  </v-icon>
+                  <v-icon
+                    v-if="item.reprintState == ReprintState.PrinterNotAvailable"
+                  >
+                    signal_disconnected
+                  </v-icon>
+                </template>
+
+                <v-list-item-title v-if="item.file?.path?.length">
+                  {{ item.file?.path }}
+                  <v-chip v-if="item.connectionState !== 'Operational'">
+                    Printer busy
+                  </v-chip>
+                </v-list-item-title>
+                <v-list-item-title
+                  v-else-if="item.reprintState == ReprintState.NoLastPrint"
+                >
+                  No file is present to print again
+                </v-list-item-title>
+                <v-list-item-title v-else>
+                  OctoPrint cant be reached
+                </v-list-item-title>
+                <v-list-item-subtitle>
+                  Printer '{{
+                    printerStore.printer(item.printerId)?.name ??
+                    'Unknown printer'
+                  }}'
+                </v-list-item-subtitle>
+              </v-list-item>
+            </v-list-group>
+          </v-list>
+        </div>
+
+        <div class="mt-3">
+          <div v-if="submitting">
+            <v-progress-circular
+              class="ma-3"
+              indeterminate
+              color="blue"
+            />
+            Submitting
+          </div>
+          <div v-else-if="selectedItems.length > 0">
+            {{ selectedItems.length }} reprint selected
+          </div>
+          <div v-else>Must select at least one file</div>
+        </div>
+        <br />
+
+        <VBtn
+          :disabled="submitting || selectedItems.length === 0"
+          @click="submitBatchReprints()"
+        >
+          Submit Batch Reprint
+        </VBtn>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn
+          variant="text"
+          @click="dialog.closeDialog()"
+        >
+          Close
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </BaseDialog>
+</template>
+<script lang="ts" setup>
+import { DialogName } from '@/components/Generic/Dialogs/dialog.constants'
+import { useDialog } from '@/shared/dialog.composable'
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { BatchService } from '@/backend/batch.service'
+import { IdType } from '@/utils/id.type'
+import { ReprintFileDto, ReprintState } from '@/models/batch/reprint.dto'
+import { usePrinterStore } from '@/store/printer.store'
+import { errorSummary } from '@/utils/error.utils'
+import { useSnackbar } from '@/shared/snackbar.composable'
+
+const printerStore = usePrinterStore()
+const inputPrinterIds = ref()
+const dialog = useDialog(DialogName.BatchReprintDialog)
+const loading = ref(false)
+const submitting = ref(false)
+const reprintableFiles = ref<ReprintFileDto[]>([])
+const selectedItems = ref<ReprintFileDto[]>([])
+const errorLoading = ref('')
+const snackbar = useSnackbar()
+
+onMounted(() => {
+  console.debug('Mounted')
+})
+
+onBeforeUnmount(() => {
+  console.debug('Unmount')
+})
+
+function onBeforeDialogOpened(_: IdType[]) {
+  loading.value = true
+}
+
+async function onDialogOpened(printerIds: IdType[]) {
+  inputPrinterIds.value = printerIds
+  try {
+    const response = await BatchService.batchGetLastPrintedFiles(
+      inputPrinterIds.value
+    )
+    reprintableFiles.value = response
+    selectedItems.value = response.filter(
+      (r) =>
+        r.connectionState === 'Operational' &&
+        r.reprintState == ReprintState.LastPrintReady
+    )
+  } catch (e: any) {
+    errorLoading.value = e.code.toString() ?? ''
+  }
+
+  loading.value = false
+}
+
+async function submitBatchReprints() {
+  submitting.value = true
+  try {
+    await BatchService.batchReprintFiles(
+      selectedItems.value
+        .filter((v) => v.file?.path)
+        .map((v) => ({
+          printerId: v.printerId,
+          path: v.file?.path || ''
+        }))
+    )
+    printerStore.clearSelectedPrinters()
+    snackbar.info('Action completed', 'Your reprinted jobs are starting', 5000)
+    closeDialog()
+  } catch (e: any) {
+    errorLoading.value = errorSummary(e)
+  } finally {
+    submitting.value = false
+  }
+}
+
+function closeDialog() {
+  dialog.closeDialog(dialog.context())
+}
+</script>