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 308744c4002b09588c23fdd67ea220076f4404a7 Author: Marcus Christie <[email protected]> AuthorDate: Tue Apr 26 13:26:37 2022 -0400 AIRAVATA-3565 Ext User Profile UI with load/saving multi_choice values --- .../js/components/ExtendedUserProfileEditor.vue | 2 + .../ExtendedUserProfileMultiChoiceFieldEditor.vue | 49 ++++++++++++++++++++++ .../js/store/modules/extendedUserProfile.js | 25 +++++++++++ 3 files changed, 76 insertions(+) diff --git a/django_airavata/apps/auth/static/django_airavata_auth/js/components/ExtendedUserProfileEditor.vue b/django_airavata/apps/auth/static/django_airavata_auth/js/components/ExtendedUserProfileEditor.vue index 3b1cfea1..052d2893 100644 --- a/django_airavata/apps/auth/static/django_airavata_auth/js/components/ExtendedUserProfileEditor.vue +++ b/django_airavata/apps/auth/static/django_airavata_auth/js/components/ExtendedUserProfileEditor.vue @@ -12,6 +12,7 @@ <script> import { mapGetters } from "vuex"; +import ExtendedUserProfileMultiChoiceFieldEditor from "./ExtendedUserProfileMultiChoiceFieldEditor.vue"; import ExtendedUserProfileSingleChoiceFieldEditor from "./ExtendedUserProfileSingleChoiceFieldEditor.vue"; import ExtendedUserProfileTextFieldEditor from "./ExtendedUserProfileTextFieldEditor.vue"; export default { @@ -23,6 +24,7 @@ export default { const fieldTypeEditors = { text: ExtendedUserProfileTextFieldEditor, single_choice: ExtendedUserProfileSingleChoiceFieldEditor, + multi_choice: ExtendedUserProfileMultiChoiceFieldEditor, }; if (extendedUserProfileField.field_type in fieldTypeEditors) { 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 new file mode 100644 index 00000000..2a17d614 --- /dev/null +++ b/django_airavata/apps/auth/static/django_airavata_auth/js/components/ExtendedUserProfileMultiChoiceFieldEditor.vue @@ -0,0 +1,49 @@ +<template> + <b-form-group + :label="extendedUserProfileField.name" + :description="extendedUserProfileField.help_text" + > + <b-form-checkbox-group + v-model="value" + :options="options" + stacked + ></b-form-checkbox-group> + </b-form-group> +</template> + +<script> +import { mapGetters, mapMutations } from "vuex"; +export default { + props: ["extendedUserProfileField"], + computed: { + ...mapGetters("extendedUserProfile", ["getMultiChoiceValue"]), + value: { + get() { + return this.getMultiChoiceValue(this.extendedUserProfileField.id); + }, + set(value) { + this.setMultiChoiceValue({ + value, + id: this.extendedUserProfileField.id, + }); + }, + }, + options() { + return this.extendedUserProfileField && + this.extendedUserProfileField.choices + ? this.extendedUserProfileField.choices.map((choice) => { + return { + value: choice.id, + text: choice.display_text, + }; + }) + : []; + }, + }, + methods: { + ...mapMutations("extendedUserProfile", ["setMultiChoiceValue"]), + }, +}; +</script> + +<style></style> 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 85c085d7..e55c5353 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,16 @@ const getters = { return null; } }, + getMultiChoiceValue: (state) => (id) => { + const value = state.extendedUserProfileValues.find( + (v) => v.ext_user_profile_field === id + ); + if (value && value.choices) { + return value.choices; + } else { + return null; + } + }, }; const actions = { @@ -89,6 +99,21 @@ const mutations = { }); } }, + 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", + ext_user_profile_field: id, + choices: value, + }); + } + }, updateExperimentInputValue(state, { extendedUserProfileValue }) { const index = state.extendedUserProfileValues.findIndex( (v) =>
