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

Updated WarehouseShippingNote

Browse Source
This commit is contained in:
Luca Haid
2024-11-12 18:24:25 +01:00
parent 50228c36e4
commit e42a13041b
18 changed files with 1191 additions and 332 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
Layout/default/VueViews/Vue.php
View File

@@ -1,5 +1,4 @@
<?php
if (!isset($vueViewName)) {
die("vueViewName is not set");
}
@@ -10,13 +9,29 @@ if (!isset($mfLayoutPackage)) {
$additionalCSS = $additionalCSS ?? [];
$additionalJS = $additionalJS ?? [];
$vueViewPath = BASEDIR . "/public/js/pages/$vueViewName";
$additionalJS = [
"bundler.php",
"js/pages/" . $vueViewName . "/" . $vueViewName . ".js",
...$additionalJS,
];
if (is_dir($vueViewPath)) {
$files = scandir($vueViewPath);
foreach ($files as $file) {
if ($file === '.' || $file === '..') {
continue;
}
$fileExtension = pathinfo($file, PATHINFO_EXTENSION);
if ($fileExtension === 'css') {
$additionalCSS[] = "js/pages/$vueViewName/$file";
} else if ($fileExtension === 'js') {
$additionalJS[] = "js/pages/$vueViewName/$file";
}
}
}
$additionalCSS = [
...$additionalCSS,
'plugins/daterangepicker/daterangepicker.css',

22
Layout/default/WarehouseShippingNote/PDF_MAIN.php
View File

@@ -4,9 +4,14 @@
* @var WarehouseShippingNoteModel $shippingNote
* @var Array $positions
* @var Array $textElements
* @var bool $showPrices
*/
$this->setReturnValue(['filename' => $shippingNote->id . ".pdf"]);
?>
<!DOCTYPE html>
@@ -87,11 +92,15 @@ TODO: enable option for showing prices
-->
<h2 style="text-align: center;color: #005384">Ihr XINON Lieferschein vom <?=date("d.m.Y", $shippingNote->create)?></h2>
<p>
<?= $shippingNote->note ?>
</p>
<table style="border-collapse: collapse; width: 100%;" id="invoiceTable">
<tr style="font-weight: bold; border-bottom: 1px solid black;" class="uneven">
<th style="text-align: center">Position</th>
<th style="text-align: right;padding-right: 4pt">Menge</th>
<th style="text-align: right;padding-right: 4pt">EH</th>
<th style="text-align: left;padding-right: 4pt">Einheit</th>
<th style="text-align: center">Artikel</th>
<?php if($showPrices): ?>
<th style="text-align: right;padding-right: 4pt">Preis</th>
@@ -102,7 +111,7 @@ TODO: enable option for showing prices
<tr class="position <?=($i%2 == 0) ? "even" : "uneven" ?>">
<td style="text-align: center;"><?= $i + 1 ?></td>
<td style="text-align: right;padding-right: 8pt"><?=$p["amount"]?> </td>
<td style="text-align: right;padding-right: 8pt"><?=$p["articleUnit"]?> </td>
<td style="text-align: left;padding-right: 8pt"><?=$p["articleUnit"]?> </td>
<td style="text-align: center;"><b><?=$p["articleTitle"]?></b></td>
<?php if($showPrices): ?>
<td style="text-align: right;padding-right: 8pt"><?=number_format(
@@ -130,5 +139,14 @@ TODO: enable option for showing prices
</div>
<?php endif; ?>
<?php if(isset($shippingNote->signature) && $shippingNote->signature !== ''): ?>
<div style="margin-top: 20pt;">
<img src="<?=$shippingNote->signature?>" style="width: 200pt;" alt="Unterschrift konnte nicht geladen werden"/>
<div>Unterschrieben am: <?=date("d.m.Y", strtotime($shippingNote->signatureDate))?></div>
<div>Unterschrieben von: <?=$shippingNote->signatureName?></div>
</div>
<?php endif; ?>
</body>
</html>

9
application/WarehouseHistory/WarehouseHistoryController.php
View File

@@ -36,19 +36,22 @@ class WarehouseHistoryController {
if (isset($columns[array_search($item['key'], array_column($columns, 'key'))]['modal']['type'])) {
if($columns[array_search($item['key'], array_column($columns, 'key'))]['modal']['type'] === 'checkbox') {
if ($columns[array_search($item['key'], array_column($columns, 'key'))]['modal']['type'] === 'checkbox') {
$item['old_value'] = $item['old_value'] === '1' ? 'Ja' : 'Nein';
$item['new_value'] = $item['new_value'] === '1' ? 'Ja' : 'Nein';
}
if($columns[array_search($item['key'], array_column($columns, 'key'))]['modal']['type'] === 'select') {
if ($columns[array_search($item['key'], array_column($columns, 'key'))]['modal']['type'] === 'select') {
$column = $columns[array_search($item['key'], array_column($columns, 'key'))];
if (isset($column['modal']['items'][array_search($item['old_value'], array_column($column['modal']['items'], 'value'))]) &&
isset($column['modal']['items'][array_search($item['new_value'], array_column($column['modal']['items'], 'value'))])) {
$item['old_value'] = $column['modal']['items'][array_search($item['old_value'], array_column($column['modal']['items'], 'value'))]['text'];
$item['new_value'] = $column['modal']['items'][array_search($item['new_value'], array_column($column['modal']['items'], 'value'))]['text'];
}
}
}
$item['columnHeader'] = $columns[array_search($item['key'], array_column($columns, 'key'))]['text'];

212
application/WarehouseShippingNote/WarehouseShippingNoteController.php
View File

@@ -14,7 +14,8 @@ class WarehouseShippingNoteController extends TTCrud {
['key' => 'deliveryAddressName', 'text' => 'L.-Adr. Name', 'required' => true],
['key' => 'deliveryAddressLine', 'text' => 'L.-Adr.', 'required' => true],
['key' => 'deliveryAddressPLZ', 'text' => 'L.-Adr. PLZ', 'required' => true],
['key' => 'deliveryAddressCity', 'text' => 'L.-Adr. Ort', 'required' => true],
['key' => 'deliveryAddressEMail', 'text' => 'L.-Adr. EMail', 'required' => true, 'table' => false],
['key' => 'note', 'text' => 'Notiz', 'required' => true, 'table' => false],
['key' => 'status',
'text' => 'Status',
'required' => true,
@@ -63,6 +64,7 @@ class WarehouseShippingNoteController extends TTCrud {
self::returnJson(['success' => false, 'message' => 'Status muss "Neu" sein']);
die();
}
$postData['positions'] = json_encode($postData['positions']);
return true;
}
@@ -75,6 +77,7 @@ class WarehouseShippingNoteController extends TTCrud {
"\r"], " ", $address->getCompanyOrName())) . " (" . $address->zip . " " . $address->city . ", " . $address->street . ")" . (($address->customer_number) ? " [" . $address->customer_number . "]" : "")];
return $result;
}
return null;
}
protected function beforeUpdate($postData): bool {
@@ -169,6 +172,40 @@ class WarehouseShippingNoteController extends TTCrud {
self::returnJson($textElements);
}
protected function signAction() {
$id = $this->request->id;
if (strlen($id) < 1) {
http_response_code(500);
self::returnJson(['success' => false, 'message' => 'Lieferschein wurde nicht gefunden']);
}
$shippingNote = WarehouseShippingNoteModel::get($id);
if ($shippingNote->signature || $shippingNote->signatureName) {
http_response_code(500);
self::returnJson(['success' => false, 'message' => 'Lieferschein wurde bereits unterschrieben']);
}
$post = json_decode(file_get_contents('php://input'), true);
$shippingNote = (array) $shippingNote;
$shippingNote['signature'] = $post['signature'];
$shippingNote['signatureName'] = $post['signatureName'];
if (strlen($shippingNote['signature']) < 1 || strlen($shippingNote['signatureName']) < 1) {
http_response_code(500);
self::returnJson(['success' => false, 'message' => 'Unterschrift oder Name fehlt']);
}
try {
$shippingNote['signatureDate'] = date("Y-m-d");
WarehouseShippingNoteModel::update($shippingNote);
self::returnJson(['success' => true, 'message' => 'Unterschrift wurde gespeichert']);
} catch (Exception $e) {
http_response_code(500);
self::returnJson(['success' => false, 'message' => 'Unterschrift konnte nicht gespeichert werden']);
}
}
protected function createPDFAction() {
$id = $this->request->id;
if (strlen($id) < 1) {
@@ -194,9 +231,38 @@ class WarehouseShippingNoteController extends TTCrud {
$position['articleDescription'] = $articlePacket->description === $articlePacket->title ? "" : $articlePacket->description;
$position['articleUnit'] = 'Stk.';
$positions[] = $position;
} elseif (isset($position['articleText'])) {
$position['articleTitle'] = $position['articleText'];
$position['articleDescription'] = "";
$position['articleUnit'] = 'Stk.';
$positions[] = $position;
}
}
// json decode hoursEntries and add to positions
$hoursEntries = json_decode($shippingNote->hoursEntries, true);
foreach ($hoursEntries as $hoursEntry) {
$positions[] = [
'articleTitle' => "Arbeitsstunden",
'articleDescription' => $hoursEntry['note'],
'articleUnit' => 'Std.',
'amount' => $hoursEntry['hourCount'],
'price' => $hoursEntry['hourlyPrice'] * $hoursEntry['hourCount'] ?? 0,
];
if ($hoursEntry['carId']) {
$positions[] = [
'articleTitle' => "Fahrkostenpauschale",
'articleDescription' => "Fahrzeug: " . TimerecordingCarModel::getOne($hoursEntry['carId'])->number_plate,
'articleUnit' => 'Km',
'amount' => $hoursEntry['kilometerCount'],
'price' => 1 * $hoursEntry['kilometerCount'] ?? 0,
];
}
}
$textElements = [];
// parse shippingNote.textElements ({"1":true,"2":true}) to array, fetch each text element and put content into array
$shippingNoteTextElements = json_decode($shippingNote->textElements, true);
@@ -259,4 +325,148 @@ class WarehouseShippingNoteController extends TTCrud {
header('Content-Disposition: inline; filename="' . $filename . '"');
readfile($filename);
}
// TODO: either move this to UserController or make it better
protected function userAutoCompleteAction() {
$users = array_map(function($user) {
return ['value' => $user->id, 'text' => $user->name];
}, UserModel::search(['employee' => true]));
$out = null;
$searchedID = $this->request->searchedID;
if (strlen($searchedID) > 0) {
// find user with value searchedID
$out = array_filter($users, function($user) use ($searchedID) {
return $user['value'] == $searchedID;
});
} else {
$out = array_filter($users, function($user) {
;
return strpos(strtolower($user['text']), strtolower($this->request->q)) !== false;
});
$out = array_slice($out, 0, 10);
}
self::returnJson(array_values($out));
}
//TODO: either move this to TimerecordingCarController or make it better
protected function timerecordingCarAutoCompleteAction() {
$timerecordingCars = array_map(function($timerecordingCar) {
return ['value' => $timerecordingCar->id, 'text' => $timerecordingCar->number_plate . " " . $timerecordingCar->brand . " " . $timerecordingCar->model];
}, TimerecordingCarModel::getAll());
$out = null;
$searchedID = $this->request->searchedID;
if (strlen($searchedID) > 0) {
// find user with value searchedID
$out = array_filter($timerecordingCars, function($timerecordingCar) use ($searchedID) {
return $timerecordingCar['value'] == $searchedID;
});
} else {
$out = array_filter($timerecordingCars, function($timerecordingCar) {
return strpos(strtolower($timerecordingCar['text']), strtolower($this->request->q)) !== false;
});
$out = array_slice($out, 0, 10);
}
self::returnJson(array_values($out));
}
protected function timerecordingCarForUserAction() {
$timerecordingCars = TimerecordingCarModel::getAll();
$out = null;
foreach ($timerecordingCars as $timerecordingCar) {
if ($timerecordingCar->user_id == $this->user->id) {
header('Content-Type: application/json');
die(json_encode(['success' => true, 'id' => $timerecordingCar->id]));
}
}
die(json_encode(['success' => true, 'id' => 2]));
}
//TODO: export this to an api class for openstreetmap
protected function getDistanceAction() {
// $filename = TEMP_DIR . "/DeviceMonitoring/interfacesWithCongestion.json";
// use dir TEMP_DIR /OpenStreetMap/from-to.json to cache the results
$filename = TEMP_DIR . "/OpenStreetMap/" . urlencode($this->request->from) . "-" . urlencode($this->request->to) . ".json";
if (file_exists($filename)) {
$data = file_get_contents($filename);
self::returnJson(json_decode($data, true));
}
$from = $this->request->from;
$to = $this->request->to;
$from = urlencode($from);
$to = urlencode($to);
function geocode($address) {
if ($address === 'Xinon GmbH') {
return [['lat' => 46.99555015, 'lon' => 15.77507876755547]];
}
$curl = curl_init();
curl_setopt_array($curl, [
CURLOPT_URL => "https://nominatim.openstreetmap.org/search?q=$address&format=json",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_FOLLOWLOCATION => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 30,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "GET",
CURLOPT_HTTPHEADER => [
"accept: application/json",
"accept-language: de-AT,de;q=0.9,en;q=0.8",
"origin: https://routing.openstreetmap.de",
"referer: https://routing.openstreetmap.de/",
"user-agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36"
],
]);
$response = curl_exec($curl);
$err = curl_error($curl);
if ($err) {
die(json_encode(['success' => false, 'message' => 'Error while geocoding']));
}
curl_close($curl);
return json_decode($response, true);
}
function route($from, $to) {
$fromData = geocode($from);
$toData = geocode($to);
$fromLat = $fromData[0]['lat'];
$fromLon = $fromData[0]['lon'];
$toLat = $toData[0]['lat'];
$toLon = $toData[0]['lon'];
$url = "https://router.project-osrm.org/route/v1/driving/$fromLon,$fromLat;$toLon,$toLat?overview=false";
$data = json_decode(file_get_contents($url), true);
$distance = $data['routes'][0]['distance'];
return $distance;
}
$fromData = geocode($from);
$toData = geocode($to);
$distance = route($from, $to);
$roundedDistanceKm = round($distance / 1000, 0);
if (!file_exists(dirname($filename))) {
mkdir(dirname($filename), 0777, true);
}
file_put_contents($filename, json_encode(['success' => true, 'distance' => $roundedDistanceKm]));
self::returnJson(['success' => true, 'distance' => $roundedDistanceKm]);
}
}

6
application/WarehouseShippingNote/WarehouseShippingNoteModel.php
View File

@@ -7,9 +7,15 @@ class WarehouseShippingNoteModel extends TTCrudBaseModel {
public string $deliveryAddressLine;
public string $deliveryAddressPLZ;
public string $deliveryAddressCity;
public string $deliveryAddressEMail;
public string $note;
public string $status; // 'new'|'accepted'|'invoiced'
public string $positions;
public string $textElements;
public string $hoursEntries;
public ?string $signature;
public ?string $signatureName;
public ?string $signatureDate;
public ?int $eShopOrderId;
public int $create;
public int $createBy;

47
db/migrations/20241112180000_warehouse_modify_2.php Normal file
View File

@@ -0,0 +1,47 @@
<?php /** @noinspection ALL */
declare(strict_types=1);
use Phinx\Migration\AbstractMigration;
final class WarehouseModify2 extends AbstractMigration {
public function up(): void {
if ($this->getEnvironment() == "thetool") {
//WarehouseShippingNote Table
$WarehouseShippingNote = $this->table("WarehouseShippingNote", ["signed" => true]);
$WarehouseShippingNote->addColumn("deliveryAddressEMail", "string", ["null" => false, "limit" => 255]);
$WarehouseShippingNote->addColumn("note", "string", ["null" => false, "limit" => 255]);
$WarehouseShippingNote->addColumn("hoursEntries", "string", ["null" => false, "limit" => 255]);
$WarehouseShippingNote->addColumn("signature", "string", ["null" => true, "limit" => 255]);
$WarehouseShippingNote->addColumn("signatureName", "string", ["null" => true, "limit" => 255]);
$WarehouseShippingNote->addColumn("signatureDate", "string", ["null" => true, "limit" => 255]);
$WarehouseShippingNote->save();
//WarehouseArticle Table
$WarehouseArticle = $this->table("WarehouseArticle", ["signed" => true]);
$WarehouseArticle->changeColumn("cheapestSellPrice", "string", ["null" => true, "limit" => 255]);
$WarehouseArticle->save();
}
if ($this->getEnvironment() == "addressdb") {
}
}
public function down(): void {
if ($this->getEnvironment() == "thetool") {
$this->table("WarehouseShippingNote")->removeColumn("deliveryAddressEMail");
$this->table("WarehouseShippingNote")->removeColumn("note");
$this->table("WarehouseShippingNote")->removeColumn("hoursEntries");
$this->table("WarehouseShippingNote")->removeColumn("signature");
$this->table("WarehouseShippingNote")->removeColumn("signatureName");
$this->table("WarehouseShippingNote")->removeColumn("signatureDate");
$this->table("WarehouseShippingNote")->save();
$this->table("WarehouseArticle")->changeColumn("cheapestSellPrice", "string", ["null" => false, "limit" => 255]);
}
if ($this->getEnvironment() == "addressdb") {
}
}
}

9
docker/php/Dockerfile
View File

@@ -5,12 +5,15 @@ FROM debian:bookworm
RUN apt update
RUN apt install wget libfontenc1 xfonts-75dpi xfonts-base xfonts-encodings xfonts-utils openssl build-essential libssl-dev libxrender-dev git-core libx11-dev libxext-dev libfontconfig1-dev libfreetype6-dev fontconfig -y
# wget https://github.com/wkhtmltopdf/packaging/releases/download/0.12.6-1/wkhtmltox_0.12.6-1.stretch_amd64.deb
# dpkg ignore
# dpkg --force-all -i wkhtmltox_0.12.6-1.stretch_amd64.deb
# wget https://www.mytaxexpress.com/download/libssl1.1_1.1.1f-1ubuntu2.17_amd64.deb
# dpkg -i libssl1.1_1.1.1f-1ubuntu2.17_amd64.deb
# wget https://archive.debian.org/debian/pool/main/libj/libjpeg8/libjpeg8_8b-1_amd64.deb
# dpkg -i libjpeg8_8b-1_amd64.deb
# Install apache2 and PHP and PHP modules
RUN apt update && \
apt install -y apache2 curl cron unzip php8.2 php8.2-curl php8.2-cli php8.2-mysqli php8.2-gd php8.2-zip php8.2-dom php8.2-mbstring && \
apt install -y apache2 curl cron unzip php8.2 php8.2-imap php8.2-curl php8.2-cli php8.2-mysqli php8.2-gd php8.2-zip php8.2-dom php8.2-mbstring && \
curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer && \
apt clean && \
rm -rf /var/lib/apt/lists/*

1
public/bundler.php
View File

@@ -44,6 +44,7 @@ $jsFiles = [
"plugins/vue/tt-components/tt-icon-select.js",
"plugins/vue/tt-components/tt-number-range.js",
"plugins/vue/tt-components/tt-checkbox.js",
"plugins/vue/tt-components/tt-textarea.js",
];

61
public/js/pages/WarehouseShippingNote/WarehouseShippingNote.css Normal file
View File

@@ -0,0 +1,61 @@
.warehouse-shipping-note-modal-positions-entry-container {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
grid-gap: 10px;
}
.warehouse-shipping-note-modal-positions-entry-actions, .warehouse-shipping-note-modal-hours-entry-actions {
display: flex;
flex-direction: column;
justify-content: center;
padding-top: 13px;
}
.warehouse-shipping-note-modal-hours-entry-container {
display: grid;
grid-template-columns: 2fr 1fr 1fr 2fr 1fr 1fr 1fr;
grid-gap: 10px;
}
.warehouse-shipping-note-modal-hours-entry-container.hideHourlyPrice {
grid-template-columns: 2fr 1fr 1fr 2fr 1fr 1fr;
}
@media (min-width: 992px) {
.modal-lg, .modal-xl {
/*max width either 90% or 1120px*/
max-width: min(90vw, 1120px) !important;
}
}
@media (max-width: 992px) {
.warehouse-shipping-note-modal-positions-entry-container,
.warehouse-shipping-note-modal-hours-entry-container{
display: grid;
grid-template-columns: 1fr 1fr !important;
grid-gap: 10px;
}
.signModal > div {
margin: 0;
width: 100vw;
height: 100vh;
max-height: unset;
max-width: unset;
}
.signModal .modal-content {
height: 100%;
max-height: 100%;
}
.signModal .modal-body {
height: 100%;
max-height: 100%;
}
.signModal .modal-footer {
display: none;
}
}

310
public/js/pages/WarehouseShippingNote/WarehouseShippingNote.js
View File

@@ -1,25 +1,11 @@
const defaultCrudModalData = {
billingAddressId: '',
deliveryAddressName: '',
deliveryAddressLine: '',
deliveryAddressPLZ: '',
deliveryAddressCity: '',
status: 'new',
positions: [],
textElements: {}
}
window.crudModalStatusOptions =
[{value: 'new', text: 'Neu'}, {value: 'accepted', text: 'Akzeptiert'}, {value: 'invoiced', text: 'In Rechnung gestellt'}]
// create a additional vue component for showing positions in the table with lazy loading for article titles and description
Vue.component('warehouse-shipping-note-positions', {
//language=Vue
props: {
positions: Array
positions: Array,
hoursEntries: Array
}, data() {
return {
articleData: {}, loading: false, articlePacketData: {}
articleData: {}, loading: false, articlePacketData: {}, userData: {}
}
}, template: `
<div>
@@ -30,8 +16,13 @@ Vue.component('warehouse-shipping-note-positions', {
<ul v-if="!loading">
<li v-for="position in positions">
<span>{{ position.amount }}x {{ position.article ? articleData[position.article]?.text : articlePacketData[position.articlePacket]?.text }}</span>
<span>{{ position.amount }}x
{{ position.article ? articleData[position.article]?.text : position.articlePacket ? articlePacketData[position.articlePacket]?.text : position.articleText }}</span>
</li>
<template v-for="entry in hoursEntries">
<li><span>{{ entry.hourCount }}h Arbeitszeit</span></li>
<li v-if="entry.carId">{{entry.kilometerCount}}km Anfahrt</li>
</template>
</ul>
</div>
`, async mounted() {
@@ -45,110 +36,37 @@ Vue.component('warehouse-shipping-note-positions', {
this.$set(this.articlePacketData, position.articlePacket, response.data[0]);
}
}
for (const entry of this.hoursEntries) {
if (entry.userId) {
const response = await axios.get(window.TT_CONFIG["BASE_PATH"] + '/WarehouseShippingNote/userAutoComplete?searchedID=' + entry.userId);
this.$set(this.userData, entry.userId, response.data[0]);
}
}
this.loading = false;
}
})
// noinspection JSUnusedLocalSymbols
Vue.component('warehouse-shipping-note', {
//language=Vue
template: `
<tt-card>
<tt-modal :show.sync="crudModal" :id="crudModalId"
:delete="false"
@submit="createOrUpdate()"
:title="crudModalId === 'create' ? 'Lieferschein erstellen' : 'Lieferschein bearbeiten'">
<tt-autocomplete v-model="crudModalData.billingAddressId"
:api-url="window.TT_CONFIG['BASE_PATH'] + '/Address/Api?do=findAddress'"
label="Rechnungsadresse" sm row/>
<tt-select
v-if="crudModalId === 'create'"
v-model="crudModalSelectDeliveryAddressMode" :options="crudModalSelectDeliveryAddressModeItems" label="Lieferadresse Art" sm
row/>
<template v-if="crudModalSelectDeliveryAddressMode === 'existing'">
<tt-select v-model="crudModalDataDeliveryAddressSelected" :options="crudModalDataDeliveryAddressOptions" label="Lieferadresse" sm row/>
</template>
<template v-else-if="crudModalSelectDeliveryAddressMode === 'new'">
<tt-input v-model="crudModalData.deliveryAddressName" label="Lieferadresse Name" sm row/>
<tt-input v-model="crudModalData.deliveryAddressLine" label="Lieferadresse" sm row/>
<tt-input v-model="crudModalData.deliveryAddressPLZ" label="Lieferadresse PLZ" sm row/>
<tt-input v-model="crudModalData.deliveryAddressCity" label="Lieferadresse Ort" sm row/>
</template>
<tt-select v-if="crudModalVerifyMode === true" v-model="crudModalData.status" :options="window.crudModalStatusOptions" label="Status" sm
row/>
<!-- show a checkbox for each textElement and if selected set it to selected [{"id":1,"title":"Zahlhinweis","content":"Bezahlung in 14 tagen","create":1728456765,"createBy":145}]-->
<template>
<hr>
<h4 class="text-center">Texte</h4>
<div v-for="textElement in textElements" style="display: inline-block; margin-right: 10px;">
<input type="checkbox" v-model="crudModalData.textElements[textElement.id]" :id="'textElement' + textElement.id">
<label :for="'textElement' + textElement.id">{{ textElement.title }}</label>
</div>
</template>
<hr>
<h4 class="text-center">Positionen</h4>
<template v-if="crudModalData.billingAddressId">
<div style="display: flex; justify-content: space-around;padding: 10px;">
<tt-autocomplete v-model="crudModalAddPositionArticle" :api-url="window.TT_CONFIG['BASE_PATH'] + '/WarehouseArticle/autoComplete'"
placeholder="Artikel" sm row/>
<tt-input v-model="crudModalAddPositionAmount" placeholder="Menge" sm row/>
<tt-input v-model="crudModalAddPositionPrice" placeholder="Preis" type="number" sm row/>
<button style="max-height: 29px" class="btn btn-sm btn-primary" @click="addPosition">Hinzufügen</button>
</div>
<table class="table table-sm">
<thead>
<tr>
<th>Position</th>
<th>Artikel</th>
<th>Menge</th>
<th>Preis</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="(position, index) in crudModalData.positions">
<td>{{ index + 1 }}</td>
<td>{{ position.article ? articleNames[position.article] : articlePacketNames[position.articlePacket] }}</td>
<td>{{ position.amount }}</td>
<td>{{ (position.price?.toFixed(2)) }} €</td>
<td>
<button class="btn btn-sm btn-danger" @click="crudModalData.positions.splice(index, 1)">Löschen</button>
</td>
</tr>
</tbody>
</table>
</template>
<template v-else>
<h5 class="text-center">Rechnungsadresse auswählen um Positionen hinzuzufügen</h5>
</template>
</tt-modal>
<warehouse-shipping-note-modal v-if="shippingNoteModalId" :id="shippingNoteModalId" @close="shippingNoteModalId = null;$refs.table.$refs.table.refreshTable()"
@open-signing-modal="signingShippingNoteId = $event"/>
<warehouse-history-modal :show.sync="historyModal" :id="historyModalId"/>
<warehouse-shipping-note-signature-pad v-if="signingShippingNoteId" :shipping-note-id="signingShippingNoteId" @close="signingShippingNoteId = null"/>
<button @click="openCrudModal('create')" class="btn btn-primary">Lieferschein erstellen</button>
<button @click="openVerifyModal" class="btn btn-primary">Lieferscheine Freigeben</button>
<button @click="openBilledModal" class="btn btn-primary">Lieferscheine als verrechnet markieren</button>
<button @click="shippingNoteModalId = 'create'" class="btn btn-primary">Lieferschein erstellen</button>
<tt-table-crud emit-edit
@openHistory="historyModal = true; historyModalId = $event.id"
@print="window.open(window.TT_CONFIG['BASE_PATH'] + '/WarehouseShippingNote/createPDF?id=' + $event.id)"
@printWithPrice="window.open(window.TT_CONFIG['BASE_PATH'] + '/WarehouseShippingNote/createPDF?id=' + $event.id + '&price=true')"
@edit="openCrudModal($event)"
@edit="shippingNoteModalId = $event.id"
ref="table">
<template v-slot:expandedRow="{ row }">
<warehouse-shipping-note-positions :positions="JSON.parse(row.positions)"/>
<warehouse-shipping-note-positions :positions="JSON.parse(row.positions)" :hours-entries="JSON.parse(row.hoursEntries)"/>
</template>
</tt-table-crud>
@@ -158,193 +76,11 @@ Vue.component('warehouse-shipping-note', {
window: window,
historyModal: false,
historyModalId: null,
crudModal: false,
crudModalSelectDeliveryAddressModeItems: [{text: 'Wie Rechnungsadresse', value: 'billing'},
{text: 'Bestehende Lieferadresse', value: 'existing'},
{text: 'Neue Lieferadresse', value: 'new'}],
crudModalSelectDeliveryAddressMode: 'billing',
crudModalDataDeliveryAddressOptions: [],
crudModalDataDeliveryAddressSelected: '',
crudModalVerifyMode: false,
crudModalId: null,
crudModalData: defaultCrudModalData,
crudModalAddPositionArticle: '',
crudModalAddPositionAmount: '',
crudModalAddPositionPrice: '',
articleNames: {},
articlePacketNames: {},
textElements: [],
shippingNoteModalId: null,
signingShippingNoteId: null
}
}, async mounted() {
const response = await axios.get(window.TT_CONFIG["BASE_PATH"] + '/WarehouseShippingNote/getAllTextElements');
this.textElements = response.data;
},
methods: {
async openBilledModal() {
const unbilledShippingNotes = await axios.post(window.TT_CONFIG['BASE_PATH'] + '/WarehouseShippingNote/get', {
"pagination": {"page": 1, "per_page": 1}, "filters": {
"status": "accepted"
}, "order": {"key": null, "order": "asc"}
});
if (unbilledShippingNotes.data.rows.length === 0) {
this.window.notify('warning', 'Keine Lieferscheine zum Verrechnen gefunden');
return;
}
await this.openCrudModal(unbilledShippingNotes.data.rows[0]);
this.crudModalVerifyMode = true;
},
async openVerifyModal() {
const unverifiedShippingNotes = await axios.post(window.TT_CONFIG['BASE_PATH'] + '/WarehouseShippingNote/get', {
"pagination": {"page": 1, "per_page": 1}, "filters": {
"status": "new"
}, "order": {"key": null, "order": "asc"}
});
if (unverifiedShippingNotes.data.rows.length === 0) {
this.window.notify('warning', 'Keine Lieferscheine zum Freigeben gefunden');
return;
}
await this.openCrudModal(unverifiedShippingNotes.data.rows[0]);
this.crudModalVerifyMode = true;
}, resetCrudModalData() {
this.crudModalData.billingAddressId = '';
this.crudModalData.deliveryAddressName = '';
this.crudModalData.deliveryAddressLine = '';
this.crudModalData.deliveryAddressPLZ = '';
this.crudModalData.deliveryAddressCity = '';
this.crudModalAddPositionArticle = '';
this.crudModalAddPositionAmount = '';
this.crudModalAddPositionPrice = '';
this.crudModalSelectDeliveryAddressMode = 'billing';
this.crudModalDataDeliveryAddressSelected = '';
this.crudModal = false;
}, async openCrudModal(data) {
this.resetCrudModalData();
this.crudModalVerifyMode = false;
if (data === 'create') {
this.crudModalId = 'create'
this.crudModalData = defaultCrudModalData
this.crudModal = true
} else {
this.crudModalSelectDeliveryAddressMode = 'new';
const disconnectedData = JSON.parse(JSON.stringify(data));
if (disconnectedData.status !== 'new' && disconnectedData.status !== 'accepted') {
this.window.notify('warning', 'Lieferschein kann nicht bearbeitet werden, da er bereits in Rechnung gestellt wurde');
return;
}
disconnectedData.textElements = JSON.parse(disconnectedData.textElements);
disconnectedData.positions = JSON.parse(disconnectedData.positions);
for (const position of disconnectedData.positions) {
if (position.article) await this.fetchArticleNames(position.article);
if (position.articlePacket) await this.fetchArticlePacketNames(position.articlePacket);
}
this.crudModalId = 'update'
this.crudModalData = disconnectedData
this.crudModal = true
}
}, async addPosition() {
const missingFields = [];
// ---------- Check Required Fields ----------
if (!this.crudModalAddPositionArticle) missingFields.push('Artikel');
if (!this.crudModalAddPositionAmount) missingFields.push('Menge');
if (!this.crudModalAddPositionPrice) missingFields.push('Preis-Überschreibung');
if (missingFields.length > 0) {
window.notify('error', 'Bitte füllen Sie die folgenden Felder aus: ' + missingFields.join(', '));
return;
}
// ---------- Check if same article is already in positions ----------
const articleAlreadyInPositions = this.crudModalData.positions.find(position => position.article === this.crudModalAddPositionArticle);
if (articleAlreadyInPositions) {
window.notify('error', 'Artikel ist bereits in den Positionen enthalten');
return;
}
await this.fetchArticleNames(this.crudModalAddPositionArticle);
this.crudModalData.positions.push({
article: this.crudModalAddPositionArticle, amount: this.crudModalAddPositionAmount, price: parseFloat(this.crudModalAddPositionPrice)
});
//TODO: post to server
}, async fetchArticleNames(articleId) {
const response = await axios.get(window.TT_CONFIG["BASE_PATH"] + '/WarehouseArticle/autoComplete?searchedID=' + articleId);
this.$set(this.articleNames, articleId, response.data[0].text);
}, async fetchArticlePacketNames(articlePacketId) {
const response = await axios.get(window.TT_CONFIG["BASE_PATH"] + '/WarehouseArticlePacket/autoComplete?searchedID=' + articlePacketId);
this.$set(this.articlePacketNames, articlePacketId, response.data[0].text);
}, async createOrUpdate() {
const response = await axios.post(this.crudModalId === 'create' ? window['TT_CONFIG']['CREATE_URL'] : window['TT_CONFIG']['UPDATE_URL'],
this.crudModalData);
if (response.data.success) {
this.$refs.table.$refs.table.refreshTable();
this.resetCrudModalData();
this.window.notify('success', response.data.message || 'Erfolgreich gespeichert');
} else {
this.window.notify('error',
response.data.errors ? Object.values(response.data.errors).join('<br>') : response.data.message || 'Ein Fehler ist aufgetreten');
}
}, async fetchDeliveryAddresses() {
if (!this.crudModalData.billingAddressId || this.crudModalSelectDeliveryAddressMode !== 'existing' && this.crudModalSelectDeliveryAddressMode !== 'billing') return;
if (this.crudModalSelectDeliveryAddressMode === 'billing') {
const response = await axios.get(window.TT_CONFIG["BASE_PATH"] + '/Address/api?do=getAddress&id=' + this.crudModalData.billingAddressId);
if (response.data.status !== 'OK' || !response.data.result.address) {
window.notify('error', 'Rechnungsadresse konnte nicht gefunden werden');
return;
}
this.crudModalData.deliveryAddressName =
response.data.result.address.company || response.data.result.address.firstname + ' ' + response.data.result.address.lastname;
this.crudModalData.deliveryAddressLine = response.data.result.address.street;
this.crudModalData.deliveryAddressPLZ = response.data.result.address.zip;
this.crudModalData.deliveryAddressCity = response.data.result.address.city;
}
if (!this.crudModalData.billingAddressId || this.crudModalSelectDeliveryAddressMode !== 'existing') return;
const response = await axios.get(window.TT_CONFIG["BASE_PATH"] +
'/WarehouseShippingNote/getDeliveryAddresses?billingAddressId=' +
this.crudModalData.billingAddressId);
this.crudModalDataDeliveryAddressOptions = response.data.map(address => {
address.value = address.id;
address.text = `${address.deliveryAddressName} - ${address.deliveryAddressLine}, ${address.deliveryAddressPLZ} ${address.deliveryAddressCity}`;
return address;
});
}
}, watch: {
crudModalAddPositionArticle: async function (newValue) {
if (!newValue) return;
const url = `${window.TT_CONFIG["BASE_PATH"]}/WarehouseShippingNote/getArticleAddressPrice?articleId=${newValue}&addressId=${this.crudModalData.billingAddressId}`;
const response = await axios.get(url);
this.crudModalAddPositionPrice = response.data.price;
},
crudModalData: {handler: 'fetchDeliveryAddresses', deep: true},
crudModalSelectDeliveryAddressMode: {handler: 'fetchDeliveryAddresses', deep: true},
crudModalDataDeliveryAddressSelected: function (newValue) {
if (!newValue) return;
const selectedAddress = this.crudModalDataDeliveryAddressOptions.find(address => address.id === parseInt(newValue));
if (!selectedAddress) {
window.notify('error', 'Lieferadresse konnte nicht gefunden werden');
return;
}
this.crudModalData.deliveryAddressName = selectedAddress.deliveryAddressName;
this.crudModalData.deliveryAddressLine = selectedAddress.deliveryAddressLine;
this.crudModalData.deliveryAddressPLZ = selectedAddress.deliveryAddressPLZ;
this.crudModalData.deliveryAddressCity = selectedAddress.deliveryAddressCity;
}
}
})

727
public/js/pages/WarehouseShippingNote/WarehouseShippingNoteModal.js Normal file
View File

@@ -0,0 +1,727 @@
Vue.component('warehouse-shipping-note-modal-text-elements', {
props: {
textElements: Array
},
data() {
return {
window: window,
textElementsData: [],
}
},
//language=Vue
template: `
<div style="display: flex; align-items: center; justify-content: center;">
<template v-if="textElementsData.length > 0">
<div v-for="textElement in textElementsData" style="display: inline-block; margin-right: 10px;">
<input type="checkbox" v-model="textElements[textElement.id]" :id="'textElement' + textElement.id">
<label :for="'textElement' + textElement.id" :title="textElement.content">{{ textElement.title }}</label>
</div>
</template>
<template v-else>
<div class="text-center">
<i class="fa fa-spinner fa-spin"></i>
</div>
</template>
</div>
`,
async mounted() {
const response = await axios.get(window.TT_CONFIG["BASE_PATH"] + '/WarehouseShippingNote/getAllTextElements');
this.textElementsData = response.data;
}
})
// TODO: maybe also think about creating a component for simple forms like this
Vue.component('warehouse-shipping-note-modal-hours-entry', {
props: {
index: {type: [Number], required: false, default: null},
showHourlyPrice: {type: Boolean, default: false},
},
data() {
return {
window: window,
userApiUrl: window.TT_CONFIG['BASE_PATH'] + '/WarehouseShippingNote/userAutoComplete',
carApiUrl: window.TT_CONFIG['BASE_PATH'] + '/WarehouseShippingNote/timerecordingCarAutoComplete',
userId: '',
carId: '',
date: '',
hourCount: '',
kilometerCount: '',
hourlyPrice: '',
}
},
//language=Vue
template: `
<div class="warehouse-shipping-note-modal-hours-entry-container" v-bind:class="{ 'hideHourlyPrice': !showHourlyPrice }">
<tt-autocomplete v-model="userId" :api-url="userApiUrl" label="Mitarbeiter" sm/>
<tt-input v-model="date" label="Datum" type="date" sm/>
<tt-input v-model="hourCount" label="Stunden" sm/>
<tt-autocomplete v-model="carId" :api-url="carApiUrl" label="Fahrzeug" sm/>
<tt-input v-model="hourlyPrice" label="Stundenlohn" type="number" sm v-if="showHourlyPrice"/>
<tt-input v-model="kilometerCount" label="Kilometer" sm disabled/>
<div class="warehouse-shipping-note-modal-hours-entry-actions">
<button @click="createOrUpdate" class="btn btn-sm btn-primary">Speichern</button>
</div>
</div>
`,
methods: {
async createOrUpdate() {
if (!this.userId || !this.date || !this.hourCount) {
this.window.notify('error', 'Bitte füllen Sie alle Felder aus');
return;
}
this.$emit(this.index === null ? 'create' : 'update', {
userId: this.userId,
date: this.date,
hourCount: this.hourCount,
hourlyPrice: this.hourlyPrice || null,
carId: this.carId,
kilometerCount: this.kilometerCount
});
// TODO: maybe make this cleaner
Object.assign(this.$data, this.$options.data.apply(this))
await this.$nextTick();
this.userId = this.window.TT_CONFIG['USER_ID']
this.updateDate();
this.updateKilometerCount().then();
this.updateCarId().then();
},
async updateKilometerCount() {
const delAddr = this.$parent.$parent.$parent.delAddrLine +
' ' +
this.$parent.$parent.$parent.delAddrCity +
' ' +
this.$parent.$parent.$parent.delAddrPLZ;
const response = await axios.get(window.TT_CONFIG["BASE_PATH"] + '/WarehouseShippingNote/getDistance?from=Xinon%20GmbH&to=' + delAddr);
this.kilometerCount = response.data.distance
},
async updateCarId() {
const response = await axios.get(window.TT_CONFIG["BASE_PATH"] + '/WarehouseShippingNote/timerecordingCarForUser?userId=' + this.userId);
this.carId = response.data.id;
},
updateDate() {
if (!this.date) {
const today = new Date();
const dd = String(today.getDate()).padStart(2, '0');
const mm = String(today.getMonth() + 1).padStart(2, '0');
const yyyy = today.getFullYear();
this.date = `${yyyy}-${mm}-${dd}`;
}
}
},
async mounted() {
if (!this.carId) this.updateCarId().then();
if (!this.userId) this.userId = this.window.TT_CONFIG['USER_ID'];
if (!this.date) this.updateDate();
if (!this.kilometerCount) this.updateKilometerCount().then();
this.$parent.$parent.$parent.$watch('delAddrLine', this.updateKilometerCount);
}
})
// TODO: we should create this to a tt-simple-table component
Vue.component('warehouse-shipping-note-modal-hours-view', {
props: {
hoursEntries: {type: Array, required: true},
showHourlyPrice: {type: Boolean, default: false},
},
data() {
return {
window: window,
userNames: {}
}
},
//language=Vue
template: `
<div style="display: flex; align-items: center; justify-content: center;">
<table class="table table-striped table-sm" style="width: max-content">
<thead>
<tr>
<th>Mitarbeiter</th>
<th>Datum</th>
<th>ST</th>
<th>KM</th>
<th v-if="showHourlyPrice">Stundenlohn</th>
<th>Aktionen</th>
</tr>
</thead>
<tbody>
<tr v-if="hoursEntries.length === 0">
<td colspan="6" class="text-center">Keine Einträge</td>
</tr>
<tr v-for="entry in hoursEntries">
<td>{{ userNames[entry.userId] }}</td>
<td>{{ window.moment(entry.date).format('DD.MM.YYYY') }}</td>
<td>{{ entry.hourCount }}</td>
<td>{{ entry.kilometerCount }}</td>
<td v-if="showHourlyPrice">{{ entry.hourlyPrice }}</td>
<td>
<button class="btn btn-sm btn-danger" @click="$emit('delete', entry)">Löschen</button>
<button class="btn btn-sm btn-primary" @click="$emit('edit', entry)">Bearbeiten</button>
</td>
</tr>
</tbody>
</table>
</div>
`,
// add a method and a watcher to fetch the user names
methods: {
async fetchUserNames() {
for (const entry of this.hoursEntries) {
if (!entry.userId) continue;
if (entry.userId in this.userNames) continue;
const response = await axios.get(window.TT_CONFIG["BASE_PATH"] + '/WarehouseShippingNote/userAutoComplete?searchedID=' + entry.userId);
this.$set(this.userNames, entry.userId, response.data[0].text);
}
}
},
watch: {
hoursEntries: {
handler: 'fetchUserNames', immediate: true
}
},
})
// this component will combine the above 2 components and show the entries and the input fields
Vue.component('warehouse-shipping-note-modal-hours', {
props: {
hoursEntries: {type: Array, required: true},
showHourlyPrice: {type: Boolean, default: false},
},
data() {
return {
window: window,
selectedUpdateIndex: null,
}
},
//language=Vue
template: `
<div>
<warehouse-shipping-note-modal-hours-entry @create="create" @update="update" :index.sync="selectedUpdateIndex"
:show-hourly-price="showHourlyPrice" ref="entry"/>
<warehouse-shipping-note-modal-hours-view @delete="deleteEntry" @edit="editEntry" :hours-entries="hoursEntries"
:show-hourly-price="showHourlyPrice"/>
</div>
`,
methods: {
create(entry) {
this.$emit('update:hoursEntries', [...this.hoursEntries, entry]);
this.window.notify('success', 'Eintrag erstellt');
},
update(entry) {
this.$emit('update:hoursEntries', this.hoursEntries.map((oldEntry, index) => index === this.selectedUpdateIndex ? entry : oldEntry));
this.window.notify('success', 'Eintrag aktualisiert');
this.selectedUpdateIndex = null;
},
deleteEntry(entry) {
this.$emit('update:hoursEntries', this.hoursEntries.filter(oldEntry => oldEntry !== entry));
this.window.notify('success', 'Eintrag gelöscht');
},
editEntry(entry) {
this.selectedUpdateIndex = this.hoursEntries.indexOf(entry);
this.$refs.entry.userId = entry.userId;
this.$refs.entry.date = entry.date;
this.$refs.entry.hourCount = entry.hourCount;
this.$refs.entry.note = entry.note;
this.$refs.entry.hourlyPrice = entry.hourlyPrice;
}
}
})
// now we need the same as above for positions
// so we need warehouse-shipping-note-modal-positions-entry, warehouse-shipping-note-modal-positions-view and warehouse-shipping-note-modal-positions
// positions have a article or article packet, amount and price
// when a article or article packet is selected we should fetch the name and description
// then fetch the default price for the address
Vue.component('warehouse-shipping-note-modal-positions-entry', {
props: {
index: {type: [Number], required: false, default: null},
billAddrId: {type: [String, Number], required: true},
},
data() {
return {
window: window,
articleApiUrl: window.TT_CONFIG['BASE_PATH'] + '/WarehouseArticle/autoComplete',
articlePacketApiUrl: window.TT_CONFIG['BASE_PATH'] + '/WarehouseArticlePacket/autoComplete',
articleId: '',
articlePacketId: '',
amount: '',
price: '',
}
},
//language=Vue
template: `
<div class="warehouse-shipping-note-modal-positions-entry-container">
<tt-autocomplete v-model="articleId" :api-url="articleApiUrl" label="Artikel" sm ref="article"/>
<!-- <tt-autocomplete v-model="articlePacketId" :api-url="articlePacketApiUrl" label="Artikel Packet" sm/>-->
<tt-input v-model="amount" label="Menge" sm/>
<tt-input v-model="price" label="Preis" type="number" sm/>
<div class="warehouse-shipping-note-modal-positions-entry-actions">
<button @click="createOrUpdate" class="btn btn-sm btn-primary">Speichern</button>
</div>
</div>
`,
methods: {
// TODO: if articlePacket is needed we need to implement this
async createOrUpdate() {
if (!this.amount) return this.window.notify('error', 'Bitte füllen sie die Menge aus');
if (!this.price) return this.window.notify('error', 'Bitte füllen sie den Preis aus');
const data = {
amount: this.amount,
price: parseFloat(this.price)
}
if (!this.articleId && this.$refs.article.displayValue) {
data.articleText = this.$refs.article.displayValue;
} else if (this.articleId) {
data.article = this.articleId;
} else {
return this.window.notify('error', 'Bitte wählen Sie einen Artikel aus');
}
this.$emit(this.index === null ? 'create' : 'update', data);
Object.assign(this.$data, this.$options.data.apply(this))
},
async fetchPrice() {
if (!this.articleId && !this.articlePacketId || !this.billAddrId) return;
const url = `${window.TT_CONFIG["BASE_PATH"]}/WarehouseShippingNote/getArticleAddressPrice?articleId=${this.articleId ||
this.articlePacketId}&addressId=${this.billAddrId}`;
const response = await axios.get(url);
this.price = response.data.price;
}
},
watch: {
articleId: {handler: 'fetchPrice', immediate: false},
articlePacketId: {handler: 'fetchPrice', immediate: false},
billAddrId: {handler: 'fetchPrice', immediate: false},
},
})
// here will warehouse-shipping-note-modal-positions-view show the positions in a table
Vue.component('warehouse-shipping-note-modal-positions-view', {
props: {
positions: {type: Array, required: true},
},
data() {
return {
window: window,
articleNames: {},
articlePacketNames: {},
}
},
//language=Vue
template: `
<div style="display: flex; align-items: center; justify-content: center;">
<table class="table table-striped table-sm" style="width: max-content">
<thead>
<tr>
<th>Artikel</th>
<th>Menge</th>
<th>Preis</th>
<th>Aktionen</th>
</tr>
</thead>
<tbody>
<tr v-if="positions.length === 0">
<td colspan="4" class="text-center">Keine Einträge</td>
</tr>
<tr v-for="position in positions">
<td>{{ position.article ? articleNames[position.article] : position.articlePacket ? articlePacketNames[position.articlePacket] : position.articleText }}</td>
<td>{{ position.amount }}</td>
<td>{{ (position.price?.toFixed(2)) }} €</td>
<td>
<button class="btn btn-sm btn-danger" @click="$emit('delete', position)">Löschen</button>
<button class="btn btn-sm btn-primary" @click="$emit('edit', position)">Bearbeiten</button>
</td>
</tr>
</tbody>
</table>
</div>
`,
methods: {
async fetchNames() {
// TODO: there must be a better way to do this
for (const position of this.positions) {
if (position.article) this.$set(this.articleNames, position.article, 'Loading...');
if (position.articlePacket) this.$set(this.articlePacketNames, position.articlePacket, 'Loading...');
}
const articlePromises = this.positions.filter(position => position.article)
.map(position => axios.get(window.TT_CONFIG["BASE_PATH"] + '/WarehouseArticle/autoComplete?searchedID=' + position.article));
const articlePacketPromises = this.positions.filter(position => position.articlePacket)
.map(position => axios.get(window.TT_CONFIG["BASE_PATH"] + '/WarehouseArticlePacket/autoComplete?searchedID=' + position.articlePacket));
const articleResponses = await Promise.all(articlePromises);
const articlePacketResponses = await Promise.all(articlePacketPromises);
for (const response of articleResponses) {
this.$set(this.articleNames, response.data[0].value, response.data[0].text);
}
for (const response of articlePacketResponses) {
this.$set(this.articlePacketNames, response.data[0].value, response.data[0].text);
}
}
},
// watch positions and fetch article / article packet names - and initially fill them with Loading...
watch: {
positions: {
handler: 'fetchNames', immediate: true
}
}
})
// and here we combine the above 2 components
Vue.component('warehouse-shipping-note-modal-positions', {
props: {
positions: {type: Array, required: true},
billAddrId: {type: [String, Number], required: true},
},
data() {
return {
window: window,
articleNames: {},
articlePacketNames: {},
selectedUpdateIndex: null,
}
},
//language=Vue
template: `
<div>
<warehouse-shipping-note-modal-positions-entry @create="create" @update="update" :index.sync="selectedUpdateIndex" :bill-addr-id="billAddrId"
ref="entry"/>
<warehouse-shipping-note-modal-positions-view @delete="deleteEntry" @edit="editEntry" :positions="positions"/>
</div>
`,
methods: {
create(entry) {
this.$emit('update:positions', [...this.positions, entry]);
this.window.notify('success', 'Eintrag erstellt');
},
update(entry) {
this.$emit('update:positions', this.positions.map((oldEntry, index) => index === this.selectedUpdateIndex ? entry : oldEntry));
this.window.notify('success', 'Eintrag aktualisiert');
this.selectedUpdateIndex = null;
},
deleteEntry(entry) {
this.$emit('update:positions', this.positions.filter(oldEntry => oldEntry !== entry));
this.window.notify('success', 'Eintrag gelöscht');
},
editEntry(entry) {
this.selectedUpdateIndex = this.positions.indexOf(entry);
if (entry.article)this.$refs.entry.articleId = entry.article;
if (entry.articlePacket) this.$refs.entry.articlePacketId = entry.articlePacket;
if (entry.articleText) this.$refs.entry.$refs.article.displayValue = entry.articleText;
this.$refs.entry.amount = entry.amount;
this.$refs.entry.price = entry.price;
},
},
})
Vue.component('warehouse-shipping-note-modal', {
props: {
id: {type: [String, Number], required: true},
// available modes are ['sign', 'edit', 'accept', 'create']
mode: {type: String, default: 'sign'}
},
data() {
return {
window: window,
billAddrAutoCompleteUrl: window.TT_CONFIG['BASE_PATH'] + '/Address/Api?do=findAddress',
billAddrId: '',
delAddrName: '',
delAddrLine: '',
delAddrPLZ: '',
delAddrCity: '',
delAddrEMail: '',
status: '',
note: '',
textElements: [],
hoursEntries: [],
positions: [],
}
},
//language=Vue
template: `
<tt-modal :show="true" @submit="submit" :delete="false" :title="title" @update:show="$emit('close')">
<div style="width: 99%">
<h4 class="text-center">Liefer- und Rechnungsadresse</h4>
<tt-autocomplete v-model="billAddrId" :api-url="billAddrAutoCompleteUrl" label="Rechnungsadresse" sm row/>
<warehouse-shipping-note-modal-address :billAddrId="billAddrId" :del-addr-name.sync="delAddrName" :del-addr-line.sync="delAddrLine"
:del-addr-p-l-z.sync="delAddrPLZ" :del-addr-city.sync="delAddrCity"
:del-addr-e-mail.sync="delAddrEMail"/>
<template v-if="billAddrId && delAddrName && delAddrLine && delAddrPLZ && delAddrCity">
<hr>
<h4 class="text-center">Textelemente</h4>
<warehouse-shipping-note-modal-text-elements :text-elements="textElements"/>
<hr>
<tt-textarea label="Einleitender Text" v-model="note" sm row/>
<hr>
<h4 class="text-center">Stunden</h4>
<warehouse-shipping-note-modal-hours :hours-entries.sync="hoursEntries" :show-hourly-price="false"/>
<hr>
<h4 class="text-center">Positionen</h4>
<warehouse-shipping-note-modal-positions :positions.sync="positions" :bill-addr-id="billAddrId"/>
</template>
<div v-else class="text-center">Bitte füllen Sie die Rechnungs- und Lieferadresse aus</div>
</div>
<!-- TODO: fix these buttons-->
<template v-slot:footer-prepend v-if="id !== 'create'">
<button class="btn btn-info" @click="$emit('open-signing-modal', id)">Unterschreiben</button>
<!-- <button class="btn btn-success" @click="alert('Accept')">Akzeptieren</button>-->
<!-- <button class="btn btn-warning" @click="alert('Invoiced')">Verrechnet</button>-->
</template>
</tt-modal>
`,
// now we need methods for fetching the shipping note, submiting the shipping note and translate the keys as they are different in the backend
async mounted() {
// fetch by /getById?id=ID
if (this.id !== 'create') {
const response = await axios.get(window.TT_CONFIG["BASE_PATH"] + '/WarehouseShippingNote/getById?id=' + this.id);
this.billAddrId = response.data.billingAddressId;
this.delAddrName = response.data.deliveryAddressName;
this.delAddrLine = response.data.deliveryAddressLine;
this.delAddrPLZ = response.data.deliveryAddressPLZ;
this.delAddrCity = response.data.deliveryAddressCity;
this.delAddrEMail = response.data.deliveryAddressEMail;
this.note = response.data.note;
this.status = response.data.status;
for (const key of ['textElements', 'hoursEntries', 'positions']) {
try {
this[key] = JSON.parse(response.data[key]);
} catch {
this.textElements = [];
}
}
}
},
methods: {
openSigningModal() {
},
async submit() {
const data = {
billingAddressId: this.billAddrId,
deliveryAddressName: this.delAddrName,
deliveryAddressLine: this.delAddrLine,
deliveryAddressPLZ: this.delAddrPLZ,
deliveryAddressCity: this.delAddrCity,
deliveryAddressEMail: this.delAddrEMail,
textElements: this.textElements,
hoursEntries: this.hoursEntries,
positions: this.positions,
note: this.note,
status: this.status ? this.status : 'new'
}
if (this.id !== 'create') data.id = this.id;
const url = this.id === 'create' ? window.TT_CONFIG['CREATE_URL'] : window.TT_CONFIG['UPDATE_URL'];
const response = await axios.post(url, data);
if (response.data.success) {
this.window.notify('success', response.data.message || 'Erfolgreich gespeichert');
this.$emit('close');
} else {
this.window.notify('error',
response.data.errors ? Object.values(response.data.errors).join('<br>') : response.data.message || 'Ein Fehler ist aufgetreten');
}
}
},
computed: {
title() {
return this.id === 'create' ? 'Lieferschein erstellen' : `Lieferschein #${this.id} bearbeiten`;
}
}
})
Vue.component('warehouse-shipping-note-modal-address', {
// also add props for delAddrName, delAddrLine, delAddrPLZ, delAddrCity which we will sync with the parent component
props: {
billAddrId: {type: [String, Number], required: true},
delAddrName: {type: String, required: true},
delAddrLine: {type: String, required: true},
delAddrPLZ: {type: String, required: true},
delAddrCity: {type: String, required: true},
delAddrEMail: {type: String, required: true},
},
data() {
return {
window: window,
addressModes: [{text: 'Wie Rechnungsadresse', value: 'billing'},
{text: 'Bestehende Lieferadresse', value: 'existing'},
{text: 'Andere Lieferadresse', value: 'new'}],
addressMode: 'existing',
addresses: [],
fetchedBillAddr: null,
selectedAddr: '',
}
},
//language=Vue
template: `
<div>
<tt-select v-model="addressMode" :options="addressModes" label="Lieferadresse Art" sm row :disabled="billAddrId === ''"/>
<template v-if="addressMode === 'existing'">
<tt-select v-model="selectedAddr" :options="addresses" label="Lieferadresse" sm row/>
</template>
<template v-else-if="addressMode === 'new'">
<tt-input v-model="delAddrName" label="Lieferadresse Name" sm row/>
<tt-input v-model="delAddrLine" label="Lieferadresse" sm row/>
<tt-input v-model="delAddrPLZ" label="Lieferadresse PLZ" sm row/>
<tt-input v-model="delAddrCity" label="Lieferadresse Ort" sm row/>
<tt-input v-model="delAddrEMail" label="Lieferadresse E-Mail" sm row/>
</template>
</div>
`,
watch: {
billAddrId: {handler: 'updateBillingMode', immediate: false},
addressMode: {handler: 'fetchDeliveryAddresses', immediate: false},
selectedAddr: {handler: 'setSelectedAddrValues', immediate: false},
},
methods: {
async updateBillingMode() {
await this.fetchDeliveryAddresses();
// this.addressMode = 'billing';
console.log('updateBillingMode');
// Here we check if the address is already in the list of addresses, if not we will set the addressMode to billing and fetch the billing address
if (this.delAddrName && this.delAddrLine && this.delAddrPLZ && this.delAddrCity) {
const foundAddress = this.addresses.find(address => address.deliveryAddressName ===
this.delAddrName &&
address.deliveryAddressLine ===
this.delAddrLine &&
address.deliveryAddressPLZ ===
this.delAddrPLZ &&
address.deliveryAddressCity ===
this.delAddrCity && address.deliveryAddressEMail === this.delAddrEMail);
if (foundAddress) {
this.addressMode = 'existing';
this.selectedAddr = foundAddress.id;
} else {
this.addressMode = 'new';
}
} else {
this.addressMode = 'billing';
await this.fetchBillingAddress();
}
},
async fetchDeliveryAddresses() {
if (this.addressMode === 'billing' && this.billAddrId) {
await this.fetchBillingAddress();
return;
}
if (!this.billAddrId || this.addressMode !== 'existing' || this.fetchedBillAddr === this.billAddrId) return;
const response = await axios.get(window.TT_CONFIG["BASE_PATH"] + '/WarehouseShippingNote/getDeliveryAddresses?billingAddressId=' + this.billAddrId);
this.fetchedBillAddr = this.billAddrId;
this.addresses = response.data.map(address => {
address.value = address.id;
address.text = `${address.deliveryAddressName} - ${address.deliveryAddressLine}, ${address.deliveryAddressPLZ} ${address.deliveryAddressCity}`;
return address;
});
},
setSelectedAddrValues() {
if (!this.selectedAddr) return;
const selectedAddress = this.addresses.find(address => address.id === parseInt(this.selectedAddr));
if (!selectedAddress) {
this.window.notify('error', 'Lieferadresse konnte nicht gefunden werden');
return;
}
this.$emit('update:delAddrName', selectedAddress.deliveryAddressName);
this.$emit('update:delAddrLine', selectedAddress.deliveryAddressLine);
this.$emit('update:delAddrPLZ', selectedAddress.deliveryAddressPLZ);
this.$emit('update:delAddrCity', selectedAddress.deliveryAddressCity);
},
async fetchBillingAddress() {
const response = await axios.get(window.TT_CONFIG["BASE_PATH"] + '/Address/api?do=getAddress&id=' + this.billAddrId);
if (response.data.status !== 'OK' || !response.data.result.address) {
this.window.notify('error', 'Rechnungsadresse konnte nicht gefunden werden');
return;
}
this.window.notify('success', 'Rechnungsadresse gefunden');
this.$emit('update:delAddrName',
response.data.result.address.company || response.data.result.address.firstname + ' ' + response.data.result.address.lastname);
this.$emit('update:delAddrLine', response.data.result.address.street);
this.$emit('update:delAddrPLZ', response.data.result.address.zip);
this.$emit('update:delAddrCity', response.data.result.address.city);
this.$emit('update:delAddrEMail', response.data.result.address.email);
}
}
})
// now we need a signature pad component which will fire a close or a signed event and takes shipping note as a prop
// when mounted it will load https://cdn.jsdelivr.net/npm/signature_pad@4.1.7/dist/signature_pad.umd.min.js
// and display using a tt-modal
// and when save/submit is clicked we will send it to /WarehouseShippingNote/sign?id=ID POST with the signature as a base64 encoded image string
Vue.component('warehouse-shipping-note-signature-pad', {
props: {
shippingNoteId: {type: Number, required: true}
},
data() {
return {
window: window,
signaturePad: null,
shippingNote: null,
signatureName: '',
}
},
//language=Vue
template: `
<tt-modal class="signModal" :show="true" :delete="false" :submit="false" @update:show="$emit('close')" :title="'Unterschrift'">
<div style="max-width: 520px;display: flex; flex-direction: column; align-items: center;">
<div style="width: 480px"><tt-input v-model="signatureName" label="Name" row/></div>
<div><canvas id="signature-pad" width="500" height="200" style="border: 1px solid black"></canvas></div>
<div>
<button class="btn btn-primary" @click="submit()">Speichern</button>
<button class="btn btn-primary" @click="signaturePad.clear()">Leeren</button>
</div>
</div>
</tt-modal>
`,
methods: {
async submit() {
const data = this.signaturePad.toDataURL();
const response = await axios.post(window.TT_CONFIG['BASE_PATH'] + '/WarehouseShippingNote/sign?id=' + this.shippingNoteId, {signature: data, signatureName: this.signatureName});
if (response.data.success) {
this.window.notify('success', response.data.message || 'Erfolgreich unterschrieben');
this.$emit('close');
} else {
this.window.notify('error',
response.data.errors ? Object.values(response.data.errors).join('<br>') : response.data.message || 'Ein Fehler ist aufgetreten');
}
},
},
async mounted() {
// fetch shipping note by id
const response = await axios.get(window.TT_CONFIG["BASE_PATH"] + '/WarehouseShippingNote/getById?id=' + this.shippingNoteId);
this.shippingNote = response.data;
this.signaturePad = new SignaturePad(document.getElementById('signature-pad'));
}
})

