Luca/thetool
1
0
Fork 0
Code Issues 5 Pull Requests 5 Actions Packages Projects Releases Wiki Activity

implemented new features for warehouseorderrequest

Browse Source
This commit is contained in:
Luca Haid
2025-01-07 16:49:20 +01:00
parent e20af3eca5
commit f622204aa0
12 changed files with 253 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
Layout/default/menu.php
View File

@@ -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; ?>

23
application/WarehouseHistory/WarehouseHistoryController.php
View File

@@ -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'];
}
}
}

75
application/WarehouseOrderRequest/WarehouseOrderRequestController.php
View File

@@ -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));
}
}

20
application/WarehouseOrderRequest/WarehouseOrderRequestModel.php
View File

@@ -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;
}

2
application/WarehouseShippingNote/WarehouseShippingNoteController.php
View File

@@ -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;

24
db/migrations/20250107160000_warehouse_modify_8.php Normal file
View File

@@ -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();;
}
}
}

7
lib/TTCrud/TTCrud.php
View File

@@ -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']))) {

1
public/js/pages/WarehouseHistory/WarehouseHistoryModal.js
View File

@@ -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>

6
public/plugins/vue/tt-components/tt-autocomplete.js
View File

@@ -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;

148
public/plugins/vue/tt-components/tt-datepicker.js
View File

@@ -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);
},
})

12
public/plugins/vue/tt-components/tt-table-crud.js
View File

@@ -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) {

13
public/plugins/vue/tt-components/tt-table.js
View File

@@ -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);