Adding support for new fields

src/Migrations/SyntaxBuilder.php

@@ -13,6 +13,13 @@
 class SyntaxBuilder
 {
 
+    private $reg_exp_list = [
+        'phone_us' => '\(?(\d{3})\)?[- ]?(\d{3})[- ]?(\d{4})$',
+        'url' => '#\b(([\w-]+://?|www[.])[^\s()<>]+(?:\([\w\d]+\)|([^[:punct:]\s]|/)))#iS',
+        'decimal' => '^\d+(\.\d{1,2})?$',
+        'money' => '^\d+(\.\d{1,2})?$',
+    ];
+
     /**
      * A template to be inserted.
      *
@@ -240,8 +247,9 @@ private function addColumn($field, $type = "migration", $meta = "")
 
 
         if ($type == 'migration') {
+            $fieldType = $this->_getFieldType($field['type']);
 
-            $syntax = sprintf("\$table->%s('%s')", $field['type'], $field['name']);
+            $syntax = sprintf("\$table->%s('%s')", $fieldType, $field['name']);
 
             // If there are arguments for the schema type, like decimal('amount', 5, 2)
             // then we have to remember to work those in.
@@ -293,6 +301,48 @@ private function addColumn($field, $type = "migration", $meta = "")
         return $syntax;
     }
 
+    /**
+     * Adding support for new field types
+     *
+     * @param $type
+     * @return null|string
+     */
+    private function _getFieldType($type)
+    {
+        $fieldType = null;
+        switch ($type) {
+            case 'colorpicker':
+            case 'phone_us':
+            case 'phone_intl':
+            case 'url':
+            case 'email':
+            case 'file':
+            case 'image':
+            case 'oembed':
+                $fieldType = 'string';
+                break;
+            case 'money':
+                $fieldType = 'decimal';
+                break;
+            case 'checkbox':
+                $fieldType = 'boolean';
+                break;
+            case 'time':
+                $fieldType = 'time';
+                break;
+            case 'date':
+                $fieldType = 'date';
+                break;
+            case 'datetime':
+                $fieldType = 'datetime';
+                break;
+            default:
+                $fieldType = $type;
+                break;
+        }
+        return $fieldType;
+    }
+
     /**
      * Build form field with validation using Illuminate/Html Form facade or pure HTML
      *
@@ -415,21 +465,74 @@ private function htmlField($column, $variable, $field, $type)
             $value = '{{ is_null(old("'.$column.'")) ? $'.$variable.'->'.$column.' : old("'.$column.'") }}';
         }
 
+        $error_layout = "<div class=\"help-block with-errors\"></div>";
         switch ($field['type']) {
+            case 'string':
+            default:
+                $layout = "<input type=\"text\"  placeholder=\"$column\" id=\"$column-field\" name=\"$column\" class=\"form-control\" value=\"$value\"/>";
+                break;
+            case 'email':
+                $layout = $this->_getCustomValidationField('email',$column,$value,'Email address is invalid');
+                $layout .= $error_layout;
+                break;
+            case 'phone_us':
+                $layout = $this->_getCustomValidationField('text',$column,$value,'Please set U.S. phone valid', 'phone_us', '(000) 000-0000');
+                $layout .= $error_layout;
+                break;
+            case 'phone_intl':
+                $layout = $this->_getCustomValidationField('text',$column,$value,'Please set phone valid', '', '(00) 0000-0000');
+                $layout .= $error_layout;
+                break;
+            case 'url':
+            case 'oembed':
+                $layout = $this->_getCustomValidationField('url',$column,$value,'Please set URL valid');
+                $layout .= $error_layout;
+                break;
+            case 'money':
+                $layout = $this->_getCustomValidationField('text',$column,$value,'Decimal number is invalid', 'decimal', '00.00', true);
+                $layout .= $error_layout;
+                break;
             case 'date':
-                $layout = "<input type=\"text\" id=\"$column-field\" name=\"$column\" class=\"form-control date-picker\" value=\"$value\"/>";
+                $layout = "<input type=\"text\" id=\"$column-field\" name=\"$column\"   placeholder=\"$column\" class=\"form-control datepicker\" value=\"$value\"/>";
+                break;
+            case 'time':
+                $layout = "<input type=\"text\" id=\"$column-field\" name=\"$column\"   placeholder=\"$column\" class=\"form-control timepicker\" value=\"$value\"/>";
+                break;
+            case 'datetime':
+                $layout = "<input type=\"text\" id=\"$column-field\" name=\"$column\"   placeholder=\"$column\" class=\"form-control datetimepicker\" value=\"$value\"/>";
+                break;
+            case 'file':
+                $layout = "<input type=\"filepicker\" id=\"$column-field\" name=\"$column\"   placeholder=\"$column\" class=\"form-control\" value=\"$value\"/>";
+                break;
+            case 'colorpicker':
+
+                $layout = "<div id=\"$column-field\" class=\"colorpicker-element input-group colorpicker-component\">";
+                $layout.=   "<input type=\"text\" value=\"$value\" class=\"form-control\" name=\"$column\"  placeholder=\"$column\" />";
+                $layout.=   "<span class=\"input-group-addon\"><i></i></span>";
+                $layout.= "</div>";
+
                 break;
             case 'boolean':
-                $layout = "<div class=\"btn-group\" data-toggle=\"buttons\"><label class=\"btn btn-primary\"><input type=\"radio\" value=\"true\" name=\"$column\" id=\"$column-field\" autocomplete=\"off\"> True</label><label class=\"btn btn-primary active\"><input type=\"radio\" name=\"$column-field\" value=\"false\" id=\"$column-field\" autocomplete=\"off\"> False</label></div>";
+                $layout = "<div class=\"btn-group\" data-toggle=\"buttons\"><label class=\"btn btn-primary\"><input type=\"radio\" value=\"true\" name=\"$column-field\" id=\"$column-field\" autocomplete=\"off\"> True</label><label class=\"btn btn-primary active\"><input type=\"radio\" name=\"$column-field\" value=\"false\" id=\"$column-field\" autocomplete=\"off\"> False</label></div>";
                 break;
             case 'text':
-                $layout = "<textarea class=\"form-control\" id=\"$column-field\" rows=\"3\" name=\"$column\">$value</textarea>";
+                $layout = "<textarea class=\"form-control\" placeholder=\"$column\" id=\"$column-field\" rows=\"3\" name=\"$column\">$value</textarea>";
                 break;
-            case 'string':
-            default:
-                $layout = "<input type=\"text\" id=\"$column-field\" name=\"$column\" class=\"form-control\" value=\"$value\"/>";
         }
 
         return $layout;
     }
+
+    private function _getCustomValidationField($type, $column, $value, $errorMsg, $reg = '', $mask = '', $mask_reverse = false)
+    {
+        $regExp = isset($this->reg_exp_list[$reg]) ? $this->reg_exp_list[$reg] : '';
+        $data_mask = trim($mask) != '' ? ' data-mask="'. $mask .'" ' : '';
+        $data_mask_reverse = trim($mask_reverse) == true  ? ' data-mask-reverse="'. $mask_reverse.'" ' : '';
+        if (trim($regExp) == '') {
+            return "<input $data_mask $data_mask_reverse type=\"$type\" id=\"$column-field\" name=\"$column\" class=\"form-control\" value=\"$value\"  placeholder=\"$column\" data-error=\"$errorMsg\"  />";
+        } else {
+            return "<input $data_mask $data_mask_reverse type=\"$type\" id=\"$column-field\" pattern=\"$regExp\"  name=\"$column\" class=\"form-control\" value=\"$value\"  placeholder=\"$column\" data-error=\"$errorMsg\"  />";
+        }
+    }
+
 }

src/Stubs/views/bs3/pages/create.blade.php.stub

@@ -1,8 +1,13 @@
 @extends('layout')
-
+@section('css')
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/css/bootstrap-datepicker.css" rel="stylesheet">
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/jquery.datetimepicker.min.css" rel="stylesheet">
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.3.5/css/bootstrap-colorpicker.css" rel="stylesheet">
+  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
+@endsection
 @section('header')
     <div class="page-header">
-        <h1><i class="glyphicon glyphicon-plus"></i> {{Model}} / Create </h1>
+        <h1><i class="fa fa-plus" aria-hidden="true"></i> {{Class}} / Create </h1>
     </div>
 @endsection
 
@@ -12,17 +17,53 @@
     <div class="row">
         <div class="col-md-12">
 
-            <form action="{{ route('{{prefix}}{{models}}.store') }}" method="POST">
+            <form action="{{ route('{{prefix}}{{class}}.store') }}" method="POST" data-toggle="validator" role="form">
                 <input type="hidden" name="_token" value="{{ csrf_token() }}">
 
-                {{form_fields_empty}}
-
+                {{content_fields}}
                 <div class="well well-sm">
                     <button type="submit" class="btn btn-primary">Create</button>
-                    <a class="btn btn-link pull-right" href="{{ route('{{prefix}}{{models}}.index') }}"><i class="glyphicon glyphicon-backward"></i> Back</a>
+                    <a class="btn btn-link pull-right" href="{{ route('{{prefix}}{{class}}.index') }}"><i class="fa fa-backward" aria-hidden="true"></i> Back</a>
                 </div>
+
+                <div class="help-block with-errors"></div>
+
             </form>
 
         </div>
     </div>
-@endsection
+@endsection
+@section('scripts')
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.5/validator.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/js/bootstrap-datepicker.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.0/jquery.mask.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/build/jquery.datetimepicker.full.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.3.5/js/bootstrap-colorpicker.js"></script>
+  <script>
+    $(function(){
+        $.datetimepicker.setLocale('en');
+
+        $('.date-picker').datepicker({});
+        $('form[role="form"]').validator();
+        $('.timepicker').datetimepicker({
+            datepicker:false,
+            format:'H:i',
+            step:5
+        });
+
+        $('.datepicker').datetimepicker({
+            timepicker:false,
+            format: "Y/m/d"
+        });
+
+        $('.datetimepicker').datetimepicker({
+            dayOfWeekStart : 1,
+            lang:'en',
+            disabledDates:[],
+            startDate:	'2016/01/01'
+        });
+
+        $('.colorpicker-element').colorpicker();
+    })
+  </script>
+@endsection

src/Stubs/views/bs3/pages/edit.blade.php.stub

@@ -1,8 +1,13 @@
 @extends('layout')
-
+@section('css')
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/css/bootstrap-datepicker.css" rel="stylesheet">
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/jquery.datetimepicker.min.css" rel="stylesheet">
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.3.5/css/bootstrap-colorpicker.css" rel="stylesheet">
+  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
+@endsection
 @section('header')
     <div class="page-header">
-        <h1><i class="glyphicon glyphicon-edit"></i> {{Model}} / Edit #{{${{model}}->id}}</h1>
+        <h1><i class="fa fa-pencil-square-o" aria-hidden="true"></i> {{Class}} / Edit #{{${{classSingle}}->id}}</h1>
     </div>
 @endsection
 
@@ -12,18 +17,53 @@
     <div class="row">
         <div class="col-md-12">
 
-            <form action="{{ route('{{prefix}}{{models}}.update', ${{model}}->id) }}" method="POST">
+            <form action="{{ route('{{prefix}}{{class}}.update', ${{classSingle}}->id) }}" method="POST" data-toggle="validator" role="form">
                 <input type="hidden" name="_method" value="PUT">
                 <input type="hidden" name="_token" value="{{ csrf_token() }}">
 
-                {{form_fields_fillable}}
-
+                {{content_fields}}
                 <div class="well well-sm">
                     <button type="submit" class="btn btn-primary">Save</button>
-                    <a class="btn btn-link pull-right" href="{{ route('{{prefix}}{{models}}.index') }}"><i class="glyphicon glyphicon-backward"></i>  Back</a>
+                    <a class="btn btn-link pull-right" href="{{ route('{{prefix}}{{class}}.index') }}"><i class="fa fa-backward" aria-hidden="true"></i>  Back</a>
                 </div>
+
+                <div class="help-block with-errors"></div>
             </form>
 
         </div>
     </div>
-@endsection
+@endsection
+@section('scripts')
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.5/validator.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/js/bootstrap-datepicker.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.0/jquery.mask.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/build/jquery.datetimepicker.full.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.3.5/js/bootstrap-colorpicker.js"></script>
+  <script>
+    $(function(){
+        $.datetimepicker.setLocale('en');
+
+        $('.date-picker').datepicker({});
+        $('form[role="form"]').validator();
+        $('.timepicker').datetimepicker({
+            datepicker:false,
+            format:'H:i',
+            step:5
+        });
+
+        $('.datepicker').datetimepicker({
+            timepicker:false,
+            format: "Y/m/d"
+        });
+
+        $('.datetimepicker').datetimepicker({
+            dayOfWeekStart : 1,
+            lang:'en',
+            disabledDates:[],
+            startDate:	'2016/01/01'
+        });
+
+        $('.colorpicker-element').colorpicker();
+    })
+  </script>
+@endsection

src/Stubs/views/bs3/pages/index.blade.php.stub

@@ -1,60 +1,59 @@
 @extends('layout')
 
+@section('css')
+    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
+@endsection
 @section('header')
     <div class="page-header clearfix">
         <h1>
-            <i class="glyphicon glyphicon-align-justify"></i> {{Model}}
-            <a class="btn btn-success pull-right" href="{{ route('{{prefix}}{{models}}.create') }}"><i class="glyphicon glyphicon-plus"></i> Create</a>
+            <i class="fa fa-align-justify" aria-hidden="true"></i> {{Class}}
+            <a class="btn btn-success pull-right" href="{{ route('{{prefix}}{{class}}.create') }}"><i class="fa fa-plus" aria-hidden="true"></i> Create</a>
         </h1>
+
     </div>
 @endsection
 
 @section('content')
     <div class="row">
         <div class="col-md-12">
-            @if(${{models}}->count())
+            @if(${{class}}->count())
                 <table class="table table-condensed table-striped">
                     <thead>
                         <tr>
-                            <th>#</th>
+                            <th>ID</th>
                             {{header_fields}}
                             <th class="text-right">OPTIONS</th>
                         </tr>
                     </thead>
 
                     <tbody>
-                        @foreach(${{models}} as ${{model}})
+                        @foreach(${{class}} as ${{classSingle}})
                             <tr>
-                                <td>{{${{model}}->id}}</td>
-
+                                <td>{{${{classSingle}}->id}}</td>
                                 {{content_fields}}
-
                                 <td class="text-right">
-                                    <a class="btn btn-xs btn-primary" href="{{ route('{{prefix}}{{models}}.show', ${{model}}->id) }}">
-                                        <i class="glyphicon glyphicon-eye-open"></i> View
-                                    </a>
-
-                                    <a class="btn btn-xs btn-warning" href="{{ route('{{prefix}}{{models}}.edit', ${{model}}->id) }}">
-                                        <i class="glyphicon glyphicon-edit"></i> Edit
-                                    </a>
-
-                                    <form action="{{ route('{{prefix}}{{models}}.destroy', ${{model}}->id) }}" method="POST" style="display: inline;" onsubmit="return confirm('Delete? Are you sure?');">
-                                        {{csrf_field()}}
+                                    <a class="btn btn-xs btn-primary" href="{{ route('{{prefix}}{{class}}.show', ${{classSingle}}->id) }}"><i class="fa fa-eye" aria-hidden="true"></i> View</a>
+                                    <a class="btn btn-xs btn-warning" href="{{ route('{{prefix}}{{class}}.edit', ${{classSingle}}->id) }}"><i class="fa fa-pencil" aria-hidden="true"></i> Edit</a>
+                                    <form action="{{ route('{{prefix}}{{class}}.destroy', ${{classSingle}}->id) }}" method="POST" style="display: inline;" onsubmit="if(confirm('Delete? Are you sure?')) { return true } else {return false };">
                                         <input type="hidden" name="_method" value="DELETE">
-
-                                        <button type="submit" class="btn btn-xs btn-danger"><i class="glyphicon glyphicon-trash"></i> Delete</button>
+                                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
+                                        <button type="submit" class="btn btn-xs btn-danger"><i class="fa fa-trash" aria-hidden="true"></i></button>
                                     </form>
                                 </td>
                             </tr>
                         @endforeach
                     </tbody>
                 </table>
-                {!! ${{models}}->render() !!}
+                {!! ${{class}}->render() !!}
             @else
                 <h3 class="text-center alert alert-info">Empty!</h3>
             @endif
 
         </div>
     </div>
 
+@endsection
+
+@section('scripts')
+    <script type="text/javascript">!function(a){a(function(){a(".table tr").css({cursor:"pointer"}),a(".table tr").each(function(b,c){var d=a(c).find(".fa-eye").parent();d.toggle(),a(c).on("click",function(){window.location.href=d.attr("href")})})})}(jQuery);</script>
 @endsection