itsm-pc-handle/assets/views/system/easyform/easyform.html

<div>
    <!-- section worflow edit
	=============================================================-->
    <section id="pageWfEdit" ng-controller="ngwfWfEditController as vm">
        <div ng-init="">
            <div class="container">

                <section id="preview">
                    <div id="preview-content">
                        <div class="content-container">
                            <!-- taoster alert -->
                            <toaster-container toaster-options="{
					                                          'position-class': 'toast-top-full-width', 
					                                  		  'extendedTimeout':500,
					                                          'timeOut':500,                          
					                                          }">
                            </toaster-container>

                            <tabset justified="true">



                                <tab select="tabJustSelected(2)" active="tab.editTab.active" heading="编辑／新建">

                                    <div class="row">

                                        <!-- STEP INDICATOR -->
                                        <div class="row stepwizardTopmargin">
                                            <div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2">

                                                <div class="stepwizard">
                                                    <div class="row stepwizard-row">
                                                        <div class="stepwizard-step col-md-3">
                                                            <button type="button" class="btn btn-circle" ng-class="{'btn-primary': configuration.stepIndicators[0], 'btn-default': !configuration.stepIndicators[0]}">0</button>
                                                            <p>lines</p>
                                                        </div>
                                                        <div class="stepwizard-step col-md-3">
                                                            <button type="button" class="btn btn-circle" ng-class="{'btn-primary': configuration.stepIndicators[1], 'btn-default': !configuration.stepIndicators[1], 'disabled': (configuration.configStepCounter < 1)}">1</button>
                                                            <p>layout</p>
                                                        </div>
                                                        <div class="stepwizard-step col-md-3">
                                                            <button type="button" class="btn btn-default btn-circle" ng-class="{'btn-primary': configuration.stepIndicators[2], 'btn-default': !configuration.stepIndicators[2], 'disabled': (configuration.configStepCounter < 2)}">2</button>
                                                            <p>controls</p>
                                                        </div>
                                                        <div class="stepwizard-step col-md-3">
                                                            <button type="button" class="btn btn-default btn-circle" ng-class="{'btn-primary': configuration.stepIndicators[3], 'btn-default': !configuration.stepIndicators[3], 'disabled': (configuration.configStepCounter < 3)}">3</button>
                                                            <p>save</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>


                                    </div>

                                    <div class="row">

                                        <ul class="pager">

                                            <li ng-class="{'disabled':stepIndicators[0]}">
                                                <button class="btn btn-primary customPagerButton" ng-click="previousConfigStep()">
									  		<i class="fa fa-arrow-left fa-2x pull-left"></i>
									  		<span class="pull-right">Prev</span>
									  	</button>
                                            </li>

                                            <li ng-class="{'disabled':stepIndicators[3]}">
                                                <button class="btn btn-primary customPagerButton" ng-click="nextConfigStep()">
											  <span class="pull-left">Next</span>
											  <i class="fa fa-arrow-right fa-2x pull-right"></i>
										  </button>
                                            </li>
                                        </ul>


                                        <div class="animate-switch-container" ng-switch on="configuration.listConfigStep[configuration.configStepCounter]">

                                            <div class="animate-switch" ng-switch-when="init">

                                                <div class="col-md-4">
                                                    <div id="commandPanel">
                                                        <div class="panel panel-default">
                                                            <div class="panel-heading">
                                                                <h3 class="panel-title"><i class="fa fa-keyboard-o"></i> Command</h3>
                                                            </div>


                                                            <div class="panel-body">

                                                                <div class="row">
                                                                    <div class="col-md-12">
                                                                        <span class="addNewLine">Add a new line :</span>&nbsp;
                                                                        <button class="btn btn-primary" ng-click="addNewline()"><i class="fa fa-plus fa-1x"></i></button>
                                                                    </div>
                                                                </div>

                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-md-8">
                                                    <div id="visualPanel">
                                                        <div class="panel panel-default">
                                                            <div class="panel-heading">
                                                                <h3 class="panel-title"><i class="fa fa-eye"></i> Visual</h3>
                                                            </div>
                                                            <div class="panel-body">

                                                                <!-- lines -->
                                                                <ul class="list-group">
                                                                    <li class="list-group-item" ng-repeat="line in configuration.lines track by $index">

                                                                        <!-- columns -->
                                                                        <div ng-switch on="line.columns.length">

                                                                            <div class="row linesList" ng-switch-when="1">
                                                                                <div class="col-md-12 lineCommandButtons" ng-show="configuration.lines.length > 1">
                                                                                    <button class="btn btn-warning" ng-hide="$index==0" ng-click="upThisLine($index)"><i class="fa fa-arrow-up"></i></button>

                                                                                    <button class="btn btn-warning" ng-hide="$index==(configuration.lines.length-1)" ng-click="downThisLine($index)"><i class="fa fa-arrow-down"></i></button>

                                                                                    <button class="btn btn-danger pull-right" ng-click="removeThisLine($index)"><i class="fa fa-trash-o"></i></button>
                                                                                </div>

                                                                                <div class="col-md-12">
                                                                                    <div class="col-md-12 well">
                                                                                        <button class="btn btn-lg btn-block  btn-default disabled">
														    							{{line.columns[0].control.type !== 'none'  ? line.columns[0].control.type + ' ' + line.columns[0].control.subtype || '' : 'column 1'}}
														    					</button>
                                                                                    </div>
                                                                                </div>
                                                                            </div>

                                                                            <div class="row linesList" ng-switch-when="2">
                                                                                <div class="col-md-12 lineCommandButtons" ng-show="configuration.lines.length > 1">

                                                                                    <button class="btn btn-warning" ng-hide="$index==0" ng-click="upThisLine($index)"><i class="fa fa-arrow-up"></i></button>

                                                                                    <button class="btn btn-warning" ng-hide="$index==(configuration.lines.length-1)" ng-click="downThisLine($index)"><i class="fa fa-arrow-down"></i></button>

                                                                                    <button class="btn btn-danger pull-right" ng-click="removeThisLine($index)"><i class="fa fa-trash-o"></i></button>
                                                                                </div>
                                                                                <div class="col-md-12">
                                                                                    <div class="col-md-6 well">
                                                                                        <button class="btn btn-lg btn-block  btn-default disabled">
														    							{{line.columns[0].control.type !== 'none'  ? line.columns[0].control.type + ' ' + line.columns[0].control.subtype || '' : 'column 1'}}
														    					</button>
                                                                                    </div>
                                                                                    <div class="col-md-6 well">
                                                                                        <button class="btn btn-lg btn-block  btn-default disabled">
														    							{{line.columns[1].control.type !== 'none'  ? line.columns[1].control.type + ' ' + line.columns[1].control.subtype || '' : 'column 2'}}
														    					</button>
                                                                                    </div>
                                                                                </div>
                                                                            </div>


                                                                            <div class="row linesList" ng-switch-when="3">
                                                                                <div class="col-md-12 lineCommandButtons" ng-show="configuration.lines.length > 1">
                                                                                    <button class="btn btn-warning" ng-hide="$index==0" ng-click="upThisLine($index)"><i class="fa fa-arrow-up"></i></button>

                                                                                    <button class="btn btn-warning" ng-hide="$index==(configuration.lines.length-1)" ng-click="downThisLine($index)"><i class="fa fa-arrow-down"></i></button>

                                                                                    <button class="btn btn-danger pull-right" ng-click="removeThisLine($index)"><i class="fa fa-trash-o"></i></button>
                                                                                </div>
                                                                                <div class="col-md-12">
                                                                                    <div class="col-md-4 well">
                                                                                        <button class="btn btn-lg btn-block  btn-default disabled">
														    							{{line.columns[0].control.type !== 'none'  ? line.columns[0].control.type + ' ' + line.columns[0].control.subtype || '' : 'column 1'}}
														    					</button>
                                                                                    </div>
                                                                                    <div class="col-md-4 well">
                                                                                        <button class="btn btn-lg btn-block  btn-default disabled">
														    							{{line.columns[1].control.type !== 'none'  ? line.columns[1].control.type + ' ' + line.columns[1].control.subtype || '' : 'column 2'}}
														    					</button>
                                                                                    </div>
                                                                                    <div class="col-md-4 well">
                                                                                        <button class="btn btn-lg btn-block  btn-default disabled">
														    							{{line.columns[2].control.type !== 'none'  ? line.columns[2].control.type + ' ' + line.columns[2].control.subtype || '' : 'column 3'}}
														    					</button>
                                                                                    </div>
                                                                                </div>
                                                                            </div>

                                                                        </div>

                                                                    </li>
                                                                </ul>


                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="animate-switch" ng-switch-when="first">

                                                <div class="col-md-4">

                                                    <div id="commandPanel">
                                                        <div class="panel panel-default">
                                                            <div class="panel-heading">
                                                                <h3 class="panel-title"><i class="fa fa-keyboard-o"></i> Command</h3>
                                                            </div>

                                                            <div class="panel-body">

                                                                <div class="row">
                                                                    <div class="col-md-12">
                                                                        <h4 class="numberOfcolumsText text-center"><i>– Selected line –</i></h4>
                                                                        <h4 class="numberOfcolumsText text-center">number of columns :</h4>
                                                                    </div>
                                                                </div>

                                                                <div class="row">
                                                                    <div class="col-xs-2 col-xs-offset-3 col-sm-2 col-sm-offset-3 col-md-2 col-md-offset-3">
                                                                        <button class="btn btn-primary pull-right btnMinusColumns" ng-click="decreaseNumberOfColumns()"><i class="fa fa-minus fa-1x"></i></button>
                                                                    </div>
                                                                    <div class="col-xs-2 col-sm-2 col-md-2 text-center">
                                                                        <span class="numberOfColumnsLabel ">{{configuration.lines[configuration.activeLine -1].columns.length}}</span>
                                                                    </div>
                                                                    <div class="col-xs-2 col-sm-2 col-md-2">
                                                                        <button class="btn btn-primary pull-left btnAddColumns" ng-click="increaseNumberOfColumns()"><i class="fa fa-plus fa-1x"></i></button>
                                                                    </div>
                                                                </div>

                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>


                                                <div class="col-md-8">

                                                    <div id="visualPanel">
                                                        <div class="panel panel-default">
                                                            <div class="panel-heading">
                                                                <h3 class="panel-title"><i class="fa fa-eye"></i> Visual</h3>
                                                                </h3>
                                                            </div>
                                                            <div class="panel-body">

                                                                <!-- lines / columns -->
                                                                <ul class="list-group">
                                                                    <li class="list-group-item" ng-repeat="line in configuration.lines track by $index">

                                                                        <!-- columns -->
                                                                        <div ng-switch on="line.columns.length">

                                                                            <div class="row linesList" ng-switch-when="1">
                                                                                <div class="col-md-12 lineCommandButtons" ng-show="configuration.lines.length > 1">


                                                                                    <button class="btn" ng-class="{'btn-warning':($index + 1) !== configuration.activeLine, 'btn-success': ($index + 1) === configuration.activeLine}" ng-click="setActiveLineNumber($index + 1)">

															    					<i class="fa"  ng-class="{'fa-square-o': ($index + 1) !== configuration.activeLine, 'fa-check-square-o': ($index + 1) === configuration.activeLine}"></i>

															    					</button>

                                                                                </div>

                                                                                <div class="col-md-12">
                                                                                    <div class="col-md-12 well">
                                                                                        <button class="btn btn-lg btn-block  btn-default disabled">
															    							{{line.columns[0].control.type !== 'none'  ? line.columns[0].control.type + ' ' + line.columns[0].control.subtype || '' : 'column 1'}}
															    					</button>


                                                                                    </div>
                                                                                </div>
                                                                            </div>

                                                                            <div class="row linesList" ng-switch-when="2">
                                                                                <div class="col-md-12 lineCommandButtons" ng-show="configuration.lines.length > 1">

                                                                                    <button class="btn" ng-class="{'btn-warning':($index + 1) !== configuration.activeLine, 'btn-success': ($index + 1) === configuration.activeLine}" ng-click="setActiveLineNumber($index + 1)">

															    					<i class="fa"  ng-class="{'fa-square-o': ($index + 1) !== configuration.activeLine, 'fa-check-square-o': ($index + 1) === configuration.activeLine}"></i>

															    					</button>
                                                                                </div>
                                                                                <div class="col-md-12">
                                                                                    <div class="col-md-6 well">
                                                                                        <button class="btn btn-lg btn-block  btn-default disabled">
															    							{{line.columns[0].control.type !== 'none'  ? line.columns[0].control.type + ' ' + line.columns[0].control.subtype || '' : 'column 1'}}
															    					</button>
                                                                                    </div>
                                                                                    <div class="col-md-6 well">
                                                                                        <button class="btn btn-lg btn-block  btn-default disabled">
															    							{{line.columns[1].control.type !== 'none'  ? line.columns[1].control.type + ' ' + line.columns[1].control.subtype || '' : 'column 2'}}
															    					</button>
                                                                                    </div>
                                                                                </div>
                                                                            </div>


                                                                            <div class="row linesList" ng-switch-when="3">
                                                                                <div class="col-md-12 lineCommandButtons" ng-show="configuration.lines.length > 1">

                                                                                    <button class="btn" ng-class="{'btn-warning':($index + 1) !== configuration.activeLine, 'btn-success': ($index + 1) === configuration.activeLine}" ng-click="setActiveLineNumber($index + 1)">

															    					<i class="fa"  ng-class="{'fa-square-o': ($index + 1) !== configuration.activeLine, 'fa-check-square-o': ($index + 1) === configuration.activeLine}"></i>

															    					</button>
                                                                                </div>
                                                                                <div class="col-md-12">
                                                                                    <div class="col-md-4 well">
                                                                                        <button class="btn btn-lg btn-block  btn-default disabled">
															    							{{line.columns[0].control.type !== 'none'  ? line.columns[0].control.type + ' ' + line.columns[0].control.subtype || '' : 'column 1'}}
															    					</button>
                                                                                    </div>
                                                                                    <div class="col-md-4 well">
                                                                                        <button class="btn btn-lg btn-block  btn-default disabled">
															    							{{line.columns[1].control.type !== 'none'  ? line.columns[1].control.type + ' ' + line.columns[1].control.subtype || '' : 'column 2'}}
															    					</button>
                                                                                    </div>
                                                                                    <div class="col-md-4 well">
                                                                                        <button class="btn btn-lg btn-block  btn-default disabled">
															    							{{line.columns[2].control.type !== 'none'  ? line.columns[2].control.type + ' ' + line.columns[2].control.subtype || '' : 'column 3'}}
															    					</button>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>

                                                                    </li>
                                                                </ul>

                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>

                                            <div class="animate-switch" ng-switch-when="second">

                                                <div class="col-md-4">
                                                    <div id="commandPanel">
                                                        <div class="panel panel-default">
                                                            <div class="panel-heading">
                                                                <h3 class="panel-title"><i class="fa fa-keyboard-o"></i> Command</h3>
                                                            </div>

                                                            <div class="panel-body">

                                                                <div class="row">
                                                                    <div class="col-md-12">
                                                                        <h4 class="numberOfcolumsText text-center">– Apply controls to columns –</h4>
                                                                    </div>
                                                                </div>

                                                                <div class="row">

                                                                    <div class="col-lg-12">

                                                                        <hr/>

                                                                        <!-- <p class="numberOfcolumsText text-center"><i class="fa fa-question-circle"></i>&nbsp; <b>How to :</b></p> -->

                                                                        <blockquote>
                                                                            <p class="numberOfcolumsText"><i class="fa fa-minus"></i>&nbsp; Click / Tap on column to open control selection.</p>
                                                                            <p class="numberOfcolumsText"><i class="fa fa-minus"></i>&nbsp; Select desired control and valid to apply it to column.</p>
                                                                        </blockquote>
                                                                    </div>


                                                                    <!-- <div class="col-xs-2 col-xs-offset-3 col-sm-2 col-sm-offset-3 col-md-2 col-md-offset-3">
														   			<button class="btn btn-primary pull-right btnMinusColumns" ng-click="decreaseNumberOfColumns()"><i class="fa fa-minus fa-1x"></i></button>
														   		</div>
														   		<div class="col-xs-2 col-sm-2 col-md-2 text-center">
														   			<span class="numberOfColumnsLabel ">{{configuration.lines[configuration.activeLine -1].columns.length}}</span>
														   		</div>
														   		<div class="col-xs-2 col-sm-2 col-md-2">
														   			<button class="btn btn-primary pull-left btnAddColumns" ng-click="increaseNumberOfColumns()"><i class="fa fa-plus fa-1x"></i></button>
																</div>	 -->
                                                                </div>

                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-md-8">

                                                    <div id="visualPanel">
                                                        <div class="panel panel-default">
                                                            <div class="panel-heading">
                                                                <h3 class="panel-title"><i class="fa fa-eye"></i> Visual</h3>
                                                                </h3>
                                                            </div>
                                                            <div class="panel-body">

                                                                <!-- lines / columns -->
                                                                <ul class="list-group">
                                                                    <li class="list-group-item" ng-repeat="line in configuration.lines track by $index">

                                                                        <!-- columns -->
                                                                        <div ng-switch on="line.columns.length">

                                                                            <div class="row linesList" ng-switch-when="1">
                                                                                <div class="col-md-12 lineCommandButtons" ng-show="configuration.lines.length > 1">


                                                                                    <button class="btn" ng-class="{'btn-warning':($index + 1) !== configuration.activeLine, 'btn-success': ($index + 1) === configuration.activeLine}" ng-click="setActiveLineNumber($index + 1)">

															    					<i class="fa"  ng-class="{'fa-square-o': ($index + 1) !== configuration.activeLine, 'fa-check-square-o': ($index + 1) === configuration.activeLine}"></i>

															    					</button>

                                                                                </div>

                                                                                <div class="col-md-12">
                                                                                    <div class="col-md-12 well">
                                                                                        <button class="btn btn-lg btn-block" ng-class="{'btn-primary': !line.columns[0].control.edited, 'btn-success': line.columns[0].control.edited}" ng-click="showModalAddCtrlToColumn('', $index, 0)">
															    							{{line.columns[0].control.type !== 'none'  ? line.columns[0].control.type + ' ' + line.columns[0].control.subtype || '' : 'column 1'}}
															    					</button>
                                                                                    </div>
                                                                                </div>
                                                                            </div>

                                                                            <div class="row linesList" ng-switch-when="2">
                                                                                <div class="col-md-12 lineCommandButtons" ng-show="configuration.lines.length > 1">

                                                                                    <button class="btn" ng-class="{'btn-warning':($index + 1) !== configuration.activeLine, 'btn-success': ($index + 1) === configuration.activeLine}" ng-click="setActiveLineNumber($index + 1)">

															    					<i class="fa"  ng-class="{'fa-square-o': ($index + 1) !== configuration.activeLine, 'fa-check-square-o': ($index + 1) === configuration.activeLine}"></i>

															    					</button>
                                                                                </div>
                                                                                <div class="col-md-12">
                                                                                    <div class="col-md-6 well">
                                                                                        <button class="btn btn-lg btn-block" ng-class="{'btn-primary': !line.columns[0].control.edited, 'btn-success': line.columns[0].control.edited}" ng-click="showModalAddCtrlToColumn('', $index, 0)">
															    							{{line.columns[0].control.type !== 'none'  ? line.columns[0].control.type + ' ' + line.columns[0].control.subtype || '' : 'column 1'}}
															    					</button>
                                                                                    </div>
                                                                                    <div class="col-md-6 well">
                                                                                        <button class="btn btn-lg btn-block" ng-class="{'btn-primary': !line.columns[1].control.edited, 'btn-success': line.columns[1].control.edited}" ng-click="showModalAddCtrlToColumn('', $index, 1)">
															    							{{line.columns[1].control.type !== 'none'  ? line.columns[1].control.type + ' ' + line.columns[1].control.subtype || '' : 'column 2'}}
															    					</button>
                                                                                    </div>
                                                                                </div>
                                                                            </div>

                                                                            <div class="row linesList" ng-switch-when="3">
                                                                                <div class="col-md-12 lineCommandButtons" ng-show="configuration.lines.length > 1">

                                                                                    <button class="btn" ng-class="{'btn-warning':($index + 1) !== configuration.activeLine, 'btn-success': ($index + 1) === configuration.activeLine}" ng-click="setActiveLineNumber($index + 1)">

															    					<i class="fa"  ng-class="{'fa-square-o': ($index + 1) !== configuration.activeLine, 'fa-check-square-o': ($index + 1) === configuration.activeLine}"></i>

															    					</button>
                                                                                </div>
                                                                                <div class="col-md-12">
                                                                                    <div class="col-md-4 well">
                                                                                        <button class="btn btn-lg btn-block" ng-class="{'btn-primary': !line.columns[0].control.edited, 'btn-success': line.columns[0].control.edited}" ng-click="showModalAddCtrlToColumn('', $index, 0)">
															    							{{line.columns[0].control.type !== 'none'  ? line.columns[0].control.type + ' ' + line.columns[0].control.subtype || '' : 'column 1'}}
															    					</button>
                                                                                    </div>
                                                                                    <div class="col-md-4 well">
                                                                                        <button class="btn btn-lg btn-block" ng-class="{'btn-primary': !line.columns[1].control.edited, 'btn-success': line.columns[1].control.edited}" ng-click="showModalAddCtrlToColumn('', $index, 1)">
															    							{{line.columns[1].control.type !== 'none'  ? line.columns[1].control.type + ' ' + line.columns[1].control.subtype || '' : 'column 2'}}
															    					</button>
                                                                                    </div>
                                                                                    <div class="col-md-4 well">
                                                                                        <button class="btn btn-lg btn-block" ng-class="{'btn-primary': !line.columns[2].control.edited, 'btn-success': line.columns[2].control.edited}" ng-click="showModalAddCtrlToColumn('', $index, 2)">
															    							{{line.columns[2].control.type !== 'none'  ? line.columns[2].control.type + ' ' + line.columns[2].control.subtype || '' : 'column 3'}}
															    					</button>
                                                                                    </div>
                                                                                </div>
                                                                            </div>

                                                                        </div>

                                                                    </li>
                                                                </ul>

                                                            </div>
                                                        </div>
                                                    </div>





                                                </div>
                                            </div>


                                            <div class="animate-switch" ng-switch-when="third">

                                                <div class="col-md-4">
                                                    <div id="commandPanel">
                                                        <div class="panel panel-default">
                                                            <div class="panel-heading">
                                                                <h3 class="panel-title"><i class="fa fa-keyboard-o"></i>&nbsp;Command</h3>
                                                            </div>
                                                            <div class="panel-body">


                                                                <div class="row">
                                                                    <div class="col-xs-12">

                                                                        <div class="form-group">
                                                                            <label for="inputSubmitButtontext" class=" greyText control-label">Customize Submit button Text :</label>
                                                                            <div class="">
                                                                                <input type="text" class="form-control" id="inputSubmitButtontext" placeholder="Submit button text" ng-model="configuration.submitButtonText">
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <hr/>

                                                                <div class="row">
                                                                    <div class="col-xs-12">

                                                                        <div class="form-group">
                                                                            <label for="inputCancelButtontext" class=" greyText control-label">Customize Cancel button Text :</label>
                                                                            <div class="">
                                                                                <input type="text" class="form-control" id="inputCancelButtontext" placeholder="Cancel button text" ng-model="configuration.cancelButtonText">
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <hr/>

                                                                <div class="row">
                                                                    <div class="col-xs-12">

                                                                        <div class="form-group">
                                                                            <label for="inputNameFormtext" class=" greyText control-label">Name to this form :</label>
                                                                            <div class="">
                                                                                <input type="text" class="form-control" id="inputNameFormtext" placeholder="Enter formName" ng-model="configuration.formName">
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <button class="btn btn-primary btn-block btn-lg" ng-click="saveThisForm()">save this form</button>

                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-md-8">
                                                    <div id="visualPanel">
                                                        <div class="panel panel-default">
                                                            <div class="panel-heading">
                                                                <h3 class="panel-title"><i class="fa fa-thumbs-o-up"></i>&nbsp;Final Step : form preview</h3>
                                                            </div>
                                                            <div class="panel-body">

                                                                <form ng-submit="vm.onSubmit()">

                                                                    <formly-form id="saveFormlyFom" model="vm.model" fields="vm.wfFormFields">

                                                                        <span class="pull-right">
														    <button class="btn btn-primary" type="submit">{{configuration.submitButtonText}}</button>
														    <button class="btn btn-primary" type="cancel">{{configuration.cancelButtonText}}</button>
														   </span>

                                                                    </formly-form>


                                                                </form>

                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>


                                    </div>
                                </tab>

                                <tab select="tabJustSelected(1)" active="tab.previewTab.active" heading="预览">


                                    <div class="panel panel-default">
                                        <div class="panel-body">
                                            <!-- formly here -->
                                            <form ng-submit="vm.onSubmit()">
                                                <formly-form id="previewFormlyForm" model="vm.model" fields="vm.wfFormFields">

                                                    <span class="pull-right">
										    <button class="btn btn-primary" type="submit">{{configuration.submitButtonText}}</button>
										    <button class="btn btn-primary" type="cancel">{{configuration.cancelButtonText}}</button>
										   </span>

                                                </formly-form>
                                            </form>

                                        </div>
                                    </div>

                                    <div class="panel panel-default">
                                        <div class="panel-body">
                                            <p>DATA MODEL</p>
                                            <pre>
											{{vm.model | json}}11
										</pre>
                                        </div>
                                    </div>

                                    <div class="panel panel-default">
                                        <div class="panel-body">
                                            <p>FIELDS MODEL (ready to save to database one)</p>
                                            <pre>
											{{vm.wfFormFieldsOnlyNeededProperties | json}}22
										</pre>
                                        </div>
                                    </div>

                                </tab>
                            </tabset>
                        </div>
                    </div>
                </section>

                <hr/>
            </div>
        </div>
    </section>

