Commit 28c31dc7 authored by TTS Nguyen Huu Huan's avatar TTS Nguyen Huu Huan Committed by 20194288-huannh

use uniform, validation library, tags input, ckeditor to post form

parent 925ac8d2
...@@ -34,7 +34,10 @@ public function store(Request $request) { ...@@ -34,7 +34,10 @@ public function store(Request $request) {
]); ]);
$post = Post::create($request->only([ $post = Post::create($request->only([
'title', 'title',
'user_id' 'user_id',
'keywords',
'description',
'content'
])); ]));
$post->categories()->sync($request->category_ids); $post->categories()->sync($request->category_ids);
return redirect()->route('posts.index')->with('message', 'Tạo mới thành công'); return redirect()->route('posts.index')->with('message', 'Tạo mới thành công');
...@@ -46,6 +49,9 @@ public function edit(Post $post, Request $request) { ...@@ -46,6 +49,9 @@ public function edit(Post $post, Request $request) {
public function update(Post $post, Request $request) { public function update(Post $post, Request $request) {
$post->update($request->only([ $post->update($request->only([
'title', 'title',
'keywords',
'description',
'content'
])); ]));
$post->categories()->sync($request->category_ids); $post->categories()->sync($request->category_ids);
return redirect()->route('posts.index')->with('message', 'Cập nhật thành công'); return redirect()->route('posts.index')->with('message', 'Cập nhật thành công');
......
...@@ -15,6 +15,9 @@ class Post extends Model ...@@ -15,6 +15,9 @@ class Post extends Model
'view_count' => 'integer', 'view_count' => 'integer',
'status' => 'integer', 'status' => 'integer',
]; ];
protected $attributes = [
'status' => true,
];
public function user() { public function user() {
return $this->belongsTo(User::class); return $this->belongsTo(User::class);
} }
......
...@@ -2,8 +2,8 @@ ...@@ -2,8 +2,8 @@
@section('content') @section('content')
<!-- Page header --> <!-- Page header -->
<div class="page-header page-header-light"> <div class="page-header page-header-light">
<div class="page-header-content header-elements-md-inline"> <div class="page-header-content header-elements-md-inline">
<div class="page-title d-flex"> <div class="page-title d-flex">
<h4><i class="icon-arrow-left52 mr-2"></i> <span class="font-weight-semibold">Home</span> - Dashboard</h4> <h4><i class="icon-arrow-left52 mr-2"></i> <span class="font-weight-semibold">Home</span> - Dashboard</h4>
...@@ -62,12 +62,12 @@ ...@@ -62,12 +62,12 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- /page header --> <!-- /page header -->
<!-- Content area --> <!-- Content area -->
<div class="content"> <div class="content">
<!-- Main charts --> <!-- Main charts -->
<div class="row"> <div class="row">
...@@ -272,7 +272,9 @@ ...@@ -272,7 +272,9 @@
</td> </td>
<td><span class="text-muted">Mintlime</span></td> <td><span class="text-muted">Mintlime</span></td>
<td><span class="text-success-600"><i class="icon-stats-growth2 mr-2"></i> 2.43%</span></td> <td><span class="text-success-600"><i class="icon-stats-growth2 mr-2"></i> 2.43%</span></td>
<td><h6 class="font-weight-semibold mb-0">$5,489</h6></td> <td>
<h6 class="font-weight-semibold mb-0">$5,489</h6>
</td>
<td><span class="badge bg-blue">Active</span></td> <td><span class="badge bg-blue">Active</span></td>
<td class="text-center"> <td class="text-center">
<div class="list-icons"> <div class="list-icons">
...@@ -308,7 +310,9 @@ ...@@ -308,7 +310,9 @@
</td> </td>
<td><span class="text-muted">CDsoft</span></td> <td><span class="text-muted">CDsoft</span></td>
<td><span class="text-success-600"><i class="icon-stats-growth2 mr-2"></i> 3.12%</span></td> <td><span class="text-success-600"><i class="icon-stats-growth2 mr-2"></i> 3.12%</span></td>
<td><h6 class="font-weight-semibold mb-0">$2,592</h6></td> <td>
<h6 class="font-weight-semibold mb-0">$2,592</h6>
</td>
<td><span class="badge bg-danger">Closed</span></td> <td><span class="badge bg-danger">Closed</span></td>
<td class="text-center"> <td class="text-center">
<div class="list-icons"> <div class="list-icons">
...@@ -344,7 +348,9 @@ ...@@ -344,7 +348,9 @@
</td> </td>
<td><span class="text-muted">Diligence</span></td> <td><span class="text-muted">Diligence</span></td>
<td><span class="text-danger"><i class="icon-stats-decline2 mr-2"></i> - 8.02%</span></td> <td><span class="text-danger"><i class="icon-stats-decline2 mr-2"></i> - 8.02%</span></td>
<td><h6 class="font-weight-semibold mb-0">$1,268</h6></td> <td>
<h6 class="font-weight-semibold mb-0">$1,268</h6>
</td>
<td><span class="badge bg-grey-400">On hold</span></td> <td><span class="badge bg-grey-400">On hold</span></td>
<td class="text-center"> <td class="text-center">
<div class="list-icons"> <div class="list-icons">
...@@ -380,7 +386,9 @@ ...@@ -380,7 +386,9 @@
</td> </td>
<td><span class="text-muted">Deluxe</span></td> <td><span class="text-muted">Deluxe</span></td>
<td><span class="text-success-600"><i class="icon-stats-growth2 mr-2"></i> 2.78%</span></td> <td><span class="text-success-600"><i class="icon-stats-growth2 mr-2"></i> 2.78%</span></td>
<td><h6 class="font-weight-semibold mb-0">$7,467</h6></td> <td>
<h6 class="font-weight-semibold mb-0">$7,467</h6>
</td>
<td><span class="badge bg-grey-400">On hold</span></td> <td><span class="badge bg-grey-400">On hold</span></td>
<td class="text-center"> <td class="text-center">
<div class="list-icons"> <div class="list-icons">
...@@ -423,7 +431,9 @@ ...@@ -423,7 +431,9 @@
</td> </td>
<td><span class="text-muted">Metrics</span></td> <td><span class="text-muted">Metrics</span></td>
<td><span class="text-danger"><i class="icon-stats-decline2 mr-2"></i> - 5.78%</span></td> <td><span class="text-danger"><i class="icon-stats-decline2 mr-2"></i> - 5.78%</span></td>
<td><h6 class="font-weight-semibold mb-0">$970</h6></td> <td>
<h6 class="font-weight-semibold mb-0">$970</h6>
</td>
<td><span class="badge bg-success-400">Pending</span></td> <td><span class="badge bg-success-400">Pending</span></td>
<td class="text-center"> <td class="text-center">
<div class="list-icons"> <div class="list-icons">
...@@ -459,7 +469,9 @@ ...@@ -459,7 +469,9 @@
</td> </td>
<td><span class="text-muted">Blueish</span></td> <td><span class="text-muted">Blueish</span></td>
<td><span class="text-success-600"><i class="icon-stats-growth2 mr-2"></i> 6.79%</span></td> <td><span class="text-success-600"><i class="icon-stats-growth2 mr-2"></i> 6.79%</span></td>
<td><h6 class="font-weight-semibold mb-0">$1,540</h6></td> <td>
<h6 class="font-weight-semibold mb-0">$1,540</h6>
</td>
<td><span class="badge bg-blue">Active</span></td> <td><span class="badge bg-blue">Active</span></td>
<td class="text-center"> <td class="text-center">
<div class="list-icons"> <div class="list-icons">
...@@ -495,7 +507,9 @@ ...@@ -495,7 +507,9 @@
</td> </td>
<td><span class="text-muted">Teamable</span></td> <td><span class="text-muted">Teamable</span></td>
<td><span class="text-danger"><i class="icon-stats-decline2 mr-2"></i> 9.83%</span></td> <td><span class="text-danger"><i class="icon-stats-decline2 mr-2"></i> 9.83%</span></td>
<td><h6 class="font-weight-semibold mb-0">$8,350</h6></td> <td>
<h6 class="font-weight-semibold mb-0">$8,350</h6>
</td>
<td><span class="badge bg-danger">Closed</span></td> <td><span class="badge bg-danger">Closed</span></td>
<td class="text-center"> <td class="text-center">
<div class="list-icons"> <div class="list-icons">
...@@ -1758,7 +1772,7 @@ ...@@ -1758,7 +1772,7 @@
</div> </div>
<!-- /dashboard content --> <!-- /dashboard content -->
</div> </div>
<!-- /content area --> <!-- /content area -->
@endsection @endsection
\ No newline at end of file
...@@ -22,6 +22,9 @@ ...@@ -22,6 +22,9 @@
<!-- /core JS files --> <!-- /core JS files -->
<!-- Theme JS files --> <!-- Theme JS files -->
<script src="/global_assets/js/demo_pages/editor_ckeditor.js"></script>
<script src="/global_assets/js/plugins/editors/ckeditor/ckeditor.js"></script>
<script src="/global_assets/js/plugins/forms/styling/uniform.min.js"></script>
<script src="/global_assets/js/plugins/forms/validation/validate.min.js"></script> <script src="/global_assets/js/plugins/forms/validation/validate.min.js"></script>
<script src="/global_assets/js/plugins/forms/selects/select2.min.js"></script> <script src="/global_assets/js/plugins/forms/selects/select2.min.js"></script>
<script src="/global_assets/js/plugins/visualization/d3/d3.min.js"></script> <script src="/global_assets/js/plugins/visualization/d3/d3.min.js"></script>
...@@ -32,8 +35,7 @@ ...@@ -32,8 +35,7 @@
<script src="/global_assets/js/plugins/ui/moment/moment.min.js"></script> <script src="/global_assets/js/plugins/ui/moment/moment.min.js"></script>
<script src="/global_assets/js/plugins/pickers/daterangepicker.js"></script> <script src="/global_assets/js/plugins/pickers/daterangepicker.js"></script>
<script src="/global_assets/js/plugins/ui/perfect_scrollbar.min.js"></script> <script src="/global_assets/js/plugins/ui/perfect_scrollbar.min.js"></script>
<script src="/global_assets/js/plugins/forms/tags/tagsinput.min.js"></script>
<script src="/assets/js/app.js"></script> <script src="/assets/js/app.js"></script>
<script src="/global_assets/js/demo_pages/dashboard.js"></script>
<script src="/global_assets/js/demo_pages/layout_fixed_sidebar_custom.js"></script>
<!-- /theme JS files --> <!-- /theme JS files -->
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
<div class="page-title d-flex"> <div class="page-title d-flex">
<h4> <h4>
<i class="icon-arrow-left52 mr-2"></i> <span class="font-weight-semibold">Bài viết</span> - <i class="icon-arrow-left52 mr-2"></i> <span class="font-weight-semibold">Bài viết</span> -
@if(isset($post)) @if($post->id)
Sửa Sửa
@else @else
Thêm mới Thêm mới
...@@ -45,39 +45,46 @@ ...@@ -45,39 +45,46 @@
<div class="card" > <div class="card" >
<div class="card-body"> <div class="card-body">
<div class="form-group row"> <div class="form-group row">
<label class="col-lg-3 col-form-label">Tiêu đề</label> <label class="col-lg-3 col-form-label">Tiêu đề <span class="text-danger">*</span></label>
<div class="col-lg-9"> <div class="col-lg-9">
<input type="text" class="form-control" value="{{ isset($post) ? $post->title : ''}}" placeholder="Tiêu đề" name="title"> <input type="text" class="form-control" value="{{ $post->id ? $post->title : ''}}" placeholder="Tiêu đề" name="title">
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label class="col-lg-3 col-form-label">Ảnh:</label> <label class="col-lg-3 col-form-label">Ảnh </label>
<div class="col-lg-9"> <div class="col-lg-9">
<input type="file" class="form-control" name="image"> <input type="file" class="form-control form-input-styled" name="image">
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label class="col-lg-3 col-form-label"> tả:</label> <label class="col-lg-3 col-form-label">Từ khóa <span class="text-danger">*</span></label>
<div class="col-lg-9"> <div class="col-lg-9">
<input type="text" class="form-control" name= "description"> <input type="text" data-role="tagsinput" class="form-control tagsinput" name="keywords" value="{{ $post->id ? $post->keywords : ''}}">
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label class="col-lg-3 col-form-label">Trạng thái:</label> <label class="col-lg-3 col-form-label"> tả <span class="text-danger">*</span></label>
<div class="col-lg-9">
<input type="text" class="form-control" name= "description" value="{{ $post->id ? $post->description : ''}}">
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label">Trạng thái </label>
<div class="col-lg-9"> <div class="col-lg-9">
<div class="form-check form-check-inline"> <div class="form-check form-check-inline">
<label class="form-check-label"> <label class="form-check-label">
<input type="radio" class="form-check-input" name="status" checked type="checkbox"> <input type="radio" class="form-input-styled" name="status" {{ $post->status ? '' : 'checked' }} type="checkbox">
Ẩn Ẩn
</label> </label>
</div> </div>
<div class="form-check form-check-inline"> <div class="form-check form-check-inline">
<label class="form-check-label"> <label class="form-check-label">
<input type="radio" class="form-check-input" name="status" type="checkbox" > <input type="radio" class="form-input-styled" name="status" {{ $post->status ? 'checked' : '' }} type="checkbox" >
Hiện Hiện
</label> </label>
</div> </div>
...@@ -85,14 +92,26 @@ ...@@ -85,14 +92,26 @@
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label class="col-lg-3 col-form-label">Nội dung:</label> <label class="col-lg-3 col-form-label">Danh mục <span class="text-danger">*</span></label>
<div class="col-lg-9"> <div class="col-lg-9">
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" name="content"></textarea> <select class="form-control select-multiple-drag select2 col-lg-9" multiple="multiple" data-fouc name="category_ids[]">
@foreach($categories as $category)
<option {{ in_array($category->id, $post->categories->pluck('id')->all()) ? 'selected' : '' }} value="{{$category->id}}" >{{$category->title }}</option>
@endforeach
</select>
</div>
</div> </div>
<div class="form-group row">
<label class="col-lg-3 col-form-label">Nội dung <span class="text-danger">*</span></label>
</div>
<div class="form-group row">
<textarea name="content" id="content" rows="4" cols="4">{{ $post->content }}</textarea>
</div> </div>
<div class="text-right"> <div class="text-right">
<button type="" class="btn btn-primary">Lưu <i class="icon-paperplane ml-2"></i></button> <button type="submit" class="btn btn-primary">Lưu <i class="icon-paperplane ml-2"></i></button>
</div> </div>
</div> </div>
</div> </div>
...@@ -101,18 +120,56 @@ ...@@ -101,18 +120,56 @@
</div> </div>
</div> </div>
<!-- /content area -->
</form> </form>
<script> <script>
$(function(){ $(function(){
if (!$().validate) { CKEDITOR.replace('content', {
console.warn('Warning - validate.min.js is not loaded.'); height: 400,
return; extraPlugins: 'forms'
} })
$('.select2').select2() $('.select2').select2()
$('.form-input-styled').uniform()
$('#form').validate({ $('#form').validate({
ignore: 'input[type=hidden], .select2-search__field', // ignore hidden fields
errorClass: 'validation-invalid-label',
successClass: 'validation-valid-label',
validClass: 'validation-valid-label',
highlight: function(element, errorClass) {
$(element).removeClass(errorClass);
},
unhighlight: function(element, errorClass) {
$(element).removeClass(errorClass);
},
success: function(label) {
label.addClass('validation-valid-label')
},
// Different components require proper error label placement
errorPlacement: function(error, element) {
// Unstyled checkboxes, radios
if (element.parents().hasClass('form-check')) {
error.appendTo( element.parents('.form-check').parent() );
}
// Input with icons and Select2
else if (element.parents().hasClass('form-group-feedback') || element.hasClass('select2-hidden-accessible')) {
error.appendTo( element.parent() );
}
// Input group, styled file input
else if (element.parent().is('.uniform-uploader, .uniform-select') || element.parents().hasClass('input-group')) {
error.appendTo( element.parent().parent() );
}
// Other elements
else {
error.insertAfter(element);
}
},
rules: { rules: {
title :{ title :{
required: true required: true
...@@ -123,9 +180,6 @@ ...@@ -123,9 +180,6 @@
content: { content: {
required: true required: true
}, },
status: {
required: true
}
}, },
messages: { messages: {
title: { title: {
...@@ -137,9 +191,6 @@ ...@@ -137,9 +191,6 @@
content: { content: {
required: "Nội dung không được bỏ trống" required: "Nội dung không được bỏ trống"
}, },
status: {
required: "Trường trạng thái là bắt buộc."
}
} }
}) })
......
...@@ -18,9 +18,9 @@ ...@@ -18,9 +18,9 @@
*/ */
Auth::routes(); Auth::routes();
Route::middleware(['auth'])->group(function() { Route::middleware(['auth'])->group(function () {
Route::resource('posts', PostController::class); Route::resource('posts', PostController::class);
Route::prefix('posts')->name('posts.')->group(function() { Route::prefix('posts')->name('posts.')->group(function () {
Route::post('ajax', [PostController::class, 'ajax'])->name('ajax'); Route::post('ajax', [PostController::class, 'ajax'])->name('ajax');
}); });
Route::get('/', [App\Http\Controllers\HomeController::class, 'index'])->name('home'); Route::get('/', [App\Http\Controllers\HomeController::class, 'index'])->name('home');
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment