IT4Change/gradido
3
0
Fork 0
mirror of https://github.com/IT4Change/gradido.git synced 2026-02-06 09:56:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(frontend): WiP migration

Browse Source
This commit is contained in:
Mateusz Michałowski 2024-08-07 16:18:25 +02:00
parent 263aedae23
commit 81d7bf799e
70 changed files with 2110 additions and 1503 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/assets/scss/gradido.scss
View File

@ -53,7 +53,6 @@
@import "bootstrap/scss/bootstrap";
// Bootstrap-vue (2.21.1) scss
//@import "bootstrap-vue/src/index";
@import "custom/variables";
@import "gradido-template";
@import "gradido-template-dark";

12
frontend/src/components/Auth/AuthFooter.vue
View File

@ -1,7 +1,7 @@
<template>
<footer class="footer">
<b-row class="mt-lg-7 mt-md-6 mt-4">
<b-col class="col-12 col-md-12 col-lg-6">
<BRow class="mt-lg-7 mt-md-6 mt-4">
<BCol class="col-12 col-md-12 col-lg-6">
<div
class="d-flex justify-content-center justify-content-md-center justify-content-lg-start ml-3"
>
@ -14,8 +14,8 @@
</b-nav-item>
</b-nav>
</div>
</b-col>
<b-col class="col-12 col-md-12 col-lg-6 mt-4 mb-4 mt-lg-0 mb-lg-0">
</BCol>
<BCol class="col-12 col-md-12 col-lg-6 mt-4 mb-4 mt-lg-0 mb-lg-0">
<div class="text-center ml-3 ml-lg-0 text-lg-right pt-1">
{{ $t('followUs') }}
<b-link href="https://www.facebook.com/groups/Gradido/" target="_blank">
@ -43,8 +43,8 @@
</svg>
</b-link>
</div>
</b-col>
</b-row>
</BCol>
</BRow>
</footer>
</template>

10
frontend/src/components/ClipboardCopy.vue
View File

@ -10,9 +10,10 @@
>
{{ link }}
<div>
<b-button class="p-4">
<b-icon icon="link45deg"></b-icon>
</b-button>
<BButton class="p-4">
<IBiLink45deg />
<!-- <b-icon icon="link45deg"></b-icon>-->
</BButton>
</div>
</div>
</div>
@ -26,7 +27,8 @@
{{ linkText }}
<div>
<b-button class="p-4">
<b-icon icon="link45deg"></b-icon>
<IBiLink45deg />
<!-- <b-icon icon="link45deg"></b-icon>-->
</b-button>
</div>
</div>

218
frontend/src/components/CommunitySwitch.vue
View File

@ -1,13 +1,13 @@
<template>
<div class="community-switch">
<div v-if="!validCommunityIdentifier">
<BDropdown no-flip :text="value.name">
<BDropdown no-flip :text="modelValue?.name">
<BDropdownItem
v-for="community in communities"
@click.prevent="updateCommunity(community)"
:key="community.id"
:title="community.description"
:active="value.uuid === community.uuid"
:active="modelValue?.uuid === community.uuid"
>
{{ community.name }}
</BDropdownItem>
@ -15,78 +15,158 @@
</div>
<div v-else class="mb-4 mt-2">
<BRow>
<BCol class="font-weight-bold" :title="value.description">{{ value.name }}</BCol>
<BCol class="font-weight-bold" :title="modelValue.description">{{ modelValue.name }}</BCol>
</BRow>
</div>
</div>
</template>
<script>
import { selectCommunities } from '@/graphql/queries'
<!--<script>-->
<!--import { selectCommunities } from '@/graphql/queries'-->
export default {
name: 'CommunitySwitch',
props: {
value: {
type: Object,
},
},
data() {
return {
communities: [],
validCommunityIdentifier: false,
}
},
methods: {
updateCommunity(community) {
this.$emit('input', community)
},
setDefaultCommunity() {
// when we already get an identifier via url we choose this if the community exist
if (this.communityIdentifier && this.communities.length >= 1) {
const foundCommunity = this.communities.find((community) => {
if (
community.uuid === this.communityIdentifier ||
community.name === this.communityIdentifier
) {
this.validCommunityIdentifier = true
return true
}
return false
})
if (foundCommunity) {
this.updateCommunity(foundCommunity)
return
}
this.toastError('invalid community identifier in url')
}
if (this.validCommunityIdentifier && !this.communityIdentifier) {
this.validCommunityIdentifier = false
}
// set default community, the only one which isn't foreign
// we assume it is only one entry with foreign = false
if (this.value.uuid === '' && this.communities.length) {
const foundCommunity = this.communities.find((community) => !community.foreign)
if (foundCommunity) {
this.updateCommunity(foundCommunity)
}
}
},
},
apollo: {
communities: {
query: selectCommunities,
},
},
computed: {
communityIdentifier() {
return this.$route.params && this.$route.params.communityIdentifier
},
},
updated() {
this.setDefaultCommunity()
},
mounted() {
this.setDefaultCommunity()
<!--export default {-->
<!-- name: 'CommunitySwitch',-->
<!-- props: {-->
<!-- value: {-->
<!-- type: Object,-->
<!-- },-->
<!-- },-->
<!-- data() {-->
<!-- return {-->
<!-- communities: [],-->
<!-- validCommunityIdentifier: false,-->
<!-- }-->
<!-- },-->
<!-- methods: {-->
<!-- updateCommunity(community) {-->
<!-- this.$emit('input', community)-->
<!-- },-->
<!-- setDefaultCommunity() {-->
<!-- // when we already get an identifier via url we choose this if the community exist-->
<!-- if (this.communityIdentifier && this.communities.length >= 1) {-->
<!-- const foundCommunity = this.communities.find((community) => {-->
<!-- if (-->
<!-- community.uuid === this.communityIdentifier ||-->
<!-- community.name === this.communityIdentifier-->
<!-- ) {-->
<!-- this.validCommunityIdentifier = true-->
<!-- return true-->
<!-- }-->
<!-- return false-->
<!-- })-->
<!-- if (foundCommunity) {-->
<!-- this.updateCommunity(foundCommunity)-->
<!-- return-->
<!-- }-->
<!-- this.toastError('invalid community identifier in url')-->
<!-- }-->
<!-- if (this.validCommunityIdentifier && !this.communityIdentifier) {-->
<!-- this.validCommunityIdentifier = false-->
<!-- }-->
<!-- // set default community, the only one which isn't foreign-->
<!-- // we assume it is only one entry with foreign = false-->
<!-- if (this.value.uuid === '' && this.communities.length) {-->
<!-- const foundCommunity = this.communities.find((community) => !community.foreign)-->
<!-- if (foundCommunity) {-->
<!-- this.updateCommunity(foundCommunity)-->
<!-- }-->
<!-- }-->
<!-- },-->
<!-- },-->
<!-- apollo: {-->
<!-- communities: {-->
<!-- query: selectCommunities,-->
<!-- },-->
<!-- },-->
<!-- computed: {-->
<!-- communityIdentifier() {-->
<!-- return this.$route.params && this.$route.params.communityIdentifier-->
<!-- },-->
<!-- },-->
<!-- updated() {-->
<!-- this.setDefaultCommunity()-->
<!-- },-->
<!-- mounted() {-->
<!-- this.setDefaultCommunity()-->
<!-- },-->
<!--}-->
<!--</script>-->
<script setup>
import { ref, computed, watch, onMounted, onUpdated } from 'vue'
import { useQuery } from '@vue/apollo-composable'
import { useRoute } from 'vue-router'
import { selectCommunities } from '@/graphql/queries'
import { useAppToast } from '@/composables/useToast'
const props = defineProps({
modelValue: {
type: Object,
default: () => ({}),
},
})
const emit = defineEmits(['update:modelValue'])
const route = useRoute()
const { toastError } = useAppToast()
const communities = ref([])
const validCommunityIdentifier = ref(false)
const { result } = useQuery(selectCommunities)
watch(result, (data) => {
if (data) {
communities.value = data.communities
setDefaultCommunity()
}
})
const communityIdentifier = computed(() => route.params.communityIdentifier)
function updateCommunity(community) {
emit('update:modelValue', community)
}
function setDefaultCommunity() {
if (communityIdentifier.value && communities.value.length >= 1) {
const foundCommunity = communities.value.find((community) => {
if (
community.uuid === communityIdentifier.value ||
community.name === communityIdentifier.value
) {
validCommunityIdentifier.value = true
return true
}
return false
})
if (foundCommunity) {
updateCommunity(foundCommunity)
return
}
toastError('invalid community identifier in url')
}
if (validCommunityIdentifier.value && !communityIdentifier.value) {
validCommunityIdentifier.value = false
}
if (props.modelValue?.uuid === '' && communities.value.length) {
const foundCommunity = communities.value.find((community) => !community.foreign)
if (foundCommunity) {
updateCommunity(foundCommunity)
}
}
}
onMounted(setDefaultCommunity)
onUpdated(setDefaultCommunity)
</script>
<style scoped lang="scss">
.community-switch {
:deep(button) {
background-color: $secondary;
}
}
</style>

12
frontend/src/components/ContributionMessages/ContributionMessagesFormular.vue
View File

@ -9,16 +9,16 @@
:placeholder="$t('form.memo')"
rows="3"
></b-form-textarea>
<b-row class="mt-4 mb-4">
<b-col>
<BRow class="mt-4 mb-4">
<BCol>
<b-button type="reset" variant="secondary">{{ $t('form.cancel') }}</b-button>
</b-col>
<b-col class="text-right">
</BCol>
<BCol class="text-right">
<b-button type="submit" variant="gradido" :disabled="disabled">
{{ $t('form.reply') }}
</b-button>
</b-col>
</b-row>
</BCol>
</BRow>
</b-form>
</div>
</div>

36
frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue
View File

@ -1,8 +1,8 @@
<template>
<div class="contribution-messages-list-item">
<div v-if="message.type === 'HISTORY'">
<b-row class="mb-3 border border-197 p-1">
<b-col cols="10">
<BRow class="mb-3 border border-197 p-1">
<BCol cols="10">
<small>{{ $d(new Date(message.createdAt), 'short') }}</small>
<div class="font-weight-bold" data-test="username" v-if="isNotModerator">
{{ storeName.username }} {{ $t('contribution.isEdited') }}
@ -14,30 +14,30 @@
{{ $t('contribution.oldContribution') }}
</div>
<parse-message v-bind="message" data-test="message" class="p-2"></parse-message>
</b-col>
<b-col cols="2">
</BCol>
<BCol cols="2">
<avatar :username="storeName.username" :initials="storeName.initials"></avatar>
</b-col>
</b-row>
</BCol>
</BRow>
</div>
<div v-else-if="isNotModerator" class="text-right pr-4 pr-lg-0 is-not-moderator">
<b-row class="mb-3">
<b-col cols="10">
<BRow class="mb-3">
<BCol cols="10">
<div class="font-weight-bold" data-test="username">{{ storeName.username }}</div>
<div class="small" data-test="date">{{ $d(new Date(message.createdAt), 'short') }}</div>
<parse-message v-bind="message" data-test="message"></parse-message>
</b-col>
<b-col cols="2">
</BCol>
<BCol cols="2">
<avatar :username="storeName.username" :initials="storeName.initials"></avatar>
</b-col>
</b-row>
</BCol>
</BRow>
</div>
<div v-else>
<b-row class="mb-3 bg-f5 p-2 is-moderator">
<b-col cols="2">
<BRow class="mb-3 bg-f5 p-2 is-moderator">
<BCol cols="2">
<avatar :username="moderationName.username" :initials="moderationName.initials"></avatar>
</b-col>
<b-col cols="10">
</BCol>
<BCol cols="10">
<div class="font-weight-bold">
<span data-test="username">{{ moderationName.username }}</span>
<span class="ml-2 text-success small" data-test="moderator">
@ -47,8 +47,8 @@
<div class="small" data-test="date">{{ $d(new Date(message.createdAt), 'short') }}</div>
<parse-message v-bind="message" data-test="message"></parse-message>
</b-col>
</b-row>
</BCol>
</BRow>
</div>
</div>
</template>

2
frontend/src/components/ContributionMessages/ParseMessage.vue
View File

@ -8,7 +8,7 @@
</span>
<span v-else-if="type === 'amount'">
<br />
{{ text | GDD }}
{{ $filters.GDD(text) }}
</span>
<span v-else>{{ text }}</span>
</span>

4
frontend/src/components/Contributions/ContributionForm.vue
View File

@ -52,10 +52,10 @@
<input-amount
id="contribution-amount"
v-model="form.amount"
:name="$t('form.amount')"
name="amount"
:label="$t('form.amount')"
placeholder="20"
:rules="{ required: true, gddSendAmount: [20, validMaxGDD] }"
:rules="{ required: true, gddSendAmount: { min: 20, max: validMaxGDD } }"
typ="ContributionForm"
></input-amount>

53
frontend/src/components/Contributions/ContributionListItem.vue
View File

@ -4,8 +4,8 @@
class="contribution-list-item bg-white appBoxShadow gradido-border-radius pt-3 px-3"
:class="status === 'IN_PROGRESS' && !allContribution ? 'pulse border border-205' : ''"
>
<b-row>
<b-col cols="3" lg="2" md="2">
<BRow>
<BCol cols="3" lg="2" md="2">
<avatar
v-if="firstName"
:username="username.username"
@ -13,9 +13,9 @@
color="#fff"
class="font-weight-bold"
></avatar>
<b-avatar v-else :icon="icon" :variant="variant" size="3em"></b-avatar>
</b-col>
<b-col>
<BAvatar v-else :icon="icon" :variant="variant" size="3em"></BAvatar>
</BCol>
<BCol>
<div v-if="firstName" class="mr-3 font-weight-bold">
{{ firstName }} {{ lastName }}
<b-icon :icon="icon" :variant="variant"></b-icon>
@ -35,31 +35,32 @@
>
{{ $t('contribution.alert.answerQuestion') }}
</div>
</b-col>
<b-col cols="9" lg="3" offset="3" offset-md="0" offset-lg="0">
</BCol>
<BCol cols="9" lg="3" offset="3" offset-md="0" offset-lg="0">
<div class="small">
{{ $t('creation') }} {{ $t('(') }}{{ amount / 20 }} {{ $t('h') }}{{ $t(')') }}
</div>
<div v-if="status === 'DENIED' && allContribution" class="font-weight-bold">
<b-icon icon="x-circle" variant="danger"></b-icon>
<!-- <b-icon icon="x-circle" variant="danger"></b-icon>-->
<IBiXCircle />
{{ $t('contribution.alert.denied') }}
</div>
<div v-if="status === 'DELETED'" class="small">
{{ $t('contribution.deleted') }}
</div>
<div v-else class="font-weight-bold">{{ amount | GDD }}</div>
</b-col>
<b-col cols="12" md="1" lg="1" class="text-right align-items-center">
<div v-else class="font-weight-bold">{{ $filters.GDD(amount) }}</div>
</BCol>
<BCol cols="12" md="1" lg="1" class="text-right align-items-center">
<div v-if="messagesCount > 0 && !moderatorId" @click="visible = !visible">
<collapse-icon class="text-right" :visible="visible" />
</div>
</b-col>
</b-row>
<b-row
</BCol>
</BRow>
<BRow
v-if="(!['CONFIRMED', 'DELETED'].includes(status) && !allContribution) || messagesCount > 0"
class="p-2"
>
<b-col cols="3" class="mr-auto text-center">
<BCol cols="3" class="mr-auto text-center">
<div
v-if="!['CONFIRMED', 'DELETED'].includes(status) && !allContribution && !moderatorId"
class="test-delete-contribution pointer mr-3"
@ -69,8 +70,8 @@
<div>{{ $t('delete') }}</div>
</div>
</b-col>
<b-col cols="3" class="text-center">
</BCol>
<BCol cols="3" class="text-center">
<div
v-if="!['CONFIRMED', 'DELETED'].includes(status) && !allContribution && !moderatorId"
class="test-edit-contribution pointer mr-3"
@ -83,19 +84,21 @@
})
"
>
<b-icon icon="pencil"></b-icon>
<!-- <b-icon icon="pencil"></b-icon>-->
<IBiPencil />
<div>{{ $t('edit') }}</div>
</div>
</b-col>
<b-col cols="6" class="text-center">
</BCol>
<BCol cols="6" class="text-center">
<div v-if="messagesCount > 0 && !moderatorId" class="pointer" @click="visible = !visible">
<b-icon icon="chat-dots"></b-icon>
<!-- <b-icon icon="chat-dots"></b-icon>-->
<IBiChatDots />
<div>{{ $t('moderatorChat') }}</div>
</div>
</b-col>
</b-row>
</BCol>
</BRow>
<div v-else class="pb-3"></div>
<b-collapse :id="collapsId" class="mt-2" v-model="visible">
<BCollapse :id="collapsId" class="mt-2" v-model="visible">
<contribution-messages-list
:messages="messages_get"
:status="status"
@ -103,7 +106,7 @@
@get-list-contribution-messages="getListContributionMessages"
@update-status="updateStatus"
/>
</b-collapse>
</BCollapse>
</div>
</div>
</template>

44
frontend/src/components/Contributions/OpenCreationsAmount.vue
View File

@ -1,34 +1,34 @@
<template>
<div class="bg-white appBoxShadow gradido-border-radius p-3">
<div class="pl-3">
<b-row class="small">
<b-col>{{ $t('time.months') }}</b-col>
<b-col class="d-none d-md-inline">{{ $t('status') }}</b-col>
<b-col class="d-none d-md-inline text-center">{{ $t('submitted') }}</b-col>
<b-col class="text-center">{{ $t('openHours') }}</b-col>
</b-row>
<BRow class="small">
<BCol>{{ $t('time.months') }}</BCol>
<BCol class="d-none d-md-inline">{{ $t('status') }}</BCol>
<BCol class="d-none d-md-inline text-center">{{ $t('submitted') }}</BCol>
<BCol class="text-center">{{ $t('openHours') }}</BCol>
</BRow>
<b-row class="font-weight-bold pt-3">
<b-col>{{ $d(new Date(minimalDate), 'monthAndYear') }}</b-col>
<b-col class="d-none d-md-inline">
<BRow class="font-weight-bold pt-3">
<BCol>{{ $d(new Date(minimalDate), 'monthAndYear') }}</BCol>
<BCol class="d-none d-md-inline">
{{ maxGddLastMonth > 0 ? $t('contribution.submit') : $t('maxReached') }}
</b-col>
<b-col class="d-none d-md-inline text-197 text-center">
</BCol>
<BCol class="d-none d-md-inline text-197 text-center">
{{ hoursSubmittedLastMonth }} {{ $t('h') }}
</b-col>
<b-col class="text-4 text-center">{{ hoursAvailableLastMonth }} {{ $t('h') }}</b-col>
</b-row>
</BCol>
<BCol class="text-4 text-center">{{ hoursAvailableLastMonth }} {{ $t('h') }}</BCol>
</BRow>
<b-row class="font-weight-bold">
<b-col>{{ $d(new Date(), 'monthAndYear') }}</b-col>
<b-col class="d-none d-md-inline">
<BRow class="font-weight-bold">
<BCol>{{ $d(new Date(), 'monthAndYear') }}</BCol>
<BCol class="d-none d-md-inline">
{{ maxGddThisMonth > 0 ? $t('contribution.submit') : $t('maxReached') }}
</b-col>
<b-col class="d-none d-md-inline text-197 text-center">
</BCol>
<BCol class="d-none d-md-inline text-197 text-center">
{{ hoursSubmittedThisMonth }} {{ $t('h') }}
</b-col>
<b-col class="text-4 text-center">{{ hoursAvailableThisMonth }} {{ $t('h') }}</b-col>
</b-row>
</BCol>
<BCol class="text-4 text-center">{{ hoursAvailableThisMonth }} {{ $t('h') }}</BCol>
</BRow>
</div>
</div>
</template>

13
frontend/src/components/DecayInformations/CollapseLinksList.vue
View File

@ -11,7 +11,7 @@
@reset-transaction-link-list="resetTransactionLinkList"
/>
<div class="mb-3">
<b-button
<BButton
class="test-button-load-more"
v-if="!pending && transactionLinks.length < transactionLinkCount"
block
@ -19,9 +19,10 @@
@click="loadMoreLinks"
>
{{ buttonText }}
</b-button>
</BButton>
<div class="text-center">
<b-icon v-if="pending" icon="three-dots" animation="cylon" font-scale="4"></b-icon>
<!-- <b-icon v-if="pending" icon="three-dots" animation="cylon" font-scale="4"></b-icon>-->
<IBiThreeDots v-if="pending" animation="cylon" font-scale="4" />
</div>
</div>
</div>
@ -57,9 +58,9 @@ export default {
computed: {
buttonText() {
const i = this.transactionLinkCount - this.transactionLinks.length
if (i === 1) return this.$tc('link-load', 0)
if (i <= this.pageSize) return this.$tc('link-load', 1, { n: i })
return this.$tc('link-load', 2, { n: this.pageSize })
if (i === 1) return this.$t('link-load', 0)
if (i <= this.pageSize) return this.$t('link-load', 1, { n: i })
return this.$t('link-load', 2, { n: this.pageSize })
},
},
}

29
frontend/src/components/DecayInformations/DecayInformation-Decay.vue
View File

@ -1,26 +1,27 @@
<template>
<div class="decayinformation-decay">
<div class="mb-3">
<b-icon icon="droplet-half" class="mr-2" />
<!-- <b-icon icon="droplet-half" class="mr-2" />-->
<IBiDropletHalf class="mr-2" />
<b>{{ $t('decay.calculation_decay') }}</b>
</div>
<b-row>
<b-col>
<b-row>
<b-col cols="12" lg="4" md="4">
<BRow>
<BCol>
<BRow>
<BCol cols="12" lg="4" md="4">
<div>{{ $t('decay.decay') }}</div>
</b-col>
<b-col offset="1" offset-md="0" offset-lg="0">
</BCol>
<BCol offset="1" offset-md="0" offset-lg="0">
<div>
{{ previousBalance | GDD }}
{{ $filters.GDD(previousBalance) }}
{{ decay === '0' ? $t('math.minus') : '' }}
{{ decay | GDD }} {{ $t('math.equal') }}
<b>{{ balance | GDD }}</b>
{{ $filters.GDD(decay) }} {{ $t('math.equal') }}
<b>{{ $filters.GDD(balance) }}</b>
</div>
</b-col>
</b-row>
</b-col>
</b-row>
</BCol>
</BRow>
</BCol>
</BRow>
</div>
</template>
<script>

80
frontend/src/components/DecayInformations/DecayInformation-DecayStartblock.vue
View File

@ -1,68 +1,68 @@
<template>
<div class="decayinformation-startblock">
<b-row>
<b-col cols="12">
<BRow>
<BCol cols="12">
<div class="text-center pb-3">
<b-icon icon="droplet-half" class="mr-2" />
<b>{{ $t('decay.Starting_block_decay') }}</b>
</div>
</b-col>
</b-row>
<b-row>
<b-col offset="1" cols="11">
<b-row>
<b-col cols="5">
</BCol>
</BRow>
<BRow>
<BCol offset="1" cols="11">
<BRow>
<BCol cols="5">
<div class="text-right">
<div>{{ $t('decay.decay_introduced') }}</div>
</div>
</b-col>
<b-col cols="5">
</BCol>
<BCol cols="5">
<div>
<span v-if="decay.start">
{{ $d(new Date(decay.start), 'long') }}
</span>
</div>
</b-col>
</b-row>
</BCol>
</BRow>
<duration-row :decayStart="decay.start" :decayEnd="decay.end" />
<!-- Decay-->
<b-row>
<b-col cols="5" class="text-right">{{ $t('decay.decay') }}</b-col>
<b-col cols="7">{{ decay.decay | GDD }}</b-col>
</b-row>
</b-col>
</b-row>
<BRow>
<BCol cols="5" class="text-right">{{ $t('decay.decay') }}</BCol>
<BCol cols="7">{{ $filters.GDD(decay.decay) }}</BCol>
</BRow>
</BCol>
</BRow>
<hr class="mt-3 mb-3" />
<b-row>
<b-col class="text-center pb-3">
<BRow>
<BCol class="text-center pb-3">
<b>{{ $t('decay.calculation_total') }}</b>
</b-col>
</b-row>
</BCol>
</BRow>
<!-- Type-->
<b-row>
<b-col offset="1" cols="11">
<b-row>
<BRow>
<BCol offset="1" cols="11">
<BRow>
<!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys-->
<b-col cols="5" class="text-right">{{ $t(`decay.types.${typeId.toLowerCase()}`) }}</b-col>
<b-col cols="7">{{ amount | GDD }}</b-col>
</b-row>
<BCol cols="5" class="text-right">{{ $t(`decay.types.${typeId.toLowerCase()}`) }}</BCol>
<BCol cols="7">{{ $filters.GDD(amount) }}</BCol>
</BRow>
<!-- Decay-->
<b-row>
<b-col cols="5" class="text-right">{{ $t('decay.decay') }}</b-col>
<b-col cols="7">{{ decay.decay | GDD }}</b-col>
</b-row>
<BRow>
<BCol cols="5" class="text-right">{{ $t('decay.decay') }}</BCol>
<BCol cols="7">{{ $filters.GDD(decay.decay) }}</BCol>
</BRow>
<!-- Total-->
<b-row>
<b-col cols="5" class="text-right">{{ $t('decay.total') }}</b-col>
<b-col cols="7">
<b>{{ (Number(amount) + Number(decay.decay)) | GDD }}</b>
</b-col>
</b-row>
</b-col>
</b-row>
<BRow>
<BCol cols="5" class="text-right">{{ $t('decay.total') }}</BCol>
<BCol cols="7">
<b>{{ $filters.GDD(Number(amount) + Number(decay.decay)) }}</b>
</BCol>
</BRow>
</BCol>
</BRow>
</div>
</template>
<script>

86
frontend/src/components/DecayInformations/DecayInformation-Long.vue
View File

@ -5,70 +5,70 @@
<div class="">{{ memo }}</div>
</div>
<div class="mb-3">
<b-icon icon="droplet-half" class="mr-2" />
<IBiDropletHalf class="mr-2" />
<b>{{ $t('decay.calculation_decay') }}</b>
</div>
<b-row>
<b-col>
<b-row>
<b-col cols="6" lg="4" md="6" sm="6">
<BRow>
<BCol>
<BRow>
<BCol cols="6" lg="4" md="6" sm="6">
<div>{{ $t('decay.last_transaction') }}</div>
</b-col>
<b-col offset="0" class="text-right mr-0">
</BCol>
<BCol offset="0" class="text-right mr-0">
<div>
<span>
{{ $d(new Date(decay.start), 'long') }}
</span>
</div>
</b-col>
</b-row>
</BCol>
</BRow>
<duration-row :decayStart="decay.start" :decayEnd="decay.end" />
<!-- Previous Balance -->
<b-row class="mt-2">
<b-col cols="6" lg="4" md="6" sm="6">
<BRow class="mt-2">
<BCol cols="6" lg="4" md="6" sm="6">
<div>{{ $t('decay.old_balance') }}</div>
</b-col>
<b-col offset="0" class="text-right mr-0">
{{ previousBalance | GDD }}
</b-col>
</b-row>
</BCol>
<BCol offset="0" class="text-right mr-0">
{{ $filters.GDD(previousBalance) }}
</BCol>
</BRow>
<!-- Decay-->
<b-row class="mt-0">
<b-col cols="6" lg="3" md="6" sm="6">
<BRow class="mt-0">
<BCol cols="6" lg="3" md="6" sm="6">
<div>{{ $t('decay.decay') }}</div>
</b-col>
<b-col offset="0" class="text-right mr-0">
{{ decay.decay | GDD }}
</b-col>
</b-row>
</b-col>
</b-row>
</BCol>
<BCol offset="0" class="text-right mr-0">
{{ $filters.GDD(decay.decay) }}
</BCol>
</BRow>
</BCol>
</BRow>
<!-- Type-->
<b-row>
<b-col>
<b-row class="mb-2">
<BRow>
<BCol>
<BRow class="mb-2">
<!-- eslint-disable @intlify/vue-i18n/no-dynamic-keys-->
<b-col cols="6" lg="3" md="6" sm="6">
<BCol cols="6" lg="3" md="6" sm="6">
{{ $t(`decay.types.${typeId.toLowerCase()}`) }}
</b-col>
</BCol>
<!-- eslint-enable @intlify/vue-i18n/no-dynamic-keys-->
<b-col offset="0" class="text-right mr-0">
{{ amount | GDD }}
</b-col>
</b-row>
<BCol offset="0" class="text-right mr-0">
{{ $filters.GDD(amount) }}
</BCol>
</BRow>
<!-- Total-->
<b-row class="border-top pt-2">
<b-col cols="6" lg="3" md="6" sm="6">
<BRow class="border-top pt-2">
<BCol cols="6" lg="3" md="6" sm="6">
<div>{{ $t('decay.new_balance') }}</div>
</b-col>
<b-col offset="0" class="text-right mr-0">
<b>{{ balance | GDD }}</b>
</b-col>
</b-row>
</b-col>
</b-row>
</BCol>
<BCol offset="0" class="text-right mr-0">
<b>{{ $filters.GDD(balance) }}</b>
</BCol>
</BRow>
</BCol>
</BRow>
</div>
</template>
<script>

2
frontend/src/components/DecayInformations/DecayInformation-Short.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="decayinformation-short">
<span v-if="decay">{{ decay | GDD }}</span>
<span v-if="decay">{{ $filters.GDD(decay) }}</span>
</div>
</template>
<script>

8
frontend/src/components/GddSend/TransactionConfirmationLink.vue
View File

@ -9,7 +9,7 @@
</BCol>
<BCol cols="3">
<div class="small">{{ $t('send_gdd') }}</div>
<div>{{ amount | GDD }}</div>
<div>{{ $filters.GDD(amount) }}</div>
</BCol>
</BRow>
@ -21,19 +21,19 @@
</BRow>
<BRow class="pr-3" offset="2">
<BCol offset="2">{{ $t('form.current_balance') }}</BCol>
<BCol>{{ balance | GDD }}</BCol>
<BCol>{{ $filters.GDD(balance) }}</BCol>
</BRow>
<BRow class="pr-3">
<BCol offset="2">
<strong>{{ $t('form.your_amount') }}</strong>
</BCol>
<BCol class="borderbottom">
<strong>{{ (amount * -1) | GDD }}</strong>
<strong>{{ $filters.GDD(amount * -1) }}</strong>
</BCol>
</BRow>
<BRow class="pr-3">
<BCol offset="2">{{ $t('form.new_balance') }}</BCol>
<BCol>{{ (balance - amount) | GDD }}</BCol>
<BCol>{{ $filters.GDD(balance - amount) }}</BCol>
</BRow>
<BRow class="mt-5">
<BCol cols="12" md="6" lg="6">

103
frontend/src/components/GddSend/TransactionConfirmationSend.vue
View File

@ -2,66 +2,67 @@
<div class="transaction-confirm-send">
<div class="bg-white appBoxShadow gradido-border-radius p-3">
<div class="h3 mb-4">{{ $t('form.send_check') }}</div>
<b-row class="mt-5">
<b-col cols="12">
<b-row class="mt-3">
<b-col class="h5">{{ $t('form.recipientCommunity') }}</b-col>
<b-col>{{ targetCommunity.name }}</b-col>
</b-row>
<b-row>
<b-col class="h5">{{ $t('form.recipient') }}</b-col>
<b-col>{{ userName ? userName : identifier }}</b-col>
</b-row>
<b-row>
<b-col class="h5">{{ $t('form.amount') }}</b-col>
<b-col>{{ amount | GDD }}</b-col>
</b-row>
<b-row>
<b-col class="h5">{{ $t('form.memo') }}</b-col>
<b-col>{{ memo }}</b-col>
</b-row>
</b-col>
</b-row>
<BRow class="mt-5">
<BCol cols="12">
<BRow class="mt-3">
<BCol class="h5">{{ $t('form.recipientCommunity') }}</BCol>
<BCol>{{ targetCommunity.name }}</BCol>
</BRow>
<BRow>
<BCol class="h5">{{ $t('form.recipient') }}</BCol>
<BCol>{{ userName ? userName : identifier }}</BCol>
</BRow>
<BRow>
<BCol class="h5">{{ $t('form.amount') }}</BCol>
<BCol>{{ $filters.GDD(amount) }}</BCol>
</BRow>
<BRow>
<BCol class="h5">{{ $t('form.memo') }}</BCol>
<BCol>{{ memo }}</BCol>
</BRow>
</BCol>
</BRow>
<b-row class="mt-5 text-color-gdd-yellow h3">
<b-col cols="2" class="text-right">
<b-icon class="text-color-gdd-yellow" icon="droplet-half"></b-icon>
</b-col>
<b-col>{{ $t('advanced-calculation') }}</b-col>
</b-row>
<b-row class="pr-3" offset="2">
<b-col offset="2">{{ $t('form.current_balance') }}</b-col>
<b-col>{{ balance | GDD }}</b-col>
</b-row>
<b-row class="pr-3">
<b-col offset="2">
<BRow class="mt-5 text-color-gdd-yellow h3">
<BCol cols="2" class="text-right">
<!-- <b-icon class="text-color-gdd-yellow" icon="droplet-half"></b-icon>-->
<IBiDropletHalf />
</BCol>
<BCol>{{ $t('advanced-calculation') }}</BCol>
</BRow>
<BRow class="pr-3" offset="2">
<BCol offset="2">{{ $t('form.current_balance') }}</BCol>
<BCol>{{ $filters.GDD(balance) }}</BCol>
</BRow>
<BRow class="pr-3">
<BCol offset="2">
<strong>{{ $t('form.your_amount') }}</strong>
</b-col>
<b-col class="borderbottom">
<strong>{{ (amount * -1) | GDD }}</strong>
</b-col>
</b-row>
<b-row class="pr-3">
<b-col offset="2">{{ $t('form.new_balance') }}</b-col>
<b-col>{{ (balance - amount) | GDD }}</b-col>
</b-row>
<b-row class="mt-5">
<b-col cols="12" md="6" lg="6">
<b-button block @click="$emit('on-back')" class="mb-3 mb-md-0 mb-lg-0">
</BCol>
<BCol class="borderbottom">
<strong>{{ $filters.GDD(amount * -1) }}</strong>
</BCol>
</BRow>
<BRow class="pr-3">
<BCol offset="2">{{ $t('form.new_balance') }}</BCol>
<BCol>{{ $filters.GDD(balance - amount) }}</BCol>
</BRow>
<BRow class="mt-5">
<BCol cols="12" md="6" lg="6">
<BButton block @click="$emit('on-back')" class="mb-3 mb-md-0 mb-lg-0">
{{ $t('back') }}
</b-button>
</b-col>
<b-col cols="12" md="6" lg="6" class="text-lg-right">
<b-button
</BButton>
</BCol>
<BCol cols="12" md="6" lg="6" class="text-lg-right">
<BButton
block
variant="gradido"
:disabled="disabled"
@click="$emit('send-transaction'), (disabled = true)"
>
{{ $t('form.send_now') }}
</b-button>
</b-col>
</b-row>
</BButton>
</BCol>
</BRow>
</div>
</div>
</template>

572
frontend/src/components/GddSend/TransactionForm.vue
View File

