251 lines
7.3 KiB
Vue
251 lines
7.3 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<v-toolbar>
|
||
|
|
<v-toolbar-title>
|
||
|
|
Dienstanfragen
|
||
|
|
</v-toolbar-title>
|
||
|
|
</v-toolbar>
|
||
|
|
<v-card tile flat>
|
||
|
|
<v-card-title>
|
||
|
|
Gesendete Anfragen
|
||
|
|
</v-card-title>
|
||
|
|
<v-progress-circular indeterminate v-if="transactJobsLoading" />
|
||
|
|
<div v-for="job in transactJobs" :key="transactJobs.indexOf(job)">
|
||
|
|
<v-expand-transition>
|
||
|
|
<v-card tile style="margin-top: 3px">
|
||
|
|
<v-card-text>
|
||
|
|
<v-row>
|
||
|
|
<v-col>
|
||
|
|
<v-combobox
|
||
|
|
outlined
|
||
|
|
label="An"
|
||
|
|
:value="job.to_user.firstname + ' ' + job.to_user.lastname"
|
||
|
|
readonly
|
||
|
|
append-icon
|
||
|
|
>
|
||
|
|
<template v-slot:selection="data">
|
||
|
|
<v-chip>
|
||
|
|
{{ data.item }}
|
||
|
|
</v-chip>
|
||
|
|
</template>
|
||
|
|
</v-combobox>
|
||
|
|
</v-col>
|
||
|
|
<v-col>
|
||
|
|
<v-combobox
|
||
|
|
outlined
|
||
|
|
label="Datum"
|
||
|
|
:value="
|
||
|
|
job.date.getDate() +
|
||
|
|
'.' +
|
||
|
|
(job.date.getMonth() + 1) +
|
||
|
|
'.' +
|
||
|
|
job.date.getFullYear()
|
||
|
|
"
|
||
|
|
readonly
|
||
|
|
append-icon
|
||
|
|
>
|
||
|
|
<template v-slot:selection="data">
|
||
|
|
<v-chip>
|
||
|
|
{{ data.item }}
|
||
|
|
</v-chip>
|
||
|
|
</template>
|
||
|
|
</v-combobox>
|
||
|
|
</v-col>
|
||
|
|
<v-col>
|
||
|
|
<v-combobox
|
||
|
|
outlined
|
||
|
|
label="Status"
|
||
|
|
:value="acceptedStatus(job)"
|
||
|
|
readonly
|
||
|
|
append-icon
|
||
|
|
>
|
||
|
|
<template v-slot:selection="data">
|
||
|
|
<v-chip :color="statusColor(job)">
|
||
|
|
{{ data.item }}
|
||
|
|
</v-chip>
|
||
|
|
</template>
|
||
|
|
</v-combobox>
|
||
|
|
</v-col>
|
||
|
|
</v-row>
|
||
|
|
</v-card-text>
|
||
|
|
<v-card-actions v-if="!job.answerd">
|
||
|
|
<v-spacer/>
|
||
|
|
<v-btn
|
||
|
|
@click="
|
||
|
|
deleteTransactJob({
|
||
|
|
username: job.to_user.username,
|
||
|
|
year: job.date.getFullYear(),
|
||
|
|
month: job.date.getMonth() + 1,
|
||
|
|
day: job.date.getDate()
|
||
|
|
})
|
||
|
|
"
|
||
|
|
>Stornieren
|
||
|
|
</v-btn
|
||
|
|
>
|
||
|
|
</v-card-actions>
|
||
|
|
</v-card>
|
||
|
|
</v-expand-transition>
|
||
|
|
</div>
|
||
|
|
</v-card>
|
||
|
|
<v-divider />
|
||
|
|
<v-card tile flat>
|
||
|
|
<v-card-title>
|
||
|
|
Eingehende Anfragen
|
||
|
|
</v-card-title>
|
||
|
|
<v-progress-circular indeterminate v-if="requestJobsLoading" />
|
||
|
|
<div v-for="job in requestJobs" :key="requestJobs.indexOf(job)">
|
||
|
|
<v-card tile style="margin-top: 3px">
|
||
|
|
<v-card-text>
|
||
|
|
<v-row>
|
||
|
|
<v-col>
|
||
|
|
<v-combobox
|
||
|
|
outlined
|
||
|
|
label="Von"
|
||
|
|
:value="
|
||
|
|
job.from_user.firstname + ' ' + job.from_user.lastname
|
||
|
|
"
|
||
|
|
readonly
|
||
|
|
append-icon
|
||
|
|
>
|
||
|
|
<template v-slot:selection="data">
|
||
|
|
<v-chip>
|
||
|
|
{{ data.item }}
|
||
|
|
</v-chip>
|
||
|
|
</template>
|
||
|
|
</v-combobox>
|
||
|
|
</v-col>
|
||
|
|
<v-col>
|
||
|
|
<v-combobox
|
||
|
|
outlined
|
||
|
|
label="Datum"
|
||
|
|
:value="
|
||
|
|
job.date.getDate() +
|
||
|
|
'.' +
|
||
|
|
(job.date.getMonth() + 1) +
|
||
|
|
'.' +
|
||
|
|
job.date.getFullYear()
|
||
|
|
"
|
||
|
|
readonly
|
||
|
|
append-icon
|
||
|
|
>
|
||
|
|
<template v-slot:selection="data">
|
||
|
|
<v-chip>
|
||
|
|
{{ data.item }}
|
||
|
|
</v-chip>
|
||
|
|
</template>
|
||
|
|
</v-combobox>
|
||
|
|
</v-col>
|
||
|
|
<v-col>
|
||
|
|
<v-combobox
|
||
|
|
outlined
|
||
|
|
label="Status"
|
||
|
|
:value="acceptedStatus(job)"
|
||
|
|
readonly
|
||
|
|
append-icon
|
||
|
|
>
|
||
|
|
<template v-slot:selection="data">
|
||
|
|
<v-chip :color="statusColor(job)">
|
||
|
|
{{ data.item }}
|
||
|
|
</v-chip>
|
||
|
|
</template>
|
||
|
|
</v-combobox>
|
||
|
|
</v-col>
|
||
|
|
</v-row>
|
||
|
|
</v-card-text>
|
||
|
|
<v-expand-transition>
|
||
|
|
<v-card-actions v-if="!job.answerd">
|
||
|
|
<v-spacer />
|
||
|
|
<v-btn
|
||
|
|
color="red"
|
||
|
|
@click="
|
||
|
|
answerJob({
|
||
|
|
username: job.from_user.username,
|
||
|
|
year: job.date.getFullYear(),
|
||
|
|
month: job.date.getMonth() + 1,
|
||
|
|
day: job.date.getDate(),
|
||
|
|
answer: false
|
||
|
|
})
|
||
|
|
"
|
||
|
|
>Ablehnen
|
||
|
|
</v-btn>
|
||
|
|
<v-btn
|
||
|
|
color="green"
|
||
|
|
@click="
|
||
|
|
answerJob({
|
||
|
|
username: job.from_user.username,
|
||
|
|
year: job.date.getFullYear(),
|
||
|
|
month: job.date.getMonth() + 1,
|
||
|
|
day: job.date.getDate(),
|
||
|
|
answer: true
|
||
|
|
})
|
||
|
|
"
|
||
|
|
>Annehmen
|
||
|
|
</v-btn>
|
||
|
|
</v-card-actions>
|
||
|
|
</v-expand-transition>
|
||
|
|
</v-card>
|
||
|
|
</div>
|
||
|
|
</v-card>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { mapGetters, mapActions } from 'vuex'
|
||
|
|
export default {
|
||
|
|
name: 'JobRequests',
|
||
|
|
methods: {
|
||
|
|
...mapActions({
|
||
|
|
getTransactJobs: 'requestJobs/getTransactJobs',
|
||
|
|
getRequestJobs: 'requestJobs/getRequestJobs',
|
||
|
|
answerJob: 'requestJobs/answerTransactJob',
|
||
|
|
deleteTransactJob: 'requestJobs/deleteTransactJob'
|
||
|
|
})
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
...mapGetters({
|
||
|
|
transactJobs: 'requestJobs/transactJobs',
|
||
|
|
transactJobsLoading: 'requestJobs/transactJobsLoading',
|
||
|
|
requestJobs: 'requestJobs/requestJobs',
|
||
|
|
requestJobsLoading: 'requestJobs/requestJobsLoading'
|
||
|
|
}),
|
||
|
|
acceptedStatus() {
|
||
|
|
return job => {
|
||
|
|
if (!job.answerd) {
|
||
|
|
return 'gesendet'
|
||
|
|
}
|
||
|
|
if (job.answerd && job.accepted) {
|
||
|
|
return 'angenommen'
|
||
|
|
}
|
||
|
|
return 'abgelehnt'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
statusColor() {
|
||
|
|
return job => {
|
||
|
|
if (!job.answerd) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
if (job.answerd && job.accepted) {
|
||
|
|
return 'green'
|
||
|
|
}
|
||
|
|
return 'red'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
var now = new Date()
|
||
|
|
this.getTransactJobs({
|
||
|
|
year: now.getFullYear(),
|
||
|
|
month: now.getMonth() + 1,
|
||
|
|
day: now.getDate()
|
||
|
|
})
|
||
|
|
this.getRequestJobs({
|
||
|
|
year: now.getFullYear(),
|
||
|
|
month: now.getMonth() + 1,
|
||
|
|
day: now.getDate()
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped></style>
|