mirror of
https://github.com/portainer/portainer.git
synced 2025-08-02 20:35:25 +02:00
feat(app): Prevent web editor related views from being accidentally closed (#4715)
* feat(app): when leaving a view with unsaved changed, a modal prompt the user with a confirmation message feat(app): when leaving a view with unsaved changes, a modal prompt the user with a confirmation message * feat(app/web-editor): fix the modal behaviour when editing a stack details * feat(app/web-editor): add a reusable function confirmWebEditorDiscard in modal service * feat(docker/stack): fix missing dependency
This commit is contained in:
parent
d0d38990c7
commit
a7ed6222b0
25 changed files with 271 additions and 15 deletions
|
@ -5,9 +5,11 @@ import angular from 'angular';
|
|||
|
||||
class CreateConfigController {
|
||||
/* @ngInject */
|
||||
constructor($async, $state, $transition$, Notifications, ConfigService, Authentication, FormValidator, ResourceControlService) {
|
||||
constructor($async, $state, $transition$, $window, ModalService, Notifications, ConfigService, Authentication, FormValidator, ResourceControlService) {
|
||||
this.$state = $state;
|
||||
this.$transition$ = $transition$;
|
||||
this.$window = $window;
|
||||
this.ModalService = ModalService;
|
||||
this.Notifications = Notifications;
|
||||
this.ConfigService = ConfigService;
|
||||
this.Authentication = Authentication;
|
||||
|
@ -24,6 +26,7 @@ class CreateConfigController {
|
|||
|
||||
this.state = {
|
||||
formValidationError: '',
|
||||
isEditorDirty: false,
|
||||
};
|
||||
|
||||
this.editorUpdate = this.editorUpdate.bind(this);
|
||||
|
@ -31,6 +34,12 @@ class CreateConfigController {
|
|||
}
|
||||
|
||||
async $onInit() {
|
||||
this.$window.onbeforeunload = () => {
|
||||
if (this.formValues.displayCodeEditor && this.formValues.ConfigContent && this.state.isEditorDirty) {
|
||||
return '';
|
||||
}
|
||||
};
|
||||
|
||||
if (!this.$transition$.params().id) {
|
||||
this.formValues.displayCodeEditor = true;
|
||||
return;
|
||||
|
@ -53,6 +62,12 @@ class CreateConfigController {
|
|||
}
|
||||
}
|
||||
|
||||
async uiCanExit() {
|
||||
if (this.formValues.displayCodeEditor && this.formValues.ConfigContent && this.state.isEditorDirty) {
|
||||
return this.ModalService.confirmWebEditorDiscard();
|
||||
}
|
||||
}
|
||||
|
||||
addLabel() {
|
||||
this.formValues.Labels.push({ name: '', value: '' });
|
||||
}
|
||||
|
@ -122,6 +137,7 @@ class CreateConfigController {
|
|||
const userId = userDetails.ID;
|
||||
await this.ResourceControlService.applyResourceControl(userId, accessControlData, resourceControl);
|
||||
this.Notifications.success('Config successfully created');
|
||||
this.state.isEditorDirty = false;
|
||||
this.$state.go('docker.configs', {}, { reload: true });
|
||||
} catch (err) {
|
||||
this.Notifications.error('Failure', err, 'Unable to create config');
|
||||
|
@ -130,6 +146,7 @@ class CreateConfigController {
|
|||
|
||||
editorUpdate(cm) {
|
||||
this.formValues.ConfigContent = cm.getValue();
|
||||
this.state.isEditorDirty = true;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -1,14 +1,16 @@
|
|||
angular.module('portainer.docker').controller('BuildImageController', [
|
||||
'$scope',
|
||||
'$state',
|
||||
'$window',
|
||||
'ModalService',
|
||||
'BuildService',
|
||||
'Notifications',
|
||||
'HttpRequestHelper',
|
||||
function ($scope, $state, BuildService, Notifications, HttpRequestHelper) {
|
||||
function ($scope, $window, ModalService, BuildService, Notifications, HttpRequestHelper) {
|
||||
$scope.state = {
|
||||
BuildType: 'editor',
|
||||
actionInProgress: false,
|
||||
activeTab: 0,
|
||||
isEditorDirty: false,
|
||||
};
|
||||
|
||||
$scope.formValues = {
|
||||
|
@ -20,6 +22,12 @@ angular.module('portainer.docker').controller('BuildImageController', [
|
|||
NodeName: null,
|
||||
};
|
||||
|
||||
$window.onbeforeunload = () => {
|
||||
if ($scope.state.BuildType === 'editor' && $scope.formValues.DockerFileContent && $scope.state.isEditorDirty) {
|
||||
return '';
|
||||
}
|
||||
};
|
||||
|
||||
$scope.addImageName = function () {
|
||||
$scope.formValues.ImageNames.push({ Name: '' });
|
||||
};
|
||||
|
@ -93,6 +101,13 @@ angular.module('portainer.docker').controller('BuildImageController', [
|
|||
|
||||
$scope.editorUpdate = function (cm) {
|
||||
$scope.formValues.DockerFileContent = cm.getValue();
|
||||
$scope.state.isEditorDirty = true;
|
||||
};
|
||||
|
||||
this.uiCanExit = async function () {
|
||||
if ($scope.state.BuildType === 'editor' && $scope.formValues.DockerFileContent && $scope.state.isEditorDirty) {
|
||||
return ModalService.confirmWebEditorDiscard();
|
||||
}
|
||||
};
|
||||
},
|
||||
]);
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue