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

add slotsystem

Browse Source
This commit is contained in:
ogerly 2022-08-18 15:27:02 +02:00
parent edbe59b5ba
commit efac17a9a9
6 changed files with 147 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
admin/src/components/ContributionMessages/ContributionMessagesFormular.vue
View File

@ -1,18 +1,33 @@
<template>
<div class="contribution-messages-formular">
<b-form @submit="onSubmit" @reset="onReset">
<b-form-textarea
id="textarea"
v-model="form.text"
placeholder="Enter something..."
rows="3"
max-rows="6"
></b-form-textarea>
<p v-if="form.text !== ''" class="mt-5">Vorschau</p>
<pre class="ml-3 mt-3 mb-5">{{ form.text }}</pre>
<b-button type="submit" variant="primary">Submit</b-button>
<b-button type="reset" variant="danger">Reset</b-button>
</b-form>
<div v-if="form.text !== ''" class="mt-5">
<h4>Vorschau</h4>
<div class="border border-info m-5">
<b-row>
<b-col cols="1"><b-avatar square text="AA"></b-avatar></b-col>
<b-col cols="11">
<pre class="ml-3 mt-3 mb-5">
<span class="ml-2 mr-2">
{{ $store.state.moderator.firstName }} {{ $store.state.moderator.lastName }}
</span>
{{ form.text }}</pre>
</b-col>
</b-row>
</div>
</div>
<div>
<b-form @submit="onSubmit" @reset="onReset">
<b-form-textarea
id="textarea"
v-model="form.text"
placeholder="Enter something..."
rows="3"
max-rows="6"
></b-form-textarea>
<b-button type="submit" variant="primary">Submit</b-button>
<b-button type="reset" variant="danger">Reset</b-button>
</b-form>
</div>
</div>
</template>
<script>

48
admin/src/components/ContributionMessages/ContributionMessagesList.vue
View File

@ -3,15 +3,37 @@
ContributionMessagesList
<b-container>
<div v-for="message in messages">
{{ message }}
<div v-for="message in messages" v-bind:key="message.id">
<contribution-messages-list-item :typeId="message.isModerator">
<template #1>
<is-moderator :message="message"></is-moderator>
</template>
<template #0>
<is-not-moderator :message="message" class="text-right"></is-not-moderator>
</template>
</contribution-messages-list-item>
</div>
</b-container>
<br />
<br />
<br />
<contribution-messages-formular />
</div>
</template>
<script>
import ContributionMessagesListItem from './slots/ContributionMessagesListItem.vue'
import IsModerator from './slots/IsModerator.vue'
import IsNotModerator from './slots/IsNotModerator.vue'
import ContributionMessagesFormular from '../ContributionMessages/ContributionMessagesFormular.vue'
export default {
name: 'ContributionMessagesList',
components: {
ContributionMessagesListItem,
IsModerator,
IsNotModerator,
ContributionMessagesFormular,
},
data() {
return {
messages: [
@ -22,7 +44,7 @@ export default {
uuid: '1',
firstName: 'peter',
lastName: 'lustig',
isModerator: true,
isModerator: 1,
},
{
id: '1',
@ -31,19 +53,33 @@ export default {
uuid: '2',
firstName: 'bibi',
lastName: 'bloxberg',
isModerator: false,
isModerator: 0,
},
{
id: '0',
id: '2',
msgid: '0',
memo: 'oG iu Hih hi ',
uuid: '1',
firstName: 'peter',
lastName: 'lustig',
isModerator: true,
isModerator: 1,
},
{
id: '3',
msgid: '0',
memo: 'zdg gdggs ds gdggusgdug nftz s s ZF TZfz FF 564c ',
uuid: '2',
firstName: 'bibi',
lastName: 'bloxberg',
isModerator: 0,
},
],
}
},
}
</script>
<style scoped>
.temp-message {
margin-top: 50px;
}
</style>

16
admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue Normal file
View File

@ -0,0 +1,16 @@
<template>
<div>
<slot :name="typeId"></slot>
</div>
</template>
<script>
export default {
name: 'ContributionMessagesListItem',
props: {
typeId: {
type: Number,
required: true,
},
},
}
</script>

27
admin/src/components/ContributionMessages/slots/IsModerator.vue Normal file
View File

@ -0,0 +1,27 @@
<template>
<div class="slot-is-moderator">
<b-avatar square text="AA"></b-avatar>
<span class="ml-2 mr-2">{{ message.firstName }} {{ message.lastName }}</span>
<div class="mt-2">{{ message }}</div>
</div>
</template>
<script>
export default {
props: {
message: {
type: Object,
default() {
return {}
},
},
},
}
</script>
<style>
.slot-is-moderator {
clear: both;
background-color: rgb(250, 158, 207);
width: 75%;
margin-top: 20px;
}
</style>

33
admin/src/components/ContributionMessages/slots/IsNotModerator.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="slot-is-not-moderator">
<div class="text-right">
<b-avatar text="BV"></b-avatar>
<span class="ml-2 mr-2 text-bold">{{ message.firstName }} {{ message.lastName }}</span>
<div class="mt-2">{{ message }}</div>
</div>
</div>
</template>
<script>
export default {
props: {
message: {
type: Object,
default() {
return {}
},
},
},
}
</script>
<style>
.clear {
clear: both;
}
.slot-is-not-moderator {
clear: both;
float: right;
background-color: aquamarine;
width: 75%;
margin-top: 20px;
}
</style>

8
admin/src/components/Tables/OpenCreationsTable.vue
View File

@ -51,12 +51,7 @@
/>
</div>
<div v-else>
<contribution-messages-formular />
<hr />
<contribution-messages-list />
<br />
<br />
<br />
</div>
</template>
</row-details>
@ -69,7 +64,7 @@
import { toggleRowDetails } from '../../mixins/toggleRowDetails'
import RowDetails from '../RowDetails.vue'
import EditCreationFormular from '../EditCreationFormular.vue'
import ContributionMessagesFormular from '../ContributionMessages/ContributionMessagesFormular.vue'
import ContributionMessagesList from '../ContributionMessages/ContributionMessagesList.vue'
export default {
@ -78,7 +73,6 @@ export default {
components: {
EditCreationFormular,
RowDetails,
ContributionMessagesFormular,
ContributionMessagesList,
},
props: {