</div>



<script type="text/ng-template" id="modalWfEdit.html">

    <div class="modal-header">
        <h3 class="modal-title greyText">控件设置</h3>
    </div>
    <div class="modal-bodyopen">

        <hr/>

        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <h5 class="greyText"><i class="fa fa-filter"></i>&nbsp;控件类型:</h5>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <ol class="nya-bs-select col-xs-12 col-sm-12 col-md-12 col-lg-12" ng-model="modelNyaSelect" data-live-search="false">
                    <li nya-bs-option="option in nyaSelect.controls group by option.group">
                        <span class="dropdown-header greyText">{{$group}}</span>
                        <a ng-click="selectThisControl(option.id)">
                            <span>{{ option.name }}</span>
                            <span class="glyphicon glyphicon-ok check-mark"></span>
                        </a>
                    </li>
                </ol>

            </div>
        </div>

        <hr/>





        <div ng-switch on="nyaSelect.selectedControl">




            <div ng-switch-when="ui-userselect">

                <div class="panel panel-default">
                    <div class="panel-body">

                        <div class="row">
                            <div class="col-md-12">
                                <h5 class="greyText"><i class="fa fa-eye"></i>&nbsp; 控件预览:</h5>
                            </div>
                        </div>
                        <hr/>

                        <div class="row">

                            <div class="col-md-12">

                                <div class="form-group">

                                    <div class="">

                                        <h2 class="text-center">{{nyaSelect.temporyConfig.formlyDesciption}}</h2>

                                        <h2 class="text-center">{{nyaSelect.temporyConfig.formlyRestangular}}</h2>
                                        <hr/>

                                    </div>

                                </div>

                            </div>
                        </div>
                    </div>
                </div>

                <div class="panel panel-default">
                    <div class="panel-body">

                        <div class="row">
                            <div class="col-md-12">
                                <h5 class="greyText"><i class="fa fa-pencil-square-o"></i>&nbsp; 性能编辑:</h5>
                            </div>
                        </div>
                        <hr/>

                        <div class="marginTopFivepixels"></div>

                        <div class="row">
                            <div class="form-group">
                                <label for="inputTextDescriptionUpdate" class="col-lg-3 control-label greyText editPropertiesLabel">Header text :</label>
                                <div class="col-lg-9">
                                    <input type="text" class="form-control" ng-model="nyaSelect.temporyConfig.formlyDesciption" placeholder="Add / edit header text here">

                                    <input type="text" class="form-control" ng-model="nyaSelect.temporyConfig.formlyRestangular" id="inputHeaderTextUpdate" placeholder="Add / edit restangular text here">
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>




            <div ng-switch-when="none">

                <div class="row">
                    <div class="col-sm-12">
                        <h5 class="text-center texteRouge"> <i class="fa fa-arrow-up"></i>&nbsp; Select a control</h5>
                    </div>
                </div>
            </div>


            <div ng-switch-when="empty">

                <div class="panel panel-default">
                    <div class="panel-body">

                        <div class="row">
                            <div class="col-md-12">
                                <h5 class="greyText"><i class="fa fa-eye"></i>&nbsp; Preview :</h5>
                            </div>
                        </div>
                        <hr/>

                        <div class="row">
                            <div class="col-sm-12">
                                <h5 class="text-center greyText">Column will be blank</h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div ng-switch-when="Header">
                <!-- TextInput -->
                <div class="panel panel-default">
                    <div class="panel-body">

                        <div class="row">
                            <div class="col-md-12">
                                <h5 class="greyText"><i class="fa fa-eye"></i>&nbsp; Preview :</h5>
                            </div>
                        </div>
                        <hr/>

                        <div class="row">

                            <div class="col-md-12">

                                <div class="form-group">

                                    <div class="">

                                        <h2 class="text-center">{{nyaSelect.temporyConfig.formlyDesciption}}</h2>
                                        <hr/>


                                    </div>

                                </div>

                            </div>
                        </div>
                    </div>
                </div>

                <div class="panel panel-default">
                    <div class="panel-body">

                        <div class="row">
                            <div class="col-md-12">
                                <h5 class="greyText"><i class="fa fa-pencil-square-o"></i>&nbsp; Edit properties :</h5>
                            </div>
                        </div>
                        <hr/>

                        <div class="marginTopFivepixels"></div>

                        <div class="row">
                            <div class="form-group">
                                <label for="inputTextDescriptionUpdate" class="col-lg-3 control-label greyText editPropertiesLabel">Header text :</label>
                                <div class="col-lg-9">
                                    <input type="text" class="form-control" ng-model="nyaSelect.temporyConfig.formlyDesciption" id="inputHeaderTextUpdate" placeholder="Add / edit header text here">


                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            <div ng-switch-when="Subtitle">
                <!-- TextInput -->
                <div class="panel panel-default">
                    <div class="panel-body">

                        <div class="row">
                            <div class="col-md-12">
                                <h5 class="greyText"><i class="fa fa-eye"></i>&nbsp; Preview :</h5>
                            </div>
                        </div>
                        <hr/>

                        <div class="row">

                            <div class="col-md-12">

                                <div class="form-group">

                                    <div class="">

                                        <h4 class="text-center">{{nyaSelect.temporyConfig.formlyPlaceholder}}</h4>

                                        <h4 class="text-center">{{nyaSelect.temporyConfig.formlyRestangular}}</h4>

                                        <hr/>

                                    </div>

                                </div>

                            </div>
                        </div>
                    </div>
                </div>

                <div class="panel panel-default">
                    <div class="panel-body">

                        <div class="row">
                            <div class="col-md-12">
                                <h5 class="greyText"><i class="fa fa-pencil-square-o"></i>&nbsp; Edit properties :</h5>
                            </div>
                        </div>
                        <hr/>

                        <div class="marginTopFivepixels"></div>

                        <div class="row">
                            <div class="form-group">
                                <label for="inputSubTitleTextUpdate" class="col-lg-3 control-label greyText editPropertiesLabel">Subtitle text :</label>
                                <div class="col-lg-9">
                                    <input type="text" class="form-control" ng-model="nyaSelect.temporyConfig.formlyPlaceholder" id="inputSubTitleTextUpdate" placeholder="Add / edit subtitle text here">

                                    <input type="text" class="form-control" ng-model="nyaSelect.temporyConfig.formlyRestangular" id="inputSubTitleTextUpdate" placeholder="Add / edit subtitle text here">


                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <!-- <hr/> -->
            <div ng-switch-when="TextInput">
                <!-- TextInput -->
                <div class="panel panel-default">
                    <div class="">

                        <div class="row">
                            <div class="col-md-12">
                                <h5 class="greyText"><i class="fa fa-eye"></i>&nbsp;控件预览 :</h5>
                            </div>
                        </div>


                        <div class="row">

                            <div class="col-md-12">

                                <div class="form-group">

                                    <label for="inputText" class="control-label textControlLabel">{{nyaSelect.temporyConfig.formlyLabel}}<span ng-if="nyaSelect.temporyConfig.formlyRequired" class="textControlLabel">*</span></label>

                                    <div class="">
                                        <input type="text" class="form-control" id="inputText" placeholder="{{nyaSelect.temporyConfig.formlyPlaceholder}}">
                                        <p class="help-block">{{nyaSelect.temporyConfig.formlyDesciption}}</p>
                                    </div>

                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <hr/>
                <div class="panel panel-default">
                    <div class="panel-body">

                        <div class="row">
                            <div class="col-md-12">
                                <h5 class="greyText"><i class="fa fa-pencil-square-o"></i>&nbsp; 性能编辑 :</h5>
                            </div>
                        </div>

                        <div class="row">
                            <div class="form-group">
                                <label for="inputTextLabelUpdate" class="col-lg-3 control-label greyText editPropertiesLabel">名称 :</label>
                                <div class="col-lg-9">
                                    <input type="text" class="form-control" ng-model="nyaSelect.temporyConfig.formlyLabel" id="inputTextLabelUpdate" placeholder="Add / edit control label here">
                                </div>
                            </div>
                        </div>


                        <div class="marginTopFivepixels"></div>

                        <div class="row">
                            <div class="form-group">
                                <label for="inputTextplaceholderUpdate" class="col-lg-3 control-label greyText editPropertiesLabel">初始显示 :</label>
                                <div class="col-lg-9">
                                    <input type="text" class="form-control" ng-model="nyaSelect.temporyConfig.formlyPlaceholder" id="inputTextplaceholderUpdate" placeholder="Add / edit placeholder text here">
                                </div>
                            </div>
                        </div>



                        <div class="marginTopFivepixels"></div>

                        <div class="row">
                            <div class="form-group">
                                <label for="inputTextRequiredUpdate" class="col-lg-3 control-label greyText editPropertiesLabel">是否是必填项 :</label>
                                <div class="col-lg-9">
                                    <div class="checkboxCssCorrection">&nbsp;</div>
                                    <input type="checkbox" ng-model="nyaSelect.temporyConfig.formlyRequired" id="inputTextRequiredUpdate">
                                </div>
                            </div>
                        </div>

                        <div class="marginTopFivepixels"></div>

                        <!-- <div class="row">
                            <div class="form-group">
                                <label for="inputTextDescriptionUpdate" class="col-lg-3 control-label greyText editPropertiesLabel">Description :</label>
                                <div class="col-lg-9">
                                    <input type="text" class="form-control" ng-model="nyaSelect.temporyConfig.formlyDesciption" id="inputTextDescriptionUpdate" placeholder="Add / edit description here">
                                </div>
                            </div>
                        </div> -->

                    </div>
                </div>
            </div>

            <div ng-switch-when="Password">
                <!-- password -->
                <div class="panel panel-default">
                    <div class="panel-body">

                        <div class="row">
                            <div class="col-md-12">
                                <h5 class="greyText"><i class="fa fa-eye"></i>&nbsp; Preview :</h5>
                            </div>
                        </div>
                        <hr/>

                        <div class="row">

                            <div class="col-md-12">

                                <div class="form-group">

                                    <label for="inputPassword" class="control-label textControlLabel">{{nyaSelect.temporyConfig.formlyLabel}}<span ng-if="nyaSelect.temporyConfig.formlyRequired" class="textControlLabel">*</span></label>


                                    <div class="">
                                        <input type="password" class="form-control" id="inputPassword" placeholder="{{nyaSelect.temporyConfig.formlyPlaceholder}}">
                                        <p class="help-block">{{nyaSelect.temporyConfig.formlyDesciption}}</p>
                                    </div>


                                </div>

                            </div>

                        </div>
                    </div>
                </div>

                <div class="panel panel-default">
                    <div class="panel-body">

                        <div class="row">
                            <div class="col-md-12">
                                <h5 class="greyText"><i class="fa fa-pencil-square-o"></i>&nbsp; Edit properties :</h5>
                            </div>
                        </div>
                        <hr/>

                        <div class="row">
                            <div class="form-group">
                                <label for="inputTextLabelUpdate" class="col-lg-3 control-label greyText editPropertiesLabel">Label text :</label>
                                <div class="col-lg-9">
                                    <input type="text" class="form-control" ng-model="nyaSelect.temporyConfig.formlyLabel" id="inputTextLabelUpdate" placeholder="Add / edit control label here">
                                </div>
                            </div>
                        </div>


                        <div class="marginTopFivepixels"></div>

                        <div class="row">
                            <div class="form-group">
                                <label for="inputTextplaceholderUpdate" class="col-lg-3 control-label greyText editPropertiesLabel">placeholder :</label>
                                <div class="col-lg-9">
                                    <input type="text" class="form-control" ng-model="nyaSelect.temporyConfig.formlyPlaceholder" id="inputTextplaceholderUpdate" placeholder="Add / edit placeholder text here">
                                </div>
                            </div>
                        </div>



                        <div class="marginTopFivepixels"></div>

                        <div class="row">
                            <div class="form-group">
                                <label for="inputTextRequiredUpdate" class="col-lg-3 control-label greyText editPropertiesLabel">Required :</label>
                                <div class="col-lg-9">
                                    <div class="checkboxCssCorrection">&nbsp;</div>
                                    <input type="checkbox" ng-model="nyaSelect.temporyConfig.formlyRequired" id="inputTextRequiredUpdate">
                                </div>
                            </div>
                        </div>

                        <div class="marginTopFivepixels"></div>

                        <div class="row">
                            <div class="form-group">
                                <label for="inputTextDescriptionUpdate" class="col-lg-3 control-label greyText editPropertiesLabel">Description :</label>
                                <div class="col-lg-9">
                                    <input type="text" class="form-control" ng-model="nyaSelect.temporyConfig.formlyDesciption" id="inputTextDescriptionUpdate" placeholder="Add / edit description here">
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            <div ng-switch-when="Date">
                <!-- datetimepicker (input type date not ok in all browsers) -->
                <div class="panel panel-default">
                    <div class="panel-body">

                        <div class="row">
                            <div class="col-md-12">
                                <h5 class="greyText"><i class="fa fa-eye"></i>&nbsp; Preview :</h5>
                            </div>
                        </div>
                        <hr/>

                        <div class="row">

                            <div class="col-md-12">

                                <div class="form-group">

                                    <label for="inputDate" class="control-label textControlLabel">{{nyaSelect.temporyConfig.formlyLabel}}<span ng-if="nyaSelect.temporyConfig.formlyRequired" class="textControlLabel">*</span></label>

                                    <div class="">

                                        <div class="input-group">
                                            <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>

                                            <input type="text" class="form-control" datepicker-popup="{{nyaSelect.temporyConfig.datepickerPopup}}" ng-model="demodt.dt" is-open="demodt.opened" min-date="demodt.minDate" max-date="'2099-12-31'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)"
                                                close-text="Close" ng-click="open($event)" />
                                        </div>

                                        </p>
                                        <p class="help-block">{{nyaSelect.temporyConfig.formlyDesciption}}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="panel panel-default">
                    <div class="panel-body">

                        <div class="row">
                            <div class="col-md-12">
                                <h5 class="greyText"><i class="fa fa-pencil-square-o"></i>&nbsp; Edit properties :</h5>
                            </div>
                        </div>
                        <hr/>

                        <div class="row">
                            <div class="form-group">
                                <label class="col-lg-3 control-label greyText editPropertiesLabel">Date format :</label>
                                <div class="col-lg-9">

                                    <ol class="nya-bs-select col-sm-12 col-xs-12 col-md-12 col-lg12" ng-model="nyaSelect.temporyConfig.datepickerPopup" id="dateformatSelect">
                                        <li class="nya-bs-option" nya-bs-option="dateformat in demodt.formats" value="dateformat">
                                            <a>{{dateformat}}</a>
                                        </li>
                                    </ol>

                                </div>
                            </div>
                        </div>

                        <div class="marginTopFivepixels"></div>

                        <div class="row">
                            <div class="form-group">
                                <label for="inputTextLabelUpdate" class="col-lg-3 control-label greyText editPropertiesLabel">Label text :</label>
                                <div class="col-lg-9">
                                    <input type="text" class="form-control" ng-model="nyaSelect.temporyConfig.formlyLabel" id="inputTextLabelUpdate" placeholder="Add / edit control label here">
                                </div>
                            </div>
                        </div>

                        <div class="marginTopFivepixels"></div>

                        <div class="row">
                            <div class="form-group">
                                <label for="inputTextRequiredUpdate" class="col-lg-3 control-label greyText editPropertiesLabel">Required :</label>
                                <div class="col-lg-9">
                                    <div class="checkboxCssCorrection">&nbsp;</div>
                                    <input type="checkbox" ng-model="nyaSelect.temporyConfig.formlyRequired" id="inputTextRequiredUpdate">
                                </div>
                            </div>
                        </div>

                        <div class="marginTopFivepixels"></div>

                        <div class="row">
                            <div class="form-group">
                                <label for="inputTextDescriptionUpdate" class="col-lg-3 control-label greyText editPropertiesLabel">Description :</label>
                                <div class="col-lg-9">
                                    <input type="text" class="form-control" ng-model="nyaSelect.temporyConfig.formlyDesciption" id="inputTextDescriptionUpdate" placeholder="Add / edit description here">
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            <div ng-switch-when="Texarea">
                <!-- textarea -->
                <div class="panel panel-default">
                    <div class="panel-body">


                        <div class="row">
                            <div class="col-md-12">
                                <h5 class="greyText"><i class="fa fa-eye"></i>&nbsp; Preview :</h5>
                            </div>
                        </div>
                        <hr/>

                        <div class="row">

                            <div class="col-md-12">

                                <div class="form-group">

                                    <label for="textArea" class="control-label textControlLabel">{{nyaSelect.temporyConfig.formlyLabel}}<span ng-if="nyaSelect.temporyConfig.formlyRequired" class="textControlLabel">*</span></label>

                                    <div class="">
                                        <textarea class="form-control" ng-model="model[options.key]" rows="3" id="textArea"></textarea>
                                        <p class="help-block">{{nyaSelect.temporyConfig.formlyDesciption}}</p>
                                    </div>

                                </div>

                            </div>

                        </div>
                    </div>
                </div>

                <div class="panel panel-default">
                    <div class="panel-body">

                        <div class="row">
                            <div class="col-md-12">
                                <h5 class="greyText"><i class="fa fa-pencil-square-o"></i>&nbsp; Edit properties :</h5>
                            </div>
                        </div>
                        <hr/>

                        <div class="row">
                            <div class="form-group">
                                <label for="inputTextLabelUpdate" class="col-lg-3 control-label greyText editPropertiesLabel">Label text :</label>
                                <div class="col-lg-9">
                                    <input type="text" class="form-control" ng-model="nyaSelect.temporyConfig.formlyLabel" id="inputTextLabelUpdate" placeholder="Add / edit control label here">
                                </div>
                            </div>
                        </div>


                        <div class="marginTopFivepixels"></div>

                        <div class="row">
                            <div class="form-group">
                                <label for="inputTextRequiredUpdate" class="col-lg-3 control-label greyText editPropertiesLabel">Required :</label>
                                <div class="col-lg-9">
                                    <div class="checkboxCssCorrection">&nbsp;</div>
                                    <input type="checkbox" ng-model="nyaSelect.temporyConfig.formlyRequired" id="inputTextRequiredUpdate">
                                </div>
                            </div>
                        </div>

                        <div class="marginTopFivepixels"></div>

                        <div class="row">
                            <div class="form-group">
                                <label for="inputTextDescriptionUpdate" class="col-lg-3 control-label greyText editPropertiesLabel">Description :</label>
                                <div class="col-lg-9">
                                    <input type="text" class="form-control" ng-model="nyaSelect.temporyConfig.formlyDesciption" id="inputTextDescriptionUpdate" placeholder="Add / edit description here">
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            <div ng-switch-when="RichTextEditor">
                <!-- TextInput -->
                <div class="panel panel-default">
                    <div class="panel-body">

                        <div class="row">
                            <div class="col-md-12">
                                <h5 class="greyText"><i class="fa fa-eye"></i>&nbsp; Preview :</h5>
                            </div>
                        </div>
                        <hr/>

                        <div class="row">

                            <div class="col-md-12">

                                <div class="form-group">

                                    <label for="RichTextEditor" class="control-label textControlLabel">{{nyaSelect.temporyConfig.formlyLabel}}<span ng-if="nyaSelect.temporyConfig.formlyRequired" class="textControlLabel">*</span></label>

                                    <div class="">

                                        <text-angular ng-model="model[options.key]"></text-angular>
                                        <p class="help-block">{{nyaSelect.temporyConfig.formlyDesciption}}</p>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="panel panel-default">
                    <div class="panel-body">

                        <div class="row">
                            <div class="col-md-12">
                                <h5 class="greyText"><i class="fa fa-pencil-square-o"></i>&nbsp; Edit properties :</h5>
                            </div>
                        </div>
                        <hr/>

                        <div class="row">
                            <div class="form-group">
                                <label for="inputTextDescriptionUpdate" class="col-lg-3 control-label greyText editPropertiesLabel">Description :</label>
                                <div class="col-lg-9">
                                    <input type="text" class="form-control" ng-model="nyaSelect.temporyConfig.formlyDesciption" id="inputTextDescriptionUpdate" placeholder="Add / edit description here">
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            <div ng-switch-when="Radio">
                <!-- radios -->
                <div class="panel panel-default">
                    <div class="panel-body">

                        <div class="row">
                            <div class="col-md-12">
                                <h5 class="greyText"><i class="fa fa-eye"></i>&nbsp; Preview :</h5>
                            </div>
                        </div>
                        <hr/>

                        <div class="row">

                            <div class="col-md-12">

                                <div class="form-group">

                                    <label for="basicSelect" class="control-label textControlLabel">{{nyaSelect.temporyConfig.formlyLabel}}<span ng-if="nyaSelect.temporyConfig.formlyRequired" class="textControlLabel">*</span></label>

                                    <div class="">

                                        <div class="radio" ng-repeat="radioRow in radioRowCollection.rows">
                                            <label>
                                    <input type="radio" name="optionsRadios" id="{{'optionsRadio-' + $index}}" value="$index" checked="">
                                    {{radioRow.option}}
                                  </label>
                                        </div>
                                        <p class="help-block">{{nyaSelect.temporyConfig.formlyDesciption}}</p>

                                    </div>
                                </div>

                            </div>

                        </div>
                    </div>
                </div>

                <div class="panel panel-default">
                    <div class="panel-body">

                        <div class="row">
                            <div class="col-md-12">
                                <h5 class="greyText"><i class="fa fa-pencil-square-o"></i>&nbsp; Edit properties :</h5>
                            </div>
                        </div>
                        <hr/>

                        <div class="row">
                            <div class="col-lg-3 col-md-3">
                                <label for="radioRowCollection" class=" control-label greyText editPropertiesLabel">Add new radio :</label>
                            </div>
                        </div>

                        <div class="row">
                            <div>

                                <div class="form-group">

                                    <div class="col-sm-9 col-xs-9 col-md-9 col-lg-9">
                                        <input type="text" class="form-control" id="inputAddNewRadioOption" placeholder="add new radio" ng-model="newOptionRadio.saisie">
                                    </div>

                                    <div class="col-sm-3 col-xs-3 col-md-3 col-lg-3">
                                        <button class="btn btn-primary" ng-click="addNewOptionRadio()">add</button>
                                    </div>

                                </div>
                            </div>
                        </div>


                        <div class="row">
                            <div class="col-lg-3 col-md-3">
                                <label for="radioRowCollection" class=" control-label greyText editPropertiesLabel">Edit/Remove radio :</label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group">

                                <div class- "col-lg-12 col-md-12 col-sm-12 col-xs-12">

                                    <div class="container">

                                        <div ng-show="radioRowCollection.rows.length === 0">
                                            <h5 class="text-center greyText"><em>- no radio : add new radio values -</em></h5>
                                        </div>


                                        <table ng-if="radioRowCollection.rows.length > 0" class="table table-striped">
                                            <thead>
                                                <tr>
                                                    <th st-ratio="20">order</th>
                                                    <th st-ratio="55">option</th>
                                                    <th st-ratio="25"></th>
                                                </tr>
                                                <tr>
                                                    <th st-ratio="20"></th>
                                                    <th st-ratio="55">
                                                        <input ng-model="radioFilter" placeholder="search for option" class="input-sm form-control" type="search" />
                                                    </th>
                                                    <th st-ratio="25"></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr ng-repeat="radioRow in radioRowCollection.rows | filter:radioFilter as radioRow">
                                                    <td st-ratio="20">{{$index}}</td>
                                                    <td st-ratio="55">{{radioRow.option}}</td>
                                                    <td st-ratio="25">

                                                        <div class="pull-right">
                                                            <button class="btn btn-primary" ng-click="upThisRadioRow($index)"><i class="fa fa-arrow-up"></i></button>

                                                            <button class="btn btn-primary" ng-click="downThisRadioRow($index)"><i class="fa fa-arrow-down"></i></button>

                                                            <button class="btn btn-danger" ng-click="removeRadioRow($index)"><i class="fa fa-trash-o"></i></button>
                                                        </div>

                                                    </td>
                                                </tr>
                                            </tbody>

                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr/>



                        <div class="marginTopFivepixels"></div>


                        <div class="row">
                            <div class="form-group">
                                <label for="inputTextLabelUpdate" class="col-lg-3 control-label greyText editPropertiesLabel">Label text :</label>
                                <div class="col-lg-9">
                                    <input type="text" class="form-control" ng-model="nyaSelect.temporyConfig.formlyLabel" id="inputTextLabelUpdate" placeholder="Add / edit control label here">
                                </div>
                            </div>
                        </div>

                        <div class="marginTopFivepixels"></div>

                        <div class="row">
                            <div class="form-group">
                                <label for="inputTextRequiredUpdate" class="col-lg-3 control-label greyText editPropertiesLabel">Required :</label>
                                <div class="col-lg-9">
                                    <div class="checkboxCssCorrection">&nbsp;</div>
                                    <input type="checkbox" ng-model="nyaSelect.temporyConfig.formlyRequired" id="inputTextRequiredUpdate">
                                </div>
                            </div>
                        </div>

                        <div class="marginTopFivepixels"></div>

                        <div class="row">
                            <div class="form-group">
                                <label for="inputTextDescriptionUpdate" class="col-lg-3 control-label greyText editPropertiesLabel">Description :</label>
                                <div class="col-lg-9">
                                    <input type="text" class="form-control" ng-model="nyaSelect.temporyConfig.formlyDesciption" id="inputTextDescriptionUpdate" placeholder="Add / edit description here">
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            <div ng-switch-when="Checkbox">
                <!-- checkbox -->
                <div class="panel panel-default">
                    <div class="panel-body">


                        <div class="row">
                            <div class="col-md-12">
                                <h5 class="greyText"><i class="fa fa-eye"></i>&nbsp; Preview :</h5>
                            </div>
                        </div>
                        <hr/>

                        <div class="row">

                            <div class="col-md-12">

                                <div class="form-group">

                                    <div class="col-md-12">
                                        <div class="checkbox">
                                            <label>
                                        <input type="checkbox" id="checkBox"> <span class="blackText">{{nyaSelect.temporyConfig.formlyLabel}}</span><span ng-if="nyaSelect.temporyConfig.formlyRequired" class="textControlLabel">*</span>
                                      </label>

                                        </div>
                                        <p class="help-block">{{nyaSelect.temporyConfig.formlyDesciption}}</p>
                                    </div>

                                </div>

                            </div>

                        </div>
                    </div>
                </div>

                <div class="panel panel-default">
                    <div class="panel-body">

                        <div class="row">
                            <div class="col-md-12">
                                <h5 class="greyText"><i class="fa fa-pencil-square-o"></i>&nbsp; Edit properties :</h5>
                            </div>
                        </div>
                        <hr/>

                        <div class="row">
                            <div class="form-group">
                                <label for="inputTextLabelUpdate" class="col-lg-3 control-label greyText editPropertiesLabel">Label text :</label>
                                <div class="col-lg-9">
                                    <input type="text" class="form-control" ng-model="nyaSelect.temporyConfig.formlyLabel" id="inputTextLabelUpdate" placeholder="Add / edit control label here">
                                </div>
                            </div>
                        </div>

                        <div class="marginTopFivepixels"></div>

                        <div class="row">
                            <div class="form-group">
                                <label for="inputTextRequiredUpdate" class="col-lg-3 control-label greyText editPropertiesLabel">Required :</label>
                                <div class="col-lg-9">
                                    <div class="checkboxCssCorrection">&nbsp;</div>
                                    <input type="checkbox" ng-model="nyaSelect.temporyConfig.formlyRequired" id="inputTextRequiredUpdate">
                                </div>
                            </div>
                        </div>

                        <div class="marginTopFivepixels"></div>

                        <div class="row">
                            <div class="form-group">
                                <label for="inputTextDescriptionUpdate" class="col-lg-3 control-label greyText editPropertiesLabel">Description :</label>
                                <div class="col-lg-9">
                                    <input type="text" class="form-control" ng-model="nyaSelect.temporyConfig.formlyDesciption" id="inputTextDescriptionUpdate" placeholder="Add / edit description here">
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            <div ng-switch-when="BasicSelect">

                <!--  basic selects -->
                <div class="panel panel-default">
                    <div class="panel-body">

                        <div class="row">
                            <div class="col-md-12">
                                <h5 class="greyText"><i class="fa fa-eye"></i>&nbsp; Preview :</h5>
                            </div>
                        </div>
                        <hr/>


                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">

                                    <label for="basicSelect" class="control-label textControlLabel">{{nyaSelect.temporyConfig.formlyLabel}}<span ng-if="nyaSelect.temporyConfig.formlyRequired" class="textControlLabel">*</span></label>

                                    <div class="">

                                        <ol class="nya-bs-select col-sm-12 col-xs-12 col-md-12 col-lg12" ng-model="modelbasicSelect" id="basicSelect" disabled="basicSelectRowCollection.rows.length === 0">
                                            <li class="nya-bs-option" nya-bs-option="basicSelectRow in basicSelectRowCollection.rows" value="$index">
                                                <a>{{basicSelectRow.option}}</a>
                                            </li>
                                        </ol>

                                        <p class="help-block">{{nyaSelect.temporyConfig.formlyDesciption}}</p>

                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="panel panel-default">
                    <div class="panel-body">

                        <div class="row">
                            <div class="col-md-12">
                                <h5 class="greyText"><i class="fa fa-pencil-square-o"></i>&nbsp; Edit properties :</h5>
                            </div>
                        </div>
                        <hr/>


                        <div class="row">
                            <div class="col-lg-3 col-md-3">
                                <label for="basicSelectRowCollection" class=" control-label greyText editPropertiesLabel">Add new options :</label>
                            </div>
                        </div>

                        <div class="row">
                            <div>

                                <div class="form-group">

                                    <div class="col-sm-9 col-xs-9 col-md-9 col-lg-9">
                                        <input type="text" class="form-control" id="inputAddNewBasicOption" placeholder="add new option" ng-model="newOptionBasicSelect.saisie">
                                    </div>

                                    <div class="col-sm-3 col-xs-3 col-md-3 col-lg-3">
                                        <button class="btn btn-primary" ng-click="addNewOptionBasicSelect()">add</button>
                                    </div>

                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-lg-3 col-md-3">
                                <label class=" control-label greyText editPropertiesLabel">Edit/Remove options :</label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group">

                                <div class- "col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                    <div class="container">

                                        <div ng-if="basicSelectRowCollection.rows.length === 0">
                                            <h5 class="text-center greyText"><em>- no option : add new options -</em></h5>
                                        </div>

                                        <table ng-if="basicSelectRowCollection.rows.length > 0" class="table table-striped">
                                            <thead>
                                                <tr>
                                                    <th st-ratio="20">order</th>
                                                    <th st-ratio="55">option</th>
                                                    <th st-ratio="25"></th>
                                                </tr>
                                                <tr>
                                                    <th st-ratio="20"></th>
                                                    <th st-ratio="55">
                                                        <input ng-model="basicSelectFilter" placeholder="search for option" class="input-sm form-control" type="search" />
                                                    </th>
                                                    <th st-ratio="25"></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr ng-repeat="basicSelectRow in basicSelectRowCollection.rows | filter:basicSelectFilter as basicSelectRow">
                                                    <td st-ratio="20">{{$index}}</td>
                                                    <td st-ratio="55">{{basicSelectRow.option}}</td>
                                                    <td st-ratio="25">

                                                        <div class="pull-right">
                                                            <button class="btn btn-primary" ng-click="upThisRow($index)"><i class="fa fa-arrow-up"></i></button>

                                                            <button class="btn btn-primary" ng-click="downThisRow($index)"><i class="fa fa-arrow-down"></i></button>

                                                            <button class="btn btn-danger" ng-click="removeRow($index)"><i class="fa fa-trash-o"></i></button>
                                                        </div>

                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr/>



                        <div class="marginTopFivepixels"></div>


                        <div class="row">
                            <div class="form-group">
                                <label for="inputTextDescriptionUpdate" class="col-lg-3 control-label greyText editPropertiesLabel">Description :</label>
                                <div class="col-lg-9">
                                    <input type="text" class="form-control" ng-model="nyaSelect.temporyConfig.formlyDesciption" id="inputTextDescriptionUpdate" placeholder="Add / edit description here">
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>


            <!-- grouped selects -->
            <div ng-switch-when="GroupedSelect">

                <div class="panel panel-default">
                    <div class="panel-body">


                        <div class="row">
                            <div class="col-md-12">
                                <h5 class="greyText"><i class="fa fa-eye"></i>&nbsp; Preview :</h5>
                            </div>
                        </div>
                        <hr/>


                        <div class="row">

                            <div class="col-md-12">

                                <div class="form-group">


                                    <label for="select" class="control-label textControlLabel">{{nyaSelect.temporyConfig.formlyLabel}}<span ng-if="nyaSelect.temporyConfig.formlyRequired" class="textControlLabel">*</span></label>

                                    <div class="">

                                        <ol class="nya-bs-select col-sm-12 col-xs-12 col-md-12 col-lg12" ng-model="modelGroupedSelect" data-live-search="true" disabled="groupedSelectRowCollection.rows.length === 0">

                                            <li nya-bs-option="groupedSelectRow in groupedSelectRowCollection.rows group by groupedSelectRow.group" value="$index">
                                                <span class="dropdown-header">{{groupedSelectRow.group}}</span>
                                                <a>
                                                    <span>{{groupedSelectRow.option}}</span>
                                                    <span class="glyphicon glyphicon-ok check-mark"></span>
                                                </a>
                                            </li>

                                        </ol>
                                        <p class="help-block">{{nyaSelect.temporyConfig.formlyDesciption}}</p>

                                    </div>
                                </div>

                            </div>

                        </div>
                    </div>
                </div>

                <div class="panel panel-default">
                    <div class="panel-body">

                        <div class="row">
                            <div class="col-md-12">
                                <h5 class="greyText"><i class="fa fa-pencil-square-o"></i>&nbsp; Edit properties :</h5>
                            </div>
                        </div>
                        <hr/>


                        <div class="row">
                            <div class="col-lg-3 col-md-3">
                                <label for="groupedSelectRowCollection" class=" control-label greyText editPropertiesLabel">Add new options :</label>
                            </div>
                        </div>

                        <div class="row">
                            <div>

                                <div class="form-group">

                                    <div class="col-sm-9 col-xs-9 col-md-9 col-lg-9">
                                        <input type="text" class="form-control" id="inputAddNewGroupedOption" placeholder="add new option" ng-model="newOptionGroupedSelect.saisie">
                                    </div>

                                    <div class="col-sm-3 col-xs-3 col-md-3 col-lg-3">
                                        <button class="btn btn-primary" ng-click="addNewOptionGroupedSelect()">add</button>
                                    </div>

                                </div>
                            </div>
                        </div>


                        <div class="row">
                            <div class="col-lg-3 col-md-3">
                                <label for="groupedSelectRowCollection" class=" control-label greyText editPropertiesLabel">Add new groups :</label>
                            </div>
                        </div>

                        <div class="row">
                            <div>

                                <div class="form-group">

                                    <div class="col-sm-9 col-xs-9 col-md-9 col-lg-9">
                                        <input id="inputAddNewGroupGroupedOption" type="text" class="form-control" ng-model="newGroupGroupedSelect.saisie" id="inputTextLabelUpdateGroupedSelect" placeholder="Add new group">
                                    </div>

                                    <div class="col-sm-3 col-xs-3 col-md-3 col-lg-3">
                                        <button class="btn btn-primary" ng-click="addNewGroupToGroupedSelect()">add</button>
                                    </div>

                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-lg-3 col-md-3">
                                <label class=" control-label greyText editPropertiesLabel">Edit/Remove options/groups:</label>
                            </div>
                        </div>

                        <div class="row">
                            <div class="form-group">

                                <div class- "col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                    <div class="container">

                                        <div ng-if="groupedSelectRowCollection.rows.length === 0">
                                            <h5 class="text-center greyText"><em>- no option : add new options -</em></h5>
                                        </div>

                                        <table ng-if="groupedSelectRowCollection.rows.length > 0" class="table table-striped">
                                            <thead>
                                                <tr>
                                                    <th st-ratio="20">order</th>
                                                    <th st-ratio="25">group</th>
                                                    <th st-ratio="30">option</th>
                                                    <th st-ratio="25"></th>
                                                </tr>
                                                <tr>
                                                    <th st-ratio="20"></th>
                                                    <th st-ratio="25"></th>
                                                    <th st-ratio="30">
                                                        <input ng-model="groupedSelectFilter" placeholder="search for option" class="input-sm form-control" type="search" />
                                                    </th>
                                                    <th st-ratio="25"></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr ng-repeat="groupedSelectRow in groupedSelectRowCollection.rows | filter:groupedSelectFilter as groupedSelectRow">
                                                    <td st-ratio="20">{{$index}}</td>
                                                    <td st-ratio="25">
                                                        <div ng-if="groupSelectGroupClick.showList === true">

                                                            <div ng-if="GroupedSelectGroups.list.length === 0">
                                                                <p class="text-left noGroupText">- add new groups -</p>
                                                            </div>

                                                            <div ng-if="GroupedSelectGroups.list.length > 0">
                                                                <ol class="nya-bs-select col-sm-12 col-xs-12 col-md-12 col-lg12 editGroupedSelectnyaSelect" ng-model="groupedSelectRow.group" id="modelGroupedOptionGroupedChoose" disabled="GroupedSelectGroups.list.length === 0">
                                                                    <li class="nya-bs-option" nya-bs-option="GroupedSelectGroup in GroupedSelectGroups.list" value="GroupedSelectGroup">
                                                                        <a>{{GroupedSelectGroup}}</a>
                                                                    </li>
                                                                </ol>
                                                            </div>

                                                        </div>
                                                        <div ng-if="groupSelectGroupClick.showList === false">
                                                            {{groupedSelectRow.group}}
                                                        </div>
                                                    </td>
                                                    <td st-ratio="30">{{groupedSelectRow.option}}</td>
                                                    <td st-ratio="25">

                                                        <div class="pull-right">
                                                            <button class="btn btn-primary" ng-click="upThisGroupedSelectRow($index)"><i class="fa fa-arrow-up"></i></button>

                                                            <button class="btn btn-primary" ng-click="downThisGroupedSelectRow($index)"><i class="fa fa-arrow-down"></i></button>

                                                            <button class="btn btn-warning" ng-click="showGroupListToChoose()"><i class="fa fa-pencil-square-o"></i> </button>


                                                            <button class="btn btn-danger" ng-click="removeGroupedSelectRow($index)"><i class="fa fa-trash-o"></i></button>
                                                        </div>

                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <hr/>

                        <div class="marginTopFivepixels"></div>

                        <div class="row">
                            <div class="form-group">
                                <label for="inputTextDescriptionUpdate" class="col-lg-3 control-label greyText editPropertiesLabel">Description :</label>
                                <div class="col-lg-9">
                                    <input type="text" class="form-control" ng-model="nyaSelect.temporyConfig.formlyDesciption" id="inputTextDescriptionUpdate" placeholder="Add / edit description here">
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="modal-footer">
        <button class="btn btn-primary" ng-class="{'disabled': nyaSelect.selectedControl === 'none'}" ng-click="ok()">确定</button>
        <button class="btn btn-warning" ng-click="cancel()">取消</button>
    </div>

</script>