[airavata-django-portal] 02/03: AIRAVATA-3566 Single and multichoice display of ext. user profile values in Manage Users

[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 f36755118ff5f45e6de80e26403b972ed2f33048
Author: Marcus Christie <ma...@apache.org>
AuthorDate: Tue Jun 7 14:51:36 2022 -0400

    AIRAVATA-3566 Single and multichoice display of ext. user profile values in Manage Users
---
 .../components/users/ExtendedUserProfilePanel.vue  | 49 +++++++++++++++++++++-
 1 file changed, 47 insertions(+), 2 deletions(-)

diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/components/users/ExtendedUserProfilePanel.vue b/django_airavata/apps/admin/static/django_airavata_admin/src/components/users/ExtendedUserProfilePanel.vue
index 6d739273..4b4b52a6 100644
--- a/django_airavata/apps/admin/static/django_airavata_admin/src/components/users/ExtendedUserProfilePanel.vue
+++ b/django_airavata/apps/admin/static/django_airavata_admin/src/components/users/ExtendedUserProfilePanel.vue
@@ -4,12 +4,19 @@
       <template #cell(value)="{ value, item }">
         <i v-if="item.valid" class="fas fa-check text-success"></i>
         <i v-if="!item.valid" class="fas fa-times text-danger"></i>
-        <template v-if="item.type === 'text'">
+        <template v-if="item.type === 'text' || item.type === 'single_choice'">
           {{ value }}
         </template>
         <template v-else-if="item.type === 'user_agreement'">
           <b-checkbox class="ml-2 d-inline" :checked="value" disabled />
         </template>
+        <template v-else-if="item.type === 'multi_choice'">
+          <ul>
+            <li v-for="result in item.value" :key="result">
+              {{ result }}
+            </li>
+          </ul>
+        </template>
       </template>
     </b-table>
   </b-card>
@@ -75,10 +82,48 @@ export default {
       if (value && value.value_type === "user_agreement") {
         return { value: value.user_agreement, valid: value.valid };
       }
+      if (value && value.value_type === "single_choice") {
+        if (value.other_value) {
+          return { value: `Other: ${value.other_value}`, valid: value.valid };
+        } else if (value.choices && value.choices.length === 1) {
+          const displayText = this.getChoiceDisplayText({
+            field,
+            choiceId: value.choices[0],
+          });
+          if (displayText) {
+            return { value: displayText, valid: value.valid };
+          }
+        }
+        return { value: null, valid: value.valid };
+      }
+      if (value && value.value_type === "multi_choice") {
+        const results = [];
+        if (value.choices) {
+          for (const choiceId of value.choices) {
+            const displayText = this.getChoiceDisplayText({ field, choiceId });
+            if (displayText) {
+              results.push(displayText);
+            }
+          }
+        }
+        if (value.other_value) {
+          results.push(`Other: ${value.other_value}`);
+        }
+        return { value: results, valid: value.valid };
+      }
       return { value: null, valid: !field.required };
     },
+    getChoiceDisplayText({ field, choiceId }) {
+      const choice = field.choices.find((c) => c.id === choiceId);
+      return choice ? choice.display_text : null;
+    },
   },
 };
 </script>
 
-<style></style>
+<style scoped>
+ul {
+  display: inline-block;
+  padding-left: 20px;
+}
+</style>