mirror of
https://github.com/IT4Change/gradido.git
synced 2025-12-13 07:45:54 +00:00
refactor(frontend): community routes
This commit is contained in:
Moriz Wahl
parent
b3b84fca36
commit
86742d0158
@ -2,19 +2,19 @@
|
||||
<div class="nav-community container">
|
||||
<b-row class="nav-row">
|
||||
<b-col cols="12" lg="4" md="4" class="px-0">
|
||||
<b-btn active-class="btn-active" block variant="link" to="/community#edit">
|
||||
<b-btn active-class="btn-active" block variant="link" @click="handleClick(0)">
|
||||
<b-icon icon="pencil" class="mr-2" />
|
||||
{{ $t('community.submitContribution') }}
|
||||
</b-btn>
|
||||
</b-col>
|
||||
<b-col cols="12" lg="4" md="4" class="px-0">
|
||||
<b-btn active-class="btn-active" block variant="link" to="/community#my">
|
||||
<b-btn active-class="btn-active" block variant="link" @click="handleClick(1)">
|
||||
<b-icon icon="person" class="mr-2" />
|
||||
{{ $t('community.myContributions') }}
|
||||
</b-btn>
|
||||
</b-col>
|
||||
<b-col cols="12" lg="4" md="4" class="px-0">
|
||||
<b-btn active-class="btn-active" block variant="link" to="/community#all">
|
||||
<b-btn active-class="btn-active" block variant="link" @click="handleClick(2)">
|
||||
<b-icon icon="people" class="mr-2" />
|
||||
{{ $t('community.community') }}
|
||||
</b-btn>
|
||||
@ -23,9 +23,22 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'NavCommunity',
|
||||
}
|
||||
export default {
|
||||
name: 'NavCommunity',
|
||||
methods: {
|
||||
handleClick(tab) {
|
||||
console.log('handleClick', tab)
|
||||
if (this.$route.params && this.$route.params.tab && Number(this.$route.params.tab) !== tab) {
|
||||
this.$router.push({ params: { tab } })
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
'$route.params.tab'(tab) {
|
||||
this.handleClick(tab)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.nav-row {
|
||||
|
||||
@ -65,12 +65,18 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'ContributionInfo',
|
||||
computed: {
|
||||
hash() {
|
||||
return this.$route.hash
|
||||
},
|
||||
},
|
||||
}
|
||||
export default {
|
||||
name: 'ContributionInfo',
|
||||
computed: {
|
||||
hash() {
|
||||
return this.$route.hash
|
||||
},
|
||||
currentTab() {
|
||||
console.log('ROUTE', this.$route)
|
||||
if (this.$route.from && this.$route.from.params && this.$route.from.params.tab)
|
||||
return this.$route.from.params.tab
|
||||
return 0
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -5,12 +5,13 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ContentHeader',
|
||||
computed: {
|
||||
path() {
|
||||
return this.$route.path.replace(/^\//, '')
|
||||
},
|
||||
},
|
||||
}
|
||||
export default {
|
||||
name: 'ContentHeader',
|
||||
computed: {
|
||||
path() {
|
||||
console.log('ContentHeader', this.$route.path.replace(/^\/(.+?)(\/.+)?$/, '$1'))
|
||||
return this.$route.path.replace(/^\/(.+?)(\/.+)?$/, '$1')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -6,19 +6,21 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'RightSide',
|
||||
computed: {
|
||||
name() {
|
||||
switch (this.$route.path.replace(/^\//, '')) {
|
||||
case 'settings':
|
||||
return 'empty'
|
||||
case 'community':
|
||||
return 'community'
|
||||
default:
|
||||
return 'transactions'
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
export default {
|
||||
name: 'RightSide',
|
||||
computed: {
|
||||
name() {
|
||||
console.log('RightSide', this.$route.path.replace(/^\/(.+?)(\/.+)?$/, '$1'))
|
||||
switch (this.$route.path.replace(/^\/(.+?)(\/.+)?$/, '$1')) {
|
||||
case 'settings':
|
||||
return 'empty'
|
||||
case 'community':
|
||||
console.log('-----------')
|
||||
return 'community'
|
||||
default:
|
||||
return 'transactions'
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -58,258 +58,241 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import OpenCreationsAmount from '@/components/Contributions/OpenCreationsAmount.vue'
|
||||
import ContributionForm from '@/components/Contributions/ContributionForm.vue'
|
||||
import ContributionList from '@/components/Contributions/ContributionList.vue'
|
||||
import { createContribution, updateContribution, deleteContribution } from '@/graphql/mutations'
|
||||
import { listContributions, listAllContributions, openCreations } from '@/graphql/queries'
|
||||
import OpenCreationsAmount from '@/components/Contributions/OpenCreationsAmount.vue'
|
||||
import ContributionForm from '@/components/Contributions/ContributionForm.vue'
|
||||
import ContributionList from '@/components/Contributions/ContributionList.vue'
|
||||
import { createContribution, updateContribution, deleteContribution } from '@/graphql/mutations'
|
||||
import { listContributions, listAllContributions, openCreations } from '@/graphql/queries'
|
||||
|
||||
export default {
|
||||
name: 'Community',
|
||||
components: {
|
||||
ContributionForm,
|
||||
ContributionList,
|
||||
OpenCreationsAmount,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
hashLink: '',
|
||||
tabLinkHashes: ['#edit', '#my', '#all'],
|
||||
tabIndex: 0,
|
||||
items: [],
|
||||
itemsAll: [],
|
||||
currentPage: 1,
|
||||
pageSize: 25,
|
||||
currentPageAll: 1,
|
||||
pageSizeAll: 25,
|
||||
contributionCount: 0,
|
||||
contributionCountAll: 0,
|
||||
form: {
|
||||
id: null,
|
||||
date: '',
|
||||
memo: '',
|
||||
hours: 0,
|
||||
amount: '',
|
||||
},
|
||||
updateAmount: '',
|
||||
maximalDate: new Date(),
|
||||
openCreations: [],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.tabIndex = this.tabLinkHashes.findIndex((hashLink) => hashLink === this.$route.hash)
|
||||
this.hashLink = this.$route.hash
|
||||
})
|
||||
},
|
||||
apollo: {
|
||||
OpenCreations: {
|
||||
query() {
|
||||
return openCreations
|
||||
},
|
||||
fetchPolicy: 'network-only',
|
||||
variables() {
|
||||
return {}
|
||||
},
|
||||
update({ openCreations }) {
|
||||
this.openCreations = openCreations
|
||||
},
|
||||
error({ message }) {
|
||||
this.toastError(message)
|
||||
},
|
||||
},
|
||||
ListAllContributions: {
|
||||
query() {
|
||||
return listAllContributions
|
||||
},
|
||||
fetchPolicy: 'network-only',
|
||||
variables() {
|
||||
return {
|
||||
currentPage: this.currentPageAll,
|
||||
pageSize: this.pageSizeAll,
|
||||
}
|
||||
},
|
||||
update({ listAllContributions }) {
|
||||
this.contributionCountAll = listAllContributions.contributionCount
|
||||
this.itemsAll = listAllContributions.contributionList
|
||||
},
|
||||
error({ message }) {
|
||||
this.toastError(message)
|
||||
},
|
||||
},
|
||||
ListContributions: {
|
||||
query() {
|
||||
return listContributions
|
||||
},
|
||||
fetchPolicy: 'network-only',
|
||||
variables() {
|
||||
return {
|
||||
currentPage: this.currentPage,
|
||||
pageSize: this.pageSize,
|
||||
}
|
||||
},
|
||||
update({ listContributions }) {
|
||||
this.contributionCount = listContributions.contributionCount
|
||||
this.items = listContributions.contributionList
|
||||
if (this.items.find((item) => item.state === 'IN_PROGRESS')) {
|
||||
this.tabIndex = 1
|
||||
if (this.$route.hash !== '#my') {
|
||||
this.$router.push({ path: '/community#my' })
|
||||
}
|
||||
this.toastInfo(this.$t('contribution.alert.answerQuestionToast'))
|
||||
}
|
||||
},
|
||||
error({ message }) {
|
||||
this.toastError(message)
|
||||
},
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
$route(to, from) {
|
||||
this.tabIndex = this.tabLinkHashes.findIndex((hashLink) => hashLink === to.hash)
|
||||
this.hashLink = to.hash
|
||||
this.closeAllOpenCollapse()
|
||||
},
|
||||
tabIndex(num) {
|
||||
if (num !== 0) {
|
||||
this.form = {
|
||||
id: null,
|
||||
date: new Date(),
|
||||
memo: '',
|
||||
hours: 0,
|
||||
amount: '',
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
minimalDate() {
|
||||
const date = new Date(this.maximalDate)
|
||||
return new Date(date.setMonth(date.getMonth() - 1, 1))
|
||||
},
|
||||
isThisMonth() {
|
||||
const formDate = new Date(this.form.date)
|
||||
return (
|
||||
formDate.getFullYear() === this.maximalDate.getFullYear() &&
|
||||
formDate.getMonth() === this.maximalDate.getMonth()
|
||||
)
|
||||
},
|
||||
amountToAdd() {
|
||||
// when existing contribution is edited, the amount is added back on top of the amount
|
||||
if (this.form.id) return parseInt(this.updateAmount)
|
||||
return 0
|
||||
},
|
||||
maxForMonths() {
|
||||
const formDate = new Date(this.form.date)
|
||||
if (this.openCreations && this.openCreations.length)
|
||||
return this.openCreations.slice(1).map((creation) => {
|
||||
if (creation.year === formDate.getFullYear() && creation.month === formDate.getMonth())
|
||||
return parseInt(creation.amount) + this.amountToAdd
|
||||
return parseInt(creation.amount)
|
||||
})
|
||||
return [0, 0]
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
closeAllOpenCollapse() {
|
||||
this.$el.querySelectorAll('.collapse.show').forEach((value) => {
|
||||
this.$root.$emit('bv::toggle::collapse', value.id)
|
||||
})
|
||||
},
|
||||
refetchData() {
|
||||
this.$apollo.queries.ListAllContributions.refetch()
|
||||
this.$apollo.queries.ListContributions.refetch()
|
||||
this.$apollo.queries.OpenCreations.refetch()
|
||||
},
|
||||
saveContribution(data) {
|
||||
this.$apollo
|
||||
.mutate({
|
||||
fetchPolicy: 'no-cache',
|
||||
mutation: createContribution,
|
||||
variables: {
|
||||
creationDate: data.date,
|
||||
memo: data.memo,
|
||||
amount: data.amount,
|
||||
},
|
||||
})
|
||||
.then((result) => {
|
||||
this.toastSuccess(this.$t('contribution.submitted'))
|
||||
this.refetchData()
|
||||
})
|
||||
.catch((err) => {
|
||||
this.toastError(err.message)
|
||||
})
|
||||
},
|
||||
updateContribution(data) {
|
||||
this.$apollo
|
||||
.mutate({
|
||||
fetchPolicy: 'no-cache',
|
||||
mutation: updateContribution,
|
||||
variables: {
|
||||
contributionId: data.id,
|
||||
creationDate: data.date,
|
||||
memo: data.memo,
|
||||
amount: data.amount,
|
||||
},
|
||||
})
|
||||
.then((result) => {
|
||||
this.toastSuccess(this.$t('contribution.updated'))
|
||||
this.refetchData()
|
||||
})
|
||||
.catch((err) => {
|
||||
this.toastError(err.message)
|
||||
})
|
||||
},
|
||||
deleteContribution(data) {
|
||||
this.$apollo
|
||||
.mutate({
|
||||
fetchPolicy: 'no-cache',
|
||||
mutation: deleteContribution,
|
||||
variables: {
|
||||
id: data.id,
|
||||
},
|
||||
})
|
||||
.then((result) => {
|
||||
this.toastSuccess(this.$t('contribution.deleted'))
|
||||
this.refetchData()
|
||||
})
|
||||
.catch((err) => {
|
||||
this.toastError(err.message)
|
||||
})
|
||||
},
|
||||
updateListAllContributions(pagination) {
|
||||
this.currentPageAll = pagination.currentPage
|
||||
this.pageSizeAll = pagination.pageSize
|
||||
this.$apollo.queries.ListAllContributions.refetch()
|
||||
},
|
||||
updateListContributions(pagination) {
|
||||
this.currentPage = pagination.currentPage
|
||||
this.pageSize = pagination.pageSize
|
||||
this.$apollo.queries.ListContributions.refetch()
|
||||
},
|
||||
updateContributionForm(item) {
|
||||
this.form.id = item.id
|
||||
this.form.date = item.contributionDate
|
||||
this.form.memo = item.memo
|
||||
this.form.amount = item.amount
|
||||
this.form.hours = item.amount / 20
|
||||
this.updateAmount = item.amount
|
||||
this.$router.push({ path: '#edit' })
|
||||
this.tabIndex = 0
|
||||
},
|
||||
updateTransactions(pagination) {
|
||||
this.$emit('update-transactions', pagination)
|
||||
},
|
||||
updateState(id) {
|
||||
this.items.find((item) => item.id === id).state = 'PENDING'
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.updateTransactions(0)
|
||||
this.tabIndex = 0
|
||||
this.$router.push({ path: '/community#edit' })
|
||||
},
|
||||
}
|
||||
export default {
|
||||
name: 'Community',
|
||||
components: {
|
||||
ContributionForm,
|
||||
ContributionList,
|
||||
OpenCreationsAmount,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tabIndex: 1,
|
||||
items: [],
|
||||
itemsAll: [],
|
||||
currentPage: 1,
|
||||
pageSize: 25,
|
||||
currentPageAll: 1,
|
||||
pageSizeAll: 25,
|
||||
contributionCount: 0,
|
||||
contributionCountAll: 0,
|
||||
form: {
|
||||
id: null,
|
||||
date: '',
|
||||
memo: '',
|
||||
hours: 0,
|
||||
amount: '',
|
||||
},
|
||||
updateAmount: '',
|
||||
maximalDate: new Date(),
|
||||
openCreations: [],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.updateTabIndex(Number(this.$route.params.tab))
|
||||
},
|
||||
apollo: {
|
||||
OpenCreations: {
|
||||
query() {
|
||||
return openCreations
|
||||
},
|
||||
fetchPolicy: 'network-only',
|
||||
variables() {
|
||||
return {}
|
||||
},
|
||||
update({ openCreations }) {
|
||||
this.openCreations = openCreations
|
||||
},
|
||||
error({ message }) {
|
||||
this.toastError(message)
|
||||
},
|
||||
},
|
||||
ListAllContributions: {
|
||||
query() {
|
||||
return listAllContributions
|
||||
},
|
||||
fetchPolicy: 'network-only',
|
||||
variables() {
|
||||
return {
|
||||
currentPage: this.currentPageAll,
|
||||
pageSize: this.pageSizeAll,
|
||||
}
|
||||
},
|
||||
update({ listAllContributions }) {
|
||||
this.contributionCountAll = listAllContributions.contributionCount
|
||||
this.itemsAll = listAllContributions.contributionList
|
||||
},
|
||||
error({ message }) {
|
||||
this.toastError(message)
|
||||
},
|
||||
},
|
||||
ListContributions: {
|
||||
query() {
|
||||
return listContributions
|
||||
},
|
||||
fetchPolicy: 'network-only',
|
||||
variables() {
|
||||
return {
|
||||
currentPage: this.currentPage,
|
||||
pageSize: this.pageSize,
|
||||
}
|
||||
},
|
||||
update({ listContributions }) {
|
||||
this.contributionCount = listContributions.contributionCount
|
||||
this.items = listContributions.contributionList
|
||||
if (this.items.find((item) => item.state === 'IN_PROGRESS')) {
|
||||
this.tabIndex = 1
|
||||
this.toastInfo(this.$t('contribution.alert.answerQuestionToast'))
|
||||
}
|
||||
},
|
||||
error({ message }) {
|
||||
this.toastError(message)
|
||||
},
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
'$route.params.tab'(tab) {
|
||||
this.updateTabIndex(tab)
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
minimalDate() {
|
||||
const date = new Date(this.maximalDate)
|
||||
return new Date(date.setMonth(date.getMonth() - 1, 1))
|
||||
},
|
||||
isThisMonth() {
|
||||
const formDate = new Date(this.form.date)
|
||||
return (
|
||||
formDate.getFullYear() === this.maximalDate.getFullYear() &&
|
||||
formDate.getMonth() === this.maximalDate.getMonth()
|
||||
)
|
||||
},
|
||||
amountToAdd() {
|
||||
// when existing contribution is edited, the amount is added back on top of the amount
|
||||
if (this.form.id) return parseInt(this.updateAmount)
|
||||
return 0
|
||||
},
|
||||
maxForMonths() {
|
||||
const formDate = new Date(this.form.date)
|
||||
if (this.openCreations && this.openCreations.length)
|
||||
return this.openCreations.slice(1).map((creation) => {
|
||||
if (creation.year === formDate.getFullYear() && creation.month === formDate.getMonth())
|
||||
return parseInt(creation.amount) + this.amountToAdd
|
||||
return parseInt(creation.amount)
|
||||
})
|
||||
return [0, 0]
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
updateTabIndex(tab) {
|
||||
console.log('updateTabIndex', tab)
|
||||
if (Number(tab) !== this.tabIndex) {
|
||||
this.tabIndex = Number(tab)
|
||||
this.closeAllOpenCollapse()
|
||||
}
|
||||
},
|
||||
closeAllOpenCollapse() {
|
||||
this.$el.querySelectorAll('.collapse.show').forEach((value) => {
|
||||
this.$root.$emit('bv::toggle::collapse', value.id)
|
||||
})
|
||||
},
|
||||
refetchData() {
|
||||
this.$apollo.queries.ListAllContributions.refetch()
|
||||
this.$apollo.queries.ListContributions.refetch()
|
||||
this.$apollo.queries.OpenCreations.refetch()
|
||||
},
|
||||
saveContribution(data) {
|
||||
this.$apollo
|
||||
.mutate({
|
||||
fetchPolicy: 'no-cache',
|
||||
mutation: createContribution,
|
||||
variables: {
|
||||
creationDate: data.date,
|
||||
memo: data.memo,
|
||||
amount: data.amount,
|
||||
},
|
||||
})
|
||||
.then((result) => {
|
||||
this.toastSuccess(this.$t('contribution.submitted'))
|
||||
this.refetchData()
|
||||
})
|
||||
.catch((err) => {
|
||||
this.toastError(err.message)
|
||||
})
|
||||
},
|
||||
updateContribution(data) {
|
||||
this.$apollo
|
||||
.mutate({
|
||||
fetchPolicy: 'no-cache',
|
||||
mutation: updateContribution,
|
||||
variables: {
|
||||
contributionId: data.id,
|
||||
creationDate: data.date,
|
||||
memo: data.memo,
|
||||
amount: data.amount,
|
||||
},
|
||||
})
|
||||
.then((result) => {
|
||||
this.toastSuccess(this.$t('contribution.updated'))
|
||||
this.refetchData()
|
||||
})
|
||||
.catch((err) => {
|
||||
this.toastError(err.message)
|
||||
})
|
||||
},
|
||||
deleteContribution(data) {
|
||||
this.$apollo
|
||||
.mutate({
|
||||
fetchPolicy: 'no-cache',
|
||||
mutation: deleteContribution,
|
||||
variables: {
|
||||
id: data.id,
|
||||
},
|
||||
})
|
||||
.then((result) => {
|
||||
this.toastSuccess(this.$t('contribution.deleted'))
|
||||
this.refetchData()
|
||||
})
|
||||
.catch((err) => {
|
||||
this.toastError(err.message)
|
||||
})
|
||||
},
|
||||
updateListAllContributions(pagination) {
|
||||
this.currentPageAll = pagination.currentPage
|
||||
this.pageSizeAll = pagination.pageSize
|
||||
this.$apollo.queries.ListAllContributions.refetch()
|
||||
},
|
||||
updateListContributions(pagination) {
|
||||
this.currentPage = pagination.currentPage
|
||||
this.pageSize = pagination.pageSize
|
||||
this.$apollo.queries.ListContributions.refetch()
|
||||
},
|
||||
updateContributionForm(item) {
|
||||
this.form.id = item.id
|
||||
this.form.date = item.contributionDate
|
||||
this.form.memo = item.memo
|
||||
this.form.amount = item.amount
|
||||
this.form.hours = item.amount / 20
|
||||
this.updateAmount = item.amount
|
||||
this.tabIndex = 0
|
||||
},
|
||||
updateTransactions(pagination) {
|
||||
this.$emit('update-transactions', pagination)
|
||||
},
|
||||
updateState(id) {
|
||||
this.items.find((item) => item.id === id).state = 'PENDING'
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.updateTransactions(0)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.tab-content {
|
||||
|
||||
@ -58,6 +58,17 @@ const routes = [
|
||||
requiresAuth: true,
|
||||
pageTitle: 'community',
|
||||
},
|
||||
redirect: (to) => {
|
||||
return { path: '/community/1' }
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/community/:tab',
|
||||
component: () => import('@/pages/Community.vue'),
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
pageTitle: 'community',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/information',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user