Select Git revision
MusicList.js
-
HyunjinNoh authoredHyunjinNoh authored
TrainerDetail.vue 6.45 KiB
<template>
<div class="trainer-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="등록번호"
readonly
v-model="id"
></v-text-field>
<v-text-field
label="이메일"
v-model="trainer.email"
></v-text-field>
<v-text-field
label="이름"
v-model="trainer.name"
></v-text-field>
<v-text-field
label="닉네임"
v-model="trainer.nickname"
></v-text-field>
<v-text-field
label="연락처"
v-model="trainer.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="trainer.birthDate"
v-on="on"
></v-text-field>
</template>
<v-date-picker
v-model="trainer.birthDate"
@input="showDatePicker = false"
></v-date-picker>
</v-menu>
<v-textarea
auto-grow
label="소개"
v-model="trainer.bio"
></v-textarea>
<v-text-field
label="등록 시각"
readonly
v-model="trainer.createdAt"
></v-text-field>
<v-text-field
label="최종 수정 시각"
readonly
v-model="trainer.updatedAt"
></v-text-field>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="error"
outlined
@click="deleteTrainer(id)"
>
<v-icon left>mdi-delete</v-icon>
삭제
</v-btn>
<v-btn
color="primary"
outlined
@click="updateTrainer(id)"
>
<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 {
name: 'TrainerDetail',
data: () => ({
isProcessing: false,
error: {
isError: false,
message: '',
},
showDatePicker: false,
trainer: {
email: '',
name: '',
nickname: '',
phone: '',
birthDate: '',
bio: '',
createdAt: '',
updatedAt: '',
},
}),
computed: {
id() {
if ('id' in this.$route.params) return this.$route.params.id;
return null;
},
},
methods: {
getTrainer(id) {
this.error.isError = false;
this.error.message = '';
this.isProcessing = true;
fetch(APISetting.endpoints.trainer.detail(id), APISetting.settings.get)
.then((res) => {
if (res.status === 404) return Promise.all([null, res]);
if ([200, 400, 500].includes(res.status)) return Promise.all([res.json(), res]);
throw new Error('알 수 없는 응답입니다.');
})
.then((values) => {
const [json, res] = values;
if (res.status === 404) throw new Error('존재하지 않는 데이터입니다.');
if (res.status !== 200) throw new Error(json.message);
const { trainer } = json;
trainer.createdAt = moment(trainer.createdAt).format('YYYY-MM-DD HH:mm:ss');
trainer.updatedAt = moment(trainer.updatedAt).format('YYYY-MM-DD HH:mm:ss');
this.trainer = json.trainer;
})
.catch((e) => {
this.error.message = e.message;
this.error.isError = true;
})
.finally(() => {
this.isProcessing = false;
});
},
updateTrainer(id) {
this.error.isError = false;
this.error.message = '';
this.isProcessing = true;
fetch(APISetting.endpoints.trainer.detail(id), APISetting.settings.put(this.trainer))
.then((res) => {
if (res.status === 404) return Promise.all([null, res]);
if ([200, 400, 500].includes(res.status)) return Promise.all([res.json(), res]);
throw new Error('알 수 없는 응답입니다.');
})
.then((values) => {
const [json, res] = values;
if (res.status === 404) throw new Error('존재하지 않는 데이터입니다.');
if (res.status !== 200) throw new Error(json.message);
const { trainer } = json;
trainer.createdAt = moment(trainer.createdAt).format('YYYY-MM-DD HH:mm:ss');
trainer.updatedAt = moment(trainer.updatedAt).format('YYYY-MM-DD HH:mm:ss');
this.trainer = json.trainer;
})
.catch((e) => {
this.error.message = e.message;
this.error.isError = true;
})
.finally(() => {
this.isProcessing = false;
});
},
deleteTrainer(id) {
this.error.isError = false;
this.error.message = '';
this.isProcessing = true;
fetch(APISetting.endpoints.trainer.detail(id), APISetting.settings.delete)
.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]);
throw new Error('알 수 없는 응답입니다.');
})
.then((values) => {
const [json, res] = values;
if (res.status === 404) throw new Error('존재하지 않는 데이터입니다.');
if (res.status !== 204) throw new Error(json.message);
return this.$router.push('/trainer');
})
.catch((e) => {
this.error.message = e.message;
this.error.isError = true;
})
.finally(() => {
this.isProcessing = false;
});
},
},
created() {
this.getTrainer(this.id);
},
};
</script>