playbook_ui 14.19.0.pre.alpha.PLAY21297675 → 14.19.0.pre.alpha.borderfixadvancedtable7815

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 93df013c8d48a5c077ccdb15133ab4682b05d667db94eba9bdd6e8accba7d472
-  data.tar.gz: '085bc5dffd842ea4fc4fe35f8579b517523ad0e02f6b9692fe33faecbf6b9284'
+  metadata.gz: f23203d8d9f4d68b4eee824acd41f1865d0726dd003e4403d3e08fd09b43b30f
+  data.tar.gz: 7150ec7398a2e7a36f023418ac7d5e33b1e7be2b2653e4acfc4e6c1cb68b8ef8
 SHA512:
-  metadata.gz: 463d71189c32e8500ca647672d4202ffbfb23e0d73c068eaf50a0779752a0f91d9151bcfce121cc3050066a1a0897eb13b86b05328630aa6f5e3ee80baa50586
-  data.tar.gz: 00d153cdde95a0761c7515b5fb5de2dff87d10cb7f7e1e16e2f092bee31f1110ed713c6c3599fb57fb11bc347800f6bb1510798990904ad84629580d42a427e4
+  metadata.gz: fc59a76bc6a8fadb48077c6021242e81c5b6032189464e34d6fdc9c9f429dc4d6e9f13b66b8c084b01e75910c3a540cef38eaaff01dd948acf0cabe9068648ec
+  data.tar.gz: 5dd8819104554e2052393ce247d9d94123fdff66b536dd4d85735baf99dde4d2f190795206d7f193ff559aae5c2443f98ea3df2e5383b62d4a938024597cce86

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

@@ -554,14 +554,15 @@
       background-color: $white;
       box-shadow: $shadow_deep;
     }
+
+    // Apply border colors for sticky columns
+    @include apply-sticky-colors("light");
+
     @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)