playbook_ui 14.19.0.pre.alpha.PLAY21377811 → 14.19.0.pre.alpha.borderfixadvancedtable7816

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5e3cef0436d45ddc7db0c5a43cd08231dca01397143bb6b165b064a62531527c
-  data.tar.gz: 760ebb338693dff4549a55d3ff38d7f8ffca698b23f916449e9960d2bb96b58f
+  metadata.gz: ef1378b88aac8a24d63b1c024f6df3b4b42536def72fd15a2c45ec1d31c5c45f
+  data.tar.gz: b97b6bc05dd55054977f491d17a7359b68884e2cb19ee025e50e4f70327a6cc8
 SHA512:
-  metadata.gz: 88b34b166112f11627a7ff072f529b2c2840e389c59abcf3ff237b94d1ace1bf18217c5b154340d76e4abac08b3ed22c4ac194b9fe4da80f9d55fcf2fffdb0c9
-  data.tar.gz: e77a82b26eea3ea8de2874c6717ee31c75e152581e68ef15021a22bf3e23761c60a2aa488500ac5bab31f2919903d4b4dd5f8606003d912ee015460e0290e000
+  metadata.gz: 86cf679b210ca9d9eed69f2cfed5b6bd8529f9621c34af5389dc7a05f1d05a5daad70e5345bfd71c4c2210ecf829396b681b6b86c613319a66abd5814b79aad5
+  data.tar.gz: 5f7be00d7226069d440d62e4cb65f21556598b22920578634039729b6106ee4bd766d2e815344bfc735dec54e4971901588d454bdffd7121ee64f4a40c27b727

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -554,14 +554,12 @@
       background-color: $white;
       box-shadow: $shadow_deep;
     }
+
     @include advanced-table-sticky-mixin(
       $border_light,
       $white,
       lighten($silver, $opacity_7)
     );
-
-    // Apply border colors for sticky columns
-    @include apply-sticky-colors("light");
   }
 
   // Responsive Styles

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb

@@ -1,10 +1,18 @@
 <%= pb_content_tag do %>
-        <%= pb_rails("table", props: { size: "sm", data_table: true, number_spacing:"tabular", responsive:"none", dark: dark, classname: object.loading ? "content-loading" : ""  }.merge(object.table_props)) do %>
-          <% if content.present? %>
-            <% content.presence %>
-          <% else %>
-            <%= pb_rails("advanced_table/table_header", props: { column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows }) %>
-            <%= pb_rails("advanced_table/table_body", props: { id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, enable_toggle_expansion: object.enable_toggle_expansion }) %>
-          <% end %>
-        <% end %>
+  <% if object.selectable_rows && object.show_actions_bar %>
+    <%= pb_rails("advanced_table/table_action_bar", props: {
+      actions: object.actions,
+      is_visible: false,
+      selected_count: 0
+    }) %>
+  <% end %>
+
+  <%= pb_rails("table", props: { size: "sm", data_table: true, number_spacing:"tabular", responsive:"none", dark: dark, classname: object.loading ? "content-loading" : ""  }.merge(object.table_props)) do %>
+    <% if content.present? %>
+      <% content.presence %>
+    <% else %>
+      <%= pb_rails("advanced_table/table_header", props: { column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, show_actions_bar: object.show_actions_bar }) %>
+      <%= pb_rails("advanced_table/table_body", props: { id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, enable_toggle_expansion: object.enable_toggle_expansion }) %>
+    <% end %>
+  <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb

@@ -25,6 +25,10 @@ module Playbook
                         default: "auto"
       prop :selectable_rows, type: Playbook::Props::Boolean,
                              default: false
+      prop :show_actions_bar, type: Playbook::Props::Boolean,
+                              default: true
+      prop :actions, type: Playbook::Props::Array,
+                     default: []
 
       def classname
         additional_classes = [responsive_classname, max_height_classname]
@@ -47,6 +51,11 @@ module Playbook
       def selected_rows_length
         selected_rows.length
       end
+
+      def is_action_bar_visible
+        # Action bar visibility is controlled by JS based on selection
+        false
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_actions_rails.html.erb

