[WIP] feat: add demo for tree-view-type-ahead #39

Shijir · 2022-03-23T15:55:38Z

Signed-off-by: stsogoo [email protected]

PR Checklist

Please check if your PR fulfills the following requirements:

Enable Type-Ahead functionaly Tree-View by introducing clrTypeAhead directive.

clrTypeAhead directive works as a support/helper directive to enable a type-ahead focus functionality in Tree-View component. Its only goal is to extract the text content from its host element. This directive can extract and provide element's text content in two ways:

Accessing .textContent from its native element. Example:

<clr-tree-node clrTypeAhead>Hello World<clr-tree-node>

Via input binding (Recommend). Example:

<clr-tree-node [clrTypeAhead]='Hello World'>Hello World<clr-tree-node>

In this way, the user directly provides the text through input binding. This is better because the directive doesn't need to access the element to extract its text content.

In this current implementation, Type-Ahead functionality is optional in Tree-View as not all Tree-View components need this functionality. Thus, in order to enable this functionality, users need to import ClrTypeAheadModule together with ClrTreeViewModule.

Recursive Tree-View with Type-Ahead:

<clr-tree>
    <clr-tree-node
      [clrForTypeAhead]="node.name"
      *clrRecursiveFor="let node of multiRoot">
      {{node.name}}
    </clr-tree-node>
</clr-tree>

Declaritive Tree-View with Type-Ahead:

<clr-tree>
    <clr-tree-node clrForTypeAhead [clrExpanded]="true">
      California
      <clr-tree-node clrForTypeAhead>San Francisco</clr-tree-node>
      <clr-tree-node clrForTypeAhead>Los Angeles</clr-tree-node>
    </clr-tree-node>
    <clr-tree-node clrForTypeAhead [clrExpanded]="true">
      Washington
      <clr-tree-node clrForTypeAhead>Seattle</clr-tree-node>
    </clr-tree-node>
</clr-tree>

Tests for the changes have been added (for bug fixes / features)
Docs have been added / updated (for bug fixes / features)
If applicable, have a visual design approval

PR Type

What kind of change does this PR introduce?

What is the current behavior?

Issue Number: VPAT-604: Tree Views lack Type-ahead functionality https://jira.eng.vmware.com/plugins/servlet/samlsso?redirectTo=%2Fbrowse%2FVPAT-604

What is the new behavior?

Does this PR introduce a breaking change?

Yes
No

Other information

vmwclabot · 2022-03-23T16:35:31Z

@Shijir, you must sign our contributor license agreement before your changes are merged. Click here to sign the agreement. If you are a VMware employee, read this for further instruction.

vmwclabot · 2022-03-24T16:21:34Z

@Shijir, your company's legal contact has approved your signed contributor license agreement. It will also be reviewed by VMware, but the merge can proceed.

Signed-off-by: stsogoo <[email protected]>

github-actions · 2022-03-24T19:29:55Z

👋 @Shijir,

🙏 The Clarity team thanks you for opening a pull request
🎉 The build for this PR has succeeded
🔍 The PR is now ready for review
🍿 In the meantime, checkout out a preview of this PR
🖐 You can always follow up here. If you're a VMware employee, you can also reach us on our internal #clarity-support Slack channel

Thank you,

🤖 Clarity Release Bot

mathisscott · 2022-03-28T16:14:47Z

projects/angular/src/data/tree-view/tree-node.ts

