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',
|
path: '/profile',
|
||||||
component: () => import('../views/Pages/UserProfileCard.vue'),
|
component: () => import('../views/Pages/UserProfileOverview.vue'),
|
||||||
meta: {
|
meta: {
|
||||||
requiresAuth: true,
|
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',
|
path: '/transactions',
|
||||||
component: () => import('../views/Pages/UserProfileTransactionList.vue'),
|
component: () => import('../views/Pages/UserProfileTransactionList.vue'),
|
||||||
|
|||||||
@ -75,7 +75,7 @@ describe('DashboardLayoutGdd', () => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
it('has five items in the navbar', () => {
|
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', () => {
|
it('has first item "send" in navbar', () => {
|
||||||
@ -100,21 +100,21 @@ describe('DashboardLayoutGdd', () => {
|
|||||||
expect(wrapper.findComponent(RouterLinkStub).props().to).toBe('/transactions')
|
expect(wrapper.findComponent(RouterLinkStub).props().to).toBe('/transactions')
|
||||||
})
|
})
|
||||||
|
|
||||||
// it('has tree items in the navbar', () => {
|
it('has tree items in the navbar', () => {
|
||||||
// expect(navbar.findAll('ul > li')).toHaveLength(3)
|
expect(navbar.findAll('ul > a')).toHaveLength(3)
|
||||||
// })
|
})
|
||||||
//
|
|
||||||
// it('has third item "My profile" in navbar', () => {
|
it('has third item "My profile" in navbar', () => {
|
||||||
// expect(navbar.findAll('ul > li').at(2).text()).toEqual('site.navbar.my-profil')
|
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 () => {
|
it.skip('has third item "My profile" linked to profile in navbar', async () => {
|
||||||
// navbar.findAll('ul > li > a').at(2).trigger('click')
|
navbar.findAll('ul > a').at(2).trigger('click')
|
||||||
// await flushPromises()
|
await flushPromises()
|
||||||
// await jest.runAllTimers()
|
await jest.runAllTimers()
|
||||||
// await flushPromises()
|
await flushPromises()
|
||||||
// expect(wrapper.findComponent(RouterLinkStub).props().to).toBe('/profile')
|
expect(wrapper.findComponent(RouterLinkStub).props().to).toBe('/profile')
|
||||||
// })
|
})
|
||||||
|
|
||||||
// it('has fourth item "Settigs" in navbar', () => {
|
// it('has fourth item "Settigs" in navbar', () => {
|
||||||
// expect(navbar.findAll('ul > li').at(3).text()).toEqual('site.navbar.settings')
|
// expect(navbar.findAll('ul > li').at(3).text()).toEqual('site.navbar.settings')
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="wrapper">
|
<div>
|
||||||
<side-bar @logout="logout" :balance="balance" :pending="pending">
|
<side-bar @logout="logout" :balance="balance" :pending="pending">
|
||||||
<template slot="links">
|
<template slot="links">
|
||||||
<sidebar-item
|
<sidebar-item
|
||||||
@ -20,14 +20,6 @@
|
|||||||
path: '/profile',
|
path: '/profile',
|
||||||
}"
|
}"
|
||||||
></sidebar-item>
|
></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>
|
</template>
|
||||||
</side-bar>
|
</side-bar>
|
||||||
<div class="main-content">
|
<div class="main-content">
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<base-nav
|
<base-nav
|
||||||
container-classes="container-fluid"
|
container-classes="container-fluid"
|
||||||
class="navbar-top navbar-expand"
|
class="navbar-expand"
|
||||||
:class="{ 'navbar-dark': type === 'default' }"
|
:class="{ 'navbar-dark': type === 'default' }"
|
||||||
>
|
>
|
||||||
<!-- Navbar links -->
|
<!-- Navbar links -->
|
||||||
@ -15,7 +15,7 @@
|
|||||||
<span class="pb-2 text-lg font-weight-bold">
|
<span class="pb-2 text-lg font-weight-bold">
|
||||||
{{ $store.state.email }}
|
{{ $store.state.email }}
|
||||||
</span>
|
</span>
|
||||||
<b-media-body class="ml-2 d-none d-lg-block">
|
<b-media-body class="ml-2">
|
||||||
<span class="avatar">
|
<span class="avatar">
|
||||||
<vue-qrcode :value="$store.state.email" type="image/png"></vue-qrcode>
|
<vue-qrcode :value="$store.state.email" type="image/png"></vue-qrcode>
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
@ -19,10 +19,6 @@ describe('AccountOverview', () => {
|
|||||||
wrapper = Wrapper()
|
wrapper = Wrapper()
|
||||||
})
|
})
|
||||||
|
|
||||||
it('has a header', () => {
|
|
||||||
expect(wrapper.find('base-header-stub').exists()).toBeTruthy()
|
|
||||||
})
|
|
||||||
|
|
||||||
it('has a status line', () => {
|
it('has a status line', () => {
|
||||||
expect(wrapper.find('gdd-status-stub').exists()).toBeTruthy()
|
expect(wrapper.find('gdd-status-stub').exists()).toBeTruthy()
|
||||||
})
|
})
|
||||||
|
|||||||
@ -1,7 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<base-header class="pb-md-4 pt-md-2 pb-lg-4 pt-lg-2 bg-transparent"></base-header>
|
<b-container fluid>
|
||||||
<b-container fluid class="p-lg-2 mt-lg-5">
|
|
||||||
<gdd-status
|
<gdd-status
|
||||||
v-if="showContext"
|
v-if="showContext"
|
||||||
:pending="pending"
|
: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>
|
</div>
|
||||||
</b-col>
|
</b-col>
|
||||||
</b-row>
|
</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>
|
</b-card>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import VueQrcode from 'vue-qrcode'
|
import VueQrcode from 'vue-qrcode'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'profilecard',
|
name: 'UserCard',
|
||||||
components: {
|
components: {
|
||||||
VueQrcode,
|
VueQrcode,
|
||||||
},
|
},
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
edit_userdata: true,
|
|
||||||
edit_pwd: true,
|
|
||||||
edit_email: true,
|
|
||||||
edit_username: true,
|
|
||||||
edit_button_text: 'edit',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
props: {
|
props: {
|
||||||
balance: { type: Number, default: 0 },
|
balance: { type: Number, default: 0 },
|
||||||
transactionCount: { type: Number, default: 0 },
|
transactionCount: { type: Number, default: 0 },
|
||||||
UserProfileTestData: { type: Object },
|
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</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>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<b-container fluid>
|
||||||
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-row>
|
<b-row>
|
||||||
<b-col class="order-xl-1">
|
<b-col class="order-xl-1">
|
||||||
<gdd-table
|
<gdd-table
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user