promethee 3.0.2 → 4.0.0

data/app/views/promethee/components/slider_item/_localize.html.erb

@@ -1,26 +1,26 @@
 <script type="text/ng-template" id="promethee/components/slider_item/localize">
-  <div ng-show="master.attributes.searchable_caption !== '' || master.attributes.media_type == 'video'">
+  <div ng-show="master.attributes.caption.value !== '' || master.attributes.media_type.value == 'video'">
     <hr>
 
-    <div class="row" ng-show="master.attributes.searchable_caption !== ''">
+    <div class="row" ng-show="master.attributes.caption.value !== ''">
       <div class="col-md-6">
         <b>Slider Item Caption</b>
-        <div class="promethee-edit__wrapper" ng-bind-html="master.attributes.searchable_caption | htmlSafe"></div>
+        <div class="promethee-edit__wrapper" ng-bind-html="master.attributes.caption.value | htmlSafe"></div>
       </div>
       <div class="col-md-6">
-        <label class="label-control">Slider Item Caption</label>
-        <summernote config="summernoteConfig" ng-model="component.attributes.searchable_caption"></summernote>
+        <b>Slider Item Caption</b>
+        <summernote config="summernoteConfig" ng-model="component.attributes.caption.value"></summernote>
       </div>
     </div>
 
-    <div class="row" ng-show="master.attributes.media_type == 'video'">
+    <div class="row" ng-show="master.attributes.media_type.value == 'video'">
       <div class="col-md-6">
         <b>Video URL</b>
-        <div ng-bind-html="master.attributes.video.url | htmlSafe"></div>
+        <div ng-bind-html="master.attributes.video.value | htmlSafe"></div>
       </div>
       <div class="col-md-6">
-        <label class="label-control">Video URL</label>
-        <input class="form-control" ng-model="component.attributes.video.url" type="text">
+        <b>Video URL</b>
+        <input class="form-control" ng-model="component.attributes.video.value" type="text">
       </div>
     </div>
   </div>

data/app/views/promethee/components/slider_item/_show.html.erb

@@ -1,11 +1,11 @@
 <%
-media_type = component[:attributes][:media_type]
-searchable_caption = component[:attributes][:searchable_caption]
+media_type = component[:attributes].dig(:media_type, :value)
+caption = component[:attributes].dig(:caption, :value)&.to_s&.html_safe
 case media_type
 when 'image'
-  image_blob = blob_from_data component[:attributes][:image]
+  image_blob = blob_from_data component[:attributes].dig(:image, :value)
 when 'video'
-  url = component[:attributes][:video][:url].to_s
+  url = component[:attributes].dig(:video, :value)&.to_s
   if 'vimeo'.in? url
     video_id = url.gsub(/\A(?:https?:)?\/\/(?:(?:www|player)\.)?vimeo\.com\/(?:video\/)?(\d+).*?\z/, '\1')
     iframe_src = "https://player.vimeo.com/video/#{video_id}?color=ffffff&title=0&byline=0&portrait=0"
@@ -18,13 +18,12 @@ when 'video'
 end
 %>
 <div class="carousel-item__content">
-
   <% if iframe_src.present? %>
   <div class="embed-responsive embed-responsive-16by9">
     <iframe frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="allowfullscreen" src="<%= iframe_src %>"></iframe>
   </div>
   <% elsif image_blob.present? %>
-    <%= render 'promethee/show/image.srcset', blob: image_blob, alt: '', caption: searchable_caption %>
+    <%= render 'promethee/show/image.srcset', blob: image_blob, alt: '', caption: caption %>
   <% end %>
-  <%= searchable_caption.to_s.html_safe %>
-</div>
+  <%= caption %>
+</div>

data/app/views/promethee/components/table/_edit.define.html.erb

@@ -8,13 +8,16 @@
       data: {
         type: 'table',
         attributes: {
-          cols: [],
-          cols_data: {},
-          rows: [],
-          rows_data: {}
-        }
+          structure: {
+            searchable: false,
+            translatable: false,
+            type: 'matrix',
+            value: []
+          }
+        },
+        children: []
       }
     })
   JAVASCRIPT
 %>
-<div ng-init="<%= init %>"></div>
+<div ng-init="<%= init %>"></div>

data/app/views/promethee/components/table/_edit.inspect.html.erb

@@ -1,25 +1,24 @@
 <script type="text/ng-template" id="promethee/components/table/edit/inspect">
   <div ng-controller="TableInspectController">
     <div class="form-group">
-      <label class="label-control">Columns</label><br/>
-      <div  class="btn btn-default btn-light btn-sm"
-            ng-click="addColumn()">
+      <h3>Columns</h3>
+      <div class="btn btn-default btn-light btn-sm" ng-click="addColumn()">
         Add column
