Add Trainee List View

src/components/LoginForm.vue

@@ -77,15 +77,13 @@ export default {
       };
       fetch(APISetting.endpoints.auth.login.trainer, APISetting.settings.post(reqPayload))
         .then((res) => {
-          if ([200, 201, 400, 404].includes(res.status)) {
-            return Promise.all([res.json(), res]);
-          }
+          if ([200, 201, 400, 404].includes(res.status)) return Promise.all([res.json(), res]);
           // If response status is not equal to 200, 201, 400, or 404, go to catch.
           throw new Error('알 수 없는 응답입니다.');
         })
         .then((values) => {
           const [json, res] = values;
-          if (res.status === 200 || res.status === 201) {
+          if ([200, 201].includes(res.status)) {
             const { user } = json;
             this.setLogin(user);
             this.$router.push('/main');

src/components/NavigationDrawer.vue

@@ -3,7 +3,26 @@
     app
     clipped
     :value="isNavDrawerVisible"
-  ></v-navigation-drawer>
+  >
+    <v-list>
+      <v-subheader>회원</v-subheader>
+      <v-list-item-group
+        color="primary"
+      >
+        <v-list-item
+          link
+          :to="{ name: 'TraineeList' }"
+        >
+          <v-list-item-icon>
+            <v-icon>mdi-account-group</v-icon>
+          </v-list-item-icon>
+          <v-list-item-content>
+            <v-list-item-title>회원 목록</v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+      </v-list-item-group>
+    </v-list>
+  </v-navigation-drawer>
 </template>
 
 <script>

src/router/index.js

@@ -10,14 +10,19 @@ Vue.use(VueRouter);
 const routes = [
   {
     path: '/',
-    name: 'login',
+    name: 'Login',
     component: Login,
   },
   {
     path: '/main',
-    name: 'main',
+    name: 'Main',
     component: () => import('@/views/Main.vue'),
   },
+  {
+    path: '/trainee',
+    name: 'TraineeList',
+    component: () => import('@/views/TraineeList.vue'),
+  },
 ];
 
 const router = new VueRouter({

src/settings/api.js

@@ -10,8 +10,22 @@ export default {
       },
       logout: `${host}/auth/logout`,
     },
+    trainee: {
+      list: `${host}/trainee`,
+      detail: id => (`${host}/trainee/${id}`),
+    },
   },
   settings: {
+    post: data => ({
+      body: data !== null ? JSON.stringify(data) : null,
+      credentials: 'include',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+      method: 'post',
+      mode: 'cors',
+    }),
     get: {
       credentials: 'include',
       headers: {
@@ -21,15 +35,14 @@ export default {
       method: 'get',
       mode: 'cors',
     },
-    post: data => ({
-      body: data !== null ? JSON.stringify(data) : null,
+    delete: {
       credentials: 'include',
       headers: {
         Accept: 'application/json',
         'Content-Type': 'application/json',
       },
-      method: 'post',
+      method: 'delete',
       mode: 'cors',
-    }),
+    },
   },
 };

src/views/Login.vue

 <template>
-  <div class="home">
+  <div class="login">
     <login-form></login-form>
   </div>
 </template>
@@ -8,7 +8,7 @@
 import LoginForm from '@/components/LoginForm.vue';
 
 export default {
-  name: 'home',
+  name: 'Login',
 
   components: {
     LoginForm,

src/views/TraineeList.vue

+<template>
+  <div class="trainee-list">
+    <v-card>
+      <v-card-title>회원 목록</v-card-title>
+      <v-card-text>
+        <v-row
+          justify="end"
+        >
+          <v-col
+            cols="12"
+            sm="4"
+            md="3"
+            lg="3"
+            xl="2"
+          >
+            <v-text-field
+              append-icon="mdi-magnify"
+              clearable
+              label="회원 검색"
+              v-model="traineeList.searchKeyword"
+            ></v-text-field>
+          </v-col>
+        </v-row>
+        <v-data-table
+          :headers="traineeList.headers"
+          item-key="id"
+          :items="traineeList.data"
+          :loading="isProcessing"
+          loading-text="데이터를 불러오는 중입니다."
+          :search="traineeList.searchKeyword"
+          no-results-text="일치하는 회원을 찾지 못했습니다."
+        >
+          <template v-slot:item.action="{ item }">
+            <v-icon
+              small
+              class="mr-2"
+              @click="editTrainee(item.id)"
+            >
+              mdi-pencil
+            </v-icon>
+            <v-icon
+              small
+              @click="deleteTrainee(item.id)"
+            >
+              mdi-delete
+            </v-icon>
+          </template>
+        </v-data-table>
+      </v-card-text>
+    </v-card>
+  </div>
+</template>
+
+<script>
+import APISetting from '@/settings/api';
+
+export default {
+  name: 'TraineeList',
+
+  data: () => ({
+    isProcessing: false,
+    error: {
+      isError: false,
+      message: '',
+    },
+    traineeList: {
+      headers: [
+        {
+          text: '#',
+          value: 'id',
+        },
+        {
+          text: '이름',
+          value: 'name',
+        },
+        {
+          text: '이메일',
+          value: 'email',
+        },
+        {
+          text: '연락처',
+          value: 'phone',
+        },
+        {
+          text: '',
+          value: 'action',
+          sortable: false,
+        },
+      ],
+      data: [],
+      searchKeyword: '',
+    },
+  }),
+
+  methods: {
+    getTraineeList() {
+      this.error.isError = false;
+      this.error.message = '';
+      this.isProcessing = true;
+
+      fetch(APISetting.endpoints.trainee.list, APISetting.settings.get)
+        .then((res) => {
+          if (res.status === 200) return res.json();
+          // If response status is not equal to 200, go to catch.
+          throw new Error('알 수 없는 응답입니다.');
+        })
+        .then((json) => {
+          this.traineeList.data = json.trainees;
+        })
+        .catch((e) => {
+          this.error.message = e.message;
+          this.error.isError = true;
+        })
+        .finally(() => {
+          this.isProcessing = false;
+        });
+    },
+    editTrainee(id) {
+      this.$router.push(`/trainee/${id}`);
+    },
+    deleteTrainee(id) {
+      this.error.isError = false;
+      this.error.message = '';
+
+      fetch(APISetting.endpoints.trainee.detail(id), APISetting.settings.delete)
+        .then((res) => {
+          if (res.status === 204) return Promise.all([null, res]);
+          if ([204, 400, 404, 500].includes(res.status)) return Promise.all([res.json(), res]);
+          // If response status is not equal to 204, 400, 404, 500, go to catch.
+          throw new Error('알 수 없는 응답입니다.');
+        })
+        .then((values) => {
+          const [json, res] = values;
+          // If trainee successfully deleted and response status is equal to 204,
+          // update trainee list.
+          if (res.status === 204) return this.getTraineeList();
+          // Otherwise, go to catch.
+          throw new Error(json.message);
+        })
+        .catch((e) => {
+          this.error.message = e.message;
+          this.error.isError = true;
+        });
+    },
+  },
+
+  created() {
+    this.getTraineeList();
+  },
+};
+</script>