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 2022/06/03 20:11:59 UTC
[airavata-django-portal] 06/08: AIRAVATA-3564 UI for reordering and deleting fields
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 70a657a1abfb61a9ae94f521a1aa29ca56c70d36
Author: Marcus Christie <ma...@apache.org>
AuthorDate: Fri Jun 3 14:44:11 2022 -0400
AIRAVATA-3564 UI for reordering and deleting fields
---
.../users/ExtendedUserProfileContainer.vue | 16 +++++++---
.../ExtendedUserProfileFieldEditor.vue | 36 +++++++++++++++++++++-
.../src/store/modules/extendedUserProfile.js | 25 +++++++++++++++
.../js/models/ExtendedUserProfileField.js | 7 +++++
4 files changed, 79 insertions(+), 5 deletions(-)
diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/components/users/ExtendedUserProfileContainer.vue b/django_airavata/apps/admin/static/django_airavata_admin/src/components/users/ExtendedUserProfileContainer.vue
index bf4ab5a5..66524084 100644
--- a/django_airavata/apps/admin/static/django_airavata_admin/src/components/users/ExtendedUserProfileContainer.vue
+++ b/django_airavata/apps/admin/static/django_airavata_admin/src/components/users/ExtendedUserProfileContainer.vue
@@ -5,11 +5,19 @@
<h1 class="h4 mb-4">Extended User Profile Editor</h1>
</div>
</div>
- <div v-for="field in extendedUserProfileFields" class="row" :key="field.id">
- <div class="col">
- <extended-user-profile-field-editor :extendedUserProfileField="field" />
+ <transition-group name="fade">
+ <div
+ v-for="field in extendedUserProfileFields"
+ class="row"
+ :key="field.key"
+ >
+ <div class="col">
+ <extended-user-profile-field-editor
+ :extendedUserProfileField="field"
+ />
+ </div>
</div>
- </div>
+ </transition-group>
<div class="row">
<div class="col">
<b-dropdown text="Add Field">
diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/components/users/field-editors/ExtendedUserProfileFieldEditor.vue b/django_airavata/apps/admin/static/django_airavata_admin/src/components/users/field-editors/ExtendedUserProfileFieldEditor.vue
index 186b07f6..e09a8d36 100644
--- a/django_airavata/apps/admin/static/django_airavata_admin/src/components/users/field-editors/ExtendedUserProfileFieldEditor.vue
+++ b/django_airavata/apps/admin/static/django_airavata_admin/src/components/users/field-editors/ExtendedUserProfileFieldEditor.vue
@@ -122,14 +122,31 @@
<b-button @click="addLink({ field: extendedUserProfileField })"
>Add Link</b-button
>
+ <b-button
+ @click="handleMoveUp({ field: extendedUserProfileField })"
+ :disabled="
+ extendedUserProfileFields.indexOf(extendedUserProfileField) === 0
+ "
+ >Move Up</b-button
+ >
+ <b-button
+ @click="handleMoveDown({ field: extendedUserProfileField })"
+ :disabled="
+ extendedUserProfileFields.indexOf(extendedUserProfileField) ===
+ extendedUserProfileFields.length - 1
+ "
+ >Move Down</b-button
+ >
+ <b-button @click="handleDelete" variant="danger">Delete</b-button>
</b-card>
</template>
<script>
-import { mapMutations } from "vuex";
+import { mapActions, mapGetters, mapMutations } from "vuex";
export default {
props: ["extendedUserProfileField"],
computed: {
+ ...mapGetters("extendedUserProfile", ["extendedUserProfileFields"]),
name: {
get() {
return this.extendedUserProfileField.name;
@@ -190,6 +207,8 @@ export default {
"updateLinkDisplayLink",
"updateLinkDisplayInline",
"deleteLink",
+ "updateFieldIndex",
+ "deleteField",
]),
handleChoiceDisplayTextChanged(choice, display_text) {
this.updateChoiceDisplayText({ choice, display_text });
@@ -230,6 +249,21 @@ export default {
handleLinkDeleted(link) {
this.deleteLink({ field: this.extendedUserProfileField, link });
},
+ handleMoveUp({ field }) {
+ let index = this.extendedUserProfileFields.indexOf(field);
+ index--;
+ this.updateFieldIndex({ field, index });
+ },
+ handleMoveDown({ field }) {
+ let index = this.extendedUserProfileFields.indexOf(field);
+ index++;
+ this.updateFieldIndex({ field, index });
+ },
+ handleDelete() {
+ this.deleteField({
+ field: this.extendedUserProfileField,
+ });
+ },
},
};
</script>
diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/store/modules/extendedUserProfile.js b/django_airavata/apps/admin/static/django_airavata_admin/src/store/modules/extendedUserProfile.js
index 1a577ad5..9ca0b917 100644
--- a/django_airavata/apps/admin/static/django_airavata_admin/src/store/modules/extendedUserProfile.js
+++ b/django_airavata/apps/admin/static/django_airavata_admin/src/store/modules/extendedUserProfile.js
@@ -2,6 +2,7 @@ import { models, services } from "django-airavata-api";
const state = () => ({
extendedUserProfileFields: null,
+ deletedExtendedUserProfileFields: [],
});
const getters = {
@@ -37,6 +38,14 @@ const actions = {
await services.ExtendedUserProfileFieldService.create({ data: field });
}
}
+ if (state.deletedExtendedUserProfileFields.length > 0) {
+ for (const field of state.deletedExtendedUserProfileFields) {
+ await services.ExtendedUserProfileFieldService.delete({
+ lookup: field.id,
+ });
+ }
+ commit("resetDeletedExtendedUserProfileFields");
+ }
// Reload the fields
dispatch("loadExtendedUserProfileFields");
},
@@ -143,6 +152,22 @@ const mutations = {
const index = field.links.indexOf(link);
field.links.splice(index, 1);
},
+ updateFieldIndex(state, { field, index }) {
+ const currentIndex = state.extendedUserProfileFields.indexOf(field);
+ state.extendedUserProfileFields.splice(currentIndex, 1);
+ state.extendedUserProfileFields.splice(index, 0, field);
+ },
+ deleteField(state, { field }) {
+ const index = state.extendedUserProfileFields.indexOf(field);
+ state.extendedUserProfileFields.splice(index, 1);
+ // later when we save we'll need to sync this delete with the server
+ if (field.id) {
+ state.deletedExtendedUserProfileFields.push(field);
+ }
+ },
+ resetDeletedExtendedUserProfileFields(state) {
+ state.deletedExtendedUserProfileFields = [];
+ },
};
export default {
diff --git a/django_airavata/apps/api/static/django_airavata_api/js/models/ExtendedUserProfileField.js b/django_airavata/apps/api/static/django_airavata_api/js/models/ExtendedUserProfileField.js
index 94d5f8f6..04938ca5 100644
--- a/django_airavata/apps/api/static/django_airavata_api/js/models/ExtendedUserProfileField.js
+++ b/django_airavata/apps/api/static/django_airavata_api/js/models/ExtendedUserProfileField.js
@@ -1,6 +1,7 @@
import BaseModel from "./BaseModel";
import ExtendedUserProfileFieldChoice from "./ExtendedUserProfileFieldChoice";
import ExtendedUserProfileFieldLink from "./ExtendedUserProfileFieldLink";
+import uuidv4 from "uuid/v4";
const FIELDS = [
"id",
@@ -36,7 +37,13 @@ const FIELDS = [
export default class ExtendedUserProfileField extends BaseModel {
constructor(data = {}) {
super(FIELDS, data);
+ this._key = data.key ? data.key : uuidv4();
}
+
+ get key() {
+ return this._key;
+ }
+
toJSON() {
const copy = Object.assign({}, this);
// Remove unnecessary properties