From f622204aa0e12691127313a37dddbcf7cc73dc14 Mon Sep 17 00:00:00 2001
From: Luca Haid <luca.haid@xinon.eu>
Date: Tue, 7 Jan 2025 16:49:20 +0100
Subject: [PATCH] implemented new features for warehouseorderrequest

---
 Layout/default/menu.php                       |   9 +-
 .../WarehouseHistoryController.php            |  23 +++
 .../WarehouseOrderRequestController.php       |  75 +++++++--
 .../WarehouseOrderRequestModel.php            |  20 ++-
 .../WarehouseShippingNoteController.php       |   2 +-
 .../20250107160000_warehouse_modify_8.php     |  24 +++
 lib/TTCrud/TTCrud.php                         |   7 +
 .../WarehouseHistory/WarehouseHistoryModal.js |   1 +
 .../vue/tt-components/tt-autocomplete.js      |   6 +
 .../vue/tt-components/tt-datepicker.js        | 148 +++++++++++-------
 .../vue/tt-components/tt-table-crud.js        |  12 +-
 public/plugins/vue/tt-components/tt-table.js  |  13 +-
 12 files changed, 253 insertions(+), 87 deletions(-)
 create mode 100644 db/migrations/20250107160000_warehouse_modify_8.php

diff --git a/Layout/default/menu.php b/Layout/default/menu.php
index 3c776a07a..fd2461812 100644
--- a/Layout/default/menu.php
+++ b/Layout/default/menu.php
@@ -148,11 +148,12 @@
                         <?php endif; ?>
                     </a>
                     <ul class="submenu">
-                        <li class="has-sub-submenu font-weight-bold"><a>XINON</a></li>
+                        <?php if($me->can("WarehouseAdmin") || $me->can("WarehouseUser")): ?><li class="has-sub-submenu font-weight-bold"><a>XINON</a></li><?php endif; ?>
                         <?php if($me->can("WarehouseAdmin") || $me->can("WarehouseUser")): ?><li><a href="<?=self::getUrl("WarehouseArticle")?>"><i class="far fa-fw fa-box text-info"></i> Artikel</a></li><?php endif; ?>
-                        <?php if($me->can("WarehouseAdmin")): ?><li><a href="<?=self::getUrl("WarehouseItem")?>"><i class="far fa-fw fa-boxes text-info"></i> Lagerbestand</a></li><?php endif; ?>
-                        <?php if($me->can("WarehouseAdmin")): ?><li><a href="<?=self::getUrl("WarehouseOrderRecommendation")?>"><i class="far fa-fw fa-box-full text-info"></i> Bestellvorschläge</a></li><?php endif; ?>
-                        <?php if($me->can("WarehouseAdmin")): ?><li><a href="<?=self::getUrl("WarehouseOrder")?>"><i class="far fa-fw fa-shopping-bag text-info"></i> Bestellungen</a></li><?php endif; ?>
+                        <?php if($me->can("WarehouseAdmin")): ?><li><a href="<?=self::getUrl("WarehouseItem")?>"><i class="far fa-fw fa-boxes text-info"></i> Lagerbestand (WIP)</a></li><?php endif; ?>
+                        <?php if($me->can("WarehouseAdmin")): ?><li><a href="<?=self::getUrl("WarehouseOrderRecommendation")?>"><i class="far fa-fw fa-box-full text-info"></i> Bestellvorschläge (WIP)</a></li><?php endif; ?>
+                        <?php if($me->can("WarehouseAdmin")): ?><li><a href="<?=self::getUrl("WarehouseOrder")?>"><i class="far fa-fw fa-shopping-bag text-info"></i> Bestellungen (WIP)</a></li><?php endif; ?>
+                        <?php if($me->can("WarehouseAdmin") || $me->can("WarehouseUser")): ?><li><a href="<?=self::getUrl("WarehouseOrderRequest")?>"><i class="far fa-fw fa-shopping-cart text-info"></i> Bestellwünsche</a></li><?php endif; ?>
                         <?php if($me->can("WarehouseAdmin") || $me->can("WarehouseUser")): ?><li><a href="<?=self::getUrl("WarehouseShippingNote")?>"><i class="far fa-fw fa-shipping-fast text-info"></i> Lieferscheine</a></li><?php endif; ?>
 
                         <?php if($me->can("WarehouseAdmin")): ?><li><a href="<?=self::getUrl("WarehouseDistributor")?>"><i class="far fa-fw fa-cogs text-info"></i> Administration</a></li><?php endif; ?>
