Улучшил виджет, доделал календарь дней рождений

backend/modules/calendar/controllers/CalendarController.php

@@ -42,12 +42,10 @@ class CalendarController extends Controller
      * Renders the index view for the module
      * @return string
      */
-    public function actionAlternative(){
+    public function actionCalendar(){
         $searchModel = new UserCardSearch();
         $dataProvider = $searchModel->search(['month'=>date('m', strtotime('2019-07-03'))]);
-        return $this->render('alternative', [
-            'dataProvider' => $dataProvider
-        ]);
+        return $this->render('calendar');
     }
 
     public function actionIndex()

backend/modules/calendar/views/calendar/calendar.php

@@ -0,0 +1,59 @@
+<?php
+use yii\helpers\Html;
+
+$this->title = 'Календарь ДР';
+?>
+<?= \backend\widgets\Calendar::widget([
+
+    'css' => '.success{color: orange;}',
+
+    'button' => Html::a('<i class="fas fa-long-arrow-alt-left"></i> Назад',
+        Yii::$app->request->referrer, ['class' => 'btn btn-primary',]),
+    'runBuild' => "function (date, content){
+        this.build(date, content)
+    }",
+    'updateContent' => "function(date){
+        let monthNumber = date.substr(5, 2);
+        return fetch('../ajax/get-birthday-by-month?' +
+            'month=' + monthNumber)
+            .then((res) => {
+                return res.json()
+            })
+    }",
+    'getColor' => "function (date, dates = null) {
+        for (let contentDate of dates) {
+            if (contentDate['dob'].substr(8, 2) == DateHelper.intToDate(date.getDate())) {
+                return 'success';
+            }
+        }
+    }",
+    'getHtmlContentForDate' => 'function (content, date) {
+        let flag = false
+        let html = `<table class="table table-striped table-bordered">
+    <thead>
+    <tr>
+        <th>#</th>
+        <th>ФИО</th>
+        <th>Дата рождения</th>
+        <th class="action-column">&nbsp;</th>
+    </tr>
+    </thead><tbody>`;
+        for (let i = 1; i <= content.length; i++) {
+            let model = content[i - 1];
+            if (model["dob"].substr(8, 2) == date.substr(8, 2)) {
+                flag = true;
+                html += `<tr data-key="${model["id"]}">`
+                html += `<td>${i}</td>`
+                html += `<td>${model["fio"]}</td>`
+                html += `<td>${model["dob"]}</td>`
+                html += CalendarHelper._getActionColumn(`secure/calendar/calendar`,model[`id`])
+                html += `</tr>`
+            }
+        }
+        html += `</tbody></table>`
+        if (flag) return html;
+        return "empty"
+    }'
+]) ?>
+
+

backend/modules/calendar/views/calendar/index.php

@@ -27,7 +27,7 @@ use yii\widgets\Pjax;
     </select>
 </p>
 <?=Html::a('Календарь дней рождений '.Html::tag('i', null, ['class' => 'far fa-calendar-alt']),
-    ['alternative'], ['class' => 'btn btn-success', 'style' => 'margin-left: 10px'])?>
+    ['calendar'], ['class' => 'btn btn-success', 'style' => 'margin-left: 10px'])?>
 </div>
 <?php
 Pjax::begin(['id' => 'reload']);

backend/widgets/Calendar.php

@@ -5,158 +5,40 @@ namespace backend\widgets;
 
 use yii\base\Widget;
 use yii\helpers\Html;
-use yii\helpers\Url;
 
 
 class Calendar extends Widget
 {
     public $button;
+
+    public $css;
+
     public $runBuild = 'function (date, content){
         this.build(date, content)
     }';
+
     public $updateContent = "function(){
+        return [];
+        /*
+        Example, return [model1, model2, model3 , ...] : 
+        
         let monthNumber = date.substr(5, 2);
         return fetch('../ajax/get-birthday-by-month?' +
             'month=' + monthNumber)
             .then((res) => {
                 return res.json()
-            })
+            })*/
     }";
+
     public $getColor = "function (date, dates = null) {
-        for (let contentDate of dates) {
-            if (contentDate['dob'].substr(8, 2) == DateHelper.intToDate(date.getDate())) {
-                return 'success';
-            }
-        }
-    }";
+        return `className`; 
+        }";
+
     public $getHtmlContentForDate = 'function (content, date) {
