refactor: replace custom CRM with Monica fork
Some checks failed
Build & Push Monica Image to Gitea Registry / build-and-push (push) Failing after 9s
Some checks failed
Build & Push Monica Image to Gitea Registry / build-and-push (push) Failing after 9s
This commit is contained in:
Kroonk
443
resources/js/components/settings/Genders.vue
Normal file
443
resources/js/components/settings/Genders.vue
Normal file
@@ -0,0 +1,443 @@
|
||||
<template>
|
||||
<div>
|
||||
<notifications group="main" position="bottom right" />
|
||||
|
||||
<h3 class="mb3">
|
||||
{{ $t('settings.personalization_genders_title') }}
|
||||
<a class="btn nt2" :class="[ dirltr ? 'fr' : 'fl' ]" href="" @click.prevent="showCreateModal">
|
||||
{{ $t('settings.personalization_genders_add') }}
|
||||
</a>
|
||||
</h3>
|
||||
<p>{{ $t('settings.personalization_genders_desc') }}</p>
|
||||
|
||||
<div class="dt dt--fixed w-100 collapse br--top br--bottom">
|
||||
<div class="dt-row">
|
||||
<div class="dtc">
|
||||
<div class="pa2 b">
|
||||
{{ $t('settings.personalization_genders_table_name') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="dtc">
|
||||
<div class="pa2 b">
|
||||
{{ $t('settings.personalization_genders_table_sex') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="dtc">
|
||||
<div class="pa2 b">
|
||||
{{ $t('settings.personalization_genders_table_default') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="dtc" :class="[ dirltr ? 'tr' : 'tl' ]">
|
||||
<div class="pa2 b">
|
||||
{{ $t('settings.personalization_contact_field_type_table_actions') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-for="gender in genders" :key="gender.id"
|
||||
class="dt-row bb b--light-gray"
|
||||
>
|
||||
<div class="dtc">
|
||||
<div class="pa2">
|
||||
{{ gender.name }}
|
||||
<span class="i">
|
||||
{{ $tc('settings.personalization_genders_list_contact_number', gender.numberOfContacts, { count: gender.numberOfContacts }) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dtc">
|
||||
<div class="pa2">
|
||||
{{ $t('settings.personalization_genders_' + gender.type.toLowerCase()) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="dtc">
|
||||
<div class="pa2">
|
||||
<template v-if="gender.isDefault">
|
||||
{{ $t('settings.personalization_genders_default') }}
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dtc" :class="[ dirltr ? 'tr' : 'tl' ]">
|
||||
<div class="pa2">
|
||||
<em class="fa fa-pencil-square-o pointer pr2" @click="showEdit(gender)"></em>
|
||||
<em v-if="genders.length > 1" class="fa fa-trash-o pointer" @click="showDelete(gender)"></em>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt2" :class="[ dirltr ? 'tr' : 'tl' ]">
|
||||
<a class="pointer" href="" @click.prevent="showDefaultGenderModal">{{ $t('settings.personalization_genders_make_default') }}</a>
|
||||
</div>
|
||||
|
||||
<!-- Create Gender type -->
|
||||
<sweet-modal ref="createModal" overlay-theme="dark" :title="$t('settings.personalization_genders_modal_add')">
|
||||
<form @submit.prevent="store()">
|
||||
<div class="form-group">
|
||||
<div class="form-group">
|
||||
<form-input
|
||||
:id="''"
|
||||
v-model="createForm.name"
|
||||
:input-type="'text'"
|
||||
:required="true"
|
||||
:title="$t('settings.personalization_genders_modal_name')"
|
||||
/>
|
||||
<small class="form-text text-muted">
|
||||
{{ $t('settings.personalization_genders_modal_name_help') }}
|
||||
</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<form-select
|
||||
:id="''"
|
||||
v-model="createForm.type"
|
||||
:options="genderTypes"
|
||||
:required="true"
|
||||
:title="$t('settings.personalization_genders_modal_sex')"
|
||||
/>
|
||||
<small class="form-text text-muted">
|
||||
{{ $t('settings.personalization_genders_modal_sex_help') }}
|
||||
</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<form-toggle
|
||||
:id="''"
|
||||
v-model="createForm.isDefault"
|
||||
:labels="toggleOptions"
|
||||
:required="true"
|
||||
:title="$t('settings.personalization_genders_modal_default')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div slot="button">
|
||||
<a class="btn" href="" @click.prevent="closeModal()">
|
||||
{{ $t('app.cancel') }}
|
||||
</a>
|
||||
<a class="btn btn-primary" href="" @click.prevent="store()">
|
||||
{{ $t('app.save') }}
|
||||
</a>
|
||||
</div>
|
||||
</sweet-modal>
|
||||
|
||||
<!-- Edit gender type -->
|
||||
<sweet-modal ref="updateModal" overlay-theme="dark" :title="$t('settings.personalization_genders_modal_edit')">
|
||||
<form @submit.prevent="update(updatedGender)">
|
||||
<div class="form-group">
|
||||
<div class="form-group">
|
||||
<form-input
|
||||
:id="''"
|
||||
v-model="updateForm.name"
|
||||
:input-type="'text'"
|
||||
:required="true"
|
||||
:title="$t('settings.personalization_genders_modal_name')"
|
||||
/>
|
||||
<small class="form-text text-muted">
|
||||
{{ $t('settings.personalization_genders_modal_name_help') }}
|
||||
</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<form-select
|
||||
:id="''"
|
||||
v-model="updateForm.type"
|
||||
:options="genderTypes"
|
||||
:required="true"
|
||||
:title="$t('settings.personalization_genders_modal_sex')"
|
||||
/>
|
||||
<small class="form-text text-muted">
|
||||
{{ $t('settings.personalization_genders_modal_sex_help') }}
|
||||
</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<form-toggle
|
||||
:id="''"
|
||||
v-model="updateForm.isDefault"
|
||||
:labels="toggleOptions"
|
||||
:required="true"
|
||||
:title="$t('settings.personalization_genders_modal_default')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div slot="button">
|
||||
<a class="btn" href="" @click.prevent="closeUpdateModal()">
|
||||
{{ $t('app.cancel') }}
|
||||
</a>
|
||||
<a class="btn btn-primary" href="" @click.prevent="update(updatedGender)">
|
||||
{{ $t('app.update') }}
|
||||
</a>
|
||||
</div>
|
||||
</sweet-modal>
|
||||
|
||||
<!-- Delete Gender type -->
|
||||
<sweet-modal ref="deleteModal" overlay-theme="dark" :title="$t('settings.personalization_genders_modal_delete')">
|
||||
<form>
|
||||
<div v-if="errorMessage !== ''" class="form-error-message mb3">
|
||||
<div class="pa2">
|
||||
<p class="mb0">
|
||||
{{ errorMessage }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb4">
|
||||
<p class="mb2">
|
||||
{{ $t('settings.personalization_genders_modal_delete_desc', {name: deleteForm.name}) }}
|
||||
</p>
|
||||
<div v-if="deleteForm.numberOfContacts !== 0 || deleteForm.isDefault">
|
||||
<p v-if="deleteForm.numberOfContacts !== 0">
|
||||
{{ $tc('settings.personalization_genders_modal_delete_question', deleteForm.numberOfContacts, {count: deleteForm.numberOfContacts}) }}
|
||||
</p>
|
||||
<p v-else>
|
||||
{{ $tc('settings.personalization_genders_modal_delete_question_default') }}
|
||||
</p>
|
||||
<form-select
|
||||
:id="'deleteNewId'"
|
||||
v-model="deleteForm.newId"
|
||||
:options="genders"
|
||||
:required="true"
|
||||
:title="''"
|
||||
:excluded-id="deleteForm.id"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div slot="button">
|
||||
<a class="btn" href="" @click.prevent="closeDeleteModal()">
|
||||
{{ $t('app.cancel') }}
|
||||
</a>
|
||||
<a v-if="deleteForm.numberOfContacts === 0 && ! deleteForm.isDefault"
|
||||
class="btn btn-primary"
|
||||
href=""
|
||||
@click.prevent="trash()"
|
||||
>
|
||||
{{ $t('app.delete') }}
|
||||
</a>
|
||||
<a v-else class="btn btn-primary" href="" @click.prevent="trashAndReplace()">
|
||||
{{ $t('app.delete') }}
|
||||
</a>
|
||||
</div>
|
||||
</sweet-modal>
|
||||
|
||||
<!-- Change default Gender -->
|
||||
<sweet-modal ref="defaultGenderModal" overlay-theme="dark" :title="$t('settings.personalization_genders_modal_default')">
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<div class="form-group">
|
||||
<form-select
|
||||
:id="''"
|
||||
v-model="defaultGenderId"
|
||||
:options="genders"
|
||||
:required="true"
|
||||
:title="$t('settings.personalization_genders_select_default')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div slot="button">
|
||||
<a class="btn" href="" @click.prevent="closeDefaultGenderModal()">
|
||||
{{ $t('app.cancel') }}
|
||||
</a>
|
||||
<a class="btn btn-primary" href="" @click.prevent="updateDefaultGender()">
|
||||
{{ $t('app.save') }}
|
||||
</a>
|
||||
</div>
|
||||
</sweet-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { SweetModal } from 'sweet-modal-vue';
|
||||
|
||||
export default {
|
||||
|
||||
components: {
|
||||
SweetModal
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
genders: [],
|
||||
genderTypes: [],
|
||||
updatedGender: {
|
||||
id: '',
|
||||
name: '',
|
||||
type: '',
|
||||
isDefault: false,
|
||||
},
|
||||
|
||||
errorMessage: '',
|
||||
|
||||
createForm: {
|
||||
name: '',
|
||||
type: '',
|
||||
isDefault: false,
|
||||
errors: []
|
||||
},
|
||||
|
||||
updateForm: {
|
||||
id: '',
|
||||
name: '',
|
||||
type: '',
|
||||
isDefault: false,
|
||||
errors: []
|
||||
},
|
||||
|
||||
deleteForm: {
|
||||
id: '',
|
||||
name: '',
|
||||
isDefault: false,
|
||||
numberOfContacts: 0,
|
||||
newId: 0
|
||||
},
|
||||
|
||||
defaultGenderId: null,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
dirltr() {
|
||||
return this.$root.htmldir === 'ltr';
|
||||
},
|
||||
|
||||
toggleOptions() {
|
||||
return {
|
||||
checked: this.$t('app.yes'),
|
||||
unchecked: this.$t('app.no')
|
||||
};
|
||||
},
|
||||
|
||||
defaultGenderType() {
|
||||
const defaultGender = _.findIndex(this.genders, ['isDefault', true]);
|
||||
return this.genders[defaultGender >= 0 ? defaultGender : 0];
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.prepareComponent();
|
||||
},
|
||||
|
||||
methods: {
|
||||
prepareComponent() {
|
||||
axios.all([
|
||||
this.getGenders(),
|
||||
this.getGenderTypes()
|
||||
]);
|
||||
},
|
||||
|
||||
setDefaultGenderType() {
|
||||
this.createForm.type = this.defaultGenderType.type;
|
||||
},
|
||||
|
||||
getGenders() {
|
||||
return axios.get('settings/personalization/genders')
|
||||
.then(response => {
|
||||
this.genders = _.toArray(response.data);
|
||||
this.setDefaultGenderType();
|
||||
});
|
||||
},
|
||||
|
||||
getGenderTypes() {
|
||||
return axios.get('settings/personalization/genderTypes')
|
||||
.then(response => {
|
||||
this.genderTypes = _.toArray(response.data);
|
||||
});
|
||||
},
|
||||
|
||||
closeModal() {
|
||||
this.$refs.createModal.close();
|
||||
},
|
||||
|
||||
closeUpdateModal() {
|
||||
this.$refs.updateModal.close();
|
||||
},
|
||||
|
||||
closeDeleteModal() {
|
||||
this.$refs.deleteModal.close();
|
||||
},
|
||||
|
||||
closeDefaultGenderModal() {
|
||||
this.$refs.defaultGenderModal.close();
|
||||
},
|
||||
|
||||
showCreateModal() {
|
||||
this.$refs.createModal.open();
|
||||
},
|
||||
|
||||
showDefaultGenderModal() {
|
||||
this.defaultGenderId = this.defaultGenderType.id;
|
||||
this.$refs.defaultGenderModal.open();
|
||||
},
|
||||
|
||||
store() {
|
||||
axios.post('settings/personalization/genders', this.createForm)
|
||||
.then(response => {
|
||||
this.closeModal();
|
||||
this.getGenders();
|
||||
this.createForm.name = '';
|
||||
this.createForm.type = '';
|
||||
});
|
||||
},
|
||||
|
||||
showEdit(gender) {
|
||||
this.updateForm.id = gender.id.toString();
|
||||
this.updateForm.name = gender.name;
|
||||
this.updateForm.type = gender.type;
|
||||
this.updateForm.isDefault = gender.isDefault;
|
||||
this.updatedGender = gender;
|
||||
|
||||
this.$refs.updateModal.open();
|
||||
},
|
||||
|
||||
update() {
|
||||
axios.put('settings/personalization/genders/' + this.updateForm.id, this.updateForm)
|
||||
.then(response => {
|
||||
this.closeUpdateModal();
|
||||
this.getGenders();
|
||||
this.updatedGender.name = this.updateForm.name;
|
||||
this.updatedGender.type = this.updateForm.type;
|
||||
this.updatedGender.isDefault = this.updateForm.isDefault;
|
||||
this.updateForm.name = '';
|
||||
});
|
||||
},
|
||||
|
||||
showDelete(gender) {
|
||||
this.errorMessage = '';
|
||||
this.deleteForm.name = gender.name;
|
||||
this.deleteForm.id = gender.id.toString();
|
||||
this.deleteForm.isDefault = gender.isDefault;
|
||||
this.deleteForm.numberOfContacts = gender.numberOfContacts;
|
||||
|
||||
this.$refs.deleteModal.open();
|
||||
},
|
||||
|
||||
trash() {
|
||||
axios.delete('settings/personalization/genders/' + this.deleteForm.id)
|
||||
.then(response => {
|
||||
this.closeDeleteModal();
|
||||
this.getGenders();
|
||||
});
|
||||
},
|
||||
|
||||
trashAndReplace() {
|
||||
axios.delete('settings/personalization/genders/' + this.deleteForm.id + '/replaceby/' + this.deleteForm.newId)
|
||||
.then(response => {
|
||||
this.closeDeleteModal();
|
||||
this.getGenders();
|
||||
})
|
||||
.catch(error => {
|
||||
if (typeof error.response.data === 'object') {
|
||||
this.errorMessage = error.response.data.message;
|
||||
} else {
|
||||
this.errorMessage = this.$t('app.error_try_again');
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
updateDefaultGender() {
|
||||
axios.put('settings/personalization/genders/default/' + this.defaultGenderId)
|
||||
.then(response => {
|
||||
this.closeDefaultGenderModal();
|
||||
this.getGenders();
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user