Add forms for shift schedule. Add saving of shift schedule. #534

src/Controller/ShiftScheduleController.php

@@ -2,4 +2,215 @@
 
 namespace App\Controller;
 
+use App\Entity\ShiftSchedule;
 
+use Doctrine\ORM\Query;
+use Doctrine\ORM\QueryBuilder;
+use Doctrine\ORM\EntityManagerInterface;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Validator\Validator\ValidatorInterface;
+use Symfony\Bundle\FrameworkBundle\Controller\Controller;
+
+use Sensio\Bundle\FrameworkExtraBundle\Configuration\ParamConverter;
+
+use Catalyst\MenuBundle\Annotation\Menu;
+
+use DateTime;
+
+class ShiftScheduleController extends Controller
+{
+    /**
+     * @Menu(selected="shift_schedule_list")
+     */
+    public function index()
+    {
+        $this->denyAccessUnlessGranted('shift_schedule.list', null, 'No access.');
+
+        return $this->render('shift-schedule/list.html.twig');
+    }
+
+    public function rows(Request $req)
+    {
+        $this->denyAccessUnlessGranted('shift_schedule.list', null, 'No access.');
+
+        // get query builder
+        $qb = $this->getDoctrine()
+                ->getRepository(ShiftSchedule::class)
+                ->createQueryBuilder('q');
+
+        // get datatable params
+        $datatable = $req->request->get('datatable');
+
+        // count total records
+        $tquery = $qb->select('COUNT(q)');
+        $this->setQueryFilters($datatable, $tquery);
+        $total = $tquery->getQuery()
+            ->getSingleScalarResult();
+
+        // get current page number
+        $page = $datatable['pagination']['page'] ?? 1;
+
+        $perpage = $datatable['pagination']['perpage'];
+        $offset = ($page - 1) * $perpage;
+
+        // add metadata
+        $meta = [
+            'page' => $page,
+            'perpage' => $perpage,
+            'pages' => ceil($total / $perpage),
+            'total' => $total,
+            'sort' => 'asc',
+            'field' => 'id'
+        ];
+
+        // build query
+        $query = $qb->select('q');
+        $this->setQueryFilters($datatable, $query);
+
+        // check if sorting is present, otherwise use default
+        if (isset($datatable['sort']['field']) && !empty($datatable['sort']['field'])) {
+            $order = $datatable['sort']['sort'] ?? 'asc';
+            $query->orderBy('q.' . $datatable['sort']['field'], $order);
+        } else {
+            $query->orderBy('q.id', 'asc');
+        }
+
+        // get rows for this page
+        $obj_rows = $query->setFirstResult($offset)
+            ->setMaxResults($perpage)
+            ->getQuery()
+            ->getResult();
+
+        // process rows
+        $rows = [];
+        foreach ($obj_rows as $orow) {
+            // add row data
+            $shifts = $orow->getHourShifts();
+            $hour_shifts = [];
+            foreach ($shifts as $shift)
+            {
+                $hour_shifts[] = [
+                    $shift['start'] . ' - ' . $shift['end']
+                ];
+            }
+
+            $row['id'] = $orow->getID();
+            $row['name'] = $orow->getName();
+            $row['start_time'] = $orow->getStartTime()->format('g:i A');
+            $row['end_time'] = $orow->getEndtime()->format('g:i A');
+            $row['hour_shifts'] = $hour_shifts;
+
+            // add row metadata
+            $row['meta'] = [
+                'update_url' => '',
+                'delete_url' => ''
+            ];
+
+            // add crud urls
+            if ($this->isGranted('shift_schedule.update'))
+                $row['meta']['update_url'] = $this->generateUrl('shift_schedule_update', ['id' => $row['id']]);
+            if ($this->isGranted('shift_schedule.delete'))
+                $row['meta']['delete_url'] = $this->generateUrl('shift_schedule_delete', ['id' => $row['id']]);
+
+            $rows[] = $row;
+        }
+
+        // response
+        return $this->json([
+            'meta' => $meta,
+            'data' => $rows
+        ]);
+    }
+
+    /**
+     * @Menu(selected="shift_schedule_list")
+     */
+    public function addForm()
+    {
+        $this->denyAccessUnlessGranted('shift_schedule.add', null, 'No access.');
+
+        $params = [];
+        $params['obj'] = new ShiftSchedule();
+        $params['mode'] = 'create';
+
+        // response
+        return $this->render('shift-schedule/form.html.twig', $params);
+    }
+
+    public function addSubmit(Request $req, EntityManagerInterface $em, ValidatorInterface $validator)
+    {
+        $this->denyAccessUnlessGranted('shift_schedule.add', null, 'No access.');
+
+        $obj = new ShiftSchedule();
+
+        // set and save values
+        $this->setObject($obj, $em, $req);
+
+        // validate
+        $errors = $validator->validate($obj);
+
+        // initialize error list
+        $error_array = [];
+
+        // add errors to list
+        foreach ($errors as $error) {
+            $error_array[$error->getPropertyPath()] = $error->getMessage();
+        }
+
+        // check if any errors were found
+        if (!empty($error_array)) {
+            // return validation failure response
+            return $this->json([
+                'success' => false,
+                'errors' => $error_array
+            ], 422);
+        }
+
+        // validated! save the entity
+        $em->persist($obj);
+        $em->flush();
+
+        // return successful response
+        return $this->json([
+            'success' => 'Changes have been saved!'
+        ]);
+    }
+
+    protected function setQueryFilters($datatable, QueryBuilder $query)
+    {
+        if (isset($datatable['query']['data-rows-search']) && !empty($datatable['query']['data-rows-search'])) {
+            $query->where('q.name LIKE :filter')
+                ->setParameter('filter', '%' . $datatable['query']['data-rows-search'] . '%');
+        }
+    }
+
+    protected function setObject(ShiftSchedule $obj, EntityManagerInterface $em, Request $req)
+    {
+        $name = $req->request->get('name');
+
+        // times
+        $format = 'g:i A';
+        $start_time = DateTime::createFromFormat($format, $req->request->get('start_time'));
+        $end_time = DateTime::createFromFormat($format, $req->request->get('end_time'));
+
+        // get the shift entries
+        $shift_start = $req->request->get('shift_start_time');
+        $shift_end = $req->request->get('shift_end_time');
+
+        $shifts = [];
+        for ($i = 0; $i < count($shift_start); $i++)
+        {
+            $shifts[] = [
+                'start' => $shift_start[$i],
+                'end' => $shift_end[$i]
+            ];
+        }
+
+        $obj->setName($name)
+            ->setStartTime($start_time)
+            ->setEndTime($end_time)
+            ->setHourShifts($shifts);
+    }
+
+}

