Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import { Component, OnInit, ViewChild } from '@angular/core';
- import { DropEvent } from 'ng-drag-drop';
- import { TabTemplate } from '../../models/tabTemplate.model';
- import { FormSkeleton } from '../../models/formSkeleton.model';
- import { FormBuilder } from '@angular/forms';
- import { ValidationModel } from '../../models/validation.model';
- import { ActivatedRoute, Router } from '@angular/router';
- import { DraggablesModelEvents } from '../../models/draggableEvents.model';
- import { DraggableItem } from '../../models/draggableItem.model';
- import { DictionaryModel } from '../../models/dictionary.model';
- import { ContainerModel } from '../../models/container.model';
- import { ContainerItemModel } from '../../models/containerItem.model';
- import { ContextMenuComponent, ContextMenuService } from 'ngx-contextmenu';
- import { DraggableListMenuComponent } from '../sidebars/draggable-list-menu/draggable-list-menu.component';
- import { DraggableEditingMenuComponent } from '../sidebars/draggable-editing-menu/draggable-editing-menu.component';
- import { TabTemplatesService } from '../../services/tab-templates.service';
- @Component({
- selector: 'app-draggables-form-skeleton',
- templateUrl: './draggables-form-skeleton.component.html',
- styleUrls: ['./draggables-form-skeleton.component.css']
- })
- export class DraggablesFormSkeletonComponent implements OnInit {
- //#region Attributes
- private static MAX_COLUMNS = 3;
- private savedUnchangedFormSkeleton: FormSkeleton = new FormSkeleton();
- private chosenFormSkeletonForEditing: TabTemplate = new TabTemplate();
- private mainTabTemplate: TabTemplate = new TabTemplate();
- // hovered item
- private hoveredItem = null;
- private hoveredItemKey = 0;
- // array of rows
- public layoutRows: Array<ContainerModel> = [];
- private layoutRowsSorted = [];
- // hovering item gets this values
- private containerItemModelNumber: number = 0;
- private layoutRowsNumber: number = 0;
- // validation part
- private validationModelKey: number;
- private validationMessageCounter: number = 1;
- private changedValidationModel;
- // allow dragging
- private draggingEnabled: boolean = true;
- // open details
- private leftsidebarOpen: boolean = false;
- // the number of all existing containers
- private containerKey: number = 0;
- // On drop item flag
- public anItemWasDropped: boolean = false;
- // Count how many columns user adds
- private columnNumber: number = 0;
- // Getting the right height for divs
- private biggestRowArray: Array<string> = [];
- private additionalHeightForDropHereDiv: number = 0;
- private listOfOffsetTopDataForAppItem: Array<number> = new Array<number>();
- private sizeWindow: number = 0;
- private rowHeightsOfRows: number = 0;
- public reusables;
- // Right click on item opens basic menu
- @ViewChild(ContextMenuComponent) public basicMenu: ContextMenuComponent = new ContextMenuComponent(this.service, null, null, null);
- @ViewChild(DraggableListMenuComponent) public draggableListMenuComponent: DraggableListMenuComponent;
- @ViewChild(DraggableEditingMenuComponent) public draggableEditingMenuComponent: DraggableEditingMenuComponent;
- constructor(private service: ContextMenuService, private formBuilder: FormBuilder, private route: ActivatedRoute,
- private router: Router, private draggablesEvents: DraggablesModelEvents, private tabTemplatesService: TabTemplatesService) { }
- //#endregion
- ngOnInit() {
- this.subscribeOnDraggableMethods();
- // Add first container, that shows on a first screen
- const containers = new Array<ContainerItemModel>(new ContainerItemModel(this.containerKey, 1, 0, false,
- new DictionaryModel([])));
- this.layoutRows.push(new ContainerModel(containers));
- // increase number of containers
- this.containerKey++;
- this.reusables = this.tabTemplatesService.getReusableElements();
- // Get the size of a window
- this.sizeWindow = window.innerWidth;
- }
- mergeCells() {
- const selectedItemsMatrix = this.layoutRows.map((row: ContainerModel) => {
- return row.containerItems.filter((column: ContainerItemModel) => {
- return column.selectFlag === true;
- });
- });
- // Count how many fields are selected
- let counterOfSelectedFields = 0;
- selectedItemsMatrix.forEach(arrayItem => {
- arrayItem.forEach((container) => {
- if (container) {
- counterOfSelectedFields++;
- }
- });
- });
- // Only two field can be selected
- if (counterOfSelectedFields > 2) {
- alert('User can select only two field at once!');
- } else {
- const draggableItems: Array<DraggableItem> = [];
- const selectedRows = selectedItemsMatrix.length;
- this.updateContainerKeys();
- const BreakException = {};
- try {
- for (let i = 0; i < selectedRows; i++) {
- const selectedCols = selectedItemsMatrix[i].length;
- for (let j = 0; j < selectedCols; j++) {
- this.layoutRows.forEach((row: ContainerModel, rowIndex) => {
- row.containerItems.forEach((column: ContainerItemModel, index) => {
- // Selected fields are in one row
- if (selectedItemsMatrix[i][j + 1]) {
- if (selectedItemsMatrix[i][j].row === selectedItemsMatrix[i][j + 1].row) {
- if (column.key === (selectedItemsMatrix[i][j + 1].key)) {
- draggableItems.push(...column.dictionaryModel.draggableItems);
- row.containerItems.splice(index, 1);
- this.updateContainerKeys();
- this.updateContainerColumnsAndRows(row.containerItems);
- this.containerKey--;
- row.containerItems.find(x => x.key === (column.key - 1)).dictionaryModel.draggableItems.push(...draggableItems);
- throw BreakException;
- }
- }
- } else
- // Selected fields are in one column
- if (selectedItemsMatrix[i + 1][j]) {
- if (selectedItemsMatrix[i][j].column === selectedItemsMatrix[i + 1][j].column) {
- if (selectedItemsMatrix[i + 1][j].key === column.key) {
- draggableItems.push(...column.dictionaryModel.draggableItems);
- row.containerItems.splice(index, 1);
- if (row.containerItems.length === 0) {
- this.layoutRows.splice(rowIndex, 1);
- }
- this.updateContainerKeys();
- this.updateContainerColumnsAndRows(row.containerItems);
- this.containerKey = this.containerKey - 1;
- this.layoutRows.forEach(layoutRow => {
- layoutRow.containerItems.forEach(rowColumn => {
- if (rowColumn.key === selectedItemsMatrix[0][0].key) {
- rowColumn.dictionaryModel.draggableItems.push(...draggableItems);
- }
- });
- });
- throw BreakException;
- }
- }
- }
- });
- });
- }
- }
- } catch (e) {
- if (e !== BreakException) {
- throw e;
- }
- }
- this.updateContainerKeys();
- }
- }
- //#region UI for cells
- returnClassForTheContainer(containerItemsOfOneRow: Array<ContainerItemModel>, oneContainerItem: ContainerItemModel) {
- this.layoutRows.forEach((row, rowIndex) => {
- row.containerItems.forEach((column, colIndex) => {
- if (column.dictionaryModel.draggableItems.length !== 1) {
- column.dictionaryModel.draggableItems.forEach((draggableItem, itemIndex) => {
- if (draggableItem.value.dataType === 'unvisible') {
- column.dictionaryModel.draggableItems.splice(itemIndex, 1);
- }
- });
- }
- });
- });
- this.layoutRows.forEach((row, rowIndex) => {
- row.containerItems.forEach((column, colIndex) => {
- if (column.dictionaryModel.draggableItems.length === 0) {
- column.dictionaryModel.draggableItems.push({ key: 1, value: new FormSkeleton('unvisible') });
- }
- });
- });
- const lengthOfContainerItemsOfOneRow = containerItemsOfOneRow.length;
- const divideWidth: any = 12 / lengthOfContainerItemsOfOneRow;
- let containerClassString: string = 'col-md-' + Math.round(divideWidth) + ' col-lg-' + Math.round(divideWidth) + ' class';
- oneContainerItem.selectFlag === true ? containerClassString = containerClassString + ' addBlackSelectColor' :
- containerClassString = containerClassString + '';
- const splitHeight = 86 / this.layoutRows.length;
- this.updateContainerKeys();
- // Change height of a divs with class 'col-md-11 col-lg -11 class11' regarding to number of rows
- const elements11 = <HTMLCollectionOf<HTMLDivElement>>document.getElementsByClassName('class11');
- for (let i = 0; i < elements11.length; i++) {
- if (this.sizeWindow < 992) {
- if (this.columnNumber === 2) {
- elements11[i].style.height = (splitHeight * 2) + 'vH';
- } else if (this.columnNumber === 3) {
- elements11[i].style.height = (splitHeight * 3) + 'vH';
- }
- } else {
- elements11[i].style.height = splitHeight + 'vH';
- }
- elements11[i].style.padding = '0px';
- elements11[i].style.border = '1px dashed lightblue';
- }
- // If there are items dropped in a container, height is unset
- this.layoutRows.forEach((row, index) => {
- row.containerItems.forEach(column => {
- if (column.dictionaryModel.draggableItems.length !== 0) {
- elements11[index].style.height = 'unset';
- }
- });
- });
- // Change height of a divs with class 'col-md-12 col-lg -12 class' regarding to number of rows
- const elements12 = <HTMLCollectionOf<HTMLDivElement>>document.getElementsByClassName('class');
- for (let i = 0; i < elements12.length; i++) {
- elements12[i].style.height = splitHeight + 'vH';
- elements12[i].style.padding = '0px';
- }
- this.updateContainerKeys();
- // When draggable items array length is zero
- this.layoutRows.forEach((row, rowIndex) => {
- row.containerItems.forEach((column, colIndex) => {
- let unvisibleExist = false;
- for (let p = 0; p < column.dictionaryModel.draggableItems.length; p++) {
- if (column.dictionaryModel.draggableItems[p].value.dataType === 'unvisible') {
- unvisibleExist = true;
- }
- }
- if (unvisibleExist === false) {
- if (elements12.length !== 0) {
- if (!elements12[column.key]) {
- elements12[rowIndex].style.height = 'unset';
- } else {
- elements12[column.key].style.height = 'unset';
- }
- }
- }
- });
- });
- // Get the biggest container height of every row
- let maxLength = 0;
- const biggestContainerRowHeight: Array<string> = [];
- this.layoutRows.forEach((row, rowIndex) => {
- let measureLength = 0;
- row.containerItems.forEach((column, colIndex) => {
- if (elements12[row.containerItems[colIndex].key]) {
- if (elements12[row.containerItems[colIndex].key].offsetHeight > measureLength) {
- measureLength = elements12[row.containerItems[colIndex].key].offsetHeight;
- maxLength = measureLength;
- }
- }
- });
- biggestContainerRowHeight.push((maxLength + this.additionalHeightForDropHereDiv).toString());
- });
- if (this.anItemWasDropped) {
- this.layoutRows.forEach((row, rowIndex) => {
- row.containerItems.forEach((column, colIndex) => {
- if (elements12[row.containerItems[colIndex].key]) {
- elements12[row.containerItems[colIndex].key].style.height = biggestContainerRowHeight[rowIndex].toString() + 'px';
- }
- });
- });
- for (let i = 0; i < elements11.length; i++) {
- if (this.sizeWindow < 992) {
- if (this.columnNumber === 2) {
- // tslint:disable-next-line:radix
- elements11[i].style.height = (2 * parseInt(biggestContainerRowHeight[i])).toString() + 'px';
- } else if (this.columnNumber === 3) {
- // tslint:disable-next-line:radix
- elements11[i].style.height = (3 * parseInt(biggestContainerRowHeight[i])).toString() + 'px';
- }
- } else {
- elements11[i].style.height = biggestContainerRowHeight[i].toString() + 'px';
- }
- }
- }
- this.biggestRowArray = biggestContainerRowHeight;
- let element8 = 0;
- this.rowHeightsOfRows = 0;
- this.layoutRows.forEach((row, rowIndex) => {
- if (rowIndex === this.layoutRowsNumber) {
- row.containerItems.forEach((column, colIndex) => {
- if (column.key === this.containerItemModelNumber) {
- if (rowIndex !== 0) {
- biggestContainerRowHeight.forEach((rowHeight, index) => {
- if (index !== (biggestContainerRowHeight.length - 1)) {
- // tslint:disable-next-line:radix
- this.rowHeightsOfRows = this.rowHeightsOfRows + parseInt(rowHeight);
- element8 = element8 + 1;
- }
- });
- }
- }
- });
- }
- });
- return containerClassString;
- }
- onResize(event) {
- this.sizeWindow = event.target.innerWidth;
- }
- returnClassForMiddleComponent() {
- let classString = '';
- if (this.sizeWindow < 992 && this.leftsidebarOpen) {
- classString = 'col-md-4 col-lg-4';
- } else if (this.sizeWindow > 992 && this.leftsidebarOpen) {
- classString = 'col-md-5 col-lg-5';
- } else if (this.sizeWindow < 992 && !this.leftsidebarOpen) {
- classString = 'col-md-7 col-lg-7';
- } else if (this.sizeWindow > 992 && !this.leftsidebarOpen) {
- classString = 'col-md-8 col-lg-8';
- }
- if ((classString === 'col-md-5 col-lg-5') || (classString === 'col-md-8 col-lg-8')) {
- const buttonRow = <HTMLDivElement>document.getElementById('buttonRowInside');
- buttonRow.style.display = 'inline-block';
- const buttonRow1 = <HTMLDivElement>document.getElementById('buttonRowOutSide');
- buttonRow1.style.display = 'none';
- }
- if ((classString === 'col-md-4 col-lg-4') || (classString === 'col-md-7 col-lg-7')) {
- const buttonRow = <HTMLDivElement>document.getElementById('buttonRowOutSide');
- buttonRow.style.display = 'inline-block';
- const buttonRow1 = <HTMLDivElement>document.getElementById('buttonRowInside');
- buttonRow1.style.display = 'none';
- }
- return classString;
- }
- returnButtonClass() {
- if ((this.returnClassForMiddleComponent() === 'col-md-4 col-lg-4') || (this.returnClassForMiddleComponent() === 'col-md-7 col-lg-7')) {
- return 'addRowDiv col-md-1 col-lg-1';
- }
- return 'addRowDiv';
- }
- //#endregion
- //#region Adding column and rows
- addColumn(item) {
- let numberOfContainers = 0;
- this.layoutRows[item].containerItems.length === 0 ? numberOfContainers = 0 :
- numberOfContainers = this.layoutRows[item].containerItems.length - 1;
- const columnNumber = this.layoutRows[item].containerItems[numberOfContainers].column + 1;
- if (columnNumber > DraggablesFormSkeletonComponent.MAX_COLUMNS) {
- alert('User can add three columns only!');
- } else {
- this.layoutRows.forEach((layoutRow, rowIndex) => {
- layoutRow.containerItems.push(new ContainerItemModel(
- this.containerKey, columnNumber, rowIndex, false, new DictionaryModel([])));
- this.containerKey++;
- });
- this.updateContainerKeys();
- }
- }
- addRow() {
- const numberOfContainersFromTheLastRow = this.layoutRows[this.layoutRows.length - 1].containerItems.length;
- const numberOfRows = this.layoutRows.length;
- this.layoutRows.push(new ContainerModel([]));
- for (let i = 0; i < numberOfContainersFromTheLastRow; i++) {
- this.layoutRows[this.layoutRows.length - 1].containerItems.push(
- new ContainerItemModel(this.containerKey, i + 1, numberOfRows, false, new DictionaryModel(
- [])));
- this.containerKey++;
- }
- this.updateContainerKeys();
- }
- //#endregion
- //#region Save changes for an item
- saveData(item) {
- this.layoutRows.forEach((row, rowIndex) => {
- if (rowIndex === this.layoutRowsNumber) {
- row.containerItems.forEach((column, colIndex) => {
- if (column.key === this.containerItemModelNumber) {
- const changedValuesOfObservedItem = item[0];
- let changedValuesOfObservedItemRows = item[1];
- let changedValuesOfObservedItemColumns = item[2];
- // Changing an item in general
- if (changedValuesOfObservedItem.dataType) {
- let options: any;
- const optionsArray: any = [];
- if (item[0].options !== null) {
- options = item[0].options.split('\n');
- for (let i = 0; i < options.length; i++) {
- optionsArray.push({ option: options[i] });
- }
- } else {
- options = '';
- }
- options = optionsArray;
- column.dictionaryModel.draggableItems.forEach((draggableItem, itemIndex) => {
- if (draggableItem.key === item[3].key) {
- draggableItem.value.dataType = changedValuesOfObservedItem.dataType;
- draggableItem.value.previewLabel = changedValuesOfObservedItem.previewLabel;
- draggableItem.value.exportLabel = changedValuesOfObservedItem.exportLabel;
- draggableItem.value.placeholder = changedValuesOfObservedItem.placeholder;
- draggableItem.value.description = changedValuesOfObservedItem.description;
- draggableItem.value.options = [];
- draggableItem.value.options = options;
- draggableItem.value.max = changedValuesOfObservedItem.max;
- draggableItem.value.min = changedValuesOfObservedItem.min;
- draggableItem.value.index = changedValuesOfObservedItem.index;
- draggableItem.value.editable = changedValuesOfObservedItem.editable;
- if (changedValuesOfObservedItem.url !== 'https://i.imgur.com/qm52RKN.png') {
- draggableItem.value.url = changedValuesOfObservedItem.url;
- }
- draggableItem.value.date =
- changedValuesOfObservedItem.date;
- draggableItem.value.validations =
- changedValuesOfObservedItem.validations;
- }
- });
- }
- if (changedValuesOfObservedItemColumns !== null) {
- changedValuesOfObservedItemColumns = changedValuesOfObservedItemColumns.value;
- const newTableColumnArray: Array<String> = new Array<String>();
- for (let i = 0; i < column.dictionaryModel.draggableItems.length; i++) {
- if (column.dictionaryModel.draggableItems[i].key === item[3].key) {
- // tslint:disable-next-line:forin
- for (const k in changedValuesOfObservedItemColumns) {
- newTableColumnArray.push(changedValuesOfObservedItemColumns[k]);
- }
- const elements = column.dictionaryModel.draggableItems[i].value.tableOptions;
- column.dictionaryModel.draggableItems[i].value.tableOptions = [];
- column.dictionaryModel.draggableItems[i].value.tableOptions.columns =
- newTableColumnArray;
- column.dictionaryModel.draggableItems[i].value.tableOptions.rows =
- elements.rows;
- break;
- // =
- // newTableColumnArray;
- }
- }
- }
- console.log(column.dictionaryModel.draggableItems);
- // Rows of an table item changed
- if (changedValuesOfObservedItemRows !== null) {
- changedValuesOfObservedItemRows = changedValuesOfObservedItemRows.value;
- const newTableRowArray: Array<String> = new Array<String>();
- for (let i = 0; i < column.dictionaryModel.draggableItems.length; i++) {
- if (column.dictionaryModel.draggableItems[i].key === item[3].key) {
- // tslint:disable-next-line:forin
- for (const k in changedValuesOfObservedItemRows) {
- newTableRowArray.push(changedValuesOfObservedItemRows[k]);
- }
- const elements = column.dictionaryModel.draggableItems[i].value.tableOptions;
- column.dictionaryModel.draggableItems[i].value.tableOptions = [];
- column.dictionaryModel.draggableItems[i].value.tableOptions.columns =
- elements.columns;
- column.dictionaryModel.draggableItems[i].value.tableOptions.rows =
- newTableRowArray;
- break;
- // column.dictionaryModel.draggableItems[i].value.tableOptions.rows =
- // newTableRowArray;
- }
- }
- }
- }
- });
- }
- });
- this.leftsidebarOpen = false;
- this.chosenFormSkeletonForEditing = null;
- }
- //#endregion
- //#region Save validation messages for an item
- saveValidationData(item) {
- // Validation attributes
- let id: number = 1;
- let statement: string = '';
- let messageType: string = '';
- let messageContent: string = '';
- let keyValidation: string = '';
- let valueToCompare: any = null;
- const droppedItem = item[0];
- this.validationModelKey = item[1].key;
- // Fetching item values
- id = this.validationMessageCounter;
- statement = 'If this field is ' + droppedItem.validationSelect + ' ' + droppedItem.validationInput;
- messageType = droppedItem.messageType;
- messageContent = droppedItem.messageContent;
- if (droppedItem.validationSelect === 'greater than: ') {
- keyValidation = 'max';
- valueToCompare = droppedItem.validationInput;
- } else if (droppedItem.validationSelect === 'greater than or equal to: ') {
- keyValidation = 'max';
- valueToCompare = droppedItem.validationInput - 1;
- } else if (droppedItem.validationSelect === 'smaller than or equal to: ') {
- keyValidation = 'min';
- valueToCompare = droppedItem.validationInput + 1;
- } else if (droppedItem.validationSelect === 'smaller than: ') {
- keyValidation = 'min';
- valueToCompare = droppedItem.validationInput;
- } else if (droppedItem.validationSelect === 'equal to: ') {
- keyValidation = 'equal';
- valueToCompare = droppedItem.validationInput;
- } else if (droppedItem.validationSelect === 'not: ') {
- keyValidation = 'not';
- console.log('tu sam');
- valueToCompare = droppedItem.validationInput;
- }
- this.changedValidationModel = new ValidationModel(id, statement, messageType, messageContent, keyValidation, valueToCompare);
- if (this.saveValidationModel(this.validationModelKey)) {
- //
- this.draggablesEvents.deleteValidationMethod(droppedItem.validationSelect);
- }
- }
- //#endregion
- //#region Cancel changes off an item
- cancelChange(post) {
- for (const o in this.layoutRows[this.layoutRowsNumber].containerItems) {
- if (this.layoutRows[this.layoutRowsNumber].containerItems[o].key === this.containerItemModelNumber) {
- const savedItem = this.savedUnchangedFormSkeleton;
- for (let i = 0; i < this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems.length; i++) {
- if (this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].key === post.key) {
- this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].value.dataType = savedItem.dataType;
- this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].value.previewLabel =
- savedItem.previewLabel;
- this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].value.exportLabel =
- savedItem.exportLabel;
- this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].value.placeholder =
- savedItem.placeholder;
- this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].value.description =
- savedItem.description;
- this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].value.required = savedItem.required;
- this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].value.options = savedItem.options;
- this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].value.max = savedItem.max;
- this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].value.min = savedItem.min;
- this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].value.index = savedItem.index;
- this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].value.editable = savedItem.editable;
- this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].value.url = savedItem.url;
- this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].value.date = savedItem.date;
- }
- }
- }
- }
- this.leftsidebarOpen = false;
- this.chosenFormSkeletonForEditing = null;
- }
- //#endregion
- //#region Cancel validation messages for an item
- cancelValidationChange(post) {
- for (const o in this.layoutRows[this.layoutRowsNumber].containerItems) {
- if (this.layoutRows[this.layoutRowsNumber].containerItems[o].key === this.containerItemModelNumber) {
- const lastOne = this.savedUnchangedFormSkeleton;
- for (let i = 0; i < this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems.length; i++) {
- if (this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].key === post.key) {
- this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].value.validations =
- lastOne.validations;
- }
- }
- }
- }
- this.leftsidebarOpen = false;
- this.chosenFormSkeletonForEditing = null;
- }
- //#endregion
- //#region Change UI for select checkbox
- mouseOverSelectCheckbox(container) {
- this.updateContainerKeys();
- const el = <HTMLCollectionOf<HTMLInputElement>>document.getElementsByClassName('selectCheckbox');
- for (let i = 0; i < el.length; i++) {
- if (container.key === i) {
- el[i].style.display = 'inline-block';
- el[i].style.backgroundColor = 'lightgrey';
- el[i].style.height = '20px';
- el[i].style.width = '20px';
- }
- }
- }
- mouseLeaveSelectCheckbox(container) {
- const el = <HTMLCollectionOf<HTMLInputElement>>document.getElementsByClassName('selectCheckbox');
- this.updateContainerKeys();
- for (let i = 0; i < el.length; i++) {
- if (container.key === i) {
- el[i].style.display = 'inline-block';
- el[i].style.backgroundColor = 'lightgrey';
- if (el[i].checked === true) {
- el[i].style.height = '20px';
- el[i].style.width = '20px';
- } else {
- el[i].style.display = 'none';
- }
- }
- }
- }
- //#endregion
- //#region Update methods
- updateContainerKeys() {
- let counter = 0;
- for (let v = 0; v < this.layoutRows.length; v++) {
- for (let c = 0; c < this.layoutRows[v].containerItems.length; c++) {
- this.layoutRows[v].containerItems[c].key = counter;
- counter = counter + 1;
- }
- }
- }
- updateContainerColumnsAndRows(containerItems_: Array<ContainerItemModel>) {
- let columnCounter = 1;
- containerItems_.forEach((containerItem) => {
- containerItem.column = columnCounter;
- columnCounter = columnCounter + 1;
- });
- }
- updateDraggableItemKeys() {
- let dragItemCounter = 1;
- this.layoutRows.forEach((row) => {
- row.containerItems.forEach((column) => {
- if (column.key === this.containerItemModelNumber) {
- column.dictionaryModel.draggableItems.forEach((item) => {
- item.key = dragItemCounter;
- dragItemCounter++;
- });
- }
- });
- });
- }
- //#endregion
- // Delete item from a tab template
- deleteItem(post) {
- for (const o in this.layoutRows[this.layoutRowsNumber].containerItems) {
- if (this.layoutRows[this.layoutRowsNumber].containerItems[o].key === this.containerItemModelNumber) {
- for (let i = 0; i < this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems.length; i++) {
- if (this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].key === post) {
- this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems.splice(i, 1);
- }
- }
- }
- }
- this.leftsidebarOpen = false;
- this.chosenFormSkeletonForEditing = null;
- }
- // When dragging over, remember which container and draggable item is hovered
- onDragEnter(columnNumber, item, container, k) {
- this.hoveredItem = item;
- this.hoveredItemKey = item.key;
- this.layoutRowsNumber = container;
- this.containerItemModelNumber = k;
- }
- // Next button click action
- editTabTemplate() {
- const a = JSON.stringify(this.mainTabTemplate);
- this.router.navigate(['/editTabTemplate'], { queryParams: { 'mainTabTemplate': a } });
- }
- // Save validation message for draggable item
- saveValidationModel(key) {
- // tslint:disable-next-line:forin
- for (const o in this.layoutRows[this.layoutRowsNumber].containerItems) {
- if (this.layoutRows[this.layoutRowsNumber].containerItems[o].key === this.containerItemModelNumber) {
- for (let i = 0; i < this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems.length; i++) {
- if (this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].key === key) {
- if (this.changedValidationModel.valueToCompare !== '') {
- this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].value.validations.push(
- this.changedValidationModel);
- } else {
- alert('Please input valid text, for example url or email');
- return false;
- }
- }
- }
- }
- this.validationMessageCounter = this.validationMessageCounter + 1;
- return true;
- }
- }
- // Checkbox for selecting items for merginh
- onChangeSelect(k) {
- // tslint:disable-next-line:forin
- for (const i in this.layoutRows) {
- for (const j of this.layoutRows[i].containerItems) {
- if (j.key === k.key) {
- j.selectFlag = !j.selectFlag;
- }
- }
- }
- }
- // Click on item opens leftsidebar
- onClick(post: any, i: any, k: any) {
- let check = false;
- // Disable clicking on item if the container is selected
- // tslint:disable-next-line:forin
- for (const m in this.layoutRows) {
- for (const j of this.layoutRows[m].containerItems) {
- if (j.selectFlag === true) {
- if (k === j.key) {
- check = true;
- }
- }
- }
- }
- if (!check) {
- this.layoutRowsNumber = i;
- this.containerItemModelNumber = k;
- this.chosenFormSkeletonForEditing = post;
- this.leftsidebarOpen = true;
- }
- }
- // Changing url of an item in a leftsidebar
- changePicture(item) {
- for (const o in this.layoutRows[this.layoutRowsNumber].containerItems) {
- if (this.layoutRows[this.layoutRowsNumber].containerItems[o].key === this.containerItemModelNumber) {
- const lastOneUrl = item[1];
- for (let i = 0; i < this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems.length; i++) {
- if (this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].key === item[0]) {
- this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].value.url = lastOneUrl;
- }
- }
- }
- }
- }
- // Old item stored
- getOldOne(post) {
- const oldItem = post.value;
- this.savedUnchangedFormSkeleton = new FormSkeleton(oldItem.dataType, oldItem.previewLabel,
- oldItem.exportLabel, oldItem.placeholder,
- oldItem.description, oldItem.options, oldItem.tableOptions,
- oldItem.required, oldItem.max,
- oldItem.min, oldItem.index,
- oldItem.editable, oldItem.url,
- oldItem.date, oldItem.validations);
- }
- subscribeOnDraggableMethods() {
- this.draggablesEvents.submitForItemTriggered.subscribe(item => this.saveData(item));
- this.draggablesEvents.submitForValidationTriggered.subscribe(item => this.saveValidationData(item));
- this.draggablesEvents.cancelForItemTriggered.subscribe(item => this.cancelChange(item));
- this.draggablesEvents.cancelForValidationTriggered.subscribe(item => this.cancelValidationChange(item));
- this.draggablesEvents.deleteItemTriggered.subscribe(item => this.deleteItem(item));
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement