Commit 1ec8d36cefcf7f53b2fa9e00a3cfed902007994f

Authored by Alexey Boroda
1 parent 39ba64e5

-Searching applied

backend/config/main.php
... ... @@ -52,6 +52,9 @@
52 52 'rules' => [
53 53 [ 'class' => 'yii\rest\UrlRule',
54 54 'controller' => 'call',
  55 + 'extraPatterns' => [
  56 + 'GET search' => 'search',
  57 + ]
55 58 ],
56 59 ],
57 60 ],
... ...
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 + }
... ...
frontend/assets/VueAsset.php 0 โ†’ 100644
  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
... ...