Add UI to add/remove members to/from projects (#83)

Author: ogoidmatos

frontend/src/components/projects/ProjectModal.vue

@@ -0,0 +1,135 @@
+<template>
+  <v-dialog v-model="openDialog" max-width="500px" scrollable>
+    <v-card>
+      <v-card-title>Project Members for {{ project && project.name }}</v-card-title>
+      <v-card-text style="max-height: 600px">
+        <div v-if="project && project.members">
+          <v-container class="py-0">
+            <v-row align="center" justify="start">
+              <v-col v-for="(selection, i) in selections" :key="selection.id" class="shrink">
+                <v-chip close @click:close="removeProjectMember(selection.id, i)">
+                  {{ selection.name }}
+                </v-chip>
+              </v-col>
+
+              <v-col v-if="!allSelected" cols="12">
+                <v-text-field
+                  ref="search"
+                  v-model="search"
+                  full-width
+                  hide-details
+                  label="Search"
+                  single-line
+                ></v-text-field>
+              </v-col>
+            </v-row>
+          </v-container>
+
+          <v-list>
+            <template v-for="item in list">
+              <v-list-item
+                v-if="!selected.some((e) => e.id == item.id)"
+                :key="item.name"
+                @click="addProjectMember(item.id, item)"
+              >
+                <v-list-item-title v-text="item.name"></v-list-item-title>
+              </v-list-item>
+            </template>
+          </v-list>
+        </div>
+        <div v-else class="d-flex justify-center">
+          <v-progress-circular color="primary" indeterminate />
+        </div>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+import { mapActions, mapGetters, mapState } from 'vuex';
+export default {
+  model: {
+    prop: 'projectId',
+    event: 'change',
+  },
+  props: {
+    projectId: { type: Number, default: null },
+  },
+  data: function () {
+    return {
+      search: '',
+      selected: [],
+    };
+  },
+  computed: {
+    ...mapState('members', ['members']),
+    ...mapGetters('projects', ['getProjectMembers']),
+    openDialog: {
+      get: function () {
+        return this.projectId !== null;
+      },
+      set: function (newValue) {
+        this.$emit('change', newValue ? newValue : null);
+      },
+    },
+    project() {
+      if (!this.projectId) return null;
+      const project = this.getProjectMembers(this.projectId);
+      // Fetch full project data if data is not in Vuex store
+      if (!project.members) this.fetchProject(this.projectId);
+      this.sel(project);
+      return project;
+    },
+    allSelected() {
+      return this.selected.length === this.members.length;
+    },
+    list() {
+      const search = this.search.toLowerCase();
+
+      if (!search) return this.members;
+
+      return this.members.filter((item) => {
+        const text = item.name.toLowerCase();
+
+        return text.indexOf(search) > -1;
+      });
+    },
+    selections() {
+      const selections = [];
+
+      for (const selection of this.selected) {
+        selections.push(selection);
+      }
+
+      return selections;
+    },
+  },
+  watch: {
+    selected() {
+      this.search = '';
+    },
+  },
+  methods: {
+    ...mapActions('projects', ['fetchProject', 'addMember', 'deleteMember']),
+    sel(data) {
+      this.selected = data.members;
+    },
+    removeProjectMember(memberId, i) {
+      this.deleteMember({
+        id: this.project.id,
+        memberId,
+      });
+      this.selected.splice(i, 1);
+    },
+    addProjectMember(memberId, item) {
+      this.selected.push(item);
+      this.addMember({
+        id: this.project.id,
+        memberId,
+      });
+    },
+  },
+};
+</script>
+
+<style></style>

frontend/src/components/projects/ProjectsTable.vue

@@ -79,9 +79,11 @@
             </v-card-actions>
           </v-card>
         </v-dialog>
+        <project-modal v-model="projectMembers" />
       </v-toolbar>
     </template>
     <template #[`item.actions`]="{ item }">
+      <v-icon small class="mr-2" @click="editMembers(item)"> mdi-account-multiple </v-icon>
       <v-icon small class="mr-2" @click="editItem(item)"> mdi-pencil </v-icon>
       <v-icon small @click="deleteItem(item)"> mdi-delete </v-icon>
     </template>
@@ -95,11 +97,14 @@
 
 <script>
 import { mapActions, mapState } from 'vuex';
+import ProjectModal from './ProjectModal.vue';
 
 export default {
+  components: { ProjectModal },
   data: () => ({
     dialog: false,
     dialogDelete: false,
+    projectMembers: null,
     search: '',
     headers: [
       { text: 'Project', value: 'name' },
@@ -201,7 +206,9 @@ export default {
       }
       this.close();
     },
-
+    editMembers(item) {
+      this.projectMembers = item.id;
+    },
     ...mapActions('projects', ['updateProject', 'createProject', 'deleteProject']),
   },
 };

frontend/src/store/projects.js

@@ -9,6 +9,7 @@ const getters = {
   getProjectsSelect: (state) => {
     return state.projects.map((project) => ({ text: project.name, value: project.id }));
   },
+  getProjectMembers: (state) => (id) => state.projects.find((project) => project.id == id),
 };
 
 const actions = {