This is an automated email from the ASF dual-hosted git repository. machristie pushed a commit to branch AIRAVATA-3562 in repository https://gitbox.apache.org/repos/asf/airavata-django-portal.git
commit 793b8f39c6df177259babd0e190892513335d9c5 Author: Marcus Christie <[email protected]> AuthorDate: Tue Apr 26 15:38:57 2022 -0400 AIRAVATA-3565 Other field for single and multi choice fields --- .../ExtendedUserProfileMultiChoiceFieldEditor.vue | 61 ++++++++++++++++++++-- .../ExtendedUserProfileSingleChoiceFieldEditor.vue | 60 +++++++++++++++++++-- .../js/store/modules/extendedUserProfile.js | 46 +++++++++++++++- 3 files changed, 156 insertions(+), 11 deletions(-) diff --git a/django_airavata/apps/auth/static/django_airavata_auth/js/components/ExtendedUserProfileMultiChoiceFieldEditor.vue b/django_airavata/apps/auth/static/django_airavata_auth/js/components/ExtendedUserProfileMultiChoiceFieldEditor.vue index d83872e7..db45cbb9 100644 --- a/django_airavata/apps/auth/static/django_airavata_auth/js/components/ExtendedUserProfileMultiChoiceFieldEditor.vue +++ b/django_airavata/apps/auth/static/django_airavata_auth/js/components/ExtendedUserProfileMultiChoiceFieldEditor.vue @@ -4,29 +4,70 @@ v-model="value" :options="options" stacked - ></b-form-checkbox-group> + @change="onChange" + > + <b-form-checkbox :value="otherOptionValue" + >Other (please specify)</b-form-checkbox + > + </b-form-checkbox-group> + <b-form-input + class="mt-2" + v-if="showOther" + v-model="other" + placeholder="Please specify" + /> </extended-user-profile-field-editor> </template> <script> import { mapGetters, mapMutations } from "vuex"; import ExtendedUserProfileFieldEditor from "./ExtendedUserProfileFieldEditor.vue"; +const OTHER_OPTION = new Object(); // sentinel value export default { components: { ExtendedUserProfileFieldEditor }, props: ["extendedUserProfileField"], + data() { + return { + otherOptionSelected: false, + }; + }, computed: { - ...mapGetters("extendedUserProfile", ["getMultiChoiceValue"]), + ...mapGetters("extendedUserProfile", [ + "getMultiChoiceValue", + "getMultiChoiceOther", + ]), value: { get() { - return this.getMultiChoiceValue(this.extendedUserProfileField.id); + const copy = this.getMultiChoiceValue( + this.extendedUserProfileField.id + ).slice(); + if (this.showOther) { + copy.push(this.otherOptionValue); + } + return copy; }, set(value) { + const values = value.filter((v) => v !== this.otherOptionValue); this.setMultiChoiceValue({ + value: values, + id: this.extendedUserProfileField.id, + }); + }, + }, + other: { + get() { + return this.getMultiChoiceOther(this.extendedUserProfileField.id); + }, + set(value) { + this.setMultiChoiceOther({ value, id: this.extendedUserProfileField.id, }); }, }, + showOther() { + return this.other || this.otherOptionSelected; + }, options() { return this.extendedUserProfileField && this.extendedUserProfileField.choices @@ -38,9 +79,21 @@ export default { }) : []; }, + otherOptionValue() { + return OTHER_OPTION; + }, }, methods: { - ...mapMutations("extendedUserProfile", ["setMultiChoiceValue"]), + ...mapMutations("extendedUserProfile", [ + "setMultiChoiceValue", + "setMultiChoiceOther", + ]), + onChange(value) { + this.otherOptionSelected = value.includes(this.otherOptionValue); + if (!this.otherOptionSelected) { + this.other = ""; + } + }, }, }; </script> diff --git a/django_airavata/apps/auth/static/django_airavata_auth/js/components/ExtendedUserProfileSingleChoiceFieldEditor.vue b/django_airavata/apps/auth/static/django_airavata_auth/js/components/ExtendedUserProfileSingleChoiceFieldEditor.vue index a78fc028..524fee70 100644 --- a/django_airavata/apps/auth/static/django_airavata_auth/js/components/ExtendedUserProfileSingleChoiceFieldEditor.vue +++ b/django_airavata/apps/auth/static/django_airavata_auth/js/components/ExtendedUserProfileSingleChoiceFieldEditor.vue @@ -1,28 +1,69 @@ <template> <extended-user-profile-field-editor v-bind="$props"> - <b-form-select v-model="value" :options="options"></b-form-select> + <b-form-select v-model="value" :options="options" @change="onChange"> + <b-form-select-option :value="otherOptionValue" + >Other (please specify)</b-form-select-option + > + </b-form-select> + <b-form-input + class="mt-2" + v-if="showOther" + v-model="other" + placeholder="Please specify" + /> </extended-user-profile-field-editor> </template> <script> import { mapGetters, mapMutations } from "vuex"; import ExtendedUserProfileFieldEditor from "./ExtendedUserProfileFieldEditor.vue"; +const OTHER_OPTION = new Object(); // sentinel value + export default { components: { ExtendedUserProfileFieldEditor }, props: ["extendedUserProfileField"], + data() { + return { + otherOptionSelected: false, + }; + }, computed: { - ...mapGetters("extendedUserProfile", ["getSingleChoiceValue"]), + ...mapGetters("extendedUserProfile", [ + "getSingleChoiceValue", + "getSingleChoiceOther", + ]), value: { get() { - return this.getSingleChoiceValue(this.extendedUserProfileField.id); + if (this.showOther) { + return this.otherOptionValue; + } else { + return this.getSingleChoiceValue(this.extendedUserProfileField.id); + } + }, + set(value) { + if (value !== this.otherOptionValue) { + this.setSingleChoiceValue({ + value, + id: this.extendedUserProfileField.id, + }); + } + }, + }, + other: { + get() { + return this.getSingleChoiceOther(this.extendedUserProfileField.id); }, set(value) { - this.setSingleChoiceValue({ + this.setSingleChoiceOther({ value, id: this.extendedUserProfileField.id, }); }, }, + showOther() { + const value = this.getSingleChoiceValue(this.extendedUserProfileField.id); + return (value === null && this.other) || this.otherOptionSelected; + }, options() { return this.extendedUserProfileField && this.extendedUserProfileField.choices @@ -34,9 +75,18 @@ export default { }) : []; }, + otherOptionValue() { + return OTHER_OPTION; + }, }, methods: { - ...mapMutations("extendedUserProfile", ["setSingleChoiceValue"]), + ...mapMutations("extendedUserProfile", [ + "setSingleChoiceValue", + "setSingleChoiceOther", + ]), + onChange(value) { + this.otherOptionSelected = value === this.otherOptionValue; + }, }, }; </script> diff --git a/django_airavata/apps/auth/static/django_airavata_auth/js/store/modules/extendedUserProfile.js b/django_airavata/apps/auth/static/django_airavata_auth/js/store/modules/extendedUserProfile.js index b58e9ca4..d2163890 100644 --- a/django_airavata/apps/auth/static/django_airavata_auth/js/store/modules/extendedUserProfile.js +++ b/django_airavata/apps/auth/static/django_airavata_auth/js/store/modules/extendedUserProfile.js @@ -24,6 +24,12 @@ const getters = { return null; } }, + getSingleChoiceOther: (state) => (id) => { + const value = state.extendedUserProfileValues.find( + (v) => v.ext_user_profile_field === id + ); + return value ? value.other_value : null; + }, getMultiChoiceValue: (state) => (id) => { const value = state.extendedUserProfileValues.find( (v) => v.ext_user_profile_field === id @@ -31,9 +37,15 @@ const getters = { if (value && value.choices) { return value.choices; } else { - return null; + return []; } }, + getMultiChoiceOther: (state) => (id) => { + const value = state.extendedUserProfileValues.find( + (v) => v.ext_user_profile_field === id + ); + return value ? value.other_value : null; + }, getUserAgreementValue: (state) => (id) => { const value = state.extendedUserProfileValues.find( (v) => v.ext_user_profile_field === id @@ -105,13 +117,28 @@ const mutations = { }); } }, + setSingleChoiceOther(state, { value, id }) { + const profileValue = state.extendedUserProfileValues.find( + (v) => v.ext_user_profile_field === id + ); + if (profileValue) { + profileValue.choices = []; + profileValue.other_value = value; + } else { + state.extendedUserProfileValues.push({ + value_type: "single_choice", + ext_user_profile_field: id, + choices: [], + other_value: value, + }); + } + }, setMultiChoiceValue(state, { value, id }) { const profileValue = state.extendedUserProfileValues.find( (v) => v.ext_user_profile_field === id ); if (profileValue) { profileValue.choices = value; - profileValue.other_value = ""; } else { state.extendedUserProfileValues.push({ value_type: "multi_choice", @@ -120,6 +147,21 @@ const mutations = { }); } }, + setMultiChoiceOther(state, { value, id }) { + const profileValue = state.extendedUserProfileValues.find( + (v) => v.ext_user_profile_field === id + ); + if (profileValue) { + profileValue.other_value = value; + } else { + state.extendedUserProfileValues.push({ + value_type: "multi_choice", + ext_user_profile_field: id, + choices: [], + other_value: value, + }); + } + }, setUserAgreementValue(state, { value, id }) { const profileValue = state.extendedUserProfileValues.find( (v) => v.ext_user_profile_field === id
