Download as
Browse Code »

Commit 82dab98008110895ab2849e3f5986a8e0d1c3884

Authored by Carlos Alberto
1 parent 2bbb09a4
Exists in master

Melhoria da movimentação de componentes do form builder

Showing 3 changed files with 71 additions and 15 deletions   Show diff stats
cit-esi-web/src/main/webapp/assets/js/angular/custom/directive/FormBuilderDirective.js
  Diff comments   View file @82dab98
@@ -178,7 +178,11 @@ citApp.directive("formBuilder", ['ImageRepository', '$translate', '$filter', '$t @@ -178,7 +178,11 @@ citApp.directive("formBuilder", ['ImageRepository', '$translate', '$filter', '$t
178 $scope.currentTab = $scope.formContainer.tabs[0]; 178 $scope.currentTab = $scope.formContainer.tabs[0];
179 } 179 }
180 var tabIndex = $scope.currentTab.index; 180 var tabIndex = $scope.currentTab.index;
181 - var row = {index: $scope.formContainer.rows.length 181 + var rowIndex = $scope.formContainer.rows.length;
  182 + if ($scope.currentRow) {
  183 + rowIndex = $scope.currentRow.index + 1;
  184 + }
  185 + var row = {index: rowIndex
182 , $type: "row" 186 , $type: "row"
183 , tabIndex: tabIndex 187 , tabIndex: tabIndex
184 , components: [] 188 , components: []
@@ -189,7 +193,15 @@ citApp.directive("formBuilder", ['ImageRepository', '$translate', '$filter', '$t @@ -189,7 +193,15 @@ citApp.directive("formBuilder", ['ImageRepository', '$translate', '$filter', '$t
189 , ngIfHtml: "" 193 , ngIfHtml: ""
190 , aditionalHtml: "" 194 , aditionalHtml: ""
191 , htmlOnly: false}; 195 , htmlOnly: false};
192 - $scope.formContainer.rows.push(row); 196 + if ($scope.currentRow) {
  197 + for (var i = $scope.formContainer.rows.length -1; i > $scope.currentRow.index; i--) {
  198 + $scope.formContainer.rows[i+1] = $scope.formContainer.rows[i];
  199 + }
  200 + $scope.formContainer.rows[$scope.currentRow.index+1] = row;
  201 + $scope.reorderRows();
  202 + }else{
  203 + $scope.formContainer.rows.push(row);
  204 + }
193 $scope.selectRow(row, true); 205 $scope.selectRow(row, true);
194 return row; 206 return row;
195 } 207 }
@@ -372,6 +384,44 @@ citApp.directive("formBuilder", ['ImageRepository', '$translate', '$filter', '$t @@ -372,6 +384,44 @@ citApp.directive("formBuilder", ['ImageRepository', '$translate', '$filter', '$t
372 } 384 }
373 } 385 }
374 386
  387 + $scope.allowComponentUp = function(component) {
  388 + if (component) {
  389 + if (component.rowIndex > 0) {
  390 + var row = $scope.formContainer.rows[component.rowIndex];
  391 + var targetRow = $scope.formContainer.rows[component.rowIndex - 1];
  392 +
  393 + return row.tabIndex == targetRow.tabIndex;
  394 + }
  395 + }
  396 + return false;
  397 + }
  398 +
  399 + $scope.allowComponentDown = function(component) {
  400 + if (component) {
  401 + if (component.rowIndex < $scope.formContainer.rows.length - 1) {
  402 + var row = $scope.formContainer.rows[component.rowIndex];
  403 + var targetRow = $scope.formContainer.rows[component.rowIndex + 1];
  404 +
  405 + return row.tabIndex == targetRow.tabIndex;
  406 + }
  407 + }
  408 + return false;
  409 + }
  410 +
  411 + $scope.moveComponentUp = function(component) {
  412 + if ($scope.allowComponentUp(component)) {
  413 + component.rowIndexInput = component.rowIndexInput - 1;
  414 + $scope.changeComponentRow(component);
  415 + }
  416 + }
  417 +
  418 + $scope.moveComponentDown = function(component) {
  419 + if ($scope.allowComponentDown(component)) {
  420 + component.rowIndexInput = component.rowIndexInput + 1;
  421 + $scope.changeComponentRow(component);
  422 + }
  423 + }
  424 +
375 $scope.deleteRow = function(row){ 425 $scope.deleteRow = function(row){
376 if (row) { 426 if (row) {
377 $scope.formContainer.rows.splice(row.index, 1); 427 $scope.formContainer.rows.splice(row.index, 1);
@@ -386,17 +436,15 @@ citApp.directive(&quot;formBuilder&quot;, [&#39;ImageRepository&#39;, &#39;$translate&#39;, &#39;$filter&#39;, &#39;$t @@ -386,17 +436,15 @@ citApp.directive(&quot;formBuilder&quot;, [&#39;ImageRepository&#39;, &#39;$translate&#39;, &#39;$filter&#39;, &#39;$t
386 } 436 }
387 437
388 $scope.changeComponentRow = function(component) { 438 $scope.changeComponentRow = function(component) {
389 - if (component.rowIndexInput != component.rowIndex + 1) {  
390 - var row = $scope.formContainer.rows[component.rowIndex];  
391 - row.components.splice(component.index, 1);  
392 - $scope.reorderComponents(row);  
393 -  
394 - component.rowIndex = component.rowIndexInput - 1;  
395 - row = $scope.formContainer.rows[component.rowIndex];  
396 - component.index = row.components.length - 1;  
397 - row.components.push(component);  
398 - $scope.reorderComponents(row);  
399 - } 439 + var row = $scope.formContainer.rows[component.rowIndex];
  440 + row.components.splice(component.index, 1);
  441 + $scope.reorderComponents(row);
  442 +
  443 + component.rowIndex = component.rowIndexInput - 1;
  444 + row = $scope.formContainer.rows[component.rowIndex];
  445 + component.index = row.components.length - 1;
  446 + row.components.push(component);
  447 + $scope.reorderComponents(row);
400 } 448 }
401 449
402 $scope.allowRowUp = function(row) { 450 $scope.allowRowUp = function(row) {
cit-esi-web/src/main/webapp/assets/js/angular/custom/directive/html/formBuilder.html
  Diff comments   View file @82dab98
@@ -161,7 +161,7 @@ @@ -161,7 +161,7 @@
161 </div> 161 </div>
162 </div> 162 </div>
163 </div> 163 </div>
164 - <div class="form-group" > 164 +<!-- <div class="form-group" >
165 <label for=currentComponent.rowIndexInput> <translate> <span class="">ESI.LINHA</span></translate> 165 <label for=currentComponent.rowIndexInput> <translate> <span class="">ESI.LINHA</span></translate>
166 <i class="fa fa-info-circle" tooltip-placement="top" 166 <i class="fa fa-info-circle" tooltip-placement="top"
167 tooltip="Linha do componente" 167 tooltip="Linha do componente"
@@ -173,7 +173,7 @@ @@ -173,7 +173,7 @@
173 class="form-control property--width input-sm ng-valid ng-valid-min ng-valid-max ng-dirty ng-touched" 173 class="form-control property--width input-sm ng-valid ng-valid-min ng-valid-max ng-dirty ng-touched"
174 id="currentComponent.rowIndexInput" min="1" max="{{formContainer.rows.length}}" ng-change="changeComponentRow(currentComponent)"> 174 id="currentComponent.rowIndexInput" min="1" max="{{formContainer.rows.length}}" ng-change="changeComponentRow(currentComponent)">
175 </div> 175 </div>
176 - </div> 176 + </div> -->
177 <div style="height:395px;overflow-x: hidden;overflow-y: auto; padding: 0px 0px 0px 0px"> 177 <div style="height:395px;overflow-x: hidden;overflow-y: auto; padding: 0px 0px 0px 0px">
178 <div class='row no-padding' ng-if="currentComponent.widget.type.name == 'HTML'"> 178 <div class='row no-padding' ng-if="currentComponent.widget.type.name == 'HTML'">
179 <label-ui-ace ng-label="ESI.HTML" ng-theme="eclipse" ng-mode="html" ng-model="currentComponent.htmlCode" 179 <label-ui-ace ng-label="ESI.HTML" ng-theme="eclipse" ng-mode="html" ng-model="currentComponent.htmlCode"
cit-esi-web/src/main/webapp/assets/js/angular/custom/directive/html/formBuilderRow.html
  Diff comments   View file @82dab98
@@ -43,6 +43,14 @@ @@ -43,6 +43,14 @@
43 ng-click="moveComponentRight(row, component)" 43 ng-click="moveComponentRight(row, component)"
44 class="fa fa-arrow-circle-right btn-caption move-right" 44 class="fa fa-arrow-circle-right btn-caption move-right"
45 title="Move o componente para a direita"></button> 45 title="Move o componente para a direita"></button>
  46 + <button ng-if="allowComponentUp(component)"
  47 + ng-click="moveComponentUp(component)"
  48 + class="fa fa-arrow-circle-up btn-caption move-left"
  49 + title="Move o componente para a linha acima"></button>
  50 + <button ng-if="allowComponentDown(component)"
  51 + ng-click="moveComponentDown(component)"
  52 + class="fa fa-arrow-circle-down btn-caption move-left"
  53 + title="Move o componente para a linha abaixo"></button>
46 <button ng-click="deleteComponent(row, component)" 54 <button ng-click="deleteComponent(row, component)"
47 class="fa fa-times-circle btn-caption" 55 class="fa fa-times-circle btn-caption"
48 title="Exclui o componente"></button> 56 title="Exclui o componente"></button>