Shipping note/rework

public/plugins/vue/tt-components/tt-position-manager.js

@@ -1,29 +1,33 @@
 Vue.component('tt-resolver', {
     props: {
-        value:     {type: Number, required: true},
-        reference: {type: String, required: true},
-    },
-    data() {
-        return {
-            window:  window,
-            loading: true,
-            text:    '',
-        }
+        value: { type: [Number, String], required: true },
+        reference: { type: String, required: true },
+        autocomplete: { type: Boolean, default: false }
     },
+    data: () => ({
+        loading: true,
+        text: ''
+    }),
     template: `
-                <div v-if="loading" class="d-flex justify-content-center align-items-center">
-                  <div class="spinner-border spinner-border-sm text-primary" role="status">
-                    <span class="sr-only">Loading...</span>
-                  </div>
-                </div>
-                <span v-else>{{ text }}</span>
-              `,
+      <div v-if="loading" class="d-flex justify-content-center align-items-center">
+        <div class="spinner-border spinner-border-sm text-primary" role="status">
+          <span class="sr-only">Loading...</span>
+        </div>
+      </div>
+      <span v-else>{{ text }}</span>
+    `,
     async created() {
-        const entry = await axios.get(window.TT_CONFIG['BASE_PATH'] + '/' + this.reference + '/getById?id=' + this.value);
-        this.text = entry.data.name ?? entry.data.title ?? entry.data.text ?? '[E] Key not found';
+        const endpoint = this.autocomplete
+            ? `${window.TT_CONFIG["BASE_PATH"]}${this.reference}?searchedID=${this.value}`
+            : `${window.TT_CONFIG["BASE_PATH"]}/${this.reference}/getById?id=${this.value}`;
+
+        const { data } = await axios.get(endpoint);
+
+        this.text = this.autocomplete ? data[0]?.text : data.name ?? data.title ?? data.text ?? '[E] Key not found';
         this.loading = false;
     }
-})
+});
+
 
 Vue.component('tt-positions-manager',
     {
@@ -48,6 +52,7 @@ Vue.component('tt-positions-manager',
                       </template>
                       <div class="form-container">
                         <template v-for="(field, key) in config.fields">
+                          <template v-if="typeof field.showCondition === 'function' ? field.showCondition(formData) : true">
                           <slot :name="key" v-bind:field="field" v-bind:value="formData[key]">
                             <tt-input
                                 v-if="field.type === 'input'"
@@ -90,6 +95,7 @@ Vue.component('tt-positions-manager',
                                 :options="field.options"
                             />
                           </slot>
+                          </template>
                         </template>
                         <div class="button-wrapper">
                           <tt-button @click="saveEntry" sm :additional-class="selectedIndex === null ? 'btn-primary' : 'btn-success'"
@@ -121,10 +127,12 @@ Vue.component('tt-positions-manager',
                           <tr v-for="(position, index) in group" :key="groupMode ? groupName + index : index">
                             <td v-for="(field, key) in config.fields">
                               <tt-resolver
-                                  v-if="field.customFieldReference && position[key]"
-                                  :reference="field.customFieldReference"
+                                  v-if="position[key] && (field.customFieldReference || field.type === 'autocomplete')"
+                                  :autocomplete="!field.customFieldReference && field.type === 'autocomplete'"
+                                  :reference="field.customFieldReference || field.apiUrl"
                                   :value="position[key]"
                               />
+                              <span v-else-if="field.type === 'checkbox'">{{ position[key] ? 'Ja' : 'Nein' }}</span>
                               <span v-else>{{ formatFieldValue(position[key] ?? position[key + '_text'], field) }}</span>
                             </td>
                             <td class="d-flex justify-content-end">
@@ -147,6 +155,8 @@ Vue.component('tt-positions-manager',
                 this.$set(this.formData, key, value);
             },
             defaultValidateForm(formData) {
+                console.log(formData);
+                console.log(this.config["validateFormOptions"]);
                 for (const field of this.config["validateFormOptions"]) {
                     if (!(formData[field.key] || formData[field.key + '_text'])) {
                         window.notify('error', field.message);
@@ -157,7 +167,7 @@ Vue.component('tt-positions-manager',
             },
             checkEmitDisplayValueAutocomplete() {
                 for (const [key, field] of Object.entries(this.config.fields)) {
-                    if (field.type === 'autocomplete' && field.emitDisplayValue && isNaN(this.formData[key])) {
+                    if (field.type === 'autocomplete' && field.emitDisplayValue && (isNaN(this.formData[key]) || !this.formData[key]) && this.$refs['autocomplete-' + key][0]) {
                         this.$set(this.formData, key + '_text', this.$refs['autocomplete-' + key][0].displayValue);
                         this.$delete(this.formData, key);
                     }
@@ -192,10 +202,19 @@ Vue.component('tt-positions-manager',
             },
             resetForm() {
                 this.formData = {};
+                for (const [key, field] of Object.entries(this.config.fields)) {
+                    if (field.type === 'autocomplete' && field.emitDisplayValue && this.$refs['autocomplete-' + key][0]) {
+                        this.$refs['autocomplete-' + key][0].displayValue = '';
+                    }
+                    if (field.inputType === 'date') {
+                        this.$set(this.formData, key, moment().format('YYYY-MM-DD'));
+                    }
+                }
                 this.selectedIndex = null;
             },
             formatFieldValue(value, field) {
                 if (field.formatter) return field.formatter(value);
+                if (field.inputType === 'date') return moment(value).format('DD.MM.YYYY');
                 return value;
             },
         },
@@ -212,6 +231,9 @@ Vue.component('tt-positions-manager',
                 }
             }
         },
+        mounted() {
+            this.resetForm();
+        },
         computed: {
             groupedPositions() {
                 const groups = {};