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 0999c030432bf1cfc4bb94199a60ccd616426221 Author: Marcus Christie <[email protected]> AuthorDate: Tue Apr 26 14:25:34 2022 -0400 AIRAVATA-3565 Integrated link display for extended user profile fields --- .../js/components/ExtendedUserProfileEditor.vue | 2 +- .../components/ExtendedUserProfileFieldEditor.vue | 38 ++++++++++++++++++++++ .../ExtendedUserProfileMultiChoiceFieldEditor.vue | 9 +++-- .../ExtendedUserProfileSingleChoiceFieldEditor.vue | 9 +++-- .../ExtendedUserProfileTextFieldEditor.vue | 23 +++++++------ ...ExtendedUserProfileUserAgreementFieldEditor.vue | 11 +++---- .../js/components/UserProfileEditor.vue | 2 +- .../js/containers/UserProfileContainer.vue | 12 +++++-- .../django_airavata_auth/js/entry-user-profile.js | 10 +++--- 9 files changed, 77 insertions(+), 39 deletions(-) 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 4ab87d89..b224fba2 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 @@ -15,7 +15,7 @@ import { mapGetters } from "vuex"; import ExtendedUserProfileMultiChoiceFieldEditor from "./ExtendedUserProfileMultiChoiceFieldEditor.vue"; import ExtendedUserProfileSingleChoiceFieldEditor from "./ExtendedUserProfileSingleChoiceFieldEditor.vue"; import ExtendedUserProfileTextFieldEditor from "./ExtendedUserProfileTextFieldEditor.vue"; -import ExtendedUserProfileUserAgreementFieldEditor from './ExtendedUserProfileUserAgreementFieldEditor.vue'; +import ExtendedUserProfileUserAgreementFieldEditor from "./ExtendedUserProfileUserAgreementFieldEditor.vue"; export default { computed: { ...mapGetters("extendedUserProfile", ["extendedUserProfileFields"]), diff --git a/django_airavata/apps/auth/static/django_airavata_auth/js/components/ExtendedUserProfileFieldEditor.vue b/django_airavata/apps/auth/static/django_airavata_auth/js/components/ExtendedUserProfileFieldEditor.vue new file mode 100644 index 00000000..1115ea7e --- /dev/null +++ b/django_airavata/apps/auth/static/django_airavata_auth/js/components/ExtendedUserProfileFieldEditor.vue @@ -0,0 +1,38 @@ +<template> + <b-form-group + :label="extendedUserProfileField.name" + :description="extendedUserProfileField.help_text" + > + <b-card + v-for="link in extendedUserProfileField.links" + :key="link.id" + :header="link.label" + > + <b-card-text v-if="link.display_inline"> + <iframe :src="link.url" /> + </b-card-text> + <a + v-if="link.display_link" + :href="link.url" + target="_blank" + class="card-link" + >Open '{{ link.label }}' in separate tab.</a + > + </b-card> + <slot /> + </b-form-group> +</template> + +<script> +export default { + props: ["extendedUserProfileField"], +}; +</script> + +<style scoped> +iframe { + border: none; + width: 100%; + height: 50vh; +} +</style> 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 2a17d614..d83872e7 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 @@ -1,19 +1,18 @@ <template> - <b-form-group - :label="extendedUserProfileField.name" - :description="extendedUserProfileField.help_text" - > + <extended-user-profile-field-editor v-bind="$props"> <b-form-checkbox-group v-model="value" :options="options" stacked ></b-form-checkbox-group> - </b-form-group> + </extended-user-profile-field-editor> </template> <script> import { mapGetters, mapMutations } from "vuex"; +import ExtendedUserProfileFieldEditor from "./ExtendedUserProfileFieldEditor.vue"; export default { + components: { ExtendedUserProfileFieldEditor }, props: ["extendedUserProfileField"], computed: { ...mapGetters("extendedUserProfile", ["getMultiChoiceValue"]), 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 bf95019f..a78fc028 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,15 +1,14 @@ <template> - <b-form-group - :label="extendedUserProfileField.name" - :description="extendedUserProfileField.help_text" - > + <extended-user-profile-field-editor v-bind="$props"> <b-form-select v-model="value" :options="options"></b-form-select> - </b-form-group> + </extended-user-profile-field-editor> </template> <script> import { mapGetters, mapMutations } from "vuex"; +import ExtendedUserProfileFieldEditor from "./ExtendedUserProfileFieldEditor.vue"; export default { + components: { ExtendedUserProfileFieldEditor }, props: ["extendedUserProfileField"], computed: { ...mapGetters("extendedUserProfile", ["getSingleChoiceValue"]), diff --git a/django_airavata/apps/auth/static/django_airavata_auth/js/components/ExtendedUserProfileTextFieldEditor.vue b/django_airavata/apps/auth/static/django_airavata_auth/js/components/ExtendedUserProfileTextFieldEditor.vue index 8f2b9989..c9a96488 100644 --- a/django_airavata/apps/auth/static/django_airavata_auth/js/components/ExtendedUserProfileTextFieldEditor.vue +++ b/django_airavata/apps/auth/static/django_airavata_auth/js/components/ExtendedUserProfileTextFieldEditor.vue @@ -1,30 +1,29 @@ <template> - <b-form-group - :label="extendedUserProfileField.name" - :description="extendedUserProfileField.help_text" - > + <extended-user-profile-field-editor v-bind="$props"> <b-form-input v-model="value" /> - </b-form-group> + </extended-user-profile-field-editor> </template> <script> -import { mapGetters, mapMutations } from 'vuex'; +import { mapGetters, mapMutations } from "vuex"; +import ExtendedUserProfileFieldEditor from "./ExtendedUserProfileFieldEditor.vue"; export default { + components: { ExtendedUserProfileFieldEditor }, props: ["extendedUserProfileField"], computed: { - ...mapGetters('extendedUserProfile', ['getTextValue']), + ...mapGetters("extendedUserProfile", ["getTextValue"]), value: { get() { return this.getTextValue(this.extendedUserProfileField.id); }, set(value) { - this.setTextValue({value, id: this.extendedUserProfileField.id}) - } - } + this.setTextValue({ value, id: this.extendedUserProfileField.id }); + }, + }, }, methods: { - ...mapMutations('extendedUserProfile', ['setTextValue']), - } + ...mapMutations("extendedUserProfile", ["setTextValue"]), + }, }; </script> diff --git a/django_airavata/apps/auth/static/django_airavata_auth/js/components/ExtendedUserProfileUserAgreementFieldEditor.vue b/django_airavata/apps/auth/static/django_airavata_auth/js/components/ExtendedUserProfileUserAgreementFieldEditor.vue index 4857c4e3..f21965be 100644 --- a/django_airavata/apps/auth/static/django_airavata_auth/js/components/ExtendedUserProfileUserAgreementFieldEditor.vue +++ b/django_airavata/apps/auth/static/django_airavata_auth/js/components/ExtendedUserProfileUserAgreementFieldEditor.vue @@ -1,17 +1,16 @@ <template> - <b-form-group - :label="extendedUserProfileField.name" - :description="extendedUserProfileField.help_text" - > + <extended-user-profile-field-editor v-bind="$props"> <b-form-checkbox v-model="value" :unchecked-value="false"> {{ extendedUserProfileField.checkbox_label }} </b-form-checkbox> - </b-form-group> + </extended-user-profile-field-editor> </template> <script> import { mapGetters, mapMutations } from "vuex"; +import ExtendedUserProfileFieldEditor from "./ExtendedUserProfileFieldEditor.vue"; export default { + components: { ExtendedUserProfileFieldEditor }, props: ["extendedUserProfileField"], computed: { ...mapGetters("extendedUserProfile", ["getUserAgreementValue"]), @@ -32,5 +31,3 @@ export default { }, }; </script> - -<style></style> diff --git a/django_airavata/apps/auth/static/django_airavata_auth/js/components/UserProfileEditor.vue b/django_airavata/apps/auth/static/django_airavata_auth/js/components/UserProfileEditor.vue index 8816b93e..68f423e8 100644 --- a/django_airavata/apps/auth/static/django_airavata_auth/js/components/UserProfileEditor.vue +++ b/django_airavata/apps/auth/static/django_airavata_auth/js/components/UserProfileEditor.vue @@ -101,7 +101,7 @@ export default { }, valid() { return !this.$v.$invalid; - } + }, }, validations() { return { diff --git a/django_airavata/apps/auth/static/django_airavata_auth/js/containers/UserProfileContainer.vue b/django_airavata/apps/auth/static/django_airavata_auth/js/containers/UserProfileContainer.vue index 4d44405f..3955c151 100644 --- a/django_airavata/apps/auth/static/django_airavata_auth/js/containers/UserProfileContainer.vue +++ b/django_airavata/apps/auth/static/django_airavata_auth/js/containers/UserProfileContainer.vue @@ -23,7 +23,9 @@ /> <!-- TODO: include both forms in the same card --> <!-- include extended-user-profile-editor if there are extendedUserProfileFields --> - <extended-user-profile-editor v-if="extendedUserProfileFields && extendedUserProfileFields.length > 0"/> + <extended-user-profile-editor + v-if="extendedUserProfileFields && extendedUserProfileFields.length > 0" + /> <b-link v-if="user && user.complete" class="text-muted small" @@ -37,7 +39,7 @@ import UserProfileEditor from "../components/UserProfileEditor.vue"; import { notifications } from "django-airavata-common-ui"; import { mapActions, mapGetters } from "vuex"; -import ExtendedUserProfileEditor from '../components/ExtendedUserProfileEditor.vue'; +import ExtendedUserProfileEditor from "../components/ExtendedUserProfileEditor.vue"; export default { components: { UserProfileEditor, ExtendedUserProfileEditor }, @@ -75,7 +77,11 @@ export default { "updateUser", "resendEmailVerification", ]), - ...mapActions("extendedUserProfile", ["loadExtendedUserProfileFields", "loadExtendedUserProfileValues", "saveExtendedUserProfileValues"]), + ...mapActions("extendedUserProfile", [ + "loadExtendedUserProfileFields", + "loadExtendedUserProfileValues", + "saveExtendedUserProfileValues", + ]), async onSave() { // TODO: only save if both standard and extended user profiles are valid this.saveExtendedUserProfileValues(); diff --git a/django_airavata/apps/auth/static/django_airavata_auth/js/entry-user-profile.js b/django_airavata/apps/auth/static/django_airavata_auth/js/entry-user-profile.js index 182c6ced..382bfcd2 100644 --- a/django_airavata/apps/auth/static/django_airavata_auth/js/entry-user-profile.js +++ b/django_airavata/apps/auth/static/django_airavata_auth/js/entry-user-profile.js @@ -2,10 +2,10 @@ import { components, entry } from "django-airavata-common-ui"; import UserProfileContainer from "./containers/UserProfileContainer.vue"; import createStore from "./store"; -entry(Vue => { +entry((Vue) => { const store = createStore(Vue); - new Vue({ - store, - render: (h) => h(components.MainLayout, [h(UserProfileContainer)]), - }).$mount("#user-profile"); + new Vue({ + store, + render: (h) => h(components.MainLayout, [h(UserProfileContainer)]), + }).$mount("#user-profile"); });
