Merge branch 'next' of groeger-clan.duckdns.org:newgeruecht-vue into next

This commit is contained in:
Tim Gröger 2021-01-29 22:53:20 +01:00
commit 059142c506
4 changed files with 91 additions and 73 deletions

View File

@ -4,8 +4,7 @@ import config from '../config';
import { Store } from 'vuex'; import { Store } from 'vuex';
import { StateInterface } from 'src/store'; import { StateInterface } from 'src/store';
import { LocalStorage } from 'quasar'; import { LocalStorage } from 'quasar';
import {Notify} from 'quasar'; import { Notify } from 'quasar';
import {Router} from 'src/router';
declare module 'vue/types/vue' { declare module 'vue/types/vue' {
interface Vue { interface Vue {
@ -17,21 +16,22 @@ export const setBaseUrl = (url: string) => {
LocalStorage.set('baseURL', url); LocalStorage.set('baseURL', url);
axios.defaults.baseURL = url; axios.defaults.baseURL = url;
Notify.create({ Notify.create({
message: "Serveraddresse gespeichert", message: 'Serveraddresse gespeichert',
position: "bottom", position: 'bottom',
caption: `${url}`, caption: `${url}`,
color: "positive" color: 'positive'
}) });
setTimeout(() => {window.location.reload()}, 5000) setTimeout(() => {
window.location.reload();
} }, 5000);
};
export default boot<Store<StateInterface>>(({ Vue, store, router }) => { export default boot<Store<StateInterface>>(({ Vue, store, router }) => {
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
Vue.prototype.$axios = axios; Vue.prototype.$axios = axios;
const baseURL = <string | undefined>LocalStorage.getItem('baseURL'); const baseURL = <string | undefined>LocalStorage.getItem('baseURL');
if (baseURL){ if (baseURL) {
axios.defaults.baseURL = baseURL axios.defaults.baseURL = baseURL;
} else { } else {
axios.defaults.baseURL = config.baseURL; axios.defaults.baseURL = config.baseURL;
} }

View File

@ -35,13 +35,11 @@
<q-btn label="Login" type="submit" color="primary" tabindex="3" /> <q-btn label="Login" type="submit" color="primary" tabindex="3" />
</div> </div>
</q-form> </q-form>
</q-card-section> </q-card-section>
<div class="row justify-end"> <div class="row justify-end">
<q-btn flat round icon="mdi-menu-down" class="cordova-only" @click="openServerSettings"/> <q-btn flat round icon="mdi-menu-down" class="cordova-only" @click="openServerSettings" />
</div> </div>
<q-slide-transition class="cordova-only"> <q-slide-transition class="cordova-only">
<div v-show="visible"> <div v-show="visible">
<q-separator /> <q-separator />
<q-card-section> <q-card-section>
@ -51,7 +49,6 @@
<q-btn size="xs" dense color="primary" label="Speichern" type="submit" /> <q-btn size="xs" dense color="primary" label="Speichern" type="submit" />
</q-form> </q-form>
</q-card-section> </q-card-section>
</div> </div>
</q-slide-transition> </q-slide-transition>
</q-card> </q-card>
@ -72,16 +69,16 @@ export default defineComponent({
const userid = ref(''); const userid = ref('');
const password = ref(''); const password = ref('');
const rules = [(val: string) => (val && val.length > 0) || 'Feld darf nicht leer sein!']; const rules = [(val: string) => (val && val.length > 0) || 'Feld darf nicht leer sein!'];
const server = ref<string|undefined>(root.$axios.defaults.baseURL) const server = ref<string | undefined>(root.$axios.defaults.baseURL);
const visible = ref(false); const visible = ref(false);
function openServerSettings() { function openServerSettings() {
visible.value = !visible.value visible.value = !visible.value;
} }
function changeUrl() { function changeUrl() {
if (server.value) { if (server.value) {
setBaseUrl(server.value) setBaseUrl(server.value);
} }
} }
@ -147,7 +144,17 @@ export default defineComponent({
}); });
} }
return { userid, password, doLogin, doReset, rules, server, changeUrl, visible, openServerSettings }; return {
userid,
password,
doLogin,
doReset,
rules,
server,
changeUrl,
visible,
openServerSettings
};
} }
}); });
</script> </script>

View File

