update

templates/products/main_view.php

@@ -187,6 +187,55 @@
   background-color: #6690f4;
   color: #fff;
 }
+
+.products-page .products-id-cell {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.products-page .products-breakdown-toggle {
+  width: 22px;
+  height: 22px;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+  background: #fff;
+  color: #374151;
+  cursor: pointer;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.products-page .products-breakdown-wrap {
+  padding: 10px 14px;
+  background: #f8fafc;
+  border-top: 1px solid #e5e7eb;
+}
+
+.products-page .products-breakdown-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+
+.products-page .products-breakdown-table th,
+.products-page .products-breakdown-table td {
+  border: 1px solid #e5e7eb;
+  padding: 6px 8px;
+  text-align: right;
+  white-space: nowrap;
+}
+
+.products-page .products-breakdown-table th:nth-child(1),
+.products-page .products-breakdown-table th:nth-child(2),
+.products-page .products-breakdown-table td:nth-child(1),
+.products-page .products-breakdown-table td:nth-child(2),
+.products-page .products-breakdown-table td:nth-child(15),
+.products-page .products-breakdown-table td:nth-child(16) {
+  text-align: left;
+}
 </style>
 
 <?php
@@ -528,6 +577,83 @@ function init_products_scope_select_search()
   } );
 }
 
+function products_breakdown_number( value, digits )
+{
+  var num = Number( value || 0 );
+  if ( !isFinite( num ) )
+  {
+    num = 0;
+  }
+
+  return num.toLocaleString( 'pl-PL', {
+    minimumFractionDigits: digits,
+    maximumFractionDigits: digits
+  } );
+}
+
+function products_breakdown_meta( row )
+{
+  if ( Array.isArray( row ) && row.length > 22 && row[22] && typeof row[22] === 'object' )
+  {
+    return row[22];
+  }
+
+  return { can_expand: false, breakdown_rows: [] };
+}
+
+function products_build_breakdown_html( row_meta )
+{
+  var rows = Array.isArray( row_meta.breakdown_rows ) ? row_meta.breakdown_rows : [];
+
+  if ( !rows.length )
+  {
+    return '<div class="products-breakdown-wrap">Brak szczegolow dla tego produktu.</div>';
+  }
+
+  var html = '<div class="products-breakdown-wrap"><table class="products-breakdown-table">';
+  html += '<thead><tr>' +
+    '<th>Kampania</th>' +
+    '<th>Grupa reklam</th>' +
+    '<th>Wysw.</th>' +
+    '<th>Wysw. (30d)</th>' +
+    '<th>Klik.</th>' +
+    '<th>Klik. (30d)</th>' +
+    '<th>CTR</th>' +
+    '<th>Koszt</th>' +
+    '<th>CPC</th>' +
+    '<th>Konw.</th>' +
+    '<th>Wart. konw.</th>' +
+    '<th>ROAS</th>' +
+    '<th>Min. ROAS</th>' +
+    '<th>CL1</th>' +
+    '<th>CL4</th>' +
+  '</tr></thead><tbody>';
+
+  rows.forEach( function( entry ) {
+    html += '<tr>' +
+      '<td>' + escape_html( entry.campaign_name || '' ) + '</td>' +
+      '<td>' + escape_html( entry.ad_group_name || '' ) + '</td>' +
+      '<td>' + products_breakdown_number( entry.impressions, 0 ) + '</td>' +
+      '<td>' + products_breakdown_number( entry.impressions_30, 0 ) + '</td>' +
+      '<td>' + products_breakdown_number( entry.clicks, 0 ) + '</td>' +
+      '<td>' + products_breakdown_number( entry.clicks_30, 0 ) + '</td>' +
+      '<td>' + products_breakdown_number( entry.ctr, 2 ) + '%</td>' +
+      '<td>' + products_breakdown_number( entry.cost, 2 ) + '</td>' +
+      '<td>' + products_breakdown_number( entry.cpc, 2 ) + '</td>' +
+      '<td>' + products_breakdown_number( entry.conversions, 2 ) + '</td>' +
+      '<td>' + products_breakdown_number( entry.conversions_value, 2 ) + '</td>' +
+      '<td>' + products_breakdown_number( entry.roas, 0 ) + '</td>' +
+      '<td>' + products_breakdown_number( entry.min_roas, 2 ) + '</td>' +
+      '<td>' + escape_html( entry.custom_label_1 || '' ) + '</td>' +
+      '<td>' + escape_html( entry.custom_label_4 || '' ) + '</td>' +
+    '</tr>';
+  } );
+
+  html += '</tbody></table></div>';
+
+  return html;
+}
+
 $( function()
 {
   init_products_scope_select_search();
@@ -557,7 +683,18 @@ $( function()
           return '<input type="checkbox" class="product-checkbox" value="' + row[1] + '" />';
         }
       },
-      { width: '50px', orderable: false },
+      { width: '70px', orderable: false, render: function( data, type, row ) {
+          var row_meta = products_breakdown_meta( row );
+          var toggle = '';
+
+          if ( row_meta.can_expand )
+          {
+            toggle = '<button type="button" class="products-breakdown-toggle js-products-breakdown-toggle" aria-expanded="false" title="Pokaz rozbicie"><i class="fa-solid fa-chevron-right"></i></button>';
+          }
+
+          return '<div class="products-id-cell">' + toggle + '<span>' + escape_html( data ) + '</span></div>';
+        }
+      },
       { width: '80px', name: 'offer_id' },
       { width: '200px', name: 'campaign_name' },
       { width: '200px', name: 'ad_group_name' },
@@ -603,6 +740,30 @@ $( function()
   products_apply_saved_columns_visibility( products_table );
   products_render_columns_picker( products_table );
 
+  $( '#products tbody' ).on( 'click', '.js-products-breakdown-toggle', function( e ) {
+    e.preventDefault();
+
+    var $btn = $( this );
+    var $tr = $btn.closest( 'tr' );
+    var dt_row = products_table.row( $tr );
+    var row_data = dt_row.data() || [];
+    var row_meta = products_breakdown_meta( row_data );
+
+    if ( dt_row.child.isShown() )
+    {
+      dt_row.child.hide();
+      $tr.removeClass( 'products-breakdown-open' );
+      $btn.attr( 'aria-expanded', 'false' );
+      $btn.find( 'i' ).removeClass( 'fa-chevron-down' ).addClass( 'fa-chevron-right' );
+      return;
+    }
+
+    dt_row.child( products_build_breakdown_html( row_meta ) ).show();
+    $tr.addClass( 'products-breakdown-open' );
+    $btn.attr( 'aria-expanded', 'true' );
+    $btn.find( 'i' ).removeClass( 'fa-chevron-right' ).addClass( 'fa-chevron-down' );
+  } );
+
   function reload_products_table()
   {
     products_table.ajax.reload( null, false );