[airavata-django-portal] 02/06: AIRAVATA-3565 Ext User Profile UI with load/saving multi_choice values

[ma...@apache.org]

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 <ma...@apache.org>
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) =>