-      </div><br/><br/>
-      <div ui-sortable ng-model="promethee.inspected.attributes.cols">
-        <div ng-repeat="colUid in promethee.inspected.attributes.cols">
-          <div class="form-group row align-items-center">
+      </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" style="line-height: 38px">
               <i class="fas fa-bars"></i>
             </div>
             <div class="col-9">
-              <input  type="text"
-                      ng-model="promethee.inspected.attributes.cols_data[colUid].searchable_text"
-                      class="form-control" />
+              {{ getTableCell(cellUid).attributes.text.value }}
             </div>
             <div class="col-2">
               <a  class="btn btn-default btn-light btn-sm"
-                  ng-click="removeColumn(colUid)">
+                  ng-click="removeColumn($index)">
                 <%= icon('fa', 'close') %>
               </a>
             </div>
@@ -27,74 +26,163 @@
         </div>
       </div>
     </div>
-    <hr>
+
     <div class="form-group">
-      <label class="label-control">Rows</label><br/>
-      <div  class="btn btn-default btn-light btn-sm"
-            ng-click="addRow()">
+      <h3>Rows</h3>
+      <div class="btn btn-default btn-light btn-sm" ng-click="addRow(true)">
         Add row
-      </div><br/><br/>
-      <div ng-repeat="rowUid in promethee.inspected.attributes.rows track by $index">
+      </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">
-          <b>Row {{$index+1}}</b>
           <a  class="btn btn-default btn-light btn-sm float-right"
-              ng-click="removeRow(rowUid)">
+              ng-click="removeRow($index)">
             <%= icon('fa', 'close') %>
           </a>
         </span><br/>
-        <div ng-repeat="colUid in promethee.inspected.attributes.cols">
+        <div ng-repeat="cellUid in row">
           <span class="small">
-            {{promethee.inspected.attributes.cols_data[colUid].searchable_text}}
+            {{ getTableCell(getHeaderCellUids()[$index]).attributes.text.value }}
           </span>
           <br/>
           <input  type="text"
-                  ng-model="promethee.inspected.attributes.rows_data[rowUid][colUid].searchable_text"
+                  ng-model="getTableCell(cellUid).attributes.text.value"
                   class="form-control" />
         </div>
-        <hr/>
       </div>