src/Entity/ShiftSchedule.php

@@ -5,6 +5,8 @@ namespace App\Entity;
 use Doctrine\ORM\Mapping as ORM;
 use Symfony\Component\Validator\Constraints as Assert;
 
+use DateTime;
+
 /**
  * @ORM\Entity
  * @ORM\Table(name="shift_schedule")
@@ -28,26 +30,19 @@ class ShiftSchedule
 
     // start time
     /**
-     * @ORM\Column(type="string", nullable=true)
+     * @ORM\Column(type="time")
      * @Assert\NotBlank()
      */
     protected $start_time;
 
     // end time
     /**
-     * @ORM\(Column(type="string", nullable=true)
+     * @ORM\Column(type="time")
      * @Assert\NotBlank()
      */
     protected $end_time;
 
-    // number of hours in a shift
-    /**
-     * @ORM\(Column(type="integer")
-     * @Assert\NotBlank()
-     */
-    protected $number_of_hours;
-
-    // hours
+    // hour shifts
     /**
      * @ORM\Column(type="json")
      */
@@ -55,6 +50,8 @@ class ShiftSchedule
 
     public function __construct()
     {
+        $this->start_time = new DateTime();
+        $this->end_time = new DateTime();
         $this->hour_shifts = [];
     }
 
@@ -79,7 +76,7 @@ class ShiftSchedule
         return $this->start_time;
     }
 
-    public function setStartTime($start_time)
+    public function setStartTime(DateTime $start_time)
     {
         $this->start_time = $start_time;
         return $this;
@@ -90,30 +87,19 @@ class ShiftSchedule
         return $this->end_time;
     }
 
-    public function setEndTime($end_time)
+    public function setEndTime(DateTime $end_time)
     {
         $this->end_time = $end_time;
         return $this;
     }
 
-    public function getNumberOfHours()
-    {
-        return $this->number_of_hours;
-    }
-
-    public function setNumberOfHours($number_of_hours)
-    {
-        $this->number_of_hours = $number_of_hours;
-        return $this;
-    }
-
     public function addHourShift($id, $value)
     {
         $this->hour_shifts[$id] = $value;
         return $this;
     }
 
-    public function getHourShiftsiById($id)
+    public function getHourShiftsById($id)
     {
         // return null if we don't have it
         if (!isset($this->hour_shifts[$id]))
@@ -126,4 +112,10 @@ class ShiftSchedule
     {
         return $this->hour_shifts;
     }
+
+    public function setHourShifts(array $hour_shifts)
+    {
+        $this->hour_shifts = $hour_shifts;
+        return $this;
+    }
 }

