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 | ... | ... |