IT4Change/gradido
3
0
Fork 0
mirror of https://github.com/IT4Change/gradido.git synced 2025-12-13 07:45:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(frontend): community routes

Browse Source
This commit is contained in:
Moriz Wahl 2023-02-17 09:48:05 +01:00
parent b3b84fca36
commit 86742d0158
6 changed files with 304 additions and 288 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
frontend/src/components/Template/ContentHeader/NavCommunity.vue
View File

@ -2,19 +2,19 @@
<div class="nav-community container"> <div class="nav-community container">
<b-row class="nav-row"> <b-row class="nav-row">
<b-col cols="12" lg="4" md="4" class="px-0"> <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" /> <b-icon icon="pencil" class="mr-2" />
{{ $t('community.submitContribution') }} {{ $t('community.submitContribution') }}
</b-btn> </b-btn>
</b-col> </b-col>
<b-col cols="12" lg="4" md="4" class="px-0"> <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" /> <b-icon icon="person" class="mr-2" />
{{ $t('community.myContributions') }} {{ $t('community.myContributions') }}
</b-btn> </b-btn>
</b-col> </b-col>
<b-col cols="12" lg="4" md="4" class="px-0"> <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" /> <b-icon icon="people" class="mr-2" />
{{ $t('community.community') }} {{ $t('community.community') }}
</b-btn> </b-btn>
@ -23,9 +23,22 @@
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'NavCommunity', 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> </script>
<style scoped> <style scoped>
.nav-row { .nav-row {

22
frontend/src/components/Template/RightSide/ContributionInfo.vue
View File

@ -65,12 +65,18 @@
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'ContributionInfo', name: 'ContributionInfo',
computed: { computed: {
hash() { hash() {
return this.$route.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> </script>

17
frontend/src/layouts/templates/ContentHeader.vue
View File

@ -5,12 +5,13 @@
</template> </template>
<script> <script>
export default { export default {
name: 'ContentHeader', name: 'ContentHeader',
computed: { computed: {
path() { path() {
return this.$route.path.replace(/^\//, '') console.log('ContentHeader', this.$route.path.replace(/^\/(.+?)(\/.+)?$/, '$1'))
}, return this.$route.path.replace(/^\/(.+?)(\/.+)?$/, '$1')
}, },
} },
}
</script> </script>

32
frontend/src/layouts/templates/RightSide.vue
View File

@ -6,19 +6,21 @@
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'RightSide', name: 'RightSide',
computed: { computed: {
name() { name() {
switch (this.$route.path.replace(/^\//, '')) { console.log('RightSide', this.$route.path.replace(/^\/(.+?)(\/.+)?$/, '$1'))
case 'settings': switch (this.$route.path.replace(/^\/(.+?)(\/.+)?$/, '$1')) {
return 'empty' case 'settings':
case 'community': return 'empty'
return 'community' case 'community':
default: console.log('-----------')
return 'transactions' return 'community'
} default:
}, return 'transactions'
}, }
} },
},
}
</script> </script>

485
frontend/src/pages/Community.vue
View File

@ -58,258 +58,241 @@
</div> </div>
</template> </template>
<script> <script>
import OpenCreationsAmount from '@/components/Contributions/OpenCreationsAmount.vue' import OpenCreationsAmount from '@/components/Contributions/OpenCreationsAmount.vue'
import ContributionForm from '@/components/Contributions/ContributionForm.vue' import ContributionForm from '@/components/Contributions/ContributionForm.vue'
import ContributionList from '@/components/Contributions/ContributionList.vue' import ContributionList from '@/components/Contributions/ContributionList.vue'
import { createContribution, updateContribution, deleteContribution } from '@/graphql/mutations' import { createContribution, updateContribution, deleteContribution } from '@/graphql/mutations'
import { listContributions, listAllContributions, openCreations } from '@/graphql/queries' import { listContributions, listAllContributions, openCreations } from '@/graphql/queries'
export default { export default {
name: 'Community', name: 'Community',
components: { components: {
ContributionForm, ContributionForm,
ContributionList, ContributionList,
OpenCreationsAmount, OpenCreationsAmount,
}, },
data() { data() {
return { return {
hashLink: '', tabIndex: 1,
tabLinkHashes: ['#edit', '#my', '#all'], items: [],
tabIndex: 0, itemsAll: [],
items: [], currentPage: 1,
itemsAll: [], pageSize: 25,
currentPage: 1, currentPageAll: 1,
pageSize: 25, pageSizeAll: 25,
currentPageAll: 1, contributionCount: 0,
pageSizeAll: 25, contributionCountAll: 0,
contributionCount: 0, form: {
contributionCountAll: 0, id: null,
form: { date: '',
id: null, memo: '',
date: '', hours: 0,
memo: '', amount: '',
hours: 0, },
amount: '', updateAmount: '',
}, maximalDate: new Date(),
updateAmount: '', openCreations: [],
maximalDate: new Date(), }
openCreations: [], },
} mounted() {
}, this.updateTabIndex(Number(this.$route.params.tab))
mounted() { },
this.$nextTick(() => { apollo: {
this.tabIndex = this.tabLinkHashes.findIndex((hashLink) => hashLink === this.$route.hash) OpenCreations: {
this.hashLink = this.$route.hash query() {
}) return openCreations
}, },
apollo: { fetchPolicy: 'network-only',
OpenCreations: { variables() {
query() { return {}
return openCreations },
}, update({ openCreations }) {
fetchPolicy: 'network-only', this.openCreations = openCreations
variables() { },
return {} error({ message }) {
}, this.toastError(message)
update({ openCreations }) { },
this.openCreations = openCreations },
}, ListAllContributions: {
error({ message }) { query() {
this.toastError(message) return listAllContributions
}, },
}, fetchPolicy: 'network-only',
ListAllContributions: { variables() {
query() { return {
return listAllContributions currentPage: this.currentPageAll,
}, pageSize: this.pageSizeAll,
fetchPolicy: 'network-only', }
variables() { },
return { update({ listAllContributions }) {
currentPage: this.currentPageAll, this.contributionCountAll = listAllContributions.contributionCount
pageSize: this.pageSizeAll, this.itemsAll = listAllContributions.contributionList
} },
}, error({ message }) {
update({ listAllContributions }) { this.toastError(message)
this.contributionCountAll = listAllContributions.contributionCount },
this.itemsAll = listAllContributions.contributionList },
}, ListContributions: {
error({ message }) { query() {
this.toastError(message) return listContributions
}, },
}, fetchPolicy: 'network-only',
ListContributions: { variables() {
query() { return {
return listContributions currentPage: this.currentPage,
}, pageSize: this.pageSize,
fetchPolicy: 'network-only', }
variables() { },
return { update({ listContributions }) {
currentPage: this.currentPage, this.contributionCount = listContributions.contributionCount
pageSize: this.pageSize, this.items = listContributions.contributionList
} if (this.items.find((item) => item.state === 'IN_PROGRESS')) {
}, this.tabIndex = 1
update({ listContributions }) { this.toastInfo(this.$t('contribution.alert.answerQuestionToast'))
this.contributionCount = listContributions.contributionCount }
this.items = listContributions.contributionList },
if (this.items.find((item) => item.state === 'IN_PROGRESS')) { error({ message }) {
this.tabIndex = 1 this.toastError(message)
if (this.$route.hash !== '#my') { },
this.$router.push({ path: '/community#my' }) },
} },
this.toastInfo(this.$t('contribution.alert.answerQuestionToast')) watch: {
} '$route.params.tab'(tab) {
}, this.updateTabIndex(tab)
error({ message }) { },
this.toastError(message) },
}, computed: {
}, minimalDate() {
}, const date = new Date(this.maximalDate)
watch: { return new Date(date.setMonth(date.getMonth() - 1, 1))
$route(to, from) { },
this.tabIndex = this.tabLinkHashes.findIndex((hashLink) => hashLink === to.hash) isThisMonth() {
this.hashLink = to.hash const formDate = new Date(this.form.date)
this.closeAllOpenCollapse() return (
}, formDate.getFullYear() === this.maximalDate.getFullYear() &&
tabIndex(num) { formDate.getMonth() === this.maximalDate.getMonth()
if (num !== 0) { )
this.form = { },
id: null, amountToAdd() {
date: new Date(), // when existing contribution is edited, the amount is added back on top of the amount
memo: '', if (this.form.id) return parseInt(this.updateAmount)
hours: 0, return 0
amount: '', },
} maxForMonths() {
} const formDate = new Date(this.form.date)
}, if (this.openCreations && this.openCreations.length)
}, return this.openCreations.slice(1).map((creation) => {
computed: { if (creation.year === formDate.getFullYear() && creation.month === formDate.getMonth())
minimalDate() { return parseInt(creation.amount) + this.amountToAdd
const date = new Date(this.maximalDate) return parseInt(creation.amount)
return new Date(date.setMonth(date.getMonth() - 1, 1)) })
}, return [0, 0]
isThisMonth() { },
const formDate = new Date(this.form.date) },
return ( methods: {
formDate.getFullYear() === this.maximalDate.getFullYear() && updateTabIndex(tab) {
formDate.getMonth() === this.maximalDate.getMonth() console.log('updateTabIndex', tab)
) if (Number(tab) !== this.tabIndex) {
}, this.tabIndex = Number(tab)
amountToAdd() { this.closeAllOpenCollapse()
// 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 closeAllOpenCollapse() {
}, this.$el.querySelectorAll('.collapse.show').forEach((value) => {
maxForMonths() { this.$root.$emit('bv::toggle::collapse', value.id)
const formDate = new Date(this.form.date) })
if (this.openCreations && this.openCreations.length) },
return this.openCreations.slice(1).map((creation) => { refetchData() {
if (creation.year === formDate.getFullYear() && creation.month === formDate.getMonth()) this.$apollo.queries.ListAllContributions.refetch()
return parseInt(creation.amount) + this.amountToAdd this.$apollo.queries.ListContributions.refetch()
return parseInt(creation.amount) this.$apollo.queries.OpenCreations.refetch()
}) },
return [0, 0] saveContribution(data) {
}, this.$apollo
}, .mutate({
methods: { fetchPolicy: 'no-cache',
closeAllOpenCollapse() { mutation: createContribution,
this.$el.querySelectorAll('.collapse.show').forEach((value) => { variables: {
this.$root.$emit('bv::toggle::collapse', value.id) creationDate: data.date,
}) memo: data.memo,
}, amount: data.amount,
refetchData() { },
this.$apollo.queries.ListAllContributions.refetch() })
this.$apollo.queries.ListContributions.refetch() .then((result) => {
this.$apollo.queries.OpenCreations.refetch() this.toastSuccess(this.$t('contribution.submitted'))
}, this.refetchData()
saveContribution(data) { })
this.$apollo .catch((err) => {
.mutate({ this.toastError(err.message)
fetchPolicy: 'no-cache', })
mutation: createContribution, },
variables: { updateContribution(data) {
creationDate: data.date, this.$apollo
memo: data.memo, .mutate({
amount: data.amount, fetchPolicy: 'no-cache',
}, mutation: updateContribution,
}) variables: {
.then((result) => { contributionId: data.id,
this.toastSuccess(this.$t('contribution.submitted')) creationDate: data.date,
this.refetchData() memo: data.memo,
}) amount: data.amount,
.catch((err) => { },
this.toastError(err.message) })
}) .then((result) => {
}, this.toastSuccess(this.$t('contribution.updated'))
updateContribution(data) { this.refetchData()
this.$apollo })
.mutate({ .catch((err) => {
fetchPolicy: 'no-cache', this.toastError(err.message)
mutation: updateContribution, })
variables: { },
contributionId: data.id, deleteContribution(data) {
creationDate: data.date, this.$apollo
memo: data.memo, .mutate({
amount: data.amount, fetchPolicy: 'no-cache',
}, mutation: deleteContribution,
}) variables: {
.then((result) => { id: data.id,
this.toastSuccess(this.$t('contribution.updated')) },
this.refetchData() })
}) .then((result) => {
.catch((err) => { this.toastSuccess(this.$t('contribution.deleted'))
this.toastError(err.message) this.refetchData()
}) })
}, .catch((err) => {
deleteContribution(data) { this.toastError(err.message)
this.$apollo })
.mutate({ },
fetchPolicy: 'no-cache', updateListAllContributions(pagination) {
mutation: deleteContribution, this.currentPageAll = pagination.currentPage
variables: { this.pageSizeAll = pagination.pageSize
id: data.id, this.$apollo.queries.ListAllContributions.refetch()
}, },
}) updateListContributions(pagination) {
.then((result) => { this.currentPage = pagination.currentPage
this.toastSuccess(this.$t('contribution.deleted')) this.pageSize = pagination.pageSize
this.refetchData() this.$apollo.queries.ListContributions.refetch()
}) },
.catch((err) => { updateContributionForm(item) {
this.toastError(err.message) this.form.id = item.id
}) this.form.date = item.contributionDate
}, this.form.memo = item.memo
updateListAllContributions(pagination) { this.form.amount = item.amount
this.currentPageAll = pagination.currentPage this.form.hours = item.amount / 20
this.pageSizeAll = pagination.pageSize this.updateAmount = item.amount
this.$apollo.queries.ListAllContributions.refetch() this.tabIndex = 0
}, },
updateListContributions(pagination) { updateTransactions(pagination) {
this.currentPage = pagination.currentPage this.$emit('update-transactions', pagination)
this.pageSize = pagination.pageSize },
this.$apollo.queries.ListContributions.refetch() updateState(id) {
}, this.items.find((item) => item.id === id).state = 'PENDING'
updateContributionForm(item) { },
this.form.id = item.id },
this.form.date = item.contributionDate created() {
this.form.memo = item.memo this.updateTransactions(0)
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' })
},
}
</script> </script>
<style scoped> <style scoped>
.tab-content { .tab-content {

11
frontend/src/routes/routes.js
View File

@ -58,6 +58,17 @@ const routes = [
requiresAuth: true, requiresAuth: true,
pageTitle: 'community', pageTitle: 'community',
}, },
redirect: (to) => {
return { path: '/community/1' }
},
},
{
path: '/community/:tab',
component: () => import('@/pages/Community.vue'),
meta: {
requiresAuth: true,
pageTitle: 'community',
},
}, },
{ {
path: '/information', path: '/information',