-    </div>
-    <div class="form-group" ng-show="promethee.inspected.attributes.rows.length > 1">
-      <label class="label-control">Drag the rows below to reorder them:</label>
-      <ul ui-sortable
-          ng-model="promethee.inspected.attributes.rows"
-          class="list-unstyled">
-        <li ng-repeat="_ in promethee.inspected.attributes.rows track by $index">
-          <%= icon('fa', 'bars') %> Row {{$index + 1}}
-        </li>
-      </ul>
+      <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
+            ng-model="promethee.inspected.attributes.structure.value"
+            class="list-unstyled">
+          <li ng-repeat="_ in promethee.inspected.attributes.structure.value track by $index">
+            <%= icon('fa', 'bars') %>
+            <span ng-if="$index === 0">Header</span>
+            <span ng-if="$index > 0">Row {{$index}}</span>
+          </li>
+        </ul>
+      </div>
     </div>
   </div>
 </script>
 
 <script>
   promethee.controller('TableInspectController', ['$scope', 'uidService', function($scope, uidService) {
-    $scope.addColumn = function () {
-      var uid = uidService.generate();
-      this.promethee.inspected.attributes.cols.push(uid);
-      this.promethee.inspected.attributes.cols_data[uid] = { searchable_text: 'New column' };
+    $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.getHeaderCellUids = function () {
+      if (this.promethee.inspected.attributes.structure.value.length === 0) {
+        return [];
+      }
+
+      return this.promethee.inspected.attributes.structure.value[0];
     }
 
-    $scope.addRow = function () {
-      var uid = uidService.generate();
-      this.promethee.inspected.attributes.rows.push(uid);
+    $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.removeItem = function (uid, arrayKey) {
-      var dataKey = arrayKey + '_data';
-      var index = this.promethee.inspected.attributes[arrayKey].indexOf(uid);
-      if (index !== -1) {
-        this.promethee.inspected.attributes[arrayKey].splice(index, 1);
-        delete this.promethee.inspected.attributes[dataKey][uid];
+    $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.removeColumn = function (uid) {
-      $scope.removeItem(uid, 'cols');
+    $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.removeRow = function (uid) {
-      $scope.removeItem(uid, 'rows');
+    $scope.addColumn = function () {
+      var tableCell,
+          uid,
+          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);
+      }
+    };
+
+    $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>

data/app/views/promethee/components/table/_edit.move.html.erb

@@ -1,18 +1,18 @@
 <script type="text/ng-template" id="promethee/components/table/edit/move">
   <%= render 'promethee/edit/move.header', type: 'table' %>
-      <div class="table-responsive">
+      <div class="table-responsive" ng-controller="TableMoveController">
         <table class="table">
           <thead>
             <tr>
-              <th ng-repeat="colUid in component.attributes.cols">
-                {{component.attributes.cols_data[colUid].searchable_text}}
+              <th ng-repeat="cellUid in component.attributes.structure.value[0]">
+                {{getTableCell(cellUid).attributes.text.value}}
               </th>
             </tr>
           </thead>
           <tbody>
-            <tr ng-repeat="rowUid in component.attributes.rows">
-              <td ng-repeat="colUid in component.attributes.cols">
-                {{component.attributes.rows_data[rowUid][colUid].searchable_text}}
+            <tr ng-repeat="row in component.attributes.structure.value" ng-if="$index > 0">
+              <td ng-repeat="cellUid in row">
+                {{getTableCell(cellUid).attributes.text.value}}
               </td>
             </tr>
           </tbody>
@@ -20,4 +20,14 @@
       </div>
     </div>
   </div>
-</script>
+</script>
+
+<script>
+  promethee.controller('TableMoveController', ['$scope', 'uidService', function($scope, uidService) {
+    $scope.getTableCell = function (uid) {
+      return this.component.children.filter(function (childComponent) {
+        return childComponent.id === uid;
+      })[0];
+    }
+  }]);
+</script>

data/app/views/promethee/components/table/_localize.html.erb

@@ -1,46 +1,3 @@
 <script type="text/ng-template" id="promethee/components/table/localize">
   <hr>
-
-  <div class="row">
-    <div class="col-md-6">
-      <table class="table">
-        <thead>
-          <tr>
-            <th ng-repeat="colUid in master.attributes.cols track by $index">
-              {{ master.attributes.cols_data[colUid].searchable_text }}
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr ng-repeat="rowUid in master.attributes.rows">
-            <td ng-repeat="colUid in master.attributes.cols">
-              {{ master.attributes.rows_data[rowUid][colUid].searchable_text }}
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-    <div class="col-md-6">
-      <table class="table">
-        <thead>
-          <tr>
-            <th ng-repeat="colUid in master.attributes.cols track by $index">
-              <input  type="text"
-                      ng-model="component.attributes.cols_data[colUid].searchable_text"
-                      class="form-control">
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr ng-repeat="rowUid in master.attributes.rows">
-            <td ng-repeat="colUid in master.attributes.cols">
-              <input  class="form-control"
-                      ng-model="component.attributes.rows_data[rowUid][colUid].searchable_text"
-                      type="text">
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
 </script>

data/app/views/promethee/components/table/_show.html.erb

@@ -1,14 +1,15 @@
 <%
-  return unless ([:cols, :cols_data, :rows, :rows_data] - component[:attributes].keys).empty?
-  columns = component[:attributes][:cols].map { |colUid|
-    colData = component[:attributes][:cols_data][colUid.to_sym] || {}
-    { uid: colUid, searchable_text: colData[:searchable_text] }
+  cells = component[:children]
+  rows = component.dig(:attributes, :structure, :value).map { |row|
+    row.map { |cellUid|
+      {
+        uid: cellUid,
+        text: cells.find { |cell| cell[:id] == cellUid }.dig(:attributes, :text, :value)
+      }
+    }
   }
 
-  rows = component[:attributes][:rows].map { |rowUid|
-    rowData = component[:attributes][:rows_data][rowUid.to_sym] || {}
-    { uid: rowUid, data: rowData }
-  }
+  headerRow = rows.shift
 %>
 
 <div id="component-<%= component[:id] %>" class="<%= promethee_class_for(component) %>">
@@ -16,20 +17,16 @@
     <table class="table">
       <thead>
         <tr>
-          <% columns.each do |col| %>
-            <th><%= col[:searchable_text] %></th>
+          <% headerRow.each do |cell| %>
+            <th><%= cell[:text] %></th>
           <% end %>
         </tr>
       </thead>
       <tbody>
         <% rows.each do |row| %>
           <tr>
-            <% columns.each do |col| %>
-              <%
-                cell = row[:data][col[:uid].to_sym]
-                next if cell.nil?
-              %>
-              <td><%= cell[:searchable_text] %></td>
+            <% row.each do |cell| %>
+              <td><%= cell[:text] %></td>
             <% end %>
           </tr>
         <% end %>