@@ -188,6 +199,20 @@ export class ClrTreeNode<T> implements OnInit, OnDestroy {
    this.subscriptions.push(
      this._model.loading$.pipe(debounceTime(0)).subscribe(isLoading => (this.isModelLoading = isLoading))
    );
+
+    this.subscriptions.push(


Check out the takeUntil/destroy pattern in this PR

mathisscott · 2022-03-28T16:16:19Z

projects/angular/src/data/tree-view/tree-focus-manager.service.ts

@@ -99,6 +99,71 @@ export class TreeFocusManagerService<T> {
    }
  }

+  private findNodeStartsWith(searchString: string, model: TreeNodeModel<T>): TreeNodeModel<T> {


Seems like the return type should be TreeNodeModel<T> | null

mathisscott · 2022-03-28T16:16:24Z

projects/angular/src/data/tree-view/tree-focus-manager.service.ts

+    return null;
+  }
+
+  private findClosestNodeStartsWith(searchString: string, model: TreeNodeModel<T>): TreeNodeModel<T> {


Seems like the return type should be TreeNodeModel<T> | null

mathisscott · 2022-03-28T16:17:09Z

projects/angular/src/data/tree-view/tree-focus-manager.service.ts

+      return null;
+    }
+
+    // Look from its own descendents first


there are lots of chunks of logic in these private functions that might be easier to unit test in isolation as utilities or helpers

Signed-off-by: stsogoo <[email protected]>

Shijir · 2022-04-01T20:01:14Z

Closing this PR as a topic branch PR is created instead: #61

github-actions · 2022-04-16T01:40:35Z

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed PRs after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.

vmwclabot · 2022-04-27T16:02:59Z

@Shijir, VMware has rejected your signed contributor license agreement. The merge can not proceed until the agreement has been resigned. Click here to resign the agreement.

Shijir changed the title ~~feat: add demo for tree-view-type-ahead~~ [WIP] feat: add demo for tree-view-type-ahead Mar 23, 2022

feat: add demo for tree-view-type-ahead

99850e8

Signed-off-by: stsogoo <[email protected]>

Shijir force-pushed the treeview-type-ahead branch from e7f5e93 to 99850e8 Compare March 24, 2022 19:29

mathisscott suggested changes Mar 28, 2022

View reviewed changes

Shijir added 2 commits March 28, 2022 13:57

fix: add integrated test for tree with type-ahead feature

336e043

Signed-off-by: stsogoo <[email protected]>

fix: api extract and change

ccd167e

Signed-off-by: stsogoo <[email protected]>

Shijir closed this Apr 1, 2022

github-actions bot locked and limited conversation to collaborators Apr 16, 2022

vmwclabot added the cla-rejected label Apr 27, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[WIP] feat: add demo for tree-view-type-ahead #39

[WIP] feat: add demo for tree-view-type-ahead #39

Shijir commented Mar 23, 2022 •

edited

Loading

vmwclabot commented Mar 23, 2022

vmwclabot commented Mar 24, 2022

github-actions bot commented Mar 24, 2022 •

edited

Loading

mathisscott Mar 28, 2022

mathisscott Mar 28, 2022

mathisscott Mar 28, 2022

mathisscott Mar 28, 2022

Shijir commented Apr 1, 2022

github-actions bot commented Apr 16, 2022

vmwclabot commented Apr 27, 2022

[WIP] feat: add demo for tree-view-type-ahead #39

[WIP] feat: add demo for tree-view-type-ahead #39

Conversation

Shijir commented Mar 23, 2022 • edited Loading

PR Checklist

PR Type

What is the current behavior?

What is the new behavior?

Does this PR introduce a breaking change?

Other information

vmwclabot commented Mar 23, 2022

vmwclabot commented Mar 24, 2022

github-actions bot commented Mar 24, 2022 • edited Loading

mathisscott Mar 28, 2022

Choose a reason for hiding this comment

mathisscott Mar 28, 2022

Choose a reason for hiding this comment

mathisscott Mar 28, 2022

Choose a reason for hiding this comment

mathisscott Mar 28, 2022

Choose a reason for hiding this comment

Shijir commented Apr 1, 2022

github-actions bot commented Apr 16, 2022

vmwclabot commented Apr 27, 2022

Shijir commented Mar 23, 2022 •

edited

Loading

github-actions bot commented Mar 24, 2022 •

edited

Loading