Skip to content
Snippets Groups Projects
Commit 87641311 authored by JunGu Kang's avatar JunGu Kang
Browse files

Merge branch '#31' into 'development' 

#31 Add Trainee Create View

See merge request !27
parents 1b7e09f7 90dfcc42
No related branches found
No related tags found
2 merge requests!37Deploy,!27#31 Add Trainee Create View
Pipeline #4341 passed
Stage: lint
Stage: test
Stage: build
Show whitespace changes
Inline Side-by-side
src/router/index.js
+ 5
− 0
View file @ 87641311
......@@ -53,6 +53,11 @@ const routes = [
name: 'TraineeList',
component: () => import('@/views/TraineeList.vue'),
},
{
path: '/trainee/create',
name: 'TraineeCreate',
component: () => import('@/views/TraineeCreate.vue'),
},
{
path: '/trainee/:id',
name: 'TraineeDetail',
......
src/views/TraineeCreate.vue 0 → 100644
+ 129
− 0
View file @ 87641311
<template>
<div class="trainee-detail">
<v-row>
<v-col cols="12">
<v-card :loading="isProcessing">
<v-card-title>회원 등록</v-card-title>
<v-card-text>
<v-alert
v-if="error.isError"
dense
text
type="error"
>
{{ error.message }}
</v-alert>
<v-text-field
label="이메일"
v-model="trainee.email"
></v-text-field>
<v-text-field
label="비밀번호"
type="password"
v-model="trainee.password"
></v-text-field>
<v-text-field
label="이름"
v-model="trainee.name"
></v-text-field>
<v-text-field
label="연락처"
v-model="trainee.phone"
></v-text-field>
<v-menu
:close-on-content-click="false"
min-width="290px"
offset-y
v-model="showDatePicker"
>
<template v-slot:activator="{ on }">
<v-text-field
label="생년월일"
readonly
v-model="trainee.birthDate"
v-on="on"
></v-text-field>
</template>
<v-date-picker
v-model="trainee.birthDate"
@input="showDatePicker = false"
></v-date-picker>
</v-menu>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="error"
outlined
@click="cancel"
>
<v-icon left>mdi-delete</v-icon>
취소
</v-btn>
<v-btn
color="primary"
outlined
@click="createTrainee"
>
<v-icon left>mdi-content-save</v-icon>
저장
</v-btn>
</v-card-actions>
</v-card>
</v-col>
</v-row>
</div>
</template>
<script>
import APISetting from '@/settings/api';
export default {
name: 'TraineeCreate',
data: () => ({
isProcessing: false,
error: {
isError: false,
message: '',
},
showDatePicker: false,
trainee: {
email: '',
password: '',
name: '',
phone: '',
birthDate: '',
},
}),
methods: {
createTrainee() {
this.error.isError = false;
this.error.message = '';
this.isProcessing = true;
fetch(APISetting.endpoints.trainee.list, APISetting.settings.post(this.trainee))
.then((res) => {
if ([201, 400, 500].includes(res.status)) return Promise.all([res.json(), res]);
throw new Error('알 수 없는 응답입니다.');
})
.then((values) => {
const [json, res] = values;
if (res.status !== 201) throw new Error(json.message);
this.$router.push('/trainee');
})
.catch((e) => {
this.error.message = e.message;
this.error.isError = true;
})
.finally(() => {
this.isProcessing = false;
});
},
cancel() {
this.$router.push('/trainee');
},
},
};
</script>
src/views/TraineeDetail.vue
+ 90
− 91
View file @ 87641311
<template>
<div class="trainee-detail">
<v-card
:loading="isProcessing"
>
<v-row>
<v-col cols="12">
<v-card :loading="isProcessing">
<v-card-title>회원 정보</v-card-title>
<v-card-text>
<v-alert
......@@ -36,9 +36,7 @@
offset-y
v-model="showDatePicker"
>
<template
v-slot:activator="{ on }"
>
<template v-slot:activator="{ on }">
<v-text-field
label="생년월일"
readonly
......@@ -69,11 +67,7 @@
outlined
@click="deleteTrainee(id)"
>
<v-icon
left
>
mdi-delete
</v-icon>
<v-icon left>mdi-delete</v-icon>
삭제
</v-btn>
<v-btn
......@@ -81,19 +75,19 @@
outlined
@click="updateTrainee(id)"
>
<v-icon
left
>
mdi-content-save
</v-icon>
<v-icon left>mdi-content-save</v-icon>
저장
</v-btn>
</v-card-actions>
</v-card>
</v-col>
</v-row>
</div>
</template>
<script>
import moment from 'moment';
import APISetting from '@/settings/api';
export default {
......@@ -111,8 +105,8 @@ export default {
name: '',
phone: '',
birthDate: '',
updatedAt: '',
createdAt: '',
updatedAt: '',
},
}),
......@@ -139,7 +133,10 @@ export default {
const [json, res] = values;
if (res.status === 404) throw new Error('존재하지 않는 데이터입니다.');
if (res.status !== 200) throw new Error(json.message);
this.trainee = json.trainee;
const { trainee } = json;
trainee.createdAt = moment(trainee.createdAt).format('YYYY-MM-DD HH:mm:ss');
trainee.updatedAt = moment(trainee.updatedAt).format('YYYY-MM-DD HH:mm:ss');
this.trainee = trainee;
})
.catch((e) => {
this.error.message = e.message;
......@@ -164,7 +161,10 @@ export default {
const [json, res] = values;
if (res.status === 404) throw new Error('존재하지 않는 데이터입니다.');
if (res.status !== 200) throw new Error(json.message);
this.trainee = json.trainee;
const { trainee } = json;
trainee.createdAt = moment(trainee.createdAt).format('YYYY-MM-DD HH:mm:ss');
trainee.updatedAt = moment(trainee.updatedAt).format('YYYY-MM-DD HH:mm:ss');
this.trainee = trainee;
})
.catch((e) => {
this.error.message = e.message;
......@@ -183,7 +183,6 @@ export default {
.then((res) => {
if ([204, 404].includes(res.status)) return Promise.all([null, res]);
if ([400, 500].includes(res.status)) return Promise.all([res.json(), res]);
// If response status is not equal to 204, 400, 404, or 500, go to catch.
throw new Error('알 수 없는 응답입니다.');
})
.then((values) => {
......
src/views/TraineeList.vue
+ 90
− 53
View file @ 87641311
<template>
<div class="trainee-list">
<v-row>
<v-col cols="12">
<v-card>
<v-card-title>회원 목록</v-card-title>
<v-card-text>
<v-row
justify="end"
<v-row>
<v-col
align-self="center"
cols="12"
sm="8"
md="9"
lg="9"
xl="10"
>
<v-btn
color="success"
outlined
@click="createTrainee"
>
<v-icon left>
mdi-plus
</v-icon>
새 회원 등록
</v-btn>
</v-col>
<v-col
cols="12"
sm="4"
......@@ -48,10 +67,14 @@
</v-data-table>
</v-card-text>
</v-card>
</v-col>
</v-row>
</div>
</template>
<script>
import moment from 'moment';
import APISetting from '@/settings/api';
export default {
......@@ -81,6 +104,14 @@ export default {
text: '연락처',
value: 'phone',
},
{
text: '생년월일',
value: 'birthDate',
},
{
text: '등록 시각',
value: 'createdAt',
},
{
text: '',
value: 'action',
......@@ -101,11 +132,14 @@ export default {
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;
this.traineeList.data.forEach((trainee) => {
// eslint-disable-next-line no-param-reassign
trainee.createdAt = moment(trainee.createAt).format('YYYY-MM-DD HH:mm:ss');
});
})
.catch((e) => {
this.error.message = e.message;
......@@ -115,31 +149,34 @@ export default {
this.isProcessing = false;
});
},
createTrainee() {
this.$router.push('/trainee/create');
},
editTrainee(id) {
this.$router.push(`/trainee/${id}`);
},
deleteTrainee(id) {
this.error.isError = false;
this.error.message = '';
this.isProcessing = true;
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.
if ([400, 404, 500].includes(res.status)) return Promise.all([res.json(), res]);
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;
})
.finally(() => {
this.isProcessing = false;
});
},
},
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

feedback to tooltime@ajou.ac.kr or hwan@ajou.ac.kr