2.2 Blade: UI components

1. Date picker:

A built-in date selector control, can be easily inserted into a form.

Blade template file: /views/components/form/DatePicker.blade.php

usage:

@feDatePicker([
                'id'=>'element ID',
                'label'=>'Label text',
                'value'=>'Default Value'
                ])
@endfeDatePicker

---

2. File Uploader:

Insert a uploader interface for user to process uploads.

Blade template file: /views/components/FileUpload.blade.php

usage:

@fefileupload([
                'parameter'=>'',
                 ...
                ])
@endfefileupload

Parameter & options:

parameter name	Values	Description
custom_action	string	Custom URL for the upload control. Default to route('LF_FileUploads'), URL:'/lf_uploadfiles/'
formID	string	Element ID, default to 'LF_fileUploads_form'
multifile	boolean	If multiple of files are allowed to be uploaded

note: Controller "LF_FileUpload_Controller@processUploads" is used to process the files uploaded.

Initially, files are stored at "storage/LF_FilesUpload/"

---

3. Datatable:

A one stop-shop table control that renders html tables with filters, ajax data source, row-highlights, etc. This control uses a third-party plugin called DataTables. For more information, please visit DataTables Official website.

Blade template file: /views/components/DataTable.blade.php

usage:

@feDataTable([
                'parameter'=>'',
                 ...
                ])
html contents...
@endfeDataTable

Parameter & options:

parameter name	Values	Description
header	string	table header text
tableID	string	html element ID
headerList	array	list of header text. eg: ['idx','name','age',...]
JsSetting	array	additional dataTable js configurations. eg:['serverSide'=>true,'columnDefs'=>['targets'=>1,'className'=>'cost','width'=>'20%']]. For a complete list of js available options,please visit DataTables Website
header_bg	string	bootstrap color class for the table header. [dark,primary,success,danger,info,etc...]. Refer to the css portion of the wiki for a complete list of color classes.
FilterLocation	string	set the location of the filter bar. [header or footer]
footer	string	footer text of the table
tableData	json	Initial table data.

---

4. Navigation Menu:

Adding menus to the navigation bar.

Blade template file: /views/components/sidebarMenu.blade.php

usage:

@fesidebarMenu([
                'parameter'=>'',
                 ...
                ])
@endfesidebarMenu

Parameter & options:

parameter name	Values	Description
active	boolean	if the link is active
subMenus	false/string	Default:false. html text to be displayed as submenus
icon	string	fontawesome icon name without "fa". For a list of all icons, please visit fontawesome

---

5. Notes control:

A complete note pad control with interface is available to be inserted anywhere on the page.

Blade template file: /views/components/Notes.blade.php

usage:

@fenotes([
                'parameter'=>'',
                 ...
            ])
    html contents...
@endfenotes

Parameter & options:

parameter name	Values	Description
custom_note_action	string	custom URL for saving the notes. Default: route('LF_SaveNotes'), URL:'/savenote/'
formID	string	element ID. Default: "LF_notes_form"
active	boolean	if class active is set
default	string	default notes contents

---

6. Bootstrap Modal control:

A bootstrap Modal control pack into one directive.

Blade template file: /views/components/Modal.blade.php

usage:

@feModal([
                'parameter'=>'',
                 ...
            ])
    html contents...
@endfeModal

Parameter & options:

parameter name	Values	Description
modal_class	string	class name of the modal
modal_direction	string	direction of the modal. Default: top
modal_ID	string	ID for the element
modal_size	string	modal size. Default: modal-lg
has_form	string	if create a form tag within the modal
form_action	string	target URL for the form
form_name	string	name of the form tag
form_id	string	ID for the form tag
header_bg	string	modal header background color class. Default: primary
header	string	modal header contents
footer_bg	string	modal footer background color class. Default: gray-light
footer	string	modal footercontents