templates/shift-schedule/form.html.twig

@@ -0,0 +1,251 @@
+{% extends 'base.html.twig' %}
+
+{% block body %}
+<!-- BEGIN: Subheader -->
+<div class="m-subheader">
+    <div class="d-flex align-items-center">
+        <div class="mr-auto">
+            <h3 class="m-subheader__title">Shift Schedules</h3>
+        </div>
+    </div>
+</div>
+<!-- END: Subheader -->
+<div class="m-content">
+    <!--Begin::Section-->
+    <div class="row">
+        <div class="col-xl-12">
+            <div class="m-portlet m-portlet--mobile">
+                <div class="m-portlet__head">
+                    <div class="m-portlet__head-caption">
+                        <div class="m-portlet__head-title">
+                            <span class="m-portlet__head-icon">
+                                <i class="fa fa-building"></i>
+                            </span>
+                            <h3 class="m-portlet__head-text">
+                                {% if mode == 'update' %}
+                                    Edit Shift Schedule 
+                                    <small>{{ obj.getName() }}</small>
+                                {% else %}
+                                    New Shift Schedule
+                                {% endif %}
+                            </h3>
+                        </div>
+                    </div>
+                </div>
+                <form id="row-form" class="m-form m-form--label-align-right" method="post" action="{{ mode == 'update' ? url('shift_schedule_update_submit', {'id': obj.getId()}) : url('shift_schedule_create_submit') }}">
+                    <div class="m-portlet__body">
+                        <div class="form-group m-form__group row no-border">
+                            <div class="col-lg-6">
+                                <label for="name" data-field="name">
+                                    Name
+                                </label>
+                                <input type="text" name="name" class="form-control m-input" value="{{ obj.getName()|default('') }}">
+                                <div class="form-control-feedback hide" data-field="name"></div>
+                            </div>
+                        </div>
+                        <div class="form-group m-form__group row no-border">
+                            <div class="col-lg-3">
+                                <label for="start_time">
+                                    Start Time
+                                </label>
+                                <div class="input-group timepicker">
+                                    <input id="timepicker_start" type="text" name="start_time" class="form-control m-input tp-start" readonly placeholder="Select time" type="text" value="{{ obj.getStartTime.format('g:i A') }}" />
+                                    <span class="input-group-addon">
+                                        <i class="la la-clock-o"></i>
+                                    </span>
+                                </div>
+                                <div class="form-control-feedback hide" data-field="start_time"></div>
+                            </div>
+                            <div class="col-lg-3">
+                                <label for="end_time">
+                                    End Time
+                                </label>
+                                <div class="input-group timepicker">
+                                    <input id="timepicker_end" type="text" name="end_time" class="form-control m-input tp-end" readonly placeholder="Select time" type="text" value="{{ obj.getEndTime.format('g:i A') }}" />
+                                    <span class="input-group-addon">
+                                        <i class="la la-clock-o"></i>
+                                    </span>
+                                </div>
+                                <div class="form-control-feedback hide" data-field="end_time"></div>
+                            </div>
+                        </div>
+                        <div class="m-form__seperator m-form__seperator--dashed"></div>
+                            <div class="m-form__section" id="shift-entry-section">
+                                <div class="m-form__heading">
+                                    <h3 class="m-form__heading-title">
+                                        Breakdown of Shift Schedule    
+                                    </h3>
+                                </div>
+                                <div class="form-group m-form__group row">
+                                    <button type="button" class="btn btn-primary" id="btn-add-shift-entry">Add Shift Entry</button>
+                                </div>
+                                <div class="form-group m-form__group row">
+                                    <div class="col-lg-3">
+                                        <div class="input-group timepicker">
+                                            <input id="timepicker_start_entry" type="text" name="shift_start_time[]" class="form-control m-input tp-start-shift-entry" readonly placeholder="Select time" type="text" value="{{ obj.getStartTime.format('g:i A') }}" />
+                                            <span class="input-group-addon">
+                                                <i class="la la-clock-o"></i>
+                                            </span>
+                                        </div>
+                                    </div>
+                                    <div class="col-lg-3">
+                                        <div class="input-group timepicker">
+                                            <input id="timepicker_end_entry" type="text" name="shift_end_time[]" class="form-control m-input tp-end-shift-entry" readonly placeholder="Select time" type="text" value="{{ obj.getEndTime.format('g:i A') }}" />
+                                            <span class="input-group-addon">
+                                                <i class="la la-clock-o"></i>
+                                            </span>
+                                        </div>
+                                    </div>
+                                    <div class="col-lg-1">
+                                        <button class="btn btn-danger btn-shift-entry-remove">X</button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="m-portlet__foot m-portlet__foot--fit">
+                <div class="m-form__actions m-form__actions--solid m-form__actions--right">
+                    <div class="row">
+                        <div class="col-lg-12">
+                            <button type="submit" class="btn btn-success">Submit</button>
+                                <a href="{{ url('shift_schedule_list') }}" class="btn btn-secondary">Back</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </form>
+    </div>
+</div>
+{% endblock %}
+
+
+{% block scripts %}
+<script>
+
+var timepicker_options = {
+    format: "HH:ii P",
+        minuteStep: 1,
+        showMeridian: true,
+        snapToStep: true,
+        bootcssVer: 3,
+        todayHighlight: true,
+        autoclose: true
+};
+
+$(document).ready(function() {
+    // timepickers
+    $(".tp-start, .tp-end, .tp-start-shift-entry, .tp-end-shift-entry").timepicker(timepicker_options);
+});
+
+
+// add shift entry
+$("#btn-add-shift-entry").click(function() {
+    console.log('adding shift entry');
+
+    var html = '<div class="form-group m-form__group row">';
+    html += '<div class="col-lg-3">';
+    html += '<div class="input-group timepicker">';
+    html += '<input id="timepicker_start_entry" type="text" name="shift_start_time[]" class="form-control m-input tp-start-shift-entry" readonly placeholder="Select time" type="text" value="{{ obj.getStartTime.format('g:i A') }}" />';
+    html += '<span class="input-group-addon">';
+    html += '<i class="la la-clock-o"></i>';
+    html += '</span></div></div>';
+
+    html += '<div class="col-lg-3">';
+    html += '<div class="input-group timepicker">';
+    html += '<input id="timepicker_end_entry" type="text" name="shift_end_time[]" class="form-control m-input tp-end-shift-entry" readonly placeholder="Select time" type="text" value="{{ obj.getEndTime.format('g:i A') }}" />';
+    html += '<span class="input-group-addon">';
+    html += '<i class="la la-clock-o"></i>';
+    html += '</span></div></div>';
+
+    html += '<div class="col-lg-1">';
+    html += '<button class="btn btn-danger btn-shift-entry-remove">X</button>';
+    html += '</div>';
+
+    $('#shift-entry-section').append(html);
+
+    // add timepicker functionality to just added timepickers
+    $(".tp-start-shift-entry, .tp-end-shift-entry").timepicker(timepicker_options);
+
+    return false;
+});
+
+// remove shift entry
+$('body').on('click', '.btn-shift-entry-remove', function(e) {
+    console.log('removing service charge');
+
+    $(this).closest('.row').remove();
+
+    return false;
+});
+
+$(function() {
+    $("#row-form").submit(function(e) {
+        var form = $(this);
+
+        e.preventDefault();
+
+        $.ajax({
+            method: "POST",
+            url: form.prop('action'),
+            data: form.serialize()
+        }).done(function(response) {
+            // remove all error classes
+            removeErrors();
+            swal({
+                title: 'Done!',
+                text: 'Your changes have been saved!',
+                type: 'success',
+                onClose: function() {
+                    window.location.href = "{{ url('shift_schedule_list') }}";
+                }
+            });
+        }).fail(function(response) {
+            if (response.status == 422) {
+                var errors = response.responseJSON.errors;
+                var firstfield = false;
+
+                // remove all error classes first
+                removeErrors();
+
+                // display errors contextually
+                $.each(errors, function(field, msg) {
+                    var formfield = $("[name='" + field + "']");
+                    var label = $("label[data-field='" + field + "']");
+                    var msgbox = $(".form-control-feedback[data-field='" + field + "']");
+
+                    // add error classes to bad fields
+                    formfield.addClass('form-control-danger');
+                    label.addClass('has-danger');
+                    msgbox.html(msg).addClass('has-danger').removeClass('hide');
+
+                    // check if this field comes first in DOM
+                    var domfield = formfield.get(0);
+
+                    if (!firstfield || (firstfield && firstfield.compareDocumentPosition(domfield) === 2)) {
+                        firstfield = domfield;
+                    }
+                });
+
+                // focus on first bad field
+                firstfield.focus();
+
+                // scroll to above that field to make it visible
+                $('html, body').animate({
+                    scrollTop: $(firstfield).offset().top - 200
+                }, 100);
+            }
+        });
+    });
+
+    // remove all error classes
+    function removeErrors() {
+        $(".form-control-danger").removeClass('form-control-danger');
+        $("[data-field]").removeClass('has-danger');
+        $(".form-control-feedback[data-field]").addClass('hide');
+    }
+
+});
+</script>
+{% endblock %}

