✨ Update membership

Author: AnandChowdhary

layouts/default.vue

@@ -248,6 +248,9 @@ a {
       margin-left: 0.5rem;
     }
   }
+  th {
+    border-bottom: 2px solid rgba(180, 0, 240, 0.04);
+  }
   tr:nth-child(even) {
     background-color: rgba(180, 0, 240, 0.04);
   }

pages/manage/members/_id.vue

@@ -0,0 +1,95 @@
+<template>
+  <main>
+    <Manage>
+      <h1>Edit Membership</h1>
+      <div v-if="membership">
+        <h2>{{ membership.user.name }}</h2>
+      </div>
+      <Loading v-if="inviting" />
+      <form v-else @submit.prevent="inviteMember">
+        <Select
+          :value="newUserRole"
+          label="Role"
+          :options="membershipRoles"
+          required
+          @input="val => (newUserRole = val)"
+        />
+        <button class="button">Update membership</button>
+      </form>
+    </Manage>
+  </main>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Watch } from "vue-property-decorator";
+import { mapGetters } from "vuex";
+import Manage from "@/components/Manage.vue";
+import Loading from "@/components/Loading.vue";
+import TimeAgo from "@/components/TimeAgo.vue";
+import Input from "@/components/form/Input.vue";
+import Select from "@/components/form/Select.vue";
+import Checkbox from "@/components/form/Checkbox.vue";
+import { getAllCountries } from "countries-and-timezones";
+import locale from "@/locales/en";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faTrash, faPencilAlt } from "@fortawesome/free-solid-svg-icons";
+import { Membership } from "../../../types/manage";
+library.add(faTrash, faPencilAlt);
+
+@Component({
+  components: {
+    Manage,
+    TimeAgo,
+    Loading,
+    Input,
+    Select,
+    Checkbox,
+    FontAwesomeIcon
+  },
+  computed: mapGetters({
+    members: "manage/members"
+  })
+})
+export default class ManageMembers extends Vue {
+  members!: any;
+  membership: Membership | null = null;
+  inviting = "";
+  membershipRoles = locale.membershipRoles;
+  newUserRole = 3;
+
+  private mounted() {
+    this.inviting = "Loading member details";
+    this.$store
+      .dispatch("manage/getMembership", this.$route.params.id)
+      .then(membership => {
+        this.membership = membership;
+        this.newUserRole = membership.role;
+      })
+      .catch(() => {})
+      .finally(() => (this.inviting = ""));
+  }
+
+  private inviteMember() {
+    this.inviting = "Updating member details";
+    this.$store
+      .dispatch("manage/updateMembership", {
+        id: this.$route.params.id,
+        role: this.newUserRole
+      })
+      .then(() => {})
+      .catch(() => {})
+      .finally(() => (this.inviting = ""));
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.user-image {
+  height: 2rem;
+  border-radius: 100%;
+  width: 2rem;
+  vertical-align: middle;
+  margin-right: 0.5rem;
+}
+</style>

pages/manage/members.vue renamed to pages/manage/members/index.vue

@@ -24,21 +24,31 @@
             <td>{{ membershipRoles[member.role] || member.role }}</td>
             <td class="text text--align-right">
               <button
-                data-balloon="Remove from organization"
+                data-balloon="Remove"
                 data-balloon-pos="up"
                 class="button button--color-danger button--type-icon"
-                @click="deleteMembership(membership.id)"
+                @click="deleteMembership(member.id)"
               >
                 <font-awesome-icon
-                  title="Remove from organization"
+                  title="Remove"
                   class="icon icon--color-danger"
                   icon="trash"
                   fixed-width
                 />
               </button>
-              <button class="button">
-                Visit &rarr;
-              </button>
+              <router-link
+                :to="`/manage/members/${member.id}`"
+                data-balloon="Edit"
+                data-balloon-pos="up"
+                class="button button--type-icon"
+              >
+                <font-awesome-icon
+                  title="Edit"
+                  class="icon"
+                  icon="pencil-alt"
+                  fixed-width
+                />
+              </router-link>
             </td>
           </tr>
         </tbody>
@@ -91,10 +101,10 @@ import { getAllCountries } from "countries-and-timezones";
 import locale from "@/locales/en";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { library } from "@fortawesome/fontawesome-svg-core";
-import { faTrash } from "@fortawesome/free-solid-svg-icons";
-import { User } from "../../types/auth";
-import { Email } from "../../types/settings";
-library.add(faTrash);
+import { faTrash, faPencilAlt } from "@fortawesome/free-solid-svg-icons";
+import { User } from "@/types/auth";
+import { Email } from "@/types/settings";
+library.add(faTrash, faPencilAlt);
 
 @Component({
   components: {
@@ -141,6 +151,15 @@ export default class ManageMembers extends Vue {
       .catch(() => {})
       .finally(() => (this.inviting = false));
   }
+
+  private deleteMembership(id: number) {
+    this.loading = "Deleting membership";
+    this.$store
+      .dispatch("manage/deleteMembership", id)
+      .then(() => {})
+      .catch(() => {})
+      .finally(() => (this.loading = ""));
+  }
 }
 </script>
 

store/manage.ts

@@ -44,6 +44,19 @@ export const actions: ActionTree<RootState, RootState> = {
       context
     );
     return dispatch("getMembers");
+  },
+  async deleteMembership({ dispatch }, context) {
+    await this.$axios.delete(`/memberships/${context}`);
+    return dispatch("getMembers");
+  },
+  async getMembership(actions, context) {
+    return (await this.$axios.get(`/memberships/${context}`)).data;
+  },
+  async updateMembership({ dispatch }, context) {
+    const data = JSON.parse(JSON.stringify(context));
+    delete data.id;
+    await this.$axios.patch(`/memberships/${context.id}`, data);
+    return dispatch("getMembership", context.id);
   }
 };