lespoupeesrusses/promethee

<script type="text/ng-template" id="promethee/components/table/edit/inspect">
  <div ng-controller="TableInspectController">
    <div class="form-group">
      <h3>Columns</h3>
      <div class="btn btn-default btn-light btn-sm" ng-click="addColumn()">
        Add column
      </div>

      <div  ui-sortable="sortableColumnsOptions"
            ng-model="promethee.inspected.attributes.structure.value[0]">
        <div ng-if="getHeaderCellUids().length > 1" ng-repeat="cellUid in getHeaderCellUids()">
          <div class="row align-items-center">
            <div class="col-1 col-xs-1" style="line-height: 38px">
              <i class="fas fa-bars"></i>
            </div>
            <div class="col-8 col-xs-8">
              {{ getTableCell(cellUid).attributes.text.value }}
            </div>
            <div class="col-2 col-xs-2">
              <a  class="btn btn-default btn-light btn-sm"
                  ng-click="removeColumn($index)">
                <%= icon('fa', 'close') %>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="form-group">
      <h3>Rows</h3>
      <div class="btn btn-default btn-light btn-sm" ng-click="addRow(true)">
        Add row
      </div>

      <div class="mb-2" ng-repeat="row in promethee.inspected.attributes.structure.value">
        <b ng-if="$index === 0">Header</b>
        <b ng-if="$index > 0">Row {{$index}}</b>
        <span class="small">
          <a  class="btn btn-default btn-light btn-sm float-right"
              ng-click="removeRow($index)"
              ng-if="$index > 0">
            <%= icon('fa', 'close') %>
          </a>
        </span><br/>
        <div ng-repeat="cellUid in row">
          <span class="small">
            {{ getTableCell(getHeaderCellUids()[$index]).attributes.text.value }}
          </span>
          <br/>
          <summernote config="summernoteConfig" ng-model="getTableCell(cellUid).attributes.text.value"></summernote>
        </div>
      </div>
      <hr>
      <div ng-show="promethee.inspected.attributes.structure.value.length > 1">
        <label class="label-control">Drag the rows below to reorder them:</label>
        <ul ui-sortable="sortableRowsOptions"
            ng-model="promethee.inspected.attributes.structure.value"
            class="list-unstyled">
          <li ng-repeat="_ in promethee.inspected.attributes.structure.value track by $index"
              ng-class="{ 'unsortable': $index === 0 }">
            <div ng-if="$index > 0">
              <%= icon('fa', 'bars') %>
              <span>Row {{$index}}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</script>

<script>
  promethee.controller('TableInspectController', ['$scope', 'uidService', function($scope, uidService) {
    $scope.sortableColumnsOptions = {
      update: function (e, ui) {
          var originalIndex = ui.item.sortable.index,
              newIndex = ui.item.sortable.dropindex;

          ui.item.sortable.cancel();
          this.sortColumns(originalIndex, newIndex);
      }.bind($scope)
    };

    $scope.sortableRowsOptions = {
      cancel: '.unsortable',
      items: '> li:not(.unsortable)'
    };

    $scope.getHeaderCellUids = function () {
      if (this.promethee.inspected.attributes.structure.value.length === 0) {
        return [];
      }

      return this.promethee.inspected.attributes.structure.value[0];
    }

    $scope.sortColumns = function (oldIndex, newIndex) {
      var i;
      for (i = 0; i < this.promethee.inspected.attributes.structure.value.length; i += 1) {
        var uid = this.promethee.inspected.attributes.structure.value[i][oldIndex]

        this.promethee.inspected.attributes.structure.value[i].splice(oldIndex, 1);
        this.promethee.inspected.attributes.structure.value[i].splice(newIndex, 0, uid);
      }
    };

    $scope.getColumnsCount = function () {
      return $scope.getRowsCount() === 0 ? 0 : this.promethee.inspected.attributes.structure.value[0].length;
    };

    $scope.getRowsCount = function () {
      return this.promethee.inspected.attributes.structure.value.length;
    };

    $scope.removeRow = function (index) {
      var uids = this.promethee.inspected.attributes.structure.value[index],
          i;

      this.promethee.inspected.attributes.structure.value.splice(index, 1);
      $scope.removeData(uids);
    }

    $scope.removeColumn = function (index) {
      var uids = [],
          i;

      for (i = 0; i < this.promethee.inspected.attributes.structure.value.length; i += 1) {
        uids.push(this.promethee.inspected.attributes.structure.value[i][index]);
        this.promethee.inspected.attributes.structure.value[i].splice(index, 1);
      }

      $scope.removeData(uids);
    }

    $scope.removeData = function (uids) {
      var filteredChildren = this.promethee.inspected.children.filter(function (childComponent) {
        // Select children where id is not in the input array
        return uids.indexOf(childComponent.id) === -1;
      });

      this.promethee.inspected.children = filteredChildren;
    }

    $scope.addColumn = function () {
      var tableCell,
          uid,
          cellValue,
          i;

      if ($scope.getRowsCount() === 0) {
        $scope.addRow(false);
      }

      for (i = 0; i < this.promethee.inspected.attributes.structure.value.length; i += 1) {
        tableCell = $scope.createNewCell();
        this.promethee.inspected.attributes.structure.value[i].push(tableCell.id);
        if (i === 0) {
          tableCell.attributes.text.value = 'Column';
        }
      }
    };

    $scope.addRow = function (forceColumn) {
      var rowsCount = $scope.getRowsCount(),
          columnsCount = $scope.getColumnsCount(),
          newRow = [],
          tableCell,
          uid,
          i;

      for (i = 0; i < columnsCount; i += 1) {
          tableCell = $scope.createNewCell();
          newRow.push(tableCell.id);
      }

      this.promethee.inspected.attributes.structure.value.push(newRow);

      if (columnsCount === 0 && forceColumn) {
        $scope.addColumn();
      }
    };

    $scope.getTableCell = function (uid) {
      return this.promethee.inspected.children.filter(function (childComponent) {
        return childComponent.id === uid;
      })[0];
    }

    $scope.createNewCell = function () {
      var definition = $scope.findDefinitionByType('table_cell'),
          newCell = $scope.createComponentFromDefinition(definition);

      this.promethee.inspected.children.push(newCell);
      return newCell;
    };
  }]);
</script>