playbook_ui 12.26.0.pre.alpha.multiselectfixes798 → 12.26.0.pre.alpha.railsmultilevelimprovements805

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.md

@@ -2,4 +2,4 @@ The MultiLevelSelect kit renders a multi leveled select dropdown based on data f
 
 For the React version of the kit, the `onSelect` prop returns an array of all checked items, irrespective of whether it is a parent, child or grandchild. Open the console on this example and check and uncheck checkboxes to see this is action!
 
-For the Rails version, the array of checked items is attached to the DOM in a data attribute titled `data-tree` on the wrapping div around  the MultiLevelSelect.
+By default, the return will be an array of Id's. If you want to return the entire object, you can pass `returnCompleteData` as true. This will return an array of objects. 

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.html.erb

@@ -64,9 +64,8 @@
     ],
   }] %>
 
-
 <%= pb_rails("multi_level_select", props: {
     id: "parent-persistence-multi-level-select",
     tree_data:treeData,
     return_all_selected: true
-    }) %>
+}) %>

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.jsx

@@ -74,7 +74,7 @@ const MultiLevelSelectReturnAllSelected = (props) => {
       <MultiLevelSelect
           id="multiselect-parent-persistence"
           onSelect={(selectedNodes) =>
-          console.log("Selected Items", selectedNodes)
+          console.log("Selected Items with Return All Selected Data", selectedNodes)
           }
           returnAllSelected
           treeData={treeData}

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_complete_data.html.erb

@@ -0,0 +1,73 @@
+<% treeData = [{
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "powerhome1",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "People",
+        id: "people1",
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "talent1",
+          },
+          {
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "business1",
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "initiative1",
+              },
+              {
+                label: "Learning & Development",
+                value: "Learning & Development",
+                id: "development1",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "People Experience",
+            id: "experience1",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "Contact Center",
+        id: "contact1",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "Appointment Management",
+            id: "appointment1",
+          },
+          {
+            label: "Customer Service",
+            value: "Customer Service",
+            id: "customer1",
+          },
+          {
+            label: "Energy",
+            value: "Energy",
+            id: "energy1",
+          },
+        ],
+      },
+    ],
+  }] %>
+
+
+<%= pb_rails("multi_level_select", props: {
+    id: "default-multi-level-select",
+    tree_data: treeData, 
+    return_complete_data: true
+}) %>
+
+

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_complete_data.jsx

@@ -0,0 +1,87 @@
+import React from "react"
+import MultiLevelSelect from "../_multi_level_select"
+
+const treeData = [
+  {
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "powerhome1",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "People",
+        id: "people1",
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "talent1",
+          },
+          {
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "business1",
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "initiative1",
+              },
+              {
+                label: "Learning & Development",
+                value: "Learning & Development",
+                id: "development1",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "People Experience",
+            id: "experience1",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "Contact Center",
+        id: "contact1",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "Appointment Management",
+            id: "appointment1",
+          },
+          {
+            label: "Customer Service",
+            value: "Customer Service",
+            id: "customer1",
+          },
+          {
+            label: "Energy",
+            value: "Energy",
+            id: "energy1",
+          },
+        ],
+      },
+    ],
+  },
+]
+
+const MultiLevelSelectDefault = (props) => {
+  return (
+    <div>
+      <MultiLevelSelect
+          id='multiselect-default'
+          onSelect={(selectedNodes) =>
+          console.log("Selected Items with Complete Data", selectedNodes)
+        }
+          returnCompleteData
+          treeData={treeData}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default MultiLevelSelectDefault

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_form.html.erb

@@ -0,0 +1,72 @@
+<%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
+
+  <% treeData = [{
+  label: "Power Home Remodeling",
+  value: "Power Home Remodeling",
+  id: "powerhome1",
+  expanded: true,
+  children: [
+    {
+      label: "People",
+      value: "People",
+      id: "people1",
+      children: [
+        {
+          label: "Talent Acquisition",
+          value: "Talent Acquisition",
+          id: "talent1",
+        },
+        {
+          label: "Business Affairs",
+          value: "Business Affairs",
+          id: "business1",
+          children: [
+            {
+              label: "Initiatives",
+              value: "Initiatives",
+              id: "initiative1",
+            },
+            {
+              label: "Learning & Development",
+              value: "Learning & Development",
+              id: "development1",
+            },
+          ],
+        },
+        {
+          label: "People Experience",
+          value: "People Experience",
+          id: "experience1",
+        },
+      ],
+    },
+    {
+      label: "Contact Center",
+      value: "Contact Center",
+      id: "contact1",
+      children: [
+        {
+          label: "Appointment Management",
+          value: "Appointment Management",
+          id: "appointment1",
+        },
+        {
+          label: "Customer Service",
+          value: "Customer Service",
+          id: "customer1",
+        },
+        {
+          label: "Energy",
+          value: "Energy",
+          id: "energy1",
+        },
+      ],
+    },
+  ],
+}] %>
+
+  <%= form.multi_level_select :example, props: {id: "with-form-multi-level-select", tree_data: treeData, return_all_selected: true } %>
+  <%= form.actions do |action| %>
+    <%= action.button props: { type: "submit", text: "Submit", variant: "primary", margin_top: "lg" } %>
+  <% end %>   
+<% end %>

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

@@ -2,8 +2,11 @@ examples:
   rails:
   - multi_level_select_default: Default
   - multi_level_select_return_all_selected: Return All Selected
+  - multi_level_select_return_complete_data: Return Complete Data
+  - multi_level_select_with_form: With Form
   
   react:
   - multi_level_select_default: Default
   - multi_level_select_return_all_selected: Return All Selected
+  - multi_level_select_return_complete_data: Return Complete Data
   

data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js

@@ -1,2 +1,3 @@
 export { default as MultiLevelSelectDefault } from './_multi_level_select_default.jsx'
-export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
+export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
+export { default as MultiLevelSelectReturnCompleteData } from './_multi_level_select_return_complete_data.jsx'

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb

@@ -3,10 +3,14 @@
 module Playbook
   module PbMultiLevelSelect
     class MultiLevelSelect < Playbook::KitBase
+      prop :id
+      prop :name
       prop :tree_data, type: Playbook::Props::Array,
                        default: []
       prop :return_all_selected, type: Playbook::Props::Boolean,
                                  default: false
+      prop :return_complete_data, type: Playbook::Props::Boolean,
+                                  default: false
 
       def classname
         generate_classname("pb_multi_level_select")
@@ -15,8 +19,10 @@ module Playbook
       def multi_level_select_options
         {
           id: id,
+          name: name,
           treeData: tree_data,
           returnAllSelected: return_all_selected,
+          returnCompleteData: return_complete_data,
         }
       end
     end