mirror of
https://github.com/IT4Change/gradido.git
synced 2025-12-13 07:45:54 +00:00
add components AutomaticCreation, AutomaticCreationForm, AutomaticCreationList
This commit is contained in:
ogerly
parent
c5f8534bd8
commit
8a612c60fb
@ -1,8 +0,0 @@
|
||||
{
|
||||
"fields": ["Name", "Text", "GDD", "startDate", "endDate", "delete", "edit", "show"],
|
||||
"ContributionLinks":[
|
||||
{"Name":"John1", "Text":"Doe1 ", "GDD":"200", "startDate":"", "endDate":""},
|
||||
{"Name":"John2", "Text":"Doe2", "GDD":"300", "startDate":"", "endDate":""},
|
||||
{"Name":"John3", "Text":"Doe3", "GDD":"400", "startDate":"", "endDate":""}
|
||||
]
|
||||
}
|
||||
40
admin/src/components/AutomaticCreation.vue
Normal file
40
admin/src/components/AutomaticCreation.vue
Normal file
@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<div>
|
||||
<b-card
|
||||
v-show="items.length > 1"
|
||||
border-variant="success"
|
||||
header="open Contribution"
|
||||
header-bg-variant="success"
|
||||
header-text-variant="white"
|
||||
class="mt-5"
|
||||
>
|
||||
<b-button v-b-toggle.newContribution class="my-3">+ New Contribution</b-button>
|
||||
|
||||
<b-collapse id="newContribution" class="mt-2">
|
||||
<b-card>
|
||||
<p class="h2 ml-5">New Contribution</p>
|
||||
<automatic-creation-form />
|
||||
</b-card>
|
||||
</b-collapse>
|
||||
|
||||
<b-card-text>
|
||||
<automatic-creation-list :items="items" />
|
||||
</b-card-text>
|
||||
</b-card>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import AutomaticCreationForm from './AutomaticCreationForm.vue'
|
||||
import AutomaticCreationList from './AutomaticCreationList.vue'
|
||||
|
||||
export default {
|
||||
name: 'AutomaticCreation',
|
||||
props: {
|
||||
items: { type: Array },
|
||||
},
|
||||
components: {
|
||||
AutomaticCreationForm,
|
||||
AutomaticCreationList,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
70
admin/src/components/AutomaticCreationForm.vue
Normal file
70
admin/src/components/AutomaticCreationForm.vue
Normal file
@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<div>
|
||||
<b-form class="m-5" @submit="onSubmit">
|
||||
<b-form-group id="input-group-1" label="Name:">
|
||||
<b-form-input
|
||||
v-model="form.name"
|
||||
type="text"
|
||||
placeholder="Name Contribution"
|
||||
required
|
||||
></b-form-input>
|
||||
</b-form-group>
|
||||
<b-form-group id="input-group-2" label="Beschreibung:">
|
||||
<b-form-textarea
|
||||
v-model="form.text"
|
||||
placeholder="Text Contribution"
|
||||
required
|
||||
></b-form-textarea>
|
||||
</b-form-group>
|
||||
<b-form-group id="input-group-3" label="Betrag:">
|
||||
<b-form-input v-model="form.amount" type="number" placeholder="0" required></b-form-input>
|
||||
</b-form-group>
|
||||
<div>
|
||||
<b-form-group id="input-group-4" label="Start-Datum:">
|
||||
<b-form-datepicker
|
||||
v-model="form.startDate"
|
||||
:min="min"
|
||||
class="mb-4"
|
||||
required
|
||||
></b-form-datepicker>
|
||||
</b-form-group>
|
||||
|
||||
<label for="datepicker-invalid">End-Datum</label>
|
||||
<b-form-datepicker
|
||||
v-model="form.endDate"
|
||||
:min="form.startDate ? form.startDate : min"
|
||||
class="mb-4"
|
||||
required
|
||||
></b-form-datepicker>
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
<b-button type="submit" variant="primary">Anlegen</b-button>
|
||||
<b-button type="reset" variant="danger">Reset</b-button>
|
||||
</div>
|
||||
</b-form>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'AutomaticCreationForm',
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
name: null,
|
||||
text: null,
|
||||
amount: null,
|
||||
startDate: null,
|
||||
endDate: null,
|
||||
},
|
||||
min: new Date(),
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSubmit(event) {
|
||||
event.preventDefault()
|
||||
if (this.form.name === null || this.form.text === null) return
|
||||
alert(JSON.stringify(this.form))
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
34
admin/src/components/AutomaticCreationList.vue
Normal file
34
admin/src/components/AutomaticCreationList.vue
Normal file
@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<div>
|
||||
<b-table striped hover :items="items" :fields="fields">
|
||||
<template #cell(delete)>
|
||||
<b-button variant="danger" size="md" class="mr-2">
|
||||
<b-icon icon="trash" variant="light"></b-icon>
|
||||
</b-button>
|
||||
</template>
|
||||
<template #cell(edit)>
|
||||
<b-button variant="success" size="md" class="mr-2">
|
||||
<b-icon icon="pencil" variant="light"></b-icon>
|
||||
</b-button>
|
||||
</template>
|
||||
<template #cell(show)>
|
||||
<b-button variant="info" size="md" class="mr-2">
|
||||
<b-icon icon="eye" variant="light"></b-icon>
|
||||
</b-button>
|
||||
</template>
|
||||
</b-table>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'AutomaticCreationList',
|
||||
props: {
|
||||
items: { type: Array },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fields: ['Name', 'Text', 'GDD', 'startDate', 'endDate', 'delete', 'edit', 'show'],
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
53
admin/src/components/ContributionsForm.vue
Normal file
53
admin/src/components/ContributionsForm.vue
Normal file
@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div>
|
||||
<b-form class="m-5" @submit="onSubmit">
|
||||
<validation-provider name="Name" :rules="{ required: true, min: 3 }">
|
||||
<b-form-group id="input-group-1" label="Name:">
|
||||
<b-form-input
|
||||
v-model="form.name"
|
||||
type="text"
|
||||
placeholder="Name Contribution"
|
||||
required
|
||||
></b-form-input>
|
||||
</b-form-group>
|
||||
</validation-provider>
|
||||
<b-form-group id="input-group-2" label="Beschreibung:">
|
||||
<b-form-textarea
|
||||
v-model="form.text"
|
||||
placeholder="Text Contribution"
|
||||
required
|
||||
></b-form-textarea>
|
||||
</b-form-group>
|
||||
<b-form-group id="input-group-3" label="Betrag:">
|
||||
<b-form-input v-model="form.amount" type="number" placeholder="0" required></b-form-input>
|
||||
</b-form-group>
|
||||
<div>
|
||||
<b-form-group id="input-group-4" label="Start-Datum:">
|
||||
<b-form-datepicker
|
||||
v-model="form.startDate"
|
||||
:min="min"
|
||||
class="mb-4"
|
||||
required
|
||||
></b-form-datepicker>
|
||||
</b-form-group>
|
||||
|
||||
<label for="datepicker-invalid">End-Datum</label>
|
||||
<b-form-datepicker
|
||||
v-model="form.endDate"
|
||||
:min="form.startDate ? form.startDate : min"
|
||||
class="mb-4"
|
||||
required
|
||||
></b-form-datepicker>
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
<b-button type="submit" variant="primary">Anlegen</b-button>
|
||||
<b-button type="reset" variant="danger">Reset</b-button>
|
||||
</div>
|
||||
</b-form>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'ContributionsForm',
|
||||
}
|
||||
</script>
|
||||
@ -28,121 +28,28 @@
|
||||
</b-link>
|
||||
</b-card-text>
|
||||
</b-card>
|
||||
<div>{{ ContributionLinks }}</div>
|
||||
|
||||
<b-card
|
||||
v-show="items.length > 1"
|
||||
border-variant="success"
|
||||
header="open Contribution"
|
||||
header-bg-variant="success"
|
||||
header-text-variant="white"
|
||||
class="mt-5"
|
||||
>
|
||||
<b-button v-b-toggle.newContribution class="my-3">+ New Contribution</b-button>
|
||||
|
||||
<b-collapse id="newContribution" class="mt-2">
|
||||
<b-card>
|
||||
<p class="h2 ml-5">New Contribution</p>
|
||||
<b-form class="m-5" @submit="onSubmit">
|
||||
<validation-provider name="Name" :rules="{ required: true, min: 3 }">
|
||||
<b-form-group id="input-group-1" label="Name:">
|
||||
<b-form-input
|
||||
v-model="form.name"
|
||||
type="text"
|
||||
placeholder="Name Contribution"
|
||||
required
|
||||
></b-form-input>
|
||||
</b-form-group>
|
||||
</validation-provider>
|
||||
<b-form-group id="input-group-2" label="Beschreibung:">
|
||||
<b-form-textarea
|
||||
v-model="form.text"
|
||||
placeholder="Text Contribution"
|
||||
required
|
||||
></b-form-textarea>
|
||||
</b-form-group>
|
||||
<b-form-group id="input-group-3" label="Betrag:">
|
||||
<b-form-input
|
||||
v-model="form.amount"
|
||||
type="number"
|
||||
placeholder="0"
|
||||
required
|
||||
></b-form-input>
|
||||
</b-form-group>
|
||||
<div>
|
||||
<b-form-group id="input-group-4" label="Start-Datum:">
|
||||
<b-form-datepicker
|
||||
v-model="form.startDate"
|
||||
:min="min"
|
||||
class="mb-4"
|
||||
required
|
||||
></b-form-datepicker>
|
||||
</b-form-group>
|
||||
|
||||
<label for="datepicker-invalid">End-Datum</label>
|
||||
<b-form-datepicker
|
||||
v-model="form.endDate"
|
||||
:min="form.startDate ? form.startDate : min"
|
||||
class="mb-4"
|
||||
required
|
||||
></b-form-datepicker>
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
<b-button type="submit" variant="primary">Anlegen</b-button>
|
||||
<b-button type="reset" variant="danger">Reset</b-button>
|
||||
</div>
|
||||
</b-form>
|
||||
</b-card>
|
||||
</b-collapse>
|
||||
|
||||
<b-card-text>
|
||||
<b-table striped hover :items="items" :fields="fields">
|
||||
<template #cell(delete)>
|
||||
<b-button variant="danger" size="md" class="mr-2">
|
||||
<b-icon icon="trash" variant="light"></b-icon>
|
||||
</b-button>
|
||||
</template>
|
||||
<template #cell(edit)>
|
||||
<b-button variant="success" size="md" class="mr-2">
|
||||
<b-icon icon="pencil" variant="light"></b-icon>
|
||||
</b-button>
|
||||
</template>
|
||||
<template #cell(show)>
|
||||
<b-button variant="info" size="md" class="mr-2">
|
||||
<b-icon icon="eye" variant="light"></b-icon>
|
||||
</b-button>
|
||||
</template>
|
||||
</b-table>
|
||||
</b-card-text>
|
||||
</b-card>
|
||||
<automatic-creation :items="items" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getPendingCreations } from '../graphql/getPendingCreations'
|
||||
import { fields, ContributionLinks } from '../ContributionLinks.json'
|
||||
import AutomaticCreation from '../components/AutomaticCreation.vue'
|
||||
|
||||
export default {
|
||||
name: 'overview',
|
||||
components: {
|
||||
AutomaticCreation,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fields: fields,
|
||||
items: ContributionLinks,
|
||||
form: {
|
||||
name: null,
|
||||
text: null,
|
||||
amount: null,
|
||||
startDate: null,
|
||||
endDate: null,
|
||||
},
|
||||
min: new Date(),
|
||||
items: [
|
||||
{ Name: 'John1', Text: 'Doe1 ', GDD: '200', startDate: '', endDate: '' },
|
||||
{ Name: 'John2', Text: 'Doe2', GDD: '300', startDate: '', endDate: '' },
|
||||
{ Name: 'John3', Text: 'Doe3', GDD: '400', startDate: '', endDate: '' },
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSubmit(event) {
|
||||
event.preventDefault()
|
||||
if (this.form.name === null || this.form.text === null) return
|
||||
alert(JSON.stringify(this.form))
|
||||
},
|
||||
async getPendingCreations() {
|
||||
this.$apollo
|
||||
.query({
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user