-        console.log(content)
-        let flag = false
-        let html = `<table class="table table-striped table-bordered">
-    <thead>
-    <tr>
-        <th>#</th>
-        <th>ФИО</th>
-        <th>Дата рождения</th>
-        <th class="action-column">&nbsp;</th>
-    </tr>
-    </thead><tbody>`;
-        for (let i = 1; i <= content.length; i++) {
-            let model = content[i - 1];
-            if (model["dob"].substr(8, 2) == date.substr(8, 2)) {
-                flag = true;
-                html += `<tr data-key="${model["id"]}">`
-                html += `<td>${i}</td>`
-                html += `<td>${model["fio"]}</td>`
-                html += `<td>${model["dob"]}</td>`
-                html += `<td><a href="/secure/calendar/calendar/view?id=${model["id"]}" title="Просмотр" aria-label="Просмотр" data-pjax="0">
-                <svg aria-hidden="true"
-                     style="display:inline-block;font-size:inherit;height:1em;overflow:visible;vertical-align:-.125em;width:1.125em"
-                     xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
-                    <path fill="currentColor"
-                          d="M573 241C518 136 411 64 288 64S58 136 3 241a32 32 0 000 30c55 105 162 177 285 177s230-72 285-177a32 32 0 000-30zM288 400a144 144 0 11144-144 144 144 0 01-144 144zm0-240a95 95 0 00-25 4 48 48 0 01-67 67 96 96 0 1092-71z"></path>
-                </svg>
-            </a> <a href="/secure/calendar/calendar/update?id=${model["id"]}" title="Редактировать" aria-label="Редактировать"
-                    data-pjax="0">
-                <svg aria-hidden="true"
-                     style="display:inline-block;font-size:inherit;height:1em;overflow:visible;vertical-align:-.125em;width:1em"
-                     xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-                    <path fill="currentColor"
-                          d="M498 142l-46 46c-5 5-13 5-17 0L324 77c-5-5-5-12 0-17l46-46c19-19 49-19 68 0l60 60c19 19 19 49 0 68zm-214-42L22 362 0 484c-3 16 12 30 28 28l122-22 262-262c5-5 5-13 0-17L301 100c-4-5-12-5-17 0zM124 340c-5-6-5-14 0-20l154-154c6-5 14-5 20 0s5 14 0 20L144 340c-6 5-14 5-20 0zm-36 84h48v36l-64 12-32-31 12-65h36v48z"></path>
-                </svg>
-            </a> <a href="/secure/calendar/calendar/delete?id=${model["id"]}" title="Удалить" aria-label="Удалить" data-pjax="0"
-                    data-confirm="Вы уверены, что хотите удалить этот элемент?" data-method="post">
-                <svg aria-hidden="true"
-                     style="display:inline-block;font-size:inherit;height:1em;overflow:visible;vertical-align:-.125em;width:.875em"
-                     xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
-                    <path fill="currentColor"
-                          d="M32 464a48 48 0 0048 48h288a48 48 0 0048-48V128H32zm272-256a16 16 0 0132 0v224a16 16 0 01-32 0zm-96 0a16 16 0 0132 0v224a16 16 0 01-32 0zm-96 0a16 16 0 0132 0v224a16 16 0 01-32 0zM432 32H312l-9-19a24 24 0 00-22-13H167a24 24 0 00-22 13l-9 19H16A16 16 0 000 48v32a16 16 0 0016 16h416a16 16 0 0016-16V48a16 16 0 00-16-16z"></path>
-                </svg>
-            </a>
-        </td>`
-                html += `</tr>`
-            }
-        }
-        html += `</tbody></table>`
-        if (flag) return html;
-        return "empty"
+        return `<div class="content">${content}</div>`;
     }';
 