diff --git a/application/WarehouseHistory/WarehouseHistoryController.php b/application/WarehouseHistory/WarehouseHistoryController.php
index b990d0133..ea395d65b 100644
--- a/application/WarehouseHistory/WarehouseHistoryController.php
+++ b/application/WarehouseHistory/WarehouseHistoryController.php
@@ -51,6 +51,29 @@ class WarehouseHistoryController {
                     }
                 }
 
+                if ($columns[array_search($item['key'], array_column($columns, 'key'))]['modal']['type'] === 'autocomplete') {
+
+
+                    if (method_exists($this, 'customAutoComplete' . ucfirst($item['key']))) {
+                        $item['old_value'] = $this->{'customAutoComplete' . ucfirst($item['key'])}($item['old_value']);
+                        $item['new_value'] = $this->{'customAutoComplete' . ucfirst($item['key'])}($item['new_value']);
+                    } else {
+
+                        $autoCompleteModelName = explode('/', $columns[array_search($item['key'], array_column($columns, 'key'))]['modal']['apiUrl'])[0] . 'Model';
+                        $autoCompleteModel = new $autoCompleteModelName();
+
+                        $data_old = isset($item['old_value']) && $item['old_value'] !== '' ? $autoCompleteModel::get($item['old_value']) : '';
+                        $data_new = isset($item['new_value']) && $item['new_value'] !== '' ? $autoCompleteModel::get($item['new_value']) : '';
+
+                        // check if title exists else it should be name
+                        $textColum = $columns[array_search($item['key'], array_column($columns, 'key'))]['modal']['text'] ?? 'name';
+
+                        $item['old_value'] = isset($data_old) && $data_old !== '' ? $data_old->$textColum : $item['old_value'];
+                        $item['new_value'] = isset($data_new) && $data_new !== '' ? $data_new->$textColum : $item['new_value'];
+                    }
+
+                }
+
             }
 
 