@@ -0,0 +1,137 @@
+<% column_definitions = [
+  {
+    accessor: "year",
+    label: "Year",
+    cellAccessors: ["quarter", "month", "day"],
+  },
+  {
+    accessor: "newEnrollments",
+    label: "New Enrollments",
+  },
+  {
+    accessor: "scheduledMeetings",
+    label: "Scheduled Meetings",
+  },
+  {
+    accessor: "attendanceRate",
+    label: "Attendance Rate",
+  },
+  {
+    accessor: "completedClasses",
+    label: "Completed Classes",
+  },
+  {
+    accessor: "classCompletionRate",
+    label: "Class Completion Rate",
+  },
+  {
+    accessor: "graduatedStudents",
+    label: "Graduated Students",
+  }
+]
+
+actions = [
+  pb_rails("circle_icon_button", props: {
+    icon: "file-csv",
+    variant: "link",
+    id: "export-selected-rows-btn",
+    data: {
+      action_type: "export"
+    }
+  }),
+  pb_rails("circle_icon_button", props: {
+    icon: "trash-alt",
+    variant: "link",
+    id: "delete-selected-rows-btn",
+    data: {
+      action_type: "delete"
+    }
+  })
+]
+%>
+
+<%= pb_rails("advanced_table", props: {
+  id: "selectable_rows_with_actions",
+  table_data: @table_data_no_subrows,
+  column_definitions: column_definitions,
+  selectable_rows: true,
+  enable_toggle_expansion: "none",
+  actions: actions
+}) %>
+
+<script>
+  // Handle action clicks using the data-selected-rows attribute
+  window.handleActionClick = function(actionType) {
+    const tableContainer = document.getElementById('selectable_rows_with_actions');
+    if (!tableContainer) return;
+
+    // Get selected rows from the data attribute
+    const selectedRowsJSON = tableContainer.getAttribute('data-selected-rows');
+    let selectedRowIds = [];
+
+    try {
+      // Parse the JSON string from the data attribute
+      if (selectedRowsJSON) {
+        selectedRowIds = JSON.parse(selectedRowsJSON);
+      }
+    } catch (e) {
+      // Fallback if JSON parsing fails
+      const checkboxes = tableContainer.querySelectorAll('input[type="checkbox"]:checked');
+      const selectedCheckboxes = Array.from(checkboxes).filter(checkbox =>
+        checkbox.id !== 'select-all-rows' &&
+        !checkbox.closest('#select-all-rows')
+      );
+      selectedRowIds = selectedCheckboxes.map(checkbox => checkbox.id);
+    }
+
+    // Show appropriate message
+    if (!selectedRowIds || selectedRowIds.length === 0) {
+      alert('No Selection Made');
+    } else {
+      if (actionType === 'export') {
+        alert(`Row ids ${selectedRowIds.join(', ')} will be exported!`);
+      } else if (actionType === 'delete') {
+        alert(`Row ids ${selectedRowIds.join(', ')} will be deleted!`);
+      }
+    }
+  };
+
+  // Add event listeners when the DOM is ready
+  document.addEventListener('DOMContentLoaded', function() {
+    // Get the buttons
+    const exportBtn = document.getElementById('export-selected-rows-btn');
+    const deleteBtn = document.getElementById('delete-selected-rows-btn');
+
+    // Add click event listeners
+    if (exportBtn) {
+      exportBtn.addEventListener('click', function(e) {
+        e.preventDefault();
+        window.handleActionClick('export');
+      });
+    }
+
+    if (deleteBtn) {
+      deleteBtn.addEventListener('click', function(e) {
+        e.preventDefault();
+        window.handleActionClick('delete');
+      });
+    }
+
+    // Optional: Event delegation through the action bar
+    const actionBar = document.querySelector('.row-selection-actions-card');
+    if (actionBar) {
+      actionBar.addEventListener('click', function(e) {
+        const exportButton = e.target.closest('#export-selected-rows-btn');
+        const deleteButton = e.target.closest('#delete-selected-rows-btn');
+
+        if (exportButton) {
+          e.preventDefault();
+          window.handleActionClick('export');
+        } else if (deleteButton) {
+          e.preventDefault();
+          window.handleActionClick('delete');
+        }
+      });
+    }
+  });
+</script>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_actions_rails.md

@@ -0,0 +1,3 @@
+Custom actions content can be rendered within the Actions Bar as shown in this doc example. The component passed to `actions` will be rendered on the right of the actionsBar.
+
+You can utilize script tags with your actions to provide your buttons with any clickable events needed.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_header_rails.html.erb

@@ -0,0 +1,40 @@
+<% column_definitions = [
+  {
+    accessor: "year",
+    label: "Year",
+    cellAccessors: ["quarter", "month", "day"],
+  },
+  {
+    accessor: "newEnrollments",
+    label: "New Enrollments",
+  },
+  {
+    accessor: "scheduledMeetings",
+    label: "Scheduled Meetings",
+  },
+  {
+    accessor: "attendanceRate",
+    label: "Attendance Rate",
+  },
+  {
+    accessor: "completedClasses",
+    label: "Completed Classes",
+  },
+  {
+    accessor: "classCompletionRate",
+    label: "Class Completion Rate",
+  },
+  {
+    accessor: "graduatedStudents",
+    label: "Graduated Students",
+  }
+] %>
+
+<%= pb_rails("advanced_table", props: {
+  id: "selectable_rows_with_actions",
+  table_data: @table_data_no_subrows,
+  column_definitions: column_definitions,
+  selectable_rows: true,
+  enable_toggle_expansion: "none",
+  show_actions_bar: false
+}) %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_header_rails.md

@@ -0,0 +1 @@
+`show_actions_bar` is an optional prop that renders the header at the top showing the row count. This is set to `true` by default but can be toggled off by setting it to `false`

data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml

@@ -15,6 +15,8 @@ examples:
   - advanced_table_column_border_color_rails: Column Group Border Color
   - advanced_table_selectable_rows_rails: Selectable Rows
   - advanced_table_selectable_rows_no_subrows_rails: Selectable Rows (No Subrows)
+  - advanced_table_selectable_rows_actions_rails: Selectable Rows (With Actions)
+  - advanced_table_selectable_rows_header_rails: Selectable Rows (No Actions Bar)
 
   react:
   - advanced_table_default: Default (Required Props)