@ -16,7 +16,16 @@
:loading="loading" :loading="loading"
@request="onRequest" @request="onRequest"
binary-state-sort binary-state-sort
/> >
<template v-slot:top="props">
<q-toggle v-model="showCancelled" label="Stornierte einblenden" />
</template>
<template v-slot:body-cell="props">
<q-td :props="props" v-bind:class="{ 'bg-grey': props.row.reversal_id != null }">
{{ props.value }}
</q-td>
</template>
</q-table>
</q-card-section> </q-card-section>
</q-card> </q-card>
</q-page> </q-page>
@ -24,7 +33,7 @@
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, onMounted, ref } from '@vue/composition-api'; import { computed, defineComponent, onMounted, ref } from '@vue/composition-api';
import { StateInterfaceBalance } from '../store/balance'; import { StateInterfaceBalance, TransactionsResponse } from '../store/balance';
import { Store } from 'vuex'; import { Store } from 'vuex';
import { formatDateTime } from 'src/utils/datetime'; import { formatDateTime } from 'src/utils/datetime';
@ -41,10 +50,11 @@ export default defineComponent({
}); });
}); });
const showCancelled = ref(false);
const data = ref<FG.Transaction[]>([]); const data = ref<FG.Transaction[]>([]);
const loading = ref(false); const loading = ref(false);
const pagination = ref({ const pagination = ref({
sortBy: 'desc', sortBy: 'time',
descending: false, descending: false,
page: 1, page: 1,
rowsPerPage: 3, rowsPerPage: 3,
@ -61,34 +71,32 @@ export default defineComponent({
function onRequest(props: { pagination: PaginationInterface; filter?: string }) { function onRequest(props: { pagination: PaginationInterface; filter?: string }) {
const { page, rowsPerPage, sortBy, descending } = props.pagination; const { page, rowsPerPage, sortBy, descending } = props.pagination;
const filter = props.filter;
loading.value = true; loading.value = true;
void store.dispatch('balance/getTransactionsCount', filter).then((value: number) => {
pagination.value.rowsNumber = value;
// get all rows if "All" (0) is selected // get all rows if "All" (0) is selected
const fetchCount = rowsPerPage === 0 ? pagination.value.rowsNumber : rowsPerPage; const fetchCount = rowsPerPage === 0 ? pagination.value.rowsNumber : rowsPerPage;
// calculate starting row of data // calculate starting row of data
const startRow = (page - 1) * rowsPerPage; const startRow = (page - 1) * rowsPerPage;
// fetch data from "server"
store store
.dispatch('balance/getTransactions', { .dispatch('balance/getTransactions', {
filter: { row: startRow, limit: fetchCount } filter: {
offset: startRow,
limit: fetchCount,
showCancelled: showCancelled.value,
showReversals: false
}
}) })
.then((gotTransactions: FG.Transaction[]) => { .then((result: TransactionsResponse) => {
// clear out existing data and add new // clear out existing data and add new
data.value.splice(0, data.value.length, ...gotTransactions); data.value.splice(0, data.value.length, ...result.transactions);
// don't forget to update local pagination object // don't forget to update local pagination object
pagination.value.page = page; pagination.value.page = page;
pagination.value.rowsPerPage = rowsPerPage; pagination.value.rowsPerPage = rowsPerPage;
pagination.value.sortBy = sortBy; pagination.value.sortBy = sortBy;
pagination.value.descending = descending; pagination.value.descending = descending;
if (result.count) pagination.value.rowsNumber = result.count;
}) })
.finally(() => (loading.value = false)); .finally(() => (loading.value = false));
});
} }
const balance = computed( const balance = computed(
@ -134,7 +142,7 @@ export default defineComponent({
} }
]; ];
return { data, pagination, onRequest, loading, balance, columns }; return { data, pagination, onRequest, loading, balance, columns, showCancelled };
} }
}); });
</script> </script>

View File

@ -9,6 +9,11 @@ interface BalanceResponse {
debit: number; debit: number;
} }
export interface TransactionsResponse {
transactions: Array<FG.Transaction>;
count?: number;
}
export interface UserBalance extends BalanceResponse { export interface UserBalance extends BalanceResponse {
limit: number | null; limit: number | null;
} }
@ -121,7 +126,14 @@ const actions: ActionTree<BalanceInterface, StateInterface> = {
{ commit, rootState }, { commit, rootState },
payload: { payload: {
userid?: string; userid?: string;
filter?: { limit?: number; offset?: number; from?: Date; to?: Date }; filter?: {
limit?: number;
offset?: number;
from?: Date;
to?: Date;
showReversals?: boolean;
showCancelled?: boolean;
};
} }
) { ) {
commit('setLoading'); commit('setLoading');
@ -129,22 +141,13 @@ const actions: ActionTree<BalanceInterface, StateInterface> = {
if (!payload.filter) payload.filter = { limit: 10 }; if (!payload.filter) payload.filter = { limit: 10 };
return axios return axios
.get(`/users/${payload.userid}/balance/transactions`, { params: payload.filter || {} }) .get(`/users/${payload.userid}/balance/transactions`, { params: payload.filter || {} })
.then(({ data }: AxiosResponse<[FG.Transaction]>) => { .then(({ data }: AxiosResponse<TransactionsResponse>) => {
data.forEach(t => fixTransaction(t)); data.transactions.forEach(t => fixTransaction(t));
commit('addTransactions', data); commit('addTransactions', data.transactions);
return data; return data;
}) })
.finally(() => commit('setLoading', false)); .finally(() => commit('setLoading', false));
}, },
getTransactionsCount(
{ state },
payload: {
userid?: string;
filter?: { limit?: number; offset?: number; from?: Date; to?: Date };
}
) {
return Promise.resolve(3);
},
getLimit({ rootState, commit }) { getLimit({ rootState, commit }) {
commit('setLoading'); commit('setLoading');
axios axios