Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-07-24 15:59:41 +02:00
Code Issues Releases Activity

refactor(ui): replace ng selectors with react-select [EE-3608] (#7203)

Browse source 
Co-authored-by: LP B <xAt0mZ@users.noreply.github.com>
This commit is contained in:
Chaim Lev-Ari 2022-09-21 10:10:58 +03:00 • committed by GitHub
parent 1e21961e6a
commit ceaee4e175
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
66 changed files with 1188 additions and 625 deletions
Download patch file Download diff file Expand all files Collapse all files

28
app/kubernetes/components/helm/helm-templates/helm-templates-list/helm-templates-list.controller.js
View file

@ -1,12 +1,20 @@
export default class HelmTemplatesListController {
/* @ngInject */
constructor($async, DatatableService, HelmService, Notifications) {
constructor($async, $scope, DatatableService, HelmService, Notifications) {
this.$async = $async;
this.$scope = $scope;
this.DatatableService = DatatableService;
this.HelmService = HelmService;
this.Notifications = Notifications;
this.state = {
textFilter: '',
selectedCategory: '',
categories: [],
};
this.updateCategories = this.updateCategories.bind(this);
this.onCategoryChange = this.onCategoryChange.bind(this);
}
async updateCategories() {
@ -16,18 +24,20 @@ export default class HelmTemplatesListController {
.filter((a) => a) // filter out undefined/nulls
.map((c) => c.category); // get annotation category
const availableCategories = [...new Set(annotationCategories)].sort(); // unique and sort
this.state.categories = availableCategories;
this.state.categories = availableCategories.map((cat) => ({ label: cat, value: cat }));
} catch (err) {
this.Notifications.error('Failure', err, 'Unable to retrieve helm charts categories');
}
}
onTextFilterChange() {
this.DatatableService.setDataTableTextFilters(this.tableKey, this.state.textFilter);
onCategoryChange(value) {
return this.$scope.$evalAsync(() => {
this.state.selectedCategory = value || '';
});
}
clearCategory() {
this.state.selectedCategory = '';
onTextFilterChange() {
this.DatatableService.setDataTableTextFilters(this.tableKey, this.state.textFilter);
}
$onChanges() {
@ -38,12 +48,6 @@ export default class HelmTemplatesListController {
$onInit() {
return this.$async(async () => {
this.state = {
textFilter: '',
selectedCategory: '',
categories: [],
};
const textFilter = this.DatatableService.getDataTableTextFilters(this.tableKey);
if (textFilter !== null) {
this.state.textFilter = textFilter;

23
app/kubernetes/components/helm/helm-templates/helm-templates-list/helm-templates-list.html
View file

@ -22,24 +22,21 @@
ng-model-options="{ debounce: 300 }"
/>
</div>
<div>
<ui-select ng-model="$ctrl.state.selectedCategory" theme="bootstrap" append-to-body="true">
<ui-select-match placeholder="Select a category">
<a class="btn btn-xs btn-link pull-right vertical-center" ng-click="$ctrl.clearCategory()">
<pr-icon icon="'x'" feather="true"></pr-icon>
</a>
<span class="vertical-center">{{ $select.selected }}</span>
</ui-select-match>
<ui-select-choices repeat="category in ($ctrl.state.categories | filter: $select.search)">
<span>{{ category }}</span>
</ui-select-choices>
</ui-select>
<div class="w-1/5">
<por-select
placeholder="'Select a category'"
value="$ctrl.state.selectedCategory"
options="$ctrl.state.categories"
on-change="($ctrl.onCategoryChange)"
is-clearable="true"
bind-to-body="true"
></por-select>
</div>
</div>
<div class="blocklist">
<helm-templates-list-item
ng-repeat="chart in $ctrl.charts | filter:$ctrl.state.textFilter | filter: $ctrl.state.selectedCategory "
ng-repeat="chart in $ctrl.charts | filter:$ctrl.state.textFilter | filter: $ctrl.state.selectedCategory"
model="chart"
type-label="helm"
on-select="($ctrl.selectAction)"