6
public/js/pages/WarehouseShippingNote/WarehouseSignaturePad.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

11
public/plugins/vue/tt-components/css/tt-table.css
View File

@@ -151,6 +151,17 @@ input[type=number]::-webkit-outer-spin-button {
.tt-table.table-sm > tbody > tr > td * {
font-size: 16px !important;
}
.modal-footer {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 4px;
}
.modal-footer > button {
margin: 0 !important;
}
}
td {

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

@@ -24,7 +24,8 @@ Vue.component('tt-autocomplete', {
:style="{'padding-right': $slots.append ? '30px' : '0'}"
/>
<slot name="append"></slot>
<button v-show="displayValue.length > 0" @click="displayValue = ''; $emit('input', '');" tabindex="-1" type="button" class="btn btn-link position-absolute"
<button v-show="displayValue.length > 0" @click="displayValue = ''; $emit('input', '');" tabindex="-1" type="button"
class="btn btn-link position-absolute"
style="right: -5px; top: 50%; transform: translateY(-50%);">
<i class="fas fa-times"></i>
</button>
@@ -76,6 +77,27 @@ Vue.component('tt-autocomplete', {
sm: {type: Boolean, default: true},
row: {type: Boolean, default: false},
}, async mounted() {
this.updateDisplayValue().then();
}, data() {
return {
displayingItems: [], displayValue: '', isLoading: false, showSuggestions: false, cursor: -1, fetchSuggestionsDebounceTimer: null, disableIDFetch: false
};
}, watch: {
value: {handler: 'updateDisplayValue', immediate: true},
apiUrl() {
this.fetchSuggestions();
},
}, methods: {
async updateDisplayValue(newValue) {
if (this.disableIDFetch) {
this.disableIDFetch = false;
return;
}
if (newValue) {
this.value = newValue;
}
if (this.value && this.apiUrl) {
const response = await axios.get(`${this.apiUrl}&autocomplete=1&searchedID=${this.value}`);
this.displayValue = response.data[0].text;
@@ -86,19 +108,7 @@ Vue.component('tt-autocomplete', {
this.$emit('input', '');
this.displayValue = '';
}
}, data() {
return {
displayingItems: [], displayValue: '', isLoading: false, showSuggestions: false, cursor: -1, fetchSuggestionsDebounceTimer: null,
};
}, watch: {
value(newValue) {
const selectedItem = this.displayingItems.find(item => item.value === newValue);
this.displayValue = selectedItem ? selectedItem.text : '';
}, apiUrl() {
this.fetchSuggestions();
},
}, methods: {
onInput(event) {
this.displayValue = event.target.value;
this.$emit('input', '');
@@ -157,6 +167,7 @@ Vue.component('tt-autocomplete', {
}, 100);
}, 300); // Adjust the 300ms debounce time as needed
}, selectSuggestion(item) {
this.disableIDFetch = true;
this.$emit('input', item.value);
this.displayValue = item.text;
this.showSuggestions = false;

2
public/plugins/vue/tt-components/tt-input.js
View File

@@ -2,6 +2,7 @@ Vue.component('tt-input', {
props: {
label: String,
type: String,
disabled: Boolean,
placeholder: String,
required: Boolean,
row: Boolean,
@@ -34,6 +35,7 @@ Vue.component('tt-input', {
:class="{'form-control-sm': sm, 'col-sm-8': row}"
:placeholder="placeholder"
:required="required"
:disabled="disabled"
v-bind="additionalProps"
v-model="inputValue"
@input="$emit('input', $event.target.value)"

7
public/plugins/vue/tt-components/tt-modal.js
View File

@@ -52,8 +52,8 @@ Vue.component('tt-modal', {
@mousedown="$emit('update:show', false)"
@keydown.esc="$emit('update:show', false)"
v-if="show">
<div class="modal-dialog modal-lg" role="document" @mousedown.stop>
<div class="modal-content">
<div class="modal-dialog modal-lg modal-dialog-scrollable" role="document" @mousedown.stop>
<div class="modal-content" style="min-height: 45vh;">
<div class="modal-header">
<h5 class="modal-title">{{title}}</h5>
<button type="button" class="close" @click="$emit('update:show', false)">
@@ -65,9 +65,10 @@ Vue.component('tt-modal', {
</div>
<div class="modal-footer">
<slot name="footer">
<slot name="footer-prepend"></slot>
<button v-if="save" class="btn btn-primary" @click="$emit('submit')">{{saveText}}</button>
<button v-if="$props.delete" class="btn btn-danger" @click="$emit('delete')">{{deleteText}}</button>
<button class="btn btn-secondary" @click="$emit('update:show', false)">Close</button>
<button class="btn btn-secondary" @click="$emit('update:show', false)">Schließen</button>
</slot>
</div>
</div>

3
public/plugins/vue/tt-components/tt-select.js
View File

@@ -4,6 +4,7 @@ Vue.component('tt-select', {
label: {type: String, required: false},
required: {type: Boolean, default: false},
value: {type: [String, Number], required: false},
disabled: {type: Boolean, default: false},
suffix: {type: String, required: false},
sm: {type: Boolean, default: false},
row: {type: Boolean, default: false},
@@ -28,7 +29,7 @@ Vue.component('tt-select', {
:for="label">{{ label }}</label>
<select class="form-control" :class="{'form-control-sm': sm, 'col-sm-8': row}"
:required="required" v-model="selectedOption"
:required="required" v-model="selectedOption" :disabled="disabled"
@change="$emit('input', $event.target.value ? $event.target.value : undefined)">
<template v-for="option of options">
<option v-if="['string','number'].includes(typeof option)" :value="option" :disabled="option.disabled === true">{{ option }}

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

@@ -805,12 +805,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 thead th { position: sticky; top: ${headerHeight}px; z-index: 1; background-color: white; }`;
style.innerHTML = `table.tt-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 thead th { position: sticky; top: ${headerHeight}px; z-index: 1; background-color: white; }`;
style.innerHTML = `table.tt-table thead th { position: sticky; top: ${headerHeight}px; z-index: 1; background-color: white; }`;
})
document.head.appendChild(style);