feat: Dashboard users edit page

src/modules/users.js

@@ -96,3 +96,20 @@ export const checkUserDashboardAccess = async () => {
     }
   });
 };
+
+/**
+ * DASHBOARD: Get users data
+ *
+ * @param {string} userId user of which you want to access data of
+ */
+export const getUserData = async ({ userId }) => {
+  const token = store.getters["user/getAuthToken"];
+
+  return await axios({
+    method: "GET",
+    url: `/api/v1/users/${userId}/get`,
+    headers: {
+      Authorization: `Bearer ${token}`
+    }
+  });
+};

src/pages/dashboard/users/Edit.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="user-edit">
+    <header class="form-header">
+      <div class="breadcrumbs">
+        <router-link to="/dashboard/users" class="breadcrum-item">
+          Users
+        </router-link>
+        <div class="breadcrum-divider">
+          /
+        </div>
+        <h5 class="breadcrum-item">
+          {{ pageTitle }}
+        </h5>
+      </div>
+
+      <Button
+        type="primary"
+        :loading="processing"
+        :disabled="false"
+        @click="updateUser"
+      >
+        Save
+      </Button>
+    </header>
+
+    <!-- Here two options can be added: -->
+    <!-- a user with permission can directly verfiy a user or request the user to verify their email by sending them a verification email -->
+    <!-- shows when user is not verified -->
+    <flash v-if="!user.isVerified">
+      <strong>{{ user.name || user.username }}</strong> account is not verified.
+    </flash>
+
+    <!-- TODO: Add option to block & unblock -->
+    <!-- shows when user is blocked -->
+    <flash v-if="user.isBlocked" type="danger">
+      <strong>{{ user.name || user.username }}</strong> account is not blocked.
+    </flash>
+
+    <div class="form-section">
+      <div class="form-columns">
+        <div class="form-column">
+          <div class="card user-profile">
+            <div>
+              <img
+                class="avatar"
+                :src="user.avatar"
+                :alt="user.name || user.username"
+              >
+            </div>
+
+            <div class="info">
+              <h3>
+                {{ user.name }}
+              </h3>
+
+              <p>
+                {{ user.username }}
+              </p>
+
+              <span>
+                Created on {{ $date(user.createdAt).format('MMMM DD, YYYY') }}
+              </span>
+            </div>
+          </div>
+
+          <l-text
+            v-model="user.username"
+            label="Username"
+            placeholder="Username"
+          />
+
+          <l-text
+            v-model="user.name"
+            label="Name"
+            placeholder="Name"
+          />
+
+          <l-text
+            v-model="user.email"
+            label="Email"
+            placeholder="Email"
+            :disabled="true"
+          />
+        </div>
+
+        <div class="form-column">
+          <l-textarea
+            v-model="user.notes"
+            label="Notes (not visible to user)"
+            placeholder=""
+            rows="6"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// modules
+import {
+  getUserData
+} from "../../../modules/users";
+
+// components
+import Button from "../../../components/Button";
+import Flash from "../../../components/UI/Flash";
+import LText from "../../../components/input/LText";
+import LTextarea from "../../../components/input/LTextarea";
+
+export default {
+  name: "DashboardUsersEdit",
+  components: {
+    Button,
+    Flash,
+    LText,
+    LTextarea
+  },
+  data() {
+    return {
+      user: {
+        userId: "",
+        name: "",
+        email: "",
+        username: "",
+        avatar: "",
+        isVerified: false,
+        isBlocked: false,
+        isOwner: false,
+        notes: "",
+        createdAt: ""
+      },
+      processing: false
+    };
+  },
+  computed: {
+    pageTitle() {
+      return this.user.name || this.user.username || this.user.userId;
+    }
+  },
+  created() {
+    this.getUserData();
+  },
+  methods: {
+    async getUserData() {
+      try {
+        const response = await getUserData({
+          userId: this.$route.params.id
+        });
+
+        console.log("response");
+        console.log(response.data.user);
+
+        const user = response.data.user;
+
+        this.user.userId = user.userId;
+        this.user.name = user.name;
+        this.user.username = user.username;
+        this.user.email = user.email;
+        this.user.avatar = user.avatar;
+        this.user.isBlocked = user.isBlocked;
+        this.user.isVerified = user.isVerified;
+        this.user.isOwner = user.isOwner;
+        this.user.notes = user.notes;
+        this.user.createdAt = user.createdAt;
+
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    async updateUser() {
+      try {
+        // const response = await
+      } catch (error) {
+        console.log(error);
+      }
+    }
+  },
+  metaInfo() {
+    return {
+      title: `${this.pageTitle} · Users · Dashboard`
+    };
+  }
+};
+</script>

src/pages/dashboard/Users.vue → src/pages/dashboard/users/Index.vue

@@ -21,10 +21,11 @@
         </div>
         <div v-if="isDeveloperMode" class="table-header-item users-table-votes" />
       </template>
-      <div
+      <router-link
         v-for="user in users"
         :key="user.userId"
         class="table-row"
+        :to="`/dashboard/users/${user.userId}/edit`"
       >
         <div class="table-data users-table-user">
           <div class="users-table-user-avatar">
@@ -63,7 +64,7 @@
             </template>
           </dropdown-wrapper>
         </div>
-      </div>
+      </router-link>
       <infinite-loading @infinite="getUsers">
         <div slot="spinner" class="loader-container">
           <loader />
@@ -85,15 +86,15 @@ import {
 import InfiniteLoading from "vue-infinite-loading";
 
 // modules
-import { getAllUsers } from "../../modules/users";
+import { getAllUsers } from "../../../modules/users";
 
 // components
-import Table from "../../components/Table";
-import Avatar from "../../components/Avatar";
-import Loader from "../../components/Loader";
-import DropdownWrapper from "../../components/dropdown/DropdownWrapper";
-import Dropdown from "../../components/dropdown/Dropdown";
-import DropdownItem from "../../components/dropdown/DropdownItem";
+import Table from "../../../components/Table";
+import Avatar from "../../../components/Avatar";
+import Loader from "../../../components/Loader";
+import DropdownWrapper from "../../../components/dropdown/DropdownWrapper";
+import Dropdown from "../../../components/dropdown/Dropdown";
+import DropdownItem from "../../../components/dropdown/DropdownItem";
 
 export default {
   name: "DashboardUsers",

src/routes.js

@@ -155,7 +155,12 @@ const routes = [
       {
         path: "users",
         name: "Dashbord users",
-        component: require("./pages/dashboard/Users").default
+        component: require("./pages/dashboard/users/Index").default
+      },
+      {
+        path: "users/:id/edit",
+        name: "Dashbord users edit",
+        component: require("./pages/dashboard/users/Edit").default
       },
       {
         path: "settings/general",

src/styles/pages/dashboard/users.sass

@@ -15,3 +15,27 @@
 
 	.users-table-votes
 		flex: 1
+
+// user edit page
+.user-profile
+	display: flex
+	align-items: flex-start
+	margin-bottom: 1rem
+
+	.avatar
+		border-radius: 50%
+		display: flex
+
+	.info
+		margin-left: 1rem
+
+		h3
+			margin-bottom: 0
+
+		p
+			font-weight: 500
+			margin-bottom: 0.25rem
+
+		span
+			font-size: 0.875rem
+			color: $gray-40