Merge pull request #59 from fdm-monster/feat/31-introduce-drag-n-drop…

…-printer-placement

Feat/31 introduce drag n drop printer placement

package.json

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

src/backend/app.service.ts

@@ -0,0 +1,7 @@
+import { BaseService } from "./base.service";
+
+export class AppService extends BaseService {
+  static async updateClientDist() {
+    return await this.postApi("api/server/update-client-bundle-github");
+  }
+}

src/components/Generic/Actions/PrinterCreateAction.vue

@@ -0,0 +1,33 @@
+<template>
+  <v-btn
+    class="ma-2"
+    color="primary"
+    fab
+    small
+    @click.c.capture.native.stop="openCreatePrinterDialog()"
+  >
+    <v-icon>add</v-icon>
+  </v-btn>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import { useDialogsStore } from "../../../store/dialog.store";
+import { DialogName } from "../Dialogs/dialog.constants";
+
+export default defineComponent({
+  name: "PrinterCreateAction",
+  props: {},
+  setup: () => {
+    return {
+      dialogsStore: useDialogsStore(),
+    };
+  },
+  computed: {},
+  methods: {
+    openCreatePrinterDialog() {
+      this.dialogsStore.openDialog(DialogName.CreatePrinterDialog);
+    },
+  },
+});
+</script>

src/components/Generic/Actions/PrinterDeleteAction.vue

@@ -1,7 +1,6 @@
 <template>
-  <v-btn color="warning" outlined @click="deletePrinter()">
+  <v-btn class="ma-2" color="primary" fab small @click.prevent.stop="deletePrinter()">
     <v-icon>delete</v-icon>
-    <span class="d-none d-lg-inline">Delete printer</span>
   </v-btn>
 </template>
 
