Files
nuxt-frontend/components/Members/PageMembers.vue
Joris Slagter 791aebc346
Some checks failed
continuous-integration/drone/push Build is failing
Initial Nuxt frontend import
- Complete GGZ Ecademy Nuxt.js user portal
- Learning products browser and management
- Member management interface
- User authentication and roles
- Multi-language support (NL/EN)
- Vuex store for state management
- Component-based architecture
2025-12-02 17:48:48 +01:00

896 lines
24 KiB
Vue

<template>
<accordion-card title="Ledenpagina">
<v-row v-if="$store.getters.isAdmin || $store.getters.isOperator">
<v-col cols="12" sm="12" md="3">
<v-subheader class="txt--text font-weight-black in_the_picture"
>Gegevens tonen</v-subheader
>
</v-col>
<v-col cols="12" sm="12" md="6" class="d-flex">
<v-switch
:disabled="!editMode"
inset
class="my-3 toggle"
v-model="show_on_website"
/>
<small class="my-4"
><strong>
{{
show_on_website
? 'Aan (Met het aanzetten van deze optie worden onderstaande gegevens op de website van GGZ Ecademy gepubliceerd. Ik verklaar daarvoor toestemming te hebben van degene wiens gegevens het betreft.)'
: 'Uit'
}}
</strong>
</small>
</v-col>
<v-col class="my-4" cols="12" sm="12" md="3">
Bij 'Uit' wordt alleen het logo en de website link getoond
</v-col>
</v-row>
<v-row>
<v-col cols="12" sm="12" md="12">
<v-subheader class="txt--text font-weight-black in_the_picture"
>Helpdesk voor cursisten</v-subheader
>
</v-col>
</v-row>
<v-row>
<v-col cols="12" sm="12" md="3">
<v-subheader class="txt--text"> Afdeling </v-subheader>
</v-col>
<v-col cols="12" sm="12" md="6">
<v-text-field
:hide-details="!editMode"
:outlined="editMode"
:solo="!editMode"
:disabled="!editMode"
:flat="!editMode"
v-model="helpdesk_department"
>
<template
slot="append"
v-if="
$store.getters['members/revision'] &&
!areEqualInputs(
helpdesk_department,
$store.getters['members/revision'].helpdesk_department
)
"
>
<span class="caption accent--text">
{{ $store.getters['members/revision'].helpdesk_department }}
</span>
</template>
</v-text-field>
</v-col>
<v-col cols="12" sm="12" md="3">
<field-has-changes
v-if="
$store.getters['members/revision'] &&
!areEqualInputs(
helpdesk_department,
$store.getters['members/revision'].helpdesk_department
)
"
/>
</v-col>
</v-row>
<v-row>
<v-col cols="12" sm="12" md="3">
<v-subheader class="txt--text"> Contactpersoon </v-subheader>
</v-col>
<v-col cols="12" sm="12" md="6">
<v-text-field
:hide-details="!editMode"
:outlined="editMode"
:solo="!editMode"
:disabled="!editMode"
:flat="!editMode"
v-model="helpdesk_contact_person"
>
<template
slot="append"
v-if="
$store.getters['members/revision'] &&
!areEqualInputs(
helpdesk_contact_person,
$store.getters['members/revision'].helpdesk_contact_person
)
"
>
<span class="caption accent--text">
{{ $store.getters['members/revision'].helpdesk_contact_person }}
</span>
</template>
</v-text-field>
</v-col>
<v-col cols="12" sm="12" md="3">
<field-has-changes
v-if="
$store.getters['members/revision'] &&
!areEqualInputs(
helpdesk_contact_person,
$store.getters['members/revision'].helpdesk_contact_person
)
"
/>
</v-col>
</v-row>
<v-row>
<v-col cols="12" sm="12" md="3">
<v-subheader class="txt--text"> Emailadres </v-subheader>
</v-col>
<v-col cols="12" sm="12" md="6">
<v-text-field
:hide-details="!editMode"
:outlined="editMode"
:solo="!editMode"
:disabled="!editMode"
:flat="!editMode"
v-model="helpdesk_email"
>
<template
slot="append"
v-if="
$store.getters['members/revision'] &&
!areEqualInputs(
helpdesk_email,
$store.getters['members/revision'].helpdesk_email
)
"
>
<span class="caption accent--text">
{{ $store.getters['members/revision'].helpdesk_email }}
</span>
</template>
</v-text-field>
</v-col>
<v-col cols="12" sm="12" md="3">
<field-has-changes
v-if="
$store.getters['members/revision'] &&
!areEqualInputs(
helpdesk_email,
$store.getters['members/revision'].helpdesk_email
)
"
/>
</v-col>
</v-row>
<v-row>
<v-col cols="12" sm="12" md="3">
<v-subheader class="txt--text"> Telefoonnummer </v-subheader>
</v-col>
<v-col cols="12" sm="12" md="6">
<v-text-field
:hide-details="!editMode"
:outlined="editMode"
:solo="!editMode"
:disabled="!editMode"
:flat="!editMode"
v-model="helpdesk_phone"
>
<template
slot="append"
v-if="
$store.getters['members/revision'] &&
!areEqualInputs(
helpdesk_phone,
$store.getters['members/revision'].helpdesk_phone
)
"
>
<span class="caption accent--text">
{{ $store.getters['members/revision'].helpdesk_phone }}
</span>
</template>
</v-text-field>
</v-col>
<v-col cols="12" sm="12" md="3">
<field-has-changes
v-if="
$store.getters['members/revision'] &&
!areEqualInputs(
helpdesk_phone,
$store.getters['members/revision'].helpdesk_phone
)
"
/>
</v-col>
</v-row>
<v-row>
<v-col cols="12" sm="12" md="12">
<v-subheader class="txt--text font-weight-black in_the_picture"
>Informatie over scholing</v-subheader
>
</v-col>
</v-row>
<v-row>
<v-col cols="12" sm="12" md="3">
<v-subheader class="txt--text"> Afdeling </v-subheader>
</v-col>
<v-col cols="12" sm="12" md="6">
<v-text-field
:hide-details="!editMode"
:outlined="editMode"
:solo="!editMode"
:disabled="!editMode"
:flat="!editMode"
v-model="info_department"
>
<template
slot="append"
v-if="
$store.getters['members/revision'] &&
!areEqualInputs(
info_department,
$store.getters['members/revision'].info_department
)
"
>
<span class="caption accent--text">
{{ $store.getters['members/revision'].info_department }}
</span>
</template>
</v-text-field>
</v-col>
<v-col cols="12" sm="12" md="3">
<field-has-changes
v-if="
$store.getters['members/revision'] &&
!areEqualInputs(
info_department,
$store.getters['members/revision'].info_department
)
"
/>
</v-col>
</v-row>
<v-row>
<v-col cols="12" sm="12" md="3">
<v-subheader class="txt--text"> Contactpersoon </v-subheader>
</v-col>
<v-col cols="12" sm="12" md="6">
<v-text-field
:hide-details="!editMode"
:outlined="editMode"
:solo="!editMode"
:disabled="!editMode"
:flat="!editMode"
v-model="info_contacteperson"
>
<template
slot="append"
v-if="
$store.getters['members/revision'] &&
!areEqualInputs(
info_contacteperson,
$store.getters['members/revision'].info_contacteperson
)
"
>
<span class="caption accent--text">
{{ $store.getters['members/revision'].info_contacteperson }}
</span>
</template>
</v-text-field>
</v-col>
<v-col cols="12" sm="12" md="3">
<field-has-changes
v-if="
$store.getters['members/revision'] &&
!areEqualInputs(
info_contacteperson,
$store.getters['members/revision'].info_contacteperson
)
"
/>
</v-col>
</v-row>
<v-row>
<v-col cols="12" sm="12" md="3">
<v-subheader class="txt--text"> Emailadres </v-subheader>
</v-col>
<v-col cols="12" sm="12" md="6">
<v-text-field
:hide-details="!editMode"
:outlined="editMode"
:solo="!editMode"
:disabled="!editMode"
:flat="!editMode"
v-model="info_email"
>
<template
slot="append"
v-if="
$store.getters['members/revision'] &&
!areEqualInputs(
info_email,
$store.getters['members/revision'].info_email
)
"
>
<span class="caption accent--text">
{{ $store.getters['members/revision'].info_email }}
</span>
</template>
</v-text-field>
</v-col>
<v-col cols="12" sm="12" md="3">
<field-has-changes
v-if="
$store.getters['members/revision'] &&
!areEqualInputs(
info_email,
$store.getters['members/revision'].info_email
)
"
/>
</v-col>
</v-row>
<v-row>
<v-col cols="12" sm="12" md="3">
<v-subheader class="txt--text"> Telefoonnummer </v-subheader>
</v-col>
<v-col cols="12" sm="12" md="6">
<v-text-field
:hide-details="!editMode"
:outlined="editMode"
:solo="!editMode"
:disabled="!editMode"
:flat="!editMode"
v-model="info_phone"
>
<template
slot="append"
v-if="
$store.getters['members/revision'] &&
!areEqualInputs(
info_phone,
$store.getters['members/revision'].info_phone
)
"
>
<span class="caption accent--text">
{{ $store.getters['members/revision'].info_phone }}
</span>
</template>
</v-text-field>
</v-col>
<v-col cols="12" sm="12" md="3">
<field-has-changes
v-if="
$store.getters['members/revision'] &&
!areEqualInputs(
info_phone,
$store.getters['members/revision'].info_phone
)
"
/>
</v-col>
</v-row>
<v-row>
<v-col cols="12" sm="12" md="3">
<v-subheader class="txt--text"> Straat </v-subheader>
</v-col>
<v-col cols="12" sm="12" md="6">
<v-text-field
:hide-details="!editMode"
:outlined="editMode"
:solo="!editMode"
:disabled="!editMode"
:flat="!editMode"
v-model="info_address"
>
<template
slot="append"
v-if="
$store.getters['members/revision'] &&
!areEqualInputs(
info_address,
$store.getters['members/revision'].info_address
)
"
>
<span class="caption accent--text">
{{ $store.getters['members/revision'].info_address }}
</span>
</template>
</v-text-field>
</v-col>
<v-col cols="12" sm="12" md="3">
<field-has-changes
v-if="
$store.getters['members/revision'] &&
!areEqualInputs(
info_address,
$store.getters['members/revision'].info_address
)
"
/>
</v-col>
</v-row>
<v-row>
<v-col cols="12" sm="12" md="3">
<v-subheader class="txt--text"> Huisnummer </v-subheader>
</v-col>
<v-col cols="12" sm="12" md="6">
<v-text-field
:hide-details="!editMode"
:outlined="editMode"
:solo="!editMode"
:disabled="!editMode"
:flat="!editMode"
v-model="info_housenumber"
>
<template
slot="append"
v-if="
$store.getters['members/revision'] &&
!areEqualInputs(
info_housenumber,
$store.getters['members/revision'].info_housenumber
)
"
>
<span class="caption accent--text">
{{ $store.getters['members/revision'].info_housenumber }}
</span>
</template>
</v-text-field>
</v-col>
<v-col cols="12" sm="12" md="3">
<field-has-changes
v-if="
$store.getters['members/revision'] &&
!areEqualInputs(
info_housenumber,
$store.getters['members/revision'].info_housenumber
)
"
/>
</v-col>
</v-row>
<v-row>
<v-col cols="12" sm="12" md="3">
<v-subheader class="txt--text"> Postcode </v-subheader>
</v-col>
<v-col cols="12" sm="12" md="6">
<v-text-field
:hide-details="!editMode"
:outlined="editMode"
:solo="!editMode"
:disabled="!editMode"
:flat="!editMode"
v-model="info_postal"
>
<template
slot="append"
v-if="
$store.getters['members/revision'] &&
!areEqualInputs(
info_postal,
$store.getters['members/revision'].info_postal
)
"
>
<span class="caption accent--text">
{{ $store.getters['members/revision'].info_postal }}
</span>
</template>
</v-text-field>
</v-col>
<v-col cols="12" sm="12" md="3">
<field-has-changes
v-if="
$store.getters['members/revision'] &&
!areEqualInputs(
info_postal,
$store.getters['members/revision'].info_postal
)
"
/>
</v-col>
</v-row>
<v-row>
<v-col cols="12" sm="12" md="3">
<v-subheader class="txt--text"> Plaats </v-subheader>
</v-col>
<v-col cols="12" sm="12" md="6">
<v-text-field
:hide-details="!editMode"
:outlined="editMode"
:solo="!editMode"
:disabled="!editMode"
:flat="!editMode"
v-model="info_city"
>
<template
slot="append"
v-if="
$store.getters['members/revision'] &&
!areEqualInputs(
info_city,
$store.getters['members/revision'].info_city
)
"
>
<span class="caption accent--text">
{{ $store.getters['members/revision'].info_city }}
</span>
</template>
</v-text-field>
</v-col>
<v-col cols="12" sm="12" md="3">
<field-has-changes
v-if="
$store.getters['members/revision'] &&
!areEqualInputs(
info_city,
$store.getters['members/revision'].info_city
)
"
/>
</v-col>
</v-row>
<v-row>
<v-col cols="12" sm="12" md="3">
<v-subheader class="txt--text"> Land </v-subheader>
</v-col>
<v-col cols="12" sm="12" md="6">
<v-text-field
:hide-details="!editMode"
:outlined="editMode"
:solo="!editMode"
:disabled="!editMode"
:flat="!editMode"
v-model="info_country"
>
<template
slot="append"
v-if="
$store.getters['members/revision'] &&
!areEqualInputs(
info_country,
$store.getters['members/revision'].info_country
)
"
>
<span class="caption accent--text">
{{ $store.getters['members/revision'].info_country }}
</span>
</template>
</v-text-field>
</v-col>
<v-col cols="12" sm="12" md="3">
<field-has-changes
v-if="
$store.getters['members/revision'] &&
!areEqualInputs(
info_country,
$store.getters['members/revision'].info_country
)
"
/>
</v-col>
</v-row>
<v-row>
<v-col cols="12" sm="12" md="3">
<v-subheader class="txt--text"> Link </v-subheader>
</v-col>
<v-col cols="12" sm="12" md="6">
<v-text-field
:hide-details="!editMode"
:outlined="editMode"
:solo="!editMode"
:disabled="!editMode"
:flat="!editMode"
v-model="info_link"
>
<template
slot="append"
v-if="
$store.getters['members/revision'] &&
!areEqualInputs(
info_link,
$store.getters['members/revision'].info_link
)
"
>
<span class="caption accent--text">
{{ $store.getters['members/revision'].info_link }}
</span>
</template>
</v-text-field>
</v-col>
<v-col cols="12" sm="12" md="3">
<field-has-changes
v-if="
$store.getters['members/revision'] &&
!areEqualInputs(
info_link,
$store.getters['members/revision'].info_link
)
"
/>
</v-col>
</v-row>
<v-row>
<v-col cols="12" sm="12" md="12">
<v-subheader class="txt--text font-weight-black in_the_picture"
>Meer informatie</v-subheader
>
</v-col>
</v-row>
<v-row>
<v-col cols="12" sm="12" md="3">
<v-subheader class="txt--text"> Website url </v-subheader>
</v-col>
<v-col cols="12" sm="12" md="6">
<v-text-field
:hide-details="!editMode"
:outlined="editMode"
:solo="!editMode"
:disabled="!editMode"
:flat="!editMode"
v-model="more_info_link"
>
<template
slot="append"
v-if="
$store.getters['members/revision'] &&
!areEqualInputs(
more_info_link,
$store.getters['members/revision'].more_info_link
)
"
>
<span class="caption accent--text">
{{ $store.getters['members/revision'].more_info_link }}
</span>
</template>
</v-text-field>
</v-col>
<v-col cols="12" sm="12" md="3">
<field-has-changes
v-if="
$store.getters['members/revision'] &&
!areEqualInputs(
more_info_link,
$store.getters['members/revision'].more_info_link
)
"
/>
</v-col>
</v-row>
</accordion-card>
</template>
<script>
import accordionCard from '@/components/UI/AccordionCard/AccordionCard'
import fieldHasChanges from '@/components/Members/FieldHasChanges'
export default {
components: {
accordionCard,
fieldHasChanges,
},
props: {
editMode: {
type: Boolean,
default: false,
},
},
computed: {
local() {
return this.$store.state.members.local
},
show_on_website: {
get() {
return this.local.show_on_website
},
set(value) {
this.$store.commit('members/UPDATE_FIELD', {
field: 'show_on_website',
value,
})
},
},
helpdesk_department: {
get() {
return this.local.helpdesk_department
},
set(value) {
this.$store.commit('members/UPDATE_FIELD', {
field: 'helpdesk_department',
value,
})
},
},
helpdesk_contact_person: {
get() {
return this.local.helpdesk_contact_person
},
set(value) {
this.$store.commit('members/UPDATE_FIELD', {
field: 'helpdesk_contact_person',
value,
})
},
},
helpdesk_email: {
get() {
return this.local.helpdesk_email
},
set(value) {
this.$store.commit('members/UPDATE_FIELD', {
field: 'helpdesk_email',
value,
})
},
},
helpdesk_phone: {
get() {
return this.local.helpdesk_phone
},
set(value) {
this.$store.commit('members/UPDATE_FIELD', {
field: 'helpdesk_phone',
value,
})
},
},
info_department: {
get() {
return this.local.info_department
},
set(value) {
this.$store.commit('members/UPDATE_FIELD', {
field: 'info_department',
value,
})
},
},
info_contacteperson: {
get() {
return this.local.info_contacteperson
},
set(value) {
this.$store.commit('members/UPDATE_FIELD', {
field: 'info_contacteperson',
value,
})
},
},
info_email: {
get() {
return this.local.info_email
},
set(value) {
this.$store.commit('members/UPDATE_FIELD', {
field: 'info_email',
value,
})
},
},
info_phone: {
get() {
return this.local.info_phone
},
set(value) {
this.$store.commit('members/UPDATE_FIELD', {
field: 'info_phone',
value,
})
},
},
info_address: {
get() {
return this.local.info_address
},
set(value) {
this.$store.commit('members/UPDATE_FIELD', {
field: 'info_address',
value,
})
},
},
info_housenumber: {
get() {
return this.local.info_housenumber
},
set(value) {
this.$store.commit('members/UPDATE_FIELD', {
field: 'info_housenumber',
value,
})
},
},
info_postal: {
get() {
return this.local.info_postal
},
set(value) {
this.$store.commit('members/UPDATE_FIELD', {
field: 'info_postal',
value,
})
},
},
info_city: {
get() {
return this.local.info_city
},
set(value) {
this.$store.commit('members/UPDATE_FIELD', {
field: 'info_city',
value,
})
},
},
info_country: {
get() {
return this.local.info_country
},
set(value) {
this.$store.commit('members/UPDATE_FIELD', {
field: 'info_country',
value,
})
},
},
info_link: {
get() {
return this.local.info_link
},
set(value) {
this.$store.commit('members/UPDATE_FIELD', {
field: 'info_link',
value,
})
},
},
more_info_link: {
get() {
return this.local.more_info_link
},
set(value) {
this.$store.commit('members/UPDATE_FIELD', {
field: 'more_info_link',
value,
})
},
},
},
methods: {
areEqualInputs(input1, input2) {
return this.$store.getters['utils/areEquals'](input1, input2)
},
},
}
</script>
<style scoped>
.v-card >>> .v-subheader {
padding: 0px !important;
}
</style>