diff --git a/application/WarehouseOrderRequest/WarehouseOrderRequestController.php b/application/WarehouseOrderRequest/WarehouseOrderRequestController.php
index f2c0bcc74..691988aae 100644
--- a/application/WarehouseOrderRequest/WarehouseOrderRequestController.php
+++ b/application/WarehouseOrderRequest/WarehouseOrderRequestController.php
@@ -6,21 +6,47 @@ class WarehouseOrderRequestController extends TTCrud {
     protected string $createText = 'Bestellwunsch erstellen';
 
     protected array $columns = [
-        ['key' => 'id', 'text' => 'ID', 'modal' => false],
+        ['key' => 'id', 'text' => 'ID', 'modal' => false, 'table' => false],
         ['key' => 'anzahl', 'text' => 'Anzahl', 'required' => true, 'type' => 'number'],
-        ['key' => 'ware', 'text' => 'Ware', 'required' => true],
+        ['key' => 'ware',
+         'text' => 'Ware',
+         'required' => true,
+         'type' => 'autocomplete',
+         'table' => ['class' => 'text-nowrap', 'filter' => 'autocomplete'],
+         'modal' => [
+             'apiUrl' => 'WarehouseArticle/autocomplete',
+             'type' => 'autocomplete',
+             'returnText' => true]],
         ['key' => 'verwendungszweck', 'text' => 'Verwendungszweck', 'required' => true],
-        ['key' => 'create', 'text' => 'Erstellt am', 'required' => true, 'modal' => false, 'filter' => 'datetime'],
-        ['key' => 'createBy', 'text' => 'Beauftragt von', 'required' => true, 'table' => ['filter' => 'select'], 'modal' => ['visible' => false, 'type' => 'select', 'items' => []]],
-        ['key' => 'distributorId', 'text' => 'Lieferant', 'required' => true, 'type' => 'autocomplete', 'table' => ['class' => 'text-nowrap', 'filter' => 'autocomplete'], 'modal' => [
-            'apiUrl' => 'WarehouseDistributor/autocomplete', 'items' => 'WarehouseDistributor/autocomplete', 'type' => 'autocomplete']],
-        ['key' => 'order', 'text' => 'Bestellt am', 'required' => false, 'filter' => 'datetime'],
+        ['key' => 'create', 'text' => 'Beauftragt am', 'required' => true, 'modal' => false, 'table' => ['filter' => 'datepicker']],
+        ['key' => 'createBy',
+         'text' => 'Beauftragt von',
+         'required' => true,
+         'table' => ['filter' => 'select'],
+         'modal' => ['visible' => false, 'type' => 'select', 'items' => []]],
+        ['key' => 'distributorId',
+         'text' => 'Lieferant',
+         'required' => false,
+         'type' => 'autocomplete',
+         'table' => ['class' => 'text-nowrap', 'filter' => 'autocomplete'],
+         'modal' => [
+             'apiUrl' => 'WarehouseDistributor/autocomplete',
+             'type' => 'autocomplete']],
+        ['key' => 'order', 'text' => 'Bestellt am', 'required' => false, 'type' => 'datepicker', 'table' => ['filter' => 'datepicker']],
         ['key' => 'orderBy', 'text' => 'Bestellt von', 'required' => false, 'table' => ['filter' => 'select'], 'modal' => ['type' => 'select', 'items' => []]],
-        ['key' => 'takeOver', 'text' => 'Übernommen am', 'required' => false, 'filter' => 'datetime'],
-        ['key' => 'takeOverBy', 'text' => 'Übernommen von', 'required' => false, 'table' => ['filter' => 'select'], 'modal' => ['type' => 'select', 'items' => []]],
+        ['key' => 'takeOver', 'text' => 'Übernommen am', 'required' => false, 'type' => 'datepicker', 'table' => ['filter' => 'datepicker']],
+        ['key' => 'takeOverBy',
+         'text' => 'Übernommen von',
+         'required' => false,
+         'table' => ['filter' => 'select'],
+         'modal' => ['type' => 'select', 'items' => []]],
         ['key' => 'warehouseLocation', 'text' => 'Lagerort', 'required' => false, 'type' => 'varchar'],
-        ['key' => 'note', 'text' => 'Notiz', 'required' => false, 'type' => 'text'],
-        ['key' => 'actions', 'text' => 'Aktionen', 'required' => false, 'modal' => false, 'table' => ['filter' => false, 'sortable' => false, 'class' => 'text-center']],
+        ['key' => 'note', 'text' => 'Notiz', 'required' => false, 'type' => 'textarea'],
+        ['key' => 'actions',
+         'text' => 'Aktionen',
+         'required' => false,
+         'modal' => false,
+         'table' => ['filter' => false, 'sortable' => false, 'class' => 'text-center']],
     ];
 
     protected array $additionalActions = [['key' => 'openHistory', 'title' => 'Historie', 'class' => 'fas fa-history text-primary']];
@@ -30,6 +56,8 @@ class WarehouseOrderRequestController extends TTCrud {
                                      'delete' => 'Bestellwunsch wurde gelöscht',
                                      'noChanges' => 'Keine Änderungen',];
 
+    protected array $additionalJSVariables = ['BASE_URL' => '/WarehouseOrderRequest'];
+
     public function permissionCheck(): bool {
         return $this->user->can(["WarehouseUser"]);
     }
@@ -38,13 +66,35 @@ class WarehouseOrderRequestController extends TTCrud {
         // Fill Users in createBy column
         $userArray = array_map(function ($user) {
             return ['value' => intval($user->id), 'text' => $user->name];
-        }, UserModel::search());
+        }, UserModel::search(['employee' => true]));
         $createByColumn = array_search('createBy', array_column($this->columns, 'key'));
         $this->columns[$createByColumn]['modal']['items'] = $userArray;
         $orderByColumn = array_search('orderBy', array_column($this->columns, 'key'));
         $this->columns[$orderByColumn]['modal']['items'] = $userArray;
         $takeOverByColumn = array_search('takeOverBy', array_column($this->columns, 'key'));
         $this->columns[$takeOverByColumn]['modal']['items'] = $userArray;
