Add print label functionality and enhance asset management actions

public/js/pages/AssetManagement/AssetManagement.js

@@ -1,10 +1,22 @@
 window.TT_CONFIG["CRUD_CONFIG"]["additionalActions"] = [
+    {
+        "key": "openHistory",
+        "title": "Historie",
+        "class": "fas fa-history text-info",
+        "condition": (row) => window.TT_CONFIG.ASSET_ADMIN === '1',
+    },
     {
         "key": "reserve",
         "title": "Reservieren",
-        "class": "fas fa-calendar-alt btn-outline-warning",
+        "class": "fas fa-calendar-alt text-warning",
         "condition": (row) => window.TT_CONFIG.ASSET_ADMIN === '1',
     },
+    {
+        "key": "print",
+        "title": "Label drucken",
+        "class": "fas fa-print text-secondary",
+        "condition": (row) => window.TT_CONFIG.ASSET_ADMIN === '1',
+    }
 ];
 // =================================================================================
 // Main Asset Management Component
@@ -24,6 +36,10 @@ Vue.component('asset-management', {
             v-if="reservationModalAsset"
             :asset="reservationModalAsset"
             @close="reservationModalAsset = null; $refs.table.$refs.table.refreshTable()"/>
+        <asset-print-label-modal
+            v-if="printModalAsset"
+            :asset="printModalAsset"
+            @close="printModalAsset = null"/>
 
         <button v-if="window.TT_CONFIG.ASSET_ADMIN === '1'" @click="modalId = 'create'" class="btn btn-primary">Anlage erstellen</button>
 
@@ -31,7 +47,9 @@ Vue.component('asset-management', {
             ref="table"
             emit-edit
             @edit="modalId = $event.id"
+            @openHistory="journalModalAssetId = $event.id"
             @reserve="reservationModalAsset = $event"
+            @print="printModalAsset = $event"
             :crud-config="crudConfig">
 
           <template v-slot:assetdetails="{ row }">
@@ -51,15 +69,6 @@ Vue.component('asset-management', {
                 @update="updateTableWithoutModalsOpening"/>
           </template>
 
-          <template v-slot:journal="{ row }">
-            <tt-button
-                sm
-                icon="fas fa-history"
-                title="Historie"
-                @click="journalModalAssetId = row.id"
-                additional-class="btn-outline-info"/>
-          </template>
-
           <template v-slot:serviceduedate="{ row }">
             <span v-if="row.serviceDueDate" :class="{'text-danger font-weight-bold': isDatePast(row.serviceDueDate)}">
                 {{ formatDate(row.serviceDueDate, 'DD.MM.YYYY') }}
@@ -75,6 +84,7 @@ Vue.component('asset-management', {
             modalId: null,
             journalModalAssetId: null,
             reservationModalAsset: null,
+            printModalAsset: null,
             crudConfig: window.TT_CONFIG.CRUD_CONFIG,
         }
     },
@@ -97,6 +107,29 @@ Vue.component('asset-management', {
     }
 });
 
+// =================================================================================
+// Asset Print Label Modal
+// =================================================================================
+Vue.component('asset-print-label-modal', {
+    props: { asset: { type: Object, required: true } },
+    template: `
+      <tt-modal :show="true" :title="'Label für ' + asset.name + ' drucken'" :save="false" :delete="false" @update:show="$emit('close')">
+        <div class="text-center">
+            <p>Wählen Sie die gewünschte Label-Größe:</p>
+            <tt-button text="25mm" @click="printLabel(25)" additional-class="btn-primary mr-2"/>
+            <tt-button text="50mm" @click="printLabel(50)" additional-class="btn-primary"/>
+        </div>
+      </tt-modal>
+    `,
+    methods: {
+        printLabel(size) {
+            const url = window.TT_CONFIG.BASE_PATH + "/AssetManagement/printLabel?id=" + this.asset.id + "&size=" +size;
+            window.open(url, '_blank');
+            this.$emit('close');
+        }
+    }
+});
+
 // =================================================================================
 // Asset Image Component
 // =================================================================================
@@ -652,8 +685,8 @@ Vue.component('asset-reservation-modal', {
           <div class="card-body">
             <h5 class="card-title">Neue Reservierung</h5>
             <tt-autocomplete label="Mitarbeiter" :api-url="userAutoCompleteUrl" v-model="newReservation.userId" sm row/>
-            <tt-date-picker label="Startdatum" v-model="newReservation.startDate" :date-range="false" sm row/>
-            <tt-date-picker label="Enddatum" v-model="newReservation.endDate" :date-range="false" :disabled="isPermanent === 1" sm row/>
+            <tt-date-picker label="Startdatum" v-model="newReservation.startDate" :date-range="false" :time-picker="false" sm row/>
+            <tt-date-picker label="Enddatum" v-model="newReservation.endDate" :date-range="false" :time-picker="false" :disabled="isPermanent === 1" sm row/>
             <tt-checkbox label="Dauerhaft" v-model="isPermanent" sm row/>
             <tt-textarea label="Notizen" v-model="newReservation.notes" sm row/>
             <tt-button text="Reservierung speichern" @click="saveReservation" additional-class="btn-primary float-right"/>

public/plugins/vue/tt-components/tt-datepicker.js

@@ -10,6 +10,7 @@ Vue.component('tt-date-picker', {
         additionalProps: Object,
         sm: { type: Boolean, default: false },
         dateRange: { type: Boolean, default: true },
+        timePicker: { type: Boolean, default: true },
     },
     template: `
       <div class="form-group" :class="{'row': row}">
@@ -53,10 +54,14 @@ Vue.component('tt-date-picker', {
         await loadScript('/js/jquery.min.js', () => typeof jQuery !== 'undefined');
         await loadScript('/plugins/daterangepicker/daterangepicker.js', () => typeof $?.fn?.daterangepicker !== 'undefined');
 
+        if (!this.timePicker) {
+            this.locale.format = 'DD.MM.YYYY';
+        }
+
         const pickerOptions = {
             autoUpdateInput: false,
             singleDatePicker: !this.dateRange,
-            timePicker: true,
+            timePicker: this.timePicker,
             timePicker24Hour: true,
             locale: this.locale,
             startDate: this.dateRange ? (this.value?.from ? this.moment.unix(this.value.from) : this.moment()) : (this.value ? this.moment.unix(this.value) : this.moment()),