-    /*
-
-    CalendarHelper._updateContent = async function(){
-        let monthNumber = date.substr(5, 2);
-        return fetch('../ajax/get-birthday-by-month?' +
-            'month=' + monthNumber)
-            .then((res) => {
-                return res.json()
-            })
-    }
-
-    CalendarHelper._getColor = function (date, dates = null) {
-        for (let contentDate of dates) {
-            if (contentDate['dob'].substr(8, 2) == DateHelper.intToDate(date.getDate())) {
-                return 'success';
-            }
-        }
-    }
-
-    CalendarHelper._getHtmlContentForDate = function (content, date) {
-        console.log(content)
-        let flag = false
-
-        let html = `<table class="table table-striped table-bordered">
-    <thead>
-    <tr>
-        <th>#</th>
-        <th>ФИО<th>
-            <a href="/secure/calendar/calendar/index?UserCardSearch%5Bfio%5D=&amp;UserCardSearch%5Bdob%5D=2003-07-18&amp;sort=dob"
-               data-sort="dob">Дата рождения</a></th>
-        <th class="action-column">&nbsp;</th>
-    </tr>
-    </thead><tbody>`;
-        for (let i = 1; i <= content.length; i++) {
-
-            let model = content[i - 1];
-            if (model['dob'].substr(8, 2) == date.substr(8, 2)) {
-                flag = true;
-                html += `<tr data-key="${model['id']}">`
-                html += `<td>${i}</td>`
-                html += `<td>${model['fio']}</td>`
-                html += `<td>${model['dob']}</td>`
-                html += `<td><a href="/secure/calendar/calendar/view?id=${model['id']}" title="Просмотр" aria-label="Просмотр" data-pjax="0">
-                <svg aria-hidden="true"
-                     style="display:inline-block;font-size:inherit;height:1em;overflow:visible;vertical-align:-.125em;width:1.125em"
-                     xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
-                    <path fill="currentColor"
-                          d="M573 241C518 136 411 64 288 64S58 136 3 241a32 32 0 000 30c55 105 162 177 285 177s230-72 285-177a32 32 0 000-30zM288 400a144 144 0 11144-144 144 144 0 01-144 144zm0-240a95 95 0 00-25 4 48 48 0 01-67 67 96 96 0 1092-71z"></path>
-                </svg>
-            </a> <a href="/secure/calendar/calendar/update?id=${model['id']}" title="Редактировать" aria-label="Редактировать"
-                    data-pjax="0">
-                <svg aria-hidden="true"
-                     style="display:inline-block;font-size:inherit;height:1em;overflow:visible;vertical-align:-.125em;width:1em"
-                     xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-                    <path fill="currentColor"
-                          d="M498 142l-46 46c-5 5-13 5-17 0L324 77c-5-5-5-12 0-17l46-46c19-19 49-19 68 0l60 60c19 19 19 49 0 68zm-214-42L22 362 0 484c-3 16 12 30 28 28l122-22 262-262c5-5 5-13 0-17L301 100c-4-5-12-5-17 0zM124 340c-5-6-5-14 0-20l154-154c6-5 14-5 20 0s5 14 0 20L144 340c-6 5-14 5-20 0zm-36 84h48v36l-64 12-32-31 12-65h36v48z"></path>
-                </svg>
-            </a> <a href="/secure/calendar/calendar/delete?id=${model['id']}" title="Удалить" aria-label="Удалить" data-pjax="0"
-                    data-confirm="Вы уверены, что хотите удалить этот элемент?" data-method="post">
-                <svg aria-hidden="true"
-                     style="display:inline-block;font-size:inherit;height:1em;overflow:visible;vertical-align:-.125em;width:.875em"
-                     xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
-                    <path fill="currentColor"
-                          d="M32 464a48 48 0 0048 48h288a48 48 0 0048-48V128H32zm272-256a16 16 0 0132 0v224a16 16 0 01-32 0zm-96 0a16 16 0 0132 0v224a16 16 0 01-32 0zm-96 0a16 16 0 0132 0v224a16 16 0 01-32 0zM432 32H312l-9-19a24 24 0 00-22-13H167a24 24 0 00-22 13l-9 19H16A16 16 0 000 48v32a16 16 0 0016 16h416a16 16 0 0016-16V48a16 16 0 00-16-16z"></path>
-                </svg>
-            </a>
-        </td>`
-                html += `</tr>`
-            }
-        }
-        html += `</tbody></table>`
-        if (flag) return html;
-        return "empty"
-    }
-      */
+    public $script = 'CalendarHelper.main()';
 
     public function init()
     {
@@ -167,7 +49,6 @@ class Calendar extends Widget
 
     public function run()
     {
-
         echo Html::beginTag('section', ['class' => 'calendar-contain']);
             echo Html::beginTag('aside', ['class' => 'calendar__sidebar']);
                 echo Html::beginTag('section', ['class' => 'title-bar']);
@@ -188,16 +69,11 @@ class Calendar extends Widget
             CalendarHelper._updateContent = async ' . $this->updateContent . ';
             CalendarHelper._getColor = ' . $this->getColor . ';
             
-            CalendarHelper.main()'
+            '.$this->script
         );
+        $this->view->registerCss($this->css);
     }
 
 }
-
-
 ?>
-<script>
-
-
-</script>
 

