member management first step

webapp/components/Group/GroupMember.vue

@@ -1,56 +1,83 @@
 <template>
   <div>
     <ds-space><h3>Members</h3></ds-space>
-    <ds-table :data="GroupMembers" :fields="tableFields">
+    <ds-table :data="responseGroupMembersQuery" :fields="tableFields" condensed>
       <template slot="avatar">
-        <ds-avatar online size="small" name="Hans Peter"></ds-avatar>
+        <ds-avatar online size="small" :name="responseGroupMembersQuery.name"></ds-avatar>
       </template>
-      <template slot="loves" slot-scope="scope">
-        {{ scope.row.name }} loves {{ scope.row.loves }}
+      <template slot="myRoleInGroup" slot-scope="scope">
+        <ds-select
+          v-if="scope.row.myRoleInGroup !== 'owner'"
+          :options="['usual', 'admin']"
+          v-model="scope.row.myRoleInGroup"
+          :value="scope.row.myRoleInGroup"
+          @input="changeMemberRole(scope.row.id, scope.row.myRoleInGroup)"
+        ></ds-select>
       </template>
       <template slot="edit" slot-scope="scope">
-        <ds-button size="small" @click="deleteRow(scope.row)">delete</ds-button>
+        <ds-button
+          v-if="scope.row.myRoleInGroup !== 'owner'"
+          size="small"
+          @click="openModal(scope.row)"
+        >
+          delete
+        </ds-button>
       </template>
     </ds-table>
+    <ds-modal
+      v-if="isOpen"
+      v-model="isOpen"
+      title="delete member ?"
+      force
+      extended
+      confirm-label="delete member"
+      @confirm="deleteMember(memberId)"
+      cancel-label="Please not"
+    />
   </div>
 </template>
 <script>
+import { changeGroupMemberRoleMutation } from '~/graphql/groups.js'
+
 export default {
   name: 'GroupMember',
+  props: {
+    groupId: {
+      type: String,
+      required: true,
+    },
+    responseGroupMembersQuery: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+  },
   data() {
     return {
-      tableFields: ['avatar', 'name', 'type', 'loves', 'edit'],
-      GroupMembers: [
-        {
-          name: 'Rengar',
-          type: 'Jungler',
-          loves: 'Hide and seek',
-        },
-        {
-          name: 'Renekton',
-          type: 'Toplaner',
-          loves: 'Slice and dice',
-        },
-        {
-          name: 'Twitch',
-          type: 'ADC',
-          loves: 'Spray and pray',
-        },
-        {
-          name: 'Blitz',
-          type: 'Support',
-          loves: 'Hook you up',
-        },
-      ],
+      isOpen: false,
+      memberId: null,
+      tableFields: ['avatar', 'name', 'slug', 'myRoleInGroup', 'edit'],
     }
   },
   methods: {
-    deleteRow(row) {
-      const index = this.tableData.indexOf(row)
-      if (index > -1) {
-        this.tableData.splice(index, 1)
+    async changeMemberRole(id, value) {
+      try {
+        await this.$apollo.mutate({
+          mutation: changeGroupMemberRoleMutation,
+          variables: { groupId: this.groupId, userId: id, roleInGroup: value },
+        })
+        // this.$toast.success(this.$t('group.group-updated'))
+      } catch (error) {
+        this.$toast.error(error.message)
       }
     },
+    openModal(row) {
+      this.isOpen = true
+      this.memberId = row.id
+    },
+    deleteMember(id) {
+      alert('deleteMember: ' + id)
+    },
   },
 }
 </script>

webapp/pages/group/edit/_id/members.vue

@@ -1,16 +1,46 @@
 <template>
   <div>
-    <ds-container>
-      <group-member />
-    </ds-container>
+    <group-member :responseGroupMembersQuery="responseGroupMembersQuery" :groupId="group.id" />
   </div>
 </template>
 
 <script>
 import GroupMember from '~/components/Group/GroupMember'
+import { groupMembersQuery } from '~/graphql/groups.js'
+
 export default {
   components: {
     GroupMember,
   },
+  props: {
+    group: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      responseGroupMembersQuery: [],
+    }
+  },
+  methods: {
+    async groupMembersQueryList() {
+      try {
+        const response = await this.$apollo.query({
+          query: groupMembersQuery,
+          variables: { id: this.group.id },
+        })
+        this.responseGroupMembersQuery = response.data.GroupMembers
+      } catch (error) {
+        this.responseGroupMembersQuery = []
+      } finally {
+        this.pending = false
+      }
+    },
+  },
+  created() {
+    this.groupMembersQueryList()
+  },
 }
 </script>