mirror of
https://github.com/IT4Change/gradido.git
synced 2025-12-13 07:45:54 +00:00
repared profil
This commit is contained in:
ogerly
parent
63ee06f347
commit
5ea426506c
40
frontend/src/components/Inputs/FirstName.vue
Normal file
40
frontend/src/components/Inputs/FirstName.vue
Normal file
@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<div role="group" class="first-name">
|
||||
<label for="input-firstName">Vorname:</label>
|
||||
<b-form-input
|
||||
id="input-firstName"
|
||||
v-model="firstName"
|
||||
:state="firstNameState"
|
||||
aria-describedby="input-live-help input-live-feedback"
|
||||
placeholder="Enter your firstName"
|
||||
trim
|
||||
></b-form-input>
|
||||
|
||||
<!-- This will only be shown if the preceding input has an invalid state -->
|
||||
<b-form-invalid-feedback id="input-live-feedback">
|
||||
Enter at least 3 letters
|
||||
</b-form-invalid-feedback>
|
||||
|
||||
<!-- This is a form text block (formerly known as help block) -->
|
||||
<b-form-text id="input-live-help">Dein Vorname</b-form-text>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'FirstName',
|
||||
props: {
|
||||
value: { type: String, default: '' },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
firstName: this.value,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
firstNameState() {
|
||||
return this.firstName.length > 2
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
40
frontend/src/components/Inputs/Job.vue
Normal file
40
frontend/src/components/Inputs/Job.vue
Normal file
@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<div role="group" class="input-job">
|
||||
<label for="input-lastName">Job:</label>
|
||||
<b-form-input
|
||||
id="input-job"
|
||||
v-model="job"
|
||||
:state="jobState"
|
||||
aria-describedby="input-live-help input-live-feedback"
|
||||
placeholder="Enter your Job"
|
||||
trim
|
||||
></b-form-input>
|
||||
|
||||
<!-- This will only be shown if the preceding input has an invalid state -->
|
||||
<b-form-invalid-feedback id="input-live-feedback">
|
||||
Enter at least 3 letters
|
||||
</b-form-invalid-feedback>
|
||||
|
||||
<!-- This is a form text block (formerly known as help block) -->
|
||||
<b-form-text id="input-live-help">Was ist dein Beruf</b-form-text>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Job',
|
||||
props: {
|
||||
value: { type: String, default: '' },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
job: this.value,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
jobState() {
|
||||
return this.job.length > 2
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
40
frontend/src/components/Inputs/LastName.vue
Normal file
40
frontend/src/components/Inputs/LastName.vue
Normal file
@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<div role="group" class="last-name">
|
||||
<label for="input-lastName">Nachname:</label>
|
||||
<b-form-input
|
||||
id="input-lastName"
|
||||
v-model="lastName"
|
||||
:state="lastNameState"
|
||||
aria-describedby="input-live-help input-live-feedback"
|
||||
placeholder="Enter your lastName"
|
||||
trim
|
||||
></b-form-input>
|
||||
|
||||
<!-- This will only be shown if the preceding input has an invalid state -->
|
||||
<b-form-invalid-feedback id="input-live-feedback">
|
||||
Enter at least 3 letters
|
||||
</b-form-invalid-feedback>
|
||||
|
||||
<!-- This is a form text block (formerly known as help block) -->
|
||||
<b-form-text id="input-live-help">Dein Nachname</b-form-text>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'lastName',
|
||||
props: {
|
||||
value: { type: String, default: '' },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
lastName: this.value,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
lastNameState() {
|
||||
return this.lastName.length > 2
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -1,36 +1,80 @@
|
||||
<template>
|
||||
<div fluid="sm" class="mr-2">
|
||||
<user-card :balance="balance" :transactionCount="transactionCount"></user-card>
|
||||
<user-data />
|
||||
<hr />
|
||||
<user-password />
|
||||
<hr />
|
||||
<user-language />
|
||||
<hr />
|
||||
<user-newsletter />
|
||||
<div class="profile break">
|
||||
<b-card class="justify-content-center">
|
||||
<b-form @submit.prevent="submit">
|
||||
<b-row>
|
||||
<b-col>
|
||||
<first-name v-model="firstName" />
|
||||
</b-col>
|
||||
<b-col>
|
||||
<last-name v-model="lastName" />
|
||||
</b-col>
|
||||
</b-row>
|
||||
<div></div>
|
||||
<div></div>
|
||||
|
||||
<b-row class="mt-5">
|
||||
<b-col><language-switch /></b-col>
|
||||
<b-col><job v-model="job" /></b-col>
|
||||
</b-row>
|
||||
<div class="h3 mt-5">Email und Passwort</div>
|
||||
<b-row>
|
||||
<b-col><input-email v-model="email" /></b-col>
|
||||
<b-col><input-password /></b-col>
|
||||
</b-row>
|
||||
<div class="h3 mt-5">Style & News</div>
|
||||
<b-row>
|
||||
<b-col>Newsletter abonnieren</b-col>
|
||||
<b-col>on / of</b-col>
|
||||
<b-col><b-form-checkbox switch size="lg"></b-form-checkbox></b-col>
|
||||
</b-row>
|
||||
<b-row class="mt-3">
|
||||
<b-col>Lightning Mode</b-col>
|
||||
<b-col>on / of</b-col>
|
||||
<b-col><b-form-checkbox switch size="lg"></b-form-checkbox></b-col>
|
||||
</b-row>
|
||||
<b-button type="submit" class="mt-5">speichern</b-button>
|
||||
</b-form>
|
||||
</b-card>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import UserCard from '@/components/UserCard.vue'
|
||||
import UserData from '@/components/UserSettings/UserData.vue'
|
||||
import UserPassword from '@/components/UserSettings/UserPassword.vue'
|
||||
import UserLanguage from '@/components/UserSettings/UserLanguage.vue'
|
||||
import UserNewsletter from '@/components/UserSettings/UserNewsletter.vue'
|
||||
import FirstName from '@/components/Inputs/FirstName.vue'
|
||||
import LastName from '@/components/Inputs/LastName.vue'
|
||||
import LanguageSwitch from '@/components/LanguageSwitch.vue'
|
||||
import Job from '@/components/Inputs/Job.vue'
|
||||
import InputEmail from '@/components/Inputs/InputEmail.vue'
|
||||
import InputPassword from '@/components/Inputs/InputPassword.vue'
|
||||
|
||||
export default {
|
||||
name: 'Profile',
|
||||
components: {
|
||||
UserCard,
|
||||
UserData,
|
||||
UserPassword,
|
||||
UserLanguage,
|
||||
UserNewsletter,
|
||||
FirstName,
|
||||
LastName,
|
||||
LanguageSwitch,
|
||||
Job,
|
||||
InputEmail,
|
||||
InputPassword,
|
||||
},
|
||||
props: {
|
||||
balance: { type: Number, default: 0 },
|
||||
transactionCount: { type: Number, default: 0 },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
firstName: this.$store.state.firstName,
|
||||
lastName: this.$store.state.lastName,
|
||||
job: '',
|
||||
email: this.$store.state.email,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
console.log('submit')
|
||||
console.log(this.firstName)
|
||||
console.log(this.lastName)
|
||||
console.log(this.job)
|
||||
},
|
||||
updateTransactions(pagination) {
|
||||
this.$emit('update-transactions', pagination)
|
||||
},
|
||||
@ -40,16 +84,3 @@ export default {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.card-border-radius {
|
||||
border-radius: 0px 5px 5px 0px !important;
|
||||
}
|
||||
@media screen and (max-width: 1235px) {
|
||||
.card-border-radius {
|
||||
border-radius: 0px !important;
|
||||
}
|
||||
}
|
||||
.card-background-gray {
|
||||
background-color: #ebebeba3 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,28 +1,55 @@
|
||||
<template>
|
||||
<div>
|
||||
<b-card v-if="skeleton">
|
||||
{{ $t('navigation.settings') }}
|
||||
<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-card>
|
||||
<b-card v-else>
|
||||
{{ $t('navigation.settings') }}
|
||||
</b-card>
|
||||
<div fluid="sm" class="mr-2">
|
||||
<user-card :balance="balance" :transactionCount="transactionCount"></user-card>
|
||||
<user-data />
|
||||
<hr />
|
||||
<user-password />
|
||||
<hr />
|
||||
<user-language />
|
||||
<hr />
|
||||
<user-newsletter />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import UserCard from '@/components/UserSettings/UserCard.vue'
|
||||
import UserData from '@/components/UserSettings/UserData.vue'
|
||||
import UserPassword from '@/components/UserSettings/UserPassword.vue'
|
||||
import UserLanguage from '@/components/UserSettings/UserLanguage.vue'
|
||||
import UserNewsletter from '@/components/UserSettings/UserNewsletter.vue'
|
||||
|
||||
export default {
|
||||
name: 'Settings',
|
||||
data() {
|
||||
return {
|
||||
skeleton: true,
|
||||
}
|
||||
name: 'Profile',
|
||||
components: {
|
||||
UserCard,
|
||||
UserData,
|
||||
UserPassword,
|
||||
UserLanguage,
|
||||
UserNewsletter,
|
||||
},
|
||||
props: {
|
||||
balance: { type: Number, default: 0 },
|
||||
transactionCount: { type: Number, default: 0 },
|
||||
},
|
||||
methods: {
|
||||
updateTransactions(pagination) {
|
||||
this.$emit('update-transactions', pagination)
|
||||
},
|
||||
},
|
||||
created() {
|
||||
setTimeout(() => {
|
||||
this.skeleton = false
|
||||
}, 1500)
|
||||
this.updateTransactions(0)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.card-border-radius {
|
||||
border-radius: 0px 5px 5px 0px !important;
|
||||
}
|
||||
@media screen and (max-width: 1235px) {
|
||||
.card-border-radius {
|
||||
border-radius: 0px !important;
|
||||
}
|
||||
}
|
||||
.card-background-gray {
|
||||
background-color: #ebebeba3 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user