mirror of
https://github.com/IT4Change/gradido.git
synced 2025-12-13 07:45:54 +00:00
add momentjs, add component CreateFormular.vue formular for creating gdd
This commit is contained in:
ogerly
parent
3184639292
commit
4cb7abdc9b
@ -33,11 +33,13 @@
|
||||
"dotenv-webpack": "^7.0.3",
|
||||
"graphql": "^15.6.1",
|
||||
"jest": "26.6.3",
|
||||
"moment": "^2.29.1",
|
||||
"stats-webpack-plugin": "^0.7.0",
|
||||
"vue": "^2.6.11",
|
||||
"vue-apollo": "^3.0.8",
|
||||
"vue-i18n": "^8.26.5",
|
||||
"vue-jest": "^3.0.7",
|
||||
"vue-moment": "^4.1.0",
|
||||
"vue-router": "^3.5.3",
|
||||
"vuex": "^3.6.2"
|
||||
},
|
||||
|
||||
66
admin/src/components/CreateFormular.vue
Normal file
66
admin/src/components/CreateFormular.vue
Normal file
@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<div>
|
||||
<b-form>
|
||||
<b-row class="m-4">
|
||||
<b-col>
|
||||
<b-form-radio name="radio-size" size="lg">{{ MonatBevorLast }}</b-form-radio>
|
||||
</b-col>
|
||||
<b-col>
|
||||
<b-form-radio name="radio-size" size="lg">{{ MonatLast }}</b-form-radio>
|
||||
</b-col>
|
||||
<b-col>
|
||||
<b-form-radio name="radio-size" size="lg">{{ MonatAktuell }}</b-form-radio>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row class="m-4">
|
||||
<div>
|
||||
<b-form-textarea
|
||||
id="textarea-state"
|
||||
v-model="text"
|
||||
:state="text.length >= 10"
|
||||
placeholder="Enter at least 10 characters"
|
||||
rows="3"
|
||||
></b-form-textarea>
|
||||
</div>
|
||||
</b-row>
|
||||
<b-row class="m-4">
|
||||
<label for="range-2 h4">
|
||||
Betrag Auswählen
|
||||
<span class="mt-2 h3" v-if="value > 0">{{ value }} GDD</span>
|
||||
</label>
|
||||
<b-input
|
||||
id="range-2"
|
||||
v-model="value"
|
||||
type="range"
|
||||
min="0"
|
||||
max="1000"
|
||||
step="10"
|
||||
class="mr-4 ml-4"
|
||||
></b-input>
|
||||
</b-row>
|
||||
<b-row class="m-4">
|
||||
<b-col class="text-center"><b-button type="reset" variant="danger">Reset</b-button></b-col>
|
||||
<b-col class="text-center">
|
||||
<div class="text-right">
|
||||
<b-button type="submit" variant="primary">Submit</b-button>
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-form>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'CreateFormular',
|
||||
data() {
|
||||
return {
|
||||
text: 'datatext',
|
||||
value: 0,
|
||||
MonatAktuell: this.$moment().format('MMMM'),
|
||||
MonatLast: this.$moment().subtract(1, 'month').format('MMMM'),
|
||||
MonatBevorLast: this.$moment().subtract(2, 'month').format('MMMM'),
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
}
|
||||
</script>
|
||||
@ -1,22 +1,86 @@
|
||||
<template>
|
||||
<div>
|
||||
<b-table :items="items" :fields="fields" caption-top>
|
||||
<template #table-caption>This is a table caption at the top.</template>
|
||||
<b-table :items="items" :fields="fields" :filter="criteria" caption-top striped hover>
|
||||
<template #cell(checkbox)="row">
|
||||
<!-- As `row.showDetails` is one-way, we call the toggleDetails function on @change -->
|
||||
<b-form-checkbox v-model="row.detailsShowing" @change="row.toggleDetails">
|
||||
Details via check
|
||||
</b-form-checkbox>
|
||||
</template>
|
||||
<template #table-caption>
|
||||
<div>
|
||||
<b-form-input
|
||||
v-model="criteria"
|
||||
placeholder="User suche"
|
||||
class="bg-color-gray"
|
||||
></b-form-input>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #cell(show_details)="row">
|
||||
<b-button size="sm" @click="row.toggleDetails" class="mr-2">
|
||||
{{ row.detailsShowing ? 'Hide' : 'Show' }} Details
|
||||
</b-button>
|
||||
</template>
|
||||
|
||||
<template #row-details="row">
|
||||
<b-card>
|
||||
<b-row class="mb-2">
|
||||
<b-col sm="3" class="text-sm-right"><b>Age:</b></b-col>
|
||||
<b-col>{{ row.item.age }}</b-col>
|
||||
</b-row>
|
||||
|
||||
<b-row class="mb-2">
|
||||
<b-col sm="3" class="text-sm-right"><b>Is Active:</b></b-col>
|
||||
<b-col>{{ row.item.isActive }}</b-col>
|
||||
</b-row>
|
||||
<create-formular />
|
||||
|
||||
<b-button size="sm" @click="row.toggleDetails">Hide Details</b-button>
|
||||
</b-card>
|
||||
</template>
|
||||
</b-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CreateFormular from '../components/CreateFormular.vue'
|
||||
|
||||
export default {
|
||||
name: 'UserTable',
|
||||
props: {},
|
||||
props: ['count', 'area'],
|
||||
components: {
|
||||
CreateFormular,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fields: ['first_name', 'last_name', 'age'],
|
||||
criteria: '',
|
||||
fields: ['checkbox', 'email', 'first_name', 'last_name', 'creation', 'show_details'],
|
||||
items: [
|
||||
{ age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
|
||||
{ age: 21, first_name: 'Larsen', last_name: 'Shaw' },
|
||||
{ age: 89, first_name: 'Geneva', last_name: 'Wilson' },
|
||||
{
|
||||
email: 'dickerson@web.de',
|
||||
first_name: 'Dickerson',
|
||||
last_name: 'Macdonald',
|
||||
creation: '0,200, 1000',
|
||||
},
|
||||
{
|
||||
email: 'larsen@woob.de',
|
||||
first_name: 'Larsen',
|
||||
last_name: 'Shaw',
|
||||
creation: '0,200, 1000',
|
||||
},
|
||||
{
|
||||
email: 'geneva@tete.de',
|
||||
first_name: 'Geneva',
|
||||
last_name: 'Wilson',
|
||||
creation: '0,200, 1000',
|
||||
},
|
||||
{
|
||||
email: 'viewrter@asdfvb.com',
|
||||
first_name: 'Soledare',
|
||||
last_name: 'Takker',
|
||||
creation: '100,400, 800',
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
|
||||
@ -1 +1,16 @@
|
||||
{}
|
||||
{
|
||||
"monthNames": {
|
||||
"January": "",
|
||||
"February": "",
|
||||
"March": "",
|
||||
"April": "",
|
||||
"May": "",
|
||||
"June": "",
|
||||
"July": "",
|
||||
"August": "",
|
||||
"September": "",
|
||||
"October": "",
|
||||
"November": "",
|
||||
"December": ""
|
||||
}
|
||||
}
|
||||
|
||||
@ -17,6 +17,8 @@ import { BootstrapVue } from 'bootstrap-vue'
|
||||
import 'bootstrap-vue/dist/bootstrap-vue.css'
|
||||
import 'bootstrap/dist/css/bootstrap.css'
|
||||
|
||||
import moment from 'vue-moment'
|
||||
|
||||
const httpLink = new HttpLink({ uri: CONFIG.GRAPHQL_URI })
|
||||
|
||||
const authLink = new ApolloLink((operation, forward) => {
|
||||
@ -50,10 +52,12 @@ const apolloProvider = new VueApollo({
|
||||
})
|
||||
|
||||
Vue.use(BootstrapVue)
|
||||
Vue.use(moment)
|
||||
|
||||
addNavigationGuards(router, store)
|
||||
|
||||
new Vue({
|
||||
moment,
|
||||
router,
|
||||
store,
|
||||
i18n,
|
||||
|
||||
@ -1,6 +1,9 @@
|
||||
<template>
|
||||
<div>
|
||||
<user-table count="5" />
|
||||
<create-formular />
|
||||
<hr />
|
||||
|
||||
<user-table count="5" area="overview" />
|
||||
|
||||
Startübersicht Adminbereich
|
||||
<ul>
|
||||
@ -11,10 +14,12 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import CreateFormular from '../components/CreateFormular.vue'
|
||||
import UserTable from '../components/UserTable.vue'
|
||||
export default {
|
||||
name: 'overview',
|
||||
components: {
|
||||
CreateFormular,
|
||||
UserTable,
|
||||
},
|
||||
}
|
||||
|
||||
@ -9020,6 +9020,11 @@ mkdirp@0.x, mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@^0.5.5, mkdirp@~0.5.1:
|
||||
dependencies:
|
||||
minimist "^1.2.5"
|
||||
|
||||
moment@^2.19.2, moment@^2.29.1:
|
||||
version "2.29.1"
|
||||
resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
|
||||
integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
|
||||
|
||||
move-concurrently@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
|
||||
@ -12469,6 +12474,13 @@ vue-loader@^15.9.2:
|
||||
vue-hot-reload-api "^2.3.0"
|
||||
vue-style-loader "^4.1.0"
|
||||
|
||||
vue-moment@^4.1.0:
|
||||
version "4.1.0"
|
||||
resolved "https://registry.yarnpkg.com/vue-moment/-/vue-moment-4.1.0.tgz#092a8ff723a96c6f85a0a8e23ad30f0bf320f3b0"
|
||||
integrity sha512-Gzisqpg82ItlrUyiD9d0Kfru+JorW2o4mQOH06lEDZNgxci0tv/fua1Hl0bo4DozDV2JK1r52Atn/8QVCu8qQw==
|
||||
dependencies:
|
||||
moment "^2.19.2"
|
||||
|
||||
vue-router@^3.5.3:
|
||||
version "3.5.3"
|
||||
resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.5.3.tgz#041048053e336829d05dafacf6a8fb669a2e7999"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user