daily pastebin goal
80%
SHARE
TWEET

Untitled

a guest Aug 10th, 2018 49 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import { Component, OnInit, ViewChild } from '@angular/core';
  2. import { DropEvent } from 'ng-drag-drop';
  3. import { TabTemplate } from '../../models/tabTemplate.model';
  4. import { FormSkeleton } from '../../models/formSkeleton.model';
  5. import { FormBuilder } from '@angular/forms';
  6. import { ValidationModel } from '../../models/validation.model';
  7. import { ActivatedRoute, Router } from '@angular/router';
  8. import { DraggablesModelEvents } from '../../models/draggableEvents.model';
  9. import { DraggableItem } from '../../models/draggableItem.model';
  10. import { DictionaryModel } from '../../models/dictionary.model';
  11. import { ContainerModel } from '../../models/container.model';
  12. import { ContainerItemModel } from '../../models/containerItem.model';
  13. import { ContextMenuComponent, ContextMenuService } from 'ngx-contextmenu';
  14. import { DraggableListMenuComponent } from '../sidebars/draggable-list-menu/draggable-list-menu.component';
  15. import { DraggableEditingMenuComponent } from '../sidebars/draggable-editing-menu/draggable-editing-menu.component';
  16. import { TabTemplatesService } from '../../services/tab-templates.service';
  17.  
  18. @Component({
  19.   selector: 'app-draggables-form-skeleton',
  20.   templateUrl: './draggables-form-skeleton.component.html',
  21.   styleUrls: ['./draggables-form-skeleton.component.css']
  22. })
  23.  
  24. export class DraggablesFormSkeletonComponent implements OnInit {
  25.  
  26.   //#region Attributes
  27.  
  28.   private static MAX_COLUMNS = 3;
  29.   private savedUnchangedFormSkeleton: FormSkeleton = new FormSkeleton();
  30.   private chosenFormSkeletonForEditing: TabTemplate = new TabTemplate();
  31.   private mainTabTemplate: TabTemplate = new TabTemplate();
  32.  
  33.   // hovered item
  34.   private hoveredItem = null;
  35.   private hoveredItemKey = 0;
  36.  
  37.   // array of rows
  38.   public layoutRows: Array<ContainerModel> = [];
  39.   private layoutRowsSorted = [];
  40.  
  41.  
  42.   // hovering item gets this values
  43.   private containerItemModelNumber: number = 0;
  44.   private layoutRowsNumber: number = 0;
  45.  
  46.   // validation part
  47.   private validationModelKey: number;
  48.   private validationMessageCounter: number = 1;
  49.   private changedValidationModel;
  50.  
  51.   // allow dragging
  52.   private draggingEnabled: boolean = true;
  53.  
  54.   // open details
  55.   private leftsidebarOpen: boolean = false;
  56.  
  57.   // the number of all existing containers
  58.   private containerKey: number = 0;
  59.  
  60.   // On drop item flag
  61.   public anItemWasDropped: boolean = false;
  62.  
  63.   // Count how many columns user adds
  64.   private columnNumber: number = 0;
  65.  
  66.   // Getting the right height for divs
  67.   private biggestRowArray: Array<string> = [];
  68.   private additionalHeightForDropHereDiv: number = 0;
  69.   private listOfOffsetTopDataForAppItem: Array<number> = new Array<number>();
  70.   private sizeWindow: number = 0;
  71.   private rowHeightsOfRows: number = 0;
  72.   public reusables;
  73.  
  74.   // Right click on item opens basic menu
  75.   @ViewChild(ContextMenuComponent) public basicMenu: ContextMenuComponent = new ContextMenuComponent(this.service, null, null, null);
  76.   @ViewChild(DraggableListMenuComponent) public draggableListMenuComponent: DraggableListMenuComponent;
  77.   @ViewChild(DraggableEditingMenuComponent) public draggableEditingMenuComponent: DraggableEditingMenuComponent;
  78.  
  79.   constructor(private service: ContextMenuService, private formBuilder: FormBuilder, private route: ActivatedRoute,
  80.     private router: Router, private draggablesEvents: DraggablesModelEvents, private tabTemplatesService: TabTemplatesService) { }
  81.  
  82.   //#endregion
  83.  
  84.   ngOnInit() {
  85.     this.subscribeOnDraggableMethods();
  86.     // Add first container, that shows on a first screen
  87.     const containers = new Array<ContainerItemModel>(new ContainerItemModel(this.containerKey, 1, 0, false,
  88.       new DictionaryModel([])));
  89.     this.layoutRows.push(new ContainerModel(containers));
  90.  
  91.     // increase number of containers
  92.     this.containerKey++;
  93.  
  94.     this.reusables = this.tabTemplatesService.getReusableElements();
  95.     // Get the size of a window
  96.     this.sizeWindow = window.innerWidth;
  97.   }
  98.  
  99.  
  100.  
  101.   mergeCells() {
  102.     const selectedItemsMatrix = this.layoutRows.map((row: ContainerModel) => {
  103.       return row.containerItems.filter((column: ContainerItemModel) => {
  104.         return column.selectFlag === true;
  105.       });
  106.     });
  107.  
  108.     // Count how many fields are selected
  109.     let counterOfSelectedFields = 0;
  110.     selectedItemsMatrix.forEach(arrayItem => {
  111.       arrayItem.forEach((container) => {
  112.         if (container) {
  113.           counterOfSelectedFields++;
  114.         }
  115.       });
  116.     });
  117.  
  118.     // Only two field can be selected
  119.     if (counterOfSelectedFields > 2) {
  120.       alert('User can select only two field at once!');
  121.     } else {
  122.       const draggableItems: Array<DraggableItem> = [];
  123.       const selectedRows = selectedItemsMatrix.length;
  124.       this.updateContainerKeys();
  125.  
  126.       const BreakException = {};
  127.  
  128.       try {
  129.         for (let i = 0; i < selectedRows; i++) {
  130.           const selectedCols = selectedItemsMatrix[i].length;
  131.           for (let j = 0; j < selectedCols; j++) {
  132.             this.layoutRows.forEach((row: ContainerModel, rowIndex) => {
  133.               row.containerItems.forEach((column: ContainerItemModel, index) => {
  134.                 // Selected fields are in one row
  135.                 if (selectedItemsMatrix[i][j + 1]) {
  136.                   if (selectedItemsMatrix[i][j].row === selectedItemsMatrix[i][j + 1].row) {
  137.                     if (column.key === (selectedItemsMatrix[i][j + 1].key)) {
  138.                       draggableItems.push(...column.dictionaryModel.draggableItems);
  139.                       row.containerItems.splice(index, 1);
  140.                       this.updateContainerKeys();
  141.                       this.updateContainerColumnsAndRows(row.containerItems);
  142.                       this.containerKey--;
  143.                       row.containerItems.find(x => x.key === (column.key - 1)).dictionaryModel.draggableItems.push(...draggableItems);
  144.                       throw BreakException;
  145.                     }
  146.                   }
  147.                 } else
  148.                   // Selected fields are in one column
  149.                   if (selectedItemsMatrix[i + 1][j]) {
  150.                     if (selectedItemsMatrix[i][j].column === selectedItemsMatrix[i + 1][j].column) {
  151.                       if (selectedItemsMatrix[i + 1][j].key === column.key) {
  152.                         draggableItems.push(...column.dictionaryModel.draggableItems);
  153.                         row.containerItems.splice(index, 1);
  154.                         if (row.containerItems.length === 0) {
  155.                           this.layoutRows.splice(rowIndex, 1);
  156.                         }
  157.                         this.updateContainerKeys();
  158.                         this.updateContainerColumnsAndRows(row.containerItems);
  159.                         this.containerKey = this.containerKey - 1;
  160.                         this.layoutRows.forEach(layoutRow => {
  161.                           layoutRow.containerItems.forEach(rowColumn => {
  162.                             if (rowColumn.key === selectedItemsMatrix[0][0].key) {
  163.                               rowColumn.dictionaryModel.draggableItems.push(...draggableItems);
  164.                             }
  165.                           });
  166.                         });
  167.                         throw BreakException;
  168.                       }
  169.                     }
  170.                   }
  171.               });
  172.             });
  173.           }
  174.         }
  175.       } catch (e) {
  176.         if (e !== BreakException) {
  177.           throw e;
  178.         }
  179.       }
  180.       this.updateContainerKeys();
  181.     }
  182.   }
  183.  
  184.  
  185.   //#region UI for cells
  186.  
  187.   returnClassForTheContainer(containerItemsOfOneRow: Array<ContainerItemModel>, oneContainerItem: ContainerItemModel) {
  188.  
  189.     this.layoutRows.forEach((row, rowIndex) => {
  190.       row.containerItems.forEach((column, colIndex) => {
  191.         if (column.dictionaryModel.draggableItems.length !== 1) {
  192.           column.dictionaryModel.draggableItems.forEach((draggableItem, itemIndex) => {
  193.             if (draggableItem.value.dataType === 'unvisible') {
  194.               column.dictionaryModel.draggableItems.splice(itemIndex, 1);
  195.             }
  196.           });
  197.         }
  198.       });
  199.     });
  200.     this.layoutRows.forEach((row, rowIndex) => {
  201.       row.containerItems.forEach((column, colIndex) => {
  202.         if (column.dictionaryModel.draggableItems.length === 0) {
  203.           column.dictionaryModel.draggableItems.push({ key: 1, value: new FormSkeleton('unvisible') });
  204.         }
  205.       });
  206.     });
  207.     const lengthOfContainerItemsOfOneRow = containerItemsOfOneRow.length;
  208.  
  209.     const divideWidth: any = 12 / lengthOfContainerItemsOfOneRow;
  210.     let containerClassString: string = 'col-md-' + Math.round(divideWidth) + ' col-lg-' + Math.round(divideWidth) + ' class';
  211.  
  212.     oneContainerItem.selectFlag === true ? containerClassString = containerClassString + ' addBlackSelectColor' :
  213.       containerClassString = containerClassString + '';
  214.  
  215.     const splitHeight = 86 / this.layoutRows.length;
  216.     this.updateContainerKeys();
  217.  
  218.  
  219.  
  220.     // Change height of a divs with class 'col-md-11 col-lg -11 class11' regarding to number of rows
  221.     const elements11 = <HTMLCollectionOf<HTMLDivElement>>document.getElementsByClassName('class11');
  222.     for (let i = 0; i < elements11.length; i++) {
  223.       if (this.sizeWindow < 992) {
  224.         if (this.columnNumber === 2) {
  225.           elements11[i].style.height = (splitHeight * 2) + 'vH';
  226.         } else if (this.columnNumber === 3) {
  227.           elements11[i].style.height = (splitHeight * 3) + 'vH';
  228.         }
  229.       } else {
  230.         elements11[i].style.height = splitHeight + 'vH';
  231.       }
  232.       elements11[i].style.padding = '0px';
  233.       elements11[i].style.border = '1px dashed lightblue';
  234.     }
  235.  
  236.     // If there are items dropped in a container, height is unset
  237.     this.layoutRows.forEach((row, index) => {
  238.       row.containerItems.forEach(column => {
  239.         if (column.dictionaryModel.draggableItems.length !== 0) {
  240.           elements11[index].style.height = 'unset';
  241.         }
  242.       });
  243.     });
  244.  
  245.     // Change height of a divs with class 'col-md-12 col-lg -12 class' regarding to number of rows
  246.     const elements12 = <HTMLCollectionOf<HTMLDivElement>>document.getElementsByClassName('class');
  247.     for (let i = 0; i < elements12.length; i++) {
  248.       elements12[i].style.height = splitHeight + 'vH';
  249.       elements12[i].style.padding = '0px';
  250.     }
  251.     this.updateContainerKeys();
  252.  
  253.     // When draggable items array length is zero
  254.     this.layoutRows.forEach((row, rowIndex) => {
  255.       row.containerItems.forEach((column, colIndex) => {
  256.         let unvisibleExist = false;
  257.         for (let p = 0; p < column.dictionaryModel.draggableItems.length; p++) {
  258.           if (column.dictionaryModel.draggableItems[p].value.dataType === 'unvisible') {
  259.             unvisibleExist = true;
  260.           }
  261.         }
  262.         if (unvisibleExist === false) {
  263.           if (elements12.length !== 0) {
  264.             if (!elements12[column.key]) {
  265.               elements12[rowIndex].style.height = 'unset';
  266.             } else {
  267.               elements12[column.key].style.height = 'unset';
  268.             }
  269.           }
  270.         }
  271.       });
  272.     });
  273.  
  274.  
  275.  
  276.     // Get the biggest container height of every row
  277.     let maxLength = 0;
  278.     const biggestContainerRowHeight: Array<string> = [];
  279.     this.layoutRows.forEach((row, rowIndex) => {
  280.       let measureLength = 0;
  281.       row.containerItems.forEach((column, colIndex) => {
  282.         if (elements12[row.containerItems[colIndex].key]) {
  283.           if (elements12[row.containerItems[colIndex].key].offsetHeight > measureLength) {
  284.             measureLength = elements12[row.containerItems[colIndex].key].offsetHeight;
  285.             maxLength = measureLength;
  286.           }
  287.         }
  288.       });
  289.       biggestContainerRowHeight.push((maxLength + this.additionalHeightForDropHereDiv).toString());
  290.     });
  291.  
  292.     if (this.anItemWasDropped) {
  293.       this.layoutRows.forEach((row, rowIndex) => {
  294.         row.containerItems.forEach((column, colIndex) => {
  295.           if (elements12[row.containerItems[colIndex].key]) {
  296.             elements12[row.containerItems[colIndex].key].style.height = biggestContainerRowHeight[rowIndex].toString() + 'px';
  297.           }
  298.         });
  299.       });
  300.       for (let i = 0; i < elements11.length; i++) {
  301.         if (this.sizeWindow < 992) {
  302.           if (this.columnNumber === 2) {
  303.             // tslint:disable-next-line:radix
  304.             elements11[i].style.height = (2 * parseInt(biggestContainerRowHeight[i])).toString() + 'px';
  305.           } else if (this.columnNumber === 3) {
  306.             // tslint:disable-next-line:radix
  307.             elements11[i].style.height = (3 * parseInt(biggestContainerRowHeight[i])).toString() + 'px';
  308.           }
  309.         } else {
  310.           elements11[i].style.height = biggestContainerRowHeight[i].toString() + 'px';
  311.         }
  312.       }
  313.     }
  314.     this.biggestRowArray = biggestContainerRowHeight;
  315.     let element8 = 0;
  316.     this.rowHeightsOfRows = 0;
  317.     this.layoutRows.forEach((row, rowIndex) => {
  318.       if (rowIndex === this.layoutRowsNumber) {
  319.         row.containerItems.forEach((column, colIndex) => {
  320.           if (column.key === this.containerItemModelNumber) {
  321.             if (rowIndex !== 0) {
  322.               biggestContainerRowHeight.forEach((rowHeight, index) => {
  323.                 if (index !== (biggestContainerRowHeight.length - 1)) {
  324.                   // tslint:disable-next-line:radix
  325.                   this.rowHeightsOfRows = this.rowHeightsOfRows + parseInt(rowHeight);
  326.                   element8 = element8 + 1;
  327.                 }
  328.               });
  329.             }
  330.           }
  331.         });
  332.       }
  333.     });
  334.  
  335.  
  336.     return containerClassString;
  337.   }
  338.  
  339.   onResize(event) {
  340.     this.sizeWindow = event.target.innerWidth;
  341.   }
  342.  
  343.   returnClassForMiddleComponent() {
  344.     let classString = '';
  345.     if (this.sizeWindow < 992 && this.leftsidebarOpen) {
  346.       classString = 'col-md-4 col-lg-4';
  347.  
  348.     } else if (this.sizeWindow > 992 && this.leftsidebarOpen) {
  349.       classString = 'col-md-5 col-lg-5';
  350.     } else if (this.sizeWindow < 992 && !this.leftsidebarOpen) {
  351.       classString = 'col-md-7 col-lg-7';
  352.     } else if (this.sizeWindow > 992 && !this.leftsidebarOpen) {
  353.       classString = 'col-md-8 col-lg-8';
  354.     }
  355.     if ((classString === 'col-md-5 col-lg-5') || (classString === 'col-md-8 col-lg-8')) {
  356.       const buttonRow = <HTMLDivElement>document.getElementById('buttonRowInside');
  357.       buttonRow.style.display = 'inline-block';
  358.       const buttonRow1 = <HTMLDivElement>document.getElementById('buttonRowOutSide');
  359.       buttonRow1.style.display = 'none';
  360.     }
  361.     if ((classString === 'col-md-4 col-lg-4') || (classString === 'col-md-7 col-lg-7')) {
  362.       const buttonRow = <HTMLDivElement>document.getElementById('buttonRowOutSide');
  363.       buttonRow.style.display = 'inline-block';
  364.       const buttonRow1 = <HTMLDivElement>document.getElementById('buttonRowInside');
  365.       buttonRow1.style.display = 'none';
  366.     }
  367.     return classString;
  368.   }
  369.  
  370.   returnButtonClass() {
  371.     if ((this.returnClassForMiddleComponent() === 'col-md-4 col-lg-4') || (this.returnClassForMiddleComponent() === 'col-md-7 col-lg-7')) {
  372.       return 'addRowDiv col-md-1 col-lg-1';
  373.     }
  374.     return 'addRowDiv';
  375.   }
  376.   //#endregion
  377.  
  378.   //#region Adding column and rows
  379.  
  380.   addColumn(item) {
  381.     let numberOfContainers = 0;
  382.     this.layoutRows[item].containerItems.length === 0 ? numberOfContainers = 0 :
  383.       numberOfContainers = this.layoutRows[item].containerItems.length - 1;
  384.  
  385.     const columnNumber = this.layoutRows[item].containerItems[numberOfContainers].column + 1;
  386.     if (columnNumber > DraggablesFormSkeletonComponent.MAX_COLUMNS) {
  387.       alert('User can add three columns only!');
  388.     } else {
  389.       this.layoutRows.forEach((layoutRow, rowIndex) => {
  390.         layoutRow.containerItems.push(new ContainerItemModel(
  391.           this.containerKey, columnNumber, rowIndex, false, new DictionaryModel([])));
  392.         this.containerKey++;
  393.       });
  394.       this.updateContainerKeys();
  395.     }
  396.   }
  397.  
  398.   addRow() {
  399.     const numberOfContainersFromTheLastRow = this.layoutRows[this.layoutRows.length - 1].containerItems.length;
  400.     const numberOfRows = this.layoutRows.length;
  401.  
  402.     this.layoutRows.push(new ContainerModel([]));
  403.     for (let i = 0; i < numberOfContainersFromTheLastRow; i++) {
  404.       this.layoutRows[this.layoutRows.length - 1].containerItems.push(
  405.         new ContainerItemModel(this.containerKey, i + 1, numberOfRows, false, new DictionaryModel(
  406.           [])));
  407.       this.containerKey++;
  408.     }
  409.     this.updateContainerKeys();
  410.   }
  411.  
  412.   //#endregion
  413.  
  414.   //#region Save changes for an item
  415.  
  416.   saveData(item) {
  417.  
  418.     this.layoutRows.forEach((row, rowIndex) => {
  419.       if (rowIndex === this.layoutRowsNumber) {
  420.         row.containerItems.forEach((column, colIndex) => {
  421.           if (column.key === this.containerItemModelNumber) {
  422.             const changedValuesOfObservedItem = item[0];
  423.             let changedValuesOfObservedItemRows = item[1];
  424.             let changedValuesOfObservedItemColumns = item[2];
  425.  
  426.             // Changing an item in general
  427.             if (changedValuesOfObservedItem.dataType) {
  428.               let options: any;
  429.               const optionsArray: any = [];
  430.               if (item[0].options !== null) {
  431.                 options = item[0].options.split('\n');
  432.                 for (let i = 0; i < options.length; i++) {
  433.                   optionsArray.push({ option: options[i] });
  434.                 }
  435.               } else {
  436.                 options = '';
  437.               }
  438.               options = optionsArray;
  439.               column.dictionaryModel.draggableItems.forEach((draggableItem, itemIndex) => {
  440.                 if (draggableItem.key === item[3].key) {
  441.                   draggableItem.value.dataType = changedValuesOfObservedItem.dataType;
  442.                   draggableItem.value.previewLabel = changedValuesOfObservedItem.previewLabel;
  443.                   draggableItem.value.exportLabel = changedValuesOfObservedItem.exportLabel;
  444.                   draggableItem.value.placeholder = changedValuesOfObservedItem.placeholder;
  445.                   draggableItem.value.description = changedValuesOfObservedItem.description;
  446.                   draggableItem.value.options = [];
  447.                   draggableItem.value.options = options;
  448.                   draggableItem.value.max = changedValuesOfObservedItem.max;
  449.                   draggableItem.value.min = changedValuesOfObservedItem.min;
  450.                   draggableItem.value.index = changedValuesOfObservedItem.index;
  451.                   draggableItem.value.editable = changedValuesOfObservedItem.editable;
  452.                   if (changedValuesOfObservedItem.url !== 'https://i.imgur.com/qm52RKN.png') {
  453.                     draggableItem.value.url = changedValuesOfObservedItem.url;
  454.                   }
  455.                   draggableItem.value.date =
  456.                     changedValuesOfObservedItem.date;
  457.                   draggableItem.value.validations =
  458.                     changedValuesOfObservedItem.validations;
  459.                 }
  460.               });
  461.             }
  462.             if (changedValuesOfObservedItemColumns !== null) {
  463.               changedValuesOfObservedItemColumns = changedValuesOfObservedItemColumns.value;
  464.               const newTableColumnArray: Array<String> = new Array<String>();
  465.               for (let i = 0; i < column.dictionaryModel.draggableItems.length; i++) {
  466.                 if (column.dictionaryModel.draggableItems[i].key === item[3].key) {
  467.                   // tslint:disable-next-line:forin
  468.                   for (const k in changedValuesOfObservedItemColumns) {
  469.                     newTableColumnArray.push(changedValuesOfObservedItemColumns[k]);
  470.                   }
  471.                   const elements = column.dictionaryModel.draggableItems[i].value.tableOptions;
  472.                   column.dictionaryModel.draggableItems[i].value.tableOptions = [];
  473.                   column.dictionaryModel.draggableItems[i].value.tableOptions.columns =
  474.                     newTableColumnArray;
  475.                   column.dictionaryModel.draggableItems[i].value.tableOptions.rows =
  476.                     elements.rows;
  477.                   break;
  478.                   //  =
  479.                   //   newTableColumnArray;
  480.                 }
  481.               }
  482.             }
  483.             console.log(column.dictionaryModel.draggableItems);
  484.             // Rows of an table item changed
  485.             if (changedValuesOfObservedItemRows !== null) {
  486.               changedValuesOfObservedItemRows = changedValuesOfObservedItemRows.value;
  487.               const newTableRowArray: Array<String> = new Array<String>();
  488.               for (let i = 0; i < column.dictionaryModel.draggableItems.length; i++) {
  489.                 if (column.dictionaryModel.draggableItems[i].key === item[3].key) {
  490.                   // tslint:disable-next-line:forin
  491.                   for (const k in changedValuesOfObservedItemRows) {
  492.                     newTableRowArray.push(changedValuesOfObservedItemRows[k]);
  493.                   }
  494.                   const elements = column.dictionaryModel.draggableItems[i].value.tableOptions;
  495.                   column.dictionaryModel.draggableItems[i].value.tableOptions = [];
  496.                   column.dictionaryModel.draggableItems[i].value.tableOptions.columns =
  497.                     elements.columns;
  498.                   column.dictionaryModel.draggableItems[i].value.tableOptions.rows =
  499.                     newTableRowArray;
  500.                   break;
  501.                   // column.dictionaryModel.draggableItems[i].value.tableOptions.rows =
  502.                   //   newTableRowArray;
  503.                 }
  504.               }
  505.             }
  506.           }
  507.         });
  508.       }
  509.     });
  510.     this.leftsidebarOpen = false;
  511.     this.chosenFormSkeletonForEditing = null;
  512.   }
  513.  
  514.   //#endregion
  515.  
  516.   //#region Save validation messages for an item
  517.  
  518.   saveValidationData(item) {
  519.     // Validation attributes
  520.     let id: number = 1;
  521.     let statement: string = '';
  522.     let messageType: string = '';
  523.     let messageContent: string = '';
  524.     let keyValidation: string = '';
  525.     let valueToCompare: any = null;
  526.     const droppedItem = item[0];
  527.  
  528.     this.validationModelKey = item[1].key;
  529.  
  530.     // Fetching item values
  531.     id = this.validationMessageCounter;
  532.     statement = 'If this field is ' + droppedItem.validationSelect + ' ' + droppedItem.validationInput;
  533.     messageType = droppedItem.messageType;
  534.     messageContent = droppedItem.messageContent;
  535.     if (droppedItem.validationSelect === 'greater than: ') {
  536.       keyValidation = 'max';
  537.       valueToCompare = droppedItem.validationInput;
  538.     } else if (droppedItem.validationSelect === 'greater than or equal to: ') {
  539.       keyValidation = 'max';
  540.       valueToCompare = droppedItem.validationInput - 1;
  541.     } else if (droppedItem.validationSelect === 'smaller than or equal to: ') {
  542.       keyValidation = 'min';
  543.       valueToCompare = droppedItem.validationInput + 1;
  544.     } else if (droppedItem.validationSelect === 'smaller than: ') {
  545.       keyValidation = 'min';
  546.       valueToCompare = droppedItem.validationInput;
  547.     } else if (droppedItem.validationSelect === 'equal to: ') {
  548.       keyValidation = 'equal';
  549.       valueToCompare = droppedItem.validationInput;
  550.     } else if (droppedItem.validationSelect === 'not: ') {
  551.       keyValidation = 'not';
  552.       console.log('tu sam');
  553.       valueToCompare = droppedItem.validationInput;
  554.     }
  555.  
  556.     this.changedValidationModel = new ValidationModel(id, statement, messageType, messageContent, keyValidation, valueToCompare);
  557.     if (this.saveValidationModel(this.validationModelKey)) {
  558.       //
  559.       this.draggablesEvents.deleteValidationMethod(droppedItem.validationSelect);
  560.     }
  561.   }
  562.  
  563.   //#endregion
  564.  
  565.   //#region Cancel changes off an item
  566.  
  567.   cancelChange(post) {
  568.     for (const o in this.layoutRows[this.layoutRowsNumber].containerItems) {
  569.       if (this.layoutRows[this.layoutRowsNumber].containerItems[o].key === this.containerItemModelNumber) {
  570.  
  571.         const savedItem = this.savedUnchangedFormSkeleton;
  572.         for (let i = 0; i < this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems.length; i++) {
  573.           if (this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].key === post.key) {
  574.             this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].value.dataType = savedItem.dataType;
  575.             this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].value.previewLabel =
  576.               savedItem.previewLabel;
  577.             this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].value.exportLabel =
  578.               savedItem.exportLabel;
  579.             this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].value.placeholder =
  580.               savedItem.placeholder;
  581.             this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].value.description =
  582.               savedItem.description;
  583.             this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].value.required = savedItem.required;
  584.             this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].value.options = savedItem.options;
  585.             this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].value.max = savedItem.max;
  586.             this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].value.min = savedItem.min;
  587.             this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].value.index = savedItem.index;
  588.             this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].value.editable = savedItem.editable;
  589.             this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].value.url = savedItem.url;
  590.             this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].value.date = savedItem.date;
  591.           }
  592.         }
  593.       }
  594.     }
  595.     this.leftsidebarOpen = false;
  596.     this.chosenFormSkeletonForEditing = null;
  597.   }
  598.  
  599.   //#endregion
  600.  
  601.   //#region Cancel validation messages for an item
  602.  
  603.   cancelValidationChange(post) {
  604.     for (const o in this.layoutRows[this.layoutRowsNumber].containerItems) {
  605.       if (this.layoutRows[this.layoutRowsNumber].containerItems[o].key === this.containerItemModelNumber) {
  606.         const lastOne = this.savedUnchangedFormSkeleton;
  607.         for (let i = 0; i < this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems.length; i++) {
  608.           if (this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].key === post.key) {
  609.             this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].value.validations =
  610.               lastOne.validations;
  611.           }
  612.         }
  613.       }
  614.     }
  615.     this.leftsidebarOpen = false;
  616.     this.chosenFormSkeletonForEditing = null;
  617.   }
  618.  
  619.   //#endregion
  620.  
  621.   //#region Change UI for select checkbox
  622.  
  623.   mouseOverSelectCheckbox(container) {
  624.     this.updateContainerKeys();
  625.     const el = <HTMLCollectionOf<HTMLInputElement>>document.getElementsByClassName('selectCheckbox');
  626.     for (let i = 0; i < el.length; i++) {
  627.       if (container.key === i) {
  628.         el[i].style.display = 'inline-block';
  629.         el[i].style.backgroundColor = 'lightgrey';
  630.         el[i].style.height = '20px';
  631.         el[i].style.width = '20px';
  632.       }
  633.     }
  634.   }
  635.   mouseLeaveSelectCheckbox(container) {
  636.     const el = <HTMLCollectionOf<HTMLInputElement>>document.getElementsByClassName('selectCheckbox');
  637.     this.updateContainerKeys();
  638.     for (let i = 0; i < el.length; i++) {
  639.       if (container.key === i) {
  640.         el[i].style.display = 'inline-block';
  641.         el[i].style.backgroundColor = 'lightgrey';
  642.         if (el[i].checked === true) {
  643.           el[i].style.height = '20px';
  644.           el[i].style.width = '20px';
  645.         } else {
  646.           el[i].style.display = 'none';
  647.         }
  648.       }
  649.     }
  650.   }
  651.  
  652.   //#endregion
  653.  
  654.   //#region Update methods
  655.  
  656.   updateContainerKeys() {
  657.     let counter = 0;
  658.     for (let v = 0; v < this.layoutRows.length; v++) {
  659.       for (let c = 0; c < this.layoutRows[v].containerItems.length; c++) {
  660.         this.layoutRows[v].containerItems[c].key = counter;
  661.         counter = counter + 1;
  662.       }
  663.     }
  664.   }
  665.  
  666.   updateContainerColumnsAndRows(containerItems_: Array<ContainerItemModel>) {
  667.     let columnCounter = 1;
  668.     containerItems_.forEach((containerItem) => {
  669.       containerItem.column = columnCounter;
  670.       columnCounter = columnCounter + 1;
  671.     });
  672.   }
  673.  
  674.   updateDraggableItemKeys() {
  675.     let dragItemCounter = 1;
  676.     this.layoutRows.forEach((row) => {
  677.       row.containerItems.forEach((column) => {
  678.         if (column.key === this.containerItemModelNumber) {
  679.           column.dictionaryModel.draggableItems.forEach((item) => {
  680.             item.key = dragItemCounter;
  681.             dragItemCounter++;
  682.           });
  683.         }
  684.       });
  685.     });
  686.   }
  687.   //#endregion
  688.  
  689.  
  690.   // Delete item from a tab template
  691.   deleteItem(post) {
  692.     for (const o in this.layoutRows[this.layoutRowsNumber].containerItems) {
  693.       if (this.layoutRows[this.layoutRowsNumber].containerItems[o].key === this.containerItemModelNumber) {
  694.  
  695.         for (let i = 0; i < this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems.length; i++) {
  696.           if (this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].key === post) {
  697.             this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems.splice(i, 1);
  698.           }
  699.         }
  700.       }
  701.     }
  702.     this.leftsidebarOpen = false;
  703.     this.chosenFormSkeletonForEditing = null;
  704.   }
  705.  
  706.   // When dragging over, remember which container and draggable item is hovered
  707.   onDragEnter(columnNumber, item, container, k) {
  708.     this.hoveredItem = item;
  709.     this.hoveredItemKey = item.key;
  710.     this.layoutRowsNumber = container;
  711.     this.containerItemModelNumber = k;
  712.   }
  713.  
  714.   // Next button click action
  715.   editTabTemplate() {
  716.     const a = JSON.stringify(this.mainTabTemplate);
  717.     this.router.navigate(['/editTabTemplate'], { queryParams: { 'mainTabTemplate': a } });
  718.   }
  719.  
  720.   // Save validation message for draggable item
  721.   saveValidationModel(key) {
  722.     // tslint:disable-next-line:forin
  723.     for (const o in this.layoutRows[this.layoutRowsNumber].containerItems) {
  724.       if (this.layoutRows[this.layoutRowsNumber].containerItems[o].key === this.containerItemModelNumber) {
  725.         for (let i = 0; i < this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems.length; i++) {
  726.           if (this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].key === key) {
  727.             if (this.changedValidationModel.valueToCompare !== '') {
  728.               this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].value.validations.push(
  729.                 this.changedValidationModel);
  730.  
  731.             } else {
  732.               alert('Please input valid text, for example url or email');
  733.               return false;
  734.             }
  735.           }
  736.         }
  737.       }
  738.       this.validationMessageCounter = this.validationMessageCounter + 1;
  739.       return true;
  740.     }
  741.   }
  742.  
  743.   // Checkbox for selecting items for merginh
  744.   onChangeSelect(k) {
  745.     // tslint:disable-next-line:forin
  746.     for (const i in this.layoutRows) {
  747.       for (const j of this.layoutRows[i].containerItems) {
  748.         if (j.key === k.key) {
  749.           j.selectFlag = !j.selectFlag;
  750.         }
  751.       }
  752.     }
  753.   }
  754.  
  755.  
  756.  
  757.   // Click on item opens leftsidebar
  758.   onClick(post: any, i: any, k: any) {
  759.     let check = false;
  760.     // Disable clicking on item if the container is selected
  761.     // tslint:disable-next-line:forin
  762.     for (const m in this.layoutRows) {
  763.       for (const j of this.layoutRows[m].containerItems) {
  764.         if (j.selectFlag === true) {
  765.           if (k === j.key) {
  766.             check = true;
  767.           }
  768.         }
  769.       }
  770.     }
  771.     if (!check) {
  772.       this.layoutRowsNumber = i;
  773.       this.containerItemModelNumber = k;
  774.       this.chosenFormSkeletonForEditing = post;
  775.       this.leftsidebarOpen = true;
  776.     }
  777.   }
  778.  
  779.   // Changing url of an item in a leftsidebar
  780.   changePicture(item) {
  781.     for (const o in this.layoutRows[this.layoutRowsNumber].containerItems) {
  782.       if (this.layoutRows[this.layoutRowsNumber].containerItems[o].key === this.containerItemModelNumber) {
  783.         const lastOneUrl = item[1];
  784.         for (let i = 0; i < this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems.length; i++) {
  785.           if (this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].key === item[0]) {
  786.             this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].value.url = lastOneUrl;
  787.           }
  788.         }
  789.       }
  790.     }
  791.   }
  792.  
  793.   // Old item stored
  794.   getOldOne(post) {
  795.     const oldItem = post.value;
  796.     this.savedUnchangedFormSkeleton = new FormSkeleton(oldItem.dataType, oldItem.previewLabel,
  797.       oldItem.exportLabel, oldItem.placeholder,
  798.       oldItem.description, oldItem.options, oldItem.tableOptions,
  799.       oldItem.required, oldItem.max,
  800.       oldItem.min, oldItem.index,
  801.       oldItem.editable, oldItem.url,
  802.       oldItem.date, oldItem.validations);
  803.   }
  804.  
  805.  
  806.   subscribeOnDraggableMethods() {
  807.     this.draggablesEvents.submitForItemTriggered.subscribe(item => this.saveData(item));
  808.     this.draggablesEvents.submitForValidationTriggered.subscribe(item => this.saveValidationData(item));
  809.     this.draggablesEvents.cancelForItemTriggered.subscribe(item => this.cancelChange(item));
  810.     this.draggablesEvents.cancelForValidationTriggered.subscribe(item => this.cancelValidationChange(item));
  811.     this.draggablesEvents.deleteItemTriggered.subscribe(item => this.deleteItem(item));
  812.   }
  813. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top