[Vue3] can now compile

This commit is contained in:
Tim Gröger 2021-01-31 22:01:38 +01:00 committed by Ferdinand Thiessen
parent 8f8da5ffd1
commit ee2a6a71eb
12 changed files with 96 additions and 76 deletions

View File

@ -16,8 +16,8 @@
<script lang="ts">
import { ref, computed, defineComponent, onBeforeMount } from 'vue';
import UserSelector from 'src/plugins/user/components/UserSelector.vue';
import { StateInterfaceBalance } from '../store/balance';
import { Store, useStore } from 'vuex';
import { StateInterfaceBalance, UserBalance } from '../store/balance';
import { Store, useStore, mapGetters } from 'vuex';
import { UserStateInterface } from 'src/plugins/user/store/user';
import { StateInterface } from 'src/store';
@ -29,15 +29,22 @@ export default defineComponent({
name: 'BalanceHeader',
components: { UserSelector },
props: ['showSelector'],
setup(props: Props, { root, emit }) {
setup(_, { emit }) {
onBeforeMount(() => void store.dispatch('balance/getBalance'));
//const store = <Store<StateInterfaceBalance>>root.$store;
const store = useStore<StateInterfaceBalance>();
const userGetters = mapGetters('users', ['currentUser']);
const balanceGetters = mapGetters('balance', ['balances']);
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
const user = ref(<FG.User>store.state.user.currentUser);
//const user = ref(<FG.User>store.state.user.currentUser);
const user = computed(() => <FG.User>userGetters.currentUser());
const balance = computed(() => {
const balances = store.state.balance.balances;
return balances.get(user.value.userid) || { balance: 0, limit: null };
return (
(<Map<string, UserBalance>>balanceGetters.balances()).get(user.value.userid) || {
balance: 0,
limit: null,
}
);
});
const isLocked = computed(
@ -46,7 +53,8 @@ export default defineComponent({
function userUpdated(selectedUser: FG.User) {
void store.dispatch('balance/getBalance', selectedUser);
user.value = selectedUser;
//TODO:!!
//user.value = selectedUser;
// eslint-disable-next-line @typescript-eslint/no-unsafe-call
emit('update:user', selectedUser);
}

View File

@ -29,23 +29,22 @@
<script lang="ts">
import { computed, ref, defineComponent } from 'vue';
import { hasPermission } from 'src/utils/permission';
import { StateInterfaceBalance } from '../store/balance';
import { Store, useStore } from 'vuex';
import { mapGetters, Store, useStore } from 'vuex';
import UserSelector from 'src/plugins/user/components/UserSelector.vue';
import BalanceHeader from '../components/BalanceHeader.vue';
import PERMISSIONS from '../permissions';
import { UserStateInterface } from 'src/plugins/user/store/user';
import { StateInterface } from 'src/store';
export default defineComponent({
name: 'BalanceTransfer',
components: { BalanceHeader, UserSelector },
setup(_, { root, emit }) {
setup(_, { emit }) {
//const store: Store<StateInterfaceBalance> = <Store<StateInterfaceBalance>>root.$store;
const store = useStore<Store<StateInterface>>();
const userState = <UserStateInterface>store.state.user;
const userGetters = mapGetters('users', ['currentUser']);
const showSelector = computed(() => hasPermission(PERMISSIONS.SEND_OTHER, store));
const sender = ref(userState.currentUser);
const showSelector = computed(() => hasPermission(PERMISSIONS.SEND_OTHER));
const sender = computed(() => <FG.User>userGetters.currentUser());
const receiver = ref<FG.User | undefined>(undefined);
const amount = ref<number>(0);
@ -60,7 +59,8 @@ export default defineComponent({
function senderUpdated(selectedUser: FG.User) {
console.log(selectedUser);
sender.value = selectedUser;
//TOOD:!!
//sender.value = selectedUser;
}
function receiverUpdated(selectedUser: FG.User) {
receiver.value = selectedUser;

View File

@ -33,8 +33,7 @@
import { ref, computed, defineComponent, onUnmounted, onMounted } from 'vue';
import { hasPermission } from 'src/utils/permission';
import { formatDateTime } from 'src/utils/datetime';
import { StateInterfaceBalance } from 'src/plugins/balance/store/balance';
import { Store, useStore } from 'vuex';
import { mapGetters, Store, useStore } from 'vuex';
import { StateInterface } from 'src/store';
import { UserStateInterface } from 'src/plugins/user/store/user';
@ -51,25 +50,26 @@ export default defineComponent({
},
},
watch: { transaction: 'refreshText' },
setup(props: Props, { root, emit }) {
setup(props, { emit }) {
const now = ref(Date.now());
const ival = setInterval(() => (now.value = Date.now()), 1000);
//const store: Store<StateInterfaceBalance> = <Store<StateInterfaceBalance>>root.$store;
const store = useStore<Store<StateInterface>>();
const userState = <UserStateInterface>store.state.user;
const userGetters = mapGetters('users', ['currentUser']);
const text = ref('');
onUnmounted(() => clearInterval(ival));
onMounted(() => refreshText());
const isNegative = () => props.transaction.sender_id === userState.currentUser?.userid;
const isNegative = () =>
props.transaction.sender_id === (<FG.User>userGetters.currentUser())?.userid;
const refreshText = async () => {
if (isNegative()) {
text.value = 'Anschreiben';
if (props.transaction.receiver_id !== null) {
const user = <FG.User>await store.dispatch('user/getUser', {
userid: props.transaction.receiver_id,
userid: <number>props.transaction.receiver_id,
});
text.value = `Gesendet an ${user.display_name}`;
}
@ -77,7 +77,7 @@ export default defineComponent({
text.value = 'Gutschrift';
if (props.transaction.sender_id !== null) {
const user = <FG.User>await store.dispatch('user/getUser', {
userid: props.transaction.sender_id,
userid: <number>props.transaction.sender_id,
});
text.value = `Bekommen von ${user.display_name}`;
}
@ -91,9 +91,9 @@ export default defineComponent({
const canReverse = computed(
() =>
!isReversed.value &&
(hasPermission('balance_reversal', store) ||
(props.transaction.sender_id === userState.currentUser?.userid &&
now.value - props.transaction.time.getTime() < 10000))
(hasPermission('balance_reversal') ||
(props.transaction.sender_id === (<FG.User>userGetters.currentUser())?.userid &&
now.value - (<Date>props.transaction.time).getTime() < 10000))
);
function reverse() {
@ -107,7 +107,7 @@ export default defineComponent({
}
const timeStr = computed(() => {
const elapsed = (now.value - props.transaction.time.getTime()) / 1000;
const elapsed = (now.value - (<Date>props.transaction.time).getTime()) / 1000;
if (elapsed < 60) return `Vor ${elapsed.toFixed()} s`;
return formatDateTime(props.transaction.time, elapsed > 12 * 60 * 60, true, true) + ' Uhr';
});

View File

@ -8,13 +8,18 @@
<script lang="ts">
import { computed, defineComponent, onBeforeMount } from 'vue';
import { BalanceInterface, StateInterfaceBalance } from 'src/plugins/balance/store/balance';
import { Store, useStore } from 'vuex';
import {
BalanceInterface,
StateInterfaceBalance,
UserBalance,
} from 'src/plugins/balance/store/balance';
import { mapGetters, Store, useStore } from 'vuex';
import { UserStateInterface } from 'src/plugins/user/store/user';
import { StateInterface } from 'src/store';
export default defineComponent({
name: 'BalanceWidget',
setup(_, { root }) {
setup() {
onBeforeMount(() => {
store.dispatch('balance/getBalance').catch((err) => {
console.warn(err);
@ -23,11 +28,14 @@ export default defineComponent({
//const store = <Store<StateInterfaceBalance>>root.$store;
const store = useStore<Store<StateInterface>>();
const balanceState = <BalanceInterface>store.state.balance;
const userState = <UserStateInterface>store.state.user;
const balanceGetters = mapGetters('balance', ['balances']);
const userGetters = mapGetters('user', ['currentUser']);
const balance = computed(
() => balanceState.balances.get(userState.currentUser.userid)?.balance || NaN
() =>
(<Map<string, UserBalance>>balanceGetters.balances()).get(
(<FG.User>userGetters.currentUser()).userid
)?.balance || NaN
);
return { balance };

View File

@ -18,7 +18,7 @@ import { StateInterfaceBalance, BalancesResponse } from '../store/balance';
import { Store, useStore } from 'vuex';
export default defineComponent({
// name: 'PageName'
setup(_, { root }) {
setup() {
//const store = <Store<StateInterfaceBalance>>root.$store;
const store = useStore();

View File

@ -68,7 +68,7 @@
<script lang="ts">
import { computed, defineComponent, ref, onMounted } from 'vue';
import { Store, useStore } from 'vuex';
import { mapGetters, Store, useStore } from 'vuex';
import { hasPermissions, hasSomePermissions } from 'src/utils/permission';
import PERMISSIONS from '../permissions';
import { Screen } from 'quasar';
@ -76,14 +76,15 @@ import BalanceAdd from '../components/BalanceAdd.vue';
import BalanceTransfer from '../components/BalanceTransfer.vue';
import Transaction from '../components/Transaction.vue';
import { BalanceInterface, StateInterfaceBalance } from '../store/balance';
import { StateInterface } from 'src/store';
export default defineComponent({
name: 'BalanceManage',
components: { BalanceAdd, BalanceTransfer, Transaction },
setup(_, { root }) {
setup() {
//const store = <Store<StateInterfaceBalance>>root.$store;
const store = useStore<Store<StateInterface>>();
const balanceState = <BalanceInterface>store.state.balance;
const balanceGetters = mapGetters('balance', ['balances', 'transactions']);
const now = new Date();
onMounted(() => {
void store.dispatch('balance/getTransactions', {
@ -91,7 +92,7 @@ export default defineComponent({
});
});
const transactions = computed(() => {
const a = balanceState.transactions
const a = (<FG.Transaction[]>balanceGetters.transactions())
.filter((t) => t.original_id == undefined)
.filter((t) => t.time > new Date(now.getFullYear(), now.getMonth(), now.getDate()))
.sort((a, b) => (a.time >= b.time ? -1 : 1));
@ -100,7 +101,7 @@ export default defineComponent({
});
const canAdd = () =>
hasSomePermissions([PERMISSIONS.DEBIT, PERMISSIONS.CREDIT, PERMISSIONS.DEBIT_OWN], store);
hasSomePermissions([PERMISSIONS.DEBIT, PERMISSIONS.CREDIT, PERMISSIONS.DEBIT_OWN]);
interface Tab {
name: string;
@ -109,7 +110,7 @@ export default defineComponent({
const tabs: Tab[] = [
...(canAdd() ? [{ name: 'add', label: 'Anschreiben' }] : []),
...(hasSomePermissions([PERMISSIONS.SEND, PERMISSIONS.SEND_OTHER], store)
...(hasSomePermissions([PERMISSIONS.SEND, PERMISSIONS.SEND_OTHER])
? [{ name: 'transfer', label: 'Übertragen' }]
: []),
];

View File

@ -33,19 +33,24 @@
<script lang="ts">
import { computed, defineComponent, onMounted, ref } from 'vue';
import { BalanceInterface, StateInterfaceBalance, TransactionsResponse } from '../store/balance';
import { Store, useStore } from 'vuex';
import {
BalanceInterface,
StateInterfaceBalance,
TransactionsResponse,
UserBalance,
} from '../store/balance';
import { mapGetters, Store, useStore } from 'vuex';
import { formatDateTime } from 'src/utils/datetime';
import { StateInterface } from 'src/store';
import { UserStateInterface } from 'src/plugins/user/store/user';
export default defineComponent({
// name: 'PageName'
setup(_, { root }) {
setup() {
//const store = <Store<StateInterfaceBalance>>root.$store;
const store = useStore<Store<StateInterface>>();
const userState = <UserStateInterface>store.state.user;
const balanceState = <BalanceInterface>store.state.balance;
const userGetters = mapGetters('users', ['currentUser', 'users']);
const balanceGetters = mapGetters('balace', ['balances', 'transactions']);
onMounted(() => {
void store.dispatch('balance/getBalance');
@ -107,7 +112,10 @@ export default defineComponent({
}
const balance = computed(
() => balanceState.balances.get(userState.currentUser.userid)?.balance || NaN
() =>
(<Map<string, UserBalance>>balanceGetters.balances()).get(
(<FG.User>userGetters.currentUser()).userid
)?.balance || NaN
);
const columns = [
@ -141,7 +149,8 @@ export default defineComponent({
else {
if (row.receiver_id == null) return 'Angeschrieben';
else {
if (row.receiver_id === userState.currentUser?.userid) return 'Bekommen von X';
if (row.receiver_id === (<FG.User>userGetters.currentUser())?.userid)
return 'Bekommen von X';
else return 'Gesendet an X';
}
}
@ -158,7 +167,7 @@ export default defineComponent({
label: 'Benutzer',
field: 'author_id',
format: (val: string) => {
const user = userState.users.filter((x) => x.userid == val);
const user = (<FG.User[]>userGetters.users()).filter((x) => x.userid == val);
if (user.length > 0) return user[0].display_name;
else return val;
},

View File

@ -67,7 +67,7 @@
import { defineComponent, ref, onBeforeMount, computed } from 'vue';
import IsoDateInput from 'src/components/utils/IsoDateInput.vue';
import Job from './Job.vue';
import { Store, useStore } from 'vuex';
import { mapGetters, Store, useStore } from 'vuex';
import { StateInterface } from 'src/store';
import { ScheduleInterface } from '../../store/schedule';
import { date } from 'quasar';
@ -75,11 +75,11 @@ import { date } from 'quasar';
export default defineComponent({
name: 'CreateEvent',
components: { IsoDateInput, Job },
setup(_, { root }) {
setup() {
//const store = <Store<StateInterface>>root.$store;
const store = useStore<Store<StateInterface>>();
const state = <ScheduleInterface>store.state.schedule;
const eventtypes = computed(() => state.eventTypes);
const scheduleGetters = mapGetters('schedule', ['eventTypes']);
const eventtypes = computed(() => <FG.EventType[]>scheduleGetters.eventTypes());
const jobDeleteDisabled = computed(() => event.value.jobs.length < 2);
const newJob = ref<FG.Job>(({

View File

@ -46,16 +46,16 @@
<script lang="ts">
import { defineComponent, ref, computed, onBeforeMount } from 'vue';
import { Store, useStore } from 'vuex';
import { mapGetters, Store, useStore } from 'vuex';
import { StateInterface } from 'src/store';
import { ScheduleInterface, EventType } from '../../store/schedule';
export default defineComponent({
name: 'EventTypes',
components: {},
setup(_, { root }) {
setup() {
//const store = <Store<StateInterface>>root.$store;
const store = useStore<Store<StateInterface>>();
const state = <ScheduleInterface>store.state.schedule;
const scheduleGetters = mapGetters('schedule', ['eventTypes']);
const newEventType = ref('');
const edittype = ref(false);
const emptyEvent: EventType = { id: -1, name: '' };
@ -69,7 +69,7 @@ export default defineComponent({
console.log(store);
});
const rows = computed(() => state.eventTypes);
const rows = computed(() => <FG.EventType[]>scheduleGetters.eventTypes());
const columns = [
{

View File

@ -64,7 +64,7 @@
<script lang="ts">
import { defineComponent, computed, ref } from 'vue';
import IsoDateInput from 'src/components/utils/IsoDateInput.vue';
import { Store, useStore } from 'vuex';
import { mapGetters, Store, useStore } from 'vuex';
import { StateInterface } from 'src/store';
import { ScheduleInterface } from '../../store/schedule';
import { date } from 'quasar';
@ -83,19 +83,12 @@ export default defineComponent({
default: false,
},
},
watch: {
job: function () {
// this.type.name = this.type.name;
this.$props.job.type = this.$props.job.type;
},
},
setup(props: Props, { root, emit }) {
setup(props, { emit }) {
//const store = <Store<StateInterface>>root.$store;
const store = useStore<Store<StateInterafce>>();
const state = <ScheduleInterface>store.state.schedule;
const jobtypes = computed(() => state.jobTypes);
// job = computed(() => job);
const store = useStore<Store<StateInterface>>();
const scheduleGetters = mapGetters('schedule', ['jobTypes']);
const jobtypes = computed(() => <FG.JobType[]>scheduleGetters.jobTypes());
function setStart(value: Date) {
// eslint-disable-next-line @typescript-eslint/no-unsafe-call
emit('set-start', { job: props.job, value });
@ -137,8 +130,8 @@ export default defineComponent({
}
function isAfterDate(val: Date) {
console.log('isAfterDate', props.job.start, val);
return props.job.start < new Date(val) || 'Ende muss hinter dem Start liegen';
console.log('isAfterDate', (<FG.Job>props.job).start, val);
return (<FG.Job>props.job).start < new Date(val) || 'Ende muss hinter dem Start liegen';
}
const refreshKey = ref(0);

View File

@ -46,16 +46,16 @@
<script lang="ts">
import { defineComponent, ref, computed, onBeforeMount } from 'vue';
import { Store, useStore } from 'vuex';
import { mapGetters, Store, useStore } from 'vuex';
import { StateInterface } from 'src/store';
import { ScheduleInterface, JobType } from '../../store/schedule';
export default defineComponent({
name: 'JobTypes',
components: {},
setup(_, { root }) {
setup() {
//const store = <Store<StateInterface>>root.$store;
const store = useStore<Store<StateInterface>>();
const state = <ScheduleInterface>store.state.schedule;
const scheduleGetters = mapGetters('schedule', ['jobTypes']);
const newJob = ref('');
const edittype = ref(false);
const emptyJob: JobType = { id: -1, name: '' };
@ -66,7 +66,7 @@ export default defineComponent({
void store.dispatch('schedule/getJobTypes');
});
const rows = computed(() => state.jobTypes);
const rows = computed(() => <FG.JobType[]>scheduleGetters.jobTypes());
const columns = [
{

View File

@ -24,7 +24,7 @@
import { computed, defineComponent } from 'vue';
import EssentialLink from 'src/components/navigation/EssentialLink.vue';
import mainRoutes from 'src/plugins/schedule/routes';
import { Store, useStore } from 'vuex';
import { mapGetters, Store, useStore } from 'vuex';
import { BalanceInterface } from 'src/plugins/balance/store/balance';
import setLoadingBar from 'src/utils/loading';
import { StateInterface } from 'src/store';
@ -35,9 +35,10 @@ export default defineComponent({
setup(_) {
//const store = <Store<StateInterface>>root.$store;
const store = useStore<Store<StateInterface>>();
const balanceGetters = mapGetters('balance', ['loading']);
const route = useRoute();
const loading = computed(() => {
return (<BalanceInterface>store.state.balance).loading > 0;
return balanceGetters.loading() > 0;
});
const checkMain = computed(() => {
return route.matched.length == 2;