727 lines
33 KiB
JavaScript
727 lines
33 KiB
JavaScript
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'));
|
|
}
|
|
}) |