@@ -30,6 +29,7 @@ export default defineComponent({
   },
   methods: {
     async deletePrinter() {
+      if (!confirm("Are you sure to delete this printer?")) return;
       await this.printersStore.deletePrinter(this.printerId);
     },
   },

src/components/Generic/Actions/PrinterSettingsAction.vue

@@ -9,7 +9,7 @@ import { defineComponent, PropType } from "vue";
 import { Printer } from "@/models/printers/printer.model";
 
 export default defineComponent({
-  name: "PrinterUrlAction",
+  name: "PrinterSettingsAction",
   props: {
     printer: Object as PropType<Printer>,
   },

src/components/Generic/Dialogs/BatchJsonCreateDialog.vue

@@ -1,7 +1,7 @@
 <template>
-  <BaseDialog :id="dialogId" max-width="500px">
+  <BaseDialog :id="dialogId" max-width="700px">
     <validation-observer ref="validationObserver" v-slot="{ invalid }">
-      <v-card>
+      <v-card class="pa-4">
         <v-card-title>
           <span class="text-h5"> Batch Import JSON printers </span>
         </v-card-title>
@@ -13,16 +13,18 @@
                   v-model="formData.json"
                   :error-messages="errors"
                   data-vv-validate-on="change|blur"
+                  rows="10"
                   @change="updatePrinterCount()"
                 >
                   <template v-slot:label>
                     <div>JSON import <small>(optional)</small></div>
                   </template>
                 </v-textarea>
               </validation-provider>
-              {{ numPrinters }} printers
+              {{ numPrinters }} printers found
             </v-col>
           </v-row>
+          <v-btn class="mt-2">Validate printers</v-btn>
         </v-card-text>
         <v-card-actions>
           <em class="red--text">* indicates required field</em>
@@ -118,7 +120,6 @@ export default defineComponent({
       const answer = confirm(`Are you sure to import ${numPrinters} printers?`);
       if (answer) {
         printers.forEach((p) => {
-          p.enabled = false;
           if (p["_id"]) {
             delete p["_id"];
           }
@@ -130,6 +131,13 @@ export default defineComponent({
             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);
       }

src/components/Generic/Dialogs/CreatePrinterDialog.vue

@@ -13,7 +13,7 @@
         <v-card-text>
           <v-row>
             <v-col :cols="showChecksPanel ? 8 : 12">
-              <PrinterCrudForm ref="printerCrudForm" @onChange="onFormChange" />
+              <PrinterCrudForm ref="printerCrudForm" />
             </v-col>
 
             <PrinterChecksPanel v-if="showChecksPanel" :cols="4" :test-progress="testProgress">

src/components/Generic/Dialogs/dialog.constants.ts

@@ -1,6 +1,7 @@
 export enum DialogName {
   BatchJson = "BatchJson",
   CreatePrinterDialog = "CreatePrinterDialog",
+  PlacePrinterDialog = "PlacePrinterDialog",
   CreatePrinterFloorDialog = "CreatePrinterFloorDialog",
   PrinterMaintenanceDialog = "PrinterMaintenanceDialog",
   UpdatePrinterDialog = "UpdatePrinterDialog",

src/components/PrinterGrid/HomeToolbar.vue

@@ -13,20 +13,33 @@
         {{ f.name }}
       </v-btn>
     </v-btn-toggle>
+
+    <v-btn color="primary" class="mt-0 ml-6" v-if="!printersStore.printers?.length" to="/printers">
+      You have no printers. Click here to start!
+    </v-btn>
+    <v-alert color="primary" class="mt-4 ml-12" v-if="printersStore.floorlessPrinters.length">
+      <v-icon>warning</v-icon>
+      {{ printersStore.floorlessPrinters.length }} unplaced printer(s)!</v-alert
+    >
+    <div class="ma-4 pt-6">
+      <v-switch v-model="gridStore.gridEditMode" label="Printer Relocate Mode"></v-switch>
+    </div>
     <v-spacer></v-spacer>
   </v-toolbar>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
 import { usePrintersStore } from "@/store/printers.store";
+import { useGridStore } from "../../store/grid.store";
 
 export default defineComponent({
   name: "HomeToolbar",
   components: {},
   setup() {
     return {
       printersStore: usePrintersStore(),
+      gridStore: useGridStore(),
     };
   },
   data(): {

src/components/PrinterGrid/PrinterGrid.vue

@@ -1,5 +1,21 @@
 <template>
   <div>
+    <div v-if="gridStore.gridEditMode" class="ml-4 mt-4 mb-0" style="cursor: move">
+      <span class="pr-4">
+        Drag and drop {{ printersStore.floorlessPrinters.length }} unplaced printer(s) here:
+      </span>
+      <div
+        v-for="printer of printersStore.floorlessPrinters"
+        :key="printer.id"
+        class="d-inline-block text-center mr-1 mb-1"
+        draggable="true"
+        style="width: 100px; height: 40px; border: 1px solid gray; border-radius: 2px"
+        @dragstart="onDragStart(printer, $event)"
+      >
+        <strong text-center>{{ printer.printerName }}</strong>
+      </div>
+      <div class="mt-4">Clear printers by clicking on their tile below:</div>
+    </div>
     <v-row v-for="y in rows" :key="y" class="ma-1" no-gutters>
       <v-col v-for="x in columns" :key="x" :cols="columnWidth" :sm="columnWidth">
         <v-row class="test-top" no-gutters>
@@ -50,6 +66,8 @@ import {
 } from "@/constants/printer-grid.constants";
 import { usePrintersStore } from "@/store/printers.store";
 import { Printer } from "../../models/printers/printer.model";
+import { useGridStore } from "../../store/grid.store";
+import { dragAppId, INTENT, PrinterPlace } from "../../constants/drag.constants";
 
 export default defineComponent({
   components: { PrinterGridTile },
@@ -65,6 +83,7 @@ export default defineComponent({
   setup() {
     return {
       printersStore: usePrintersStore(),
+      gridStore: useGridStore(),
     };
   },
   async created() {
@@ -91,6 +110,19 @@ export default defineComponent({
     },
   },
   methods: {
+    onDragStart(printer: Printer, ev: DragEvent) {
+      if (!ev.dataTransfer) return;
+      if (!printer.id) return;
+
+      ev.dataTransfer.setData(
+        "text",
+        JSON.stringify({
+          appId: dragAppId,
+          intent: INTENT.PRINTER_PLACE,
+          printerId: printer.id,
+        } as PrinterPlace)
+      );
+    },
     getPrinter(col: number, row: number) {
       const x = col;
       const y = row;