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