Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP] Introduce Search feature for embedded workflows #494

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

[WIP] Introduce Search feature for embedded workflows #494

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/dialog-editor/components/modal-field/field.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ <h4 class="modal-title" id="myModalLabel" translate>Edit Field Details</h4>
</div>

<div class="modal-body">
<div class="dialog-editor-tab-notification" ng-if="vm.modalNotification().error">
<div class="dialog-editor-tab-notification error" ng-if="vm.modalNotification().error">
<i class="pficon pficon-error-circle-o"></i>
{{vm.modalNotification().message}}
</div>
Expand Down
27 changes: 27 additions & 0 deletions src/dialog-editor/components/modal-field/modalFieldComponent.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ class ModalFieldController extends ModalController {
public treeOptions: any;
public modalData: any;
public validation: any;
public searchQuery: string = '';

public $onInit() {

Expand All @@ -41,6 +42,8 @@ class ModalFieldController extends ModalController {
workflow: 'embedded_workflow',
},
emsWorkflowsEnabled: emsWorkflowsEnabled,
searchQuery: '',
filteredWorkflows: [],

/** Function to reset the modalData while changin the Automation Type. */
onAutomationTypeChange: () => {
Expand Down Expand Up @@ -86,13 +89,37 @@ class ModalFieldController extends ModalController {
this.treeOptions.data = data.resources.filter((item: any) => item.payload);
const workflow = this.treeOptions.data.find((item) => item.id === this.modalData.resource_action.configuration_script_id);
this.treeOptions.selected = workflow ? workflow.name : null;
this.treeOptions.filteredWorkflows = this.treeOptions.data;
});
}
},

/** Function to handle the onclick event of an item in tree. */
onSelect: (node) => {
this.treeSelectorSelect(node, this.modalData);
},

/** Function to filter the API results with Repository or Workflow Name. */
filterResults: () => {
if ( this.treeOptions.searchQuery.length === 0) {
this.treeOptions.filteredWorkflows = this.treeOptions.data;
} else {
const query = this.treeOptions.searchQuery.toLowerCase().trim();
this.treeOptions.filteredWorkflows = this.treeOptions.data.filter((workflow) =>
(workflow.configuration_script_source && workflow.configuration_script_source.name
? workflow.configuration_script_source.name.toLowerCase().includes(query)
: false) ||
(workflow.name
? workflow.name.toLowerCase().includes(query)
: false)
);
}
},

/** Function to clear the search text and reset the list. */
clearSearchQuery: () => {
this.treeOptions.searchQuery = '';
this.treeOptions.filteredWorkflows = this.treeOptions.data;
}
};
}
Expand Down
37 changes: 28 additions & 9 deletions src/dialog-editor/components/tree-selector/tree-selector.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,18 +42,37 @@
</div>
<div ng-if="$ctrl.treeOptions.automationType==$ctrl.treeOptions.automationTypes.workflow">
<div ng-if="$ctrl.treeOptions.data">
<ul class="nav nav-list workflows_list_wrapper">
<li class="workflows_list_header">
<div class="nav nav-list workflows_list_wrapper">
<div class="list_search_wrapper">
<span class="pficon pficon-search"></span>
<input type="text" class="form-control"
ng-model="$ctrl.treeOptions.searchQuery"
placeholder="Search by Repository or Workflow Name"
ng-change="$ctrl.treeOptions.filterResults()"/>
<span class="pficon pficon-close"
ng-if="$ctrl.treeOptions.searchQuery"
title="Clear"
ng-click="$ctrl.treeOptions.clearSearchQuery()"></span>
</div>
<div class="workflows_list_header">
<div class="col-md-6">Repository</div>
<div class="col-md-6">Workflow Name</div>
</li>
<li class="workflow_item" ng-repeat="workflow in $ctrl.treeOptions.data">
<div class="workflow_item_row" ng-click="$ctrl.treeOptions.onSelect(workflow)">
<div class="col-md-6">{{workflow.configuration_script_source.name}}</div>
<div class="col-md-6">{{workflow.name}}</div>
</div>
<div class="workflow_list_content">
<div class="workflow_list_content_notification" ng-if="$ctrl.treeOptions.filteredWorkflows.length === 0">
<div class="dialog-editor-tab-notification info">
<i class="pficon pficon-info"></i>
No records found
</div>
</div>
</li>
</ul>
<div class="workflow_item" ng-repeat="workflow in $ctrl.treeOptions.filteredWorkflows">
<div class="workflow_item_row" ng-click="$ctrl.treeOptions.onSelect(workflow)">
<div class="col-md-6">{{workflow.configuration_script_source.name}}</div>
<div class="col-md-6">{{workflow.name}}</div>
</div>
</div>

</div>
</div>
</div>
</div>
Expand Down
72 changes: 57 additions & 15 deletions src/styles/dialog-editor-boxes.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,38 +190,80 @@ l.nav.nav-list.workflows {
flex-direction: column;
padding: 10px;

ul.workflows_list_wrapper {
.workflows_list_wrapper {
display: flex;
flex-direction: column;
border: 1px solid lightgray;

li.workflows_list_header {
.list_search_wrapper {
display: flex;
flex-direction: row;

span {
border: 0;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;

&.pficon-search {
color: gray;
}
&.pficon-close {
color: #000;
cursor: pointer;
}
}

input {
border: 0;
flex-grow: 1;
box-shadow: none;
height: 30px;
}
}

.workflows_list_header {
background: lightgray;
padding: 10px 0;
font-weight: bold;
}

li.workflow_item {
.workflow_list_content {
display: flex;
flex-grow: 1;
padding: 5px;
border-bottom: 1px solid lightgray;
overflow-y: auto;
max-height: 400px;
flex-direction: column;

&:last-child {
border-bottom: 0 !important;
.workflow_list_content_notification {
padding: 20px;
display: flex;
justify-content: center;
}

.workflow_item_row {
.workflow_item {
display: flex;
flex-grow: 1;
margin-left: -5px;
padding: 5px;
border-bottom: 1px solid lightgray;

&:last-child {
border-bottom: 0 !important;
}

.workflow_item_row {
display: flex;
flex-grow: 1;
margin-left: -5px;
}

&:hover {
background: #e4e5e6;
cursor: pointer;
}
}

&:hover {
background: #e4e5e6;
cursor: pointer;
}

}
}
}
Expand Down
13 changes: 11 additions & 2 deletions src/styles/ui-components.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,26 @@
.dialog-editor-tab-notification {
color: #363636;
font-weight: bold;
background: #ffe6e7;
border: 1px solid #cd0000;
padding: 10px;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 10px;
flex-grow: 1;

i {
font-size: 16px;
}

&.error {
background: #ffe6e7;
border: 1px solid #cd0000;
}

&.info {
background: lightgray;
border: 1px solid gray;
}
}

.dialog-editor-tab-list {
Expand Down