From 0926a81aa8682b9832d9950ce8523459b0fe5211 Mon Sep 17 00:00:00 2001 From: Alfiia Faizrakhmanova Date: Tue, 17 May 2022 13:47:36 +0300 Subject: [PATCH 1/3] fixed position for gene info buttons --- .../ngbFeatureInfoMain.component.js | 5 +- .../ngbFeatureInfoMain.controller.js | 58 +--------------- .../ngbFeatureInfoMain.scss | 11 --- .../ngbFeatureInfoMain.tpl.html | 25 ++----- .../ngbFeatureInfoPanel.controller.js | 68 ++++++++++++++++++- .../ngbFeatureInfoPanel.scss | 18 +++++ .../ngbFeatureInfoPanel.service.js | 9 +++ .../ngbFeatureInfoPanel.tpl.html | 27 ++++++-- 8 files changed, 123 insertions(+), 98 deletions(-) diff --git a/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMain/ngbFeatureInfoMain.component.js b/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMain/ngbFeatureInfoMain.component.js index fa370665a..699e2ed16 100644 --- a/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMain/ngbFeatureInfoMain.component.js +++ b/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMain/ngbFeatureInfoMain.component.js @@ -9,10 +9,7 @@ export default { read: '=', referenceId: '=', startIndex: '=', - infoForRead: '=', - fileId: '=?', - feature: '=?', - uuid: '=?', + infoForRead: '=' }, controller: controller.UID, template: require('./ngbFeatureInfoMain.tpl.html') diff --git a/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMain/ngbFeatureInfoMain.controller.js b/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMain/ngbFeatureInfoMain.controller.js index f21a138c6..c02fdcc6a 100644 --- a/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMain/ngbFeatureInfoMain.controller.js +++ b/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMain/ngbFeatureInfoMain.controller.js @@ -8,7 +8,6 @@ export default class ngbFeatureInfoMainController { sequenceProgress = 0; isSequenceLoading = true; error = null; - _isGeneralInfoOpen = true; constructor($scope, dispatcher, genomeDataService, bamDataService, $anchorScroll, ngbFeatureInfoPanelService) { Object.assign(this, {$scope, dispatcher, genomeDataService, bamDataService, $anchorScroll, ngbFeatureInfoPanelService}); @@ -26,7 +25,6 @@ export default class ngbFeatureInfoMainController { else { this.isReadLoadingis = false; } - this.dispatcher.on('feature:info:changes:cancel', this.onClickCancelBtn.bind(this)); } loadSequence() { @@ -106,10 +104,6 @@ export default class ngbFeatureInfoMainController { return this.ngbFeatureInfoPanelService.editMode; } - get disableSave () { - return this.ngbFeatureInfoPanelService.disableSaveButton(); - } - get saveError () { return this.ngbFeatureInfoPanelService.saveError; } @@ -119,56 +113,10 @@ export default class ngbFeatureInfoMainController { } get isGeneralInfoOpen () { - return this._isGeneralInfoOpen; + return this.ngbFeatureInfoPanelService.isGeneralInfoOpen; } set isGeneralInfoOpen (value) { - this._isGeneralInfoOpen = value; - } - - onClickEditBtn (event) { - if (event) { - event.stopPropagation(); - } - this.ngbFeatureInfoPanelService.editMode = true; - this.ngbFeatureInfoPanelService.newAttributes = this.properties; - } - - onClickSaveBtn (event) { - if (event) { - event.stopPropagation(); - } - this.ngbFeatureInfoPanelService.saveInProgress = true; - this.ngbFeatureInfoPanelService.saveNewAttributes(); - this.properties = [...this.ngbFeatureInfoPanelService.newAttributes - .map(newAttribute => ( - [ - newAttribute.name, - newAttribute.value, - newAttribute.attribute, - newAttribute.deleted || false - ] - ))]; - this.feature = this.ngbFeatureInfoPanelService.updateFeatureInfo(this.feature); - this.ngbFeatureInfoPanelService.sendNewGeneInfo(this.fileId, this.uuid, this.feature) - .then((success) => { - this.ngbFeatureInfoPanelService.saveInProgress = false; - const data = { trackId: this.fileId }; - if (success) { - this.onClickCancelBtn(); - this.dispatcher.emitSimpleEvent('feature:info:saved', data); - } - this.$scope.$apply(); - }); - } - - onClickCancelBtn (event) { - if (event) { - event.stopPropagation(); - } - this.ngbFeatureInfoPanelService.editMode = false; - this.ngbFeatureInfoPanelService.newAttributes = null; - this.ngbFeatureInfoPanelService.saveInProgress = false; - this.ngbFeatureInfoPanelService.saveError = null; + this.ngbFeatureInfoPanelService.isGeneralInfoOpen = value; } -} \ No newline at end of file +} diff --git a/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMain/ngbFeatureInfoMain.scss b/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMain/ngbFeatureInfoMain.scss index 1d367e6a3..7e68f18f8 100644 --- a/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMain/ngbFeatureInfoMain.scss +++ b/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMain/ngbFeatureInfoMain.scss @@ -43,14 +43,3 @@ ngb-feature-info-main{ .sequence-loading-error { color: red; } - -.general-information-buttons { - margin: 0px; - font-size: 14px; - color: #6699ff; - float: right; -} - -.cancel-button { - color: #494949; -} diff --git a/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMain/ngbFeatureInfoMain.tpl.html b/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMain/ngbFeatureInfoMain.tpl.html index e3dc299a1..1b1c897d1 100644 --- a/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMain/ngbFeatureInfoMain.tpl.html +++ b/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMain/ngbFeatureInfoMain.tpl.html @@ -1,27 +1,12 @@
- + General information - - Edit - - - Cancel - - - Save -
diff --git a/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfoPanel.controller.js b/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfoPanel.controller.js index 219d304b5..462ebd1cf 100644 --- a/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfoPanel.controller.js +++ b/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfoPanel.controller.js @@ -8,8 +8,13 @@ export default class ngbFeatureInfoPanelController { return this.$scope.$ctrl.geneId; } + get isGeneralInfoOpen () { + return this.ngbFeatureInfoPanelService.isGeneralInfoOpen; + } + constructor($scope, dispatcher, ngbFeatureInfoConstant, ngbFeatureInfoPanelService) { Object.assign(this, {$scope, dispatcher, ngbFeatureInfoConstant, ngbFeatureInfoPanelService}); + this.dispatcher.on('feature:info:changes:cancel', this.onClickCancelBtn.bind(this)); } selectTab(db){ @@ -17,8 +22,21 @@ export default class ngbFeatureInfoPanelController { } get editMode() { - this.$scope.$parent.editMode = this.ngbFeatureInfoPanelService.editMode; - return this.ngbFeatureInfoPanelService.editMode; + const editMode = this.ngbFeatureInfoPanelService.editMode; + this.$scope.$parent.editMode = editMode; + return editMode; + } + + set editMode(value) { + this.ngbFeatureInfoPanelService.editMode = value; + } + + get disableSave () { + return this.ngbFeatureInfoPanelService.disableSaveButton(); + } + + set saveInProgress(progress) { + this.ngbFeatureInfoPanelService.saveInProgress = progress; } selectHistoryTab () { @@ -32,4 +50,50 @@ export default class ngbFeatureInfoPanelController { return false; }); } + + onClickEditBtn (event) { + if (event) { + event.stopPropagation(); + } + this.editMode = true; + this.ngbFeatureInfoPanelService.newAttributes = this.properties; + } + + onClickSaveBtn (event) { + if (event) { + event.stopPropagation(); + } + this.saveInProgress = true; + this.ngbFeatureInfoPanelService.saveNewAttributes(); + this.properties = [...this.ngbFeatureInfoPanelService.newAttributes + .map(newAttribute => ( + [ + newAttribute.name, + newAttribute.value, + newAttribute.attribute, + newAttribute.deleted || false + ] + ))]; + this.feature = this.ngbFeatureInfoPanelService.updateFeatureInfo(this.feature); + this.ngbFeatureInfoPanelService.sendNewGeneInfo(this.fileId, this.uuid, this.feature) + .then((success) => { + this.saveInProgress = false; + const data = { trackId: this.fileId }; + if (success) { + this.onClickCancelBtn(); + this.dispatcher.emitSimpleEvent('feature:info:saved', data); + } + this.$scope.$apply(); + }); + } + + onClickCancelBtn (event) { + if (event) { + event.stopPropagation(); + } + this.editMode = false; + this.ngbFeatureInfoPanelService.newAttributes = null; + this.saveInProgress = false; + this.ngbFeatureInfoPanelService.saveError = null; + } } diff --git a/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfoPanel.scss b/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfoPanel.scss index 3feb79f1a..d49ec34b3 100644 --- a/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfoPanel.scss +++ b/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfoPanel.scss @@ -42,3 +42,21 @@ md-pagination-wrapper { font-size: 16px; } } + +.general-information-buttons { + position: fixed; + top: 55px; + right: 10px; + z-index: 2; +} + +.general-information-button { + margin: 0px; + font-size: 14px; + color: #6699ff; + float: right; +} + +.cancel-button { + color: #494949; +} diff --git a/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfoPanel.service.js b/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfoPanel.service.js index 323853e3a..11790bd7e 100644 --- a/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfoPanel.service.js +++ b/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfoPanel.service.js @@ -17,6 +17,15 @@ export default class ngbFeatureInfoPanelService { _historyData = []; _saveInProgress = false; getHistoryInProgress = false; + _isGeneralInfoOpen = true; + + get isGeneralInfoOpen () { + return this._isGeneralInfoOpen; + } + + set isGeneralInfoOpen (value) { + this._isGeneralInfoOpen = value; + } static instance(geneDataService) { return new ngbFeatureInfoPanelService(geneDataService); diff --git a/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfoPanel.tpl.html b/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfoPanel.tpl.html index 18a77a59f..702ef13f4 100644 --- a/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfoPanel.tpl.html +++ b/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfoPanel.tpl.html @@ -1,4 +1,25 @@
+
+ + Edit + + + Cancel + + + Save + +
{{$ctrl.panelTitle}} @@ -10,9 +31,6 @@ end-index="$ctrl.endIndex" read="$ctrl.read" name="$ctrl.name" - file-id="$ctrl.fileId" - feature="$ctrl.feature" - uuid="$ctrl.uuid" flex> @@ -55,9 +73,6 @@ end-index="$ctrl.endIndex" read="$ctrl.read" name="$ctrl.name" - file-id="$ctrl.fileId" - feature="$ctrl.feature" - uuid="$ctrl.uuid" info-for-read="$ctrl.infoForRead" flex> From 5cd46e378c77b76d2a2c83a00e8a70ce9e947625 Mon Sep 17 00:00:00 2001 From: Alfiia Faizrakhmanova Date: Wed, 18 May 2022 19:36:23 +0300 Subject: [PATCH 2/3] moved buttons to the footer --- .../components/ngbFeatureInfoPanel/index.js | 3 +- .../ngbFeatureInfoMain.component.js | 5 +- .../ngbFeatureInfoMain.controller.js | 58 +++++++++++++++-- .../ngbFeatureInfoMain.tpl.html | 8 +-- .../ngbFeatureInfoMainActions/index.js | 12 ++++ .../ngbFeatureInfoMainActions.component.js | 6 ++ .../ngbFeatureInfoMainActions.controller.js | 39 +++++++++++ .../ngbFeatureInfoMainActions.scss | 19 ++++++ .../ngbFeatureInfoMainActions.tpl.html | 28 ++++++++ .../ngbInfoRows/ngbInfoRows.controller.js | 5 +- .../ngbInfoRows/ngbInfoRows.scss | 8 --- .../ngbInfoRows/ngbInfoRows.tpl.html | 7 -- .../ngbFeatureInfoPanel.controller.js | 64 ++----------------- .../ngbFeatureInfoPanel.run.js | 5 ++ .../ngbFeatureInfoPanel.scss | 18 +----- .../ngbFeatureInfoPanel.service.js | 25 +++++--- .../ngbFeatureInfoPanel.tpl.html | 31 +++------ .../ngbFeatureInfoPanelDlg.tpl.html | 3 + 18 files changed, 210 insertions(+), 134 deletions(-) create mode 100644 client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMainActions/index.js create mode 100644 client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMainActions/ngbFeatureInfoMainActions.component.js create mode 100644 client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMainActions/ngbFeatureInfoMainActions.controller.js create mode 100644 client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMainActions/ngbFeatureInfoMainActions.scss create mode 100644 client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMainActions/ngbFeatureInfoMainActions.tpl.html diff --git a/client/client/app/components/ngbFeatureInfoPanel/index.js b/client/client/app/components/ngbFeatureInfoPanel/index.js index 48a52eac0..ea41ab18b 100644 --- a/client/client/app/components/ngbFeatureInfoPanel/index.js +++ b/client/client/app/components/ngbFeatureInfoPanel/index.js @@ -12,8 +12,9 @@ import ngbFeatureInfoPanelService from './ngbFeatureInfoPanel.service'; // Import app modules import dataServices from '../../../dataServices/angular-module'; import ngbFeatureInfo from './ngbFeatureInfo'; +import ngbFeatureInfoMainActions from './ngbFeatureInfo/ngbFeatureInfoMainActions'; -export default angular.module('ngbFeatureInfoPanel', [ dataServices, ngbFeatureInfo ]) +export default angular.module('ngbFeatureInfoPanel', [ dataServices, ngbFeatureInfo, ngbFeatureInfoMainActions ]) .service('ngbFeatureInfoPanelService', ngbFeatureInfoPanelService.instance) .component('ngbFeatureInfoPanel', component) .controller(controller.UID, controller) diff --git a/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMain/ngbFeatureInfoMain.component.js b/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMain/ngbFeatureInfoMain.component.js index 699e2ed16..fa370665a 100644 --- a/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMain/ngbFeatureInfoMain.component.js +++ b/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMain/ngbFeatureInfoMain.component.js @@ -9,7 +9,10 @@ export default { read: '=', referenceId: '=', startIndex: '=', - infoForRead: '=' + infoForRead: '=', + fileId: '=?', + feature: '=?', + uuid: '=?', }, controller: controller.UID, template: require('./ngbFeatureInfoMain.tpl.html') diff --git a/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMain/ngbFeatureInfoMain.controller.js b/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMain/ngbFeatureInfoMain.controller.js index c02fdcc6a..8024506f5 100644 --- a/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMain/ngbFeatureInfoMain.controller.js +++ b/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMain/ngbFeatureInfoMain.controller.js @@ -25,6 +25,10 @@ export default class ngbFeatureInfoMainController { else { this.isReadLoadingis = false; } + this.dispatcher.on('feature:info:edit:click', ::this.onClickEditBtn); + this.dispatcher.on('feature:info:cancel:click', ::this.onClickCancelBtn); + this.dispatcher.on('feature:info:save:click', ::this.onClickSaveBtn); + this.dispatcher.on('feature:info:add:click', ::this.scrollTo); } loadSequence() { @@ -100,16 +104,18 @@ export default class ngbFeatureInfoMainController { this.$anchorScroll(id); } - get editMode () { + get editMode() { return this.ngbFeatureInfoPanelService.editMode; } + set editMode(value) { + this.ngbFeatureInfoPanelService.editMode = value; + } get saveError () { return this.ngbFeatureInfoPanelService.saveError; } - - get saveInProgress () { - return this.ngbFeatureInfoPanelService.saveInProgress; + set saveError (value) { + this.ngbFeatureInfoPanelService.saveError = value; } get isGeneralInfoOpen () { @@ -119,4 +125,48 @@ export default class ngbFeatureInfoMainController { set isGeneralInfoOpen (value) { this.ngbFeatureInfoPanelService.isGeneralInfoOpen = value; } + + get saveInProgress() { + return this.ngbFeatureInfoPanelService.saveInProgress; + } + set saveInProgress(value) { + this.ngbFeatureInfoPanelService.saveInProgress = value; + } + + onClickEditBtn () { + this.editMode = true; + this.ngbFeatureInfoPanelService.newAttributes = this.properties; + } + + onClickCancelBtn () { + this.editMode = false; + this.ngbFeatureInfoPanelService.newAttributes = null; + this.saveInProgress = false; + this.saveError = null; + } + + onClickSaveBtn () { + this.saveInProgress = true; + this.ngbFeatureInfoPanelService.saveNewAttributes(); + this.properties = [...this.ngbFeatureInfoPanelService.newAttributes + .map(newAttribute => ( + [ + newAttribute.name, + newAttribute.value, + newAttribute.attribute, + newAttribute.deleted || false + ] + ))]; + this.feature = this.ngbFeatureInfoPanelService.updateFeatureInfo(this.feature); + this.ngbFeatureInfoPanelService.sendNewGeneInfo(this.fileId, this.uuid, this.feature) + .then((success) => { + this.saveInProgress = false; + const data = { trackId: this.fileId }; + if (success) { + this.dispatcher.emitSimpleEvent('feature:info:changes:cancel'); + this.dispatcher.emitSimpleEvent('feature:info:saved', data); + } + this.$scope.$apply(); + }); + } } diff --git a/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMain/ngbFeatureInfoMain.tpl.html b/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMain/ngbFeatureInfoMain.tpl.html index 1b1c897d1..13c334fd0 100644 --- a/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMain/ngbFeatureInfoMain.tpl.html +++ b/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMain/ngbFeatureInfoMain.tpl.html @@ -2,9 +2,8 @@ + ng-disabled="$ctrl.editMode"> General information @@ -16,7 +15,8 @@
- + +
@@ -43,7 +43,7 @@ - + Sequence diff --git a/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMainActions/index.js b/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMainActions/index.js new file mode 100644 index 000000000..0393b525f --- /dev/null +++ b/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMainActions/index.js @@ -0,0 +1,12 @@ +import angular from 'angular'; + +import './ngbFeatureInfoMainActions.scss'; + +import controller from './ngbFeatureInfoMainActions.controller'; +import component from './ngbFeatureInfoMainActions.component'; + + +export default angular.module('ngbFeatureInfoMainActions', []) + .component('ngbFeatureInfoMainActions', component) + .controller(controller.UID, controller) + .name; diff --git a/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMainActions/ngbFeatureInfoMainActions.component.js b/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMainActions/ngbFeatureInfoMainActions.component.js new file mode 100644 index 000000000..6932e1111 --- /dev/null +++ b/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMainActions/ngbFeatureInfoMainActions.component.js @@ -0,0 +1,6 @@ +import controller from './ngbFeatureInfoMainActions.controller'; + +export default { + controller: controller.UID, + template: require('./ngbFeatureInfoMainActions.tpl.html') +}; diff --git a/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMainActions/ngbFeatureInfoMainActions.controller.js b/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMainActions/ngbFeatureInfoMainActions.controller.js new file mode 100644 index 000000000..aeaa91562 --- /dev/null +++ b/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMainActions/ngbFeatureInfoMainActions.controller.js @@ -0,0 +1,39 @@ +export default class ngbFeatureInfoMainActionsController { + + static get UID() { + return 'ngbFeatureInfoMainActionsController'; + } + + constructor(dispatcher, ngbFeatureInfoPanelService) { + Object.assign(this, {dispatcher, ngbFeatureInfoPanelService}); + this.dispatcher.on('feature:info:changes:cancel', this.onClickCancelBtn.bind(this)); + } + + get editMode() { + return this.ngbFeatureInfoPanelService.editMode; + } + + get disableSave () { + return this.ngbFeatureInfoPanelService.disableSaveButton(); + } + + get saveInProgress () { + return this.ngbFeatureInfoPanelService.saveInProgress; + } + + onClickEditBtn () { + this.dispatcher.emitSimpleEvent('feature:info:edit:click'); + } + + onClickCancelBtn () { + this.dispatcher.emitSimpleEvent('feature:info:cancel:click'); + } + + onClickSaveBtn () { + this.dispatcher.emitSimpleEvent('feature:info:save:click'); + } + + onClickAddBtn () { + this.dispatcher.emitSimpleEvent('feature:info:add:click', 'sequencePanel'); + } +} diff --git a/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMainActions/ngbFeatureInfoMainActions.scss b/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMainActions/ngbFeatureInfoMainActions.scss new file mode 100644 index 000000000..1f728f4e0 --- /dev/null +++ b/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMainActions/ngbFeatureInfoMainActions.scss @@ -0,0 +1,19 @@ +ngb-feature-info-main-actions { + width: 100%; +} + +.buttons-container { + display: flex; + justify-content: space-between; +} + +.general-information-button { + margin: 0; + font-size: 14px; + color: #6699ff; + float: right; +} + +.cancel-button { + color: #494949; +} diff --git a/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMainActions/ngbFeatureInfoMainActions.tpl.html b/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMainActions/ngbFeatureInfoMainActions.tpl.html new file mode 100644 index 000000000..271d6a37f --- /dev/null +++ b/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMainActions/ngbFeatureInfoMainActions.tpl.html @@ -0,0 +1,28 @@ +
+
+ + Add + +
+
+ + Edit + + + Cancel + + + Save + +
+
\ No newline at end of file diff --git a/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbInfoRows/ngbInfoRows.controller.js b/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbInfoRows/ngbInfoRows.controller.js index 765f17b64..5ba890c9d 100644 --- a/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbInfoRows/ngbInfoRows.controller.js +++ b/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbInfoRows/ngbInfoRows.controller.js @@ -6,8 +6,9 @@ export default class ngbInfoRowsController { saveRequest = {}; - constructor($scope, ngbFeatureInfoPanelService, $compile) { - Object.assign(this, {$scope, ngbFeatureInfoPanelService, $compile}); + constructor($scope, dispatcher, ngbFeatureInfoPanelService, $compile) { + Object.assign(this, {$scope, dispatcher, ngbFeatureInfoPanelService, $compile}); + this.dispatcher.on('feature:info:add:click', ::this.onClickAddBtn); } get attributes () { diff --git a/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbInfoRows/ngbInfoRows.scss b/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbInfoRows/ngbInfoRows.scss index 0c9eb94cc..5cd22dc7c 100644 --- a/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbInfoRows/ngbInfoRows.scss +++ b/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbInfoRows/ngbInfoRows.scss @@ -73,14 +73,6 @@ ngb-info-rows { } } - .add-button { - font-size: 14px; - color: #679edb; - margin: 0; - padding: 0; - margin-top: 5px; - } - .property-name.editable { margin-left: 0; margin-right: 5px; diff --git a/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbInfoRows/ngbInfoRows.tpl.html b/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbInfoRows/ngbInfoRows.tpl.html index e6bfd77ee..45cd648c5 100644 --- a/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbInfoRows/ngbInfoRows.tpl.html +++ b/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbInfoRows/ngbInfoRows.tpl.html @@ -129,11 +129,4 @@
- - Add -
diff --git a/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfoPanel.controller.js b/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfoPanel.controller.js index 462ebd1cf..351d99aae 100644 --- a/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfoPanel.controller.js +++ b/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfoPanel.controller.js @@ -8,16 +8,13 @@ export default class ngbFeatureInfoPanelController { return this.$scope.$ctrl.geneId; } - get isGeneralInfoOpen () { - return this.ngbFeatureInfoPanelService.isGeneralInfoOpen; - } constructor($scope, dispatcher, ngbFeatureInfoConstant, ngbFeatureInfoPanelService) { Object.assign(this, {$scope, dispatcher, ngbFeatureInfoConstant, ngbFeatureInfoPanelService}); - this.dispatcher.on('feature:info:changes:cancel', this.onClickCancelBtn.bind(this)); } selectTab(db){ + this.ngbFeatureInfoPanelService.isMainTabSelected = false; this.dispatcher.emitGlobalEvent(`feature:info:select:${db}`, {db, featureId: this.geneId}); } @@ -27,19 +24,12 @@ export default class ngbFeatureInfoPanelController { return editMode; } - set editMode(value) { - this.ngbFeatureInfoPanelService.editMode = value; - } - - get disableSave () { - return this.ngbFeatureInfoPanelService.disableSaveButton(); - } - - set saveInProgress(progress) { - this.ngbFeatureInfoPanelService.saveInProgress = progress; + selectMainTab() { + this.ngbFeatureInfoPanelService.isMainTabSelected = true; } selectHistoryTab () { + this.ngbFeatureInfoPanelService.isMainTabSelected = false; this.ngbFeatureInfoPanelService.getHistoryInProgress = true; this.ngbFeatureInfoPanelService.getGeneInfoHistory(this.fileId, this.uuid) .then((success) => { @@ -50,50 +40,4 @@ export default class ngbFeatureInfoPanelController { return false; }); } - - onClickEditBtn (event) { - if (event) { - event.stopPropagation(); - } - this.editMode = true; - this.ngbFeatureInfoPanelService.newAttributes = this.properties; - } - - onClickSaveBtn (event) { - if (event) { - event.stopPropagation(); - } - this.saveInProgress = true; - this.ngbFeatureInfoPanelService.saveNewAttributes(); - this.properties = [...this.ngbFeatureInfoPanelService.newAttributes - .map(newAttribute => ( - [ - newAttribute.name, - newAttribute.value, - newAttribute.attribute, - newAttribute.deleted || false - ] - ))]; - this.feature = this.ngbFeatureInfoPanelService.updateFeatureInfo(this.feature); - this.ngbFeatureInfoPanelService.sendNewGeneInfo(this.fileId, this.uuid, this.feature) - .then((success) => { - this.saveInProgress = false; - const data = { trackId: this.fileId }; - if (success) { - this.onClickCancelBtn(); - this.dispatcher.emitSimpleEvent('feature:info:saved', data); - } - this.$scope.$apply(); - }); - } - - onClickCancelBtn (event) { - if (event) { - event.stopPropagation(); - } - this.editMode = false; - this.ngbFeatureInfoPanelService.newAttributes = null; - this.saveInProgress = false; - this.ngbFeatureInfoPanelService.saveError = null; - } } diff --git a/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfoPanel.run.js b/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfoPanel.run.js index 599aca814..596b1b68d 100644 --- a/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfoPanel.run.js +++ b/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfoPanel.run.js @@ -91,6 +91,11 @@ export default function run($mdDialog, dispatcher, ngbFeatureInfoPanelService, g } else { $scope.error = 'Network error'; } + $scope.showFooter = () => ( + ngbFeatureInfoPanelService.isMainTabSelected && + ngbFeatureInfoPanelService.isGeneralInfoOpen && + formattedResult.uuid + ); $scope.close = () => { if (ngbFeatureInfoPanelService.editMode && ngbFeatureInfoPanelService.unsavedChanges($scope.properties) diff --git a/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfoPanel.scss b/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfoPanel.scss index d49ec34b3..44db46a00 100644 --- a/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfoPanel.scss +++ b/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfoPanel.scss @@ -43,20 +43,6 @@ md-pagination-wrapper { } } -.general-information-buttons { - position: fixed; - top: 55px; - right: 10px; - z-index: 2; -} - -.general-information-button { - margin: 0px; - font-size: 14px; - color: #6699ff; - float: right; -} - -.cancel-button { - color: #494949; +.feature-info-main-actions { + padding-left: 0; } diff --git a/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfoPanel.service.js b/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfoPanel.service.js index 11790bd7e..1151989fa 100644 --- a/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfoPanel.service.js +++ b/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfoPanel.service.js @@ -18,14 +18,7 @@ export default class ngbFeatureInfoPanelService { _saveInProgress = false; getHistoryInProgress = false; _isGeneralInfoOpen = true; - - get isGeneralInfoOpen () { - return this._isGeneralInfoOpen; - } - - set isGeneralInfoOpen (value) { - this._isGeneralInfoOpen = value; - } + _isMainTabSelected; static instance(geneDataService) { return new ngbFeatureInfoPanelService(geneDataService); @@ -35,6 +28,14 @@ export default class ngbFeatureInfoPanelService { Object.assign(this, {geneDataService}); } + get isGeneralInfoOpen () { + return this._isGeneralInfoOpen; + } + + set isGeneralInfoOpen (value) { + this._isGeneralInfoOpen = value; + } + get editMode() { return this._editMode; } @@ -97,6 +98,14 @@ export default class ngbFeatureInfoPanelService { this._saveInProgress = progress; } + get isMainTabSelected() { + return this._isMainTabSelected; + } + + set isMainTabSelected(value) { + this._isMainTabSelected = value; + } + removeAttribute(property) { const attributes = this.attributes; const index = attributes.indexOf(property); diff --git a/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfoPanel.tpl.html b/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfoPanel.tpl.html index 702ef13f4..ce0c6a8a2 100644 --- a/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfoPanel.tpl.html +++ b/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfoPanel.tpl.html @@ -1,27 +1,6 @@
-
- - Edit - - - Cancel - - - Save - -
- + {{$ctrl.panelTitle}} @@ -63,7 +45,7 @@ - + {{$ctrl.panelTitle}} diff --git a/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfoPanelDlg.tpl.html b/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfoPanelDlg.tpl.html index 7e4ecf598..c641e6324 100644 --- a/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfoPanelDlg.tpl.html +++ b/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfoPanelDlg.tpl.html @@ -35,4 +35,7 @@

Feature info

+ + + From 8735d21d77022e3d9aea50a002a94736a2d57dd6 Mon Sep 17 00:00:00 2001 From: Alfiia Faizrakhmanova Date: Tue, 24 May 2022 18:08:20 +0300 Subject: [PATCH 3/3] unsubscribe listeners in gene info modal menu --- .../ngbFeatureInfoMain.controller.js | 18 ++++++++++++++---- .../ngbFeatureInfoMainActions.controller.js | 10 +++++++--- .../ngbInfoRows/ngbInfoRows.controller.js | 6 +++++- 3 files changed, 26 insertions(+), 8 deletions(-) diff --git a/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMain/ngbFeatureInfoMain.controller.js b/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMain/ngbFeatureInfoMain.controller.js index 8024506f5..7d7a70a91 100644 --- a/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMain/ngbFeatureInfoMain.controller.js +++ b/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMain/ngbFeatureInfoMain.controller.js @@ -25,10 +25,20 @@ export default class ngbFeatureInfoMainController { else { this.isReadLoadingis = false; } - this.dispatcher.on('feature:info:edit:click', ::this.onClickEditBtn); - this.dispatcher.on('feature:info:cancel:click', ::this.onClickCancelBtn); - this.dispatcher.on('feature:info:save:click', ::this.onClickSaveBtn); - this.dispatcher.on('feature:info:add:click', ::this.scrollTo); + const onClickEditBtn = () => this.onClickEditBtn(); + const onClickCancelBtn = () => this.onClickCancelBtn(); + const onClickSaveBtn = () => this.onClickSaveBtn(); + const scrollTo = (id) => this.scrollTo(id); + this.dispatcher.on('feature:info:edit:click', onClickEditBtn); + this.dispatcher.on('feature:info:cancel:click', onClickCancelBtn); + this.dispatcher.on('feature:info:save:click', onClickSaveBtn); + this.dispatcher.on('feature:info:add:click', scrollTo); + $scope.$on('$destroy', () => { + dispatcher.removeListener('feature:info:edit:click', onClickEditBtn); + dispatcher.removeListener('feature:info:cancel:click', onClickCancelBtn); + dispatcher.removeListener('feature:info:save:click', onClickSaveBtn); + dispatcher.removeListener('feature:info:add:click', scrollTo); + }); } loadSequence() { diff --git a/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMainActions/ngbFeatureInfoMainActions.controller.js b/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMainActions/ngbFeatureInfoMainActions.controller.js index aeaa91562..1b4e8ee96 100644 --- a/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMainActions/ngbFeatureInfoMainActions.controller.js +++ b/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbFeatureInfoMainActions/ngbFeatureInfoMainActions.controller.js @@ -4,9 +4,13 @@ export default class ngbFeatureInfoMainActionsController { return 'ngbFeatureInfoMainActionsController'; } - constructor(dispatcher, ngbFeatureInfoPanelService) { - Object.assign(this, {dispatcher, ngbFeatureInfoPanelService}); - this.dispatcher.on('feature:info:changes:cancel', this.onClickCancelBtn.bind(this)); + constructor($scope, dispatcher, ngbFeatureInfoPanelService) { + Object.assign(this, {$scope, dispatcher, ngbFeatureInfoPanelService}); + const onClickCancelBtn = () => this.onClickCancelBtn(); + this.dispatcher.on('feature:info:changes:cancel', onClickCancelBtn); + $scope.$on('$destroy', () => { + dispatcher.removeListener('feature:info:changes:cancel', onClickCancelBtn); + }); } get editMode() { diff --git a/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbInfoRows/ngbInfoRows.controller.js b/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbInfoRows/ngbInfoRows.controller.js index 5ba890c9d..e96aaa6db 100644 --- a/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbInfoRows/ngbInfoRows.controller.js +++ b/client/client/app/components/ngbFeatureInfoPanel/ngbFeatureInfo/ngbInfoRows/ngbInfoRows.controller.js @@ -8,7 +8,11 @@ export default class ngbInfoRowsController { constructor($scope, dispatcher, ngbFeatureInfoPanelService, $compile) { Object.assign(this, {$scope, dispatcher, ngbFeatureInfoPanelService, $compile}); - this.dispatcher.on('feature:info:add:click', ::this.onClickAddBtn); + const onClickAddBtn = () => this.onClickAddBtn(); + this.dispatcher.on('feature:info:add:click', onClickAddBtn); + $scope.$on('$destroy', () => { + dispatcher.removeListener('feature:info:add:click', onClickAddBtn); + }); } get attributes () {