playbook_ui_docs 14.19.0.pre.alpha.PLAY2033atactionbarrails7730 → 14.19.0.pre.alpha.PLAY2033atactionbarrails7773

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 91eee0b4847ec677c41c3fad7af50c012db4729d0b14acbf22b16912b8fafa94
4
- data.tar.gz: 0dd95e3f0e7d04ff7faec50914feb72fdde218dd2f72548b2fee2f0989cf8fcb
3
+ metadata.gz: 1f762af37f3645918932d238f67c6c1a04504340876798e33e758fb84ce6d726
4
+ data.tar.gz: 6b511c4951a5eef413d107ad1d85d9a842b8591ca06ecec262dbeb7cd33b5195
5
5
  SHA512:
6
- metadata.gz: 130b9a952f8d4c398b29173827a7f4080c3e02d0631673cb432f99733381f55ebdaba54ad82896cd0e5ac63e462065da8e34f9c5364b15e9a4af003ff8fa8ee0
7
- data.tar.gz: 9360a817997e19d1ace0c8eda9e2fd846fd526ec6a2dcbbbf620754ad31902ef49c571842dae59fae4017f6ed9ed7f7f71186cd7f714c413db7dc3bb9ffaa7e8
6
+ metadata.gz: ad9e26daf30efde4f0fe3a4fb1010fb667b3d73d07ade2a3d235fac56185b7b0ff64b5507f849be967cc765dcd0be5d01aedddc7b28caa9044d6b606b9842b7d
7
+ data.tar.gz: 17c118beaf1049f61fa47f9861c50cb6780aa87fd889bf1231b4d38f9dbd2bb175b83c1793d52b1fd4cca0a31218b229f93d2c29cb9ac52fa61001c8dce9073c
@@ -1,6 +1,4 @@
1
- <%
2
- # Define column definitions
3
- column_definitions = [
1
+ <% column_definitions = [
4
2
  {
5
3
  accessor: "year",
6
4
  label: "Year",
@@ -32,15 +30,22 @@ column_definitions = [
32
30
  }
33
31
  ]
34
32
 
35
- # Define actions for the selection bar
36
33
  actions = [
37
34
  pb_rails("circle_icon_button", props: {
38
35
  icon: "file-csv",
39
- variant: "link"
36
+ variant: "link",
37
+ id: "export-selected-rows-btn",
38
+ data: {
39
+ action_type: "export"
40
+ }
40
41
  }),
41
42
  pb_rails("circle_icon_button", props: {
42
43
  icon: "trash-alt",
43
- variant: "link"
44
+ variant: "link",
45
+ id: "delete-selected-rows-btn",
46
+ data: {
47
+ action_type: "delete"
48
+ }
44
49
  })
45
50
  ]
46
51
  %>
@@ -54,3 +59,80 @@ actions = [
54
59
  actions: actions,
55
60
  show_actions_bar: true
56
61
  }) %>
62
+
63
+ <script>
64
+ // Handle action clicks using the data-selected-rows attribute
65
+ window.handleActionClick = function(actionType) {
66
+ const tableContainer = document.getElementById('selectable_rows_with_actions');
67
+ if (!tableContainer) return;
68
+
69
+ // Get selected rows from the data attribute
70
+ const selectedRowsJSON = tableContainer.getAttribute('data-selected-rows');
71
+ let selectedRowIds = [];
72
+
73
+ try {
74
+ // Parse the JSON string from the data attribute
75
+ if (selectedRowsJSON) {
76
+ selectedRowIds = JSON.parse(selectedRowsJSON);
77
+ }
78
+ } catch (e) {
79
+ // Fallback if JSON parsing fails
80
+ const checkboxes = tableContainer.querySelectorAll('input[type="checkbox"]:checked');
81
+ const selectedCheckboxes = Array.from(checkboxes).filter(checkbox =>
82
+ checkbox.id !== 'select-all-rows' &&
83
+ !checkbox.closest('#select-all-rows')
84
+ );
85
+ selectedRowIds = selectedCheckboxes.map(checkbox => checkbox.id);
86
+ }
87
+
88
+ // Show appropriate message
89
+ if (!selectedRowIds || selectedRowIds.length === 0) {
90
+ alert('No Selection Made');
91
+ } else {
92
+ if (actionType === 'export') {
93
+ alert(`Row ids ${selectedRowIds.join(', ')} will be exported!`);
94
+ } else if (actionType === 'delete') {
95
+ alert(`Row ids ${selectedRowIds.join(', ')} will be deleted!`);
96
+ }
97
+ }
98
+ };
99
+
100
+ // Add event listeners when the DOM is ready
101
+ document.addEventListener('DOMContentLoaded', function() {
102
+ // Get the buttons
103
+ const exportBtn = document.getElementById('export-selected-rows-btn');
104
+ const deleteBtn = document.getElementById('delete-selected-rows-btn');
105
+
106
+ // Add click event listeners
107
+ if (exportBtn) {
108
+ exportBtn.addEventListener('click', function(e) {
109
+ e.preventDefault();
110
+ window.handleActionClick('export');
111
+ });
112
+ }
113
+
114
+ if (deleteBtn) {
115
+ deleteBtn.addEventListener('click', function(e) {
116
+ e.preventDefault();
117
+ window.handleActionClick('delete');
118
+ });
119
+ }
120
+
121
+ // Optional: Event delegation through the action bar
122
+ const actionBar = document.querySelector('.row-selection-actions-card');
123
+ if (actionBar) {
124
+ actionBar.addEventListener('click', function(e) {
125
+ const exportButton = e.target.closest('#export-selected-rows-btn');
126
+ const deleteButton = e.target.closest('#delete-selected-rows-btn');
127
+
128
+ if (exportButton) {
129
+ e.preventDefault();
130
+ window.handleActionClick('export');
131
+ } else if (deleteButton) {
132
+ e.preventDefault();
133
+ window.handleActionClick('delete');
134
+ }
135
+ });
136
+ }
137
+ });
138
+ </script>
@@ -0,0 +1,3 @@
1
+ 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.
2
+
3
+ You can utilize script tags with your actions to provide your buttons with any clickable events needed.
@@ -0,0 +1,40 @@
1
+ <% column_definitions = [
2
+ {
3
+ accessor: "year",
4
+ label: "Year",
5
+ cellAccessors: ["quarter", "month", "day"],
6
+ },
7
+ {
8
+ accessor: "newEnrollments",
9
+ label: "New Enrollments",
10
+ },
11
+ {
12
+ accessor: "scheduledMeetings",
13
+ label: "Scheduled Meetings",
14
+ },
15
+ {
16
+ accessor: "attendanceRate",
17
+ label: "Attendance Rate",
18
+ },
19
+ {
20
+ accessor: "completedClasses",
21
+ label: "Completed Classes",
22
+ },
23
+ {
24
+ accessor: "classCompletionRate",
25
+ label: "Class Completion Rate",
26
+ },
27
+ {
28
+ accessor: "graduatedStudents",
29
+ label: "Graduated Students",
30
+ }
31
+ ] %>
32
+
33
+ <%= pb_rails("advanced_table", props: {
34
+ id: "selectable_rows_with_actions",
35
+ table_data: @table_data_no_subrows,
36
+ column_definitions: column_definitions,
37
+ selectable_rows: true,
38
+ enable_toggle_expansion: "none",
39
+ show_actions_bar: false
40
+ }) %>
@@ -0,0 +1 @@
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`
@@ -16,6 +16,7 @@ examples:
16
16
  - advanced_table_selectable_rows_rails: Selectable Rows
17
17
  - advanced_table_selectable_rows_no_subrows_rails: Selectable Rows (No Subrows)
18
18
  - advanced_table_selectable_rows_actions_rails: Selectable Rows (With Actions)
19
+ - advanced_table_selectable_rows_header_rails: Selectable Rows (No Actions Bar)
19
20
 
20
21
  react:
21
22
  - advanced_table_default: Default (Required Props)
@@ -6,6 +6,7 @@ import Flex from '../../pb_flex/_flex'
6
6
  import FlexItem from '../../pb_flex/_flex_item'
7
7
  import Avatar from '../../pb_avatar/_avatar'
8
8
  import User from '../../pb_user/_user'
9
+ import Body from '../../pb_body/_body'
9
10
 
10
11
  const DropdownWithCustomDisplay = (props) => {
11
12
  const [selectedOption, setSelectedOption] = useState();
@@ -50,10 +51,20 @@ const DropdownWithCustomDisplay = (props) => {
50
51
  <>
51
52
  {
52
53
  selectedOption && (
54
+ <Flex align="center">
53
55
  <Avatar
54
56
  name={selectedOption.label}
55
57
  size="xs"
56
58
  />
59
+ <Body
60
+ marginX="xs"
61
+ text={selectedOption.label}
62
+ />
63
+ <Badge
64
+ text={selectedOption.status}
65
+ variant={selectedOption.status == "Offline" ? "neutral" : selectedOption.status == "Online" ? "success" : "warning"}
66
+ />
67
+ </Flex>
57
68
  )
58
69
  }
59
70
  </>
@@ -1,4 +1,4 @@
1
- Optionally utilize `customDisplay` on the `Dropdown.Trigger` subcomponent to customize its content after an option is selected. The component passed to customDisplay will be rendered to the left of the default text-based display. In this example the Avatar kit is being used.
1
+ Optionally utilize `customDisplay` on the `Dropdown.Trigger` subcomponent to customize its content after an option is selected. Pass in any combination of kits to create a custom display. When a user clicks on an option, the kits passed into `customDisplay` will display as the selected option.
2
2
 
3
3
  The `placeholder` prop can also be used to customize the placeholder text for the default `Dropdown.Trigger`.
4
4
 
@@ -38,7 +38,11 @@
38
38
 
39
39
  <%
40
40
  custom_display = capture do
41
- pb_rails("avatar", props: { name: "Courtney Long", size: "xs" })
41
+ pb_rails("flex", props: { align: "center" }) do
42
+ concat(pb_rails("avatar", props: { name: "", size: "xs", id: "dropdown-avatar" }))
43
+ concat(pb_rails("body", props: { text: "", size: "xs", margin_x: "xs", id: "dropdown-avatar-name" }))
44
+ concat(pb_rails("badge", props: { text: "", id: "dropdown-avatar-status" }))
45
+ end
42
46
  end
43
47
  %>
44
48
 
@@ -62,4 +66,31 @@
62
66
  <% end %>
63
67
  <% end %>
64
68
  <% end %>
65
- <% end %>
69
+ <% end %>
70
+
71
+
72
+ <script>
73
+ document.addEventListener("pb:dropdown:selected", (e) => {
74
+ const option = e.detail;
75
+ const dropdown = e.target;
76
+
77
+ const display = dropdown.querySelector("#dropdown_trigger_custom_display");
78
+ if (!display) return;
79
+
80
+ const nameEl = display.querySelector("#dropdown-avatar-name");
81
+ if (nameEl) nameEl.textContent = option.label;
82
+
83
+ const avatarEl = display.querySelector("#dropdown-avatar").querySelector(".avatar_wrapper");
84
+ const initials = (option.label[0] + option.label.split(" ").pop()[0]).toUpperCase();
85
+ if (avatarEl) {
86
+ avatarEl.dataset.name = option.label;
87
+ avatarEl.setAttribute("data-initials", initials);
88
+ }
89
+ const badgeEl = display.querySelector("#dropdown-avatar-status");
90
+ const variant = option.status === "Online" ? "success" : option.status === "Offline" ? "neutral" : "warning";
91
+ if (badgeEl) {
92
+ badgeEl.querySelector("span").textContent = option.status;
93
+ badgeEl.className = 'pb_badge_kit_' + variant;
94
+ }
95
+ });
96
+ </script>
@@ -1,4 +1,6 @@
1
- Optionally utilize `custom_display` on the `dropdown/dropdown_trigger` subcomponent to customize its content after an option is selected. The component passed to custom_display will be rendered to the left of the default text-based display. In this example the Avatar kit is being used.
1
+ Optionally utilize `custom_display` on the `dropdown/dropdown_trigger` subcomponent to customize its content after an option is selected. Pass in any combination of kits to create a custom display. When a user clicks on an option, the kits passed into `custom_display` will display as the selected option.
2
+
3
+ Make use of a script to help set the custom_display with the correct value. By using the pb:dropdown:selected event listener, you can target the kits with a querySelector and update them dynamically with the values needed to match the selected option. Make sure to add an ID to the kits being passed in.
2
4
 
3
5
  The `placeholder` prop can also be used to customize the placeholder text for the default `dropdown/dropdown_trigger`.
4
6