- 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
This commit is contained in:
Joris Slagter
714
components/Members/AddressMembers.vue
Normal file
714
components/Members/AddressMembers.vue
Normal file
@@ -0,0 +1,714 @@
|
||||
<template>
|
||||
<accordion-card title="Adressen">
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="addresses"
|
||||
:options="options"
|
||||
hide-default-footer
|
||||
item-key="address"
|
||||
flat
|
||||
v-if="hasAddresses"
|
||||
>
|
||||
<template v-slot:item.type="{ item }">
|
||||
{{ $t(`members.types.${item.type}`).toLowerCase() }}
|
||||
</template>
|
||||
|
||||
<template v-slot:item.contact="{ item }">
|
||||
{{
|
||||
`${item.first_name_contact_person} ${item.last_name_contact_person}`
|
||||
}}
|
||||
</template>
|
||||
|
||||
<template v-slot:item.address="{ item }">{{
|
||||
`${item.address ? item.address : ''} ${
|
||||
item.postal ? ', ' + item.postal : ''
|
||||
} ${item.city ? item.city : ''}`
|
||||
}}</template>
|
||||
|
||||
<template v-slot:item.profiel="{ item }">
|
||||
<v-icon :color="!item.approved_at ? 'accent' : 'success'">
|
||||
{{
|
||||
!item.approved_at ? 'mdi-alert-circle-outline' : 'icon-checkmark'
|
||||
}}
|
||||
</v-icon>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.actions="{ item }">
|
||||
<v-btn
|
||||
class="mx-4 white--text view"
|
||||
style="height: 100%"
|
||||
:color="$vuetify.theme.dark ? 'info' : 'txt'"
|
||||
rounded
|
||||
depressed
|
||||
small
|
||||
@click="viewItem(item)"
|
||||
v-if="$store.getters.hasCharges"
|
||||
>{{ $t('general.view') }}</v-btn
|
||||
>
|
||||
|
||||
<v-menu offset-y v-if="editMode && $store.getters.isSuperAdminOrAdmin">
|
||||
<template v-slot:activator="{ on }">
|
||||
<v-hover v-slot:default="{ hover }">
|
||||
<v-btn
|
||||
:color="hover ? 'info' : ''"
|
||||
:outlined="hover"
|
||||
depressed
|
||||
fab
|
||||
small
|
||||
v-on="on"
|
||||
>
|
||||
<v-icon>icon-options</v-icon>
|
||||
</v-btn>
|
||||
</v-hover>
|
||||
</template>
|
||||
<v-list width="200">
|
||||
<v-list-item @click="editItem(item)">
|
||||
<v-list-item-icon class="mr-1">
|
||||
<v-icon small>icon-edit</v-icon>
|
||||
</v-list-item-icon>
|
||||
|
||||
<v-list-item-content>
|
||||
<v-list-item-subtitle>
|
||||
{{ $t('general.edit') | capitalize }}
|
||||
</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
|
||||
<v-dialog
|
||||
max-width="740"
|
||||
:persistent="editModeComputed"
|
||||
v-model="dialogDelete"
|
||||
>
|
||||
<template v-slot:activator="{ on }">
|
||||
<v-list-item v-on="on">
|
||||
<v-list-item-icon class="mr-1">
|
||||
<v-icon small>icon-remove</v-icon>
|
||||
</v-list-item-icon>
|
||||
|
||||
<v-list-item-content>
|
||||
<v-list-item-subtitle>
|
||||
{{ $t('general.delete') | capitalize }}
|
||||
</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</template>
|
||||
<v-card class="primary pa-10" flat>
|
||||
<v-card-title class="headline">{{
|
||||
$t('learning.delete_addressmembers_confirmation')
|
||||
}}</v-card-title>
|
||||
<v-card-actions>
|
||||
<div class="ma-4">
|
||||
<v-btn
|
||||
@click="deleteItem(item)"
|
||||
class="mx-2"
|
||||
color="accent"
|
||||
depressed
|
||||
rounded
|
||||
>{{ $t('general.delete') }}</v-btn
|
||||
>
|
||||
<v-btn
|
||||
@click="dialogDelete = false"
|
||||
class="mx-2"
|
||||
color="info"
|
||||
depressed
|
||||
rounded
|
||||
>{{ $t('general.cancel') }}</v-btn
|
||||
>
|
||||
</div>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</template>
|
||||
</v-data-table>
|
||||
|
||||
<v-dialog
|
||||
v-model="dialogAddresses"
|
||||
max-width="75%"
|
||||
v-if="$store.getters.isSuperAdminOrAdmin"
|
||||
>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-btn
|
||||
v-if="editMode"
|
||||
class="my-10 cta-secondary"
|
||||
block
|
||||
depressed
|
||||
min-height="60px"
|
||||
:disabled="isCreateMode"
|
||||
v-on="on"
|
||||
@click="addressEditMode = true"
|
||||
>
|
||||
<v-icon x-small class="mx-4">icon-add</v-icon>Nieuw adres toevoegen
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-form ref="form" v-model="valid" lazy-validation>
|
||||
<v-card ref="card">
|
||||
<v-card-title>
|
||||
<span class="headline">{{ formTitle }}</span>
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text>
|
||||
<v-container>
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-subheader class="txt--text font-weight-black"
|
||||
>Type</v-subheader
|
||||
>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-select
|
||||
v-model="editedItem.type"
|
||||
:items="types"
|
||||
:outlined="editModeComputed"
|
||||
:solo="!editModeComputed"
|
||||
:disabled="!editModeComputed"
|
||||
:flat="!editModeComputed"
|
||||
v-if="isCreatedModeAddress"
|
||||
:rules="rules.type"
|
||||
required
|
||||
error
|
||||
/>
|
||||
|
||||
<v-text-field
|
||||
:outlined="editModeComputed"
|
||||
:solo="!editModeComputed"
|
||||
disabled
|
||||
:flat="!editModeComputed"
|
||||
v-model="editedItem.type"
|
||||
v-else
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-subheader class="txt--text font-weight-black"
|
||||
>Onder vermelding van</v-subheader
|
||||
>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-text-field
|
||||
:outlined="editModeComputed"
|
||||
:solo="!editModeComputed"
|
||||
:disabled="!editModeComputed"
|
||||
:flat="!editModeComputed"
|
||||
v-model="editedItem.indicating"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-subheader class="txt--text font-weight-black"
|
||||
>Aanhef</v-subheader
|
||||
>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-text-field
|
||||
:outlined="editModeComputed"
|
||||
:solo="!editModeComputed"
|
||||
:disabled="!editModeComputed"
|
||||
:flat="!editModeComputed"
|
||||
v-model="editedItem.title_contact_person"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-subheader class="txt--text font-weight-black"
|
||||
>Voorletters</v-subheader
|
||||
>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-text-field
|
||||
:outlined="editModeComputed"
|
||||
:solo="!editModeComputed"
|
||||
:disabled="!editModeComputed"
|
||||
:flat="!editModeComputed"
|
||||
v-model="editedItem.initials_contact_person"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-subheader class="txt--text font-weight-black"
|
||||
>T.a.v. voornaam</v-subheader
|
||||
>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-text-field
|
||||
:outlined="editModeComputed"
|
||||
:solo="!editModeComputed"
|
||||
:disabled="!editModeComputed"
|
||||
:flat="!editModeComputed"
|
||||
v-model="editedItem.first_name_contact_person"
|
||||
:rules="rules.first_name"
|
||||
required
|
||||
error
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-subheader class="txt--text font-weight-black"
|
||||
>Tussenvoegsel</v-subheader
|
||||
>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-text-field
|
||||
:outlined="editModeComputed"
|
||||
:solo="!editModeComputed"
|
||||
:disabled="!editModeComputed"
|
||||
:flat="!editModeComputed"
|
||||
v-model="editedItem.middle_name_contact_person"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-subheader class="txt--text font-weight-black"
|
||||
>T.a.v. achternaam</v-subheader
|
||||
>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-text-field
|
||||
:outlined="editModeComputed"
|
||||
:solo="!editModeComputed"
|
||||
:disabled="!editModeComputed"
|
||||
:flat="!editModeComputed"
|
||||
v-model="editedItem.last_name_contact_person"
|
||||
:rules="rules.last_name"
|
||||
required
|
||||
error
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-subheader class="txt--text font-weight-black"
|
||||
>Mailadres</v-subheader
|
||||
>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-text-field
|
||||
:outlined="editModeComputed"
|
||||
:solo="!editModeComputed"
|
||||
:disabled="!editModeComputed"
|
||||
:flat="!editModeComputed"
|
||||
v-model="editedItem.email"
|
||||
type="email"
|
||||
:rules="rules.email"
|
||||
required
|
||||
error
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-subheader class="txt--text font-weight-black"
|
||||
>Functie</v-subheader
|
||||
>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-text-field
|
||||
:outlined="editModeComputed"
|
||||
:solo="!editModeComputed"
|
||||
:disabled="!editModeComputed"
|
||||
:flat="!editModeComputed"
|
||||
v-model="editedItem.job_title_contact_person"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-subheader class="txt--text font-weight-black"
|
||||
>Telefoonnummer</v-subheader
|
||||
>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-text-field
|
||||
:outlined="editModeComputed"
|
||||
:solo="!editModeComputed"
|
||||
:disabled="!editModeComputed"
|
||||
:flat="!editModeComputed"
|
||||
v-model="editedItem.phone"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-subheader class="txt--text font-weight-black"
|
||||
>Straatnaam</v-subheader
|
||||
>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-text-field
|
||||
:outlined="editModeComputed"
|
||||
:solo="!editModeComputed"
|
||||
:disabled="!editModeComputed"
|
||||
:flat="!editModeComputed"
|
||||
v-model="editedItem.address"
|
||||
:rules="rules.address"
|
||||
required
|
||||
error
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-subheader class="txt--text font-weight-black"
|
||||
>Huisnummer</v-subheader
|
||||
>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-text-field
|
||||
:outlined="editModeComputed"
|
||||
:solo="!editModeComputed"
|
||||
:disabled="!editModeComputed"
|
||||
:flat="!editModeComputed"
|
||||
v-model="editedItem.house_number"
|
||||
:rules="rules.house_number"
|
||||
required
|
||||
error
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-subheader class="txt--text font-weight-black"
|
||||
>Postcode</v-subheader
|
||||
>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-text-field
|
||||
:outlined="editModeComputed"
|
||||
:solo="!editModeComputed"
|
||||
:disabled="!editModeComputed"
|
||||
:flat="!editModeComputed"
|
||||
v-model="editedItem.postal"
|
||||
:rules="rules.postal"
|
||||
required
|
||||
error
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-subheader class="txt--text font-weight-black"
|
||||
>Plaats</v-subheader
|
||||
>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-text-field
|
||||
:outlined="editModeComputed"
|
||||
:solo="!editModeComputed"
|
||||
:disabled="!editModeComputed"
|
||||
:flat="!editModeComputed"
|
||||
v-model="editedItem.city"
|
||||
:rules="rules.city"
|
||||
required
|
||||
error
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-subheader class="txt--text font-weight-black"
|
||||
>Land</v-subheader
|
||||
>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-text-field
|
||||
:outlined="editModeComputed"
|
||||
:solo="!editModeComputed"
|
||||
:disabled="!editModeComputed"
|
||||
:flat="!editModeComputed"
|
||||
v-model="editedItem.country"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-card-text>
|
||||
|
||||
<v-divider />
|
||||
<v-card-actions v-if="editModeComputed">
|
||||
<v-btn
|
||||
class="ma-2 white--text"
|
||||
color="info"
|
||||
depressed
|
||||
rounded
|
||||
:disabled="loading"
|
||||
@click="validate() && save()"
|
||||
v-if="
|
||||
$store.getters.isSuperAdmin ||
|
||||
$store.getters.isAdmin ||
|
||||
isUserDelegated
|
||||
"
|
||||
>{{ $t('general.save') }}</v-btn
|
||||
>
|
||||
<v-spacer />
|
||||
<v-btn
|
||||
class="ma-2 white--text"
|
||||
color="txt"
|
||||
depressed
|
||||
text
|
||||
:disabled="loading"
|
||||
@click="close"
|
||||
>{{ $t('general.cancel') }}</v-btn
|
||||
>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-form>
|
||||
</v-dialog>
|
||||
|
||||
<p v-if="isCreateMode" class="text-center">
|
||||
Bij het aanmaken van een nieuw lid kiest u eerst voor 'Tussentijds
|
||||
Opslaan' om deze functie te activeren.
|
||||
</p>
|
||||
</accordion-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import accordionCard from '@/components/UI/AccordionCard/AccordionCard'
|
||||
export default {
|
||||
components: {
|
||||
accordionCard,
|
||||
},
|
||||
props: {
|
||||
editMode: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isCreateMode: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
options: {
|
||||
itemsPerPage: -1,
|
||||
},
|
||||
headers: [
|
||||
{ text: 'type', value: 'type' },
|
||||
{ text: 't.a.v.', value: 'contact' },
|
||||
{ text: 'adres', value: 'address' },
|
||||
{ text: 'mailadres', value: 'email' },
|
||||
{ text: 'telefoonnummer', value: 'phone' },
|
||||
{ text: 'profiel', value: 'profiel', sortable: false },
|
||||
{ text: '', value: 'actions' },
|
||||
],
|
||||
typeKeys: ['main', 'visiting', 'invoice', 'other'],
|
||||
addressEditMode: false,
|
||||
dialogAddresses: false,
|
||||
dialogDelete: false,
|
||||
editedIndex: -1,
|
||||
editedItem: {},
|
||||
defaultItem: {},
|
||||
loading: false,
|
||||
rules: {
|
||||
type: [(v) => !!v || 'Het type is verplicht.'],
|
||||
address: [(v) => !!v || 'Straatnaam is verplicht.'],
|
||||
house_number: [(v) => !!v || 'Huisnummer is verplicht.'],
|
||||
postal: [
|
||||
(v) => !!v || 'Postcode is verplicht.',
|
||||
(v) =>
|
||||
/^[1-9][0-9]{3} ?(?!sa|sd|ss)[a-z]{2}$/i.test(v) ||
|
||||
'Ongeldige postcode',
|
||||
],
|
||||
|
||||
city: [(v) => !!v || 'Plaats is verplicht.'],
|
||||
first_name: [(v) => !!v || 'De voornaam is verplicht.'],
|
||||
last_name: [(v) => !!v || 'De achternaam is verplicht.'],
|
||||
email: [(v) => !!v || 'Het e-mailadres is verplicht.'],
|
||||
},
|
||||
valid: true,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
local() {
|
||||
return this.$store.state.members.local
|
||||
},
|
||||
addresses() {
|
||||
if (!this.local || !Array.isArray(this.local.addresses)) return []
|
||||
return this.local.addresses
|
||||
},
|
||||
hasAddresses() {
|
||||
if (!this.addresses) return false
|
||||
return this.addresses.length > 0
|
||||
},
|
||||
formTitle() {
|
||||
return this.editedIndex === -1 ? 'new' : 'edit'
|
||||
},
|
||||
isCreatedModeAddress() {
|
||||
return this.editedIndex === -1
|
||||
},
|
||||
editModeComputed() {
|
||||
return this.addressEditMode && this.editMode
|
||||
},
|
||||
isUserDelegated() {
|
||||
return this.local.user_id === this.$store.getters.loggedInUser.id
|
||||
},
|
||||
types() {
|
||||
return this.typeKeys.map((key) => ({
|
||||
text: this.$t(`members.types.${key}`).toLowerCase(),
|
||||
value: key,
|
||||
}))
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
dialogAddresses(val) {
|
||||
val || this.close()
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
close() {
|
||||
this.dialogAddresses = false
|
||||
this.$nextTick(() => {
|
||||
this.editedItem = Object.assign({}, this.defaultItem)
|
||||
this.editedIndex = -1
|
||||
this.$refs.card.$el.scrollIntoView(true)
|
||||
})
|
||||
},
|
||||
|
||||
viewItem(item) {
|
||||
this.addressEditMode = false
|
||||
this.editedIndex = this.addresses.indexOf(item)
|
||||
this.editedItem = Object.assign({}, item)
|
||||
this.$forceUpdate()
|
||||
this.dialogAddresses = true
|
||||
},
|
||||
|
||||
editItem(item) {
|
||||
if (!this.editMode) return
|
||||
this.addressEditMode = true
|
||||
this.setItemToEdit(item)
|
||||
this.dialogAddresses = true
|
||||
},
|
||||
|
||||
setItemToEdit(item) {
|
||||
this.editedIndex = this.addresses.indexOf(item)
|
||||
this.editedItem = Object.assign({}, item)
|
||||
this.$forceUpdate()
|
||||
},
|
||||
|
||||
validate() {
|
||||
return this.$refs.form.validate()
|
||||
},
|
||||
|
||||
async save() {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.card.$el.scrollIntoView(true)
|
||||
})
|
||||
this.loading = true
|
||||
this.$nextTick(() => this.$nuxt.$loading.start())
|
||||
this.dialogAddresses = false
|
||||
|
||||
if (this.isCreatedModeAddress) {
|
||||
try {
|
||||
await this.$store.dispatch('members/storeAddress', this.editedItem)
|
||||
this.loading = false
|
||||
} catch (error) {
|
||||
console.log('save -> error', error)
|
||||
this.loading = false
|
||||
}
|
||||
} else {
|
||||
// Edit mode
|
||||
try {
|
||||
await this.$store.dispatch('members/storeAddress', this.editedItem)
|
||||
this.loading = false
|
||||
this.dialogAddresses = false
|
||||
} catch (error) {
|
||||
this.loading = false
|
||||
console.log('save -> error', error)
|
||||
}
|
||||
}
|
||||
|
||||
this.close()
|
||||
this.$nuxt.$loading.finish()
|
||||
},
|
||||
|
||||
async deleteItem(item) {
|
||||
if (!item.id) {
|
||||
this.$notifier.showMessage({
|
||||
content: `No address to delete selected`,
|
||||
color: 'error',
|
||||
icon: 'icon-message',
|
||||
})
|
||||
}
|
||||
|
||||
this.$nextTick(() => this.$nuxt.$loading.start())
|
||||
|
||||
try {
|
||||
await this.$store.dispatch('members/deleteAddress', item)
|
||||
|
||||
this.dialogDelete = false
|
||||
this.dialogAddresses = false
|
||||
this.$nuxt.$loading.finish()
|
||||
} catch (error) {
|
||||
console.log('deleteItem -> error', error)
|
||||
this.$nuxt.$loading.finish()
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.v-card >>> table,
|
||||
.v-card >>> .v-data-table-header tr,
|
||||
.v-card >>> .v-data-footer {
|
||||
background-color: var(--v-primary-base);
|
||||
}
|
||||
.v-card >>> .v-data-table-header th span {
|
||||
color: var(--v-tertiary-base);
|
||||
}
|
||||
.v-card >>> .text-start,
|
||||
.v-card >>> .v-icon,
|
||||
.v-dialog__content >>> .v-subheader,
|
||||
.v-dialog__content >>> i {
|
||||
color: var(--v-txt-base);
|
||||
font-weight: bold;
|
||||
}
|
||||
.v-card >>> .v-subheader {
|
||||
padding: 0px !important;
|
||||
}
|
||||
.v-dialog__content >>> .v-dialog {
|
||||
border: 4px solid var(--v-secAccent-base);
|
||||
max-height: 68% !important;
|
||||
/* box-shadow: inset 0px 0px 2px 2px var(--v-secAccent-base),
|
||||
inset 6px 6px 14px -14px var(--v-secAccent-base) !important; */
|
||||
}
|
||||
.v-dialog .v-card {
|
||||
background: var(--v-secondary-base);
|
||||
}
|
||||
|
||||
.v-dialog__content >>> .v-input__slot {
|
||||
background: var(--v-primary-base);
|
||||
border: 1px solid var(--v-lines-base);
|
||||
}
|
||||
.v-menu__content >>> .v-date-picker-table {
|
||||
height: 285px !important;
|
||||
}
|
||||
table tr button.view {
|
||||
opacity: 0;
|
||||
}
|
||||
table tr:hover button.view {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
835
components/Members/BasicMembers.vue
Normal file
835
components/Members/BasicMembers.vue
Normal file
@@ -0,0 +1,835 @@
|
||||
<template>
|
||||
<accordion-card :title="$t('learning.product_overview.basic')">
|
||||
<v-row v-if="!isCreateMode">
|
||||
<v-col cols="12" sm="12" md="3">
|
||||
<v-subheader class="txt--text font-weight-black">Lid nummer</v-subheader>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-text-field :value="local.id" hide-details solo disabled flat />
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="3"></v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row v-if="false">
|
||||
<v-col cols="12" sm="12" md="3">
|
||||
<v-subheader class="txt--text font-weight-black">Gebruiker</v-subheader>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6" class="d-flex users">
|
||||
<v-select
|
||||
v-model="user_id"
|
||||
:items="users"
|
||||
color="blue-grey lighten-2"
|
||||
item-text="fullName"
|
||||
item-value="id"
|
||||
hide-selected
|
||||
:outlined="editMode"
|
||||
:solo="!editMode"
|
||||
:disabled="!editMode"
|
||||
:flat="!editMode"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" sm="12" md="3"></v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="3">
|
||||
<v-subheader class="txt--text font-weight-black">{{ $t('members.fields.type') }}</v-subheader>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-select
|
||||
v-model="type"
|
||||
:items="validTypes"
|
||||
:outlined="editMode"
|
||||
:solo="!editMode"
|
||||
:disabled="!editMode"
|
||||
:flat="!editMode"
|
||||
item-text="title"
|
||||
item-value="id"
|
||||
:append-icon="$store.getters.isMember ? '' : 'mdi-menu-down'"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="3">
|
||||
<v-subheader class="justify-center d-flex flex-column align-start">
|
||||
<field-has-changes
|
||||
v-if="
|
||||
$store.getters['members/revision'] &&
|
||||
!areEqualInputs(type, $store.getters['members/revision'].type)
|
||||
"
|
||||
/>
|
||||
</v-subheader>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="3">
|
||||
<v-subheader class="txt--text font-weight-black" append-icon>Hoofdbranche</v-subheader>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-select
|
||||
v-model="branch_id"
|
||||
:items="branches"
|
||||
:outlined="editMode"
|
||||
:solo="!editMode"
|
||||
:disabled="!editMode"
|
||||
:flat="!editMode"
|
||||
item-text="title"
|
||||
item-value="id"
|
||||
:append-icon="$store.getters.isMember ? '' : 'mdi-menu-down'"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="3">
|
||||
<v-subheader v-if="editMode">
|
||||
<field-has-changes
|
||||
v-if="
|
||||
$store.getters['members/revision'] &&
|
||||
!areEqualInputs(
|
||||
branch_id,
|
||||
$store.getters['members/revision'].branch_id
|
||||
)
|
||||
"
|
||||
/>
|
||||
</v-subheader>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="3">
|
||||
<v-subheader class="txt--text font-weight-black">Subbranche</v-subheader>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-select
|
||||
:items="branches"
|
||||
v-model="sub_branches"
|
||||
attach
|
||||
chips
|
||||
multiple
|
||||
item-text="title"
|
||||
item-value="id"
|
||||
:outlined="editMode"
|
||||
:solo="!editMode"
|
||||
:disabled="!editMode"
|
||||
:flat="!editMode"
|
||||
:append-icon="$store.getters.isMember ? '' : 'icon-dropdown'"
|
||||
>
|
||||
<template v-slot:selection="{ attrs, item, select, selected }">
|
||||
<v-chip v-bind="attrs" :input-value="selected" @click="select">
|
||||
<v-icon class="mx-2">mdi-source-branch</v-icon>
|
||||
|
||||
<strong>{{ item.title }}</strong>
|
||||
</v-chip>
|
||||
</template>
|
||||
</v-select>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="3">
|
||||
<v-subheader class="d-flex flex-column justify-space-between align-start">
|
||||
<span>
|
||||
<field-has-changes
|
||||
v-if="
|
||||
$store.getters['members/revision'] &&
|
||||
!areEqualInputs(
|
||||
sub_branches,
|
||||
$store.getters['members/revision'].sub_branches
|
||||
)
|
||||
"
|
||||
/>
|
||||
</span>
|
||||
<span>Meerdere keuzes mogelijk</span>
|
||||
</v-subheader>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- {{ sub_branches }}
|
||||
{{ $store.getters['members/revision'].sub_branches }}-->
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="3">
|
||||
<v-subheader class="txt--text font-weight-black">Naam</v-subheader>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-text-field
|
||||
v-model="informal_name"
|
||||
:rules="rules.informal_name"
|
||||
:hide-details="!editMode"
|
||||
:outlined="editMode"
|
||||
:solo="!editMode"
|
||||
:disabled="!editMode"
|
||||
:flat="!editMode"
|
||||
>
|
||||
<template
|
||||
slot="append"
|
||||
v-if="
|
||||
$store.getters['members/revision'] &&
|
||||
!areEqualInputs(
|
||||
informal_name,
|
||||
$store.getters['members/revision'].informal_name
|
||||
)
|
||||
"
|
||||
>
|
||||
<span
|
||||
class="caption accent--text"
|
||||
>{{ $store.getters['members/revision'].informal_name }}</span>
|
||||
</template>
|
||||
</v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="3">
|
||||
<v-subheader>
|
||||
<field-has-changes
|
||||
v-if="
|
||||
$store.getters['members/revision'] &&
|
||||
!areEqualInputs(
|
||||
informal_name,
|
||||
$store.getters['members/revision'].informal_name
|
||||
)
|
||||
"
|
||||
/>
|
||||
</v-subheader>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="3">
|
||||
<v-subheader class="txt--text font-weight-black">Juridische tenaamstelling</v-subheader>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-text-field
|
||||
v-model="formal_name"
|
||||
:rules="rules.formal_name"
|
||||
:hide-details="!editMode"
|
||||
:outlined="editMode"
|
||||
:solo="!editMode"
|
||||
:disabled="!editMode"
|
||||
:flat="!editMode"
|
||||
>
|
||||
<template
|
||||
slot="append"
|
||||
v-if="
|
||||
$store.getters['members/revision'] &&
|
||||
!areEqualInputs(
|
||||
formal_name,
|
||||
$store.getters['members/revision'].formal_name
|
||||
)
|
||||
"
|
||||
>
|
||||
<span class="caption accent--text">{{ $store.getters['members/revision'].formal_name }}</span>
|
||||
</template>
|
||||
</v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="3">
|
||||
<v-subheader v-if="editMode">
|
||||
<field-has-changes
|
||||
v-if="
|
||||
$store.getters['members/revision'] &&
|
||||
!areEqualInputs(
|
||||
formal_name,
|
||||
$store.getters['members/revision'].formal_name
|
||||
)
|
||||
"
|
||||
/>
|
||||
</v-subheader>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="3">
|
||||
<v-subheader class="txt--text font-weight-black">Aanvang lidmaatschap</v-subheader>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-menu
|
||||
ref="menuStart"
|
||||
v-model="menuStart"
|
||||
:close-on-content-click="false"
|
||||
transition="scale-transition"
|
||||
offset-y
|
||||
margin-top="20px"
|
||||
min-width="290px"
|
||||
>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-text-field
|
||||
:name="`accreditation-start-date-${Math.random()}`"
|
||||
v-model="computedDateFormattedStart"
|
||||
append-icon="icon-events"
|
||||
max-height="100px"
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
:outlined="editMode"
|
||||
:solo="!editMode"
|
||||
:disabled="!editMode"
|
||||
:flat="!editMode"
|
||||
readonly
|
||||
>
|
||||
<template v-slot:append>
|
||||
<v-icon v-on="on">icon-events</v-icon>
|
||||
</template>
|
||||
</v-text-field>
|
||||
</template>
|
||||
<v-date-picker
|
||||
v-model="start_membership"
|
||||
no-title
|
||||
scrollable
|
||||
:disabled="!editMode"
|
||||
:flat="!editMode"
|
||||
locale="nl-NL"
|
||||
/>
|
||||
</v-menu>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="3">
|
||||
<v-subheader>
|
||||
<field-has-changes
|
||||
v-if="
|
||||
$store.getters['members/revision'] &&
|
||||
!areEqualInputs(
|
||||
start_membership,
|
||||
$store.getters['members/revision'].start_membership
|
||||
)
|
||||
"
|
||||
/>
|
||||
</v-subheader>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="3">
|
||||
<v-subheader class="txt--text font-weight-black">Einde lidmaatschap</v-subheader>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-menu
|
||||
ref="menuStart"
|
||||
v-model="menuEnd"
|
||||
:close-on-content-click="false"
|
||||
transition="scale-transition"
|
||||
offset-y
|
||||
margin-top="20px"
|
||||
min-width="290px"
|
||||
>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-text-field
|
||||
:name="`accreditation-end-date-${Math.random()}`"
|
||||
v-model="computedDateFormattedEnd"
|
||||
append-icon="icon-events"
|
||||
max-height="100px"
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
:outlined="editMode"
|
||||
:solo="!editMode"
|
||||
:disabled="!editMode"
|
||||
:flat="!editMode"
|
||||
readonly
|
||||
clearable
|
||||
>
|
||||
<template v-slot:append>
|
||||
<v-icon v-on="on">icon-events</v-icon>
|
||||
</template>
|
||||
</v-text-field>
|
||||
</template>
|
||||
<v-date-picker
|
||||
v-model="end_membership"
|
||||
no-title
|
||||
scrollable
|
||||
:disabled="!editMode"
|
||||
:flat="!editMode"
|
||||
locale="nl-NL"
|
||||
/>
|
||||
</v-menu>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="3">
|
||||
<v-subheader>
|
||||
<field-has-changes
|
||||
v-if="
|
||||
$store.getters['members/revision'] &&
|
||||
!areEqualInputs(
|
||||
end_membership,
|
||||
$store.getters['members/revision'].end_membership
|
||||
)
|
||||
"
|
||||
/>
|
||||
</v-subheader>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- <v-row>
|
||||
<v-col cols="12" sm="12" md="3">
|
||||
<v-subheader class="txt--text font-weight-black"
|
||||
>Contributie</v-subheader
|
||||
>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-text-field
|
||||
v-model="contribution"
|
||||
:hide-details="!editMode"
|
||||
:outlined="editMode"
|
||||
:solo="!editMode"
|
||||
:disabled="!editMode"
|
||||
:flat="!editMode"
|
||||
>
|
||||
<template
|
||||
slot="append"
|
||||
v-if="
|
||||
$store.getters['members/revision'] &&
|
||||
!areEqualInputs(
|
||||
contribution,
|
||||
$store.getters['members/revision'].contribution
|
||||
)
|
||||
"
|
||||
>
|
||||
<span class="caption accent--text">
|
||||
{{ $store.getters['members/revision'].contribution }}
|
||||
</span>
|
||||
</template>
|
||||
</v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="3">
|
||||
<v-subheader>
|
||||
<field-has-changes
|
||||
v-if="
|
||||
$store.getters['members/revision'] &&
|
||||
!areEqualInputs(
|
||||
contribution,
|
||||
$store.getters['members/revision'].contribution
|
||||
)
|
||||
"
|
||||
/>
|
||||
</v-subheader>
|
||||
</v-col>
|
||||
</v-row>-->
|
||||
|
||||
<!-- <v-row>
|
||||
<v-col cols="12" sm="12" md="3">
|
||||
<v-subheader class="txt--text font-weight-black"
|
||||
>Factuurnummer</v-subheader
|
||||
>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-text-field
|
||||
v-model="invoice_number"
|
||||
:hide-details="!editMode"
|
||||
:outlined="editMode"
|
||||
:solo="!editMode"
|
||||
:disabled="!editMode"
|
||||
:flat="!editMode"
|
||||
>
|
||||
<template
|
||||
slot="append"
|
||||
v-if="
|
||||
$store.getters['members/revision'] &&
|
||||
!areEqualInputs(
|
||||
invoice_number,
|
||||
$store.getters['members/revision'].invoice_number
|
||||
)
|
||||
"
|
||||
>
|
||||
<span class="caption accent--text">
|
||||
{{ $store.getters['members/revision'].invoice_number }}
|
||||
</span>
|
||||
</template>
|
||||
</v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="3">
|
||||
<v-subheader>
|
||||
<field-has-changes
|
||||
v-if="
|
||||
$store.getters['members/revision'] &&
|
||||
!areEqualInputs(
|
||||
invoice_number,
|
||||
$store.getters['members/revision'].invoice_number
|
||||
)
|
||||
"
|
||||
/>
|
||||
</v-subheader>
|
||||
</v-col>
|
||||
</v-row>-->
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="3">
|
||||
<v-subheader class="txt--text font-weight-black">KVK-nummer</v-subheader>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-text-field
|
||||
v-model="kvk_number"
|
||||
:rules="rules.kvk_number"
|
||||
:hide-details="!editMode"
|
||||
:outlined="editMode"
|
||||
:solo="!editMode"
|
||||
:disabled="!editMode"
|
||||
:flat="!editMode"
|
||||
type="number"
|
||||
>
|
||||
<template
|
||||
slot="append"
|
||||
v-if="
|
||||
$store.getters['members/revision'] &&
|
||||
!areEqualInputs(
|
||||
kvk_number,
|
||||
$store.getters['members/revision'].kvk_number
|
||||
)
|
||||
"
|
||||
>
|
||||
<span class="caption accent--text">{{ $store.getters['members/revision'].kvk_number }}</span>
|
||||
</template>
|
||||
</v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="3">
|
||||
<v-subheader>
|
||||
<field-has-changes
|
||||
v-if="
|
||||
$store.getters['members/revision'] &&
|
||||
!areEqualInputs(
|
||||
kvk_number,
|
||||
$store.getters['members/revision'].kvk_number
|
||||
)
|
||||
"
|
||||
/>
|
||||
</v-subheader>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- <v-row>
|
||||
<v-col cols="12" sm="12" md="3">
|
||||
<v-subheader class="txt--text font-weight-black">Website</v-subheader>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-text-field
|
||||
:rules="rules.website"
|
||||
v-model="website"
|
||||
:hide-details="!editMode"
|
||||
:outlined="editMode"
|
||||
:solo="!editMode"
|
||||
:disabled="!editMode"
|
||||
:flat="!editMode"
|
||||
>
|
||||
<template
|
||||
slot="append"
|
||||
v-if="
|
||||
$store.getters['members/revision'] &&
|
||||
!areEqualInputs(
|
||||
website,
|
||||
$store.getters['members/revision'].website
|
||||
)
|
||||
"
|
||||
>
|
||||
<span class="caption accent--text">
|
||||
{{ $store.getters['members/revision'].website }}
|
||||
</span>
|
||||
</template>
|
||||
</v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="3">
|
||||
<v-subheader>
|
||||
<field-has-changes
|
||||
v-if="
|
||||
$store.getters['members/revision'] &&
|
||||
!areEqualInputs(
|
||||
website,
|
||||
$store.getters['members/revision'].website
|
||||
)
|
||||
"
|
||||
/>
|
||||
</v-subheader>
|
||||
</v-col>
|
||||
</v-row>-->
|
||||
|
||||
<v-row class="mb-14" v-if="$store.getters.isAdmin || $store.getters.isOperator">
|
||||
<v-col cols="12" sm="12" md="3">
|
||||
<v-subheader class="txt--text font-weight-black">Logo</v-subheader>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<vue-dropzone
|
||||
ref="imgDropZoneLogo"
|
||||
class="my-4 cta-secondary"
|
||||
id="customdropzone"
|
||||
:options="dropzoneOptions"
|
||||
@vdropzone-complete="afterCompleteLogo"
|
||||
v-if="editMode"
|
||||
/>
|
||||
|
||||
<v-img :src="logoComputed || noImage" :lazy-src="noImage" contain v-cloak />
|
||||
<!-- <button @click="removeLogo()">
|
||||
<h1>Delete logo</h1>
|
||||
</button> -->
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="3">
|
||||
<v-subheader>
|
||||
Het logo mag maximaal 160x90px zijn. Zorg dat er minimaal 10px
|
||||
witruimte om het logo zit. Upload in svg, png of jpg.
|
||||
</v-subheader>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</accordion-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import accordionCard from '@/components/UI/AccordionCard/AccordionCard'
|
||||
import fieldHasChanges from '@/components/Members/FieldHasChanges'
|
||||
import vueDropzone from 'vue2-dropzone'
|
||||
import 'vue2-dropzone/dist/vue2Dropzone.min.css'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
accordionCard,
|
||||
vueDropzone,
|
||||
fieldHasChanges,
|
||||
},
|
||||
props: {
|
||||
editMode: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isCreateMode: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
users: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
rules: {
|
||||
informal_name: [(v) => !!v || 'informal name is required'],
|
||||
formal_name: [(v) => !!v || 'formal name is required'],
|
||||
kvk_number: [(v) => !!v || 'kvk number is required'],
|
||||
// website: [(v) => !!v || 'website is required'],
|
||||
},
|
||||
loading: false,
|
||||
showDropzone: false,
|
||||
dropzoneOptions: {
|
||||
url: 'https://httpbin.org/post',
|
||||
maxFilesize: 1.2, // MB
|
||||
maxFiles: 1,
|
||||
thumbnailWidth: 320,
|
||||
thumbnailHeight: 180,
|
||||
addRemoveLinks: true,
|
||||
|
||||
acceptedFiles: '.jpg, .jpeg, .png',
|
||||
dictDefaultMessage: `<p><i class='mr-2 icon icon-image'></i> Upload afbeelding</p>`,
|
||||
},
|
||||
images: [],
|
||||
img: {
|
||||
name: '',
|
||||
url: '',
|
||||
file: null,
|
||||
},
|
||||
menuStart: false,
|
||||
menuEnd: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
local() {
|
||||
return this.$store.state.members.local
|
||||
},
|
||||
branches() {
|
||||
return this.$store.state.members.branches
|
||||
},
|
||||
logo() {
|
||||
return this.local.logo
|
||||
},
|
||||
curLogo() {
|
||||
return this.$store.state.members.logo
|
||||
},
|
||||
logoComputed() {
|
||||
if (this.$store.state.members.logo.url)
|
||||
return this.$store.state.members.logo.url
|
||||
if (this.local.logo) return this.local.logo.full
|
||||
return null
|
||||
},
|
||||
noImage() {
|
||||
return require(`@/assets/img/no_image.png`)
|
||||
},
|
||||
branch_id: {
|
||||
get() {
|
||||
return this.local.branch_id
|
||||
},
|
||||
set(value) {
|
||||
this.$store.commit('members/UPDATE_FIELD', {
|
||||
field: 'branch_id',
|
||||
value,
|
||||
})
|
||||
},
|
||||
},
|
||||
user_id: {
|
||||
get() {
|
||||
return this.local.user_id
|
||||
},
|
||||
set(value) {
|
||||
this.$store.commit('members/UPDATE_FIELD', {
|
||||
field: 'user_id',
|
||||
value,
|
||||
})
|
||||
},
|
||||
},
|
||||
sub_branches: {
|
||||
get() {
|
||||
return this.local.sub_branches
|
||||
},
|
||||
set(value) {
|
||||
this.$store.commit('members/UPDATE_FIELD', {
|
||||
field: 'sub_branches',
|
||||
value,
|
||||
})
|
||||
},
|
||||
},
|
||||
type: {
|
||||
get() {
|
||||
return this.local.type
|
||||
},
|
||||
set(value) {
|
||||
this.$store.commit('members/UPDATE_FIELD', {
|
||||
field: 'type',
|
||||
value,
|
||||
})
|
||||
},
|
||||
},
|
||||
informal_name: {
|
||||
get() {
|
||||
return this.local.informal_name
|
||||
},
|
||||
set(value) {
|
||||
this.$store.commit('members/UPDATE_FIELD', {
|
||||
field: 'informal_name',
|
||||
value,
|
||||
})
|
||||
},
|
||||
},
|
||||
formal_name: {
|
||||
get() {
|
||||
return this.local.formal_name
|
||||
},
|
||||
set(value) {
|
||||
this.$store.commit('members/UPDATE_FIELD', {
|
||||
field: 'formal_name',
|
||||
value,
|
||||
})
|
||||
},
|
||||
},
|
||||
|
||||
kvk_number: {
|
||||
get() {
|
||||
return this.local.kvk_number
|
||||
},
|
||||
set(value) {
|
||||
this.$store.commit('members/UPDATE_FIELD', {
|
||||
field: 'kvk_number',
|
||||
value,
|
||||
})
|
||||
},
|
||||
},
|
||||
|
||||
// website: {
|
||||
// get() {
|
||||
// return this.local.website
|
||||
// },
|
||||
// set(value) {
|
||||
// this.$store.commit('members/UPDATE_FIELD', {
|
||||
// field: 'website',
|
||||
// value,
|
||||
// })
|
||||
// },
|
||||
// },
|
||||
|
||||
start_membership: {
|
||||
get() {
|
||||
return this.local.start_membership
|
||||
},
|
||||
set(value) {
|
||||
this.$store.commit('members/UPDATE_FIELD', {
|
||||
field: 'start_membership',
|
||||
value,
|
||||
})
|
||||
},
|
||||
},
|
||||
|
||||
end_membership: {
|
||||
get() {
|
||||
return this.local.end_membership
|
||||
},
|
||||
set(value) {
|
||||
this.$store.commit('members/UPDATE_FIELD', {
|
||||
field: 'end_membership',
|
||||
value,
|
||||
})
|
||||
},
|
||||
},
|
||||
|
||||
validTypes() {
|
||||
return this.$store.state.members.types;
|
||||
},
|
||||
|
||||
computedDateFormattedStart() {
|
||||
return this.formatDate(this.start_membership)
|
||||
},
|
||||
computedDateFormattedEnd: {
|
||||
get() {
|
||||
return this.formatDate(this.end_membership);
|
||||
},
|
||||
|
||||
set(value) {
|
||||
this.end_membership = value;
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
areEqualInputs(input1, input2) {
|
||||
return this.$store.getters['utils/areEquals'](input1, input2)
|
||||
},
|
||||
|
||||
// async removeLogo(){
|
||||
// // this.$store.commit('members/RESET_LOGO')
|
||||
// this.$store.commit('members/UPDATE_LOGO', {
|
||||
// name: '',
|
||||
// url: '',
|
||||
// file: null,
|
||||
// })
|
||||
|
||||
// console.log("file deleted");
|
||||
// },
|
||||
|
||||
formatDate(date) {
|
||||
if (!date) return null
|
||||
|
||||
const [year, month, day, time] = date.replace(' ', '-').split('-')
|
||||
return `${day}/${month}/${year}`
|
||||
},
|
||||
|
||||
async afterCompleteLogo(file) {
|
||||
if (file === undefined) return
|
||||
if (file.name.lastIndexOf('.') <= 0) return
|
||||
|
||||
if (file.size > 2000000) {
|
||||
this.$notifier.showMessage({
|
||||
content: `Exceeded Max filesize`,
|
||||
color: 'error',
|
||||
icon: 'mdi-alert-circle',
|
||||
})
|
||||
this.$store.commit('members/RESET_LOGO')
|
||||
return
|
||||
}
|
||||
|
||||
this.isLoading = true
|
||||
|
||||
try {
|
||||
const fr = new FileReader()
|
||||
fr.readAsDataURL(file)
|
||||
fr.addEventListener('load', () => {
|
||||
this.$store.commit('members/UPDATE_LOGO', {
|
||||
name: file.name,
|
||||
url: fr.result,
|
||||
file: file,
|
||||
})
|
||||
})
|
||||
this.isLoading = false
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
this.$refs.imgDropZoneLogo.removeFile(file)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.v-card >>> .v-subheader {
|
||||
padding: 0px !important;
|
||||
}
|
||||
</style>
|
||||
685
components/Members/ContactsMembers.vue
Normal file
685
components/Members/ContactsMembers.vue
Normal file
@@ -0,0 +1,685 @@
|
||||
<template>
|
||||
<accordion-card title="Contactpersonen">
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="contacts"
|
||||
:options="options"
|
||||
hide-default-footer
|
||||
item-key="contact"
|
||||
flat
|
||||
v-if="hasContacts"
|
||||
>
|
||||
<template v-slot:item.contact_person="{ item }">
|
||||
{{ determineNameFullByContactPersonItem(item) }}
|
||||
</template>
|
||||
|
||||
<template v-slot:item.ledencontrole="{ item }">
|
||||
<v-icon
|
||||
:color="!item.approved_at ? 'accent' : 'success'"
|
||||
>
|
||||
{{
|
||||
!item.approved_at
|
||||
? 'mdi-alert-circle-outline'
|
||||
: 'icon-checkmark'
|
||||
}}
|
||||
</v-icon>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.actions="{ item }">
|
||||
<v-btn
|
||||
class="mx-4 white--text view"
|
||||
style="height: 100%"
|
||||
:color="$vuetify.theme.dark ? 'info' : 'txt'"
|
||||
rounded
|
||||
depressed
|
||||
small
|
||||
@click="viewItem(item)"
|
||||
v-if="$store.getters.hasCharges"
|
||||
>{{ $t('general.view') }}</v-btn
|
||||
>
|
||||
|
||||
<v-menu
|
||||
offset-y
|
||||
v-if="
|
||||
editMode && $store.getters['members/isSuperAdminAdminOrDelegated']
|
||||
"
|
||||
>
|
||||
<template v-slot:activator="{ on }">
|
||||
<v-hover v-slot:default="{ hover }">
|
||||
<v-btn
|
||||
:color="hover ? 'info' : ''"
|
||||
:outlined="hover"
|
||||
depressed
|
||||
fab
|
||||
small
|
||||
v-on="on"
|
||||
>
|
||||
<v-icon>icon-options</v-icon>
|
||||
</v-btn>
|
||||
</v-hover>
|
||||
</template>
|
||||
<v-list width="200">
|
||||
<v-list-item @click="editItem(item)">
|
||||
<v-list-item-icon class="mr-1">
|
||||
<v-icon small>icon-edit</v-icon>
|
||||
</v-list-item-icon>
|
||||
|
||||
<v-list-item-content>
|
||||
<v-list-item-subtitle>
|
||||
{{ $t('general.edit') | capitalize }}
|
||||
</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
|
||||
<v-dialog max-width="740" persistent v-model="dialogDelete">
|
||||
<template v-slot:activator="{ on }">
|
||||
<v-list-item v-on="on">
|
||||
<v-list-item-icon class="mr-1">
|
||||
<v-icon small>icon-remove</v-icon>
|
||||
</v-list-item-icon>
|
||||
|
||||
<v-list-item-content>
|
||||
<v-list-item-subtitle>
|
||||
{{ $t('general.delete') | capitalize }}
|
||||
</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</template>
|
||||
<v-card class="primary pa-10" flat>
|
||||
<v-card-title class="headline">{{
|
||||
$t('learning.delete_contactsmembers_confirmation')
|
||||
}}</v-card-title>
|
||||
<v-card-actions>
|
||||
<div class="ma-4">
|
||||
<v-btn
|
||||
@click="deleteItem(item)"
|
||||
class="mx-2"
|
||||
color="accent"
|
||||
depressed
|
||||
rounded
|
||||
>{{ $t('general.delete') }}</v-btn
|
||||
>
|
||||
<v-btn
|
||||
@click="dialogDelete = false"
|
||||
class="mx-2"
|
||||
color="info"
|
||||
depressed
|
||||
rounded
|
||||
>{{ $t('general.cancel') }}</v-btn
|
||||
>
|
||||
</div>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</template>
|
||||
</v-data-table>
|
||||
|
||||
<v-dialog
|
||||
v-model="dialogContacts"
|
||||
:persistent="editModeComputed"
|
||||
max-width="75%"
|
||||
v-if="$store.getters['members/isSuperAdminAdminOrDelegated']"
|
||||
>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-btn
|
||||
v-if="editMode"
|
||||
class="my-10 cta-secondary"
|
||||
block
|
||||
depressed
|
||||
min-height="60px"
|
||||
:disabled="isCreateMode"
|
||||
v-on="on"
|
||||
@click="contactEditMode = true"
|
||||
>
|
||||
<v-icon x-small class="mx-4">icon-add</v-icon>Nieuw contactperson
|
||||
toevoegen
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-card ref="card">
|
||||
<v-card-title>
|
||||
<span class="headline">{{ formTitle }}</span>
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text>
|
||||
<v-container>
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-subheader class="txt--text font-weight-black"
|
||||
>Rol</v-subheader
|
||||
>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-select
|
||||
:items="roles"
|
||||
v-model="editedItem.function"
|
||||
:outlined="editModeComputed"
|
||||
:solo="!editModeComputed"
|
||||
:disabled="!editModeComputed"
|
||||
:flat="!editModeComputed"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-subheader class="txt--text font-weight-black"
|
||||
>Locatie</v-subheader
|
||||
>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<!-- :items="formatAddresses(addresses)" -->
|
||||
<v-select
|
||||
:items="addresses"
|
||||
item-text="indicating"
|
||||
item-value="id"
|
||||
v-model="editedItem.address_id"
|
||||
:outlined="editModeComputed"
|
||||
:solo="!editModeComputed"
|
||||
:disabled="!editModeComputed"
|
||||
:flat="!editModeComputed"
|
||||
>
|
||||
<template v-slot:item="{ item, attrs, on }">
|
||||
{{
|
||||
`
|
||||
${item.indicating || ''}
|
||||
${item.house_number + ',' || ''}
|
||||
${item.postal + ',' || ''}
|
||||
${item.city + ',' || ''}
|
||||
${item.country || ''}
|
||||
`
|
||||
}}
|
||||
</template>
|
||||
</v-select>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-subheader class="txt--text font-weight-black"
|
||||
>Aanhef</v-subheader
|
||||
>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-select
|
||||
:items="salutations"
|
||||
v-model="editedItem.salutation"
|
||||
:outlined="editModeComputed"
|
||||
:solo="!editModeComputed"
|
||||
:disabled="!editModeComputed"
|
||||
:flat="!editModeComputed"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-subheader class="txt--text font-weight-black"
|
||||
>Voorletters</v-subheader
|
||||
>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-text-field
|
||||
:outlined="editModeComputed"
|
||||
:solo="!editModeComputed"
|
||||
:disabled="!editModeComputed"
|
||||
:flat="!editModeComputed"
|
||||
v-model="editedItem.initials"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-subheader class="txt--text font-weight-black"
|
||||
>Voornaam</v-subheader
|
||||
>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-text-field
|
||||
:outlined="editModeComputed"
|
||||
:solo="!editModeComputed"
|
||||
:disabled="!editModeComputed"
|
||||
:flat="!editModeComputed"
|
||||
v-model="editedItem.firstname"
|
||||
:rules="rules.firstname"
|
||||
required
|
||||
error
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-subheader class="txt--text font-weight-black"
|
||||
>Tussenvoegsel</v-subheader
|
||||
>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-text-field
|
||||
:outlined="editModeComputed"
|
||||
:solo="!editModeComputed"
|
||||
:disabled="!editModeComputed"
|
||||
:flat="!editModeComputed"
|
||||
v-model="editedItem.middlename"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-subheader class="txt--text font-weight-black"
|
||||
>Achternaam</v-subheader
|
||||
>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-text-field
|
||||
:outlined="editModeComputed"
|
||||
:solo="!editModeComputed"
|
||||
:disabled="!editModeComputed"
|
||||
:flat="!editModeComputed"
|
||||
v-model="editedItem.lastname"
|
||||
:rules="rules.lastname"
|
||||
required
|
||||
error
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-subheader class="txt--text font-weight-black"
|
||||
>Functie</v-subheader
|
||||
>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-text-field
|
||||
:outlined="editModeComputed"
|
||||
:solo="!editModeComputed"
|
||||
:disabled="!editModeComputed"
|
||||
:flat="!editModeComputed"
|
||||
v-model="editedItem.job_title"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-subheader class="txt--text font-weight-black"
|
||||
>Mailadres</v-subheader
|
||||
>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-text-field
|
||||
:outlined="editModeComputed"
|
||||
:solo="!editModeComputed"
|
||||
:disabled="!editModeComputed"
|
||||
:flat="!editModeComputed"
|
||||
v-model="editedItem.email"
|
||||
type="email"
|
||||
required
|
||||
error
|
||||
:rules="[rules.email.required]"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-subheader class="txt--text font-weight-black"
|
||||
>Mailadres 2</v-subheader
|
||||
>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-text-field
|
||||
:outlined="editModeComputed"
|
||||
:solo="!editModeComputed"
|
||||
:disabled="!editModeComputed"
|
||||
:flat="!editModeComputed"
|
||||
v-model="editedItem.email2"
|
||||
type="email"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-subheader class="txt--text font-weight-black"
|
||||
>Mailadres 3</v-subheader
|
||||
>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-text-field
|
||||
:outlined="editModeComputed"
|
||||
:solo="!editModeComputed"
|
||||
:disabled="!editModeComputed"
|
||||
:flat="!editModeComputed"
|
||||
v-model="editedItem.email3"
|
||||
type="email"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-subheader class="txt--text font-weight-black"
|
||||
>Telefoonnummer</v-subheader
|
||||
>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-text-field
|
||||
:outlined="editModeComputed"
|
||||
:solo="!editModeComputed"
|
||||
:disabled="!editModeComputed"
|
||||
:flat="!editModeComputed"
|
||||
v-model="editedItem.phone"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-subheader class="txt--text font-weight-black"
|
||||
>Mobiel</v-subheader
|
||||
>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-text-field
|
||||
:outlined="editModeComputed"
|
||||
:solo="!editModeComputed"
|
||||
:disabled="!editModeComputed"
|
||||
:flat="!editModeComputed"
|
||||
v-model="editedItem.mobile"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-card-text>
|
||||
|
||||
<v-divider />
|
||||
<v-card-actions v-if="editModeComputed">
|
||||
<v-btn
|
||||
class="ma-2 white--text"
|
||||
color="info"
|
||||
depressed
|
||||
rounded
|
||||
:disabled="loading"
|
||||
@click="save"
|
||||
v-if="
|
||||
$store.getters.isAdmin ||
|
||||
$store.getters.isOperator ||
|
||||
isUserDelegated
|
||||
"
|
||||
>{{ $t('general.save') }}</v-btn
|
||||
>
|
||||
<v-spacer />
|
||||
<v-btn
|
||||
class="ma-2 white--text"
|
||||
color="txt"
|
||||
depressed
|
||||
text
|
||||
:disabled="loading"
|
||||
@click="close"
|
||||
>{{ $t('general.cancel') }}</v-btn
|
||||
>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<p v-if="isCreateMode" class="text-center">
|
||||
Bij het aanmaken van een nieuw lid kiest u eerst voor 'Tussentijds
|
||||
Opslaan' om deze functie te activeren.
|
||||
</p>
|
||||
</accordion-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import accordionCard from '@/components/UI/AccordionCard/AccordionCard'
|
||||
import Name from '@/util/Name'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
accordionCard,
|
||||
},
|
||||
props: {
|
||||
editMode: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isCreateMode: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
options: {
|
||||
itemsPerPage: -1,
|
||||
},
|
||||
headers: [
|
||||
{ text: 'rol', value: 'function' },
|
||||
{ text: 'contactpersoon', value: 'contact_person' },
|
||||
{ text: 'ledencontrole', value: 'ledencontrole', sortable: false },
|
||||
{ text: '', value: 'actions' },
|
||||
],
|
||||
roles: [
|
||||
'Bestuurder',
|
||||
'Klankbordgroeplid cc',
|
||||
'Klankbordgroeplid cp',
|
||||
'Algemene vergadering cp',
|
||||
'Algemene vergadering cc',
|
||||
'Vertegenwoordiger',
|
||||
],
|
||||
salutations: ['Mevrouw', 'De heer'],
|
||||
contactEditMode: false,
|
||||
dialogContacts: false,
|
||||
dialogDelete: false,
|
||||
editedIndex: -1,
|
||||
editedItem: {},
|
||||
defaultItem: {},
|
||||
loading: false,
|
||||
rules: {
|
||||
firstname: [(v) => !!v || 'De voornaam is verplicht.'],
|
||||
lastname: [(v) => !!v || 'De achternaam is verplicht.'],
|
||||
email: {
|
||||
required: (value) => !!value || 'Het mailadres is verplicht.',
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
local() {
|
||||
return this.$store.state.members.local
|
||||
},
|
||||
addresses() {
|
||||
if (!this.local || !Array.isArray(this.local.addresses)) return []
|
||||
return this.local.addresses
|
||||
},
|
||||
hasAddresses() {
|
||||
if (!this.addresses) return false
|
||||
return this.addresses.length > 0
|
||||
},
|
||||
contacts() {
|
||||
if (!this.local || !Array.isArray(this.local.contacts)) return []
|
||||
return this.local.contacts
|
||||
},
|
||||
hasContacts() {
|
||||
if (!this.contacts) return false
|
||||
return this.contacts.length > 0
|
||||
},
|
||||
formTitle() {
|
||||
return this.editedIndex === -1 ? 'new' : 'edit'
|
||||
},
|
||||
isCreatedModeContact() {
|
||||
return this.editedIndex === -1
|
||||
},
|
||||
editModeComputed() {
|
||||
return this.contactEditMode && this.editMode
|
||||
},
|
||||
isUserDelegated() {
|
||||
return this.local.user_id === this.$store.getters.loggedInUser.id
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
dialogContacts(val) {
|
||||
val || this.close()
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
close() {
|
||||
this.dialogContacts = false
|
||||
this.$nextTick(() => {
|
||||
this.editedItem = Object.assign({}, this.defaultItem)
|
||||
this.editedIndex = -1
|
||||
this.$refs.card.$el.scrollIntoView(true)
|
||||
})
|
||||
},
|
||||
|
||||
viewItem(item) {
|
||||
this.contactEditMode = false
|
||||
this.editedIndex = this.contacts.indexOf(item)
|
||||
this.editedItem = Object.assign({}, item)
|
||||
this.$forceUpdate()
|
||||
this.dialogContacts = true
|
||||
},
|
||||
|
||||
editItem(item) {
|
||||
if (!this.editMode) return
|
||||
this.setItemToEdit(item)
|
||||
this.dialogContacts = true
|
||||
},
|
||||
|
||||
setItemToEdit(item) {
|
||||
this.contactEditMode = true
|
||||
this.editedIndex = this.contacts.indexOf(item)
|
||||
this.editedItem = Object.assign({}, item)
|
||||
this.$forceUpdate()
|
||||
},
|
||||
|
||||
async save() {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.card.$el.scrollIntoView(true)
|
||||
})
|
||||
this.loading = true
|
||||
this.$nextTick(() => this.$nuxt.$loading.start())
|
||||
this.dialogContacts = false
|
||||
if (this.isCreatedModeContact) {
|
||||
try {
|
||||
await this.$store.dispatch('members/storeContact', this.editedItem)
|
||||
this.loading = false
|
||||
} catch (error) {
|
||||
console.log('save -> error', error)
|
||||
this.loading = false
|
||||
}
|
||||
} else {
|
||||
// Edit mode
|
||||
try {
|
||||
await this.$store.dispatch('members/storeContact', this.editedItem)
|
||||
this.loading = false
|
||||
this.dialogContacts = false
|
||||
} catch (error) {
|
||||
console.log('save -> error', error)
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
|
||||
this.close()
|
||||
this.$nuxt.$loading.finish()
|
||||
},
|
||||
|
||||
async deleteItem(item) {
|
||||
if (!item.id) {
|
||||
this.$notifier.showMessage({
|
||||
content: `No contact to delete selected`,
|
||||
color: 'error',
|
||||
icon: 'icon-message',
|
||||
})
|
||||
}
|
||||
|
||||
this.$nextTick(() => this.$nuxt.$loading.start())
|
||||
|
||||
try {
|
||||
await this.$store.dispatch('members/deleteContact', item)
|
||||
|
||||
this.dialogDelete = false
|
||||
this.dialogContacts = false
|
||||
this.$nuxt.$loading.finish()
|
||||
} catch (error) {
|
||||
console.log('deleteItem -> error', error)
|
||||
this.$nuxt.$loading.finish()
|
||||
}
|
||||
},
|
||||
|
||||
determineNameFullByContactPersonItem(item) {
|
||||
return Name.fromContactPersonItem(item).nameFull
|
||||
},
|
||||
|
||||
formatAddresses(addresses) {
|
||||
return addresses.map((x) => this.formatAddress(x)).filter((x) => x)
|
||||
},
|
||||
|
||||
formatAddress(address) {
|
||||
const addressParts = [
|
||||
address.indicating || '',
|
||||
address.house_number || '',
|
||||
address.postal || '',
|
||||
address.city || '',
|
||||
address.country || '',
|
||||
]
|
||||
|
||||
return addressParts
|
||||
.filter((x) => x)
|
||||
.map((x) => x.trim())
|
||||
.join(', ')
|
||||
.trimRight()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.v-card >>> table,
|
||||
.v-card >>> .v-data-table-header tr,
|
||||
.v-card >>> .v-data-footer {
|
||||
background-color: var(--v-primary-base);
|
||||
}
|
||||
.v-card >>> .v-data-table-header th span {
|
||||
color: var(--v-tertiary-base);
|
||||
}
|
||||
.v-card >>> .text-start,
|
||||
.v-card >>> .v-icon,
|
||||
.v-dialog__content >>> .v-subheader,
|
||||
.v-dialog__content >>> i {
|
||||
color: var(--v-txt-base);
|
||||
font-weight: bold;
|
||||
}
|
||||
.v-card >>> .v-subheader {
|
||||
padding: 0px !important;
|
||||
}
|
||||
.v-dialog__content >>> .v-dialog {
|
||||
border: 4px solid var(--v-secAccent-base);
|
||||
max-height: 68% !important;
|
||||
/* box-shadow: inset 0px 0px 2px 2px var(--v-secAccent-base),
|
||||
inset 6px 6px 14px -14px var(--v-secAccent-base) !important; */
|
||||
}
|
||||
.v-dialog .v-card {
|
||||
background: var(--v-secondary-base);
|
||||
}
|
||||
|
||||
.v-dialog__content >>> .v-input__slot {
|
||||
background: var(--v-primary-base);
|
||||
border: 1px solid var(--v-lines-base);
|
||||
}
|
||||
.v-menu__content >>> .v-date-picker-table {
|
||||
height: 285px !important;
|
||||
}
|
||||
table tr button.view {
|
||||
opacity: 0;
|
||||
}
|
||||
table tr:hover button.view {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
438
components/Members/ContributionMembers.vue
Normal file
438
components/Members/ContributionMembers.vue
Normal file
@@ -0,0 +1,438 @@
|
||||
<template>
|
||||
<accordion-card title="Contributie">
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="contributions"
|
||||
:options="options"
|
||||
sort-by="year"
|
||||
sort-desc
|
||||
hide-default-footer
|
||||
item-key="accreditation"
|
||||
flat
|
||||
v-if="hasContributions"
|
||||
>
|
||||
<template v-slot:item.contribution="{ item }">€ {{new Intl.NumberFormat().format(item.contribution)}},00</template>
|
||||
<template v-slot:item.profiel="{ item }">
|
||||
<v-icon
|
||||
:color="!item.approved_at ? 'accent' : 'success'"
|
||||
>{{
|
||||
!item.approved_at
|
||||
? 'mdi-alert-circle-outline'
|
||||
: 'icon-checkmark'
|
||||
}}</v-icon
|
||||
>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.actions="{ item }">
|
||||
<v-menu
|
||||
offset-y
|
||||
v-if="editMode && $store.getters.isSuperAdminOrAdmin"
|
||||
>
|
||||
<template v-slot:activator="{ on }">
|
||||
<v-hover v-slot:default="{ hover }">
|
||||
<v-btn
|
||||
:color="hover ? 'info' : ''"
|
||||
:outlined="hover"
|
||||
depressed
|
||||
fab
|
||||
small
|
||||
v-on="on"
|
||||
>
|
||||
<v-icon>icon-options</v-icon>
|
||||
</v-btn>
|
||||
</v-hover>
|
||||
</template>
|
||||
<v-list width="200">
|
||||
<v-list-item @click="editItem(item)">
|
||||
<v-list-item-icon class="mr-1">
|
||||
<v-icon small>icon-edit</v-icon>
|
||||
</v-list-item-icon>
|
||||
|
||||
<v-list-item-content>
|
||||
<v-list-item-subtitle>{{
|
||||
$t('general.edit') | capitalize
|
||||
}}</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
|
||||
<v-dialog
|
||||
max-width="740"
|
||||
:persistent="editMode"
|
||||
v-model="dialogDelete"
|
||||
>
|
||||
<template v-slot:activator="{ on }">
|
||||
<v-list-item v-on="on">
|
||||
<v-list-item-icon class="mr-1">
|
||||
<v-icon small>icon-remove</v-icon>
|
||||
</v-list-item-icon>
|
||||
|
||||
<v-list-item-content>
|
||||
<v-list-item-subtitle>{{
|
||||
$t('general.delete') | capitalize
|
||||
}}</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</template>
|
||||
<v-card class="primary pa-10" flat>
|
||||
<v-card-title class="headline">
|
||||
{{ $t('learning.delete_contributionmembers_confirmation') }}
|
||||
</v-card-title>
|
||||
<v-card-actions>
|
||||
<div class="ma-4">
|
||||
<v-btn
|
||||
@click="deleteItem(item)"
|
||||
class="mx-2"
|
||||
color="accent"
|
||||
depressed
|
||||
rounded
|
||||
>{{ $t('general.delete') }}</v-btn
|
||||
>
|
||||
<v-btn
|
||||
@click="dialogDelete = false"
|
||||
class="mx-2"
|
||||
color="info"
|
||||
depressed
|
||||
rounded
|
||||
>{{ $t('general.cancel') }}</v-btn
|
||||
>
|
||||
</div>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</template>
|
||||
</v-data-table>
|
||||
|
||||
<v-dialog
|
||||
v-model="dialogContribution"
|
||||
max-width="75%"
|
||||
v-if="editMode && $store.getters.isSuperAdminOrAdmin"
|
||||
>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-btn
|
||||
v-if="editMode && ($store.getters.isSuperAdmin || $store.getters.isAdmin)"
|
||||
class="my-10 cta-secondary"
|
||||
block
|
||||
depressed
|
||||
min-height="60px"
|
||||
:disabled="isCreateMode"
|
||||
v-on="on"
|
||||
>
|
||||
<v-icon x-small class="mx-4">icon-add</v-icon>
|
||||
|
||||
Voeg jaartal toe</v-btn
|
||||
>
|
||||
</template>
|
||||
<v-card ref="card">
|
||||
<v-card-title>
|
||||
<span class="headline">{{ formTitle }}</span>
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text>
|
||||
<v-container>
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-subheader class="txt--text font-weight-black"
|
||||
>Jaar</v-subheader
|
||||
>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-select
|
||||
:items="yearsComputed"
|
||||
v-model="editedItem.year"
|
||||
:outlined="editMode"
|
||||
:solo="!editMode"
|
||||
:disabled="!editMode || !$store.getters.isSuperAdminOrAdmin"
|
||||
:flat="!editMode"
|
||||
v-if="isCreatedModeContribution"
|
||||
/>
|
||||
<v-text-field
|
||||
v-model="editedItem.year"
|
||||
:outlined="editMode"
|
||||
:solo="!editMode"
|
||||
disabled
|
||||
:flat="!editMode"
|
||||
v-else
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-subheader class="txt--text font-weight-black"
|
||||
>Contributie
|
||||
</v-subheader>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-text-field
|
||||
v-model="editedItem.contribution"
|
||||
:outlined="editMode"
|
||||
:solo="!editMode"
|
||||
:disabled="!editMode"
|
||||
:flat="!editMode"
|
||||
type="number"
|
||||
prepend-inner-icon="mdi-currency-eur"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row v-if="isCreatedModeContribution && editMode && $store.getters.isSuperAdminOrAdmin">
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-subheader class="txt--text font-weight-black"
|
||||
>Pas toe op alle leden
|
||||
</v-subheader>
|
||||
</v-col>
|
||||
<v-col class="checkbox" cols="12" sm="12" md="1">
|
||||
<v-checkbox
|
||||
v-model="editedItem.toAll"
|
||||
:disabled="!editMode"
|
||||
></v-checkbox>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-card-text>
|
||||
|
||||
<v-divider />
|
||||
<v-card-actions v-if="editMode">
|
||||
<v-btn
|
||||
class="ma-2 white--text"
|
||||
color="info"
|
||||
depressed
|
||||
rounded
|
||||
:disabled="loading"
|
||||
@click="save"
|
||||
>{{ $t('general.save') }}</v-btn
|
||||
>
|
||||
<v-spacer />
|
||||
<v-btn
|
||||
class="ma-2 white--text"
|
||||
color="txt"
|
||||
depressed
|
||||
text
|
||||
:disabled="loading"
|
||||
@click="close"
|
||||
>{{ $t('general.cancel') }}</v-btn
|
||||
>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<p v-if="isCreateMode" class="text-center">
|
||||
Bij het aanmaken van een nieuw lid kiest u eerst voor 'Tussentijds
|
||||
Opslaan' om deze functie te activeren.
|
||||
</p>
|
||||
</accordion-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import accordionCard from '@/components/UI/AccordionCard/AccordionCard'
|
||||
export default {
|
||||
components: {
|
||||
accordionCard,
|
||||
},
|
||||
props: {
|
||||
editMode: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isCreateMode: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
options: {
|
||||
itemsPerPage: -1,
|
||||
},
|
||||
headers: [
|
||||
{ text: 'jaar', value: 'year' },
|
||||
{ text: 'contributie' , value: 'contribution' },
|
||||
{ text: 'profiel', value: 'profiel', sortable: false },
|
||||
{ text: '', value: 'actions' },
|
||||
],
|
||||
dialogContribution: false,
|
||||
dialogDelete: false,
|
||||
editedIndex: -1,
|
||||
editedItem: {},
|
||||
defaultItem: {},
|
||||
loading: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
local() {
|
||||
return this.$store.state.members.local
|
||||
},
|
||||
|
||||
isCreatedModeContribution() {
|
||||
return this.editedIndex === -1
|
||||
},
|
||||
|
||||
formTitle() {
|
||||
return this.isCreatedModeContribution ? 'Nieuw' : 'Bewerk'
|
||||
},
|
||||
|
||||
contributions() {
|
||||
if (!this.local || !Array.isArray(this.local.contributions)) return []
|
||||
return this.local.contributions
|
||||
},
|
||||
hasContributions() {
|
||||
if (!this.contributions) return false
|
||||
return this.contributions.length > 0
|
||||
},
|
||||
|
||||
years() {
|
||||
const year = new Date().getFullYear()
|
||||
return Array.from({ length: 51 }, (value, index) => 2010 + index)
|
||||
},
|
||||
|
||||
yearsTaken() {
|
||||
if (!this.hasContributions) return []
|
||||
return this.contributions.map(({ year }) => year)
|
||||
},
|
||||
|
||||
yearsComputed() {
|
||||
return this.years.filter((y) => !this.yearsTaken.includes(y))
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
dialogContribution(val) {
|
||||
val || this.close()
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
close() {
|
||||
this.dialogContribution = false
|
||||
this.$nextTick(() => {
|
||||
this.editedItem = Object.assign({}, this.defaultItem)
|
||||
this.editedIndex = -1
|
||||
this.$refs.card.$el.scrollIntoView(true);
|
||||
})
|
||||
},
|
||||
|
||||
editItem(item) {
|
||||
if (!this.editMode) return
|
||||
this.setSummaryToEdit(item)
|
||||
this.dialogContribution = true
|
||||
},
|
||||
|
||||
setSummaryToEdit(item) {
|
||||
this.editedIndex = this.contributions.indexOf(item)
|
||||
this.editedItem = Object.assign({}, item)
|
||||
this.$forceUpdate()
|
||||
},
|
||||
|
||||
close() {
|
||||
this.dialogContribution = false
|
||||
this.$nextTick(() => {
|
||||
this.editedItem = Object.assign({}, this.defaultItem)
|
||||
this.editedIndex = -1
|
||||
})
|
||||
},
|
||||
|
||||
async deleteItem(item) {
|
||||
if (!item.id) {
|
||||
this.$notifier.showMessage({
|
||||
content: `No summary to delete selected`,
|
||||
color: 'error',
|
||||
icon: 'icon-message',
|
||||
})
|
||||
}
|
||||
|
||||
this.$nextTick(() => this.$nuxt.$loading.start())
|
||||
|
||||
try {
|
||||
await this.$store.dispatch('members/deleteContribution', item)
|
||||
|
||||
this.dialogDelete = false
|
||||
this.dialogContribution = false
|
||||
this.$nuxt.$loading.finish()
|
||||
} catch (error) {
|
||||
console.log('deleteItem -> error', error)
|
||||
this.$nuxt.$loading.finish()
|
||||
}
|
||||
|
||||
this.$forceUpdate()
|
||||
},
|
||||
|
||||
async save() {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.card.$el.scrollIntoView(true);
|
||||
})
|
||||
this.loading = true
|
||||
this.$nextTick(() => this.$nuxt.$loading.start())
|
||||
this.dialogContribution = false
|
||||
|
||||
if (this.isCreatedModeContribution) {
|
||||
try {
|
||||
await this.$store.dispatch(
|
||||
'members/storeContribution',
|
||||
this.editedItem
|
||||
)
|
||||
this.loading = false
|
||||
} catch (error) {
|
||||
console.log('save -> error', error)
|
||||
this.loading = false
|
||||
}
|
||||
} else {
|
||||
// Edit mode
|
||||
try {
|
||||
await this.$store.dispatch(
|
||||
'members/storeContribution',
|
||||
this.editedItem
|
||||
)
|
||||
this.dialogContribution = false
|
||||
this.loading = false
|
||||
} catch (error) {
|
||||
console.log('save -> error', error)
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
|
||||
this.close()
|
||||
this.$nuxt.$loading.finish()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.v-card >>> table,
|
||||
.v-card >>> .v-data-table-header tr,
|
||||
.v-card >>> .v-data-footer {
|
||||
background-color: var(--v-primary-base);
|
||||
}
|
||||
.v-card >>> .v-data-table-header th span {
|
||||
color: var(--v-tertiary-base);
|
||||
}
|
||||
|
||||
.v-card >>> .text-start,
|
||||
.v-card >>> .v-icon,
|
||||
.v-dialog__content >>> .v-subheader,
|
||||
.v-dialog__content >>> i {
|
||||
color: var(--v-txt-base);
|
||||
font-weight: bold;
|
||||
}
|
||||
.v-card >>> .v-subheader {
|
||||
padding: 0px !important;
|
||||
}
|
||||
.v-dialog__content >>> .v-dialog {
|
||||
border: 4px solid var(--v-secAccent-base);
|
||||
/* box-shadow: inset 0px 0px 2px 2px var(--v-secAccent-base),
|
||||
inset 6px 6px 14px -14px var(--v-secAccent-base) !important; */
|
||||
}
|
||||
.v-dialog .v-card {
|
||||
background: var(--v-secondary-base);
|
||||
}
|
||||
|
||||
.v-dialog__content >>> .v-input__slot {
|
||||
background: var(--v-primary-base);
|
||||
border: 1px solid var(--v-lines-base);
|
||||
}
|
||||
.v-menu__content >>> .v-date-picker-table {
|
||||
height: 285px !important;
|
||||
}
|
||||
</style>
|
||||
543
components/Members/EmployeesMembers.vue
Normal file
543
components/Members/EmployeesMembers.vue
Normal file
@@ -0,0 +1,543 @@
|
||||
<template>
|
||||
<accordion-card title="Werknemers">
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="summaries"
|
||||
:options="options"
|
||||
sort-by="year"
|
||||
sort-desc
|
||||
hide-default-footer
|
||||
item-key="accreditation"
|
||||
flat
|
||||
v-if="hasSummaries"
|
||||
>
|
||||
<template v-slot:item.profiel="{ item }">
|
||||
<v-icon :color="!item.approved_at ? 'accent' : 'success'">{{
|
||||
!item.approved_at ? 'mdi-alert-circle-outline' : 'icon-checkmark'
|
||||
}}</v-icon>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.actions="{ item }">
|
||||
<v-menu
|
||||
offset-y
|
||||
v-if="
|
||||
(editing && $store.getters.isSuperAdminOrAdmin) ||
|
||||
(editing && $store.getters.isOnlyMemberEditor && !item.approved_at)
|
||||
"
|
||||
>
|
||||
<template v-slot:activator="{ on }">
|
||||
<v-hover v-slot:default="{ hover }">
|
||||
<v-btn
|
||||
:color="hover ? 'info' : ''"
|
||||
:outlined="hover"
|
||||
depressed
|
||||
fab
|
||||
small
|
||||
v-on="on"
|
||||
>
|
||||
<v-icon>icon-options</v-icon>
|
||||
</v-btn>
|
||||
</v-hover>
|
||||
</template>
|
||||
<v-list width="200">
|
||||
<v-list-item @click="editItem(item)">
|
||||
<v-list-item-icon class="mr-1">
|
||||
<v-icon small>icon-edit</v-icon>
|
||||
</v-list-item-icon>
|
||||
|
||||
<v-list-item-content>
|
||||
<v-list-item-subtitle>{{
|
||||
$t('general.edit') | capitalize
|
||||
}}</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
|
||||
<v-dialog
|
||||
max-width="740"
|
||||
:persistent="editing"
|
||||
v-model="dialogDelete"
|
||||
v-if="!$store.getters.isOnlyMemberEditor"
|
||||
>
|
||||
<template v-slot:activator="{ on }">
|
||||
<v-list-item v-on="on">
|
||||
<v-list-item-icon class="mr-1">
|
||||
<v-icon small>icon-remove</v-icon>
|
||||
</v-list-item-icon>
|
||||
|
||||
<v-list-item-content>
|
||||
<v-list-item-subtitle>{{
|
||||
$t('general.delete') | capitalize
|
||||
}}</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</template>
|
||||
<v-card class="primary pa-10" flat>
|
||||
<v-card-title class="headline">
|
||||
{{ $t('learning.delete_employeesmembers_confirmation') }}
|
||||
</v-card-title>
|
||||
<v-card-actions>
|
||||
<div class="ma-4">
|
||||
<v-btn
|
||||
@click="deleteItem(item)"
|
||||
class="mx-2"
|
||||
color="accent"
|
||||
depressed
|
||||
rounded
|
||||
>{{ $t('general.delete') }}</v-btn
|
||||
>
|
||||
<v-btn
|
||||
@click="dialogDelete = false"
|
||||
class="mx-2"
|
||||
color="info"
|
||||
depressed
|
||||
rounded
|
||||
>{{ $t('general.cancel') }}</v-btn
|
||||
>
|
||||
</div>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</template>
|
||||
</v-data-table>
|
||||
|
||||
<v-dialog
|
||||
v-model="dialogEmployees"
|
||||
max-width="75%"
|
||||
v-if="editing && $store.getters['members/isSuperAdminAdminOrDelegated']"
|
||||
>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-btn
|
||||
v-if="editing && $store.getters.isSuperAdminOrAdmin"
|
||||
class="my-10 cta-secondary"
|
||||
block
|
||||
depressed
|
||||
min-height="60px"
|
||||
:disabled="isCreateMode"
|
||||
v-on="on"
|
||||
>
|
||||
<v-icon x-small class="mx-4">icon-add</v-icon>
|
||||
|
||||
Voeg jaartal toe</v-btn
|
||||
>
|
||||
</template>
|
||||
<v-form ref="form" v-model="valid" lazy-validation>
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
<span class="headline">{{ formTitle }}</span>
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text>
|
||||
<v-container>
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-subheader class="txt--text font-weight-black"
|
||||
>Jaar</v-subheader
|
||||
>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-select
|
||||
:items="yearsComputed"
|
||||
v-model.number="editedItem.year"
|
||||
:outlined="editing"
|
||||
:solo="!editing"
|
||||
:disabled="!editing || !$store.getters.isSuperAdminOrAdmin"
|
||||
:flat="!editing"
|
||||
v-if="isCreatedModeSummary"
|
||||
:rules="rules.year"
|
||||
required
|
||||
error
|
||||
/>
|
||||
<v-text-field
|
||||
v-model.number="editedItem.year"
|
||||
:outlined="editing"
|
||||
:solo="!editing"
|
||||
disabled
|
||||
:flat="!editing"
|
||||
v-else
|
||||
:rules="rules.year"
|
||||
required
|
||||
error
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-subheader class="txt--text font-weight-black"
|
||||
>Werkelijk aantal medewerkers per 31-12-{{
|
||||
editedItem.year - 1 || '__'
|
||||
}}</v-subheader
|
||||
>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-text-field
|
||||
v-model.number="editedItem.real_number_last_year"
|
||||
:outlined="editing"
|
||||
:solo="!editing"
|
||||
:disabled="!editing"
|
||||
:flat="!editing"
|
||||
type="number"
|
||||
:rules="rules.real_number_last_year"
|
||||
required
|
||||
error
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-subheader class="txt--text font-weight-black"
|
||||
>Schatting aantal medewerkers per 31-12-{{
|
||||
editedItem.year || '__'
|
||||
}}</v-subheader
|
||||
>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-text-field
|
||||
v-model="editedItem.estimated_number_next_year"
|
||||
:outlined="editing"
|
||||
:solo="!editing"
|
||||
:disabled="!editing"
|
||||
:flat="!editing"
|
||||
type="number"
|
||||
:rules="rules.estimated_number_next_year"
|
||||
required
|
||||
error
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row
|
||||
v-if="
|
||||
isCreatedModeSummary &&
|
||||
editing &&
|
||||
$store.getters.isSuperAdminOrAdmin
|
||||
"
|
||||
>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-subheader class="txt--text font-weight-black"
|
||||
>Pas toe op alle leden
|
||||
</v-subheader>
|
||||
</v-col>
|
||||
<v-col class="checkbox" cols="12" sm="12" md="1">
|
||||
<v-checkbox
|
||||
v-model="editedItem.toAll"
|
||||
:disabled="!editing"
|
||||
></v-checkbox>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="12">
|
||||
<small> * Personeel in loondienst </small>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="12">
|
||||
<small
|
||||
>Stuur de onderbouwing van het werknemersaantal van vorig
|
||||
jaar (bijvoorbeeld een pagina uit een jaarverslag) naar
|
||||
<a href="mailto:info@ggzecademy.nl"
|
||||
>info@ggzecademy.nl</a
|
||||
></small
|
||||
>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-card-text>
|
||||
|
||||
<v-divider />
|
||||
<v-card-actions v-if="editing">
|
||||
<v-btn
|
||||
class="ma-2 white--text"
|
||||
color="info"
|
||||
depressed
|
||||
rounded
|
||||
:disabled="loading"
|
||||
v-if="isFormFilled"
|
||||
@click="validate() && save()"
|
||||
>{{
|
||||
!isCreatedModeSummary && $store.getters.isSuperAdminOrAdmin
|
||||
? 'Goedkeuren'
|
||||
: $t('general.save')
|
||||
}}</v-btn
|
||||
>
|
||||
<v-spacer />
|
||||
<v-btn
|
||||
class="ma-2 white--text"
|
||||
color="txt"
|
||||
depressed
|
||||
text
|
||||
:disabled="loading"
|
||||
@click="close"
|
||||
>{{ $t('general.cancel') }}</v-btn
|
||||
>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-form>
|
||||
</v-dialog>
|
||||
|
||||
<p v-if="isCreateMode" class="text-center">
|
||||
Bij het aanmaken van een nieuw lid kiest u eerst voor 'Tussentijds
|
||||
Opslaan' om deze functie te activeren.
|
||||
</p>
|
||||
</accordion-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import accordionCard from '@/components/UI/AccordionCard/AccordionCard'
|
||||
export default {
|
||||
components: {
|
||||
accordionCard,
|
||||
},
|
||||
props: {
|
||||
editMode: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isCreateMode: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
rules: {
|
||||
year: [(v) => !!v || 'Het jaar is vereist.'],
|
||||
real_number_last_year: [
|
||||
(v) => +v >= 0 || 'Het werkelijk aantal werknemers is vereist.',
|
||||
],
|
||||
estimated_number_next_year: [
|
||||
(v) => +v >= 0 || 'De schatting aantal werknemers is vereist.',
|
||||
],
|
||||
},
|
||||
options: {
|
||||
itemsPerPage: -1,
|
||||
},
|
||||
headers: [
|
||||
{ text: 'jaar', value: 'year' },
|
||||
{ text: 'opgave medewerkers', value: 'real_number_last_year' },
|
||||
{
|
||||
text: 'schatting medewerkers komende jaar',
|
||||
value: 'estimated_number_next_year',
|
||||
},
|
||||
{ text: 'ledencontrole', value: 'profiel', sortable: false },
|
||||
{ text: '', value: 'actions' },
|
||||
],
|
||||
employersEditMode: false,
|
||||
dialogEmployees: false,
|
||||
dialogDelete: false,
|
||||
editedIndex: -1,
|
||||
editedItem: {},
|
||||
loading: false,
|
||||
valid: true,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
editing() {
|
||||
return (
|
||||
this.$store.getters.isOnlyMemberEditor ||
|
||||
(this.editMode && this.$store.getters.isSuperAdminOrAdmin)
|
||||
)
|
||||
},
|
||||
|
||||
local() {
|
||||
return this.$store.state.members.local
|
||||
},
|
||||
|
||||
isCreatedModeSummary() {
|
||||
return this.editedIndex === -1
|
||||
},
|
||||
|
||||
formTitle() {
|
||||
return this.isCreatedModeSummary ? 'Nieuw' : 'Bewerken'
|
||||
},
|
||||
|
||||
summaries() {
|
||||
if (!this.local || !Array.isArray(this.local.summaries)) return []
|
||||
|
||||
// Years older than the current are made hidden for Users delegated to edit members
|
||||
if (this.$store.getters.isOnlyMemberEditor) {
|
||||
const yearValid = new Date().getFullYear()
|
||||
const summary = this.local.summaries.find(
|
||||
(summary) => summary.year === yearValid
|
||||
)
|
||||
return summary ? [summary] : []
|
||||
}
|
||||
|
||||
return this.local.summaries
|
||||
},
|
||||
hasSummaries() {
|
||||
if (!this.summaries) return false
|
||||
return this.summaries.length > 0
|
||||
},
|
||||
|
||||
years() {
|
||||
const year = new Date().getFullYear()
|
||||
return Array.from({ length: 51 }, (value, index) => 2010 + index)
|
||||
},
|
||||
|
||||
yearsTaken() {
|
||||
if (!this.hasSummaries) return []
|
||||
return this.summaries.map(({ year }) => year)
|
||||
},
|
||||
|
||||
yearsComputed() {
|
||||
return this.years.filter((y) => !this.yearsTaken.includes(y))
|
||||
},
|
||||
|
||||
isFormFilled() {
|
||||
if (this.editedItem['year'] === null) return false
|
||||
if (this.editedItem['year'] === undefined) return false
|
||||
if (this.editedItem['year'] === '') return false
|
||||
|
||||
if (this.editedItem['real_number_last_year'] === null) return false
|
||||
if (this.editedItem['real_number_last_year'] === undefined) return false
|
||||
if (this.editedItem['real_number_last_year'] === '') return false
|
||||
|
||||
if (this.editedItem['estimated_number_next_year'] === null) return false
|
||||
if (this.editedItem['estimated_number_next_year'] === undefined)
|
||||
return false
|
||||
if (this.editedItem['estimated_number_next_year'] === '') return false
|
||||
|
||||
return true
|
||||
},
|
||||
|
||||
defaultItem() {
|
||||
return {
|
||||
year: this.yearsTaken.includes(new Date().getFullYear())
|
||||
? this.yearsComputed[0]
|
||||
: new Date().getFullYear(),
|
||||
real_number_last_year: 0,
|
||||
estimated_number_next_year: 0,
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
dialogEmployees(val) {
|
||||
val || this.close()
|
||||
if (Object.entries(this.editedItem).length === 0) {
|
||||
this.editedItem = Object.assign({}, this.defaultItem)
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
close() {
|
||||
this.dialogEmployees = false
|
||||
this.$nextTick(() => {
|
||||
this.editedItem = Object.assign({}, this.defaultItem)
|
||||
this.editedIndex = -1
|
||||
})
|
||||
},
|
||||
|
||||
editItem(item) {
|
||||
if (!this.editing) return
|
||||
this.setSummaryToEdit(item)
|
||||
},
|
||||
|
||||
setSummaryToEdit(item) {
|
||||
this.editedIndex = this.summaries.indexOf(item)
|
||||
this.editedItem = Object.assign({}, item)
|
||||
this.$forceUpdate()
|
||||
this.dialogEmployees = true
|
||||
},
|
||||
|
||||
async deleteItem(item) {
|
||||
if (!item.id) {
|
||||
this.$notifier.showMessage({
|
||||
content: `No summary to delete selected`,
|
||||
color: 'error',
|
||||
icon: 'icon-message',
|
||||
})
|
||||
}
|
||||
|
||||
this.$nextTick(() => this.$nuxt.$loading.start())
|
||||
|
||||
try {
|
||||
await this.$store.dispatch('members/deleteSummary', item)
|
||||
|
||||
this.dialogDelete = false
|
||||
this.dialogEmployees = false
|
||||
this.$nuxt.$loading.finish()
|
||||
} catch (error) {
|
||||
console.log('deleteItem -> error', error)
|
||||
this.$nuxt.$loading.finish()
|
||||
}
|
||||
|
||||
this.$forceUpdate()
|
||||
},
|
||||
|
||||
validate() {
|
||||
return this.$refs.form.validate()
|
||||
},
|
||||
|
||||
async save() {
|
||||
this.loading = true
|
||||
this.$nextTick(() => this.$nuxt.$loading.start())
|
||||
this.dialogEmployees = false
|
||||
|
||||
if (this.isCreatedModeSummary) {
|
||||
try {
|
||||
await this.$store.dispatch('members/storeSummary', this.editedItem)
|
||||
this.loading = false
|
||||
} catch (error) {
|
||||
console.log('save -> error', error)
|
||||
this.loading = false
|
||||
}
|
||||
} else {
|
||||
// Edit mode
|
||||
try {
|
||||
await this.$store.dispatch('members/storeSummary', this.editedItem)
|
||||
this.dialogEmployees = false
|
||||
this.loading = false
|
||||
} catch (error) {
|
||||
console.log('save -> error', error)
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
|
||||
this.close()
|
||||
this.$nuxt.$loading.finish()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.v-card >>> table,
|
||||
.v-card >>> .v-data-table-header tr,
|
||||
.v-card >>> .v-data-footer {
|
||||
background-color: var(--v-primary-base);
|
||||
}
|
||||
.v-card >>> .v-data-table-header th span {
|
||||
color: var(--v-tertiary-base);
|
||||
}
|
||||
.v-card >>> .text-start,
|
||||
.v-card >>> .v-icon,
|
||||
.v-dialog__content >>> .v-subheader,
|
||||
.v-dialog__content >>> i {
|
||||
color: var(--v-txt-base);
|
||||
font-weight: bold;
|
||||
}
|
||||
.v-card >>> .v-subheader {
|
||||
padding: 0px !important;
|
||||
}
|
||||
.v-dialog__content >>> .v-dialog {
|
||||
border: 4px solid var(--v-secAccent-base);
|
||||
/* box-shadow: inset 0px 0px 2px 2px var(--v-secAccent-base),
|
||||
inset 6px 6px 14px -14px var(--v-secAccent-base) !important; */
|
||||
}
|
||||
.v-dialog .v-card {
|
||||
background: var(--v-secondary-base);
|
||||
}
|
||||
|
||||
.v-dialog__content >>> .v-input__slot {
|
||||
background: var(--v-primary-base);
|
||||
border: 1px solid var(--v-lines-base);
|
||||
}
|
||||
.v-menu__content >>> .v-date-picker-table {
|
||||
height: 285px !important;
|
||||
}
|
||||
</style>
|
||||
5
components/Members/FieldHasChanges.vue
Normal file
5
components/Members/FieldHasChanges.vue
Normal file
@@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<v-avatar color="info" class="mx-2" size="26">
|
||||
<v-icon dark> mdi-check </v-icon>
|
||||
</v-avatar>
|
||||
</template>
|
||||
114
components/Members/MembersChanges.vue
Normal file
114
components/Members/MembersChanges.vue
Normal file
@@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items-per-page="10"
|
||||
:items="items"
|
||||
sort-by="updated_at"
|
||||
:sort-desc="true"
|
||||
class="pa-4 secondary"
|
||||
>
|
||||
<template v-slot:item.informal_name="{ item }">
|
||||
<v-img
|
||||
:alt="item.informal_name"
|
||||
lazy-src="/images/product-placeholder.jpg"
|
||||
:src="computeImage(item)"
|
||||
contain
|
||||
height="60px"
|
||||
width="110px"
|
||||
/>
|
||||
|
||||
{{ item.informal_name }}
|
||||
</template>
|
||||
|
||||
<template v-slot:item.updated_at="{ item }">
|
||||
{{ formatDate(item.updated_at) }}
|
||||
</template>
|
||||
|
||||
<template v-slot:item.delegated="{ item }">
|
||||
{{ findUserById(item.user_id) }}
|
||||
</template>
|
||||
|
||||
<template v-slot:item.actions="{ item }">
|
||||
<div class="view-container">
|
||||
<v-btn
|
||||
class="mx-4 white--text"
|
||||
style="height: 100%"
|
||||
:color="$vuetify.theme.dark ? 'info' : 'txt'"
|
||||
rounded
|
||||
depressed
|
||||
nuxt
|
||||
small
|
||||
:to="localePath(`/manager/members/${item.slug}`)"
|
||||
>{{ $t('general.view') }}</v-btn
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
items: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: [],
|
||||
},
|
||||
users: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: [],
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
headers: [
|
||||
{
|
||||
text: 'lid',
|
||||
value: 'informal_name',
|
||||
},
|
||||
{
|
||||
text: 'bijgewerkt op',
|
||||
value: 'updated_at',
|
||||
},
|
||||
{
|
||||
text: 'door',
|
||||
value: 'delegated',
|
||||
},
|
||||
{
|
||||
text: 'aangepast',
|
||||
value: 'changes',
|
||||
},
|
||||
{
|
||||
text: '',
|
||||
value: 'actions',
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
formatDate(date) {
|
||||
return dayjs(date).format('D MMM YYYY, HH:mm').toLowerCase()
|
||||
},
|
||||
|
||||
computeImage(item) {
|
||||
if (item.logo.thumb) return item.logo.thumb
|
||||
return '/images/product-placeholder.jpg'
|
||||
},
|
||||
|
||||
findUserById(id) {
|
||||
const unassigned = 'unassigned'
|
||||
if (!id) return unassigned
|
||||
const user = this.users.find((u) => u.id === id)
|
||||
if (user) return user.fullName
|
||||
return unassigned
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
310
components/Members/MembersTable.vue
Normal file
310
components/Members/MembersTable.vue
Normal file
@@ -0,0 +1,310 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items-per-page="10"
|
||||
:items="members"
|
||||
class="pa-4 secondary"
|
||||
>
|
||||
<template v-slot:item.informal_name="{ item }">
|
||||
<v-img
|
||||
:alt="item.informal_name"
|
||||
lazy-src="/images/mijnggz-placeholder-members.png"
|
||||
:src="computeImage(item)"
|
||||
contain
|
||||
height="60px"
|
||||
width="110px"
|
||||
/>
|
||||
|
||||
{{ item.informal_name }}
|
||||
</template>
|
||||
|
||||
<template v-slot:item.main_branch="{ item }">
|
||||
{{ getBranchTitleById(item.branch_id) }}
|
||||
</template>
|
||||
|
||||
<template v-slot:item.start_membership="{ item }">
|
||||
{{ formatDate(item.start_membership || item.created_at) }}
|
||||
</template>
|
||||
|
||||
<template v-slot:item.updated_at="{ item }">
|
||||
{{ formatDate(item.updated_at) }}
|
||||
</template>
|
||||
|
||||
<template v-slot:item.changes="{ item }">
|
||||
<v-icon
|
||||
v-if="item.revision"
|
||||
:color="item.revision.hasChanges ? 'accent' : 'success'"
|
||||
>{{
|
||||
item.revision.hasChanges
|
||||
? 'mdi-alert-circle-outline'
|
||||
: 'icon-checkmark'
|
||||
}}</v-icon
|
||||
>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.actions="{ item }">
|
||||
<div class="view-container">
|
||||
<v-btn
|
||||
class="mx-4 white--text"
|
||||
style="height: 100%"
|
||||
:color="$vuetify.theme.dark ? 'info' : 'txt'"
|
||||
rounded
|
||||
depressed
|
||||
nuxt
|
||||
small
|
||||
:to="localePath(`/manager/members/${item.slug}`)"
|
||||
>{{ $t('general.view') }}</v-btn
|
||||
>
|
||||
|
||||
<v-menu
|
||||
offset-y
|
||||
v-if="canEditMember"
|
||||
>
|
||||
<template v-slot:activator="{ on }">
|
||||
<v-hover v-slot:default="{ hover }">
|
||||
<v-btn
|
||||
:color="hover ? 'info' : ''"
|
||||
:outlined="hover"
|
||||
depressed
|
||||
fab
|
||||
small
|
||||
v-on="on"
|
||||
class="menu-btn"
|
||||
>
|
||||
<v-icon>icon-options</v-icon>
|
||||
</v-btn>
|
||||
</v-hover>
|
||||
</template>
|
||||
<v-list width="200">
|
||||
<v-list-item
|
||||
:to="localePath(`/manager/members/${item.slug}?edit`)"
|
||||
nuxt
|
||||
>
|
||||
<v-list-item-icon class="mr-1">
|
||||
<v-icon small>icon-edit</v-icon>
|
||||
</v-list-item-icon>
|
||||
|
||||
<v-list-item-content>
|
||||
<v-list-item-subtitle>{{
|
||||
$t('general.edit') | capitalize
|
||||
}}</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
|
||||
<v-dialog max-width="740" persistent v-model="dialog">
|
||||
<template v-slot:activator="{ on }">
|
||||
<v-list-item v-on="on">
|
||||
<v-list-item-icon class="mr-1">
|
||||
<v-icon small>icon-remove</v-icon>
|
||||
</v-list-item-icon>
|
||||
|
||||
<v-list-item-content>
|
||||
<v-list-item-subtitle>{{
|
||||
$t('general.delete') | capitalize
|
||||
}}</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</template>
|
||||
<v-card class="primary pa-10" flat>
|
||||
<v-card-title class="headline">
|
||||
{{
|
||||
$t('learning.product_overview.delete_confirmation', {
|
||||
productName: item.informal_name,
|
||||
})
|
||||
}}
|
||||
</v-card-title>
|
||||
<v-card-actions>
|
||||
<div class="ma-4">
|
||||
<v-btn
|
||||
@click="deleteMember(item.id)"
|
||||
class="mx-2"
|
||||
color="accent"
|
||||
depressed
|
||||
rounded
|
||||
>{{ $t('general.delete') }}</v-btn
|
||||
>
|
||||
<v-btn
|
||||
@click="close"
|
||||
class="mx-2"
|
||||
color="info"
|
||||
depressed
|
||||
rounded
|
||||
>{{ $t('general.cancel') }}</v-btn
|
||||
>
|
||||
</div>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</div>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
members: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
dialog: false,
|
||||
page: 1,
|
||||
headers: [
|
||||
{
|
||||
text: '#',
|
||||
value: 'id',
|
||||
},
|
||||
{
|
||||
text: this.$t('members.table.headers.member'),
|
||||
value: 'informal_name',
|
||||
// sortable: false,
|
||||
},
|
||||
{
|
||||
text: this.$t('members.table.headers.type'),
|
||||
value: 'type',
|
||||
},
|
||||
{
|
||||
text: this.$t('members.table.headers.industry'),
|
||||
value: 'main_branch',
|
||||
},
|
||||
{
|
||||
text: this.$t('members.table.headers.location'),
|
||||
value: 'info_city',
|
||||
},
|
||||
{
|
||||
text: this.$t('members.table.headers.since'),
|
||||
value: 'start_membership',
|
||||
},
|
||||
{
|
||||
text: this.$t('members.table.headers.updated'),
|
||||
value: 'updated_at',
|
||||
},
|
||||
{
|
||||
text: this.$t('members.table.headers.check'),
|
||||
value: 'changes',
|
||||
},
|
||||
{
|
||||
text: this.$t('members.table.headers.action'),
|
||||
value: 'actions',
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
dialog(val) {
|
||||
val || this.close()
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
canEditMember() {
|
||||
return this.$store.getters['members/isSuperAdminAdminOrDelegated']
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
close() {
|
||||
this.dialog = false
|
||||
},
|
||||
|
||||
async deleteMember(memberId) {
|
||||
if (!memberId) return
|
||||
this.dialog = false
|
||||
await this.$store.dispatch('members/deleteMember', memberId)
|
||||
this.$router.push(this.localePath('/manager/members'))
|
||||
},
|
||||
|
||||
formatDate(date) {
|
||||
return dayjs(date).format('D MMM YYYY').toLowerCase()
|
||||
},
|
||||
|
||||
computeImage(item) {
|
||||
if (item.logo.thumb) return item.logo.thumb
|
||||
return '/images/mijnggz-placeholder-members.png'
|
||||
},
|
||||
|
||||
getBranchTitleById(id) {
|
||||
const branch = this.$store.getters['members/getBranchById'](id);
|
||||
|
||||
return branch ? branch.title : '';
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.view-container{
|
||||
display:flex;
|
||||
}
|
||||
table tr a.v-btn {
|
||||
opacity: 0;
|
||||
}
|
||||
table tr:hover a.v-btn {
|
||||
opacity: 1;
|
||||
}
|
||||
.v-list-item:hover >>> .v-list-item__icon i,
|
||||
.v-list-item:hover >>> .v-list-item__content .v-list-item__subtitle {
|
||||
color: var(--v-info-base) !important;
|
||||
}
|
||||
.v-data-table >>> .v-data-table-header th:last-child,
|
||||
.v-data-table >>> .v-data-table-header th:nth-child(3) {
|
||||
position: relative;
|
||||
}
|
||||
.v-data-table >>> .v-data-table-header th:last-child::before,
|
||||
.v-data-table >>> .v-data-table-header th:nth-child(3)::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -1px;
|
||||
height: 20px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
border-left: 1px solid rgba(0, 0, 0, 0.12) !important;
|
||||
}
|
||||
.v-data-table >>> .v-data-table-header tr th {
|
||||
border-bottom: none !important;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
.v-data-table td .menu-btn {
|
||||
background-color: unset !important;
|
||||
}
|
||||
.v-data-table >>> td {
|
||||
color: var(--v-txt-base);
|
||||
}
|
||||
.v-data-table >>> th {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.v-data-table >>> td:first-child {
|
||||
padding-right: 0px !important;
|
||||
}
|
||||
.v-data-table >>> td:first-child .v-image {
|
||||
margin-right: -18px;
|
||||
}
|
||||
.v-data-table >>> td:last-child,
|
||||
.v-data-table >>> td:nth-child(3) {
|
||||
position: relative;
|
||||
}
|
||||
.v-data-table >>> td:last-child::before,
|
||||
.v-data-table >>> td:nth-child(3)::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -1px;
|
||||
height: 60px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
border-left: 1px solid rgba(0, 0, 0, 0.12) !important;
|
||||
}
|
||||
.v-data-table >>> .v-data-table__divider {
|
||||
border-right: none !important;
|
||||
}
|
||||
</style>
|
||||
49
components/Members/MoreMembers.vue
Normal file
49
components/Members/MoreMembers.vue
Normal file
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<accordion-card title="Overige">
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="3">
|
||||
<v-subheader class="txt--text font-weight-black ml-10">
|
||||
Leeromgeving
|
||||
</v-subheader>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-text-field outlined> </v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="3"> </v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" sm="12" md="3"> </v-col>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-btn
|
||||
class="cta-secondary"
|
||||
block
|
||||
depressed
|
||||
@click=""
|
||||
min-height="60px"
|
||||
>
|
||||
<v-icon x-small class="mx-4">icon-add</v-icon>
|
||||
|
||||
{{ $t('general.add') | capitalize }}</v-btn
|
||||
>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="3"> </v-col>
|
||||
</v-row>
|
||||
</accordion-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import accordionCard from '@/components/UI/AccordionCard/AccordionCard'
|
||||
export default {
|
||||
components: {
|
||||
accordionCard,
|
||||
},
|
||||
props: {
|
||||
editMode: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
computed: {},
|
||||
}
|
||||
</script>
|
||||
896
components/Members/PageMembers.vue
Normal file
896
components/Members/PageMembers.vue
Normal file
@@ -0,0 +1,896 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user