Refactor invoice selection and filtering logic.
Updated components to enhance modularity and functionality for invoice selection and customer management. Introduced clearer structures for filters, improved modal handling, and added support for custom success callbacks.``
This commit is contained in:
Jepp9350
@@ -514,36 +514,29 @@ const confirmCloseModal = () => {
|
||||
<table class="table is-fullwidth is-hoverable">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>
|
||||
<p>
|
||||
{{selectedInvoiceCollections.length}}
|
||||
</p>
|
||||
</td>
|
||||
<td>
|
||||
<button
|
||||
class="button is-small"
|
||||
@click="invoiceSelectedCollections()"
|
||||
>
|
||||
{{SessionUser.objects.global.language.invoice}} {{SessionUser.objects.global.language.selected_multiple}}
|
||||
</button>
|
||||
</td>
|
||||
<td colspan="90%">
|
||||
<code>{{selectedInvoiceCollections}}</code>
|
||||
<td colspan="100%">
|
||||
<div class="buttons">
|
||||
<button
|
||||
class="button is-small"
|
||||
@click="invoiceSelectedCollections()"
|
||||
>
|
||||
{{SessionUser.objects.global.language.invoice}} {{SessionUser.objects.global.language.selected_multiple}} ({{selectedInvoiceCollections.length}})
|
||||
</button>
|
||||
<button
|
||||
class="button is-small"
|
||||
@click="selectAllInvoiceCollections()"
|
||||
:class="{
|
||||
'is-light': !isInvoiceCollectionSelectedAll(),
|
||||
'is-dark': isInvoiceCollectionSelectedAll()
|
||||
}"
|
||||
>
|
||||
{{ isInvoiceCollectionSelectedAll() ? SessionUser.objects.global.language.unselect : SessionUser.objects.global.language.select }} {{ SessionUser.objects.global.language.all.toLowerCase() }}
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="is-narrow" v-if="props.invoiceView && props.allowSelectMultiple">
|
||||
<button
|
||||
class="button is-small"
|
||||
@click="selectAllInvoiceCollections()"
|
||||
:class="{
|
||||
'is-light': !isInvoiceCollectionSelectedAll(),
|
||||
'is-dark': isInvoiceCollectionSelectedAll()
|
||||
}"
|
||||
>
|
||||
{{ isInvoiceCollectionSelectedAll() ? SessionUser.objects.global.language.unselect : SessionUser.objects.global.language.select }} {{ SessionUser.objects.global.language.all.toLowerCase() }}
|
||||
</button>
|
||||
</th>
|
||||
<th class="is-narrow" v-if="props.invoiceView && props.allowSelectMultiple"></th>
|
||||
<th class="is-narrow" v-if="props.invoiceView"></th>
|
||||
<th class="status-bar-table-header"></th>
|
||||
<template v-for="tableHeaders in tableHeaders" :key="tableHeaders">
|
||||
@@ -584,7 +577,7 @@ const confirmCloseModal = () => {
|
||||
<template v-for="order in orders" :key="order.id">
|
||||
<tr>
|
||||
<template v-if="props.invoiceView && props.allowSelectMultiple">
|
||||
<td>
|
||||
<td class="is-narrow">
|
||||
<button
|
||||
class="button is-small"
|
||||
@click="toggleInvoiceCollectionSelection(order.invoice_collection_id)"
|
||||
@@ -598,7 +591,7 @@ const confirmCloseModal = () => {
|
||||
</td>
|
||||
</template>
|
||||
<template v-if="props.invoiceView">
|
||||
<td>
|
||||
<td class="is-narrow">
|
||||
<button
|
||||
class="button is-small"
|
||||
@click="toggleDropdown(order)"
|
||||
|
||||
@@ -163,7 +163,7 @@ const tabs = ref([
|
||||
isSelector: true,
|
||||
onSelected: props.onInvoiceCollectionSelected,
|
||||
}"
|
||||
:display-closed="false"
|
||||
:display-booked="false"
|
||||
/>
|
||||
|
||||
</template>
|
||||
|
||||
+9
-1
@@ -26,6 +26,10 @@ const props = defineProps({
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
displayBooked: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
});
|
||||
import { defineProps } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
@@ -69,7 +73,11 @@ if (props.setCustomerFilter) {
|
||||
}
|
||||
|
||||
if (!props.displayClosed) {
|
||||
setFilter("closed_at", 'IS_NULL', false);
|
||||
setFilter("closed_at", 'is_null', false);
|
||||
}
|
||||
|
||||
if (!props.displayBooked) {
|
||||
setFilter("booked_invoice_id", 'is_null', false);
|
||||
}
|
||||
|
||||
if (props.autoLoad) {
|
||||
|
||||
+216
-207
@@ -42,6 +42,7 @@ import {
|
||||
getFilter,
|
||||
metaSearch,
|
||||
search,
|
||||
endpoint,
|
||||
setFilter,
|
||||
setOrder,
|
||||
hideSearchField,
|
||||
@@ -193,240 +194,248 @@ const getTimeShortcutIcon = (boolean) => {
|
||||
return boolean ? 'fas fa-check' : '';
|
||||
}
|
||||
|
||||
|
||||
const doesEndpointMatch = (matcher) => {
|
||||
// Check if the endpoint matches the current endpoint
|
||||
return endpoint.value === matcher;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<input @input="search($event.target.value)" class="input" type="text" placeholder="Søg i transaktioner" v-if="!hideSearchField"/>
|
||||
<PaginationDisplay :metaItemsPerPage="metaItemsPerPage" :loadFunction="loadList" :isLoading="isLoading" :setMetaItemsPerPage="setMetaItemsPerPage">
|
||||
<template #paginationColumns>
|
||||
<!-- Sort by created_at -->
|
||||
<div class="column is-narrow my-3">
|
||||
<label class="label">Order direction</label>
|
||||
<div class="control">
|
||||
<div class="select">
|
||||
<select @change="setOrder('created_at', $event.target.value, true);">
|
||||
<option value="asc">Ascending (Oldest first)</option>
|
||||
<option value="desc" selected>Descending (Newest first)</option>
|
||||
</select>
|
||||
<template v-if="doesEndpointMatch('/orders')">
|
||||
<input @input="search($event.target.value)" class="input" type="text" placeholder="Søg i transaktioner" v-if="!hideSearchField"/>
|
||||
<PaginationDisplay :metaItemsPerPage="metaItemsPerPage" :loadFunction="loadList" :isLoading="isLoading" :setMetaItemsPerPage="setMetaItemsPerPage">
|
||||
<template #paginationColumns>
|
||||
<!-- Sort by created_at -->
|
||||
<div class="column is-narrow my-3">
|
||||
<label class="label">Order direction</label>
|
||||
<div class="control">
|
||||
<div class="select">
|
||||
<select @change="setOrder('created_at', $event.target.value, true);">
|
||||
<option value="asc">Ascending (Oldest first)</option>
|
||||
<option value="desc" selected>Descending (Newest first)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Invoice status -->
|
||||
<div class="column is-narrow my-3">
|
||||
<label class="label">Bogføringsstatus</label>
|
||||
<div class="control">
|
||||
<div class="select">
|
||||
<select @change="setFilter('booked_invoice_id', $event.target.value, true);">
|
||||
<option value="*" :selected="!props.applyDefaultFilters">All</option>
|
||||
<option value="not null">Bogført</option>
|
||||
<option value="is_null" :selected="props.applyDefaultFilters">Ikke bogført</option>
|
||||
</select>
|
||||
<!-- Invoice status -->
|
||||
<div class="column is-narrow my-3">
|
||||
<label class="label">Bogføringsstatus</label>
|
||||
<div class="control">
|
||||
<div class="select">
|
||||
<select @change="setFilter('booked_invoice_id', $event.target.value, true);">
|
||||
<option value="*" :selected="!props.applyDefaultFilters">All</option>
|
||||
<option value="not null">Bogført</option>
|
||||
<option value="is_null" :selected="props.applyDefaultFilters">Ikke bogført</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Error status -->
|
||||
<div class="column is-narrow my-3">
|
||||
<label class="label">Fejlstatus</label>
|
||||
<div class="control">
|
||||
<div class="select">
|
||||
<select @change="setFilter('error_message', $event.target.value, true);">
|
||||
<option value="*" selected>All</option>
|
||||
<option value="not null">Ja</option>
|
||||
<option value="is_null">Nej</option>
|
||||
</select>
|
||||
<!-- Error status -->
|
||||
<div class="column is-narrow my-3">
|
||||
<label class="label">Fejlstatus</label>
|
||||
<div class="control">
|
||||
<div class="select">
|
||||
<select @change="setFilter('error_message', $event.target.value, true);">
|
||||
<option value="*" selected>All</option>
|
||||
<option value="not null">Ja</option>
|
||||
<option value="is_null">Nej</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Payment processor -->
|
||||
<div class="column is-narrow my-3">
|
||||
<label class="label">Betalingsprocessor</label>
|
||||
<div class="control">
|
||||
<div class="select">
|
||||
<select @change="setFilter('processor', $event.target.value, true);">
|
||||
<option value="*" selected>All</option>
|
||||
<option value="1">E-conomic</option>
|
||||
<option value="2">Stripe</option>
|
||||
<option value="3">Anden ( Uden tracking )</option>
|
||||
<option :value="'is_null'">Ikke specificeret</option>
|
||||
</select>
|
||||
<!-- Payment processor -->
|
||||
<div class="column is-narrow my-3">
|
||||
<label class="label">Betalingsprocessor</label>
|
||||
<div class="control">
|
||||
<div class="select">
|
||||
<select @change="setFilter('processor', $event.target.value, true);">
|
||||
<option value="*" selected>All</option>
|
||||
<option value="1">E-conomic</option>
|
||||
<option value="2">Stripe</option>
|
||||
<option value="3">Anden ( Uden tracking )</option>
|
||||
<option :value="'is_null'">Ikke specificeret</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Marked as complete ("Gennemført") -->
|
||||
<div class="column is-narrow my-3">
|
||||
<label class="label">Gennemført</label>
|
||||
<div class="control">
|
||||
<div class="select">
|
||||
<select @change="setFilter('completed_at', $event.target.value, true);">
|
||||
<option value="*" selected>All</option>
|
||||
<option value="not null">Gennemført</option>
|
||||
<option :value="'is_null'">Ikke gennemført</option>
|
||||
</select>
|
||||
<!-- Marked as complete ("Gennemført") -->
|
||||
<div class="column is-narrow my-3">
|
||||
<label class="label">Gennemført</label>
|
||||
<div class="control">
|
||||
<div class="select">
|
||||
<select @change="setFilter('completed_at', $event.target.value, true);">
|
||||
<option value="*" selected>All</option>
|
||||
<option value="not null">Gennemført</option>
|
||||
<option :value="'is_null'">Ikke gennemført</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Multiple selection, customer has attribute -->
|
||||
<div class="column is-narrow my-3">
|
||||
<label class="label">Faktura valg</label>
|
||||
<div class="control">
|
||||
<div class="select">
|
||||
<select @change="setFilter('customer_id-has_attribute', $event.target.value, true);">
|
||||
<option value="*" selected>All</option>
|
||||
<option value="invoiceAllOrdersIndividually">Faktura pr. ordre</option>
|
||||
<option value="!invoiceAllOrdersIndividually">Faktura pr. måned</option>
|
||||
</select>
|
||||
<!-- Multiple selection, customer has attribute -->
|
||||
<div class="column is-narrow my-3">
|
||||
<label class="label">Faktura valg</label>
|
||||
<div class="control">
|
||||
<div class="select">
|
||||
<select @change="setFilter('customer_id-has_attribute', $event.target.value, true);">
|
||||
<option value="*" selected>All</option>
|
||||
<option value="invoiceAllOrdersIndividually">Faktura pr. ordre</option>
|
||||
<option value="!invoiceAllOrdersIndividually">Faktura pr. måned</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Multiple selection, customer has special arrangement -->
|
||||
<div class="column is-narrow my-3">
|
||||
<label class="label">Specialaftale</label>
|
||||
<div class="control">
|
||||
<div class="select">
|
||||
<select @change="setFilter('customer_id-has_key-OtherSpecialArrangement', $event.target.value, true);">
|
||||
<option value="*" :selected="!props.applyDefaultFilters">All</option>
|
||||
<option value="OtherSpecialArrangement">Har specialaftale</option>
|
||||
<option value="!OtherSpecialArrangement" :selected="props.applyDefaultFilters">Har ikke specialaftale</option>
|
||||
</select>
|
||||
<!-- Multiple selection, customer has special arrangement -->
|
||||
<div class="column is-narrow my-3">
|
||||
<label class="label">Specialaftale</label>
|
||||
<div class="control">
|
||||
<div class="select">
|
||||
<select @change="setFilter('customer_id-has_key-OtherSpecialArrangement', $event.target.value, true);">
|
||||
<option value="*" :selected="!props.applyDefaultFilters">All</option>
|
||||
<option value="OtherSpecialArrangement">Har specialaftale</option>
|
||||
<option value="!OtherSpecialArrangement" :selected="props.applyDefaultFilters">Har ikke specialaftale</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Multiple selection, customer has washing subscription -->
|
||||
<div class="column is-narrow my-3">
|
||||
<label class="label">Vaskeabonnement</label>
|
||||
<div class="control">
|
||||
<div class="select">
|
||||
<select @change="setFilter('customer_id-has_key-OtherVaskeabonnement', $event.target.value, true);">
|
||||
<option value="*" :selected="!props.applyDefaultFilters">All</option>
|
||||
<option value="OtherVaskeabonnement">Har vaskeabonnement</option>
|
||||
<option value="!OtherVaskeabonnement" :selected="props.applyDefaultFilters">Har ikke vaskeabonnement</option>
|
||||
</select>
|
||||
<!-- Multiple selection, customer has washing subscription -->
|
||||
<div class="column is-narrow my-3">
|
||||
<label class="label">Vaskeabonnement</label>
|
||||
<div class="control">
|
||||
<div class="select">
|
||||
<select @change="setFilter('customer_id-has_key-OtherVaskeabonnement', $event.target.value, true);">
|
||||
<option value="*" :selected="!props.applyDefaultFilters">All</option>
|
||||
<option value="OtherVaskeabonnement">Har vaskeabonnement</option>
|
||||
<option value="!OtherVaskeabonnement" :selected="props.applyDefaultFilters">Har ikke vaskeabonnement</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Multiple selection, customer has washing subscription -FIX
|
||||
<div class="column is-narrow my-3">
|
||||
<label class="label">Only tank cleaning</label>s
|
||||
<div class="control">
|
||||
<div class="select">
|
||||
<select @change="setFilter('customer_id-has_attribute', $event.target.value, true);">
|
||||
<option value="*" :selected="!props.applyDefaultFilters">All</option>
|
||||
<option value="onlyTankCleaning">Only tank cleaning</option>
|
||||
<option value="!onlyTankCleaning" :selected="props.applyDefaultFilters">Ikke tankcleaning</option>
|
||||
</select>
|
||||
<!-- Multiple selection, customer has washing subscription -FIX
|
||||
<div class="column is-narrow my-3">
|
||||
<label class="label">Only tank cleaning</label>s
|
||||
<div class="control">
|
||||
<div class="select">
|
||||
<select @change="setFilter('customer_id-has_attribute', $event.target.value, true);">
|
||||
<option value="*" :selected="!props.applyDefaultFilters">All</option>
|
||||
<option value="onlyTankCleaning">Only tank cleaning</option>
|
||||
<option value="!onlyTankCleaning" :selected="props.applyDefaultFilters">Ikke tankcleaning</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- Date from -->
|
||||
<div class="column is-narrow my-3">
|
||||
<label class="label">Fra dato</label>
|
||||
<div class="control">
|
||||
<input type="date" class="input" @change="setFilter('created_at-date_from', $event.target.value, true)" v-model="date_from" />
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- Date from -->
|
||||
<div class="column is-narrow my-3">
|
||||
<label class="label">Fra dato</label>
|
||||
<div class="control">
|
||||
<input type="date" class="input" @change="setFilter('created_at-date_from', $event.target.value, true)" v-model="date_from" />
|
||||
<!-- Date to -->
|
||||
<div class="column is-narrow my-3">
|
||||
<label class="label">Til dato</label>
|
||||
<div class="control">
|
||||
<input type="date" class="input" @change="setFilter('created_at-date_to', $event.target.value, true)" v-model="date_to" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Date to -->
|
||||
<div class="column is-narrow my-3">
|
||||
<label class="label">Til dato</label>
|
||||
<div class="control">
|
||||
<input type="date" class="input" @change="setFilter('created_at-date_to', $event.target.value, true)" v-model="date_to" />
|
||||
<!-- Time shortcuts -->
|
||||
<!-- Last month -->
|
||||
<div class="column is-narrow my-3">
|
||||
<label class="label"> </label>
|
||||
<div class="control">
|
||||
<button
|
||||
class="button"
|
||||
v-bind:class="getTimeShortcutClass(setFilterTime.is_last_month(date_from, date_to))"
|
||||
@click="setFilterTime.last_month()"
|
||||
>
|
||||
<span class="icon">
|
||||
<i v-bind:class="getTimeShortcutIcon(setFilterTime.is_last_month(date_from, date_to))"></i>
|
||||
</span>
|
||||
<span>{{SessionUser.objects.global.language.time.last_month}}</span>
|
||||
<span class="icon">
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Time shortcuts -->
|
||||
<!-- Last month -->
|
||||
<div class="column is-narrow my-3">
|
||||
<label class="label"> </label>
|
||||
<div class="control">
|
||||
<button
|
||||
class="button"
|
||||
v-bind:class="getTimeShortcutClass(setFilterTime.is_last_month(date_from, date_to))"
|
||||
@click="setFilterTime.last_month()"
|
||||
>
|
||||
<span class="icon">
|
||||
<i v-bind:class="getTimeShortcutIcon(setFilterTime.is_last_month(date_from, date_to))"></i>
|
||||
</span>
|
||||
<span>{{SessionUser.objects.global.language.time.last_month}}</span>
|
||||
<span class="icon">
|
||||
</span>
|
||||
</button>
|
||||
<!-- This month -->
|
||||
<div class="column is-narrow my-3">
|
||||
<label class="label"> </label>
|
||||
<div class="control">
|
||||
<button
|
||||
class="button"
|
||||
v-bind:class="getTimeShortcutClass(setFilterTime.is_this_month(date_from, date_to))"
|
||||
@click="setFilterTime.this_month()"
|
||||
>
|
||||
<span class="icon">
|
||||
<i v-bind:class="getTimeShortcutIcon(setFilterTime.is_this_month(date_from, date_to))"></i>
|
||||
</span>
|
||||
<span>{{SessionUser.objects.global.language.time.this_month}}</span>
|
||||
<span class="icon">
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- This month -->
|
||||
<div class="column is-narrow my-3">
|
||||
<label class="label"> </label>
|
||||
<div class="control">
|
||||
<button
|
||||
class="button"
|
||||
v-bind:class="getTimeShortcutClass(setFilterTime.is_this_month(date_from, date_to))"
|
||||
@click="setFilterTime.this_month()"
|
||||
>
|
||||
<span class="icon">
|
||||
<i v-bind:class="getTimeShortcutIcon(setFilterTime.is_this_month(date_from, date_to))"></i>
|
||||
</span>
|
||||
<span>{{SessionUser.objects.global.language.time.this_month}}</span>
|
||||
<span class="icon">
|
||||
</span>
|
||||
</button>
|
||||
<!-- Today -->
|
||||
<div class="column is-narrow my-3">
|
||||
<label class="label"> </label>
|
||||
<div class="control">
|
||||
<button
|
||||
class="button"
|
||||
v-bind:class="getTimeShortcutClass(setFilterTime.is_today(date_from, date_to))"
|
||||
@click="setFilterTime.today()"
|
||||
>
|
||||
<span class="icon">
|
||||
<i v-bind:class="getTimeShortcutIcon(setFilterTime.is_today(date_from, date_to))"></i>
|
||||
</span>
|
||||
<span>{{SessionUser.objects.global.language.time.today}}</span>
|
||||
<span class="icon">
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Today -->
|
||||
<div class="column is-narrow my-3">
|
||||
<label class="label"> </label>
|
||||
<div class="control">
|
||||
<button
|
||||
class="button"
|
||||
v-bind:class="getTimeShortcutClass(setFilterTime.is_today(date_from, date_to))"
|
||||
@click="setFilterTime.today()"
|
||||
>
|
||||
<span class="icon">
|
||||
<i v-bind:class="getTimeShortcutIcon(setFilterTime.is_today(date_from, date_to))"></i>
|
||||
</span>
|
||||
<span>{{SessionUser.objects.global.language.time.today}}</span>
|
||||
<span class="icon">
|
||||
</span>
|
||||
</button>
|
||||
<!-- Yesterday -->
|
||||
<div class="column is-narrow my-3">
|
||||
<label class="label"> </label>
|
||||
<div class="control">
|
||||
<button
|
||||
class="button"
|
||||
v-bind:class="getTimeShortcutClass(setFilterTime.is_yesterday(date_from, date_to))"
|
||||
@click="setFilterTime.yesterday()"
|
||||
>
|
||||
<span class="icon">
|
||||
<i v-bind:class="getTimeShortcutIcon(setFilterTime.is_yesterday(date_from, date_to))"></i>
|
||||
</span>
|
||||
<span>{{SessionUser.objects.global.language.time.yesterday}}</span>
|
||||
<span class="icon">
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Yesterday -->
|
||||
<div class="column is-narrow my-3">
|
||||
<label class="label"> </label>
|
||||
<div class="control">
|
||||
<button
|
||||
class="button"
|
||||
v-bind:class="getTimeShortcutClass(setFilterTime.is_yesterday(date_from, date_to))"
|
||||
@click="setFilterTime.yesterday()"
|
||||
>
|
||||
<span class="icon">
|
||||
<i v-bind:class="getTimeShortcutIcon(setFilterTime.is_yesterday(date_from, date_to))"></i>
|
||||
</span>
|
||||
<span>{{SessionUser.objects.global.language.time.yesterday}}</span>
|
||||
<span class="icon">
|
||||
</span>
|
||||
</button>
|
||||
<!-- All -->
|
||||
<div class="column is-narrow my-3">
|
||||
<label class="label"> </label>
|
||||
<div class="control">
|
||||
<button
|
||||
class="button"
|
||||
v-bind:class="getTimeShortcutClass(setFilterTime.is_all(date_from, date_to))"
|
||||
@click="setFilterTime.all()"
|
||||
>
|
||||
<span class="icon">
|
||||
<i v-bind:class="getTimeShortcutIcon(setFilterTime.is_all(date_from, date_to))"></i>
|
||||
</span>
|
||||
<span>{{SessionUser.objects.global.language.time.all}}</span>
|
||||
<span class="icon">
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- All -->
|
||||
<div class="column is-narrow my-3">
|
||||
<label class="label"> </label>
|
||||
<div class="control">
|
||||
<button
|
||||
class="button"
|
||||
v-bind:class="getTimeShortcutClass(setFilterTime.is_all(date_from, date_to))"
|
||||
@click="setFilterTime.all()"
|
||||
>
|
||||
<span class="icon">
|
||||
<i v-bind:class="getTimeShortcutIcon(setFilterTime.is_all(date_from, date_to))"></i>
|
||||
</span>
|
||||
<span>{{SessionUser.objects.global.language.time.all}}</span>
|
||||
<span class="icon">
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</PaginationDisplay>
|
||||
<OrdersTable :orders="list" :invoiceView="props.invoiceView" :allowSelectMultiple="true"/>
|
||||
<PaginationNavigation :currentPage="metaCurrentPage" :totalPages="Math.ceil(metaTotalItems / metaItemsPerPage)" :loadFunction="loadList" :setPage="setPage" :isLoading="isLoading" />
|
||||
<LoadButtonWhileAwait class="is-dark" :isLoading="isLoading" :loadFunction="loadList" icon="fas fa-sync-alt">Reload</LoadButtonWhileAwait>
|
||||
</template>
|
||||
</PaginationDisplay>
|
||||
<OrdersTable :orders="list" :invoiceView="props.invoiceView" :allowSelectMultiple="true"/>
|
||||
<PaginationNavigation :currentPage="metaCurrentPage" :totalPages="Math.ceil(metaTotalItems / metaItemsPerPage)" :loadFunction="loadList" :setPage="setPage" :isLoading="isLoading" />
|
||||
<LoadButtonWhileAwait class="is-dark" :isLoading="isLoading" :loadFunction="loadList" icon="fas fa-sync-alt">Reload</LoadButtonWhileAwait>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -6,7 +6,7 @@ import CustomerSearchFieldPos from "@/components/forms/department/pos/input/cust
|
||||
import {createApp} from "vue";
|
||||
|
||||
// Define a function to show the SweetAlert2 modal with the Vue component
|
||||
function showCustomerSearchModal() {
|
||||
const showCustomerSearchModal = (onSuccessFunction = null) => {
|
||||
// Create a container element for the Vue component
|
||||
const div = document.createElement('div')
|
||||
|
||||
@@ -24,12 +24,12 @@ function showCustomerSearchModal() {
|
||||
}
|
||||
// Handle the customer selection here
|
||||
console.log('Selected customer:', customer)
|
||||
// Call the onSuccess function with the selected customer
|
||||
if (onSuccessFunction) {
|
||||
await onSuccessFunction(customer.customerNumber);
|
||||
}
|
||||
// Close the modal
|
||||
Swal.close()
|
||||
// Call the function to pick the customer invoice collection
|
||||
await SessionUser.objects.collectedOrderInvoices.functions.showInvoiceCollectionPickerForm(
|
||||
customer.customerNumber,
|
||||
);
|
||||
}
|
||||
})
|
||||
|
||||
@@ -54,7 +54,100 @@ function showCustomerSearchModal() {
|
||||
|
||||
|
||||
const showChangeOrderCustomerForm = async (id) => {
|
||||
showCustomerSearchModal();
|
||||
function noCustomerSelected() {
|
||||
Swal.fire({
|
||||
icon: 'error',
|
||||
title: 'Ingen kunde valgt',
|
||||
timer: 2000,
|
||||
})
|
||||
}
|
||||
function noInvoiceCollectionSelected() {
|
||||
Swal.fire({
|
||||
icon: 'error',
|
||||
title: 'Ingen faktura samling valgt',
|
||||
timer: 2000,
|
||||
})
|
||||
}
|
||||
function changeOrderInvoiceCollectionId(order_id, new_collection_id) {
|
||||
// Change the invoice collection
|
||||
return SessionUser.objects.orders.set.invoice_collection_id(
|
||||
parseInt(order_id),
|
||||
parseInt(new_collection_id)
|
||||
);
|
||||
}
|
||||
function changeOrderCustomerId(order_id, new_customer_id) {
|
||||
// Change the customer
|
||||
return SessionUser.objects.orders.set.customer_id(
|
||||
parseInt(order_id),
|
||||
parseInt(new_customer_id)
|
||||
);
|
||||
}
|
||||
function saveChanges (order_id, new_customer_id, new_collection_id) {
|
||||
// Change the customer
|
||||
changeOrderCustomerId(order_id, new_customer_id).then((response) => {
|
||||
console.log("Customer changed successfully:", response);
|
||||
// Change the invoice collection
|
||||
changeOrderInvoiceCollectionId(order_id, new_collection_id).then((response) => {
|
||||
console.log("Invoice collection changed successfully:", response);
|
||||
Swal.fire({
|
||||
icon: 'success',
|
||||
title: 'Faktura samling ændret',
|
||||
timer: 2000,
|
||||
})
|
||||
}).catch((error) => {
|
||||
console.error("Error changing invoice collection:", error);
|
||||
Swal.fire({
|
||||
icon: 'error',
|
||||
title: 'Fejl ved ændring af faktura samling',
|
||||
timer: 2000,
|
||||
});
|
||||
})
|
||||
}).catch((error) => {
|
||||
console.error("Error changing customer:", error);
|
||||
Swal.fire({
|
||||
icon: 'error',
|
||||
title: 'Fejl ved ændring af kunde',
|
||||
timer: 2000,
|
||||
});
|
||||
}).finally(() => {
|
||||
// Wait 2 seconds before reloading the page
|
||||
// This is to give the user time to see the success / error message
|
||||
setTimeout(() => {
|
||||
// Reload the page
|
||||
window.location.reload();
|
||||
}, 2000);
|
||||
})
|
||||
}
|
||||
async function chooseInvoiceCollection(order_id, new_customer_id) {
|
||||
// Select the new invoice collection
|
||||
await SessionUser.objects.collectedOrderInvoices.functions.showInvoiceCollectionPickerForm(new_customer_id, (invoice_collection_id) => {
|
||||
// Make sure it's valid
|
||||
if (!invoice_collection_id) {
|
||||
noInvoiceCollectionSelected();
|
||||
return;
|
||||
}
|
||||
// Change the invoice collection in the database.
|
||||
saveChanges(order_id, new_customer_id, invoice_collection_id);
|
||||
});
|
||||
}
|
||||
// Show the customer search modal
|
||||
// Define the new data.
|
||||
let new_customer_id = null;
|
||||
// Let the user select a customer
|
||||
showCustomerSearchModal(async (customer_number) => {
|
||||
// Store the new customer id
|
||||
new_customer_id = customer_number;
|
||||
// Make sure it's valid
|
||||
if (!new_customer_id) {
|
||||
noCustomerSelected();
|
||||
return;
|
||||
}
|
||||
// Show the invoice collection picker form
|
||||
console.log('Displaying invoice collection picker form for customer:', new_customer_id);
|
||||
await chooseInvoiceCollection(id, new_customer_id);
|
||||
}
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
const showChangeOrderInvoiceCollectionForm = async (id) => {
|
||||
@@ -70,28 +163,52 @@ const showChangeOrderInvoiceCollectionForm = async (id) => {
|
||||
console.error("Ingen kunde fundet");
|
||||
return;
|
||||
}
|
||||
let invoice_collection_id = null;
|
||||
// Select the invoice collection
|
||||
invoice_collection_id = await SessionUser.objects.collectedOrderInvoices.functions.showInvoiceCollectionPickerForm(
|
||||
customer_number
|
||||
await SessionUser.objects.collectedOrderInvoices.functions.showInvoiceCollectionPickerForm(
|
||||
customer_number,
|
||||
(invoice_collection_id) => {
|
||||
if (!invoice_collection_id) {
|
||||
Swal.fire({
|
||||
icon: 'error',
|
||||
title: 'Ingen faktura samling valgt',
|
||||
timer: 2000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
// Handle the invoice collection selection here
|
||||
console.log("Selected invoice collection:", invoice_collection_id);
|
||||
console.log("Changing invoice collection for order:", id, " customer:", customer_number);
|
||||
console.log("New invoice collection:", invoice_collection_id);
|
||||
// Change the invoice collection
|
||||
SessionUser.objects.orders.set.invoice_collection_id(
|
||||
parseInt(id),
|
||||
parseInt(invoice_collection_id)
|
||||
)
|
||||
.then((response) => {
|
||||
console.log("Invoice collection changed successfully:", response);
|
||||
Swal.fire({
|
||||
icon: 'success',
|
||||
title: 'Faktura samling ændret',
|
||||
timer: 2000,
|
||||
})
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error changing invoice collection:", error);
|
||||
Swal.fire({
|
||||
icon: 'error',
|
||||
title: 'Fejl ved ændring af faktura samling',
|
||||
timer: 2000,
|
||||
});
|
||||
})
|
||||
}
|
||||
).finally(() => {
|
||||
if (!invoice_collection_id) {
|
||||
console.error("Ingen faktura samling valgt");
|
||||
return;
|
||||
}
|
||||
// Get the invoice collection id
|
||||
console.log("Selected invoice collection:", invoice_collection_id);
|
||||
// Change the invoice collection
|
||||
//changeInvoiceCollection(id, customer_number, invoiceCollection);
|
||||
}).catch((error) => {
|
||||
console.error(error);
|
||||
});
|
||||
if (!invoice_collection_id) {
|
||||
console.error("Ingen faktura samling valgt");
|
||||
return;
|
||||
}
|
||||
// Change the invoice collection
|
||||
console.log("Selected invoice collection:", invoice_collection_id, "customer_number:", customer_number, "order_id:", id);
|
||||
// Wait 2 seconds before reloading the page
|
||||
// This is to give the user time to see the success / error message
|
||||
setTimeout(() => {
|
||||
// Reload the page
|
||||
window.location.reload();
|
||||
}, 2000);
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user