mirror of
https://github.com/portainer/portainer.git
synced 2025-08-09 15:55:23 +02:00
refactor(custom-templates): migrate list component to react [EE-6206] (#10440)
This commit is contained in:
Chaim Lev-Ari
GitHub
parent
14129632a3
commit
10c3ed42f0
9 changed files with 108 additions and 174 deletions
|
|
@ -1,46 +0,0 @@
|
|||
<div class="datatable">
|
||||
<rd-widget>
|
||||
<rd-widget-body classes="no-padding">
|
||||
<div class="toolBar vertical-center flex-wrap !gap-x-5 !gap-y-1">
|
||||
<div class="toolBarTitle vertical-center">
|
||||
<div class="widget-icon space-right">
|
||||
<pr-icon icon="$ctrl.titleIcon"></pr-icon>
|
||||
</div>
|
||||
Custom Templates
|
||||
</div>
|
||||
<div class="searchBar vertical-center !mr-0">
|
||||
<pr-icon icon="'search'" class-name="'searchIcon'"></pr-icon>
|
||||
<input
|
||||
type="text"
|
||||
class="searchInput"
|
||||
ng-model="$ctrl.state.textFilter"
|
||||
ng-change="$ctrl.onTextFilterChange()"
|
||||
placeholder="Search for a template..."
|
||||
auto-focus
|
||||
ng-model-options="{ debounce: 300 }"
|
||||
/>
|
||||
</div>
|
||||
<div class="actionBar">
|
||||
<button type="button" class="btn btn-sm btn-primary" ui-state="$ctrl.createPath">
|
||||
<pr-icon icon="'plus'"></pr-icon>
|
||||
Add Custom Template
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="blocklist gap-y-2 !px-[20px] !pb-[20px]">
|
||||
<custom-templates-list-item
|
||||
ng-repeat="template in $ctrl.templates | filter:$ctrl.state.textFilter"
|
||||
template="template"
|
||||
on-select="($ctrl.onSelectClick)"
|
||||
on-delete="($ctrl.onDeleteClick)"
|
||||
is-selected="$ctrl.isSelected(template)"
|
||||
>
|
||||
</custom-templates-list-item>
|
||||
|
||||
<div ng-if="!$ctrl.templates" class="text-muted text-center"> Loading... </div>
|
||||
<div ng-if="($ctrl.templates | filter: $ctrl.state.textFilter).length === 0" class="text-muted text-center"> No templates available. </div>
|
||||
</div>
|
||||
</rd-widget-body>
|
||||
</rd-widget>
|
||||
</div>
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
const CUSTOM_TEMPLATES_TYPES = {
|
||||
SWARM: 1,
|
||||
STANDALONE: 2,
|
||||
KUBERNETES: 3,
|
||||
};
|
||||
|
||||
angular.module('portainer.docker').controller('CustomTemplatesListController', function ($scope, $controller, DatatableService) {
|
||||
angular.extend(this, $controller('GenericDatatableController', { $scope: $scope }));
|
||||
|
||||
this.typeLabel = typeLabel;
|
||||
this.$onInit = $onInit;
|
||||
|
||||
function typeLabel(type) {
|
||||
switch (type) {
|
||||
case CUSTOM_TEMPLATES_TYPES.SWARM:
|
||||
return 'swarm';
|
||||
case CUSTOM_TEMPLATES_TYPES.KUBERNETES:
|
||||
return 'manifest';
|
||||
case CUSTOM_TEMPLATES_TYPES.STANDALONE:
|
||||
default:
|
||||
return 'standalone';
|
||||
}
|
||||
}
|
||||
|
||||
function $onInit() {
|
||||
this.setDefaults();
|
||||
this.prepareTableFromDataset();
|
||||
|
||||
this.state.orderBy = this.orderBy;
|
||||
var storedOrder = DatatableService.getDataTableOrder(this.tableKey);
|
||||
if (storedOrder !== null) {
|
||||
this.state.reverseOrder = storedOrder.reverse;
|
||||
this.state.orderBy = storedOrder.orderBy;
|
||||
}
|
||||
|
||||
var textFilter = DatatableService.getDataTableTextFilters(this.tableKey);
|
||||
if (textFilter !== null) {
|
||||
this.state.textFilter = textFilter;
|
||||
this.onTextFilterChange();
|
||||
}
|
||||
|
||||
var storedFilters = DatatableService.getDataTableFilters(this.tableKey);
|
||||
if (storedFilters !== null) {
|
||||
this.filters = storedFilters;
|
||||
}
|
||||
if (this.filters && this.filters.state) {
|
||||
this.filters.state.open = false;
|
||||
}
|
||||
|
||||
var storedSettings = DatatableService.getDataTableSettings(this.tableKey);
|
||||
if (storedSettings !== null) {
|
||||
this.settings = storedSettings;
|
||||
this.settings.open = false;
|
||||
}
|
||||
this.onSettingsRepeaterChange();
|
||||
}
|
||||
});
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
import angular from 'angular';
|
||||
|
||||
angular.module('portainer.app').component('customTemplatesList', {
|
||||
templateUrl: './customTemplatesList.html',
|
||||
controller: 'CustomTemplatesListController',
|
||||
bindings: {
|
||||
titleText: '@',
|
||||
titleIcon: '@',
|
||||
templates: '<',
|
||||
tableKey: '@',
|
||||
onSelectClick: '<',
|
||||
showSwarmStacks: '<',
|
||||
onDeleteClick: '<',
|
||||
isEditAllowed: '<',
|
||||
createPath: '@',
|
||||
editPath: '@',
|
||||
isSelected: '<',
|
||||
},
|
||||
});
|
||||
|
|
@ -4,7 +4,6 @@ import { r2a } from '@/react-tools/react2angular';
|
|||
import { CustomTemplatesVariablesDefinitionField } from '@/react/portainer/custom-templates/components/CustomTemplatesVariablesDefinitionField';
|
||||
import { CustomTemplatesVariablesField } from '@/react/portainer/custom-templates/components/CustomTemplatesVariablesField';
|
||||
import { withControlledInput } from '@/react-tools/withControlledInput';
|
||||
import { CustomTemplatesListItem } from '@/react/portainer/templates/custom-templates/ListView/CustomTemplatesListItem';
|
||||
import { withCurrentUser } from '@/react-tools/withCurrentUser';
|
||||
import { withUIRouter } from '@/react-tools/withUIRouter';
|
||||
import {
|
||||
|
|
@ -15,6 +14,7 @@ import { PlatformField } from '@/react/portainer/custom-templates/components/Pla
|
|||
import { TemplateTypeSelector } from '@/react/portainer/custom-templates/components/TemplateTypeSelector';
|
||||
import { withFormValidation } from '@/react-tools/withFormValidation';
|
||||
import { AppTemplatesList } from '@/react/portainer/templates/app-templates/AppTemplatesList';
|
||||
import { CustomTemplatesList } from '@/react/portainer/templates/custom-templates/ListView/CustomTemplatesList';
|
||||
|
||||
import { VariablesFieldAngular } from './variables-field';
|
||||
|
||||
|
|
@ -39,15 +39,14 @@ export const ngModule = angular
|
|||
])
|
||||
)
|
||||
.component(
|
||||
'customTemplatesListItem',
|
||||
r2a(withUIRouter(withCurrentUser(CustomTemplatesListItem)), [
|
||||
'customTemplatesList',
|
||||
r2a(withUIRouter(withCurrentUser(CustomTemplatesList)), [
|
||||
'onDelete',
|
||||
'onSelect',
|
||||
'template',
|
||||
'isSelected',
|
||||
'templates',
|
||||
'selectedId',
|
||||
])
|
||||
)
|
||||
|
||||
.component(
|
||||
'customTemplatesPlatformSelector',
|
||||
r2a(PlatformField, ['onChange', 'value'])
|
||||
|
|
|
|||
|
|
@ -62,20 +62,10 @@
|
|||
</advanced-form>
|
||||
</stack-from-template-form>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<custom-templates-list
|
||||
ng-if="$ctrl.templates"
|
||||
title-text="Templates"
|
||||
title-icon="edit"
|
||||
templates="$ctrl.templates"
|
||||
table-key="customTemplates"
|
||||
create-path="docker.templates.custom.new"
|
||||
edit-path="docker.templates.custom.edit"
|
||||
is-edit-allowed="$ctrl.isEditAllowed"
|
||||
on-select-click="($ctrl.selectTemplate)"
|
||||
on-delete-click="($ctrl.confirmDelete)"
|
||||
is-selected="($ctrl.isSelected)"
|
||||
></custom-templates-list>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<custom-templates-list
|
||||
templates="$ctrl.templates"
|
||||
on-select="($ctrl.selectTemplate)"
|
||||
on-delete="($ctrl.confirmDelete)"
|
||||
selected-id="$ctrl.state.selectedTemplate.Id"
|
||||
></custom-templates-list>
|
||||
|
|
|
|||
|
|
@ -82,11 +82,6 @@ class CustomTemplatesViewController {
|
|||
this.isEditAllowed = this.isEditAllowed.bind(this);
|
||||
this.onChangeFormValues = this.onChangeFormValues.bind(this);
|
||||
this.onChangeTemplateVariables = this.onChangeTemplateVariables.bind(this);
|
||||
this.isSelected = this.isSelected.bind(this);
|
||||
}
|
||||
|
||||
isSelected(templateId) {
|
||||
return this.state.selectedTemplate && this.state.selectedTemplate.Id === templateId;
|
||||
}
|
||||
|
||||
isEditAllowed(template) {
|
||||
|
|
@ -260,7 +255,7 @@ class CustomTemplatesViewController {
|
|||
var template = _.find(this.templates, { Id: templateId });
|
||||
await this.CustomTemplateService.remove(templateId);
|
||||
this.Notifications.success('Template successfully deleted', template && template.Title);
|
||||
_.remove(this.templates, { Id: templateId });
|
||||
this.templates = this.templates.filter((template) => template.Id !== templateId);
|
||||
} catch (err) {
|
||||
this.Notifications.error('Failure', err, 'Failed to delete template');
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue