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 178 $scope.currentTab = $scope.formContainer.tabs[0];
179 179 }
180 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 186 , $type: "row"
183 187 , tabIndex: tabIndex
184 188 , components: []
... ... @@ -189,7 +193,15 @@ citApp.directive("formBuilder", ['ImageRepository', '$translate', '$filter', '$t
189 193 , ngIfHtml: ""
190 194 , aditionalHtml: ""
191 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 205 $scope.selectRow(row, true);
194 206 return row;
195 207 }
... ... @@ -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 425 $scope.deleteRow = function(row){
376 426 if (row) {
377 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 436 }
387 437  
388 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 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 161 </div>
162 162 </div>
163 163 </div>
164   - <div class="form-group" >
  164 +<!-- <div class="form-group" >
165 165 <label for=currentComponent.rowIndexInput> <translate> <span class="">ESI.LINHA</span></translate>
166 166 <i class="fa fa-info-circle" tooltip-placement="top"
167 167 tooltip="Linha do componente"
... ... @@ -173,7 +173,7 @@
173 173 class="form-control property--width input-sm ng-valid ng-valid-min ng-valid-max ng-dirty ng-touched"
174 174 id="currentComponent.rowIndexInput" min="1" max="{{formContainer.rows.length}}" ng-change="changeComponentRow(currentComponent)">
175 175 </div>
176   - </div>
  176 + </div> -->
177 177 <div style="height:395px;overflow-x: hidden;overflow-y: auto; padding: 0px 0px 0px 0px">
178 178 <div class='row no-padding' ng-if="currentComponent.widget.type.name == 'HTML'">
179 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 43 ng-click="moveComponentRight(row, component)"
44 44 class="fa fa-arrow-circle-right btn-caption move-right"
45 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 54 <button ng-click="deleteComponent(row, component)"
47 55 class="fa fa-times-circle btn-caption"
48 56 title="Exclui o componente"></button>
... ...