Tecnicamente eso es todo del tutorial :c

This commit is contained in:
Daniel Cortés
2019-06-17 02:30:24 -04:00
parent b2d801addf
commit 0d30626baa
9 changed files with 4465 additions and 34940 deletions

View File

@@ -0,0 +1,90 @@
<template>
<div>
<div v-if="message" class="alert">{{ message }}</div>
<div v-if="!loaded">Loading...</div>
<form @submit.prevent="onSubmit($event)" v-else>
<div class="form-group">
<label for="username">Name</label>
<input id="username" v-model="user.name"/>
</div>
<div class="form-group">
<label for="email">Email</label>
<input id="email" type="email" v-model="user.email"/>
</div>
<div class="form-group">
<button type="submit" :disabled="saving">Update</button>
<button :disabled="saving" @click.prevent="onDelete($event)">Delete</button>
</div>
</form>
</div>
</template>
<style lang="scss" scoped>
$red: lighten(red, 30%);
$darkRed: darken($red, 50%);
.form-group label {
display: block;
}
.alert {
background: $red;
color: $darkRed;
padding: 1rem;
margin-bottom: 1rem;
width: 50%;
border: 1px solid $darkRed;
border-radius: 5px;
}
</style>
<script>
import api from '../api/users';
export default {
data() {
return {
message: null,
loaded: false,
saving: false,
user: {
id: null,
name: "",
email: "",
}
}
},
methods: {
onSubmit(event) {
this.saving = true;
api.edit(this.user.id, {
name: this.user.name,
email: this.user.email,
}).then((response) => {
this.message = 'User Updated';
setTimeout(() => this.message = null, 2000);
this.user = response.data.data;
}).catch((error) => {
console.log(error);
}).then(_ => this.saving = false);
},
onDelete(event) {
this.saving = true;
api.delete(this.user.id)
.then((response) => {
this.message = 'User Deleted';
setTimeout(() => this.$router.push({ name:'users.index' }), 2000);
});
}
},
created() {
api.find(this.$route.params.id).then((response) => {
this.loaded = true;
this.user = response.data.data;
}).catch((err) => {
this.$router.push({ name:'404' });
});
}
};
</script>