+
+        // if this user can WarehouseAdmin is false then set modal false to warehouselocation, takeOverBy, takeOver, orderBy, order
+        if (!$this->user->can(["WarehouseAdmin"])) {
+            $warehouselocationColumn = array_search('warehouseLocation', array_column($this->columns, 'key'));
+            $this->columns[$warehouselocationColumn]['modal']['visible'] = false;
+            $takeOverByColumn = array_search('takeOverBy', array_column($this->columns, 'key'));
+            $this->columns[$takeOverByColumn]['modal']['visible'] = false;
+            $takeOverColumn = array_search('takeOver', array_column($this->columns, 'key'));
+            $this->columns[$takeOverColumn]['modal']['visible'] = false;
+            $orderByColumn = array_search('orderBy', array_column($this->columns, 'key'));
+            $this->columns[$orderByColumn]['modal']['visible'] = false;
+            $orderColumn = array_search('order', array_column($this->columns, 'key'));
+            $this->columns[$orderColumn]['modal']['visible'] = false;
+        }
+
+    }
+
+    protected function customAutoCompleteWare($value) {
+        if (!is_numeric($value)) return [ 'id' => $value, 'title' => $value];
+
+        $article = WarehouseArticleModel::get(intval($value));
+        return [ 'id' => $article->id, 'title' => $article->title ];
     }
 
     protected function beforeUpdate($postData): bool {
@@ -53,6 +103,7 @@ class WarehouseOrderRequestController extends TTCrud {
     }
 
     protected function getHistoryAction() {
+        $this->prepareCrudConfig();
         self::returnJson((new WarehouseHistoryController)->getHistory($this->request->id, $this->mod, $this->columns));
     }
 }
\ No newline at end of file
diff --git a/application/WarehouseOrderRequest/WarehouseOrderRequestModel.php b/application/WarehouseOrderRequest/WarehouseOrderRequestModel.php
index 84e4926cb..68a4654dc 100644
--- a/application/WarehouseOrderRequest/WarehouseOrderRequestModel.php
+++ b/application/WarehouseOrderRequest/WarehouseOrderRequestModel.php
@@ -2,14 +2,18 @@
 
 class WarehouseOrderRequestModel extends TTCrudBaseModel {
     public int $id;
-    public int $distributorId;
-    public ?string $intRef;
-    public ?string $extRef;
-    public float $sum;
-    public string $status;
-    public ?string $trackingNumber;
-    public int $create;
+    public int $anzahl;
+    public string $ware;
+    public string $verwendungszweck;
+    public string $create;
     public int $createBy;
+    public ?int $distributorId;
+    public ?string $order;
+    public ?int $orderBy;
+    public ?string $takeOver;
+    public ?int $takeOverBy;
+    public ?string $warehouseLocation;
+    public ?string $note;
+
 }
 
-
diff --git a/application/WarehouseShippingNote/WarehouseShippingNoteController.php b/application/WarehouseShippingNote/WarehouseShippingNoteController.php
index bc2660555..e54b258f1 100644
--- a/application/WarehouseShippingNote/WarehouseShippingNoteController.php
+++ b/application/WarehouseShippingNote/WarehouseShippingNoteController.php
@@ -37,7 +37,7 @@ class WarehouseShippingNoteController extends TTCrud {
     protected function prepareCrudConfig() {
         $users = array_map(function ($user) {
             return ['value' => intval($user->id), 'text' => $user->name];
-        }, UserModel::search());
+        }, UserModel::search(['employee' => true]));
 
         $this->columns[array_search('createBy', array_column($this->columns, 'key'))]['modal']['items'] = $users;
 