backend/widgets/Calendar/assets/js/src/CalendarHelper.js

@@ -57,6 +57,9 @@ class CalendarHelper {
                     let days = document.querySelectorAll('.calendar__day ')
 
                     for (let i = 0; i < days.length; i++) {
+                        if (parseInt(days[i].textContent)===parseInt(datePicker.value.substr(8,2))){
+                            days[i].classList.add('active_day')
+                        } else
                         if (days[i].classList.contains('active_day'))
                             days[i].classList.remove('active_day')
                     }
@@ -87,12 +90,11 @@ class CalendarHelper {
 
                 for (let i = 0; i < Object.keys(days).length; i++) {
                     let dateDay = parseInt(days[i].textContent);
-                    if (day) {
-                        if (parseInt(day.textContent) == dateDay && !days[i].classList.contains('inactive')) {
-                            days[i].classList.add('active_day')
-                        }
+                    if (parseInt(datePicker.value.substr(8,2)) == dateDay && !days[i].classList.contains('inactive')) {
+                        days[i].classList.add('active_day')
                     }
 
+
                     if (days[i].classList.contains('inactive')) {
                         days[i].onclick = function () {
                             let date = CalendarHelper._getFutureDate(datePicker.value, parseInt(days[i].textContent))
@@ -103,7 +105,6 @@ class CalendarHelper {
                         days[i].onclick = function () {
                             datePicker.value = datePicker.value.substr(0, 8) + DateHelper.intToDate(dateDay);
                             datePicker.onchange(this)
-                            days[i].classList.add('active_day')
                         }
                     }
                 }
@@ -183,4 +184,37 @@ class CalendarHelper {
 
     }
 
+    static _getActionColumn(url, id) {
+
+        return `
+        <td>
+            <a href="${url}/view?id=${id}" title="Просмотр" aria-label="Просмотр" data-pjax="0">
+<svg aria-hidden="true"
+             style="display:inline-block;font-size:inherit;height:1em;overflow:visible;vertical-align:-.125em;width:1.125em"
+             xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
+            <path fill="currentColor"
+                  d="M573 241C518 136 411 64 288 64S58 136 3 241a32 32 0 000 30c55 105 162 177 285 177s230-72 285-177a32 32 0 000-30zM288 400a144 144 0 11144-144 144 144 0 01-144 144zm0-240a95 95 0 00-25 4 48 48 0 01-67 67 96 96 0 1092-71z"></path>
+        </svg>
+    </a> 
+            <a href="${url}/update?id=${id}" title="Редактировать" aria-label="Редактировать"
+            data-pjax="0">
+            <svg aria-hidden="true"
+                 style="display:inline-block;font-size:inherit;height:1em;overflow:visible;vertical-align:-.125em;width:1em"
+                 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                <path fill="currentColor"
+                      d="M498 142l-46 46c-5 5-13 5-17 0L324 77c-5-5-5-12 0-17l46-46c19-19 49-19 68 0l60 60c19 19 19 49 0 68zm-214-42L22 362 0 484c-3 16 12 30 28 28l122-22 262-262c5-5 5-13 0-17L301 100c-4-5-12-5-17 0zM124 340c-5-6-5-14 0-20l154-154c6-5 14-5 20 0s5 14 0 20L144 340c-6 5-14 5-20 0zm-36 84h48v36l-64 12-32-31 12-65h36v48z"></path>
+            </svg>
+        </a> 
+            <a href="${url}/delete?id=${id}" title="Удалить" aria-label="Удалить" data-pjax="0"
+                data-confirm="Вы уверены, что хотите удалить этот элемент?" data-method="post">
+            <svg aria-hidden="true"
+                 style="display:inline-block;font-size:inherit;height:1em;overflow:visible;vertical-align:-.125em;width:.875em"
+                 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+                <path fill="currentColor"
+                      d="M32 464a48 48 0 0048 48h288a48 48 0 0048-48V128H32zm272-256a16 16 0 0132 0v224a16 16 0 01-32 0zm-96 0a16 16 0 0132 0v224a16 16 0 01-32 0zm-96 0a16 16 0 0132 0v224a16 16 0 01-32 0zM432 32H312l-9-19a24 24 0 00-22-13H167a24 24 0 00-22 13l-9 19H16A16 16 0 000 48v32a16 16 0 0016 16h416a16 16 0 0016-16V48a16 16 0 00-16-16z"></path>
+            </svg>   
+            </a>
+        </td>`;
+    }
+
 }