1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-08-06 14:25:31 +02:00

refactor(app): convert tag-selector to react [EE-2983] (#6783)

This commit is contained in:
Chaim Lev-Ari 2022-05-29 09:14:14 +03:00 committed by GitHub
parent 75d854e6ad
commit d52417c14f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
29 changed files with 103 additions and 288 deletions

View file

@ -93,12 +93,9 @@
</div>
</div>
</div>
<div class="form-group">
<tag-selector ng-if="$ctrl.tags.length" tags="$ctrl.tags" model="$ctrl.model.TagIds"></tag-selector>
<div ng-if="$ctrl.tags && !$ctrl.tags.length" class="col-sm-12 small text-muted">
No tags available. Head over to the <a ui-sref="portainer.tags">Tags view</a> to add tags
</div>
</div>
<tag-selector ng-if="$ctrl.model.TagIds" value="$ctrl.model.TagIds" on-change="($ctrl.onChangeTags)"> </tag-selector>
<div class="col-sm-12 form-section-title"> Associated environments by tags </div>
<div class="col-sm-12 form-group">
<group-association-table

View file

@ -6,6 +6,7 @@ export class EdgeGroupFormController {
constructor(EndpointService, $async, $scope) {
this.EndpointService = EndpointService;
this.$async = $async;
this.$scope = $scope;
this.endpoints = {
state: {
@ -22,6 +23,7 @@ export class EdgeGroupFormController {
this.dissociateEndpoint = this.dissociateEndpoint.bind(this);
this.getDynamicEndpointsAsync = this.getDynamicEndpointsAsync.bind(this);
this.getDynamicEndpoints = this.getDynamicEndpoints.bind(this);
this.onChangeTags = this.onChangeTags.bind(this);
$scope.$watch(
() => this.model,
@ -34,6 +36,12 @@ export class EdgeGroupFormController {
);
}
onChangeTags(value) {
return this.$scope.$evalAsync(() => {
this.model.TagIds = value;
});
}
associateEndpoint(endpoint) {
if (!_.includes(this.model.Endpoints, endpoint.Id)) {
this.model.Endpoints = [...this.model.Endpoints, endpoint.Id];

View file

@ -8,7 +8,6 @@ angular.module('portainer.edge').component('edgeGroupForm', {
bindings: {
model: '<',
groups: '<',
tags: '<',
formActionLabel: '@',
formAction: '<',
actionInProgress: '<',

View file

@ -13,9 +13,7 @@
form-action-label="Add edge group"
form-action="$ctrl.createGroup"
groups="$ctrl.endpointGroups"
tags="$ctrl.tags"
model="$ctrl.model"
on-change-tags="($ctrl.onChangeTags)"
></edge-group-form>
</rd-widget-body>
</rd-widget>

View file

@ -1,9 +1,8 @@
export class CreateEdgeGroupController {
/* @ngInject */
constructor(EdgeGroupService, GroupService, TagService, Notifications, $state, $async) {
constructor(EdgeGroupService, GroupService, Notifications, $state, $async) {
this.EdgeGroupService = EdgeGroupService;
this.GroupService = GroupService;
this.TagService = TagService;
this.Notifications = Notifications;
this.$state = $state;
this.$async = $async;
@ -26,8 +25,8 @@ export class CreateEdgeGroupController {
}
async $onInit() {
const [tags, endpointGroups] = await Promise.all([this.TagService.tags(), this.GroupService.groups()]);
this.tags = tags;
const endpointGroups = await this.GroupService.groups();
this.endpointGroups = endpointGroups;
this.state.loaded = true;
}

View file

@ -14,7 +14,6 @@
form-action="$ctrl.updateGroup"
endpoints="$ctrl.endpoints"
groups="$ctrl.endpointGroups"
tags="$ctrl.tags"
model="$ctrl.model"
></edge-group-form>
</rd-widget-body>

View file

@ -1,9 +1,8 @@
export class EditEdgeGroupController {
/* @ngInject */
constructor(EdgeGroupService, GroupService, TagService, Notifications, $state, $async) {
constructor(EdgeGroupService, GroupService, Notifications, $state, $async) {
this.EdgeGroupService = EdgeGroupService;
this.GroupService = GroupService;
this.TagService = TagService;
this.Notifications = Notifications;
this.$state = $state;
this.$async = $async;
@ -18,13 +17,12 @@ export class EditEdgeGroupController {
}
async $onInit() {
const [tags, endpointGroups, group] = await Promise.all([this.TagService.tags(), this.GroupService.groups(), this.EdgeGroupService.group(this.$state.params.groupId)]);
const [endpointGroups, group] = await Promise.all([this.GroupService.groups(), this.EdgeGroupService.group(this.$state.params.groupId)]);
if (!group) {
this.Notifications.error('Failed to find edge group', {});
this.$state.go('edge.groups');
}
this.tags = tags;
this.endpointGroups = endpointGroups;
this.model = group;
this.state.loaded = true;