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

repair branch 707-Separate-Account-Overview-from-Send-Form from 937-Frontend-style-documentation

Browse Source
This commit is contained in:
ogerly 2021-10-06 09:19:51 +02:00
parent e5148467a4
commit 8f42aa60d7
11 changed files with 269 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/package.json
View File

@ -26,7 +26,7 @@
"babel-preset-vue": "^2.0.2",
"bootstrap": "4.3.1",
"bootstrap-vue": "^2.5.0",
"chart.js": "^2.9.3",
"chart.js": "^3.5.1",
"d3": "^5.7.0",
"datamaps": "^0.5.9",
"date-fns": "^1.30.1",
@ -64,7 +64,7 @@
"vue": "^2.6.11",
"vue-apollo": "^3.0.7",
"vue-bootstrap-typeahead": "^0.2.6",
"vue-chartjs": "^3.5.0",
"vue-chartjs": "^3.5.1",
"vue-cli-plugin-i18n": "^1.0.1",
"vue-clickaway": "^2.2.2",
"vue-clipboard2": "^0.3.0",

13
frontend/src/components/Charts/BarChart.js Normal file
View File

@ -0,0 +1,13 @@
import { Bar, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins
export default {
extends: Bar,
mixins: [reactiveProp],
props: ['options'],
mounted () {
// this.chartData is created in the mixin.
// If you want to pass options please create a local options object
this.renderChart(this.chartData, this.options)
}
}

13
frontend/src/components/Charts/LineChart.js Normal file
View File

@ -0,0 +1,13 @@
import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins
export default {
extends: Line,
mixins: [reactiveProp],
props: ['options'],
mounted () {
// this.chartData is created in the mixin.
// If you want to pass options please create a local options object
this.renderChart(this.chartData, this.options)
}
}

1
frontend/src/locales/de.json
View File

@ -103,6 +103,7 @@
"members_area": "Mitgliederbereich",
"message": "hallo gradido !!",
"privacy_policy": "Datenschutzerklärung",
"overview": "Übersicht",
"send": "Senden",
"settings": {
"coinanimation": {

1
frontend/src/locales/en.json
View File

@ -103,6 +103,7 @@
"members_area": "Member's area",
"message": "hello gradido !!",
"privacy_policy": "Privacy policy",
"overview": "Overview",
"send": "Send",
"settings": {
"coinanimation": {

3
frontend/src/main.js
View File

@ -6,7 +6,7 @@ import { loadAllRules } from './validation-rules'
import { ApolloClient, ApolloLink, InMemoryCache, HttpLink } from 'apollo-boost'
import VueApollo from 'vue-apollo'
import CONFIG from './config'
import VueCharts from 'vue-chartjs'
import { store } from './store/store'
import router from './routes/router'
@ -64,5 +64,6 @@ new Vue({
store,
i18n,
apolloProvider,
VueCharts,
render: (h) => h(App),
})

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

@ -14,6 +14,13 @@ const routes = [
requiresAuth: true,
},
},
{
path: '/send',
component: () => import('../views/Pages/SendOverview.vue'),
meta: {
requiresAuth: true,
},
},
{
path: '/profile',
component: () => import('../views/Pages/UserProfileOverview.vue'),

9
frontend/src/views/Layout/DashboardLayout_gdd.vue
View File

@ -2,11 +2,16 @@
<div>
<side-bar @logout="logout" :balance="balance" :pending="pending">
<template slot="links">
<p></p>
<sidebar-item
:link="{
name: $t('overview'),
path: '/overview',
}"
></sidebar-item>
<sidebar-item
:link="{
name: $t('send'),
path: '/overview',
path: '/send',
}"
></sidebar-item>
<sidebar-item

146
frontend/src/views/Pages/AccountOverview.vue
View File

@ -8,28 +8,33 @@
:gdt-balance="GdtBalance"
/>
<br />
<gdd-send :currentTransactionStep="currentTransactionStep">
<template #transaction-form>
<transaction-form :balance="balance" @set-transaction="setTransaction"></transaction-form>
</template>
<template #transaction-confirmation>
<transaction-confirmation
:email="transactionData.email"
:amount="transactionData.amount"
:memo="transactionData.memo"
:loading="loading"
@send-transaction="sendTransaction"
@on-reset="onReset"
></transaction-confirmation>
</template>
<template #transaction-result>
<transaction-result
:error="error"
:errorResult="errorResult"
@on-reset="onReset"
></transaction-result>
</template>
</gdd-send>
<hr>
GDD Statistik
<div class="small">
<line-chart :chart-data="datacollectionGdd" :options="chartOptions"></line-chart>
</div>
<div class="small">
<bar-chart :chart-data="datacollectionGdd" ></bar-chart>
</div>
<hr>
GDT Statistik
<div class="small">
<line-chart :chart-data="datacollectionGdt"></line-chart>
</div>
<div class="small">
<bar-chart :chart-data="datacollectionGdt" ></bar-chart>
</div>
<template #transaction-form>
<transaction-form :balance="balance" @set-transaction="setTransaction"></transaction-form>
</template>
<!--
<hr />
<gdd-transaction-list
v-if="showContext"
@ -40,18 +45,27 @@
@update-transactions="updateTransactions"
/>
<gdd-transaction-list-footer v-if="showContext" :count="transactionCount" />
-->
<hr>
UserAccount Statistik
<div class="small">
<line-chart :chart-data="datacollectionUser" ></line-chart>
</div>
<div class="small">
<bar-chart :chart-data="datacollectionUser" ></bar-chart>
</div>
</b-container>
</div>
</template>
<script>
import GddStatus from './AccountOverview/GddStatus.vue'
import GddSend from './AccountOverview/GddSend.vue'
import LineChart from '../../components/Charts/LineChart.js'
import BarChart from '../../components/Charts/BarChart.js'
import GddTransactionList from './AccountOverview/GddTransactionList.vue'
import GddTransactionListFooter from './AccountOverview/GddTransactionListFooter.vue'
import TransactionForm from './AccountOverview/GddSend/TransactionForm.vue'
import TransactionConfirmation from './AccountOverview/GddSend/TransactionConfirmation.vue'
import TransactionResult from './AccountOverview/GddSend/TransactionResult.vue'
import { sendCoins } from '../../graphql/mutations.js'
const EMPTY_TRANSACTION_DATA = {
email: '',
@ -63,12 +77,10 @@ export default {
name: 'Overview',
components: {
GddStatus,
GddSend,
LineChart,
BarChart,
GddTransactionList,
GddTransactionListFooter,
TransactionForm,
TransactionConfirmation,
TransactionResult,
},
data() {
return {
@ -78,6 +90,8 @@ export default {
errorResult: '',
currentTransactionStep: 0,
loading: false,
datacollectionGdd: null,
datacollectionGdt: null,
}
},
props: {
@ -102,24 +116,7 @@ export default {
this.transactionData = { ...data }
this.currentTransactionStep = 1
},
async sendTransaction() {
this.loading = true
this.$apollo
.mutate({
mutation: sendCoins,
variables: this.transactionData,
})
.then(() => {
this.error = false
this.$emit('update-balance', this.transactionData.amount)
})
.catch((err) => {
this.errorResult = err.message
this.error = true
})
this.currentTransactionStep = 2
this.loading = false
},
onReset() {
this.transactionData = { ...EMPTY_TRANSACTION_DATA }
this.currentTransactionStep = 0
@ -127,6 +124,57 @@ export default {
updateTransactions(pagination) {
this.$emit('update-transactions', pagination)
},
fillData () {
this.datacollectionGdd = {
labels:['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'gesendet',
backgroundColor: '#ffd600',
data: [345, 490, 218, 2000, 490, 745, 1113]
}, {
label: 'empfangen',
backgroundColor: '#f3a4b5',
data: [700, 395, 100, 405, 39, 805, 423]
}, {
label: 'geschöpft',
backgroundColor: '#2bffc6',
data: [400, 1000, 600, 1000, 900, 800, 1000]
}
]
},
this.datacollectionGdt = {
labels:['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'Euro',
backgroundColor: '#ffd600',
data: [200, 500, 100, 200, 300, 500, 100]
}, {
label: 'GDT',
backgroundColor: '#2bffc6',
data: [2000, 5000, 1100, 2200, 3300, 5500, 1500]
}
]
},
this.datacollectionUser = {
labels:['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'Angemeldete User',
backgroundColor: '#525f7f',
data: [200, 220, 330, 420, 480, 500, 784]
}, {
label: 'User im Schöpfungsprozess',
backgroundColor: '#2bffc6',
data: [80, 133, 155, 220, 280, 320, 421]
}
]
}
},
},
mounted () {
this.fillData()
},
}
</script>

120
frontend/src/views/Pages/SendOverview.vue Normal file
View File

@ -0,0 +1,120 @@
<template>
<div>
<b-container fluid>
<gdd-status
v-if="showContext"
:pending="pending"
:balance="balance"
:gdt-balance="GdtBalance"
/>
<br />
<gdd-send :currentTransactionStep="currentTransactionStep">
<template #transaction-form>
<transaction-form :balance="balance" @set-transaction="setTransaction"></transaction-form>
</template>
<template #transaction-confirmation>
<transaction-confirmation
:email="transactionData.email"
:amount="transactionData.amount"
:memo="transactionData.memo"
:loading="loading"
@send-transaction="sendTransaction"
@on-reset="onReset"
></transaction-confirmation>
</template>
<template #transaction-result>
<transaction-result
:error="error"
:errorResult="errorResult"
@on-reset="onReset"
></transaction-result>
</template>
</gdd-send>
<hr />
</b-container>
</div>
</template>
<script>
import GddStatus from './AccountOverview/GddStatus.vue'
import GddSend from './AccountOverview/GddSend.vue'
import TransactionForm from './AccountOverview/GddSend/TransactionForm.vue'
import TransactionConfirmation from './AccountOverview/GddSend/TransactionConfirmation.vue'
import TransactionResult from './AccountOverview/GddSend/TransactionResult.vue'
import { sendCoins } from '../../graphql/mutations.js'
const EMPTY_TRANSACTION_DATA = {
email: '',
amount: 0,
memo: '',
}
export default {
name: 'Overview',
components: {
GddStatus,
GddSend,
TransactionForm,
TransactionConfirmation,
TransactionResult,
},
data() {
return {
transactionData: { ...EMPTY_TRANSACTION_DATA },
error: false,
errorResult: '',
currentTransactionStep: 0,
loading: false,
}
},
props: {
balance: { type: Number, default: 0 },
GdtBalance: { type: Number, default: 0 },
transactions: {
default: () => [],
},
pending: {
type: Boolean,
default: true,
},
},
computed: {
showContext() {
return this.currentTransactionStep === 0
},
},
methods: {
setTransaction(data) {
this.transactionData = { ...data }
this.currentTransactionStep = 1
},
async sendTransaction() {
this.loading = true
this.$apollo
.mutate({
mutation: sendCoins,
variables: this.transactionData,
})
.then(() => {
this.error = false
this.$emit('update-balance', this.transactionData.amount)
})
.catch((err) => {
this.errorResult = err.message
this.error = true
})
this.currentTransactionStep = 2
this.loading = false
},
onReset() {
this.transactionData = { ...EMPTY_TRANSACTION_DATA }
this.currentTransactionStep = 0
},
updateTransactions(pagination) {
this.$emit('update-transactions', pagination)
},
},
}
</script>

30
frontend/yarn.lock
View File

@ -3808,28 +3808,10 @@ chardet@^0.4.0:
resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.4.2.tgz#b5473b33dc97c424e5d98dc87d55d4d8a29c8bf2"
integrity sha1-tUc7M9yXxCTl2Y3IfVXU2KKci/I=
chart.js@^2.9.3:
version "2.9.4"
resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.9.4.tgz#0827f9563faffb2dc5c06562f8eb10337d5b9684"
integrity sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==
dependencies:
chartjs-color "^2.1.0"
moment "^2.10.2"
chartjs-color-string@^0.6.0:
version "0.6.0"
resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz#1df096621c0e70720a64f4135ea171d051402f71"
integrity sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==
dependencies:
color-name "^1.0.0"
chartjs-color@^2.1.0:
version "2.4.1"
resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.4.1.tgz#6118bba202fe1ea79dd7f7c0f9da93467296c3b0"
integrity sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==
dependencies:
chartjs-color-string "^0.6.0"
color-convert "^1.9.3"
chart.js@^3.5.1:
version "3.5.1"
resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.5.1.tgz#73e24d23a4134a70ccdb5e79a917f156b6f3644a"
integrity sha512-m5kzt72I1WQ9LILwQC4syla/LD/N413RYv2Dx2nnTkRS9iv/ey1xLTt0DnPc/eWV4zI+BgEgDYBIzbQhZHc/PQ==
check-types@^8.0.3:
version "8.0.3"
@ -4058,7 +4040,7 @@ collection-visit@^1.0.0:
map-visit "^1.0.0"
object-visit "^1.0.0"
color-convert@^1.9.0, color-convert@^1.9.1, color-convert@^1.9.3:
color-convert@^1.9.0, color-convert@^1.9.1:
version "1.9.3"
resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
@ -13421,7 +13403,7 @@ vue-bootstrap-typeahead@^0.2.6:
resize-observer-polyfill "^1.5.0"
vue "^2.5.17"
vue-chartjs@^3.5.0:
vue-chartjs@^3.5.1:
version "3.5.1"
resolved "https://registry.yarnpkg.com/vue-chartjs/-/vue-chartjs-3.5.1.tgz#d25e845708f7744ae51bed9d23a975f5f8fc6529"
integrity sha512-foocQbJ7FtveICxb4EV5QuVpo6d8CmZFmAopBppDIGKY+esJV8IJgwmEW0RexQhxqXaL/E1xNURsgFFYyKzS/g==