Merge pull request #18 from CodeWithDennis/feature/relationships

[WIP] relationships

README.md

@@ -18,85 +18,65 @@ php artisan filament:assets
 ```
 
 ## Features
-- ✅ Compatible with dark mode
-- ✅ Featuring search functionality
-- ✅ Comma seperated multi-select
-- ✅ Custom options
-- ❌ Disabled options (Planned)
-- ❌ Relationships (Planned)
-
+
+- Dark Mode: It seamlessly supports both Filament's light and dark modes out of the box.
+- Search: Searching is fully supported, and it seamlessly searches through all levels within the tree structure.
+- BelongsTo Integration: Establish connections within your data effortlessly.
+- BelongsToMany Integration: Simplify the management of complex relationships through BelongsToMany integration.
+
+🐛 One thing I have noticed about this project is that it tends to run a lot of queries, mainly because of its recursive design. Working to fix this in the upcoming updates.
+
 ## Usage
 
 ```PHP
+// Create a tree based on a 'BelongsToMany' relationship
+SelectTree::make('categories')
+    ->relationship('categories', 'name', 'parent_id', function ($query) {
+        return $query;
+    })
+
+// Create a tree based on a 'BelongsTo' relationship
 SelectTree::make('category_id')
-    // Creates a select tree with 'Category' model, using 'category_id' as parent and 'name' as label, allowing custom query modification.
-    ->tree(Category::class, 'category_id', 'name', function ($query) {
+    ->relationship('category', 'name', 'parent_id', function ($query) {
         return $query;
     })
 
-    // Set a custom placeholder for when no items are selected
-    ->placeholder(__('Your custom placeholder here'))
+// Set a custom placeholder when no items are selected
+->placeholder(__('Enter your custom placeholder here'))
 
-    // Ensures that only leaf nodes can be selected while preventing the selection of groups.
-    ->disabledBranchNode()
-
-    // Adjust the emptyLabel for when there are zero search results.
-    ->emptyLabel(__('No results found'))
+// Enable the selection of groups
+->enableBranchNode()
 
-    // Show the count of children alongside the group's name.
-    ->withCount()
+// Customize the label when there are zero search results
+->emptyLabel(__('No results found'))
 
-    // To keep the dropdown open at all times
-    ->alwaysOpen()
+// Display the count of children alongside the group's name
+->withCount()
 
-    // By default, all nodes are independent.
-    ->independent(false)
-
-    // When 'independent' is set to false, the tree will open with the selected values by default.
-    ->expandSelected(false)
-
-    // Display individual leaf nodes instead of the main group when all leaf nodes are selected.
-    ->grouped(false)
+// Keep the dropdown open at all times
+->alwaysOpen()
 
-    // By default, the clearable icon is enabled, but you can hide it with:
-    ->clearable(false)
+// Set nodes as dependent
+->independent(false)
 
-    // Enable the option to save multiple values as a string (comma-separated)
-    ->multiple()
+// Expand the tree with selected values
+->expandSelected(false)
 
-    // Activates the search functionality for the SelectTree.
-    ->searchable()
-```
-### Custom
-If you prefer to create custom options rather than utilizing a pre-existing model, you can achieve this using the following example:
+// Display individual leaf nodes instead of the main group when all leaf nodes are selected
+->grouped(false)
 
-```PHP
-->options([
-    [
-        'name' => 'Electronics',
-        'value' => 'electronics',
-        'children' => [
-            [
-                'name' => 'Mobile Devices',
-                'value' => 'mobile devices',
-                'children' => [
-                    [
-                        'name' => 'Apple Products',
-                        'value' => 'apple products',
-                    ]
-                ]
-            ]
-        ]
-    ],
-])
+// Hide the clearable icon
+->clearable(false)
+
+// Activate the search functionality for the SelectTree
+->searchable();
 ```
 
 ## Screenshots
 
 <img width="641" alt="light" src="https://github.com/CodeWithDennis/filament-select-tree/assets/23448484/4d348c85-5ee9-45b1-9424-0d8b3efcc02e">
 <img width="649" alt="dark" src="https://github.com/CodeWithDennis/filament-select-tree/assets/23448484/396627ff-bf36-44b7-b20c-0d32b2eff957">
 
-
 ## Changelog
 Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.
 

resources/css/custom.css

@@ -212,7 +212,6 @@ html.dark .treeselect-input__tags-element:hover svg {
 }
 
 .treeselect-input__clear svg {
-    stroke: rgb(255 255 255/var(--tw-text-opacity));
     opacity: 0.5;
 }
 

resources/js/index.js

@@ -1,36 +1,33 @@
 import Treeselect from 'treeselectjs'
 
-export default function tree({
-                                 state,
-                                 name,
-                                 options,
-                                 searchable,
-                                 showCount,
-                                 placeholder,
-                                 disabledBranchNode,
-                                 disabled = false,
-                                 isSingleSelect = true,
-                                 showTags = true,
-                                 clearable = true,
-                                 isIndependentNodes = true,
-                                 alwaysOpen = false,
-                                 emptyText,
-                                 expandSelected = true,
-                                 grouped = true,
-                             }) {
+export default function tree(
+    {
+        state,
+        name,
+        options,
+        searchable,
+        showCount,
+        placeholder,
+        disabledBranchNode = true,
+        disabled = false,
+        isSingleSelect = true,
+        showTags = true,
+        clearable = true,
+        isIndependentNodes = true,
+        alwaysOpen = false,
+        emptyText,
+        expandSelected = true,
+        grouped = true,
+    }) {
     return {
         state,
         tree: null,
         init() {
-            const values = isSingleSelect
-                ? (this.state !== null ? this.state : '')
-                : (this.state !== null ? this.state.split(',') : []);
-
             this.tree = new Treeselect({
                 id: `tree-${name}-id`,
                 ariaLabel: `tree-${name}-label`,
                 parentHtmlContainer: this.$refs.tree,
-                value: values,
+                value: this.state,
                 options,
                 searchable,
                 showCount,
@@ -48,11 +45,7 @@ export default function tree({
             });
 
             this.tree.srcElement.addEventListener('input', (e) => {
-                if (Array.isArray(e.detail)) {
-                    this.state = e.detail.join(",");
-                } else {
-                    this.state = e.detail;
-                }
+                this.state = e.detail;
             });
         }
     }

resources/views/select-tree.blade.php

@@ -18,7 +18,7 @@
                 searchable: '{{ $isSearchable() }}',
                 showCount: '{{ $getWithCount() }}',
                 placeholder: '{{ $getPlaceholder() }}',
-                disabledBranchNode: '{{ $getDisabledBranchNode() }}',
+                disabledBranchNode: '{{ !$getEnableBranchNode() }}',
                 disabled: '{{ $isDisabled() }}',
                 isSingleSelect: '{{ !$getMultiple() }}',
                 isIndependentNodes: '{{ $getIndependent() }}',