You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airavata.apache.org by ma...@apache.org on 2018/11/15 16:13:19 UTC
[airavata-django-portal] 06/10: AIRAVATA-2711 Switch member editor
to table layout
This is an automated email from the ASF dual-hosted git repository.
machristie pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/airavata-django-portal.git
commit bc8b0efa1ccb267b4e47bdf58128c4d3226e091b
Author: Marcus Christie <ma...@iu.edu>
AuthorDate: Wed Nov 14 12:44:51 2018 -0500
AIRAVATA-2711 Switch member editor to table layout
---
.../js/group_components/GroupEditor.vue | 107 ++++++++++---------
.../js/group_components/GroupMembersEditor.vue | 113 +++++++++++++++++++++
2 files changed, 166 insertions(+), 54 deletions(-)
diff --git a/django_airavata/apps/groups/static/django_airavata_groups/js/group_components/GroupEditor.vue b/django_airavata/apps/groups/static/django_airavata_groups/js/group_components/GroupEditor.vue
index 5f7f205..cb08f20 100644
--- a/django_airavata/apps/groups/static/django_airavata_groups/js/group_components/GroupEditor.vue
+++ b/django_airavata/apps/groups/static/django_airavata_groups/js/group_components/GroupEditor.vue
@@ -16,9 +16,8 @@
</b-form-textarea>
</b-form-group>
- <b-form-group id="group3" label="Add Members:" label-for="members">
- <autocomplete id="members" :suggestions="suggestions" v-model="localGroup.members"/>
- </b-form-group>
+ <group-members-editor :members="localGroup.members" :admins="localGroup.admins"
+ @add-member="addGroupMember" @remove-member="removeGroupMember" />
<b-button @click="submitForm" variant="primary">Submit</b-button>
</b-form>
@@ -26,60 +25,60 @@
</template>
<script>
+import { models, services } from "django-airavata-api";
+import GroupMembersEditor from "./GroupMembersEditor.vue";
-import { models, services } from 'django-airavata-api'
-import { components as comps } from 'django-airavata-common-ui'
-
-const Autocomplete = comps.Autocomplete;
export default {
- props: {
- group: {
- type: models.Group,
- required: true,
- },
- },
- data () {
- return {
- localGroup: this.group.clone(),
- showDismissibleAlert: {'variant':'success', 'message':'no data', 'dismissable':false},
- userProfiles: [],
- }
- },
- components: {
- Autocomplete
- },
- methods: {
- submitForm () {
- let saveOperation = (this.localGroup.id)
- ? services.GroupService.update({lookup: this.localGroup.id, data: this.localGroup})
- : services.GroupService.create({data: this.localGroup});
- saveOperation
- .then(group => {
- this.$emit('saved', group);
- })
- .catch(error => {
- this.showDismissibleAlert.dismissable = true;
- this.showDismissibleAlert.message = "Error: "+error.data;
- this.showDismissibleAlert.variant = "danger";
- });
- },
- },
- computed: {
- suggestions: function() {
- return this.userProfiles.map(userProfile => {
- return {
- id: userProfile.airavataInternalUserId,
- name: userProfile.firstName + ' ' + userProfile.lastName + ' (' + userProfile.userId + ')'
- }
- })
- }
+ props: {
+ group: {
+ type: models.Group,
+ required: true
+ }
+ },
+ data() {
+ return {
+ localGroup: this.group.clone(),
+ showDismissibleAlert: {
+ variant: "success",
+ message: "no data",
+ dismissable: false
+ },
+ userProfiles: []
+ };
+ },
+ components: {
+ GroupMembersEditor
+ },
+ methods: {
+ submitForm() {
+ let saveOperation = this.localGroup.id
+ ? services.GroupService.update({
+ lookup: this.localGroup.id,
+ data: this.localGroup
+ })
+ : services.GroupService.create({ data: this.localGroup });
+ saveOperation
+ .then(group => {
+ this.$emit("saved", group);
+ })
+ .catch(error => {
+ this.showDismissibleAlert.dismissable = true;
+ this.showDismissibleAlert.message = "Error: " + error.data;
+ this.showDismissibleAlert.variant = "danger";
+ });
},
- mounted: function () {
- services.UserProfileService.list()
- .then(userProfiles => {
- this.userProfiles = userProfiles;
- });
+ addGroupMember(airavataInternalUserId) {
+ this.localGroup.members.push(airavataInternalUserId);
},
-}
+ removeGroupMember(airavataInternalUserId) {
+ const index = this.localGroup.members.indexOf(airavataInternalUserId);
+ this.localGroup.members.splice(index, 1);
+ const adminIndex = this.localGroup.admins.indexOf(airavataInternalUserId);
+ if (adminIndex >= 0) {
+ this.localGroup.admins.splice(adminIndex, 1);
+ }
+ }
+ }
+};
</script>
diff --git a/django_airavata/apps/groups/static/django_airavata_groups/js/group_components/GroupMembersEditor.vue b/django_airavata/apps/groups/static/django_airavata_groups/js/group_components/GroupMembersEditor.vue
new file mode 100644
index 0000000..6582645
--- /dev/null
+++ b/django_airavata/apps/groups/static/django_airavata_groups/js/group_components/GroupMembersEditor.vue
@@ -0,0 +1,113 @@
+<template>
+ <div>
+ <b-form-group label="Add members" labelFor="user-autocomplete">
+ <autocomplete-text-input id="user-autocomplete" :suggestions="suggestions" @selected="suggestionSelected" />
+ </b-form-group>
+ <b-table v-if="membersCount > 0" hover :items="currentMembers" :fields="fields">
+ <template slot="remove" slot-scope="data">
+ <b-link @click="removeMember(data.item)">
+ <span class="fa fa-trash"></span>
+ </b-link>
+ </template>
+ </b-table>
+ </div>
+</template>
+
+<script>
+import { services } from "django-airavata-api";
+import { components } from "django-airavata-common-ui";
+
+export default {
+ name: "group-members-editor",
+ components: {
+ "autocomplete-text-input": components.AutocompleteTextInput
+ },
+ props: {
+ members: {
+ type: Array,
+ required: true
+ },
+ admins: {
+ type: Array,
+ required: true
+ }
+ },
+ data() {
+ return {
+ userProfiles: null
+ };
+ },
+ computed: {
+ suggestions() {
+ if (!this.userProfiles) {
+ return [];
+ }
+ // TODO: filter out current members
+ return this.userProfiles.map(userProfile => {
+ return {
+ id: userProfile.airavataInternalUserId,
+ name:
+ userProfile.firstName +
+ " " +
+ userProfile.lastName +
+ " (" +
+ userProfile.userId +
+ ")"
+ };
+ });
+ },
+ fields() {
+ return [
+ { key: "name", label: "Name" },
+ { key: "username", label: "Username" },
+ { key: "email", label: "Email" },
+ { key: "role", label: "Role" },
+ { key: "remove", label: "Remove" }
+ ];
+ },
+ userProfilesMap() {
+ if (!this.userProfiles) {
+ return null;
+ }
+ const result = {};
+ this.userProfiles.forEach(up => {
+ result[up.airavataInternalUserId] = up;
+ });
+ return result;
+ },
+ currentMembers() {
+ if (!this.userProfilesMap) {
+ return [];
+ }
+ return this.members.map(m => {
+ const userProfile = this.userProfilesMap[m];
+ const isAdmin = this.admins.indexOf(m) >= 0;
+ return {
+ id: m,
+ name: userProfile.firstName + " " + userProfile.lastName,
+ username: userProfile.userId,
+ email: userProfile.email,
+ role: isAdmin ? "ADMIN" : "MEMBER"
+ };
+ });
+ },
+ membersCount() {
+ return this.members.length;
+ }
+ },
+ created() {
+ services.UserProfileService.list().then(userProfiles => {
+ this.userProfiles = userProfiles;
+ });
+ },
+ methods: {
+ suggestionSelected(suggestion) {
+ this.$emit('add-member', suggestion.id);
+ },
+ removeMember(item) {
+ this.$emit('remove-member', item.id);
+ }
+ }
+};
+</script>
+