@fdm-monster/client-next 0.0.1 → 0.0.3

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

@@ -1,303 +0,0 @@
-<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

@@ -1,81 +0,0 @@
-<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

@@ -1,109 +0,0 @@
-<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

@@ -1,190 +0,0 @@
-<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>