<script>
export default {
data (){
},
props: ['currentPage', 'categories', 'users'],
methods:{
toggleDashboard() {
this.$emit('dashboard')
}
}
}
</script>
<template>
<ul>
<li class="nav-item">
<a class="nav-link" href="#" @click.prevent="toggleDashboard">
<i class="fas fa-fw fa-database"></i>
<span>Dashboard</span></a
>
</li>
</ul>
</template>
<style>
</style>
<script>
export default {
methods: {
toggleAddNew() {
this.$emit("formInputArticle");
},
toggleEdit() {
this.$emit("formInputArticle");
},
updateArticleStatus(){
this.$emit('updateStatus')
}
},
props: ["articles"],
};
</script>
<template>
<div class="container" id="showArticles">
<div class="row">
<div class="col-6">
<button class="btn btn-primary mb-2" @click.prevent="toggleAddNew">
Add New
</button>
<h4>Table List Article</h4>
</div>
</div>
<table class="table">
<thead>
<tr>
<th scope="col">No</th>
<th scope="col">Title</th>
<th scope="col">Content</th>
<th scope="col">Image</th>
<th scope="col">Category</th>
<th scope="col">Author</th>
<th scope="col">Status</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr v-for="(article, index) in articles" :key="index">
<th scope="row">{{ index + 1 }}</th>
<td>{{ article.title }}</td>
<td>{{ article.content }}</td>
<td>
<img :src="article.imgUrl" class="img-fluid" style="width: 75px" />
</td>
<td>{{ article.Category.name }}</td>
<td>{{ article.User.username }}</td>
<td>
<select
v-model="article.status"
class="form-control"
@change.prevent="updateArticleStatus(article.id)"
>
<option value="{{ article.status }}">{{ article.status }}</option>
<option value="Active">Active</option>
<option value="Archived">Archived</option>
</select>
</td>
<td>
<a href="#" @click.prevent="toggleEdit(article)"> EDIT </a>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<style></style>
<script>
export default {
data (){
return {
formInput: {
title: '',
content: '',
imgUrl: '',
categoryId: ''
}
}
},
methods: {
doSubmitArticle(){
this.$emit('handleAddNew', this.formInput)
}
},
props : ['handleAddNew', 'categories']
}
</script>
<template>
<div class="container" id="showAddNew">
<div class="row justify-content-center">
<div class="col-xl-10 col-lg-12 col-md-9">
<div class="card o-hidden border-0 shadow-lg my-5">
<div class="card-body p-0">
<div class="row">
<div class="col-lg-12">
<div class="p-5">
<div class="text-center">
<h1 class="h4 text-gray-900 mb-4">
Create a New Article!
</h1>
</div>
<form class="user" @submit.prevent="doSubmitArticle">
<div class="form-group row">
<div class="col-sm-6 mb-3 mb-sm-0">
<input
type="text"
class="form-control"
id="title"
name="title"
placeholder="Title"
v-model="formInput.title"
/>
</div>
<div class="col-sm-6">
<input
type="text"
class="form-control"
id="content"
placeholder="Content"
v-model="formInput.content"
/>
</div>
</div>
<div class="form-group">
<input
type="text"
class="form-control"
id="imgUrl"
placeholder="Image URL"
v-model="formInput.imgUrl"
/>
</div>
<div class="form-group">
<select class="form-control" v-model="formInput.categoryId" id="categoryId">
<option v-for="(category, index) in categories" :key="index" :value="category.id">
{{ category.name }}
</option>
</select>
</div>
<button type="submit" class="btn btn-primary btn-user btn-block">
Submit Article
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<style>
</style>
No comments:
Post a Comment