mirror of
https://github.com/portainer/portainer.git
synced 2025-08-09 07:45:22 +02:00
refactor(custom-templates): migrate common-fields to react [EE-6207] (#10445)
This commit is contained in:
Chaim Lev-Ari
GitHub
parent
1ad9488ca7
commit
6b5c24faff
17 changed files with 292 additions and 155 deletions
|
|
@ -1,87 +0,0 @@
|
|||
<ng-form name="commonCustomTemplateForm">
|
||||
<!-- title-input -->
|
||||
<div class="form-group mb-0">
|
||||
<label for="template_title" class="col-sm-3 col-lg-2 control-label required text-left"> Title </label>
|
||||
<div class="col-sm-8">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
ng-model="$ctrl.formValues.Title"
|
||||
ng-pattern="$ctrl.nameRegex"
|
||||
id="template_title"
|
||||
name="template_title"
|
||||
placeholder="e.g. mytemplate"
|
||||
auto-focus
|
||||
required
|
||||
/>
|
||||
<span class="help-block">
|
||||
<div ng-show="commonCustomTemplateForm.template_title.$invalid">
|
||||
<div class="small text-warning mt-2">
|
||||
<div ng-messages="commonCustomTemplateForm.template_title.$error">
|
||||
<p class="vertical-center" ng-message="required"> <pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> Title is required. </p>
|
||||
<p class="vertical-center" ng-message="pattern">
|
||||
<pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon>
|
||||
{{ $ctrl.nameRegexError }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- !title-input -->
|
||||
|
||||
<!-- description-input -->
|
||||
<div class="form-group mb-0">
|
||||
<label for="description" class="col-sm-3 col-lg-2 control-label required text-left">Description</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" class="form-control" id="description" ng-model="$ctrl.formValues.Description" name="description" required />
|
||||
<span class="help-block">
|
||||
<div class="small text-warning mt-2">
|
||||
<div ng-show="commonCustomTemplateForm.description.$invalid">
|
||||
<div ng-messages="commonCustomTemplateForm.description.$error">
|
||||
<p class="vertical-center" ng-message="required"> <pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> Description is required.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- !description-input -->
|
||||
|
||||
<!-- note-input -->
|
||||
<div class="form-group">
|
||||
<label for="note" class="col-sm-3 col-lg-2 control-label text-left">Note</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" class="form-control" id="note" ng-model="$ctrl.formValues.Note" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- !note-input -->
|
||||
|
||||
<!-- icon-url-input -->
|
||||
<div class="form-group">
|
||||
<label for="icon-url" class="col-sm-3 col-lg-2 control-label text-left">Icon URL</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" class="form-control" id="icon-url" ng-model="$ctrl.formValues.Logo" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- !icon-url-input -->
|
||||
|
||||
<!-- platform-input -->
|
||||
<div ng-if="$ctrl.showPlatformField" class="form-group">
|
||||
<label for="platform" class="col-sm-3 col-lg-2 control-label text-left">Platform</label>
|
||||
<div class="col-sm-8">
|
||||
<select class="form-control" ng-model="$ctrl.formValues.Platform" ng-options="+(opt.value) as opt.label for opt in $ctrl.platformTypes"> </select>
|
||||
</div>
|
||||
</div>
|
||||
<!-- !platform-input -->
|
||||
|
||||
<!-- platform-input -->
|
||||
<div ng-if="$ctrl.showTypeField" class="form-group">
|
||||
<label for="platform" class="col-sm-3 col-lg-2 control-label text-left">Type</label>
|
||||
<div class="col-sm-8">
|
||||
<select class="form-control" ng-model="$ctrl.formValues.Type" ng-options="+(opt.value) as opt.label for opt in $ctrl.templateTypes"> </select>
|
||||
</div>
|
||||
</div>
|
||||
<!-- !platform-input -->
|
||||
</ng-form>
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
class CustomTemplateCommonFieldsController {
|
||||
/* @ngInject */
|
||||
constructor() {
|
||||
this.platformTypes = [
|
||||
{ label: 'Linux', value: 1 },
|
||||
{ label: 'Windows', value: 2 },
|
||||
];
|
||||
|
||||
this.templateTypes = [
|
||||
{ label: 'Swarm', value: 1 },
|
||||
{ label: 'Standalone', value: 2 },
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
export default CustomTemplateCommonFieldsController;
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
import CustomTemplateCommonFieldsController from './customTemplateCommonFieldsController.js';
|
||||
|
||||
angular.module('portainer.app').component('customTemplateCommonFields', {
|
||||
templateUrl: './customTemplateCommonFields.html',
|
||||
controller: CustomTemplateCommonFieldsController,
|
||||
bindings: {
|
||||
formValues: '=',
|
||||
showPlatformField: '<',
|
||||
showTypeField: '<',
|
||||
nameRegex: '<',
|
||||
nameRegexError: '<',
|
||||
},
|
||||
});
|
||||
|
|
@ -8,10 +8,17 @@ import { CustomTemplatesListItem } from '@/react/portainer/templates/custom-temp
|
|||
import { withCurrentUser } from '@/react-tools/withCurrentUser';
|
||||
import { withUIRouter } from '@/react-tools/withUIRouter';
|
||||
import { AppTemplatesListItem } from '@/react/portainer/templates/app-templates/AppTemplatesListItem';
|
||||
import {
|
||||
CommonFields,
|
||||
validation as commonFieldsValidation,
|
||||
} from '@/react/portainer/custom-templates/components/CommonFields';
|
||||
import { PlatformField } from '@/react/portainer/custom-templates/components/PlatformSelector';
|
||||
import { TemplateTypeSelector } from '@/react/portainer/custom-templates/components/TemplateTypeSelector';
|
||||
import { withFormValidation } from '@/react-tools/withFormValidation';
|
||||
|
||||
import { VariablesFieldAngular } from './variables-field';
|
||||
|
||||
export const customTemplatesModule = angular
|
||||
export const ngModule = angular
|
||||
.module('portainer.app.react.components.custom-templates', [])
|
||||
.component(
|
||||
'customTemplatesVariablesFieldReact',
|
||||
|
|
@ -48,4 +55,22 @@ export const customTemplatesModule = angular
|
|||
'isSelected',
|
||||
'onDuplicate',
|
||||
])
|
||||
).name;
|
||||
)
|
||||
.component(
|
||||
'customTemplatesPlatformSelector',
|
||||
r2a(PlatformField, ['onChange', 'value'])
|
||||
)
|
||||
.component(
|
||||
'customTemplatesTypeSelector',
|
||||
r2a(TemplateTypeSelector, ['onChange', 'value'])
|
||||
);
|
||||
|
||||
withFormValidation(
|
||||
ngModule,
|
||||
withControlledInput(CommonFields, { values: 'onChange' }),
|
||||
'customTemplatesCommonFields',
|
||||
[],
|
||||
commonFieldsValidation
|
||||
);
|
||||
|
||||
export const customTemplatesModule = ngModule.name;
|
||||
|
|
|
|||
|
|
@ -5,13 +5,11 @@
|
|||
<rd-widget>
|
||||
<rd-widget-body>
|
||||
<form class="form-horizontal" name="customTemplateForm">
|
||||
<custom-template-common-fields
|
||||
form-values="$ctrl.formValues"
|
||||
show-platform-field="true"
|
||||
show-type-field="true"
|
||||
name-regex="$ctrl.state.templateNameRegex"
|
||||
name-regex-error="'This field must consist of lower-case alphanumeric characters, \'_\' or \'-\' (e.g. \'my-name\', or \'abc-123\').'"
|
||||
></custom-template-common-fields>
|
||||
<custom-templates-common-fields values="$ctrl.formValues" on-change="($ctrl.handleChange)" validation-data="$ctrl.validationData"></custom-templates-common-fields>
|
||||
|
||||
<custom-templates-platform-selector value="$ctrl.formValues.Platform" on-change="($ctrl.onChangePlatform)"></custom-templates-platform-selector>
|
||||
|
||||
<custom-templates-type-selector value="$ctrl.formValues.Type" on-change="($ctrl.onChangeType)"></custom-templates-type-selector>
|
||||
|
||||
<!-- build-method -->
|
||||
<div ng-if="!$ctrl.state.fromStack">
|
||||
|
|
|
|||
|
|
@ -54,10 +54,16 @@ class CreateCustomTemplateViewController {
|
|||
fromStack: false,
|
||||
loading: true,
|
||||
isEditorDirty: false,
|
||||
templateNameRegex: TEMPLATE_NAME_VALIDATION_REGEX,
|
||||
isTemplateValid: true,
|
||||
};
|
||||
|
||||
this.validationData = {
|
||||
title: {
|
||||
pattern: TEMPLATE_NAME_VALIDATION_REGEX,
|
||||
error: "This field must consist of lower-case alphanumeric characters, '_' or '-' (e.g. 'my-name', or 'abc-123').",
|
||||
},
|
||||
};
|
||||
|
||||
this.templates = [];
|
||||
|
||||
this.createCustomTemplate = this.createCustomTemplate.bind(this);
|
||||
|
|
@ -71,12 +77,22 @@ class CreateCustomTemplateViewController {
|
|||
this.onChangeMethod = this.onChangeMethod.bind(this);
|
||||
this.onVariablesChange = this.onVariablesChange.bind(this);
|
||||
this.handleChange = this.handleChange.bind(this);
|
||||
this.onChangePlatform = this.onChangePlatform.bind(this);
|
||||
this.onChangeType = this.onChangeType.bind(this);
|
||||
}
|
||||
|
||||
onVariablesChange(value) {
|
||||
this.handleChange({ Variables: value });
|
||||
}
|
||||
|
||||
onChangePlatform(value) {
|
||||
this.handleChange({ Platform: value });
|
||||
}
|
||||
|
||||
onChangeType(value) {
|
||||
this.handleChange({ Type: value });
|
||||
}
|
||||
|
||||
handleChange(values) {
|
||||
return this.$async(async () => {
|
||||
this.formValues = {
|
||||
|
|
|
|||
|
|
@ -5,13 +5,11 @@
|
|||
<rd-widget>
|
||||
<rd-widget-body>
|
||||
<form class="form-horizontal" name="customTemplateForm">
|
||||
<custom-template-common-fields
|
||||
form-values="$ctrl.formValues"
|
||||
show-platform-field="true"
|
||||
show-type-field="true"
|
||||
name-regex="$ctrl.state.templateNameRegex"
|
||||
name-regex-error="'This field must consist of lower-case alphanumeric characters, \'_\' or \'-\' (e.g. \'my-name\', or \'abc-123\').'"
|
||||
></custom-template-common-fields>
|
||||
<custom-templates-common-fields values="$ctrl.formValues" on-change="($ctrl.handleChange)" validation-data="$ctrl.validationData"></custom-templates-common-fields>
|
||||
|
||||
<custom-templates-platform-selector value="$ctrl.formValues.Platform" on-change="($ctrl.onChangePlatform)"></custom-templates-platform-selector>
|
||||
|
||||
<custom-templates-type-selector value="$ctrl.formValues.Type" on-change="($ctrl.onChangeType)"></custom-templates-type-selector>
|
||||
|
||||
<git-form value="$ctrl.formValues" on-change="($ctrl.handleChange)" ng-if="$ctrl.formValues.GitConfig"></git-form>
|
||||
|
||||
|
|
|
|||
|
|
@ -18,7 +18,12 @@ class EditCustomTemplateViewController {
|
|||
this.formValues = {
|
||||
Variables: [],
|
||||
TLSSkipVerify: false,
|
||||
Title: '',
|
||||
Description: '',
|
||||
Note: '',
|
||||
Logo: '',
|
||||
};
|
||||
|
||||
this.state = {
|
||||
formValidationError: '',
|
||||
isEditorDirty: false,
|
||||
|
|
@ -27,8 +32,15 @@ class EditCustomTemplateViewController {
|
|||
templateLoadFailed: false,
|
||||
templatePreviewFailed: false,
|
||||
templatePreviewError: '',
|
||||
templateNameRegex: TEMPLATE_NAME_VALIDATION_REGEX,
|
||||
};
|
||||
|
||||
this.validationData = {
|
||||
title: {
|
||||
pattern: TEMPLATE_NAME_VALIDATION_REGEX,
|
||||
error: "This field must consist of lower-case alphanumeric characters, '_' or '-' (e.g. 'my-name', or 'abc-123').",
|
||||
},
|
||||
};
|
||||
|
||||
this.templates = [];
|
||||
|
||||
this.getTemplate = this.getTemplate.bind(this);
|
||||
|
|
@ -39,6 +51,16 @@ class EditCustomTemplateViewController {
|
|||
this.onVariablesChange = this.onVariablesChange.bind(this);
|
||||
this.handleChange = this.handleChange.bind(this);
|
||||
this.previewFileFromGitRepository = this.previewFileFromGitRepository.bind(this);
|
||||
this.onChangePlatform = this.onChangePlatform.bind(this);
|
||||
this.onChangeType = this.onChangeType.bind(this);
|
||||
}
|
||||
|
||||
onChangePlatform(value) {
|
||||
this.handleChange({ Platform: value });
|
||||
}
|
||||
|
||||
onChangeType(value) {
|
||||
this.handleChange({ Type: value });
|
||||
}
|
||||
|
||||
getTemplate() {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue