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

contributionList style

Browse Source
This commit is contained in:
ogerly 2022-11-24 12:06:24 +01:00
parent 842864d0dc
commit 5f3b19c595
5 changed files with 96 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,7 +12,11 @@
<b>{{ $t('contribution.formText.describeYourCommunity') }}</b>
</div>
</div>
<b-form ref="form" @submit.prevent="submit" class="border p-3">
<b-form
ref="form"
@submit.prevent="submit"
class="border p-3 bg-white appBoxShadow gradido-border-radius"
>
<label>{{ $t('contribution.selectDate') }} {{ $t('math.asterisk') }}</label>
<b-form-datepicker
id="contribution-date"

2
frontend/src/components/Contributions/ContributionList.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="contribution-list container">
<div class="list-group" v-for="item in items" :key="item.id">
<div class="mb-5" v-for="item in items" :key="item.id">
<contribution-list-item
v-bind="item"
:contributionId="item.id"

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

@ -1,7 +1,69 @@
<template>
<div class="contribution-list-item">
<div class="contribution-list-item bg-white appBoxShadow gradido-border-radius p-3">
<slot>
<div class="border p-3 w-100 mb-1" :class="`border-${variant}`">
<div class="">
<b-row>
<b-col cols="2">
<b-avatar :icon="icon" :variant="variant" size="4em"></b-avatar>
</b-col>
<b-col>
<div v-if="firstName" class="mr-3">{{ firstName }} {{ lastName }}</div>
<div class="small">
contributionDate {{ $d(new Date(contributionDate), 'monthAndYear') }}
</div>
<div class="mt-3 h5">Beitragstext</div>
<div>{{ memo }}</div>
<!-- <div class="small">
contributionDate {{ $d(new Date(contributionDate), 'monthAndYear') }}
</div>
<div class="small">createdAt {{ createdAt }}</div> -->
</b-col>
<b-col cols="3">
<div class="small">Schöpfung</div>
<div class="small">{{ amount | GDD }}</div>
</b-col>
<b-col cols="1" @click="visible = !visible">
<collapse-icon class="text-right" :visible="visible" v-if="messagesCount > 0" />
</b-col>
</b-row>
<b-row class="mt-2">
<b-col>
<div
v-if="!['CONFIRMED', 'DELETED'].includes(state) && !allContribution"
class="pointer mr-3"
@click="deleteContribution({ id })"
>
<b-icon icon="trash"></b-icon>
löschen
</div>
</b-col>
<b-col>
<div
v-if="!['CONFIRMED', 'DELETED'].includes(state) && !allContribution"
class="pointer mr-3"
@click="
$emit('update-contribution-form', {
id: id,
contributionDate: contributionDate,
memo: memo,
amount: amount,
})
"
>
<b-icon icon="pencil"></b-icon>
bearbeiten
</div>
</b-col>
<b-col>
<div v-if="messagesCount > 0" class="pointer">
<b-icon icon="chat-dots" @click="visible = !visible"></b-icon>
Moderatorchat
</div>
</b-col>
</b-row>
</div>
<!-- <div class="border p-3 w-100 mb-1" :class="`border-${variant}`">
<div>
<div class="d-inline-flex">
<div class="mr-2">
@ -68,7 +130,7 @@
>
{{ $t('contribution.alert.answerQuestion') }}
</b-button>
<b-collapse :id="collapsId" class="mt-2">
<b-collapse :id="collapsId" class="mt-2" v-model="visible">
<b-card>
<contribution-messages-list
:messages="messages_get"
@ -80,17 +142,30 @@
</b-card>
</b-collapse>
</div>
</div>
</div> -->
<b-collapse :id="collapsId" class="mt-2" v-model="visible">
<b-card>
<contribution-messages-list
:messages="messages_get"
:state="state"
:contributionId="contributionId"
@get-list-contribution-messages="getListContributionMessages"
@update-state="updateState"
/>
</b-card>
</b-collapse>
</slot>
</div>
</template>
<script>
import CollapseIcon from '../TransactionRows/CollapseIcon'
import ContributionMessagesList from '@/components/ContributionMessages/ContributionMessagesList.vue'
import { listContributionMessages } from '../../graphql/queries.js'
export default {
name: 'ContributionListItem',
components: {
CollapseIcon,
ContributionMessagesList,
},
props: {
@ -132,6 +207,7 @@ export default {
state: {
type: String,
required: false,
default: '',
},
messagesCount: {
type: Number,
@ -151,12 +227,14 @@ export default {
return {
inProcess: true,
messages_get: [],
visible: false,
}
},
computed: {
icon() {
if (this.deletedAt) return 'x-circle'
if (this.confirmedAt) return 'check'
if (this.state === 'IN_PROGRESS') return 'question-square'
return 'bell-fill'
},
variant() {
@ -200,5 +278,10 @@ export default {
this.$emit('update-state', id)
},
},
watch: {
visible() {
if (this.visible) this.getListContributionMessages()
},
},
}
</script>

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

@ -1,5 +1,5 @@
<template>
<div class="open-creations-amount">
<div class="open-creations-amount bg-white appBoxShadow gradido-border-radius p-4">
<b-table striped hover :items="items"></b-table>
</div>
</template>

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

@ -1,9 +1,9 @@
<template>
<div class="community-page">
<open-creations-amount v-if="hashLink === '#edit'" />
<div>
<b-tabs no-nav-style v-model="tabIndex" content-class="mt-3" align="center">
<b-tab>
<open-creations-amount />
<contribution-form
@set-contribution="setContribution"
@update-contribution="updateContribution"
@ -41,10 +41,10 @@
</div>
</template>
<script>
import OpenCreationsAmount from '@/components/Contributions/OpenCreationsAmount.vue'
import ContributionForm from '@/components/Contributions/ContributionForm.vue'
import ContributionList from '@/components/Contributions/ContributionList.vue'
import ContributionListInfo from '@/components/Contributions/ContributionListInfo.vue'
import OpenCreationsAmount from '@/components/Contributions/OpenCreationsAmount.vue'
import { createContribution, updateContribution, deleteContribution } from '@/graphql/mutations'
import { listContributions, listAllContributions, verifyLogin } from '@/graphql/queries'