diff --git a/db/migrations/20250107160000_warehouse_modify_8.php b/db/migrations/20250107160000_warehouse_modify_8.php
new file mode 100644
index 000000000..aa458a72e
--- /dev/null
+++ b/db/migrations/20250107160000_warehouse_modify_8.php
@@ -0,0 +1,24 @@
+<?php declare(strict_types=1);
+
+use Phinx\Migration\AbstractMigration;
+
+final class WarehouseModify8 extends AbstractMigration
+{
+    public function up(): void
+    {
+        if ($this->getEnvironment() == "thetool") {
+            $table = $this->table("WarehouseOrderRequest");
+            $table->changeColumn("distributorId", "integer", ["null" => true]);
+            $table->save();;
+        }
+    }
+
+    public function down(): void
+    {
+        if ($this->getEnvironment() == "thetool") {
+            $table = $this->table("WarehouseOrderRequest");
+            $table->changeColumn("distributorId", "integer", ["null" => false]);
+            $table->save();;
+        }
+    }
+}
diff --git a/lib/TTCrud/TTCrud.php b/lib/TTCrud/TTCrud.php
index 4f101dd10..484b59c7c 100644
--- a/lib/TTCrud/TTCrud.php
+++ b/lib/TTCrud/TTCrud.php
@@ -92,6 +92,9 @@ class TTCrud extends mfBaseController {
 
 
         $columns = array_map(function ($column) {
+            if (isset($column['type']) && (!isset($column['modal']) || !isset($column['modal']['type']))) {
+                $column['modal']['type'] = $column['type'];
+            }
             $newColumn = $column;
             unset($newColumn['required'], $newColumn['required_length'], $newColumn['regex']);
             return $newColumn;
@@ -145,6 +148,10 @@ class TTCrud extends mfBaseController {
                     continue;
                 }
 
+                if ($row[$column['key']] === null || $row[$column['key']] === '') {
+                    continue;
+                }
+
                 // if function customAutoComplete"COLUMN_KEY" is defined, we call it  instead of the default
                 $data = null;
                 if (method_exists($this, 'customAutoComplete' . ucfirst($column['key']))) {
diff --git a/public/js/pages/WarehouseHistory/WarehouseHistoryModal.js b/public/js/pages/WarehouseHistory/WarehouseHistoryModal.js
index 3c2ced5f2..3a4e818c0 100644
--- a/public/js/pages/WarehouseHistory/WarehouseHistoryModal.js
+++ b/public/js/pages/WarehouseHistory/WarehouseHistoryModal.js
@@ -6,6 +6,7 @@ Vue.component('warehouse-history-modal', {
                 >
                   <tt-table 
                       v-if="showModal"
+                      :sticky="false"
                       :fetch-url="window['TT_CONFIG']['BASE_URL'] + '/getHistory?id=' + id"
                             :config="WarehouseHistoryTableConfig" small>
 
diff --git a/public/plugins/vue/tt-components/tt-autocomplete.js b/public/plugins/vue/tt-components/tt-autocomplete.js
index 29516b568..4060e53bd 100644
--- a/public/plugins/vue/tt-components/tt-autocomplete.js
+++ b/public/plugins/vue/tt-components/tt-autocomplete.js
@@ -77,6 +77,7 @@ Vue.component('tt-autocomplete', {
         items:       {type: Array, default: () => []},
         sm:          {type: Boolean, default: true},
         row:         {type: Boolean, default: false},
+        returnText:         {type: Boolean, default: false},
     }, data() {
         return {
             displayingItems:               [],
@@ -107,6 +108,10 @@ Vue.component('tt-autocomplete', {
 
 
             if (this.value && this.apiUrl) {
+                if (this.returnText && isNaN(this.value)) {
+                    this.displayValue = this.value;
+                    return;
+                }
                 const response = await axios.get(`${this.apiUrl}${this.apiUrl.includes('?') ? '&' : '?'}autocomplete=1&searchedID=${this.value}`);
                 this.displayValue = response.data[0].text;
             } else if (this.value) {
@@ -120,6 +125,7 @@ Vue.component('tt-autocomplete', {
         onInput(event) {
             this.displayValue = event.target.value;
             this.$emit('input', '');
+            this.$emit('input', this.returnText ? this.displayValue : '');
             this.fetchSuggestions();
         }, onFocus() {
             this.showSuggestions = true;
diff --git a/public/plugins/vue/tt-components/tt-datepicker.js b/public/plugins/vue/tt-components/tt-datepicker.js
index 1075f0ab8..6ecddc879 100644
--- a/public/plugins/vue/tt-components/tt-datepicker.js
+++ b/public/plugins/vue/tt-components/tt-datepicker.js
@@ -1,104 +1,146 @@
 Vue.component('tt-date-picker', {
+    props: {
+        label: String,
+        disabled: Boolean,
+        placeholder: String,
+        required: Boolean,
+        row: Boolean,
+        value: [Object, Number],
+        hint: String,
+        additionalProps: Object,
+        sm: { type: Boolean, default: false },
+        dateRange: { type: Boolean, default: true },
+    },
     template: `
-      <input type="text" class="form-control form-control-sm" ref="input"
-             style="cursor: pointer;background-color: #ffffff">
-    `, props: ['value'],
+    <div class="form-group" :class="{'row': row}">
+      <slot name="prepend"></slot>
+      <label
+        :class="{'col-form-label': row, 'col-sm-4': row, 'col-form-label-sm': sm && row}"
+        v-if="label"
+        :for="label">{{ label }}</label>
+      <input type="text"
+        :id="label"
+        :name="label"
+        class="form-control"
+        :class="{'form-control-sm': sm, 'col-sm-8': row}"
+        :placeholder="placeholder"
+        :required="required"
+        :disabled="disabled"
+        v-bind="additionalProps"
+        ref="input"
+        style="cursor: pointer; background-color: #ffffff;"
+      >
+      <small v-if="hint" class="form-text text-muted">{{ hint }}</small>
+    </div>
+  `,
     data() {
         return {
             inputValue: '',
             isInitialized: false,
             moment: window.moment,
             locale: {
-                "format": "DD.MM.YYYY HH:mm",
-                "separator": " - ",
-                "applyLabel": "Übernehmen",
-                "cancelLabel": "Löschen",
-                "fromLabel": "Von",
-                "toLabel": "Bis",
-                "customRangeLabel": "Benutzerdefiniert",
-                "weekLabel": "W",
-                "daysOfWeek": [
-                    "So",
-                    "Mo",
-                    "Di",
-                    "Mi",
-                    "Do",
-                    "Fr",
-                    "Sa"
-                ],
-                "monthNames": [
-                    "Januar",
-                    "Februar",
-                    "März",
-                    "April",
-                    "Mai",
-                    "Juni",
-                    "Juli",
-                    "August",
-                    "September",
-                    "Oktober",
-                    "November",
-                    "Dezember"
-                ],
-                "firstDay": 1
+                // ... (keep your existing locale object)
             },
         }
     },
     mounted() {
         this.isInitialized = true;
-        $(this.$refs.input).daterangepicker({
+        const datePickerOptions = {
             autoUpdateInput: true,
-            startDate: this.value?.from ? this.moment.unix(this.value.from) : undefined,
-            endDate: this.value?.to ? this.moment.unix(this.value.to) : undefined,
+            singleDatePicker: !this.dateRange,
             timePicker: true,
             timePicker24Hour: true,
             locale: this.locale,
-        });
+        };
+
+        if (this.dateRange) {
+            datePickerOptions.startDate = this.value?.from ? this.moment.unix(this.value.from) : undefined;
+            datePickerOptions.endDate = this.value?.to ? this.moment.unix(this.value.to) : undefined;
+        } else {
+            datePickerOptions.startDate = this.value ? this.moment.unix(this.value) : undefined;
+        }
+
+        $(this.$refs.input).daterangepicker(datePickerOptions);
 
         const _this = this;
         $(this.$refs.input).on('apply.daterangepicker', function (ev, picker) {
-            _this.$emit('input', {
+            if (_this.dateRange) {
+                _this.$emit('input', {
                     from: picker.startDate.unix(),
                     to: picker.endDate.unix()
-                }
-            );
-            $(_this.$refs.input).val(picker.startDate.format(_this.locale.format) + _this.locale.separator + picker.endDate.format(_this.locale.format));
+                });
+                $(_this.$refs.input).val(picker.startDate.format(_this.locale.format) + _this.locale.separator + picker.endDate.format(_this.locale.format));
+            } else {
+                _this.$emit('input', picker.startDate.unix());
+                $(_this.$refs.input).val(picker.startDate.format(_this.locale.format));
+            }
         });
 
         function checkIfAppliedElseClear() {
-            if (this.value && this.value.from && this.value.to) return;
+            if (_this.dateRange) {
+                if (_this.value && _this.value.from && _this.value.to) return;
+            } else {
+                if (_this.value) return;
+            }
             $(_this.$refs.input).val('');
         }
 
         function clearIfCancelled() {
-            _this.$emit('input', {from: null, to: null});
+            _this.$emit('input', _this.dateRange ? {from: null, to: null} : null);
             $(_this.$refs.input).val('');
         }
 
         $(this.$refs.input).on('cancel.daterangepicker', clearIfCancelled);
         $(this.$refs.input).on('hide.daterangepicker', checkIfAppliedElseClear.bind(this));
 
-        // if value from or to is undefined then clear the input field
-        if (!this.value || this.value.from === null || this.value.to === null) {
-            $(_this.$refs.input).val('');
+        // Clear input field if value is not set
+        if (_this.dateRange) {
+            if (!this.value || this.value.from === null || this.value.to === null) {
+                $(_this.$refs.input).val('');
+            }
+        } else {
+            if (!this.value) {
+                $(_this.$refs.input).val('');
+            }
         }
 
+        // Add click event listener to the document
+        document.addEventListener('click', this.handleOutsideClick);
+    },
+    methods: {
+        handleOutsideClick(event) {
+            const datepicker = document.querySelector('.daterangepicker');
+            const input = this.$refs.input;
+
+            if (datepicker && !datepicker.contains(event.target) && event.target !== input) {
+                $(this.$refs.input).data('daterangepicker').hide();
+            }
+        }
     },
     watch: {
         value: function (newVal) {
             if (!this.isInitialized) return;
 
             const datePicker = $(this.$refs.input).data('daterangepicker');
-            if (!newVal || newVal.from === null || newVal.to === null) {
-                $(this.$refs.input).val('');
+            if (this.dateRange) {
+                if (!newVal || newVal.from === null || newVal.to === null) {
+                    $(this.$refs.input).val('');
+                } else {
+                    datePicker.setStartDate(this.moment.unix(newVal.from));
+                    datePicker.setEndDate(this.moment.unix(newVal.to));
+                }
             } else {
-                datePicker.setStartDate(this.moment.unix(newVal.from));
-                datePicker.setEndDate(this.moment.unix(newVal.to));
+                if (!newVal) {
+                    $(this.$refs.input).val('');
+                } else {
+                    datePicker.setStartDate(this.moment.unix(newVal));
+                    datePicker.setEndDate(this.moment.unix(newVal));
+                }
             }
         }
     },
     beforeDestroy() {
         $(this.$refs.input).off('apply.daterangepicker');
-        $('.daterangepicker').remove();
+        document.removeEventListener('click', this.handleOutsideClick);
     },
 })
diff --git a/public/plugins/vue/tt-components/tt-table-crud.js b/public/plugins/vue/tt-components/tt-table-crud.js
index f3a7d8586..6529d6aa7 100644
--- a/public/plugins/vue/tt-components/tt-table-crud.js
+++ b/public/plugins/vue/tt-components/tt-table-crud.js
@@ -21,7 +21,7 @@ Vue.component('tt-table-crud', {
 
                          </slot>
                          <span v-else-if="column.modal?.type === 'select' && column.modal.items.find(item => item.value + '' === row[column.key] + '')">{{column.modal.items.find(item => item.value == row[column.key]).text}}</span>
-                         <span v-else-if="column.modal?.type === 'select'"
+                         <span v-else-if="column.modal?.type === 'select' && row[column.key] !== null && row[column.key] !== undefined"
                                :data-all-items="JSON.stringify(column.modal.items)"
                          >Select not found for column {{column.key}} and value {{row[column.key]}}</span>
                        </template>
@@ -64,8 +64,8 @@ Vue.component('tt-table-crud', {
                            <tt-input v-show="crudModalColumnVisibility[column.key]" v-else-if="column.type === 'number'" v-model="crudModalData[column.key]" :label="column.text" type="number" sm row/>
                            <tt-textarea v-show="crudModalColumnVisibility[column.key]" v-else-if="column.type === 'textarea'" v-model="crudModalData[column.key]" :label="column.text" sm row/>
                            <tt-select v-show="crudModalColumnVisibility[column.key]" v-else-if="column.type === 'select'" v-model="crudModalData[column.key]" :label="column.text" :options="column.items" sm row/>
-                           <tt-autocomplete v-show="crudModalColumnVisibility[column.key]" v-else-if="column.type === 'autocomplete'" v-model="crudModalData[column.key]" :label="column.text" :api-url="column.apiUrl" :items="column.items" sm row/>
-                           <tt-date-picker v-show="crudModalColumnVisibility[column.key]" v-else-if="column.type === 'datepicker'" v-model="crudModalData[column.key]" :label="column.text" sm row/>
+                           <tt-autocomplete v-show="crudModalColumnVisibility[column.key]" v-else-if="column.type === 'autocomplete'" v-model="crudModalData[column.key]" :label="column.text" :api-url="column.apiUrl" :items="column.items" sm row :return-text="column.returnText" />
+                           <tt-date-picker v-show="crudModalColumnVisibility[column.key]" v-else-if="column.type === 'datepicker'" v-model="crudModalData[column.key]" :label="column.text" sm row :date-range="false"/>
                            <tt-icon-select v-show="crudModalColumnVisibility[column.key]" v-else-if="column.type === 'icon-select'" v-model="crudModalData[column.key]" :label="column.text" sm row/>
                            <tt-checkbox v-show="crudModalColumnVisibility[column.key]" v-else-if="column.type === 'checkbox'" v-model="crudModalData[column.key]" :label="column.text" sm row/>
                          </slot>
@@ -94,6 +94,12 @@ Vue.component('tt-table-crud', {
             this.crudModal = false;
         }, async submitCrudModal() {
             delete this.crudModalData.isTrusted;
+            for (const column of this.modalConfig.headers) {
+                if (column.type === 'autocomplete' && this.crudModalData[column.key] === '') {
+                  delete this.crudModalData[column.key];
+                }
+            }
+
             const response = await axios.post(this.crudModalData.id ? window['TT_CONFIG']['UPDATE_URL'] : window['TT_CONFIG']['CREATE_URL'],
                 this.crudModalData);
             if (response.data.success) {
diff --git a/public/plugins/vue/tt-components/tt-table.js b/public/plugins/vue/tt-components/tt-table.js
index 2c890839a..2677826a4 100644
--- a/public/plugins/vue/tt-components/tt-table.js
+++ b/public/plugins/vue/tt-components/tt-table.js
@@ -135,7 +135,8 @@ Vue.component('tt-table', {
                   <!-- Table -->
                   <table
                       ref="table"
-                      :class="['table','tt-table','table-condensed',{ 'loading': loading },{ 'table-striped': striped },{ 'table-bordered': bordered },{ 'table-hover': hover },{ 'table-sm': small }]">
+                      :class="['table','tt-table','table-condensed',{ 'loading': loading },{ 'table-striped': striped },{ 'table-bordered': bordered },{ 'table-hover': hover },{ 'table-sm': small },
+                      config.key + '-table']">
                     <thead style="border-width: 2px">
                     <tr>
                       <th scope="col" v-for="column in columns"
@@ -159,7 +160,7 @@ Vue.component('tt-table', {
                         <tt-number-range v-else-if="column.filter === 'numberRange' && !disableFiltering" :returnText="!ssr" v-model="filters[column.key]" sm/>
                         <tt-select v-else-if="column.filter === 'select' && !disableFiltering" :options="[{text: 'Alle', value: undefined}, ...column.filterOptions]" v-model="filters[column.key]" sm/>
                         <tt-autocomplete v-else-if="column.filter === 'autocomplete' && !disableFiltering" :api-url="column.filterOptions" v-model="filters[column.key]" sm/>
-                        <tt-date-picker v-else-if="column.filter === 'date' && !disableFiltering" v-model="filters[column.key]"/>
+                        <tt-date-picker v-else-if="(column.filter === 'date' || column.filter === 'datepicker') && !disableFiltering" v-model="filters[column.key]" sm/>
                         <!-- @formatter:on -->
                       </th>
                     </tr>
@@ -191,7 +192,7 @@ Vue.component('tt-table', {
                                style="cursor: pointer;font-size: 14px;padding-right: 8px;user-select: none"></i>
                             <slot :name="key.toLowerCase()" :value="row[key]" :row="row">
                     <span
-                        v-if="column.filter === 'date'">{{
+                        v-if="(column.filter === 'date' || column.filter === 'datepicker')">{{
                         row[key] ? (moment.unix(row[key])
                             .isValid() ? moment.unix(row[key]).format('DD.MM.YYYY HH:mm') : moment(row[key])
                             .format('DD.MM.YYYY HH:mm')) : ''
@@ -223,7 +224,7 @@ Vue.component('tt-table', {
                                 <slot :name="key.toLowerCase()" :value="row[key]" :row="row">
                               
                     <span
-                        v-if="column.filter === 'date'">{{
+                        v-if="(column.filter === 'date' || column.filter === 'datepicker')">{{
                         row[key] ? (moment.unix(row[key])
                             .isValid() ? moment.unix(row[key]).format('DD.MM.YYYY HH:mm') : moment(row[key])
                             .format('DD.MM.YYYY HH:mm')) : ''
@@ -805,12 +806,12 @@ Vue.component('tt-table', {
             // use header#topnav as top to stick to but if window is resized then check if header#topnav height is changed
 
             const headerHeight = document.querySelector('header#topnav')?.offsetHeight || 0;
-            style.innerHTML = `table.tt-table thead th { position: sticky; top: ${headerHeight}px; z-index: 1; background-color: white; }`;
+            style.innerHTML = `table.tt-table.${this.config.key}-table thead th { position: sticky; top: ${headerHeight}px; z-index: 1; background-color: white; }`;
             style.id = 'tt-table-sticky-header';
 
             window.addEventListener('resize', () => {
                 const headerHeight = document.querySelector('header#topnav')?.offsetHeight || 0;
-                style.innerHTML = `table.tt-table thead th { position: sticky; top: ${headerHeight}px; z-index: 1; background-color: white; }`;
+                style.innerHTML = `table.tt-table.${this.config.key}-table thead th { position: sticky; top: ${headerHeight}px; z-index: 1; background-color: white; }`;
             })
 
             document.head.appendChild(style);