mirror of
https://github.com/IT4Change/gradido.git
synced 2025-12-13 07:45:54 +00:00
Feature Profile: Add Components
This commit is contained in:
ogerly
parent
09ec072d2e
commit
7dc5bbde6c
@ -16,25 +16,11 @@ const routes = [
|
||||
},
|
||||
{
|
||||
path: '/profile',
|
||||
component: () => import('../views/Pages/UserProfileCard.vue'),
|
||||
component: () => import('../views/Pages/UserProfileOverview.vue'),
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
},
|
||||
},
|
||||
// {
|
||||
// path: '/profileedit',
|
||||
// component: () => import('../views/Pages/UserProfileEdit.vue'),
|
||||
// meta: {
|
||||
// requiresAuth: true,
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// path: '/activity',
|
||||
// component: () => import('../views/Pages/UserProfileActivity.vue'),
|
||||
// meta: {
|
||||
// requiresAuth: true,
|
||||
// },
|
||||
// },
|
||||
{
|
||||
path: '/transactions',
|
||||
component: () => import('../views/Pages/UserProfileTransactionList.vue'),
|
||||
|
||||
@ -75,7 +75,7 @@ describe('DashboardLayoutGdd', () => {
|
||||
})
|
||||
|
||||
it('has five items in the navbar', () => {
|
||||
expect(navbar.findAll('ul > a')).toHaveLength(2)
|
||||
expect(navbar.findAll('ul > a')).toHaveLength(3)
|
||||
})
|
||||
|
||||
it('has first item "send" in navbar', () => {
|
||||
@ -100,21 +100,21 @@ describe('DashboardLayoutGdd', () => {
|
||||
expect(wrapper.findComponent(RouterLinkStub).props().to).toBe('/transactions')
|
||||
})
|
||||
|
||||
// it('has tree items in the navbar', () => {
|
||||
// expect(navbar.findAll('ul > li')).toHaveLength(3)
|
||||
// })
|
||||
//
|
||||
// it('has third item "My profile" in navbar', () => {
|
||||
// expect(navbar.findAll('ul > li').at(2).text()).toEqual('site.navbar.my-profil')
|
||||
// })
|
||||
//
|
||||
// it.skip('has third item "My profile" linked to profile in navbar', async () => {
|
||||
// navbar.findAll('ul > li > a').at(2).trigger('click')
|
||||
// await flushPromises()
|
||||
// await jest.runAllTimers()
|
||||
// await flushPromises()
|
||||
// expect(wrapper.findComponent(RouterLinkStub).props().to).toBe('/profile')
|
||||
// })
|
||||
it('has tree items in the navbar', () => {
|
||||
expect(navbar.findAll('ul > a')).toHaveLength(3)
|
||||
})
|
||||
|
||||
it('has third item "My profile" in navbar', () => {
|
||||
expect(navbar.findAll('ul > a').at(2).text()).toEqual('site.navbar.my-profil')
|
||||
})
|
||||
|
||||
it.skip('has third item "My profile" linked to profile in navbar', async () => {
|
||||
navbar.findAll('ul > a').at(2).trigger('click')
|
||||
await flushPromises()
|
||||
await jest.runAllTimers()
|
||||
await flushPromises()
|
||||
expect(wrapper.findComponent(RouterLinkStub).props().to).toBe('/profile')
|
||||
})
|
||||
|
||||
// it('has fourth item "Settigs" in navbar', () => {
|
||||
// expect(navbar.findAll('ul > li').at(3).text()).toEqual('site.navbar.settings')
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div>
|
||||
<side-bar @logout="logout" :balance="balance" :pending="pending">
|
||||
<template slot="links">
|
||||
<sidebar-item
|
||||
@ -20,14 +20,6 @@
|
||||
path: '/profile',
|
||||
}"
|
||||
></sidebar-item>
|
||||
<!--
|
||||
<b-nav-item href="#!" to="/profileedit">
|
||||
<b-nav-text class="p-0 text-lg text-muted">{{ $t('site.navbar.settings') }}</b-nav-text>
|
||||
</b-nav-item>
|
||||
<b-nav-item href="#!" to="/activity">
|
||||
<b-nav-text class="p-0 text-lg text-muted">{{ $t('site.navbar.activity') }}</b-nav-text>
|
||||
</b-nav-item>
|
||||
-->
|
||||
</template>
|
||||
</side-bar>
|
||||
<div class="main-content">
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<base-nav
|
||||
container-classes="container-fluid"
|
||||
class="navbar-top navbar-expand"
|
||||
class="navbar-expand"
|
||||
:class="{ 'navbar-dark': type === 'default' }"
|
||||
>
|
||||
<!-- Navbar links -->
|
||||
@ -15,7 +15,7 @@
|
||||
<span class="pb-2 text-lg font-weight-bold">
|
||||
{{ $store.state.email }}
|
||||
</span>
|
||||
<b-media-body class="ml-2 d-none d-lg-block">
|
||||
<b-media-body class="ml-2">
|
||||
<span class="avatar">
|
||||
<vue-qrcode :value="$store.state.email" type="image/png"></vue-qrcode>
|
||||
</span>
|
||||
|
||||
@ -19,10 +19,6 @@ describe('AccountOverview', () => {
|
||||
wrapper = Wrapper()
|
||||
})
|
||||
|
||||
it('has a header', () => {
|
||||
expect(wrapper.find('base-header-stub').exists()).toBeTruthy()
|
||||
})
|
||||
|
||||
it('has a status line', () => {
|
||||
expect(wrapper.find('gdd-status-stub').exists()).toBeTruthy()
|
||||
})
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<base-header class="pb-md-4 pt-md-2 pb-lg-4 pt-lg-2 bg-transparent"></base-header>
|
||||
<b-container fluid class="p-lg-2 mt-lg-5">
|
||||
<b-container fluid>
|
||||
<gdd-status
|
||||
v-if="showContext"
|
||||
:pending="pending"
|
||||
|
||||
@ -1,32 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- Header -->
|
||||
<div class="header bg-gradient-info py-7 py-lg-3 pt-lg-2">
|
||||
<b-container>
|
||||
<div class="header-body text-center mb-7">
|
||||
<p class="h1">GDD</p>
|
||||
<p class="h4">Explorer</p>
|
||||
</div>
|
||||
</b-container>
|
||||
<div class="separator separator-bottom separator-skew zindex-100">
|
||||
<svg
|
||||
x="0"
|
||||
y="0"
|
||||
viewBox="0 0 2560 100"
|
||||
preserveAspectRatio="none"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<polygon class="fill-default" points="2560 0 2560 100 0 100"></polygon>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Page content -->
|
||||
|
||||
<div>
|
||||
<b-card>
|
||||
<b-card-body>This is some text within a card body.</b-card-body>
|
||||
</b-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,134 +0,0 @@
|
||||
<template>
|
||||
<card style="background-color: #ebebeba3 !important">
|
||||
<b-form @submit.prevent="updateProfile">
|
||||
<h6 class="heading-small text-muted mb-4">User information</h6>
|
||||
|
||||
<div class="pl-lg-4">
|
||||
<b-row>
|
||||
<b-col lg="6">
|
||||
<base-input
|
||||
type="text"
|
||||
label="Username"
|
||||
placeholder="Username"
|
||||
v-model="user.username"
|
||||
></base-input>
|
||||
</b-col>
|
||||
<b-col lg="6">
|
||||
<base-input
|
||||
type="email"
|
||||
label="Email address"
|
||||
placeholder="mike@email.com"
|
||||
v-model="user.email"
|
||||
></base-input>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col lg="6">
|
||||
<base-input
|
||||
type="text"
|
||||
label="First Name"
|
||||
placeholder="First Name"
|
||||
v-model="user.firstName"
|
||||
></base-input>
|
||||
</b-col>
|
||||
<b-col lg="6">
|
||||
<base-input
|
||||
type="text"
|
||||
label="Last Name"
|
||||
placeholder="Last Name"
|
||||
v-model="user.lastName"
|
||||
></base-input>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
<hr class="my-4" />
|
||||
|
||||
<!-- Address -->
|
||||
<h6 class="heading-small text-muted mb-4">Contact information</h6>
|
||||
|
||||
<div class="pl-lg-4">
|
||||
<b-row>
|
||||
<b-col md="12">
|
||||
<base-input
|
||||
type="text"
|
||||
label="Address"
|
||||
placeholder="Home Address"
|
||||
v-model="user.address"
|
||||
></base-input>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col lg="4">
|
||||
<base-input
|
||||
type="text"
|
||||
label="City"
|
||||
placeholder="City"
|
||||
v-model="user.city"
|
||||
></base-input>
|
||||
</b-col>
|
||||
<b-col lg="4">
|
||||
<base-input
|
||||
type="text"
|
||||
label="Country"
|
||||
placeholder="Country"
|
||||
v-model="user.country"
|
||||
></base-input>
|
||||
</b-col>
|
||||
<b-col lg="4">
|
||||
<base-input
|
||||
label="Postal Code"
|
||||
placeholder="ZIP Code"
|
||||
v-model="user.postalCode"
|
||||
></base-input>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
|
||||
<hr class="my-4" />
|
||||
<!-- Description -->
|
||||
<h6 class="heading-small text-muted mb-4">About me</h6>
|
||||
<div class="pl-lg-4">
|
||||
<b-form-group
|
||||
label="About Me"
|
||||
label-class="form-control-label"
|
||||
class="mb-0"
|
||||
label-for="about-form-textaria"
|
||||
>
|
||||
<!-- <label class="form-control-label">About Me</label> -->
|
||||
<b-form-textarea
|
||||
rows="4"
|
||||
value="A beautiful premium dashboard for BootstrapVue."
|
||||
id="about-form-textaria"
|
||||
placeholder="A few words about you ..."
|
||||
></b-form-textarea>
|
||||
</b-form-group>
|
||||
</div>
|
||||
</b-form>
|
||||
</card>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
user: {
|
||||
company: 'Creative Code Inc.',
|
||||
username: 'michael23',
|
||||
email: '',
|
||||
firstName: 'Mike',
|
||||
lastName: 'Andrew',
|
||||
address: 'Bld Mihail Kogalniceanu, nr. 8 Bl 1, Sc 1, Ap 09',
|
||||
city: 'New York',
|
||||
country: 'USA',
|
||||
postalCode: '',
|
||||
aboutMe: `Lamborghini Mercy, Your chick she so thirsty, I'm in that two seat Lambo.`,
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateProfile() {
|
||||
alert('Your data: ' + JSON.stringify(this.user))
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style></style>
|
||||
@ -1,72 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- slot for parent component to activate the file changer -->
|
||||
<div @click="launchFilePicker()">
|
||||
<slot name="activator"></slot>
|
||||
</div>
|
||||
<!-- image input: style is set to hidden and assigned a ref so that it can be triggered -->
|
||||
<input
|
||||
type="file"
|
||||
ref="file"
|
||||
:name="uploadFieldName"
|
||||
@change="onFileChange($event.target.name, $event.target.files)"
|
||||
style="display: none"
|
||||
/>
|
||||
<!-- error dialog displays any potential errors -->
|
||||
<v-dialog v-model="errorDialog" max-width="300">
|
||||
<v-card>
|
||||
<v-card-text class="subheading">{{ errorText }}</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn @click="errorDialog = false" flat>Got it!</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'avatar-uploader',
|
||||
data: () => ({
|
||||
errorDialog: null,
|
||||
errorText: '',
|
||||
uploadFieldName: 'file',
|
||||
maxSize: 1024,
|
||||
}),
|
||||
props: {
|
||||
// Use "value" here to enable compatibility with v-model
|
||||
value: Object,
|
||||
},
|
||||
methods: {
|
||||
launchFilePicker() {
|
||||
this.$refs.file.click()
|
||||
},
|
||||
onFileChange(fieldName, file) {
|
||||
const { maxSize } = this
|
||||
const imageFile = file[0]
|
||||
|
||||
// check if user actually selected a file
|
||||
if (file.length > 0) {
|
||||
const size = imageFile.size / maxSize / maxSize
|
||||
if (!imageFile.type.match('image.*')) {
|
||||
// check whether the upload is an image
|
||||
this.errorDialog = true
|
||||
this.errorText = 'Please choose an image file'
|
||||
} else if (size > 1) {
|
||||
// check whether the size is greater than the size limit
|
||||
this.errorDialog = true
|
||||
this.errorText = 'Your file is too big! Please select an image under 1MB'
|
||||
} else {
|
||||
// Append file into FormData & turn file into image URL
|
||||
const formData = new FormData()
|
||||
const imageURL = URL.createObjectURL(imageFile)
|
||||
formData.append(fieldName, imageFile)
|
||||
// Emit FormData & image URL to the parent component
|
||||
this.$emit('input', { formData, imageURL })
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style></style>
|
||||
@ -24,184 +24,19 @@
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-container>
|
||||
<b-row class="mb-4 text-right">
|
||||
<b-col class="text-right" @click="edit_userdata = !edit_userdata">
|
||||
<span v-if="edit_userdata">{{ $t('form.edit') }}</span>
|
||||
<div v-else>
|
||||
<span>
|
||||
{{ $t('form.edit') }}
|
||||
<b>{{ $t('form.cancel') }}</b>
|
||||
</span>
|
||||
<span class="ml-4 text-success display-4">{{ $t('form.save') }}</span>
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-container>
|
||||
<div>
|
||||
<b-row class="mb-3">
|
||||
<b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
|
||||
<small>{{ $t('form.firstname') }}</small>
|
||||
</b-col>
|
||||
<b-col v-if="edit_userdata" class="col-md-9 col-sm-10">
|
||||
{{ UserProfileTestData.name }}
|
||||
</b-col>
|
||||
<b-col v-else class="col-md-9 col-sm-10">
|
||||
<b-input type="text" v-model="UserProfileTestData.name"></b-input>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row class="mb-3">
|
||||
<b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
|
||||
<small>{{ $t('form.lastname') }}</small>
|
||||
</b-col>
|
||||
<b-col v-if="edit_userdata" class="col-md-9 col-sm-10">
|
||||
{{ UserProfileTestData.lastname }}
|
||||
</b-col>
|
||||
<b-col v-else class="col-md-9 col-sm-10">
|
||||
<b-input type="text" v-model="UserProfileTestData.lastname"></b-input>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row class="mb-3">
|
||||
<b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
|
||||
<small>{{ $t('form.description') }}</small>
|
||||
</b-col>
|
||||
<b-col v-if="edit_userdata" class="col-md-9 col-sm-10">
|
||||
{{ UserProfileTestData.desc }}
|
||||
</b-col>
|
||||
<b-col v-else class="col-md-9 col-sm-10">
|
||||
<b-textarea
|
||||
v-value="UserProfileTestData.dec"
|
||||
placeholder="Enter something..."
|
||||
rows="3"
|
||||
max-rows="6"
|
||||
></b-textarea>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<b-container>
|
||||
<b-row class="mb-4 text-right">
|
||||
<b-col class="text-right" @click="edit_email = !edit_email">
|
||||
<span v-if="edit_email">E-Mail {{ $t('form.change') }}</span>
|
||||
<div v-else>
|
||||
<span>
|
||||
E-Mail {{ $t('form.change') }}
|
||||
<b>{{ $t('form.cancel') }}</b>
|
||||
</span>
|
||||
<span class="ml-4 text-success display-4">{{ $t('form.save') }}</span>
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-container>
|
||||
<b-row class="mb-3">
|
||||
<b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
|
||||
<small>E-Mail</small>
|
||||
</b-col>
|
||||
<b-col v-if="edit_email" class="col-md-9 col-sm-10">{{ $store.state.email }}</b-col>
|
||||
<b-col v-else class="col-md-9 col-sm-10">
|
||||
<b-input type="text" v-model="$store.state.email"></b-input>
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
<hr />
|
||||
|
||||
<b-container>
|
||||
<b-row class="mb-4 text-right">
|
||||
<b-col class="text-right" @click="edit_username = !edit_username">
|
||||
<span v-if="edit_username">{{ $t('form.username') }} {{ $t('form.change') }}</span>
|
||||
<div v-else>
|
||||
<span>
|
||||
{{ $t('form.username') }} {{ $t('form.change') }}
|
||||
<b>{{ $t('form.cancel') }}</b>
|
||||
</span>
|
||||
<span class="ml-4 text-success display-4">{{ $t('form.save') }}</span>
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-container>
|
||||
<b-row class="mb-3">
|
||||
<b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
|
||||
<small>{{ $t('form.username') }}</small>
|
||||
</b-col>
|
||||
<b-col v-if="edit_username" class="col-md-9 col-sm-10">
|
||||
@{{ UserProfileTestData.username }}
|
||||
</b-col>
|
||||
<b-col v-else class="col-md-9 col-sm-10">
|
||||
<b-input type="text" v-model="UserProfileTestData.username"></b-input>
|
||||
<div>
|
||||
{{ $t('form.change_username_info') }}
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
<hr />
|
||||
|
||||
<b-container>
|
||||
<b-row class="mb-4 text-right">
|
||||
<b-col class="text-right" @click="edit_pwd = !edit_pwd">
|
||||
<span v-if="edit_pwd">{{ $t('form.password') }} {{ $t('form.change') }}</span>
|
||||
<div v-else>
|
||||
<span>
|
||||
{{ $t('form.password') }} {{ $t('form.change') }}
|
||||
<b>{{ $t('form.cancel') }}</b>
|
||||
</span>
|
||||
<span class="ml-4 text-success display-4">{{ $t('form.save') }}</span>
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
<div v-if="!edit_pwd">
|
||||
<b-row class="mb-3">
|
||||
<b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
|
||||
<small>{{ $t('form.password_old') }}</small>
|
||||
</b-col>
|
||||
<b-col class="col-md-9 col-sm-10">
|
||||
<b-input type="text" :placeholder="$t('form.password_old')"></b-input>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row class="mb-3">
|
||||
<b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
|
||||
<small>{{ $t('form.password_new') }}</small>
|
||||
</b-col>
|
||||
<b-col class="col-md-9 col-sm-10">
|
||||
<b-input type="text" :placeholder="$t('form.password_new')"></b-input>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row class="mb-3">
|
||||
<b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
|
||||
<small>{{ $t('form.password_new_repeat') }}</small>
|
||||
</b-col>
|
||||
<b-col class="col-md-9 col-sm-10">
|
||||
<b-input type="text" :placeholder="$t('form.password_new_repeat')"></b-input>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
</b-container>
|
||||
</b-card>
|
||||
</template>
|
||||
<script>
|
||||
import VueQrcode from 'vue-qrcode'
|
||||
|
||||
export default {
|
||||
name: 'profilecard',
|
||||
name: 'UserCard',
|
||||
components: {
|
||||
VueQrcode,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
edit_userdata: true,
|
||||
edit_pwd: true,
|
||||
edit_email: true,
|
||||
edit_username: true,
|
||||
edit_button_text: 'edit',
|
||||
}
|
||||
},
|
||||
props: {
|
||||
balance: { type: Number, default: 0 },
|
||||
transactionCount: { type: Number, default: 0 },
|
||||
UserProfileTestData: { type: Object },
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<b-card class="bg-transparent" style="background-color: #ebebeba3 !important">
|
||||
<b-container>
|
||||
<b-row class="mb-4 text-right">
|
||||
<b-col class="text-right" @click="edit_userdata = !edit_userdata">
|
||||
<span v-if="edit_userdata">{{ $t('form.edit') }}</span>
|
||||
<div v-else>
|
||||
<span>
|
||||
{{ $t('form.edit') }}
|
||||
<b>{{ $t('form.cancel') }}</b>
|
||||
</span>
|
||||
<span class="ml-4 text-success display-4">{{ $t('form.save') }}</span>
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-container>
|
||||
<div>
|
||||
<b-row class="mb-3">
|
||||
<b-col class="col-lg-3 col-md-12 col-sm-12 text-md-left text-lg-right">
|
||||
<small>{{ $t('form.firstname') }}</small>
|
||||
</b-col>
|
||||
<b-col v-if="edit_userdata" class="col-lg-9 col-md-12 col-sm-12">
|
||||
{{ UserProfileTestData.name }}
|
||||
</b-col>
|
||||
<b-col v-else class="col-lg-9 col-md-12 col-sm-12">
|
||||
<b-input type="text" v-model="$props.UserProfileTestData.name"></b-input>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row class="mb-3">
|
||||
<b-col class="col-lg-3 col-md-12 col-sm-12 text-md-left text-lg-right">
|
||||
<small>{{ $t('form.lastname') }}</small>
|
||||
</b-col>
|
||||
<b-col v-if="edit_userdata" class="col-lg-9 col-md-12 col-sm-12">
|
||||
{{ UserProfileTestData.lastname }}
|
||||
</b-col>
|
||||
<b-col v-else class="col-lg-9 col-md-12 col-sm-12">
|
||||
<b-input type="text" v-model="$props.UserProfileTestData.lastname"></b-input>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row class="mb-3">
|
||||
<b-col class="col-lg-3 col-md-12 col-sm-12 text-md-left text-lg-right">
|
||||
<small>{{ $t('form.description') }}</small>
|
||||
</b-col>
|
||||
<b-col v-if="edit_userdata" class="col-lg-9 col-md-12 col-sm-12">
|
||||
{{ UserProfileTestData.desc }}
|
||||
</b-col>
|
||||
<b-col v-else class="col-lg-9 col-md-12 col-sm-12">
|
||||
<b-textarea
|
||||
rows="3"
|
||||
max-rows="6"
|
||||
placeholder="UserProfileTestData.dec"
|
||||
v-model="$props.UserProfileTestData.dec"
|
||||
></b-textarea>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
</b-card>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'FormUserData',
|
||||
|
||||
data() {
|
||||
return {
|
||||
edit_userdata: true,
|
||||
}
|
||||
},
|
||||
props: {
|
||||
UserProfileTestData: { type: Object },
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style></style>
|
||||
@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<b-card class="bg-transparent" style="background-color: #ebebeba3 !important">
|
||||
<b-container>
|
||||
<b-row class="mb-4 text-right">
|
||||
<b-col class="text-right" @click="edit_email = !edit_email">
|
||||
<span v-if="edit_email">E-Mail {{ $t('form.change') }}</span>
|
||||
<div v-else>
|
||||
<span>
|
||||
E-Mail {{ $t('form.change') }}
|
||||
<b>{{ $t('form.cancel') }}</b>
|
||||
</span>
|
||||
<span class="ml-4 text-success display-4">{{ $t('form.save') }}</span>
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-container>
|
||||
<b-row class="mb-3">
|
||||
<b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
|
||||
<small>E-Mail</small>
|
||||
</b-col>
|
||||
<b-col v-if="edit_email" class="col-md-9 col-sm-10">{{ $store.state.email }}</b-col>
|
||||
<b-col v-else class="col-md-9 col-sm-10">
|
||||
<b-input type="text" v-model="$store.state.email"></b-input>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-card>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'FormUserMail',
|
||||
data() {
|
||||
return {
|
||||
edit_email: true,
|
||||
}
|
||||
},
|
||||
props: {
|
||||
UserProfileTestData: { type: Object },
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style></style>
|
||||
@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<b-card class="bg-transparent" style="background-color: #ebebeba3 !important">
|
||||
<b-container>
|
||||
<b-row class="mb-4 text-right">
|
||||
<b-col class="text-right" @click="edit_pwd = !edit_pwd">
|
||||
<span v-if="edit_pwd">{{ $t('form.password') }} {{ $t('form.change') }}</span>
|
||||
<div v-else>
|
||||
<span>
|
||||
{{ $t('form.password') }} {{ $t('form.change') }}
|
||||
<b>{{ $t('form.cancel') }}</b>
|
||||
</span>
|
||||
<span class="ml-4 text-success display-4">{{ $t('form.save') }}</span>
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
<div v-if="!edit_pwd">
|
||||
<b-row class="mb-3">
|
||||
<b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
|
||||
<small>{{ $t('form.password_old') }}</small>
|
||||
</b-col>
|
||||
<b-col class="col-md-9 col-sm-10">
|
||||
<b-input type="text" :placeholder="$t('form.password_old')"></b-input>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row class="mb-3">
|
||||
<b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
|
||||
<small>{{ $t('form.password_new') }}</small>
|
||||
</b-col>
|
||||
<b-col class="col-md-9 col-sm-10">
|
||||
<b-input type="text" :placeholder="$t('form.password_new')"></b-input>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row class="mb-3">
|
||||
<b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
|
||||
<small>{{ $t('form.password_new_repeat') }}</small>
|
||||
</b-col>
|
||||
<b-col class="col-md-9 col-sm-10">
|
||||
<b-input type="text" :placeholder="$t('form.password_new_repeat')"></b-input>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
</b-container>
|
||||
</b-card>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'FormUserPasswort',
|
||||
data() {
|
||||
return {
|
||||
edit_pwd: true,
|
||||
}
|
||||
},
|
||||
props: {
|
||||
UserProfileTestData: { type: Object },
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style></style>
|
||||
@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<b-card class="bg-transparent" style="background-color: #ebebeba3 !important">
|
||||
<b-container>
|
||||
<b-row class="mb-4 text-right">
|
||||
<b-col class="text-right" @click="edit_username = !edit_username">
|
||||
<span v-if="edit_username">{{ $t('form.username') }} {{ $t('form.change') }}</span>
|
||||
<div v-else>
|
||||
<span>
|
||||
{{ $t('form.username') }} {{ $t('form.change') }}
|
||||
<b>{{ $t('form.cancel') }}</b>
|
||||
</span>
|
||||
<span class="ml-4 text-success display-4">{{ $t('form.save') }}</span>
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-container>
|
||||
<b-row class="mb-3">
|
||||
<b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
|
||||
<small>{{ $t('form.username') }}</small>
|
||||
</b-col>
|
||||
<b-col v-if="edit_username" class="col-md-9 col-sm-10">
|
||||
@{{ UserProfileTestData.username }}
|
||||
</b-col>
|
||||
<b-col v-else class="col-md-9 col-sm-10">
|
||||
<b-input type="text" v-model="$props.UserProfileTestData.username"></b-input>
|
||||
<div>
|
||||
{{ $t('form.change_username_info') }}
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-card>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'FormUsername',
|
||||
data() {
|
||||
return {
|
||||
edit_username: true,
|
||||
}
|
||||
},
|
||||
props: {
|
||||
UserProfileTestData: { type: Object },
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style></style>
|
||||
@ -1,71 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="header pb-7 pt-5"></div>
|
||||
|
||||
<b-container fluid class="mt--6">
|
||||
<div class="display-4 mb-3">{{ $t('site.profil.activity.chart') }}</div>
|
||||
<b-row>
|
||||
<b-col>
|
||||
<div class="chart">
|
||||
<line-chart :height="350" :chart-data="bigLineChart.chartData"></line-chart>
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<hr />
|
||||
<div class="display-4 mt-6">{{ $t('site.profil.activity.new') }}</div>
|
||||
<b-row>
|
||||
<b-col>
|
||||
<gdd-add-work-2 />
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
<hr />
|
||||
<div class="display-4 mb-3">{{ $t('site.profil.activity.list') }}</div>
|
||||
<b-row>
|
||||
<b-col class="mb-5">
|
||||
{{ $t('community') }}
|
||||
<gdd-work-table></gdd-work-table>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-container>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import GddWorkTable from '../../views/Pages/AccountOverview/GddWorkTable.vue'
|
||||
import GddAddWork2 from '../../views/Pages/AccountOverview/GddAddWork2.vue'
|
||||
|
||||
import * as chartConfigs from '@/components/Charts/config'
|
||||
import LineChart from '@/components/Charts/LineChart'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
GddWorkTable,
|
||||
LineChart,
|
||||
GddAddWork2,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
bigLineChart: {
|
||||
allData: [
|
||||
[0, 20, 10, 30, 15, 40, 20, 60, 60],
|
||||
[0, 20, 5, 25, 10, 30, 35, 60, 40],
|
||||
[0, 2, 5, 7, 10, 30, 15, 9, 10],
|
||||
[0, 2, 5, 7, 10, 14, 29, 78, 120],
|
||||
],
|
||||
activeIndex: 0,
|
||||
chartData: {
|
||||
datasets: [
|
||||
{
|
||||
label: 'Gemeinschaftsstunden',
|
||||
data: [30, 20, 10, 30, 65, 40, 20, 60, 70],
|
||||
},
|
||||
],
|
||||
labels: ['2020 Aug', 'Sep', 'Okt', 'Nov', 'Dez', 'Jan', 'Feb', 'Mär 2021'],
|
||||
},
|
||||
extraOptions: chartConfigs.blueChartOptions,
|
||||
},
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style></style>
|
||||
@ -1,24 +0,0 @@
|
||||
<template>
|
||||
<div class="mt-sm-4 mt-lg-5">
|
||||
<user-card
|
||||
:balance="balance"
|
||||
:transactionCount="transactionCount"
|
||||
:UserProfileTestData="UserProfileTestData"
|
||||
></user-card>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import UserCard from './UserProfile/UserCard.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
UserCard,
|
||||
},
|
||||
props: {
|
||||
balance: { type: Number, default: 0 },
|
||||
transactionCount: { type: Number, default: 0 },
|
||||
UserProfileTestData: { type: Object },
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style></style>
|
||||
@ -1,23 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="header pb-8 pt-5 pt-lg-8 d-flex align-items-center profile-header"></div>
|
||||
|
||||
<b-container fluid class="mt--6">
|
||||
<b-row>
|
||||
<b-col xl="12" class="order-xl-1">
|
||||
<edit-profile-form></edit-profile-form>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-container>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import EditProfileForm from './UserProfile/EditProfileForm.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
EditProfileForm,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style></style>
|
||||
33
frontend/src/views/Pages/UserProfileOverview.vue
Normal file
33
frontend/src/views/Pages/UserProfileOverview.vue
Normal file
@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<b-container fluid>
|
||||
<user-card :balance="balance" :transactionCount="transactionCount"></user-card>
|
||||
|
||||
<form-user-data :UserProfileTestData="UserProfileTestData" />
|
||||
<form-username :UserProfileTestData="UserProfileTestData" />
|
||||
<form-user-mail :UserProfileTestData="UserProfileTestData" />
|
||||
<form-user-passwort :UserProfileTestData="UserProfileTestData" />
|
||||
</b-container>
|
||||
</template>
|
||||
<script>
|
||||
import UserCard from './UserProfile/UserCard.vue'
|
||||
import FormUserData from './UserProfile/UserCard_FormUserData.vue'
|
||||
import FormUserMail from './UserProfile/UserCard_FormUserMail.vue'
|
||||
import FormUsername from './UserProfile/UserCard_FormUsername.vue'
|
||||
import FormUserPasswort from './UserProfile/UserCard_FormUserPasswort.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
UserCard,
|
||||
FormUserData,
|
||||
FormUserMail,
|
||||
FormUsername,
|
||||
FormUserPasswort,
|
||||
},
|
||||
props: {
|
||||
balance: { type: Number, default: 0 },
|
||||
transactionCount: { type: Number, default: 0 },
|
||||
UserProfileTestData: { type: Object },
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style></style>
|
||||
@ -1,10 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
class="header pb-8 pt-lg-4 d-flex align-items-center profile-header"
|
||||
style="max-height: 200px"
|
||||
></div>
|
||||
<b-container fluid class="mt--6">
|
||||
<b-container fluid>
|
||||
<b-row>
|
||||
<b-col class="order-xl-1">
|
||||
<gdd-table
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user