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,9 +2,27 @@ | ||
| 2 | 2 | ||
| 3 | namespace backend\controllers; | 3 | namespace backend\controllers; |
| 4 | 4 | ||
| 5 | + use common\models\Call; | ||
| 6 | + use yii\data\ActiveDataProvider; | ||
| 5 | use yii\rest\ActiveController; | 7 | use yii\rest\ActiveController; |
| 6 | 8 | ||
| 7 | class CallController extends ActiveController | 9 | class CallController extends ActiveController |
| 8 | { | 10 | { |
| 9 | public $modelClass = 'common\models\Call'; | 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 | \ No newline at end of file | 29 | \ No newline at end of file |
composer.json
| @@ -18,7 +18,9 @@ | @@ -18,7 +18,9 @@ | ||
| 18 | "yiisoft/yii2": "~2.0.6", | 18 | "yiisoft/yii2": "~2.0.6", |
| 19 | "yiisoft/yii2-bootstrap": "~2.0.0", | 19 | "yiisoft/yii2-bootstrap": "~2.0.0", |
| 20 | "yiisoft/yii2-swiftmailer": "~2.0.0 || ~2.1.0", | 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 | "require-dev": { | 25 | "require-dev": { |
| 24 | "yiisoft/yii2-debug": "~2.0.0", | 26 | "yiisoft/yii2-debug": "~2.0.0", |
composer.lock
| @@ -4,9 +4,28 @@ | @@ -4,9 +4,28 @@ | ||
| 4 | "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#composer-lock-the-lock-file", | 4 | "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#composer-lock-the-lock-file", |
| 5 | "This file is @generated automatically" | 5 | "This file is @generated automatically" |
| 6 | ], | 6 | ], |
| 7 | - "content-hash": "ec09898700dcf10b1fe4b54e61ad8ad4", | 7 | + "content-hash": "b506c80ac36bec49cac93f43643b27ac", |
| 8 | "packages": [ | 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 | "name": "bower-asset/bootstrap", | 29 | "name": "bower-asset/bootstrap", |
| 11 | "version": "v3.3.7", | 30 | "version": "v3.3.7", |
| 12 | "source": { | 31 | "source": { |
| @@ -105,6 +124,22 @@ | @@ -105,6 +124,22 @@ | ||
| 105 | "type": "bower-asset" | 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 | "name": "bower-asset/yii2-pjax", | 143 | "name": "bower-asset/yii2-pjax", |
| 109 | "version": "2.0.7.1", | 144 | "version": "2.0.7.1", |
| 110 | "source": { | 145 | "source": { |
frontend/assets/AppAsset.php
| 1 | <?php | 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 | \ No newline at end of file | 21 | \ No newline at end of file |
frontend/views/site/index.php
| @@ -15,30 +15,67 @@ | @@ -15,30 +15,67 @@ | ||
| 15 | 15 | ||
| 16 | <div class="body-content"> | 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 | </div> | 48 | </div> |
| 42 | - | ||
| 43 | </div> | 49 | </div> |
| 44 | </div> | 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 | \ No newline at end of file | 82 | \ No newline at end of file |