@ -3,141 +3,266 @@
<BRow>
<BCol cols="12">
<BCard class="appBoxShadow gradido-border-radius" body-class="p-4">
<validation-observer v-slot="{ handleSubmit }" ref="formValidator">
<BForm role="form" @submit.prevent="handleSubmit(onSubmit)" @reset="onReset">
<BFormRadioGroup v-model="radioSelected">
<BRow class="mb-4">
<BCol cols="12" lg="6">
<BRow class="bg-248 gradido-border-radius pt-lg-2 mr-lg-2">
<BCol cols="10" @click="radioSelected = sendTypes.send" class="pointer">
{{ $t('send_gdd') }}
</BCol>
<BCol cols="2">
<b-form-radio
name="shipping"
size="lg"
:value="sendTypes.send"
stacked
class="custom-radio-button pointer"
></b-form-radio>
</BCol>
</BRow>
</BCol>
<BCol>
<BRow class="bg-248 gradido-border-radius pt-lg-2 ml-lg-2 mt-2 mt-lg-0">
<BCol cols="10" @click="radioSelected = sendTypes.link" class="pointer">
{{ $t('send_per_link') }}
</BCol>
<BCol cols="2" class="pointer">
<BFormRadio
name="shipping"
:value="sendTypes.link"
size="lg"
class="custom-radio-button"
/>
</BCol>
</BRow>
</BCol>
</BRow>
</BFormRadioGroup>
<div class="mt-4 mb-4" v-if="radioSelected === sendTypes.link">
<h2 class="alert-heading">{{ $t('gdd_per_link.header') }}</h2>
<div>
{{ $t('gdd_per_link.choose-amount') }}
</div>
</div>
<BRow>
<BForm role="form" @submit.prevent="onSubmit" @reset="onReset">
<pre>{{ radioSelected }}</pre>
<BFormRadioGroup
name="shipping"
:model-value="radioSelected"
@update:model-value="radioSelected = $event"
>
<BRow class="mb-4">
<BCol cols="12" lg="6">
<BRow class="bg-248 gradido-border-radius pt-lg-2 mr-lg-2">
<BFormRadio
name="shipping"
size="sm"
reverse
:value="SEND_TYPES.send"
class="custom-radio-button pointer"
>
{{ $t('send_gdd') }}
</BFormRadio>
</BRow>
</BCol>
<BCol>
<BRow>
<BCol class="mb-4" cols="12" v-if="radioSelected === sendTypes.send">
<BRow>
<BCol>{{ $t('form.recipientCommunity') }}</BCol>
</BRow>
<BRow>
<BCol class="font-weight-bold">
<community-switch
v-model="form.targetCommunity"
:disabled="isBalanceDisabled"
/>
</BCol>
</BRow>
</BCol>
<BCol cols="12" v-if="radioSelected === sendTypes.send">
<div v-if="!userIdentifier">
<input-identifier
:name="$t('form.recipient')"
:label="$t('form.recipient')"
:placeholder="$t('form.identifier')"
v-model="form.identifier"
:disabled="isBalanceDisabled"
@onValidation="onValidation"
/>
</div>
<div v-else class="mb-4">
<BRow>
<BCol>{{ $t('form.recipient') }}</BCol>
</BRow>
<BRow>
<BCol class="font-weight-bold">{{ userName }}</BCol>
</BRow>
</div>
</BCol>
<BCol cols="12" lg="6">
<input-amount
v-model="form.amount"
:name="$t('form.amount')"
:label="$t('form.amount')"
:placeholder="'0.01'"
:rules="{ required: true, gddSendAmount: [0.01, balance] }"
typ="TransactionForm"
:disabled="isBalanceDisabled"
></input-amount>
</BCol>
<BRow class="bg-248 gradido-border-radius pt-lg-2 ml-lg-2 mt-2 mt-lg-0">
<BFormRadio
name="shipping"
:value="SEND_TYPES.link"
size="sm"
reverse
class="custom-radio-button"
>
{{ $t('send_per_link') }}
</BFormRadio>
</BRow>
</BCol>
</BRow>
<BRow>
<BCol>
<input-textarea
v-model="form.memo"
:name="$t('form.message')"
:label="$t('form.message')"
:placeholder="$t('form.message')"
:rules="{ required: true, min: 5, max: 255 }"
:disabled="isBalanceDisabled"
/>
</BCol>
</BRow>
<div v-if="!!isBalanceDisabled" class="text-danger mt-5">
{{ $t('form.no_gdd_available') }}
</BFormRadioGroup>
<div class="mt-4 mb-4" v-if="radioSelected === SEND_TYPES.link">
<h2 class="alert-heading">{{ $t('gdd_per_link.header') }}</h2>
<div>
{{ $t('gdd_per_link.choose-amount') }}
</div>
<BRow v-else class="test-buttons mt-3">
<BCol cols="12" md="6" lg="6">
<b-button
block
type="reset"
variant="secondary"
@click="onReset"
class="mb-3 mb-md-0 mb-lg-0"
>
{{ $t('form.reset') }}
</b-button>
</BCol>
<BCol cols="12" md="6" lg="6" class="text-lg-right">
<b-button block type="submit" variant="gradido">
{{ $t('form.check_now') }}
</b-button>
</BCol>
</BRow>
</BForm>
</validation-observer>
</div>
<BRow>
<BCol>
<BRow>
<BCol class="mb-4" cols="12" v-if="radioSelected === SEND_TYPES.send">
<BRow>
<BCol>{{ $t('form.recipientCommunity') }}</BCol>
</BRow>
<BRow>
<BCol class="font-weight-bold">
<community-switch
:disabled="isBalanceDisabled"
:model-value="targetCommunity"
@update:model-value="targetCommunity = $event"
/>
<pre>{{ values }}</pre>
</BCol>
</BRow>
</BCol>
<BCol cols="12" v-if="radioSelected === SEND_TYPES.send">
<div v-if="!userIdentifier">
<input-identifier
name="identifier"
:label="$t('form.recipient')"
:placeholder="$t('form.identifier')"
:disabled="isBalanceDisabled"
/>
</div>
<div v-else class="mb-4">
<BRow>
<BCol>{{ $t('form.recipient') }}</BCol>
</BRow>
<BRow>
<BCol class="font-weight-bold">{{ userName }}</BCol>
</BRow>
</div>
</BCol>
<BCol cols="12" lg="6">
<input-amount
name="amount"
:label="$t('form.amount')"
:placeholder="'0.01'"
:rules="{ required: true, gddSendAmount: { min: 0.01, max: balance } }"
:disabled="isBalanceDisabled"
></input-amount>
</BCol>
</BRow>
</BCol>
</BRow>
<BRow>
<BCol>
<input-textarea
name="memo"
:label="$t('form.message')"
:placeholder="$t('form.message')"
:rules="{ required: true, min: 5, max: 255 }"
:disabled="isBalanceDisabled"
/>
</BCol>
</BRow>
<div v-if="!!isBalanceDisabled" class="text-danger mt-5">
{{ $t('form.no_gdd_available') }}
</div>
<BRow v-else class="test-buttons mt-3">
<BCol cols="12" md="6" lg="6">
<BButton
block
type="reset"
variant="secondary"
@click="onReset"
class="mb-3 mb-md-0 mb-lg-0"
>
{{ $t('form.reset') }}
</BButton>
</BCol>
<BCol cols="12" md="6" lg="6" class="text-lg-right">
<BButton block type="submit" variant="gradido">
{{ $t('form.check_now') }}
</BButton>
</BCol>
</BRow>
</BForm>
</BCard>
</BCol>
</BRow>
</div>
</template>
<script>
<!--<script>-->
<!--import { SEND_TYPES } from '@/pages/Send'-->
<!--import InputIdentifier from '@/components/Inputs/InputIdentifier'-->
<!--import InputAmount from '@/components/Inputs/InputAmount'-->
<!--import InputTextarea from '@/components/Inputs/InputTextarea'-->
<!--import CommunitySwitch from '@/components/CommunitySwitch.vue'-->
<!--import { user } from '@/graphql/queries'-->
<!--import CONFIG from '@/config'-->
<!--export default {-->
<!-- name: 'TransactionForm',-->
<!-- components: {-->
<!-- InputIdentifier,-->
<!-- InputAmount,-->
<!-- InputTextarea,-->
<!-- CommunitySwitch,-->
<!-- },-->
<!-- props: {-->
<!-- balance: { type: Number, default: 0 },-->
<!-- identifier: { type: String, default: '' },-->
<!-- amount: { type: Number, default: 0 },-->
<!-- memo: { type: String, default: '' },-->
<!-- selected: { type: String, default: 'send' },-->
<!-- targetCommunity: {-->
<!-- type: Object,-->
<!-- default: function () {-->
<!-- return { uuid: '', name: CONFIG.COMMUNITY_NAME }-->
<!-- },-->
<!-- },-->
<!-- },-->
<!-- data() {-->
<!-- return {-->
<!-- form: {-->
<!-- identifier: this.identifier,-->
<!-- amount: this.amount ? String(this.amount) : '',-->
<!-- memo: this.memo,-->
<!-- targetCommunity: this.targetCommunity,-->
<!-- },-->
<!-- radioSelected: this.selected,-->
<!-- userName: '',-->
<!-- recipientCommunity: { uuid: '', name: '' },-->
<!-- }-->
<!-- },-->
<!-- methods: {-->
<!-- onValidation() {-->
<!-- this.$refs.formValidator.validate()-->
<!-- },-->
<!-- onSubmit() {-->
<!-- if (this.userIdentifier) this.form.identifier = this.userIdentifier.identifier-->
<!-- this.$emit('set-transaction', {-->
<!-- selected: this.radioSelected,-->
<!-- identifier: this.form.identifier,-->
<!-- amount: Number(this.form.amount.replace(',', '.')),-->
<!-- memo: this.form.memo,-->
<!-- userName: this.userName,-->
<!-- targetCommunity: this.form.targetCommunity,-->
<!-- })-->
<!-- },-->
<!-- onReset(event) {-->
<!-- event.preventDefault()-->
<!-- this.form.identifier = ''-->
<!-- this.form.amount = ''-->
<!-- this.form.memo = ''-->
<!-- this.form.targetCommunity = { uuid: '', name: COMMUNITY_NAME }-->
<!-- this.$refs.formValidator.validate()-->
<!-- this.$router.replace('/send')-->
<!-- },-->
<!-- },-->
<!-- apollo: {-->
<!-- UserName: {-->
<!-- query() {-->
<!-- return user-->
<!-- },-->
<!-- fetchPolicy: 'network-only',-->
<!-- variables() {-->
<!-- return this.userIdentifier-->
<!-- },-->
<!-- skip() {-->
<!-- return !this.userIdentifier-->
<!-- },-->
<!-- update({ user }) {-->
<!-- this.userName = `${user.firstName} ${user.lastName}`-->
<!-- },-->
<!-- error({ message }) {-->
<!-- this.toastError(message)-->
<!-- },-->
<!-- },-->
<!-- },-->
<!-- computed: {-->
<!-- disabled() {-->
<!-- if (-->
<!-- this.form.identifier.length > 5 &&-->
<!-- parseInt(this.form.amount) <= parseInt(this.balance) &&-->
<!-- this.form.memo.length > 5 &&-->
<!-- this.form.memo.length <= 255-->
<!-- ) {-->
<!-- return false-->
<!-- }-->
<!-- return true-->
<!-- },-->
<!-- isBalanceDisabled() {-->
<!-- return this.balance <= 0 ? 'disabled' : false-->
<!-- },-->
<!-- sendTypes() {-->
<!-- return SEND_TYPES-->
<!-- },-->
<!-- userIdentifier() {-->
<!-- if (-->
<!-- this.$route.params &&-->
<!-- this.$route.params.userIdentifier &&-->
<!-- this.$route.params.communityIdentifier-->
<!-- ) {-->
<!-- return {-->
<!-- identifier: this.$route.params.userIdentifier,-->
<!-- communityIdentifier: this.$route.params.communityIdentifier,-->
<!-- }-->
<!-- }-->
<!-- return null-->
<!-- },-->
<!-- },-->
<!-- mounted() {-->
<!-- if (this.form.identifier !== '') this.$refs.formValidator.validate()-->
<!-- },-->
<!--}-->
<!--</script>-->
<script setup>
import { ref, computed, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useQuery } from '@vue/apollo-composable'
import { useForm } from 'vee-validate'
import { SEND_TYPES } from '@/pages/Send'
import InputIdentifier from '@/components/Inputs/InputIdentifier'
import InputAmount from '@/components/Inputs/InputAmount'
@ -145,123 +270,102 @@ import InputTextarea from '@/components/Inputs/InputTextarea'
import CommunitySwitch from '@/components/CommunitySwitch.vue'
import { user } from '@/graphql/queries'
import CONFIG from '@/config'
import { useAppToast } from '@/composables/useToast'
export default {
name: 'TransactionForm',
components: {
InputIdentifier,
InputAmount,
InputTextarea,
CommunitySwitch,
const props = defineProps({
balance: { type: Number, default: 0 },
identifier: { type: String, default: '' },
amount: { type: Number, default: 0 },
memo: { type: String, default: '' },
selected: { type: String, default: 'send' },
targetCommunity: {
type: Object,
default: () => ({ uuid: '', name: CONFIG.COMMUNITY_NAME }),
},
props: {
balance: { type: Number, default: 0 },
identifier: { type: String, default: '' },
amount: { type: Number, default: 0 },
memo: { type: String, default: '' },
selected: { type: String, default: 'send' },
targetCommunity: {
type: Object,
default: function () {
return { uuid: '', name: CONFIG.COMMUNITY_NAME }
},
},
})
const emit = defineEmits(['set-transaction'])
const route = useRoute()
const router = useRouter()
const { toastError } = useAppToast()
const radioSelected = ref(props.selected)
const userName = ref('')
const recipientCommunity = ref({ uuid: '', name: '' })
// Use vee-validate's useForm
const { handleSubmit, values, meta, resetForm, defineField } = useForm({
initialValues: {
identifier: props.identifier,
amount: props.amount ? String(props.amount) : '',
memo: props.memo,
targetCommunity: props.targetCommunity,
},
data() {
})
const [targetCommunity, targetCommunityProps] = defineField('targetCommunity')
const userIdentifier = computed(() => {
if (route.params.userIdentifier && route.params.communityIdentifier) {
return {
form: {
identifier: this.identifier,
amount: this.amount ? String(this.amount) : '',
memo: this.memo,
targetCommunity: this.targetCommunity,
},
radioSelected: this.selected,
userName: '',
recipientCommunity: { uuid: '', name: '' },
identifier: route.params.userIdentifier,
communityIdentifier: route.params.communityIdentifier,
}
}
return null
})
const isBalanceDisabled = computed(() => props.balance <= 0)
const { result: userResult, error: userError } = useQuery(
user,
() => userIdentifier.value,
() => ({ enabled: !!userIdentifier.value }),
)
watch(
() => userResult.value?.user,
(user) => {
if (user) {
userName.value = `${user.firstName} ${user.lastName}`
}
},
methods: {
onValidation() {
this.$refs.formValidator.validate()
},
onSubmit() {
if (this.userIdentifier) this.form.identifier = this.userIdentifier.identifier
this.$emit('set-transaction', {
selected: this.radioSelected,
identifier: this.form.identifier,
amount: Number(this.form.amount.replace(',', '.')),
memo: this.form.memo,
userName: this.userName,
targetCommunity: this.form.targetCommunity,
})
},
onReset(event) {
event.preventDefault()
this.form.identifier = ''
this.form.amount = ''
this.form.memo = ''
this.form.targetCommunity = { uuid: '', name: COMMUNITY_NAME }
this.$refs.formValidator.validate()
this.$router.replace('/send')
},
},
apollo: {
UserName: {
query() {
return user
},
fetchPolicy: 'network-only',
variables() {
return this.userIdentifier
},
skip() {
return !this.userIdentifier
},
update({ user }) {
this.userName = `${user.firstName} ${user.lastName}`
},
error({ message }) {
this.toastError(message)
},
},
},
computed: {
disabled() {
if (
this.form.identifier.length > 5 &&
parseInt(this.form.amount) <= parseInt(this.balance) &&
this.form.memo.length > 5 &&
this.form.memo.length <= 255
) {
return false
}
return true
},
isBalanceDisabled() {
return this.balance <= 0 ? 'disabled' : false
},
sendTypes() {
return SEND_TYPES
},
userIdentifier() {
if (
this.$route.params &&
this.$route.params.userIdentifier &&
this.$route.params.communityIdentifier
) {
return {
identifier: this.$route.params.userIdentifier,
communityIdentifier: this.$route.params.communityIdentifier,
}
}
return null
},
},
mounted() {
if (this.form.identifier !== '') this.$refs.formValidator.validate()
},
{ immediate: true },
)
watch(userError, (error) => {
if (error) {
toastError(error.message)
}
})
const onSubmit = handleSubmit((formValues) => {
console.log('????')
if (userIdentifier.value) formValues.identifier = userIdentifier.value.identifier
emit('set-transaction', {
selected: radioSelected.value,
...formValues,
amount: Number(formValues.amount.replace(',', '.')),
userName: userName.value,
})
})
function onReset(event) {
event.preventDefault()
resetForm()
radioSelected.value = SEND_TYPES.send
router.replace('/send')
}
// Expose necessary methods and computed properties
// defineExpose({
// sendTypes: SEND_TYPES,
// handleSubmit: onSubmit,
// onReset,
// })
</script>
<style>
span.errors {
color: red;

4
frontend/src/components/GddSend/TransactionResultLink.vue
View File

@ -11,9 +11,9 @@
<div class="text-center">
<div><figure-qr-code :link="link" /></div>
<div>
<b-button variant="secondary" @click="$emit('on-back')" class="mt-4" data-test="close-btn">
<BButton variant="secondary" @click="$emit('on-back')" class="mt-4" data-test="close-btn">
{{ $t('form.close') }}
</b-button>
</BButton>
</div>
</div>
</div>

4
frontend/src/components/GddSend/TransactionResultSendError.vue
View File

@ -19,9 +19,9 @@
<div v-else>{{ errorResult }}</div>
</div>
<p class="text-center mt-5">
<b-button variant="secondary" @click="$emit('on-back')">
<BButton variant="secondary" @click="$emit('on-back')">
{{ $t('form.close') }}
</b-button>
</BButton>
</p>
</div>
</template>

6
frontend/src/components/GddTransactionList.vue
View File

@ -2,13 +2,15 @@
<div class="gdd-transaction-list">
<div class="list-group">
<div v-if="!transactions" class="test-no-transactionlist text-right">
<b-icon icon="exclamation-triangle" class="mr-2" variant="danger"></b-icon>
<!-- <b-icon icon="exclamation-triangle" class="mr-2" variant="danger"></b-icon>-->
<IBiExclamationTriangle class="mr-2" />
<small>
{{ $t('error.no-transactionlist') }}
</small>
</div>
<div v-if="transactionCount < 0" class="test-empty-transactionlist text-right">
<b-icon icon="exclamation-triangle" class="mr-2" variant="danger"></b-icon>
<!-- <b-icon icon="exclamation-triangle" class="mr-2" variant="danger"></b-icon>-->
<IBiExclamationTriangle class="mr-2" />
<small>{{ $t('error.empty-transactionlist') }}</small>
</div>

6
frontend/src/components/GdtTransactionList.vue
View File

@ -24,7 +24,7 @@
:factor="factor"
:gdt="gdt"
:id="id"
></transaction>
/>
</div>
</div>
<BPagination
@ -56,7 +56,7 @@ export default {
},
transactionGdtCount: { type: Number, required: true },
pageSize: { type: Number, required: true },
value: { type: Number, required: true },
modelValue: { type: Number, required: true },
},
data() {
return {
@ -66,7 +66,7 @@ export default {
},
watch: {
currentPage() {
if (this.value !== this.currentPage) this.$emit('input', this.currentPage)
if (this.modelValue !== this.currentPage) this.$emit('input', this.currentPage)
},
},
}

203
frontend/src/components/Inputs/InputAmount.vue
View File

@ -1,38 +1,41 @@
<template>
<div class="input-amount">
<validation-provider
v-if="typ === 'TransactionForm'"
tag="div"
:rules="rules"
:name="name"
v-slot="{ errors, valid, validated, ariaInput, ariaMsg }"
>
<b-form-group :label="label" :label-for="labelFor" data-test="input-amount">
<b-form-input
v-model="currentValue"
v-bind="ariaInput"
<!-- <validation-provider-->
<!-- v-if="typ === 'TransactionForm'"-->
<!-- tag="div"-->
<!-- :rules="rules"-->
<!-- :name="name"-->
<!-- v-slot="{ errors, valid, validated, ariaInput, ariaMsg }"-->
<!-- >-->
<template v-if="typ === 'TransactionForm'">
<BFormGroup :label="label" :label-for="labelFor" data-test="input-amount">
<BFormInput
:model-value="value"
@update:model-value="normalizeAmount($event)"
:id="labelFor"
:class="$route.path === '/send' ? 'bg-248' : ''"
:name="name"
:placeholder="placeholder"
type="text"
:state="validated ? valid : false"
:state="meta.valid"
trim
v-focus="amountFocused"
@focus="amountFocused = true"
@blur="normalizeAmount(valid)"
@blur="normalizeAmount($event)"
:disabled="disabled"
autocomplete="off"
></b-form-input>
></BFormInput>
<b-form-invalid-feedback v-bind="ariaMsg">
{{ errors[0] }}
</b-form-invalid-feedback>
</b-form-group>
</validation-provider>
<b-input-group v-else append="GDD" :label="label" :label-for="labelFor">
<b-form-input
v-model="currentValue"
<BFormInvalidFeedback v-if="errorMessage">
{{ errorMessage }}
</BFormInvalidFeedback>
</BFormGroup>
</template>
<!-- </validation-provider>-->
<BInputGroup v-else append="GDD" :label="label" :label-for="labelFor">
<BFormInput
:model-value="value"
@update:model-value="normalizeAmount($event)"
:id="labelFor"
:name="name"
:placeholder="placeholder"
@ -41,57 +44,117 @@
trim
v-focus="amountFocused"
@focus="amountFocused = true"
@blur="normalizeAmount(valid)"
></b-form-input>
</b-input-group>
@blur="normalizeAmount($event)"
></BFormInput>
</BInputGroup>
<pre>{{ value }}</pre>
</div>
</template>
<script>
export default {
name: 'InputAmount',
props: {
rules: {
type: Object,
default: () => {},
},
typ: { type: String, default: 'TransactionForm' },
name: { type: String, required: true, default: 'Amount' },
label: { type: String, required: true, default: 'Amount' },
placeholder: { type: String, required: true, default: 'Amount' },
value: { type: String, required: true },
balance: { type: Number, default: 0.0 },
disabled: { required: false, type: Boolean, default: false },
<!--<script>-->
<!--export default {-->
<!-- name: 'InputAmount',-->
<!-- props: {-->
<!-- rules: {-->
<!-- type: Object,-->
<!-- default: () => {},-->
<!-- },-->
<!-- typ: { type: String, default: 'TransactionForm' },-->
<!-- name: { type: String, required: true, default: 'Amount' },-->
<!-- label: { type: String, required: true, default: 'Amount' },-->
<!-- placeholder: { type: String, required: true, default: 'Amount' },-->
<!-- value: { type: String, required: true },-->
<!-- balance: { type: Number, default: 0.0 },-->
<!-- disabled: { required: false, type: Boolean, default: false },-->
<!-- },-->
<!-- data() {-->
<!-- return {-->
<!-- currentValue: this.value,-->
<!-- amountValue: 0.0,-->
<!-- amountFocused: false,-->
<!-- }-->
<!-- },-->
<!-- computed: {-->
<!-- errorMessages() {-->
<!-- return errorMessages-->
<!-- },-->
<!-- labelFor() {-->
<!-- return this.name + '-input-field'-->
<!-- },-->
<!-- },-->
<!-- watch: {-->
<!-- currentValue() {-->
<!-- this.$emit('input', this.currentValue)-->
<!-- },-->
<!-- value() {-->
<!-- if (this.value !== this.currentValue) this.currentValue = this.value-->
<!-- },-->
<!-- },-->
<!-- methods: {-->
<!-- normalizeAmount(isValid) {-->
<!-- this.amountFocused = false-->
<!-- if (!isValid) return-->
<!-- this.amountValue = this.currentValue.replace(',', '.')-->
<!-- this.currentValue = this.$n(this.amountValue, 'ungroupedDecimal')-->
<!-- },-->
<!-- },-->
<!-- mounted() {-->
<!-- if (this.value !== '') this.normalizeAmount(true)-->
<!-- },-->
<!--}-->
<!--</script>-->
<script setup>
import { ref, computed, watch } from 'vue'
import { useField } from 'vee-validate'
import { useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
const props = defineProps({
rules: {
type: Object,
default: () => ({}),
},
data() {
return {
currentValue: this.value,
amountValue: 0.0,
amountFocused: false,
}
},
computed: {
labelFor() {
return this.name + '-input-field'
},
},
watch: {
currentValue() {
this.$emit('input', this.currentValue)
},
value() {
if (this.value !== this.currentValue) this.currentValue = this.value
},
},
methods: {
normalizeAmount(isValid) {
this.amountFocused = false
if (!isValid) return
this.amountValue = this.currentValue.replace(',', '.')
this.currentValue = this.$n(this.amountValue, 'ungroupedDecimal')
},
},
mounted() {
if (this.value !== '') this.normalizeAmount(true)
typ: { type: String, default: 'TransactionForm' },
name: { type: String, required: true, default: 'Amount' },
label: { type: String, required: true, default: 'Amount' },
placeholder: { type: String, required: true, default: 'Amount' },
balance: { type: Number, default: 0.0 },
disabled: { required: false, type: Boolean, default: false },
})
const emit = defineEmits(['update:modelValue'])
const route = useRoute()
const { n } = useI18n()
const { value, meta, errorMessage } = useField(props.name, props.rules)
const amountFocused = ref(false)
const amountValue = ref(0.0)
const labelFor = computed(() => props.name + '-input-field')
watch(value, (newValue) => {
emit('update:modelValue', newValue)
})
watch(
() => props.modelValue,
(newValue) => {
if (newValue !== value.value) value.value = newValue
},
)
const normalizeAmount = (inputValue) => {
const oldValue = value.value
const amountPattern = /^\d+([,.]\d{1,2})?$/
amountFocused.value = false
// if (!meta.valid) return
// if (!amountPattern.test(inputValue)) {
// value.value = oldValue
// } else {
value.value = inputValue.replace(',', '.')
// }
}
</script>

117
frontend/src/components/Inputs/InputIdentifier.vue
View File

@ -1,68 +1,61 @@
<template>
<validation-provider
tag="div"
:rules="rules"
:name="name"
v-slot="{ errors, valid, validated, ariaInput, ariaMsg }"
>
<b-form-group :label="label" :label-for="labelFor" data-test="input-identifier">
<b-form-input
v-model="currentValue"
v-bind="ariaInput"
:id="labelFor"
:name="name"
:placeholder="placeholder"
type="text"
:state="validated ? valid : false"
trim
class="bg-248"
:disabled="disabled"
autocomplete="off"
></b-form-input>
<b-form-invalid-feedback v-bind="ariaMsg">
{{ errors[0] }}
</b-form-invalid-feedback>
</b-form-group>
</validation-provider>
<BFormGroup :label="label" :label-for="labelFor" data-test="input-identifier">
<BFormInput
:model-value="value"
@update:model-value="value = $event"
:id="labelFor"
:name="name"
:placeholder="placeholder"
type="text"
:state="meta.valid"
trim
class="bg-248"
:disabled="disabled"
autocomplete="off"
/>
<BFormInvalidFeedback v-if="errorMessage">
{{ errorMessage }}
</BFormInvalidFeedback>
</BFormGroup>
</template>
<script>
export default {
name: 'InputEmail',
props: {
rules: {
default: () => {
return {
required: true,
validIdentifier: true,
}
},
},
name: { type: String, required: true },
label: { type: String, required: true },
placeholder: { type: String, required: true },
value: { type: String, required: true },
disabled: { type: Boolean, required: false, default: false },
<script setup>
import { computed, watch } from 'vue'
import { useField } from 'vee-validate'
const props = defineProps({
rules: {
type: Object,
default: () => ({
required: true,
validIdentifier: true,
}),
},
data() {
return {
currentValue: this.value,
name: { type: String, required: true },
label: { type: String, required: true },
placeholder: { type: String, required: true },
modelValue: { type: String },
disabled: { type: Boolean, required: false, default: false },
})
const emit = defineEmits(['update:modelValue', 'onValidation'])
const { value, meta, errorMessage } = useField(props.name, props.rules, {
initialValue: props.modelValue,
})
const labelFor = computed(() => props.name + '-input-field')
watch(value, (newValue) => {
emit('update:modelValue', newValue)
})
watch(
() => props.modelValue,
(newValue) => {
if (newValue !== value.value) {
value.value = newValue
emit('onValidation')
}
},
computed: {
labelFor() {
return this.name + '-input-field'
},
},
watch: {
currentValue() {
this.$emit('input', this.currentValue)
},
value() {
if (this.value !== this.currentValue) {
this.currentValue = this.value
}
this.$emit('onValidation')
},
},
}
)
</script>

16
frontend/src/components/Inputs/InputPasswordConfirmation.vue
View File

@ -1,7 +1,7 @@
<template>
<div>
<b-row class="mb-2">
<b-col>
<BRow class="mb-2">
<BCol>
<input-password
:rules="{
required: true,
@ -20,10 +20,10 @@
:placeholder="register ? $t('form.password') : $t('form.password_new')"
v-model="password"
></input-password>
</b-col>
</b-row>
<b-row class="mb-2">
<b-col>
</BCol>
</BRow>
<BRow class="mb-2">
<BCol>
<input-password
:rules="{
required: true,
@ -36,8 +36,8 @@
:placeholder="register ? $t('form.passwordRepeat') : $t('form.password_new_repeat')"
v-model="passwordRepeat"
></input-password>
</b-col>
</b-row>
</BCol>
</BRow>
</div>
</template>
<script>

96
frontend/src/components/Inputs/InputTextarea.vue
View File

@ -1,36 +1,9 @@
<template>
<!-- <validation-provider-->
<!-- tag="div"-->
<!-- :rules="rules"-->
<!-- :name="name"-->
<!-- v-slot="{ errors, valid, validated, ariaInput, ariaMsg }"-->
<!-- >-->
<!-- <b-form-group :label="label" :label-for="labelFor" data-test="input-textarea">-->
<!-- <b-form-textarea-->
<!-- v-model="currentValue"-->
<!-- v-bind="ariaInput"-->
<!-- :id="labelFor"-->
<!-- class="bg-248"-->
<!-- :name="name"-->
<!-- :placeholder="placeholder"-->
<!-- :state="validated ? valid : false"-->
<!-- trim-->
<!-- rows="4"-->
<!-- max-rows="4"-->
<!-- :disabled="disabled"-->
<!-- no-resize-->
<!-- ></b-form-textarea>-->
<!-- <b-form-invalid-feedback v-bind="ariaMsg">-->
<!-- {{ errors[0] }}-->
<!-- </b-form-invalid-feedback>-->
<!-- </b-form-group>-->
<!-- </validation-provider>-->
<div>
<BFormGroup :label="label" :label-for="labelFor" data-test="input-textarea">
<BFormTextarea
:model-value="currentValue"
@update:modelValue="currentValue = $event"
v-bind="ariaInput"
:id="labelFor"
class="bg-248"
:name="name"
@ -41,53 +14,18 @@
max-rows="4"
:disabled="disabled"
no-resize
></BFormTextarea>
<BFormInvalidFeedback v-bind="ariaMsg">
/>
<BFormInvalidFeedback v-if="errorMessage">
{{ errorMessage }}
</BFormInvalidFeedback>
</BFormGroup>
</div>
</template>
<!--<script>-->
<!--export default {-->
<!-- name: 'InputTextarea',-->
<!-- props: {-->
<!-- rules: {-->
<!-- type: Object,-->
<!-- default: () => {},-->
<!-- },-->
<!-- name: { type: String, required: true },-->
<!-- label: { type: String, required: true },-->
<!-- placeholder: { type: String, required: true },-->
<!-- value: { type: String, required: true },-->
<!-- disabled: { required: false, type: Boolean, default: false },-->
<!-- },-->
<!-- data() {-->
<!-- return {-->
<!-- currentValue: this.value,-->
<!-- }-->
<!-- },-->
<!-- computed: {-->
<!-- labelFor() {-->
<!-- return this.name + '-input-field'-->
<!-- },-->
<!-- },-->
<!-- watch: {-->
<!-- currentValue() {-->
<!-- this.$emit('input', this.currentValue)-->
<!-- },-->
<!-- value() {-->
<!-- if (this.value !== this.currentValue) this.currentValue = this.value-->
<!-- },-->
<!-- },-->
<!--}-->
<!--</script>-->
<script setup>
import { ref, computed, watch } from 'vue'
import { computed } from 'vue'
import { useField } from 'vee-validate'
// Props
const props = defineProps({
rules: {
type: Object,
@ -105,39 +43,13 @@ const props = defineProps({
type: String,
required: true,
},
modelValue: {
type: String,
required: true,
},
disabled: {
type: Boolean,
default: false,
},
})
// Emits
const emit = defineEmits(['update:modelValue'])
const { value: currentValue, errorMessage, meta } = useField(props.name, props.rules)
// Use vee-validate's useField
const { value: currentValue, errorMessage, meta } = useField(props.name, props.rules, {
initialValue: props.modelValue,
})
// Computed
const labelFor = computed(() => `${props.name}-input-field`)
// Watch for external value changes
watch(
() => props.modelValue,
(newValue) => {
if (newValue !== currentValue.value) {
currentValue.value = newValue
}
},
)
// Watch for internal value changes
watch(currentValue, (newValue) => {
emit('update:modelValue', newValue)
})
</script>

4
frontend/src/components/LinkInformations/RedeemInformation.vue
View File

@ -4,11 +4,11 @@
<h1 v-if="amount === ''">{{ $t('gdd_per_link.redeemlink-error') }}</h1>
<h1 v-if="isContributionLink && amount !== ''">
{{ CONFIG.COMMUNITY_NAME }}
{{ $t('contribution-link.thanksYouWith') }} {{ amount | GDD }}
{{ $t('contribution-link.thanksYouWith') }} {{ $filters.GDD(amount) }}
</h1>
<h1 v-if="!isContributionLink && amount !== ''">
{{ user.firstName }}
{{ $t('transaction-link.send_you') }} {{ amount | GDD }}
{{ $t('transaction-link.send_you') }} {{ $filters.GDD(amount) }}
</h1>
<b>{{ memo }}</b>
</b-jumbotron>

12
frontend/src/components/LinkInformations/RedeemLoggedOut.vue
View File

@ -7,18 +7,18 @@
<h2>{{ $t('gdd_per_link.redeem') }}</h2>
</div>
<b-row>
<b-col sm="12" md="6">
<BRow>
<BCol sm="12" md="6">
<p>{{ $t('gdd_per_link.no-account') }}</p>
<b-button variant="primary" :to="register">
{{ $t('gdd_per_link.to-register') }}
</b-button>
</b-col>
<b-col sm="12" md="6" class="mt-4 mt-lg-0">
</BCol>
<BCol sm="12" md="6" class="mt-4 mt-lg-0">
<p>{{ $t('gdd_per_link.has-account') }}</p>
<b-button variant="gradido" :to="login">{{ $t('gdd_per_link.to-login') }}</b-button>
</b-col>
</b-row>
</BCol>
</BRow>
</b-jumbotron>
</div>
</template>

1
frontend/src/components/Menu/Sidebar.vue
View File

@ -92,6 +92,7 @@ export default {
return 'mb-3'
},
isHumhub() {
// return true
return CONFIG.HUMHUB_ACTIVE === 'true'
},
isGMS() {

4
frontend/src/components/SessionLogoutTimeout.vue
View File

@ -128,6 +128,10 @@ const tokenExpiresInSeconds = computed(() => {
return remainingSecs <= 0 ? 0 : remainingSecs
})
const handleOk = async () => {
console.log('OK')
}
// const tokenExpires = () => {
// now.value = new Date().getTime()
// if (tokenExpiresInSeconds.value < 75 && timer.value.tokenExpires.time !== 1000) {

3
frontend/src/components/Template/ContentHeader/GddAmount.vue
View File

@ -33,8 +33,7 @@
{{ $t('asterisks') }}
</span>
<span v-else class="font-weight-bold gradido-global-color-accent">
<!-- {{ balance | GDD }}-->
{{ 'test' }}
{{ $filters.GDD(balance) }}
</span>
</BCol>
<BCol cols="3" class="border-left border-light">

10
frontend/src/components/Template/RightSide/LastContributions.vue
View File

@ -1,11 +1,11 @@
<template>
<div class="last-contributions d-none d-lg-block">
<b-row class="mb-5">
<b-col class="h3">{{ $t('contribution.lastContribution') }}</b-col>
<b-col cols="1" class="text-right">
<BRow class="mb-5">
<BCol class="h3">{{ $t('contribution.lastContribution') }}</BCol>
<BCol cols="1" class="text-right">
<b-icon icon="three-dots-vertical"></b-icon>
</b-col>
</b-row>
</BCol>
</BRow>
</div>
</template>
<script>

2
frontend/src/components/Template/RightSide/LastTransactions.vue
View File

@ -36,7 +36,7 @@
</div>
<div class="d-flex mt-3">
<div class="small">
{{ transaction.amount | GDD }}
{{ $filters.GDD(transaction.amount) }}
</div>
<div class="small ml-3 text-right">
{{ $d(new Date(transaction.balanceDate), 'short') }}

253
frontend/src/components/Transaction.vue
View File

@ -8,7 +8,7 @@
variant="light"
size="3em"
:class="getLinesByType.iconclasses"
></BAvatar>
/>
</BCol>
<BCol>
<!-- <div>
@ -45,90 +45,181 @@
</div>
</div>
</template>
<script>
<!--<script>-->
<!--import CollapseIcon from './TransactionRows/CollapseIcon'-->
<!--import TransactionCollapse from './TransactionCollapse'-->
<!--import { GdtEntryType } from '../graphql/enums'-->
<!--export default {-->
<!-- name: 'Transaction',-->
<!-- components: {-->
<!-- CollapseIcon,-->
<!-- TransactionCollapse,-->
<!-- },-->
<!-- props: {-->
<!-- amount: { type: Number },-->
<!-- date: { type: String },-->
<!-- comment: { type: String },-->
<!-- gdtEntryType: { type: String, default: GdtEntryType.FORM },-->
<!-- factor: { type: Number },-->
<!-- gdt: { type: Number },-->
<!-- id: { type: Number },-->
<!-- },-->
<!-- data() {-->
<!-- return {-->
<!-- collapseStatus: [],-->
<!-- visible: false,-->
<!-- }-->
<!-- },-->
<!-- methods: {-->
<!-- getCollapseState(id) {-->
<!-- return this.collapseStatus.includes('gdt-collapse-' + id)-->
<!-- },-->
<!-- },-->
<!-- computed: {-->
<!-- collapseId() {-->
<!-- return 'gdt-collapse-' + String(this.id)-->
<!-- },-->
<!-- isGlobalModificator() {-->
<!-- return this.gdtEntryType === GdtEntryType.GLOBAL_MODIFICATOR-->
<!-- },-->
<!-- getLinesByType() {-->
<!-- switch (this.gdtEntryType) {-->
<!-- case GdtEntryType.FORM:-->
<!-- case GdtEntryType.CVS:-->
<!-- case GdtEntryType.ELOPAGE:-->
<!-- case GdtEntryType.DIGISTORE:-->
<!-- case GdtEntryType.CVS2: {-->
<!-- return {-->
<!-- icon: 'heart',-->
<!-- iconclasses: 'gradido-global-color-accent',-->
<!-- description: this.$t('gdt.contribution'),-->
<!-- descriptiontext: this.$n(this.amount, 'decimal') + ' €',-->
<!-- credittext: this.$n(this.gdt, 'decimal') + ' GDT',-->
<!-- }-->
<!-- }-->
<!-- case GdtEntryType.ELOPAGE_PUBLISHER: {-->
<!-- return {-->
<!-- icon: 'person-check',-->
<!-- iconclasses: 'gradido-global-color-accent',-->
<!-- description: this.$t('gdt.recruited-member'),-->
<!-- descriptiontext: '5%',-->
<!-- credittext: this.$n(this.amount, 'decimal') + ' GDT',-->
<!-- }-->
<!-- }-->
<!-- case GdtEntryType.GLOBAL_MODIFICATOR: {-->
<!-- return {-->
<!-- icon: 'gift',-->
<!-- iconclasses: 'gradido-global-color-accent',-->
<!-- description: this.$t('gdt.gdt-received'),-->
<!-- descriptiontext: this.comment,-->
<!-- credittext: this.$n(this.gdt, 'decimal') + ' GDT',-->
<!-- }-->
<!-- }-->
<!-- default:-->
<!-- throw new Error('no lines for this type: ' + this.gdtEntryType)-->
<!-- }-->
<!-- },-->
<!-- },-->
<!-- mounted() {-->
<!-- this.$root.$on('bv::collapse::state', (collapseId, isJustShown) => {-->
<!-- if (isJustShown) {-->
<!-- this.collapseStatus.push(collapseId)-->
<!-- } else {-->
<!-- this.collapseStatus = this.collapseStatus.filter((id) => id !== collapseId)-->
<!-- }-->
<!-- })-->
<!-- },-->
<!--}-->
<!--</script>-->
<script setup>
import { ref, computed, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import CollapseIcon from './TransactionRows/CollapseIcon'
import TransactionCollapse from './TransactionCollapse'
import { GdtEntryType } from '../graphql/enums'
export default {
name: 'Transaction',
components: {
CollapseIcon,
TransactionCollapse,
},
props: {
amount: { type: Number },
date: { type: String },
comment: { type: String },
gdtEntryType: { type: String, default: GdtEntryType.FORM },
factor: { type: Number },
gdt: { type: Number },
id: { type: Number },
},
data() {
return {
collapseStatus: [],
visible: false,
}
},
methods: {
getCollapseState(id) {
return this.collapseStatus.includes('gdt-collapse-' + id)
},
},
computed: {
collapseId() {
return 'gdt-collapse-' + String(this.id)
},
isGlobalModificator() {
return this.gdtEntryType === GdtEntryType.GLOBAL_MODIFICATOR
},
getLinesByType() {
switch (this.gdtEntryType) {
case GdtEntryType.FORM:
case GdtEntryType.CVS:
case GdtEntryType.ELOPAGE:
case GdtEntryType.DIGISTORE:
case GdtEntryType.CVS2: {
return {
icon: 'heart',
iconclasses: 'gradido-global-color-accent',
description: this.$t('gdt.contribution'),
descriptiontext: this.$n(this.amount, 'decimal') + ' €',
credittext: this.$n(this.gdt, 'decimal') + ' GDT',
}
}
case GdtEntryType.ELOPAGE_PUBLISHER: {
return {
icon: 'person-check',
iconclasses: 'gradido-global-color-accent',
description: this.$t('gdt.recruited-member'),
descriptiontext: '5%',
credittext: this.$n(this.amount, 'decimal') + ' GDT',
}
}
case GdtEntryType.GLOBAL_MODIFICATOR: {
return {
icon: 'gift',
iconclasses: 'gradido-global-color-accent',
description: this.$t('gdt.gdt-received'),
descriptiontext: this.comment,
credittext: this.$n(this.gdt, 'decimal') + ' GDT',
}
}
default:
throw new Error('no lines for this type: ' + this.gdtEntryType)
}
},
},
mounted() {
this.$root.$on('bv::collapse::state', (collapseId, isJustShown) => {
if (isJustShown) {
this.collapseStatus.push(collapseId)
} else {
this.collapseStatus = this.collapseStatus.filter((id) => id !== collapseId)
}
})
// Props
const props = defineProps({
amount: Number,
date: String,
comment: String,
gdtEntryType: {
type: String,
default: GdtEntryType.FORM,
},
factor: Number,
gdt: Number,
id: Number,
})
// Reactive state
const collapseStatus = ref([])
const visible = ref(false)
// Composables
const { t, n } = useI18n()
// Methods
const getCollapseState = (id) => {
return collapseStatus.value.includes('gdt-collapse-' + id)
}
// Computed properties
const collapseId = computed(() => 'gdt-collapse-' + String(props.id))
const isGlobalModificator = computed(() => props.gdtEntryType === GdtEntryType.GLOBAL_MODIFICATOR)
const getLinesByType = computed(() => {
switch (props.gdtEntryType) {
case GdtEntryType.FORM:
case GdtEntryType.CVS:
case GdtEntryType.ELOPAGE:
case GdtEntryType.DIGISTORE:
case GdtEntryType.CVS2: {
return {
icon: 'heart',
iconclasses: 'gradido-global-color-accent',
description: t('gdt.contribution'),
descriptiontext: n(props.amount, 'decimal') + ' €',
credittext: n(props.gdt, 'decimal') + ' GDT',
}
}
case GdtEntryType.ELOPAGE_PUBLISHER: {
return {
icon: 'person-check',
iconclasses: 'gradido-global-color-accent',
description: t('gdt.recruited-member'),
descriptiontext: '5%',
credittext: n(props.amount, 'decimal') + ' GDT',
}
}
case GdtEntryType.GLOBAL_MODIFICATOR: {
return {
icon: 'gift',
iconclasses: 'gradido-global-color-accent',
description: t('gdt.gdt-received'),
descriptiontext: props.comment,
credittext: n(props.gdt, 'decimal') + ' GDT',
}
}
default:
throw new Error('no lines for this type: ' + props.gdtEntryType)
}
})
// Lifecycle hooks
onMounted(() => {
// Note: This event listener setup might need to be adjusted for Vue 3
// You might want to use provide/inject or a global event bus instead
const root = getCurrentInstance().appContext.config.globalProperties
root.$on('bv::collapse::state', (collapseId, isJustShown) => {
if (isJustShown) {
collapseStatus.value.push(collapseId)
} else {
collapseStatus.value = collapseStatus.value.filter((id) => id !== collapseId)
}
})
})
</script>

2
frontend/src/components/TransactionCollapse.vue
View File

@ -20,7 +20,7 @@
</div>
</template>
<script>
import { GdtEntryType } from '../graphql/enums'
import { GdtEntryType } from '@/graphql/enums'
export default {
name: 'TransactionCollapse',

232
frontend/src/components/TransactionLinks/TransactionLink.vue
View File

@ -1,74 +1,131 @@
<template>
<div class="transaction-link gradido-custom-background">
<b-row :class="validLink ? '' : 'bg-muted text-light'" class="mb-2 pt-2 pb-2">
<b-col cols="1">
<BRow :class="validLink ? '' : 'bg-muted text-light'" class="mb-2 pt-2 pb-2">
<BCol cols="1">
<type-icon color="text-danger" icon="link45deg" class="pt-4 pl-2" />
</b-col>
<b-col cols="11">
<b-row>
<b-col>
</BCol>
<BCol cols="11">
<BRow>
<BCol>
<amount-and-name-row :amount="amount" :text="$t('form.amount')" />
<memo-row :memo="memo" />
<date-row :date="validUntil" :diffNow="true" :validLink="validLink" />
<decay-row :decay="decay" />
</b-col>
<b-col cols="12" lg="1" md="1" class="text-center text-md-right pr-5 pr-lg-4">
<b-dropdown no-caret right aria-expanded="false" size="sm">
</BCol>
<BCol cols="12" lg="1" md="1" class="text-center text-md-right pr-5 pr-lg-4">
<BDropdown no-caret right aria-expanded="false" size="sm">
<template #button-content>
<b-icon icon="three-dots-vertical"></b-icon>
<IBiThreeDotsVertical />
</template>
<b-dropdown-item v-if="validLink" class="test-copy-link" @click="copyLink">
<b-icon icon="clipboard"></b-icon>
<BDropdownItem v-if="validLink" class="test-copy-link" @click="copyLink">
<IBiClipboard />
{{ $t('gdd_per_link.copy-link') }}
</b-dropdown-item>
<b-dropdown-item
v-if="validLink"
class="test-copy-text pt-3"
@click="copyLinkWithText"
>
<b-icon icon="clipboard-plus"></b-icon>
</BDropdownItem>
<BDropdownItem v-if="validLink" class="test-copy-text pt-3" @click="copyLinkWithText">
<IBiClipboardPlus />
{{ $t('gdd_per_link.copy-link-with-text') }}
</b-dropdown-item>
<b-dropdown-item
</BDropdownItem>
<BDropdownItem
v-if="validLink"
@click="$bvModal.show('modalPopover-' + id)"
class="pt-3 pb-3 test-qr-code"
>
<b-img src="img/svg/qr-code.svg" width="18" class="filter"></b-img>
{{ $t('qrCode') }}
</b-dropdown-item>
<b-dropdown-item class="test-delete-link" @click="deleteLink()">
<b-icon icon="trash"></b-icon>
</BDropdownItem>
<BDropdownItem class="test-delete-link" @click="deleteLink()">
<IBiTrash />
{{ $t('delete') }}
</b-dropdown-item>
</b-dropdown>
</b-col>
</b-row>
</b-col>
</b-row>
<b-modal :id="'modalPopover-' + id" ok-only hide-header-close>
<b-card header-tag="header" footer-tag="footer">
</BDropdownItem>
</BDropdown>
</BCol>
</BRow>
</BCol>
</BRow>
<BModal :id="'modalPopover-' + id" ok-only hide-header-close>
<BCard header-tag="header" footer-tag="footer">
<template #header>
<h6 class="mb-0">{{ $t('qrCode') }}</h6>
</template>
<b-card-text><figure-qr-code class="text-center" :link="link" /></b-card-text>
<BCardText><figure-qr-code class="text-center" :link="link" /></BCardText>
<template #footer>
<em>{{ link }}</em>
</template>
</b-card>
</b-modal>
<b-modal :id="'modalPopoverCopyError' + id" ok-only hide-header-close>
<b-card header-tag="header" footer-tag="footer">
<b-card-text>
</BCard>
</BModal>
<BModal :id="'modalPopoverCopyError' + id" ok-only hide-header-close>
<BCard header-tag="header" footer-tag="footer">
<BCardText>
<div class="alert-danger p-3">{{ $t('gdd_per_link.not-copied') }}</div>
<div class="alert-muted h3 p-3">{{ link }}</div>
</b-card-text>
</b-card>
</b-modal>
</BCardText>
</BCard>
</BModal>
</div>
</template>
<script>
<!--<script>-->
<!--import { deleteTransactionLink } from '@/graphql/mutations'-->
<!--import TypeIcon from '../TransactionRows/TypeIcon'-->
<!--import AmountAndNameRow from '../TransactionRows/AmountAndNameRow'-->
<!--import MemoRow from '../TransactionRows/MemoRow'-->
<!--import DateRow from '../TransactionRows/DateRow'-->
<!--import DecayRow from '../TransactionRows/DecayRow'-->
<!--import FigureQrCode from '@/components/QrCode/FigureQrCode'-->
<!--import { copyLinks } from '../../mixins/copyLinks'-->
<!--export default {-->
<!-- name: 'TransactionLink',-->
<!-- mixins: [copyLinks],-->
<!-- components: {-->
<!-- TypeIcon,-->
<!-- AmountAndNameRow,-->
<!-- MemoRow,-->
<!-- DateRow,-->
<!-- DecayRow,-->
<!-- FigureQrCode,-->
<!-- },-->
<!-- props: {-->
<!-- holdAvailableAmount: { type: String, required: true },-->
<!-- id: { type: Number, required: true },-->
<!-- },-->
<!-- methods: {-->
<!-- deleteLink() {-->
<!-- this.$bvModal.msgBoxConfirm(this.$t('gdd_per_link.delete-the-link')).then(async (value) => {-->
<!-- if (value)-->
<!-- await this.$apollo-->
<!-- .mutate({-->
<!-- mutation: deleteTransactionLink,-->
<!-- variables: {-->
<!-- id: this.id,-->
<!-- },-->
<!-- })-->
<!-- .then(() => {-->
<!-- this.toastSuccess(this.$t('gdd_per_link.deleted'))-->
<!-- this.$emit('reset-transaction-link-list')-->
<!-- })-->
<!-- .catch((err) => {-->
<!-- this.toastError(err.message)-->
<!-- })-->
<!-- })-->
<!-- },-->
<!-- },-->
<!-- computed: {-->
<!-- decay() {-->
<!-- return `${this.amount - this.holdAvailableAmount}`-->
<!-- },-->
<!-- validLink() {-->
<!-- return new Date(this.validUntil) > new Date()-->
<!-- },-->
<!-- },-->
<!--}-->
<!--</script>-->
<script setup>
import { computed } from 'vue'
import { useMutation } from '@vue/apollo-composable'
import { useI18n } from 'vue-i18n'
import { useAppToast } from '@/composables/useToast'
import { useCopyLinks } from '@/composables/useCopyLinks'
import { deleteTransactionLink } from '@/graphql/mutations'
import TypeIcon from '../TransactionRows/TypeIcon'
import AmountAndNameRow from '../TransactionRows/AmountAndNameRow'
@ -76,53 +133,54 @@ import MemoRow from '../TransactionRows/MemoRow'
import DateRow from '../TransactionRows/DateRow'
import DecayRow from '../TransactionRows/DecayRow'
import FigureQrCode from '@/components/QrCode/FigureQrCode'
import { copyLinks } from '../../mixins/copyLinks'
import { useModal } from 'bootstrap-vue-next'
export default {
name: 'TransactionLink',
mixins: [copyLinks],
components: {
TypeIcon,
AmountAndNameRow,
MemoRow,
DateRow,
DecayRow,
FigureQrCode,
},
props: {
holdAvailableAmount: { type: String, required: true },
id: { type: Number, required: true },
},
methods: {
deleteLink() {
this.$bvModal.msgBoxConfirm(this.$t('gdd_per_link.delete-the-link')).then(async (value) => {
if (value)
await this.$apollo
.mutate({
mutation: deleteTransactionLink,
variables: {
id: this.id,
},
})
.then(() => {
this.toastSuccess(this.$t('gdd_per_link.deleted'))
this.$emit('reset-transaction-link-list')
})
.catch((err) => {
this.toastError(err.message)
})
})
},
},
computed: {
decay() {
return `${this.amount - this.holdAvailableAmount}`
},
validLink() {
return new Date(this.validUntil) > new Date()
},
},
const props = defineProps({
holdAvailableAmount: { type: String, required: true },
id: { type: Number, required: true },
amount: { type: Number, required: true },
validUntil: { type: String, required: true },
link: { type: String, required: true },
memo: { type: String, required: true },
})
const emit = defineEmits(['reset-transaction-link-list'])
const { t } = useI18n()
const { toastSuccess, toastError } = useAppToast()
const { copyToClipboard } = useCopyLinks({
amount: props.amount,
validUntil: props.validUntil,
link: props.link,
memo: props.memo,
})
const { showConfirmModal } = useModal()
const { mutate: deleteTransactionLinkMutation } = useMutation(deleteTransactionLink)
const decay = computed(() => `${props.amount - props.holdAvailableAmount}`)
const validLink = computed(() => new Date(props.validUntil) > new Date())
async function deleteLink() {
const confirmed = await showConfirmModal(t('gdd_per_link.delete-the-link'))
if (confirmed) {
try {
await deleteTransactionLinkMutation({ id: props.id })
toastSuccess(t('gdd_per_link.deleted'))
emit('reset-transaction-link-list')
} catch (err) {
toastError(err.message)
}
}
}
// Expose necessary methods and computed properties
// defineExpose({
// deleteLink,
// decay,
// validLink,
// copyToClipboard,
// })
</script>
<style>
.qr-button {

14
frontend/src/components/TransactionRows/AmountAndNameRow.vue
View File

@ -1,19 +1,19 @@
<template>
<div class="amount-and-name-row">
<b-row>
<b-col cols="5">
<BRow>
<BCol cols="5">
<div class="text-right">
<span class="gdd-transaction-list-item-amount">
{{ amount | GDD }}
{{ $filters.GDD(amount) }}
</span>
</div>
</b-col>
<b-col cols="7">
</BCol>
<BCol cols="7">
<div class="gdd-transaction-list-item-name">
<span>{{ text }}</span>
</div>
</b-col>
</b-row>
</BCol>
</BRow>
</div>
</template>
<script>

12
frontend/src/components/TransactionRows/CollapseIcon.vue
View File

@ -1,10 +1,12 @@
<template>
<div class="collapse-icon">
<b-icon
:icon="visible ? 'arrow-up-circle' : 'arrow-down-circle'"
:class="visible ? 'text-black' : 'text-muted'"
class="h1"
/>
<!-- <b-icon-->
<!-- :icon="visible ? 'arrow-up-circle' : 'arrow-down-circle'"-->
<!-- :class="visible ? 'text-black' : 'text-muted'"-->
<!-- class="h1"-->
<!-- />-->
<IBiArrowUpCircle v-if="visible" class="text-black h1" />
<IBiArrowDownCircle v-else class="text-muted h1" />
</div>
</template>
<script>

12
frontend/src/components/TransactionRows/DateRow.vue
View File

@ -1,17 +1,17 @@
<template>
<div class="date-row">
<b-row>
<b-col cols="5">
<BRow>
<BCol cols="5">
<div class="text-right">
{{ text }}
</div>
</b-col>
<b-col cols="7">
</BCol>
<BCol cols="7">
<div class="gdd-transaction-list-item-date">
{{ $d(new Date(this.date), 'long') }}
</div>
</b-col>
</b-row>
</BCol>
</BRow>
</div>
</template>
<script>

15
frontend/src/components/TransactionRows/DecayRow.vue
View File

@ -1,17 +1,18 @@
<template>
<div class="decay-row">
<b-row v-if="decay">
<b-col cols="5">
<BRow v-if="decay">
<BCol cols="5">
<div class="text-right">
<b-icon icon="droplet-half" height="15" class="mb-1" />
<!-- <b-icon icon="droplet-half" height="15" class="mb-1" />-->
<IBiDropletHalf height="15" class="mb-1" />
</div>
</b-col>
<b-col cols="7">
</BCol>
<BCol cols="7">
<div class="gdd-transaction-list-item-decay">
<decay-information-short decaytyp="short" :decay="decay" />
</div>
</b-col>
</b-row>
</BCol>
</BRow>
</div>
</template>
<script>

12
frontend/src/components/TransactionRows/DurationRow.vue
View File

@ -1,13 +1,13 @@
<template>
<div class="duration-row">
<b-row>
<b-col cols="6" lg="4" md="6" sm="6">
<BRow>
<BCol cols="6" lg="4" md="6" sm="6">
<div>{{ $t('decay.past_time') }}</div>
</b-col>
<b-col offset="0" class="text-right mr-0">
</BCol>
<BCol offset="0" class="text-right mr-0">
<span v-if="duration">{{ duration }}</span>
</b-col>
</b-row>
</BCol>
</BRow>
</div>
</template>
<script>

12
frontend/src/components/TransactionRows/LinkCountRow.vue
View File

@ -1,13 +1,13 @@
<template>
<div class="link-count-row">
<b-row>
<b-col cols="5">
<BRow>
<BCol cols="5">
<div class="text-right">{{ $t('gdd_per_link.links_count') }}</div>
</b-col>
<b-col cols="7">
</BCol>
<BCol cols="7">
<div class="gdd-transaction-list-link-count">{{ count }}</div>
</b-col>
</b-row>
</BCol>
</BRow>
</div>
</template>
<script>

12
frontend/src/components/TransactionRows/MemoRow.vue
View File

@ -1,13 +1,13 @@
<template>
<div class="memo-row">
<b-row>
<b-col cols="5">
<BRow>
<BCol cols="5">
<div class="text-right">{{ $t('form.memo') }}</div>
</b-col>
<b-col cols="7">
</BCol>
<BCol cols="7">
<div class="gdd-transaction-list-message">{{ memo }}</div>
</b-col>
</b-row>
</BCol>
</BRow>
</div>
</template>
<script>

26
frontend/src/components/Transactions/TransactionCreation.vue
View File

@ -1,23 +1,23 @@
<template>
<div class="transaction-slot-creation">
<b-row @click="visible = !visible" class="align-items-center">
<b-col cols="3" lg="2" md="2">
<BRow @click="visible = !visible" class="align-items-center">
<BCol cols="3" lg="2" md="2">
<b-avatar icon="gift" variant="success" :size="42"></b-avatar>
</b-col>
<b-col>
</BCol>
<BCol>
<div class="font-weight-bold">{{ linkedUser.firstName }} {{ linkedUser.lastName }}</div>
<span class="small">{{ this.$d(new Date(balanceDate), 'short') }}</span>
<span class="ml-4 small">{{ this.$d(new Date(balanceDate), 'time') }}</span>
</b-col>
<b-col cols="8" lg="3" md="3" sm="8" offset="3" offset-md="0" offset-lg="0">
</BCol>
<BCol cols="8" lg="3" md="3" sm="8" offset="3" offset-md="0" offset-lg="0">
<div class="small mb-2">{{ $t('decay.types.receive') }}</div>
<div class="font-weight-bold">{{ amount | GDD }}</div>
</b-col>
<b-col cols="12" md="1" lg="1" class="text-right">
<div class="font-weight-bold">{{ $filters.GDD(amount) }}</div>
</BCol>
<BCol cols="12" md="1" lg="1" class="text-right">
<collapse-icon class="text-right" :visible="visible" />
</b-col>
</b-row>
<b-collapse class="pb-4 pt-lg-3" v-model="visible">
</BCol>
</BRow>
<BCollapse class="pb-4 pt-lg-3" v-model="visible">
<decay-information
:typeId="typeId"
:decay="decay"
@ -26,7 +26,7 @@
:balance="balance"
:previousBalance="previousBalance"
/>
</b-collapse>
</BCollapse>
</div>
</template>
<script>

23
frontend/src/components/Transactions/TransactionDecay.vue
View File

@ -1,22 +1,25 @@
<template>
<div class="transaction-slot-decay">
<b-row @click="visible = !visible" class="text-color-gdd-yellow align-items-center">
<b-col cols="1"><type-icon color="text-color-gdd-yellow" icon="droplet-half" /></b-col>
<b-col>
<div @click="visible = !visible" class="transaction-slot-decay">
<BRow class="text-color-gdd-yellow align-items-center">
<BCol cols="1">
<!-- <type-icon color="text-color-gdd-yellow" icon="droplet-half" />-->
<IBiDropletHalf />
</BCol>
<BCol>
{{ $t('decay.decay_since_last_transaction') }}
</b-col>
<b-col cols="12" md="1" lg="1" class="text-right">
</BCol>
<BCol cols="12" md="1" lg="1" class="text-right">
<collapse-icon class="text-right" :visible="visible" />
</b-col>
</b-row>
</BCol>
</BRow>
<b-collapse class="pb-4 pt-5" v-model="visible">
<BCollapse class="pb-4 pt-5" :model-value="visible">
<decay-information-decay
:balance="balance"
:decay="decay.decay"
:previousBalance="previousBalance"
/>
</b-collapse>
</BCollapse>
</div>
</template>
<script>

28
frontend/src/components/Transactions/TransactionLinkSummary.vue
View File

@ -1,22 +1,22 @@
<template>
<div class="transaction-slot-link">
<b-row @click="showTransactionLinks()" class="align-items-center">
<b-col cols="3" lg="2" md="2">
<div @click="showTransactionLinks()" class="transaction-slot-link">
<BRow class="align-items-center">
<BCol cols="3" lg="2" md="2">
<b-avatar icon="link" variant="light" :size="42"></b-avatar>
</b-col>
<b-col>
</BCol>
<BCol>
<div>{{ $t('gdd_per_link.links_sum') }}</div>
<div class="small">{{ transactionLinkCount }} {{ $t('gdd_per_link.links_sum') }}</div>
</b-col>
<b-col cols="8" lg="3" md="3" sm="8" offset="3" offset-md="0" offset-lg="0">
</BCol>
<BCol cols="8" lg="3" md="3" sm="8" offset="3" offset-md="0" offset-lg="0">
<div class="small mb-2">{{ $t('send_per_link') }}</div>
<div class="font-weight-bold">{{ amount | GDD }}</div>
</b-col>
<b-col cols="12" md="1" lg="1" class="text-right">
<div class="font-weight-bold">{{ $filters.GDD(amount) }}</div>
</BCol>
<BCol cols="12" md="1" lg="1" class="text-right">
<collapse-icon class="text-right" :visible="visible" />
</b-col>
</b-row>
<b-collapse v-model="visible">
</BCol>
</BRow>
<BCollapse :model-value="visible">
<collapse-links-list
v-model="currentPage"
:pending="pending"
@ -24,7 +24,7 @@
:transactionLinkCount="transactionLinkCount"
:transactionLinks="transactionLinks"
/>
</b-collapse>
</BCollapse>
</div>
</template>
<script>

32
frontend/src/components/Transactions/TransactionReceive.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="transaction-slot-receive">
<b-row @click="visible = !visible" class="align-items-center">
<b-col cols="3" lg="2" md="2">
<div @click="visible = !visible" class="transaction-slot-receive">
<BRow class="align-items-center">
<BCol cols="3" lg="2" md="2">
<!-- <b-avatar :text="avatarText" variant="success" size="3em"></b-avatar> -->
<avatar
:username="username.username"
@ -9,8 +9,8 @@
:color="'#fff'"
:size="42"
></avatar>
</b-col>
<b-col>
</BCol>
<BCol>
<div>
<name
class="font-weight-bold"
@ -19,15 +19,15 @@
:linkId="linkId"
/>
</div>
<span class="small">{{ this.$d(new Date(balanceDate), 'short') }}</span>
<span class="ml-4 small">{{ this.$d(new Date(balanceDate), 'time') }}</span>
</b-col>
<b-col cols="8" lg="3" md="3" sm="8" offset="3" offset-md="0" offset-lg="0">
<span class="small">{{ $d(new Date(balanceDate), 'short') }}</span>
<span class="ml-4 small">{{ $d(new Date(balanceDate), 'time') }}</span>
</BCol>
<BCol cols="8" lg="3" md="3" sm="8" offset="3" offset-md="0" offset-lg="0">
<div class="small mb-2">
{{ $t('decay.types.receive') }}
</div>
<div class="font-weight-bold gradido-global-color-accent" data-test="transaction-amount">
{{ amount | GDD }}
{{ $filters.GDD(amount) }}
</div>
<div v-if="linkId" class="small">
{{ $t('via_link') }}
@ -38,12 +38,12 @@
:title="$t('gdd_per_link.redeemed-title')"
/>
</div>
</b-col>
<b-col cols="12" md="1" lg="1" class="text-right">
</BCol>
<BCol cols="12" md="1" lg="1" class="text-right">
<collapse-icon class="text-right" :visible="visible" />
</b-col>
</b-row>
<b-collapse class="pb-4 pt-lg-3" v-model="visible">
</BCol>
</BRow>
<BCollapse class="pb-4 pt-lg-3" :model-value="visible">
<decay-information
:typeId="typeId"
:decay="decay"
@ -52,7 +52,7 @@
:balance="balance"
:previousBalance="previousBalance"
/>
</b-collapse>
</BCollapse>
</div>
</template>
<script>

41
frontend/src/components/Transactions/TransactionSend.vue
View File

@ -1,15 +1,15 @@
<template>
<div class="transaction-slot-send">
<b-row @click="visible = !visible" class="align-items-center">
<b-col cols="3" lg="2" md="2">
<BRow @click="visible = !visible" class="align-items-center">
<BCol cols="3" lg="2" md="2">
<avatar
:username="username.username"
:initials="username.initials"
:color="'#fff'"
:size="42"
></avatar>
</b-col>
<b-col>
/>
</BCol>
<BCol>
<div>
<name
class="font-weight-bold"
@ -20,29 +20,30 @@
</div>
<span class="small">{{ this.$d(new Date(balanceDate), 'short') }}</span>
<span class="ml-4 small">{{ this.$d(new Date(balanceDate), 'time') }}</span>
</b-col>
<b-col cols="8" lg="3" md="3" sm="8" offset="3" offset-md="0" offset-lg="0">
</BCol>
<BCol cols="8" lg="3" md="3" sm="8" offset="3" offset-md="0" offset-lg="0">
<div class="small mb-2">
{{ $t('decay.types.send') }}
</div>
<div class="font-weight-bold text-140" data-test="transaction-amount">
{{ amount | GDD }}
{{ $filters.GDD(amount) }}
</div>
<div v-if="linkId" class="small">
{{ $t('via_link') }}
<b-icon
icon="link45deg"
variant="muted"
class="m-mb-1"
:title="$t('gdd_per_link.redeemed-title')"
/>
<!-- <b-icon-->
<!-- icon="link45deg"-->
<!-- variant="muted"-->
<!-- class="m-mb-1"-->
<!-- :title="$t('gdd_per_link.redeemed-title')"-->
<!-- />-->
<IBiLink45deg variant="muted" class="m-mb-1" :title="$t('gdd_per_link.redeemed-title')" />
</div>
</b-col>
<b-col cols="12" md="1" lg="1" class="text-right">
</BCol>
<BCol cols="12" md="1" lg="1" class="text-right">
<collapse-icon class="text-right" :visible="visible" />
</b-col>
</b-row>
<b-collapse class="pb-4 pt-lg-3" v-model="visible">
</BCol>
</BRow>
<BCollapse class="pb-4 pt-lg-3" v-model="visible">
<decay-information
:typeId="typeId"
:decay="decay"
@ -51,7 +52,7 @@
:balance="balance"
:previousBalance="previousBalance"
/>
</b-collapse>
</BCollapse>
</div>
</template>
<script>

32
frontend/src/components/UserSettings/UserCard.vue
View File

@ -10,36 +10,36 @@
</div>
<div class="justify-content-center mt-5 mb-5">
<b-row align-v="stretch">
<b-col cols="4">
<BRow align-v="stretch">
<BCol cols="4">
<div class="text-center font-weight-bold">
{{ $n(balance, 'decimal') }}
</div>
</b-col>
<b-col cols="4">
</BCol>
<BCol cols="4">
<div class="text-center font-weight-bold">
{{ transactionCount }}
</div>
</b-col>
<b-col cols="4">
</BCol>
<BCol cols="4">
<div class="text-center font-weight-bold">{{ CONFIG.COMMUNITY_NAME }}</div>
</b-col>
</b-row>
<b-row>
<b-col cols="4">
</BCol>
</BRow>
<BRow>
<BCol cols="4">
<div class="text-center">{{ $t('GDD') }}</div>
</b-col>
<b-col cols="4">
</BCol>
<BCol cols="4">
<div class="text-center">
{{ $t('navigation.transactions') }}
</div>
</b-col>
<b-col cols="4">
</BCol>
<BCol cols="4">
<div class="text-center">
{{ $t('community.community') }}
</div>
</b-col>
</b-row>
</BCol>
</BRow>
</div>
</div>
</template>

48
frontend/src/components/UserSettings/UserData.vue
View File

@ -1,8 +1,8 @@
<template>
<b-card id="userdata_form" class="card-border-radius card-background-gray">
<div>
<b-row class="mb-4 text-right">
<b-col class="text-right">
<BRow class="mb-4 text-right">
<BCol class="text-right">
<a
class="cursor-pointer"
@click="showUserData ? (showUserData = !showUserData) : cancelEdit()"
@ -11,41 +11,41 @@
<b-icon v-if="showUserData" class="pointer ml-3" icon="pencil"></b-icon>
<b-icon v-else icon="x-circle" class="pointer ml-3" variant="danger"></b-icon>
</a>
</b-col>
</b-row>
</BCol>
</BRow>
</div>
<div>
<b-form @keyup.prevent="loadSubmitButton">
<b-row class="mb-3">
<b-col class="col-12">
<BRow class="mb-3">
<BCol class="col-12">
<small>
<b>{{ $t('form.firstname') }}</b>
</small>
</b-col>
<b-col v-if="showUserData" class="col-12">
</BCol>
<BCol v-if="showUserData" class="col-12">
{{ form.firstName }}
</b-col>
<b-col v-else class="col-12">
</BCol>
<BCol v-else class="col-12">
<b-input type="text" v-model="form.firstName"></b-input>
</b-col>
</b-row>
<b-row class="mb-3">
<b-col class="col-12">
</BCol>
</BRow>
<BRow class="mb-3">
<BCol class="col-12">
<small>
<b>{{ $t('form.lastname') }}</b>
</small>
</b-col>
<b-col v-if="showUserData" class="col-12">
</BCol>
<BCol v-if="showUserData" class="col-12">
{{ form.lastName }}
</b-col>
<b-col v-else class="col-12">
</BCol>
<BCol v-else class="col-12">
<b-input type="text" v-model="form.lastName"></b-input>
</b-col>
</b-row>
</BCol>
</BRow>
<b-row class="text-right" v-if="!showUserData">
<b-col>
<BRow class="text-right" v-if="!showUserData">
<BCol>
<div class="text-right" ref="submitButton">
<b-button
:variant="loading ? 'light' : 'success'"
@ -57,8 +57,8 @@
{{ $t('form.save') }}
</b-button>
</div>
</b-col>
</b-row>
</BCol>
</BRow>
</b-form>
</div>
</b-card>

38
frontend/src/components/UserSettings/UserLanguage.vue
View File

@ -1,8 +1,8 @@
<template>
<b-card id="formuserlanguage" class="card-border-radius card-background-gray">
<div>
<b-row class="mb-4 text-right">
<b-col class="text-right">
<BRow class="mb-4 text-right">
<BCol class="text-right">
<a
class="cursor-pointer"
@click="showLanguage ? (showLanguage = !showLanguage) : cancelEdit()"
@ -11,38 +11,38 @@
<b-icon v-if="showLanguage" class="pointer ml-3" icon="pencil"></b-icon>
<b-icon v-else icon="x-circle" class="pointer ml-3" variant="danger"></b-icon>
</a>
</b-col>
</b-row>
</BCol>
</BRow>
</div>
<div v-if="showLanguage">
<b-row class="mb-3">
<b-col class="col-12">
<BRow class="mb-3">
<BCol class="col-12">
<small>
<b>{{ $t('language') }}</b>
</small>
</b-col>
</BCol>
<!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys-->
<b-col class="col-12">{{ $t(buildTagFromLanguageString()) }}</b-col>
</b-row>
<BCol class="col-12">{{ $t(buildTagFromLanguageString()) }}</BCol>
</BRow>
</div>
<div v-else>
<div>
<b-form @submit.stop.prevent="onSubmit">
<b-row class="mb-2">
<b-col class="col-12">
<BRow class="mb-2">
<BCol class="col-12">
<small>
<b>{{ $t('language') }}</b>
</small>
</b-col>
<b-col class="col-12">
</BCol>
<BCol class="col-12">
<language-switch-select @update-language="updateLanguage" :language="language" />
</b-col>
</b-row>
</BCol>
</BRow>
<b-row class="text-right">
<b-col>
<BRow class="text-right">
<BCol>
<div class="text-right" ref="submitButton">
<b-button
:variant="loading ? 'light' : 'success'"
@ -53,8 +53,8 @@
{{ $t('form.save') }}
</b-button>
</div>
</b-col>
</b-row>
</BCol>
</BRow>
</b-form>
</div>
</div>

20
frontend/src/components/UserSettings/UserName.vue
View File

@ -17,8 +17,8 @@
<div v-else>
<validation-observer ref="usernameObserver" v-slot="{ handleSubmit, invalid }">
<b-form @submit.stop.prevent="handleSubmit(onSubmit)">
<b-row class="mb-3">
<b-col class="col-12">
<BRow class="mb-3">
<BCol class="col-12">
<input-username
v-model="username"
:name="$t('form.username')"
@ -30,15 +30,15 @@
@set-is-edit="setIsEdit"
data-test="component-input-username"
/>
</b-col>
<b-col class="col-12">
</BCol>
<BCol class="col-12">
<div v-if="!username" class="alert" data-test="username-alert">
{{ $t('settings.username.no-username') }}
</div>
</b-col>
</b-row>
<b-row class="text-right" v-if="newUsername">
<b-col>
</BCol>
</BRow>
<BRow class="text-right" v-if="newUsername">
<BCol>
<div class="text-right" ref="submitButton">
<b-button
:variant="disabled(invalid) ? 'light' : 'success'"
@ -49,8 +49,8 @@
{{ $t('form.save') }}
</b-button>
</div>
</b-col>
</b-row>
</BCol>
</BRow>
</b-form>
</validation-observer>
</div>

24
frontend/src/components/UserSettings/UserPassword.vue
View File

@ -1,8 +1,8 @@
<template>
<b-card id="change_pwd" class="card-border-radius card-background-gray">
<div>
<b-row class="mb-4 text-right">
<b-col class="text-right">
<BRow class="mb-4 text-right">
<BCol class="text-right">
<a
class="cursor-pointer"
@click="showPassword ? (showPassword = !showPassword) : cancelEdit()"
@ -12,25 +12,25 @@
<b-icon v-if="showPassword" class="pointer ml-3" icon="pencil"></b-icon>
<b-icon v-else icon="x-circle" class="pointer ml-3" variant="danger"></b-icon>
</a>
</b-col>
</b-row>
</BCol>
</BRow>
</div>
<div v-if="!showPassword">
<validation-observer ref="observer" v-slot="{ handleSubmit, invalid }">
<b-form @submit.stop.prevent="handleSubmit(onSubmit)">
<b-row class="mb-2">
<b-col>
<BRow class="mb-2">
<BCol>
<input-password
:label="$t('form.password_old')"
:placeholder="$t('form.password_old')"
v-model="form.password"
></input-password>
</b-col>
</b-row>
</BCol>
</BRow>
<input-password-confirmation v-model="form.newPassword" :register="register" />
<b-row class="text-right">
<b-col>
<BRow class="text-right">
<BCol>
<div class="text-right">
<b-button
type="submit"
@ -42,8 +42,8 @@
{{ $t('form.save') }}
</b-button>
</div>
</b-col>
</b-row>
</BCol>
</BRow>
</b-form>
</validation-observer>
</div>

42
frontend/src/components/skeleton/Overview.vue
View File

@ -1,44 +1,44 @@
<template>
<div class="skeleton-overview h-100">
<b-row class="text-center">
<b-col>
<BRow class="text-center">
<BCol>
<b-skeleton-img no-aspect animation="wave" height="118px"></b-skeleton-img>
</b-col>
<b-col cols="6">
</BCol>
<BCol cols="6">
<b-skeleton animation="wave" class="mt-4 pt-5"></b-skeleton>
</b-col>
<b-col>
</BCol>
<BCol>
<div class="b-right m-4">
<b-row>
<b-col><b-skeleton type="avatar"></b-skeleton></b-col>
<b-col>
<BRow>
<BCol><b-skeleton type="avatar"></b-skeleton></BCol>
<BCol>
<b-skeleton></b-skeleton>
<b-skeleton></b-skeleton>
</b-col>
</b-row>
</BCol>
</BRow>
</div>
</b-col>
</b-row>
<b-row class="text-center mt-5 pt-5">
<b-col cols="12" lg="">
</BCol>
</BRow>
<BRow class="text-center mt-5 pt-5">
<BCol cols="12" lg="">
<b-skeleton animation="wave" width="85%"></b-skeleton>
<b-skeleton animation="wave" width="55%"></b-skeleton>
<b-skeleton animation="wave" width="70%"></b-skeleton>
</b-col>
<b-col cols="12" lg="6">
</BCol>
<BCol cols="12" lg="6">
<b-skeleton animation="wave" width="85%"></b-skeleton>
<b-skeleton animation="wave" width="55%"></b-skeleton>
<b-skeleton animation="wave" width="70%"></b-skeleton>
<b-skeleton animation="wave" width="85%"></b-skeleton>
<b-skeleton animation="wave" width="55%"></b-skeleton>
<b-skeleton animation="wave" width="70%"></b-skeleton>
</b-col>
<b-col cols="12" lg="">
</BCol>
<BCol cols="12" lg="">
<b-skeleton animation="wave" width="85%"></b-skeleton>
<b-skeleton animation="wave" width="55%"></b-skeleton>
<b-skeleton animation="wave" width="70%"></b-skeleton>
</b-col>
</b-row>
</BCol>
</BRow>
</div>
</template>
<script>

19
frontend/src/composables/useAuthLinks.js Normal file
View File

@ -0,0 +1,19 @@
import { useRoute } from 'vue-router'
export function useAuthLinks() {
const { params } = useRoute()
const login = () => {
if (params.code) return '/login/' + params.code
return '/login'
}
const register = () => {
if (params.code) return '/register/' + params.code
return '/register'
}
return {
login,
register,
}
}

53
frontend/src/composables/useCopyLinks.js Normal file
View File

@ -0,0 +1,53 @@
import { ref } from 'vue'
import { useStore } from 'vuex'
import { useI18n } from 'vue-i18n'
import { useAppToast } from '@/composables/useToast'
export const useCopyLinks = ({ link, amount, memo, validUntil }) => {
const canCopyLink = ref(true)
const store = useStore()
const { toastSuccess, toastError } = useAppToast()
const { t, d } = useI18n()
const copyLink = () => {
navigator.clipboard
.writeText(link)
.then(() => {
toastSuccess(t('gdd_per_link.link-copied'))
})
.catch(() => {
canCopyLink.value = false
toastError(t('gdd_per_link.not-copied'))
})
}
const copyLinkWithText = () => {
navigator.clipboard
.writeText(linkText)
.then(() => {
toastSuccess(t('gdd_per_link.link-and-text-copied'))
})
.catch(() => {
canCopyLink.value = false
toastError(t('gdd_per_link.not-copied'))
})
}
const linkText = computed(() => {
return `${link}
${store.state.firstName} ${t('transaction-link.send_you')} ${amount} Gradido.
"${memo}"
${t('gdd_per_link.credit-your-gradido')} ${t('gdd_per_link.validUntilDate', {
date: d(new Date(this.validUntil), 'short'),
})}
${t('gdd_per_link.link-hint')}`
})
return {
canCopyLink,
copyLink,
copyLinkWithText,
linkText,
}
}

36
frontend/src/filters/amount.js
View File

@ -1,18 +1,26 @@
let i18n
export const createFilters = (i18n) => {
const formatAmount = (value) => {
if (value === null || value === undefined) return ''
try {
const numValue = Number(value)
if (isNaN(numValue)) return ''
return i18n.global.n(numValue, 'decimal').replace('-', '− ')
} catch (error) {
console.error('Error formatting amount:', error)
return ''
}
}
export const loadFilters = (_i18n) => {
i18n = _i18n
return { amount, GDD }
}
const formatGDD = (value) => {
const formattedAmount = formatAmount(value)
if (formattedAmount === '') return ''
const amount = (value) => {
if (!value && value !== 0) return ''
return i18n.global.n(value.toString(), 'decimal').replace('-', '− ')
}
const numValue = Number(value)
if (isNaN(numValue)) return formattedAmount + ' GDD'
const GDD = (value) => {
value = amount(value)
if (value === '') return ''
if (!value.match(/^− /) && !value.match(/^0[.,]00$/)) value = '+ ' + value
return value + ' GDD'
const prefix = numValue > 0 ? '+ ' : numValue < 0 ? '' : ''
return prefix + formattedAmount + ' GDD'
}
return { amount: formatAmount, GDD: formatGDD }
}

4
frontend/src/i18n.js
View File

@ -74,7 +74,7 @@ const numberFormats = {
},
}
const dateTimeFormats = {
const datetimeFormats = {
en: {
short: {
year: 'numeric',
@ -239,5 +239,5 @@ export default createI18n({
fallbackLocale: 'en',
messages: { de, en, es, fr, tr, nl },
numberFormats,
dateTimeFormats,
datetimeFormats,
})

2
frontend/src/layouts/DashboardLayout.vue
View File

@ -341,7 +341,7 @@ import LastTransactions from '@/components/Template/RightSide/LastTransactions'
import { transactionsQuery, communityStatistics } from '@/graphql/queries'
import { logout } from '@/graphql/mutations'
import CONFIG from '@/config'
import { useAppToast } from '../composables/useToast'
import { useAppToast } from '@/composables/useToast'
const store = useStore()
const router = useRouter()

20
frontend/src/main.js
View File

@ -1,15 +1,15 @@
import { createApp } from 'vue'
// import '@/assets/scss/gradido.scss'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue-next/dist/bootstrap-vue-next.css'
import '@/assets/scss/gradido.scss'
// import DashboardPlugin from './plugins/dashboard-plugin'
import App from './App'
import i18n from './i18n.js'
import { loadAllRules } from './validation-rules'
import { loadFilters } from './filters/amount'
import { createFilters } from './filters/amount'
import 'regenerator-runtime'
@ -25,15 +25,10 @@ import 'clipboard-polyfill/overwrite-globals'
import { createBootstrap } from 'bootstrap-vue-next'
// Add the necessary CSS
// import 'bootstrap/dist/css/bootstrap.css'
// import 'bootstrap-vue-next/dist/bootstrap-vue-next.css'
// import GlobalComponents from '@/plugins/globalComponents'
import GlobalDirectives from '@/plugins/globalDirectives'
import PortalVue from 'portal-vue'
import FlatPickr from 'vue-flatpickr-component'
import VueApollo from 'vue-apollo'
const app = createApp(App)
@ -48,14 +43,15 @@ app.use(createBootstrap())
app.use(GlobalDirectives)
app.use(PortalVue)
app.use(FlatPickr)
// app.use(VueApollo)
app.use(() => apolloProvider)
// app.use(VueTimers)
// app.mixin(toasters)
const filters = loadFilters(i18n)
app.filter('amount', filters.amount)
app.filter('GDD', filters.GDD)
const filters = createFilters(i18n)
app.config.globalProperties.$filters = {
amount: filters.amount,
GDD: filters.GDD,
}
//TODO it will be used in future
// app.config.globalProperties.$filters = {

128
frontend/src/pages/Circles.vue
View File

@ -3,7 +3,7 @@
<BContainer class="bg-white appBoxShadow gradido-border-radius p-4 mt--3">
<div class="h3">{{ $t('circles.headline') }}</div>
<div class="my-4 text-small">
<span v-for="(line, lineNumber) of $t('circles.text').split('\n')" v-bind:key="lineNumber">
<span v-for="(line, lineNumber) of $t('circles.text').split('\n')" :key="lineNumber">
{{ line }}
<br />
</span>
@ -12,10 +12,10 @@
<BCol cols="12">
<div class="text-lg-right">
<BButton
:href="this.humhubUri"
v-if="this.humhubAllowed"
:href="humhubUri"
v-if="humhubAllowed"
variant="gradido"
:disabled="this.enableButton === false"
:disabled="enableButton === false"
target="_blank"
>
{{ $t('circles.button') }}
@ -31,44 +31,90 @@
</BContainer>
</div>
</template>
<script>
<!--<script>-->
<!--import { authenticateHumhubAutoLogin } from '@/graphql/queries'-->
<!--export default {-->
<!-- name: 'Circles',-->
<!-- data() {-->
<!-- return {-->
<!-- enableButton: false,-->
<!-- humhubUri: '',-->
<!-- }-->
<!-- },-->
<!-- computed: {-->
<!-- humhubAllowed() {-->
<!-- return this.$store.state.humhubAllowed-->
<!-- },-->
<!-- },-->
<!-- methods: {-->
<!-- async authenticateHumhubAutoLogin() {-->
<!-- this.enableButton = false-->
<!-- this.humhubUri = null-->
<!-- this.$apollo-->
<!-- .query({-->
<!-- query: authenticateHumhubAutoLogin,-->
<!-- fetchPolicy: 'network-only',-->
<!-- })-->
<!-- .then(async (result) => {-->
<!-- this.humhubUri = result.data.authenticateHumhubAutoLogin-->
<!-- this.enableButton = true-->
<!-- })-->
<!-- .catch(() => {-->
<!-- this.enableButton = true-->
<!-- this.humhubUri = ''-->
<!-- // something went wrong with login link so we disable humhub-->
<!-- this.$store.commit('humhubAllowed', false)-->
<!-- })-->
<!-- },-->
<!-- },-->
<!-- created() {-->
<!-- this.authenticateHumhubAutoLogin()-->
<!-- },-->
<!--}-->
<!--</script>-->
<script setup>
import { ref, computed, onMounted } from 'vue'
import { useQuery } from '@vue/apollo-composable'
import { useStore } from 'vuex'
import { authenticateHumhubAutoLogin } from '@/graphql/queries'
export default {
name: 'Circles',
data() {
return {
enableButton: false,
humhubUri: '',
}
},
computed: {
humhubAllowed() {
return this.$store.state.humhubAllowed
},
},
methods: {
async authenticateHumhubAutoLogin() {
this.enableButton = false
this.humhubUri = null
this.$apollo
.query({
query: authenticateHumhubAutoLogin,
fetchPolicy: 'network-only',
})
.then(async (result) => {
this.humhubUri = result.data.authenticateHumhubAutoLogin
this.enableButton = true
})
.catch(() => {
this.enableButton = true
this.humhubUri = ''
// something went wrong with login link so we disable humhub
this.$store.commit('humhubAllowed', false)
})
},
},
created() {
this.authenticateHumhubAutoLogin()
const store = useStore()
const enableButton = ref(false)
const humhubUri = ref('')
const humhubAllowed = computed(() => store.state.humhubAllowed)
const { refetch: refetchAuthenticateHumhub, onResult, onError } = useQuery(
authenticateHumhubAutoLogin,
null,
{
fetchPolicy: 'network-only',
enabled: false,
},
)
onResult(({ data }) => {
if (data) {
humhubUri.value = data.authenticateHumhubAutoLogin
enableButton.value = true
}
})
onError(() => {
enableButton.value = true
humhubUri.value = ''
store.commit('humhubAllowed', false)
})
const handleAuthenticateHumhubAutoLogin = async () => {
enableButton.value = false
humhubUri.value = null
await refetchAuthenticateHumhub()
}
onMounted(() => {
handleAuthenticateHumhubAutoLogin()
})
</script>

27
frontend/src/pages/ForgotPassword.vue
View File

@ -3,8 +3,8 @@
<div class="forgot-password">
<b-container v-if="enterData">
<div class="pb-5">{{ $t('site.forgotPassword.heading') }}</div>
<b-row class="justify-content-center">
<b-col>
<BRow class="justify-content-center">
<BCol>
<validation-observer ref="observer" v-slot="{ handleSubmit, valid }">
<b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
<input-email
@ -13,17 +13,22 @@
:label="$t('form.email')"
:placeholder="$t('form.email')"
></input-email>
<b-row>
<b-col cols="12" lg="6">
<b-button type="submit" :variant="valid ? 'gradido' : 'gradido-disable'" block :disabled="!valid">
{{ $t('settings.password.send_now') }}
</b-button>
</b-col>
</b-row>
<BRow>
<BCol cols="12" lg="6">
<b-button
type="submit"
:variant="valid ? 'gradido' : 'gradido-disable'"
block
:disabled="!valid"
>
{{ $t('settings.password.send_now') }}
</b-button>
</BCol>
</BRow>
</b-form>
</validation-observer>
</b-col>
</b-row>
</BCol>
</BRow>
</b-container>
<b-container v-else>
<message

36
frontend/src/pages/Register.vue
View File

@ -4,8 +4,8 @@
<div class="pb-5" align="center">{{ $t('gdd_per_link.isFree') }}</div>
<validation-observer ref="observer" v-slot="{ handleSubmit }">
<b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
<b-row>
<b-col sm="12" md="6">
<BRow>
<BCol sm="12" md="6">
<validation-provider
:name="$t('form.firstname')"
:rules="{ required: true, min: 3 }"
@ -30,8 +30,8 @@
</b-form-invalid-feedback>
</b-form-group>
</validation-provider>
</b-col>
<b-col sm="12" md="6">
</BCol>
<BCol sm="12" md="6">
<validation-provider
:name="$t('form.lastname')"
:rules="{ required: true, min: 2 }"
@ -56,20 +56,20 @@
</b-form-invalid-feedback>
</b-form-group>
</validation-provider>
</b-col>
</b-row>
<b-row>
<b-col>
</BCol>
</BRow>
<BRow>
<BCol>
<input-email
v-model="form.email"
:name="$t('form.email')"
:label="$t('form.email')"
:placeholder="$t('form.email')"
></input-email>
</b-col>
</b-row>
<b-row>
<b-col cols="12" class="my-4">
</BCol>
</BRow>
<BRow>
<BCol cols="12" class="my-4">
<b-form-checkbox
id="registerCheckbox"
v-model="form.agree"
@ -78,10 +78,10 @@
<!-- eslint-disable-next-line @intlify/vue-i18n/no-v-html -->
<span class="text-muted" v-html="$t('site.signup.agree')"></span>
</b-form-checkbox>
</b-col>
</b-row>
<b-row>
<b-col cols="12" lg="6">
</BCol>
</BRow>
<BRow>
<BCol cols="12" lg="6">
<b-button
block
type="submit"
@ -90,8 +90,8 @@
>
{{ $t('signup') }}
</b-button>
</b-col>
</b-row>
</BCol>
</BRow>
</b-form>
</validation-observer>
</b-container>

32
frontend/src/pages/RegisterCommunity.vue
View File

@ -4,8 +4,8 @@
<div class="p-3">
<b-container>
<div class="text-center mb-7 header">
<b-row class="justify-content-center">
<b-col xl="5" lg="6" md="8" class="px-2">
<BRow class="justify-content-center">
<BCol xl="5" lg="6" md="8" class="px-2">
<h1>{{ CONFIG.COMMUNITY_NAME }}</h1>
<p class="text-lead">
{{ CONFIG.COMMUNITY_DESCRIPTION }}
@ -13,36 +13,36 @@
<p class="text-lead community-location">
{{ CONFIG.COMMUNITY_URL }}
</p>
</b-col>
</b-row>
<b-row>
<b-col class="text-center">
</BCol>
</BRow>
<BRow>
<BCol class="text-center">
<router-link to="/register">
<b-button variant="outline-secondary">
{{ $t('community.continue-to-registration') }}
</b-button>
</router-link>
</b-col>
</b-row>
</BCol>
</BRow>
<hr />
<b-row>
<b-col class="text-center">
<BRow>
<BCol class="text-center">
<router-link to="/select-community">
<b-button variant="outline-secondary">
{{ $t('community.choose-another-community') }}
</b-button>
</router-link>
</b-col>
</b-row>
</BCol>
</BRow>
<hr />
<b-row>
<b-col class="text-center">
<BRow>
<BCol class="text-center">
<router-link to="/login">
<b-button variant="outline-secondary">{{ $t('back') }}</b-button>
</router-link>
</b-col>
</b-row>
</BCol>
</BRow>
</div>
</b-container>
</div>

8
frontend/src/pages/ResetPassword.vue
View File

@ -4,8 +4,8 @@
<validation-observer ref="observer" v-slot="{ handleSubmit, valid }">
<b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
<input-password-confirmation v-model="form" />
<b-row>
<b-col cols="12" lg="6">
<BRow>
<BCol cols="12" lg="6">
<b-button
block
type="submit"
@ -17,8 +17,8 @@
<!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys-->
{{ $t(displaySetup.button) }}
</b-button>
</b-col>
</b-row>
</BCol>
</BRow>
</b-form>
</validation-observer>
</div>

384
frontend/src/pages/Send.vue
View File

@ -49,7 +49,156 @@
</gdd-send>
</div>
</template>
<!--<script>-->
<!--import GddSend, { TRANSACTION_STEPS } from '@/components/GddSend'-->
<!--import TransactionForm from '@/components/GddSend/TransactionForm'-->
<!--import TransactionConfirmationSend from '@/components/GddSend/TransactionConfirmationSend'-->
<!--import TransactionConfirmationLink from '@/components/GddSend/TransactionConfirmationLink'-->
<!--import TransactionResultSendSuccess from '@/components/GddSend/TransactionResultSendSuccess'-->
<!--import TransactionResultSendError from '@/components/GddSend/TransactionResultSendError'-->
<!--import TransactionResultLink from '@/components/GddSend/TransactionResultLink'-->
<!--import { sendCoins, createTransactionLink } from '@/graphql/mutations.js'-->
<!--const EMPTY_TRANSACTION_DATA = {-->
<!-- identifier: '',-->
<!-- amount: 0,-->
<!-- memo: '',-->
<!--}-->
<!--export const SEND_TYPES = {-->
<!-- send: 'send',-->
<!-- link: 'link',-->
<!--}-->
<!--export default {-->
<!-- name: 'Send',-->
<!-- components: {-->
<!-- GddSend,-->
<!-- TransactionForm,-->
<!-- TransactionConfirmationSend,-->
<!-- TransactionConfirmationLink,-->
<!-- TransactionResultSendSuccess,-->
<!-- TransactionResultSendError,-->
<!-- TransactionResultLink,-->
<!-- },-->
<!-- data() {-->
<!-- return {-->
<!-- transactionData: { ...EMPTY_TRANSACTION_DATA },-->
<!-- error: false,-->
<!-- errorResult: '',-->
<!-- currentTransactionStep: TRANSACTION_STEPS.transactionForm,-->
<!-- loading: false,-->
<!-- link: null,-->
<!-- }-->
<!-- },-->
<!-- props: {-->
<!-- balance: { type: Number, default: 0 },-->
<!-- GdtBalance: { type: Number, default: 0 },-->
<!-- transactions: {-->
<!-- default: () => [],-->
<!-- },-->
<!-- pending: {-->
<!-- type: Boolean,-->
<!-- default: true,-->
<!-- },-->
<!-- },-->
<!-- methods: {-->
<!-- setTransaction(data) {-->
<!-- this.transactionData = { ...data }-->
<!-- switch (data.selected) {-->
<!-- case SEND_TYPES.send:-->
<!-- this.currentTransactionStep = TRANSACTION_STEPS.transactionConfirmationSend-->
<!-- break-->
<!-- case SEND_TYPES.link:-->
<!-- this.currentTransactionStep = TRANSACTION_STEPS.transactionConfirmationLink-->
<!-- break-->
<!-- }-->
<!-- },-->
<!-- async sendTransaction() {-->
<!-- this.loading = true-->
<!-- this.error = false-->
<!-- switch (this.transactionData.selected) {-->
<!-- case SEND_TYPES.send:-->
<!-- this.$apollo-->
<!-- .mutate({-->
<!-- mutation: sendCoins,-->
<!-- variables: {-->
<!-- // from target community we need only the uuid-->
<!-- recipientCommunityIdentifier: this.transactionData.targetCommunity.uuid,-->
<!-- recipientIdentifier: this.transactionData.identifier,-->
<!-- amount: this.transactionData.amount,-->
<!-- memo: this.transactionData.memo,-->
<!-- },-->
<!-- })-->
<!-- .then(() => {-->
<!-- this.error = false-->
<!-- this.$emit('set-tunneled-email', null)-->
<!-- this.updateTransactions({})-->
<!-- this.transactionData = { ...EMPTY_TRANSACTION_DATA }-->
<!-- this.currentTransactionStep = TRANSACTION_STEPS.transactionResultSendSuccess-->
<!-- })-->
<!-- .catch((error) => {-->
<!-- this.errorResult = error.message-->
<!-- this.error = true-->
<!-- this.currentTransactionStep = TRANSACTION_STEPS.transactionResultSendError-->
<!-- })-->
<!-- break-->
<!-- case SEND_TYPES.link:-->
<!-- this.$apollo-->
<!-- .mutate({-->
<!-- mutation: createTransactionLink,-->
<!-- variables: { amount: this.transactionData.amount, memo: this.transactionData.memo },-->
<!-- })-->
<!-- .then((result) => {-->
<!-- this.$emit('set-tunneled-email', null)-->
<!-- const {-->
<!-- data: {-->
<!-- createTransactionLink: { link, amount, memo, validUntil },-->
<!-- },-->
<!-- } = result-->
<!-- this.link = link-->
<!-- this.amount = amount-->
<!-- this.memo = memo-->
<!-- this.validUntil = validUntil-->
<!-- this.transactionData = { ...EMPTY_TRANSACTION_DATA }-->
<!-- this.currentTransactionStep = TRANSACTION_STEPS.transactionResultLink-->
<!-- this.updateTransactions({})-->
<!-- })-->
<!-- .catch((error) => {-->
<!-- this.toastError(error.message)-->
<!-- })-->
<!-- break-->
<!-- default:-->
<!-- throw new Error(`undefined transactionData.selected : ${this.transactionData.selected}`)-->
<!-- }-->
<!-- this.loading = false-->
<!-- this.$router.push({ path: '/send' })-->
<!-- },-->
<!-- onBack() {-->
<!-- this.currentTransactionStep = TRANSACTION_STEPS.transactionForm-->
<!-- this.$mount()-->
<!-- },-->
<!-- updateTransactions(pagination) {-->
<!-- this.$emit('update-transactions', pagination)-->
<!-- },-->
<!-- },-->
<!-- created() {-->
<!-- this.updateTransactions({})-->
<!-- },-->
<!--}-->
<!--</script>-->
<script>
export const SEND_TYPES = {
send: 'send',
link: 'link',
}
</script>
<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useMutation } from '@vue/apollo-composable'
import GddSend, { TRANSACTION_STEPS } from '@/components/GddSend'
import TransactionForm from '@/components/GddSend/TransactionForm'
import TransactionConfirmationSend from '@/components/GddSend/TransactionConfirmationSend'
@ -58,6 +207,7 @@ import TransactionResultSendSuccess from '@/components/GddSend/TransactionResult
import TransactionResultSendError from '@/components/GddSend/TransactionResultSendError'
import TransactionResultLink from '@/components/GddSend/TransactionResultLink'
import { sendCoins, createTransactionLink } from '@/graphql/mutations.js'
import { useAppToast } from '@/composables/useToast'
const EMPTY_TRANSACTION_DATA = {
identifier: '',
@ -65,125 +215,125 @@ const EMPTY_TRANSACTION_DATA = {
memo: '',
}
export const SEND_TYPES = {
send: 'send',
link: 'link',
const props = defineProps({
balance: { type: Number, default: 0 },
GdtBalance: { type: Number, default: 0 },
transactions: {
type: Array,
default: () => [],
},
pending: {
type: Boolean,
default: true,
},
})
const emit = defineEmits(['set-tunneled-email', 'update-transactions'])
const router = useRouter()
const { toastError } = useAppToast()
const transactionData = reactive({ ...EMPTY_TRANSACTION_DATA })
const error = ref(false)
const errorResult = ref('')
const currentTransactionStep = ref(TRANSACTION_STEPS.transactionForm)
const loading = ref(false)
const link = ref(null)
const amount = ref(0)
const memo = ref('')
const validUntil = ref(null)
const { mutate: sendCoinsMutation } = useMutation(sendCoins)
const { mutate: createTransactionLinkMutation } = useMutation(createTransactionLink)
function setTransaction(data) {
Object.assign(transactionData, data)
currentTransactionStep.value =
data.selected === SEND_TYPES.send
? TRANSACTION_STEPS.transactionConfirmationSend
: TRANSACTION_STEPS.transactionConfirmationLink
}
export default {
name: 'Send',
components: {
GddSend,
TransactionForm,
TransactionConfirmationSend,
TransactionConfirmationLink,
TransactionResultSendSuccess,
TransactionResultSendError,
TransactionResultLink,
},
data() {
return {
transactionData: { ...EMPTY_TRANSACTION_DATA },
error: false,
errorResult: '',
currentTransactionStep: TRANSACTION_STEPS.transactionForm,
loading: false,
link: null,
async function sendTransaction() {
loading.value = true
error.value = false
try {
if (transactionData.selected === SEND_TYPES.send) {
await sendCoinsMutation({
recipientCommunityIdentifier: transactionData.targetCommunity.uuid,
recipientIdentifier: transactionData.identifier,
amount: transactionData.amount,
memo: transactionData.memo,
})
error.value = false
emit('set-tunneled-email', null)
updateTransactions({})
Object.assign(transactionData, EMPTY_TRANSACTION_DATA)
currentTransactionStep.value = TRANSACTION_STEPS.transactionResultSendSuccess
} else if (transactionData.selected === SEND_TYPES.link) {
const result = await createTransactionLinkMutation({
amount: transactionData.amount,
memo: transactionData.memo,
})
emit('set-tunneled-email', null)
const {
link: newLink,
amount: newAmount,
memo: newMemo,
validUntil: newValidUntil,
} = result.data.createTransactionLink
link.value = newLink
amount.value = newAmount
memo.value = newMemo
validUntil.value = newValidUntil
Object.assign(transactionData, EMPTY_TRANSACTION_DATA)
currentTransactionStep.value = TRANSACTION_STEPS.transactionResultLink
updateTransactions({})
} else {
throw new Error(`undefined transactionData.selected : ${transactionData.selected}`)
}
},
props: {
balance: { type: Number, default: 0 },
GdtBalance: { type: Number, default: 0 },
transactions: {
default: () => [],
},
pending: {
type: Boolean,
default: true,
},
},
methods: {
setTransaction(data) {
this.transactionData = { ...data }
switch (data.selected) {
case SEND_TYPES.send:
this.currentTransactionStep = TRANSACTION_STEPS.transactionConfirmationSend
break
case SEND_TYPES.link:
this.currentTransactionStep = TRANSACTION_STEPS.transactionConfirmationLink
break
}
},
async sendTransaction() {
this.loading = true
this.error = false
switch (this.transactionData.selected) {
case SEND_TYPES.send:
this.$apollo
.mutate({
mutation: sendCoins,
variables: {
// from target community we need only the uuid
recipientCommunityIdentifier: this.transactionData.targetCommunity.uuid,
recipientIdentifier: this.transactionData.identifier,
amount: this.transactionData.amount,
memo: this.transactionData.memo,
},
})
.then(() => {
this.error = false
this.$emit('set-tunneled-email', null)
this.updateTransactions({})
this.transactionData = { ...EMPTY_TRANSACTION_DATA }
this.currentTransactionStep = TRANSACTION_STEPS.transactionResultSendSuccess
})
.catch((error) => {
this.errorResult = error.message
this.error = true
this.currentTransactionStep = TRANSACTION_STEPS.transactionResultSendError
})
break
case SEND_TYPES.link:
this.$apollo
.mutate({
mutation: createTransactionLink,
variables: { amount: this.transactionData.amount, memo: this.transactionData.memo },
})
.then((result) => {
this.$emit('set-tunneled-email', null)
const {
data: {
createTransactionLink: { link, amount, memo, validUntil },
},
} = result
this.link = link
this.amount = amount
this.memo = memo
this.validUntil = validUntil
this.transactionData = { ...EMPTY_TRANSACTION_DATA }
this.currentTransactionStep = TRANSACTION_STEPS.transactionResultLink
this.updateTransactions({})
})
.catch((error) => {
this.toastError(error.message)
})
break
default:
throw new Error(`undefined transactionData.selected : ${this.transactionData.selected}`)
}
this.loading = false
this.$router.push({ path: '/send' })
},
onBack() {
this.currentTransactionStep = TRANSACTION_STEPS.transactionForm
this.$mount()
},
updateTransactions(pagination) {
this.$emit('update-transactions', pagination)
},
},
created() {
this.updateTransactions({})
},
} catch (error) {
if (transactionData.selected === SEND_TYPES.send) {
errorResult.value = error.message
error.value = true
currentTransactionStep.value = TRANSACTION_STEPS.transactionResultSendError
} else {
toastError(error.message)
}
} finally {
loading.value = false
await router.push({ path: '/send' })
}
}
function onBack() {
currentTransactionStep.value = TRANSACTION_STEPS.transactionForm
}
function updateTransactions(pagination) {
emit('update-transactions', pagination)
}
// Equivalent to created hook
updateTransactions({})
// Expose necessary methods and reactive variables
// defineExpose({
// setTransaction,
// sendTransaction,
// onBack,
// updateTransactions,
// transactionData,
// error,
// errorResult,
// currentTransactionStep,
// loading,
// link,
// amount,
// memo,
// validUntil,
// })
</script>

140
frontend/src/pages/Settings.vue
View File

@ -7,21 +7,21 @@
{{ $t('settings.info') }}
</div>
<b-row>
<b-col cols="12" md="6" lg="6">
<BRow>
<BCol cols="12" md="6" lg="6">
<user-name />
</b-col>
<b-col cols="12" md="6" lg="6">
</BCol>
<BCol cols="12" md="6" lg="6">
<b-form-group :label="$t('form.email')" :description="$t('settings.emailInfo')">
<b-form-input v-model="email" readonly></b-form-input>
</b-form-group>
</b-col>
</b-row>
</BCol>
</BRow>
<hr />
<b-form>
<b-row class="mt-3">
<b-col cols="12" md="6" lg="6">
<BRow class="mt-3">
<BCol cols="12" md="6" lg="6">
<label>{{ $t('form.firstname') }}</label>
<b-form-input
v-model="firstName"
@ -29,8 +29,8 @@
data-test="firstname"
trim
></b-form-input>
</b-col>
<b-col cols="12" md="6" lg="6">
</BCol>
<BCol cols="12" md="6" lg="6">
<label>{{ $t('form.lastname') }}</label>
<b-form-input
v-model="lastName"
@ -38,8 +38,8 @@
data-test="lastname"
trim
></b-form-input>
</b-col>
</b-row>
</BCol>
</BRow>
<div v-if="!isDisabled" class="mt-4 pt-4 text-center">
<b-button
type="submit"
@ -52,19 +52,19 @@
</div>
</b-form>
<hr />
<b-row>
<b-col cols="12" md="6" lg="6">{{ $t('language') }}</b-col>
<b-col cols="12" md="6" lg="6" class="text-right">
<BRow>
<BCol cols="12" md="6" lg="6">{{ $t('language') }}</BCol>
<BCol cols="12" md="6" lg="6" class="text-right">
<user-language />
</b-col>
</b-row>
</BCol>
</BRow>
<hr />
<div class="mt-5">{{ $t('form.password') }}</div>
<user-password />
<hr />
<b-row class="mb-5">
<b-col cols="12" md="6" lg="6">
<BRow class="mb-5">
<BCol cols="12" md="6" lg="6">
{{ $t('settings.newsletter.newsletter') }}
<div class="text-small">
{{
@ -73,21 +73,21 @@
: $t('settings.newsletter.newsletterFalse')
}}
</div>
</b-col>
<b-col cols="12" md="6" lg="6" class="text-right">
</BCol>
<BCol cols="12" md="6" lg="6" class="text-right">
<user-newsletter />
</b-col>
</b-row>
</BCol>
</BRow>
</b-tab>
<div v-if="isCommunityService">
<b-tab class="community-service-tabs" :title="$t('settings.community')">
<div class="h2">{{ $t('settings.allow-community-services') }}</div>
<div v-if="isHumhub" class="mt-3">
<b-row>
<b-col cols="12" md="6" lg="6">
<BRow>
<BCol cols="12" md="6" lg="6">
<div class="h3">{{ $t('Humhub.title') }}</div>
</b-col>
<b-col cols="12" md="6" lg="6" class="text-right">
</BCol>
<BCol cols="12" md="6" lg="6" class="text-right">
<user-settings-switch
@valueChanged="humhubStateSwitch"
:initialValue="$store.state.humhubAllowed"
@ -97,28 +97,28 @@
:disabledText="$t('settings.humhub.disabled')"
:notAllowedText="$t('settings.humhub.delete-disabled')"
/>
</b-col>
</b-row>
</BCol>
</BRow>
<div class="h4">{{ $t('Humhub.desc') }}</div>
<b-row v-if="humhubAllowed" class="mb-4 humhub-publish-name-row">
<b-col cols="12" md="6" lg="6">
<BRow v-if="humhubAllowed" class="mb-4 humhub-publish-name-row">
<BCol cols="12" md="6" lg="6">
{{ $t('settings.humhub.naming-format') }}
</b-col>
<b-col cols="12" md="6" lg="6">
</BCol>
<BCol cols="12" md="6" lg="6">
<user-naming-format
:initialValue="$store.state.humhubPublishName"
:attrName="'humhubPublishName'"
:successMessage="$t('settings.humhub.publish-name.updated')"
/>
</b-col>
</b-row>
</BCol>
</BRow>
</div>
<div v-if="isGMS" class="mt-3">
<b-row>
<b-col cols="12" md="6" lg="6">
<BRow>
<BCol cols="12" md="6" lg="6">
<div class="h3">{{ $t('GMS.title') }}</div>
</b-col>
<b-col cols="12" md="6" lg="6" class="text-right">
</BCol>
<BCol cols="12" md="6" lg="6" class="text-right">
<user-settings-switch
@valueChanged="gmsStateSwitch"
:initialValue="$store.state.gmsAllowed"
@ -126,61 +126,61 @@
:enabledText="$t('settings.GMS.enabled')"
:disabledText="$t('settings.GMS.disabled')"
/>
</b-col>
</b-row>
</BCol>
</BRow>
<div class="h4 mt-3">{{ $t('GMS.desc') }}</div>
<div v-if="gmsAllowed">
<b-row class="mb-4">
<b-col cols="12" md="6" lg="6">
<BRow class="mb-4">
<BCol cols="12" md="6" lg="6">
{{ $t('settings.GMS.naming-format') }}
</b-col>
<b-col cols="12" md="6" lg="6">
</BCol>
<BCol cols="12" md="6" lg="6">
<user-naming-format
:initialValue="$store.state.gmsPublishName"
:attrName="'gmsPublishName'"
:successMessage="$t('settings.GMS.publish-name.updated')"
/>
</b-col>
</b-row>
<b-row class="mb-4">
<b-col cols="12" md="6" lg="6">
</BCol>
</BRow>
<BRow class="mb-4">
<BCol cols="12" md="6" lg="6">
{{ $t('settings.GMS.location-format') }}
</b-col>
<b-col cols="12" md="6" lg="6">
</BCol>
<BCol cols="12" md="6" lg="6">
<user-g-m-s-location-format />
</b-col>
</b-row>
<b-row class="mb-5">
<b-col cols="12" md="6" lg="6">
</BCol>
</BRow>
<BRow class="mb-5">
<BCol cols="12" md="6" lg="6">
{{ $t('settings.GMS.location.label') }}
</b-col>
<b-col cols="12" md="6" lg="6">
</BCol>
<BCol cols="12" md="6" lg="6">
<user-g-m-s-location />
</b-col>
</b-row>
</BCol>
</BRow>
</div>
</div>
<div v-else>
<b-row>
<b-col cols="12" md="6" lg="6">
<BRow>
<BCol cols="12" md="6" lg="6">
<div class="h3 text-muted">{{ $t('GMS.title') }}</div>
</b-col>
<b-col cols="12" md="6" lg="6" class="text-right">
</BCol>
<BCol cols="12" md="6" lg="6" class="text-right">
<user-settings-switch :disabled="true" />
</b-col>
</b-row>
</BCol>
</BRow>
<div class="h4 mt-3 text-muted">{{ $t('GMS.desc') }}</div>
</div>
</b-tab>
</div>
</b-tabs>
<!-- TODO<b-row>
<b-col cols="12" md="6" lg="6">{{ $t('settings.darkMode') }}</b-col>
<b-col cols="12" md="6" lg="6" class="text-right">
<!-- TODO<BRow>
<BCol cols="12" md="6" lg="6">{{ $t('settings.darkMode') }}</BCol>
<BCol cols="12" md="6" lg="6" class="text-right">
<b-form-checkbox v-model="darkMode" name="dark-mode" switch aligne></b-form-checkbox>
</b-col>
</b-row> -->
</BCol>
</BRow> -->
</div>
</template>
<script>

2
frontend/src/pages/Transactions.vue
View File

@ -106,7 +106,7 @@ import { useLazyQuery } from '@vue/apollo-composable'
import GddTransactionList from '@/components/GddTransactionList'
import GdtTransactionList from '@/components/GdtTransactionList'
import { listGDTEntriesQuery } from '@/graphql/queries'
import { useAppToast } from '../composables/useToast'
import { useAppToast } from '@/composables/useToast'
const props = defineProps({
gdt: { type: Boolean, default: false },

8
frontend/src/pages/UserSearch.vue
View File

@ -11,15 +11,15 @@
<br />
</span>
</div>
<b-row class="my-5">
<b-col cols="12">
<BRow class="my-5">
<BCol cols="12">
<div class="text-lg-right">
<b-button variant="gradido" :href="this.gmsUri" target="_blank">
{{ $t('usersearch.button') }}
</b-button>
</div>
</b-col>
</b-row>
</BCol>
</BRow>
</b-container>
</div>
</template>

11
frontend/vite.config.js
View File

@ -1,4 +1,6 @@
import { defineConfig } from 'vite'
// import { fileURLToPath, URL } from 'url';
import path from 'path'
import commonjs from 'vite-plugin-commonjs'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
@ -7,7 +9,7 @@ import IconsResolve from 'unplugin-icons/resolver'
import { BootstrapVueNextResolver } from 'bootstrap-vue-next'
const path = require('path')
// const path = require('path')
// https://vitejs.dev/config/
export default defineConfig({
@ -43,4 +45,11 @@ export default defineConfig({
}),
commonjs(),
],
css: {
preprocessorOptions: {
scss: {
additionalData: `@import "@/assets/scss/gradido.scss";`,
},
},
},
})