templates/shift-schedule/list.html.twig

@@ -0,0 +1,155 @@
+{% extends 'base.html.twig' %}
+
+{% block body %}
+    <!-- BEGIN: Subheader -->
+    <div class="m-subheader">
+        <div class="d-flex align-items-center">
+            <div class="mr-auto">
+                <h3 class="m-subheader__title">
+                   Shift Schedules 
+                </h3>
+            </div>
+        </div>
+    </div>
+    <!-- END: Subheader -->
+    <div class="m-content">
+        <!--Begin::Section-->
+        <div class="row">
+            <div class="col-xl-12">
+            	<div class="m-portlet m-portlet--mobile">
+                    <div class="m-portlet__body">
+                    	<div class="m-form m-form--label-align-right m--margin-top-20 m--margin-bottom-30">
+                            <div class="row align-items-center">
+                                <div class="col-xl-8 order-2 order-xl-1">
+                                    <div class="form-group m-form__group row align-items-center">
+                                        <div class="col-md-4">
+                                            <div class="m-input-icon m-input-icon--left">
+                                                <input type="text" class="form-control m-input m-input--solid" placeholder="Search..." id="data-rows-search">
+                                                    <span class="m-input-icon__icon m-input-icon__icon--left">
+                                                        <span><i class="la la-search"></i></span>
+                                                    </span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-xl-4 order-1 order-xl-2 m--align-right">
+                                    <a href="{{ url('shift_schedule_create') }}" class="btn btn-focus m-btn m-btn--custom m-btn--icon m-btn--air m-btn--pill">
+                                        <span>
+                                            <i class="fa fa-building"></i>
+                                            <span>New Shift Schedule</span>
+                                        </span>
+                                    </a>					
+                                    <div class="m-separator m-separator--dashed d-xl-none"></div>
+                                </div>
+                            </div>
+                        </div>
+                        <!--begin: Datatable -->
+                        <div id="data-rows"></div>
+                        <!--end: Datatable -->
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+    $(function() {
+        var options = {
+            data: {
+                type: 'remote',
+                source: {
+                    read: {
+                        url: '{{ url("shift_schedule_rows") }}',
+                        method: 'POST',
+                    }
+                },
+                saveState: {
+                    cookie: false,
+                    webstorage: false
+                },
+                    pageSize: 10,
+                    serverPaging: true,
+                    serverFiltering: true,
+                    serverSorting: true
+            },
+            columns: [
+            {
+                field: 'id',
+                title: 'ID',
+                width: 30
+            },
+            {
+                field: 'name',
+                title: 'Name'
+            },
+            {
+                field: 'start_time',
+                title: 'Start Time'
+            },
+            {
+                field: 'end_time',
+                title: 'End Time'
+            },
+            {
+                field: 'hour_shifts',
+                title: 'Hour Shifts'
+            },
+            {
+                field: 'Actions',
+                width: 110,
+                title: 'Actions',
+                sortable: false,
+                overflow: 'visible',
+                template: function (row, index, datatable) {
+                    var actions = '';
+                            
+                    if (row.meta.update_url != '') {
+                        actions += '<a href="' + row.meta.update_url + '" class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill btn-edit" data-id="' + row.name + '" title="Edit"><i class="la la-edit"></i></a>';
+                    }
+
+                    if (row.meta.delete_url != '') {
+                        actions += '<a href="' + row.meta.delete_url + '" class="m-portlet__nav-link btn m-btn m-btn--hover-danger m-btn--icon m-btn--icon-only m-btn--pill btn-delete" data-id="' + row.name + '" title="Delete"><i class="la la-trash"></i></a>';
+                    }
+							
+                    return actions;
+                },
+            }
+            ],
+            search: {
+                onEnter: false,
+                input: $('#data-rows-search'),
+                delay: 400
+            }
+        };
+
+        var table = $("#data-rows").mDatatable(options);
+
+        $(document).on('click', '.btn-delete', function(e) {
+            var url = $(this).prop('href');
+                var id = $(this).data('id');
+                var btn = $(this);
+
+            e.preventDefault();
+
+            swal({
+                title: 'Confirmation',
+                html: 'Are you sure you want to delete <strong>' + id + '</strong>?',
+                type: 'warning',
+                showCancelButton: true
+            }).then((result) => {
+                if (result.value) {
+                    $.ajax({
+                        method: "DELETE",
+                        url: url
+                    }).done(function(response) {
+                        table.row(btn.parents('tr')).remove();
+                        table.reload();
+                    });
+                }
+            });
+        });
+    });
+</script>
+{% endblock %}