Commit 1ec8d36cefcf7f53b2fa9e00a3cfed902007994f
1 parent
39ba64e5
-Searching applied
Showing
7 changed files
with
162 additions
and
48 deletions
Show diff stats
backend/config/main.php
backend/controllers/CallController.php
| ... | ... | @@ -2,9 +2,27 @@ |
| 2 | 2 | |
| 3 | 3 | namespace backend\controllers; |
| 4 | 4 | |
| 5 | + use common\models\Call; | |
| 6 | + use yii\data\ActiveDataProvider; | |
| 5 | 7 | use yii\rest\ActiveController; |
| 6 | 8 | |
| 7 | 9 | class CallController extends ActiveController |
| 8 | 10 | { |
| 9 | 11 | public $modelClass = 'common\models\Call'; |
| 12 | + | |
| 13 | + public function actionSearch($word) | |
| 14 | + { | |
| 15 | + return new ActiveDataProvider( | |
| 16 | + [ | |
| 17 | + 'query' => Call::find() | |
| 18 | + ->filterWhere( | |
| 19 | + [ | |
| 20 | + 'ilike', | |
| 21 | + 'company', | |
| 22 | + trim($word), | |
| 23 | + ] | |
| 24 | + ), | |
| 25 | + ] | |
| 26 | + ); | |
| 27 | + } | |
| 10 | 28 | } |
| 11 | 29 | \ No newline at end of file | ... | ... |
composer.json
| ... | ... | @@ -18,7 +18,9 @@ |
| 18 | 18 | "yiisoft/yii2": "~2.0.6", |
| 19 | 19 | "yiisoft/yii2-bootstrap": "~2.0.0", |
| 20 | 20 | "yiisoft/yii2-swiftmailer": "~2.0.0 || ~2.1.0", |
| 21 | - "bower-asset/materialize": "^0.100.2" | |
| 21 | + "bower-asset/materialize": "^0.100.2", | |
| 22 | + "bower-asset/vue": "^2.5", | |
| 23 | + "bower-asset/axios": "^0.18.0" | |
| 22 | 24 | }, |
| 23 | 25 | "require-dev": { |
| 24 | 26 | "yiisoft/yii2-debug": "~2.0.0", | ... | ... |
composer.lock
| ... | ... | @@ -4,9 +4,28 @@ |
| 4 | 4 | "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#composer-lock-the-lock-file", |
| 5 | 5 | "This file is @generated automatically" |
| 6 | 6 | ], |
| 7 | - "content-hash": "ec09898700dcf10b1fe4b54e61ad8ad4", | |
| 7 | + "content-hash": "b506c80ac36bec49cac93f43643b27ac", | |
| 8 | 8 | "packages": [ |
| 9 | 9 | { |
| 10 | + "name": "bower-asset/axios", | |
| 11 | + "version": "v0.18.0", | |
| 12 | + "source": { | |
| 13 | + "type": "git", | |
| 14 | + "url": "https://github.com/axios/axios.git", | |
| 15 | + "reference": "d59c70fdfd35106130e9f783d0dbdcddd145b58f" | |
| 16 | + }, | |
| 17 | + "dist": { | |
| 18 | + "type": "zip", | |
| 19 | + "url": "https://api.github.com/repos/axios/axios/zipball/d59c70fdfd35106130e9f783d0dbdcddd145b58f", | |
| 20 | + "reference": "d59c70fdfd35106130e9f783d0dbdcddd145b58f", | |
| 21 | + "shasum": null | |
| 22 | + }, | |
| 23 | + "type": "bower-asset", | |
| 24 | + "license": [ | |
| 25 | + "MIT" | |
| 26 | + ] | |
| 27 | + }, | |
| 28 | + { | |
| 10 | 29 | "name": "bower-asset/bootstrap", |
| 11 | 30 | "version": "v3.3.7", |
| 12 | 31 | "source": { |
| ... | ... | @@ -105,6 +124,22 @@ |
| 105 | 124 | "type": "bower-asset" |
| 106 | 125 | }, |
| 107 | 126 | { |
| 127 | + "name": "bower-asset/vue", | |
| 128 | + "version": "v2.5.13", | |
| 129 | + "source": { | |
| 130 | + "type": "git", | |
| 131 | + "url": "https://github.com/vuejs/vue.git", | |
| 132 | + "reference": "d982e344b39391fe91b6dd91d51b2f0310a45e77" | |
| 133 | + }, | |
| 134 | + "dist": { | |
| 135 | + "type": "zip", | |
| 136 | + "url": "https://api.github.com/repos/vuejs/vue/zipball/d982e344b39391fe91b6dd91d51b2f0310a45e77", | |
| 137 | + "reference": "d982e344b39391fe91b6dd91d51b2f0310a45e77", | |
| 138 | + "shasum": null | |
| 139 | + }, | |
| 140 | + "type": "bower-asset" | |
| 141 | + }, | |
| 142 | + { | |
| 108 | 143 | "name": "bower-asset/yii2-pjax", |
| 109 | 144 | "version": "2.0.7.1", |
| 110 | 145 | "source": { | ... | ... |
frontend/assets/AppAsset.php
| 1 | 1 | <?php |
| 2 | - | |
| 3 | -namespace frontend\assets; | |
| 4 | - | |
| 5 | -use yii\web\AssetBundle; | |
| 6 | - | |
| 7 | -/** | |
| 8 | - * Main frontend application asset bundle. | |
| 9 | - */ | |
| 10 | -class AppAsset extends AssetBundle | |
| 11 | -{ | |
| 12 | - public $basePath = '@webroot'; | |
| 13 | - public $baseUrl = '@web'; | |
| 14 | - public $css = [ | |
| 15 | - 'css/site.css', | |
| 16 | - ]; | |
| 17 | - public $js = [ | |
| 18 | - ]; | |
| 19 | - public $depends = [ | |
| 20 | - 'yii\web\YiiAsset', | |
| 21 | -// 'yii\bootstrap\BootstrapAsset', | |
| 22 | - ]; | |
| 23 | -} | |
| 2 | + | |
| 3 | + namespace frontend\assets; | |
| 4 | + | |
| 5 | + use yii\web\AssetBundle; | |
| 6 | + | |
| 7 | + /** | |
| 8 | + * Main frontend application asset bundle. | |
| 9 | + */ | |
| 10 | + class AppAsset extends AssetBundle | |
| 11 | + { | |
| 12 | + public $basePath = '@webroot'; | |
| 13 | + public $baseUrl = '@web'; | |
| 14 | + public $css = [ | |
| 15 | + 'css/site.css', | |
| 16 | + ]; | |
| 17 | + public $js = []; | |
| 18 | + public $depends = [ | |
| 19 | + 'yii\web\YiiAsset', | |
| 20 | + 'frontend\assets\VueAsset', | |
| 21 | + ]; | |
| 22 | + } | ... | ... |
| 1 | +<?php | |
| 2 | + | |
| 3 | + namespace frontend\assets; | |
| 4 | + | |
| 5 | + use yii\web\AssetBundle; | |
| 6 | + use yii\web\View; | |
| 7 | + | |
| 8 | + class VueAsset extends AssetBundle | |
| 9 | + { | |
| 10 | + public $sourcePath = '@bower'; | |
| 11 | + | |
| 12 | + public $js = [ | |
| 13 | + 'axios/dist/axios.js', | |
| 14 | + 'vue/dist/vue.js', | |
| 15 | + ]; | |
| 16 | + | |
| 17 | + public $jsOptions = [ | |
| 18 | + 'position' => View::POS_BEGIN, | |
| 19 | + ]; | |
| 20 | + } | |
| 0 | 21 | \ No newline at end of file | ... | ... |
frontend/views/site/index.php
| ... | ... | @@ -15,30 +15,67 @@ |
| 15 | 15 | |
| 16 | 16 | <div class="body-content"> |
| 17 | 17 | |
| 18 | - <div class="row"> | |
| 19 | - <table class="bordered"> | |
| 20 | - <thead> | |
| 21 | - <tr> | |
| 22 | - <th>Company</th> | |
| 23 | - <th>Status</th> | |
| 24 | - <th>Duration</th> | |
| 25 | - </tr> | |
| 26 | - </thead> | |
| 27 | - <tbody> | |
| 28 | - <?php | |
| 29 | - foreach ($calls as $call) { | |
| 30 | - ?> | |
| 31 | - <tr> | |
| 32 | - <td><?= $call->company ?></td> | |
| 33 | - <td><?= $call->status ?></td> | |
| 34 | - <td><?= $call->duration ?></td> | |
| 35 | - </tr> | |
| 36 | - <?php | |
| 37 | - } | |
| 38 | - ?> | |
| 39 | - </tbody> | |
| 40 | - </table> | |
| 18 | + <div id="app"> | |
| 19 | + <div class="row"> | |
| 20 | + <table class="bordered"> | |
| 21 | + <thead> | |
| 22 | + <tr> | |
| 23 | + <th>ID</th> | |
| 24 | + <th>Company</th> | |
| 25 | + <th>Status</th> | |
| 26 | + <th>Duration</th> | |
| 27 | + </tr> | |
| 28 | + </thead> | |
| 29 | + <tbody> | |
| 30 | + <tr v-if="" v-for="call in calls"> | |
| 31 | + <td>{{call.id}}</td> | |
| 32 | + <td>{{call.company}}</td> | |
| 33 | + <td>{{call.status}}</td> | |
| 34 | + <td>{{call.duration}}</td> | |
| 35 | + </tr> | |
| 36 | + </tbody> | |
| 37 | + </table> | |
| 38 | + <div class="row"> | |
| 39 | + <div class="col s5 input-field"> | |
| 40 | + <label for="search-company">Company</label> | |
| 41 | + <input v-model="search" id="search-company" type="text"> | |
| 42 | + <button v-on:click="fetchSearch()" class="waves-effect waves-light btn">Search</button> | |
| 43 | + </div> | |
| 44 | + | |
| 45 | + </div> | |
| 46 | + </div> | |
| 47 | + | |
| 41 | 48 | </div> |
| 42 | - | |
| 43 | 49 | </div> |
| 44 | 50 | </div> |
| 51 | + | |
| 52 | +<script> | |
| 53 | + new Vue({ | |
| 54 | + el: '#app', | |
| 55 | + data: { | |
| 56 | + calls: null, | |
| 57 | + search: null | |
| 58 | + }, | |
| 59 | + created: function() { | |
| 60 | + this.fetchData() | |
| 61 | + }, | |
| 62 | + methods: { | |
| 63 | + fetchData: function() { | |
| 64 | + var self = this; | |
| 65 | + axios.get('/rest/calls') | |
| 66 | + .then(function(response) { | |
| 67 | + console.log(response.data); | |
| 68 | + self.calls = response.data; | |
| 69 | + }); | |
| 70 | + }, | |
| 71 | + fetchSearch: function() { | |
| 72 | + var self = this; | |
| 73 | + axios.get('/rest/calls/search?word=' + self.search) | |
| 74 | + .then(function(response) { | |
| 75 | + console.log(response.data); | |
| 76 | + self.calls = response.data; | |
| 77 | + }); | |
| 78 | + } | |
| 79 | + } | |
| 80 | + }) | |
| 81 | +</script> | |
| 45 | 82 | \ No newline at end of file | ... | ... |