add FE ListUsers, user component

Author: yennanliu

springEmployeeSystem/frontend/employee-system-ui/src/components/User/UserBox.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="card h-100 w-100">
+    <div class="card-body">
+      <router-link :to="{ name: 'ShowDetails', params: { id: user.id } }"
+        ><h5 class="card-title">{{ user.firstName }}</h5></router-link
+      >
+      <p class="card-text"><sup>$</sup>{{ user.email }}</p>
+      <!-- <router-link
+        id="edit-user"
+        :to="{ name: 'EditUser', params: { id: RouterLink.id } }"
+        v-show="$route.name == 'AdminUser'"
+      >
+        Edit
+      </router-link> -->
+    </div>
+  </div>
+</template>
+
+  <!-- NOTE !!!
+
+  Will only show product edit button when route name is "AdminProduct"
+
+  e.g. 
+        <router-link
+          id="edit-product"
+          :to="{ name: 'EditProduct', params: { id: product.id } }"
+          v-show="$route.name == 'AdminProduct'"
+        >
+          Edit
+        </router-link>
+  -->
+  
+  <script>
+export default {
+  name: "UserBox",
+  props: ["user"],
+  methods: {
+    showDetails() {
+      this.$router.push({
+        name: "ShowDetails",
+        params: { id: this.user.id },
+      });
+    },
+  },
+};
+</script>
+  
+  <style scoped>
+.embed-responsive .card-img-top {
+  object-fit: cover;
+}
+
+a {
+  text-decoration: none;
+}
+
+.card-title {
+  color: #484848;
+  font-size: 1.1rem;
+  font-weight: 400;
+}
+
+.card-title:hover {
+  font-weight: bold;
+}
+
+.card-text {
+  font-size: 0.9rem;
+}
+
+#edit-product {
+  float: right;
+}
+</style>

springEmployeeSystem/frontend/employee-system-ui/src/router/User/ListUsers.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="container">
+    <div class="row">
+      <div class="col-12 text-center">
+        <!-- <h4 class="pt-3">{{ category.categoryName }}</h4> -->
+        <h1>This is User List</h1>
+        <h5>{{ msg }}</h5>
+      </div>
+    </div>
+
+    <div class="row">
+      <img
+        v-show="len == 0"
+        class="img-fluid"
+        src="../../assets/sorry.jpg"
+        alt="Sorry"
+      />
+      <div
+        v-for="product of category.products"
+        :key="product.id"
+        class="col-md-6 col-xl-4 col-12 pt-3 justify-content-around d-flex"
+      >
+        <UserBox :user="user"> </UserBox>
+      </div>
+    </div>
+  </div>
+</template>
+  
+  <script>
+import UserBox from "../../components/User/UserBox";
+export default {
+  name: "ListUsers",
+  data() {
+    return {
+      id: null,
+      categoryIndex: null,
+      category: {},
+      len: 0,
+      msg: null,
+    };
+  },
+  components: { UserBox },
+  props: ["baseURL", "categories"],
+  mounted() {
+    this.id = this.$route.params.id;
+    // this.categoryIndex = this.categories.findIndex(
+    //   (category) => category.id == this.id
+    // );
+    // this.category = this.categories[this.categoryIndex];
+
+    // this.len = this.category.products.length;
+    if (this.len == 0) {
+      this.msg = "Sorry, no products found";
+    } else if (this.len == 1) {
+      this.msg = "Only 1 product found";
+    } else {
+      this.msg = this.len + " products found";
+    }
+  },
+};
+</script>
+  
+  <style scoped>
+h4 {
+  font-family: "Roboto", sans-serif;
+  color: #484848;
+  font-weight: 700;
+}
+
+h5 {
+  font-family: "Roboto", sans-serif;
+  color: #686868;
+  font-weight: 300;
+}
+</style>