Nafies Luthfi
8 years ago
6 changed files with 0 additions and 460 deletions
-
31resources/views/options/create.blade.php
-
25resources/views/options/delete.blade.php
-
172resources/views/options/index-vue-div.blade.php
-
170resources/views/options/index-vue.blade.php
-
1routes/web.php
-
61routes/web/options-vue.php
@ -1,31 +0,0 @@ |
|||||
@extends('layouts.app') |
|
||||
|
|
||||
@section('content') |
|
||||
<h1 class="page-header">{{ trans('option.create') }}</h1> |
|
||||
<div class="row"> |
|
||||
<div class="col-md-4"> |
|
||||
{!! Form::open(['route'=>'options.store']) !!} |
|
||||
<div class="panel panel-default"> |
|
||||
<div class="panel-heading"><h3 class="panel-title">Option Data</h3></div> |
|
||||
<div class="panel-body"> |
|
||||
<div class="form-group {!! $errors->has('key') ? 'has-error' : ''; !!}"> |
|
||||
{!! Form::label('key', trans('option.key'), ['class'=>'control-label']) !!} |
|
||||
{!! Form::text('key', null, ['class'=>'form-control']) !!} |
|
||||
{!! $errors->first('key', '<span class="form-error">:message</span>') !!} |
|
||||
</div> |
|
||||
|
|
||||
<div class="form-group {!! $errors->has('value') ? 'has-error' : ''; !!}"> |
|
||||
{!! Form::label('value', trans('option.value'), ['class'=>'control-label']) !!} |
|
||||
{!! Form::textarea('value', null, ['class'=>'form-control','rows'=>5]) !!} |
|
||||
{!! $errors->first('value', '<span class="form-error">:message</span>') !!} |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="panel-footer"> |
|
||||
{!! Form::submit(trans('app.submit'), ['class'=>'btn btn-primary']) !!} |
|
||||
{!! link_to_route('options.index', trans('app.cancel'), [], ['class'=>'btn btn-default']) !!} |
|
||||
</div> |
|
||||
</div> |
|
||||
{!! Form::close() !!} |
|
||||
</div> |
|
||||
</div> |
|
||||
@endsection |
|
||||
@ -1,25 +0,0 @@ |
|||||
@extends('layouts.app') |
|
||||
|
|
||||
@section('content') |
|
||||
<h1 class="page-header"> |
|
||||
<div class="pull-right"> |
|
||||
{!! delete_button(['route'=>['options.destroy',$option->id]], trans('app.delete_confirm_button'), ['class'=>'btn btn-danger'], ['option_id'=>$option->id]) !!} |
|
||||
</div> |
|
||||
{{ trans('app.delete_confirm') }} |
|
||||
{!! link_to_route('options.index', trans('app.cancel'), [], ['class' => 'btn btn-default']) !!} |
|
||||
</h1> |
|
||||
<div class="row"> |
|
||||
<div class="col-md-4"> |
|
||||
<div class="panel panel-info"> |
|
||||
<div class="panel-heading"><h3 class="panel-title">Option Detail</h3></div> |
|
||||
<div class="panel-body"> |
|
||||
<table class="table table-condensed"> |
|
||||
<tbody> |
|
||||
<tr><th>{{ str_split_ucwords($option->key) }}</th><td>{{ $option->value }}</td></tr> |
|
||||
</tbody> |
|
||||
</table> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
@endsection |
|
||||
@ -1,172 +0,0 @@ |
|||||
@extends('layouts.guest') |
|
||||
|
|
||||
@section('content') |
|
||||
<h1 class="page-header">Options</h1> |
|
||||
|
|
||||
<div id="vue-el"> |
|
||||
<div class="row"> |
|
||||
<div class="col-md-8"> |
|
||||
<!-- <div class="alert alert-success" transition="success" v-if="add_success">Add new option success.</div> |
|
||||
<div class="alert alert-success" transition="success" v-if="update_success">Update option success.</div> --> |
|
||||
<div class="row"> |
|
||||
<div class="col-md-1">ID</div> |
|
||||
<div class="col-md-4">Key</div> |
|
||||
<div class="col-md-5">Value</div> |
|
||||
<div class="col-md-2">Option</div> |
|
||||
</div> |
|
||||
<div class="row" v-for="option in options"> |
|
||||
<options-row :option="option" :options="options"></options-row> |
|
||||
</div> |
|
||||
<div class="row"> |
|
||||
<options-new :newOption="newOption" :options="options"></options-new> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<template id="option-row-template"> |
|
||||
<div v-show="!inEditMode"> |
|
||||
<div class="col-md-1">@{{ option.id }}</div> |
|
||||
<div class="col-md-4">@{{ option.key }}</div> |
|
||||
<div class="col-md-5">@{{ option.value }}</div> |
|
||||
<div class="col-md-2"> |
|
||||
<button class="btn btn-info btn-xs" v-on:click="editForm">Edit</button> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-show="inEditMode"> |
|
||||
<div class="col-md-1">@{{ option.id }}</div> |
|
||||
<div class="col-md-4"> |
|
||||
<input v-model="option.key" v-on:keyup.esc="cancelEditMode" type="text" class="form-control" /> |
|
||||
</div> |
|
||||
<div class="col-md-5"> |
|
||||
<input v-model="option.value" v-on:keyup.esc="cancelEditMode" type="text" class="form-control" /> |
|
||||
</div> |
|
||||
<div class="col-md-2"> |
|
||||
<button class="btn btn-info btn-xs" v-on:click="update(option)">update</button> |
|
||||
<button class="btn btn-danger btn-xs" v-on:click="deleteOpt(option)">x</button> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<template id="option-new-template"> |
|
||||
<form action="#" method="post" v-on:submit.prevent="addNewOption"> |
|
||||
<div class="col-md-1"> </div> |
|
||||
<div class="col-md-4"> |
|
||||
<input type="text" id="key" name="key" class="form-control" v-model="newOption.key" placeholder="Add new Option key"> |
|
||||
</div> |
|
||||
<div class="col-md-5"> |
|
||||
<textarea id="value" name="value" class="form-control" v-model="newOption.value" placeholder="Add new Option value"></textarea> |
|
||||
</div> |
|
||||
<div class="col-md-2"> |
|
||||
<input type="submit" value="Submit" class="btn btn-success"> |
|
||||
</div> |
|
||||
</form> |
|
||||
</template> |
|
||||
|
|
||||
@endsection |
|
||||
@section('ext_js') |
|
||||
{!! Html::script(url('assets/js/plugins/vue.min.js')) !!} |
|
||||
{!! Html::script(url('assets/js/plugins/vue-resource.min.js')) !!} |
|
||||
@endsection |
|
||||
@section('script') |
|
||||
<script> |
|
||||
|
|
||||
Vue.component('options-row', { |
|
||||
data: function() { |
|
||||
return { |
|
||||
inEditMode: false |
|
||||
} |
|
||||
}, |
|
||||
props: ['option','options'], |
|
||||
template: '#option-row-template', |
|
||||
methods: { |
|
||||
editForm: function() { |
|
||||
this.inEditMode = true; |
|
||||
}, |
|
||||
update: function(option) { |
|
||||
this.$http.patch('api/options/' + option.id, option); |
|
||||
|
|
||||
this.inEditMode = false; |
|
||||
}, |
|
||||
cancelEditMode: function() { |
|
||||
this.inEditMode = false; |
|
||||
}, |
|
||||
deleteOpt: function(option) { |
|
||||
var confirmBox = confirm('Delete this option?'); |
|
||||
|
|
||||
if (confirmBox) { |
|
||||
this.$http.delete('api/options/' + option.id); |
|
||||
// console.log (this.options);
|
|
||||
this.options.$remove(option); |
|
||||
// this.options.splice(id, 1);
|
|
||||
// console.log (this.options);
|
|
||||
// this.fetchOptions();
|
|
||||
} |
|
||||
|
|
||||
this.inEditMode = false; |
|
||||
} |
|
||||
} |
|
||||
}); |
|
||||
|
|
||||
Vue.component('options-new', { |
|
||||
data: function() { |
|
||||
return { |
|
||||
newOption: { |
|
||||
key: '', |
|
||||
value: '' |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
props: ['options'], |
|
||||
template: '#option-new-template', |
|
||||
|
|
||||
methods: { |
|
||||
addNewOption: function() { |
|
||||
// New Option Input
|
|
||||
var option = this.newOption; |
|
||||
|
|
||||
// Clear form
|
|
||||
this.newOption = { key: '', value: '' } |
|
||||
|
|
||||
// Send post request
|
|
||||
this.$http.post('api/options', option, function(data) { |
|
||||
this.options.push(data); |
|
||||
}); |
|
||||
} |
|
||||
} |
|
||||
}); |
|
||||
|
|
||||
var vm = new Vue({ |
|
||||
http: { |
|
||||
headers: { |
|
||||
'X-CSRF-Token': "{{ csrf_token() }}" |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
el: "#vue-el", |
|
||||
|
|
||||
methods: { |
|
||||
fetchOptions: function() { |
|
||||
this.$http.get('api/options', function(data) { |
|
||||
this.$set('options', data); |
|
||||
}); |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
ready: function() { |
|
||||
this.fetchOptions(); |
|
||||
} |
|
||||
}); |
|
||||
</script> |
|
||||
@endsection |
|
||||
|
|
||||
@section('style') |
|
||||
<style> |
|
||||
.success-transition { |
|
||||
transition: all .5s ease-in-out; |
|
||||
} |
|
||||
.success-enter, .success-leave { |
|
||||
opacity: 0; |
|
||||
} |
|
||||
</style> |
|
||||
@endsection |
|
||||
@ -1,170 +0,0 @@ |
|||||
@extends('layouts.guest') |
|
||||
|
|
||||
@section('content') |
|
||||
<h1 class="page-header">Options</h1> |
|
||||
|
|
||||
<div id="vue-el"> |
|
||||
<div class="row"> |
|
||||
<div class="col-md-8"> |
|
||||
<div class="row"> |
|
||||
<div class="col-md-1">ID</div> |
|
||||
<div class="col-md-4">Key</div> |
|
||||
<div class="col-md-5">Value</div> |
|
||||
<div class="col-md-2">Option</div> |
|
||||
</div> |
|
||||
<div class="row" v-for="option in options"> |
|
||||
<options-row :option="option" :options="options"></options-row> |
|
||||
</div> |
|
||||
<div class="row"> |
|
||||
<options-new :newOption="newOption" :options="options"></options-new> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<template id="option-row-template"> |
|
||||
<div v-show="!inEditMode"> |
|
||||
<div class="col-md-1">@{{ option.id }}</div> |
|
||||
<div class="col-md-4">@{{ option.key }}</div> |
|
||||
<div class="col-md-5">@{{ option.value }}</div> |
|
||||
<div class="col-md-2"> |
|
||||
<button class="btn btn-info btn-xs" v-on:click="editForm">Edit</button> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-show="inEditMode"> |
|
||||
<div class="col-md-1">@{{ option.id }}</div> |
|
||||
<div class="col-md-4"> |
|
||||
<input v-model="option.key" v-on:keyup.esc="cancelEditMode" type="text" class="form-control" /> |
|
||||
</div> |
|
||||
<div class="col-md-5"> |
|
||||
<input v-model="option.value" v-on:keyup.esc="cancelEditMode" type="text" class="form-control" /> |
|
||||
</div> |
|
||||
<div class="col-md-2"> |
|
||||
<button class="btn btn-info btn-xs" v-on:click="update(option)">update</button> |
|
||||
<button class="btn btn-danger btn-xs" v-on:click="deleteOpt(option)">x</button> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<template id="option-new-template"> |
|
||||
<form action="#" method="post" v-on:submit.prevent="addNewOption"> |
|
||||
<div class="col-md-1"> </div> |
|
||||
<div class="col-md-4"> |
|
||||
<input type="text" id="key" name="key" class="form-control" v-model="newOption.key" placeholder="Add new Option key"> |
|
||||
</div> |
|
||||
<div class="col-md-5"> |
|
||||
<textarea id="value" name="value" class="form-control" v-model="newOption.value" placeholder="Add new Option value"></textarea> |
|
||||
</div> |
|
||||
<div class="col-md-2"> |
|
||||
<input type="submit" value="Submit" class="btn btn-success"> |
|
||||
</div> |
|
||||
</form> |
|
||||
</template> |
|
||||
|
|
||||
@endsection |
|
||||
@section('ext_js') |
|
||||
{!! Html::script(url('assets/js/plugins/vue.min.js')) !!} |
|
||||
{!! Html::script(url('assets/js/plugins/vue-resource.min.js')) !!} |
|
||||
@endsection |
|
||||
@section('script') |
|
||||
<script> |
|
||||
|
|
||||
Vue.component('options-row', { |
|
||||
data: function() { |
|
||||
return { |
|
||||
inEditMode: false |
|
||||
} |
|
||||
}, |
|
||||
props: ['option','options'], |
|
||||
template: '#option-row-template', |
|
||||
methods: { |
|
||||
editForm: function() { |
|
||||
this.inEditMode = true; |
|
||||
}, |
|
||||
update: function(option) { |
|
||||
this.$http.patch('api/options/' + option.id, option); |
|
||||
|
|
||||
this.inEditMode = false; |
|
||||
}, |
|
||||
cancelEditMode: function() { |
|
||||
this.inEditMode = false; |
|
||||
}, |
|
||||
deleteOpt: function(option) { |
|
||||
var confirmBox = confirm('Delete this option?'); |
|
||||
|
|
||||
if (confirmBox) { |
|
||||
this.$http.delete('api/options/' + option.id); |
|
||||
// console.log (this.options);
|
|
||||
this.options.$remove(option); |
|
||||
// this.options.splice(id, 1);
|
|
||||
// console.log (this.options);
|
|
||||
// this.fetchOptions();
|
|
||||
} |
|
||||
|
|
||||
this.inEditMode = false; |
|
||||
} |
|
||||
} |
|
||||
}); |
|
||||
|
|
||||
Vue.component('options-new', { |
|
||||
data: function() { |
|
||||
return { |
|
||||
newOption: { |
|
||||
key: '', |
|
||||
value: '' |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
props: ['options'], |
|
||||
template: '#option-new-template', |
|
||||
|
|
||||
methods: { |
|
||||
addNewOption: function() { |
|
||||
// New Option Input
|
|
||||
var option = this.newOption; |
|
||||
|
|
||||
// Clear form
|
|
||||
this.newOption = { key: '', value: '' } |
|
||||
|
|
||||
// Send post request
|
|
||||
this.$http.post('api/options', option, function(data) { |
|
||||
this.options.push(data); |
|
||||
}); |
|
||||
} |
|
||||
} |
|
||||
}); |
|
||||
|
|
||||
var vm = new Vue({ |
|
||||
http: { |
|
||||
headers: { |
|
||||
'X-CSRF-Token': "{{ csrf_token() }}" |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
el: "#vue-el", |
|
||||
|
|
||||
methods: { |
|
||||
fetchOptions: function() { |
|
||||
this.$http.get('api/options', function(data) { |
|
||||
this.$set('options', data); |
|
||||
}); |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
ready: function() { |
|
||||
this.fetchOptions(); |
|
||||
} |
|
||||
}); |
|
||||
</script> |
|
||||
@endsection |
|
||||
|
|
||||
@section('style') |
|
||||
<style> |
|
||||
.success-transition { |
|
||||
transition: all .5s ease-in-out; |
|
||||
} |
|
||||
.success-enter, .success-leave { |
|
||||
opacity: 0; |
|
||||
} |
|
||||
</style> |
|
||||
@endsection |
|
||||
@ -1,61 +0,0 @@ |
|||||
<?php |
|
||||
|
|
||||
/** |
|
||||
* Vue js Trial. |
|
||||
*/ |
|
||||
/** Index Page */ |
|
||||
Route::get('options-vue', function () { |
|
||||
return view('options.index-vue'); |
|
||||
}); |
|
||||
|
|
||||
Route::group(['prefix'=>'api/options'], function () { |
|
||||
Route::match(['GET', 'POST'], '/', function () { |
|
||||
if (Request::isMethod('GET')) { |
|
||||
return App\Entities\Options\Option::all(); |
|
||||
} else { |
|
||||
return App\Entities\Options\Option::create(Request::only('key', 'value')); |
|
||||
} |
|
||||
}); |
|
||||
|
|
||||
Route::match(['GET', 'PATCH', 'DELETE'], '/{id}', function ($id) { |
|
||||
if (Request::isMethod('GET')) { |
|
||||
return App\Entities\Options\Option::findOrFail($id); |
|
||||
} elseif (Request::isMethod('PATCH')) { |
|
||||
App\Entities\Options\Option::findOrFail($id)->update(Request::only('key', 'value')); |
|
||||
|
|
||||
return Response::json(Request::all()); |
|
||||
} else { |
|
||||
return App\Entities\Options\Option::destroy($id); |
|
||||
} |
|
||||
}); |
|
||||
}); |
|
||||
|
|
||||
// /** Fetch all options (API) */
|
|
||||
// Route::get('api/options', function() {
|
|
||||
// return App\Entities\Options\Option::all();
|
|
||||
// });
|
|
||||
|
|
||||
// /** Create new options (API) */
|
|
||||
// use App\Http\Requests\Options\CreateRequest;
|
|
||||
// Route::post('api/options', function(CreateRequest $req) {
|
|
||||
// return App\Entities\Options\Option::create($req->only('key','value'));
|
|
||||
// });
|
|
||||
|
|
||||
// /** get one option (API) */
|
|
||||
// Route::get('api/options/{id}', function($id) {
|
|
||||
// return App\Entities\Options\Option::findOrFail($id);
|
|
||||
// });
|
|
||||
|
|
||||
// /** update one option (API) */
|
|
||||
// use Illuminate\Http\Request;
|
|
||||
// Route::patch('api/options/{id}', function(Request $req, $id) {
|
|
||||
// return App\Entities\Options\Option::findOrFail($id)->update($req->only('key','value'));
|
|
||||
// });
|
|
||||
|
|
||||
// /** delete one option (API) */
|
|
||||
// Route::delete('api/options/{id}', function($id) {
|
|
||||
// App\Entities\Options\Option::destroy($id);
|
|
||||
// return 'ok';
|
|
||||
// });
|
|
||||
|
|
||||
/* end of Vue js Trial */ |
|
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue