Fixed double trigger issue in modals.

altair-graphql · Jan 11, 2018 · 9ee4381 · 9ee4381
1 parent 3e8b4a2
commit 9ee4381
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 22 deletions.
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -16,6 +16,7 @@ import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 
+import { ClarityModule } from 'clarity-angular';
 import { SharedModule } from './shared/shared.module';
 
 import { reducer, metaReducers } from './reducers';
@@ -67,6 +68,7 @@ const providers = [
     FormsModule,
     HttpClientModule,
     SharedModule,
+    ClarityModule.forRoot(),
     ComponentModule,
     DocViewerModule,
     StoreModule.forRoot(reducer, { metaReducers }),

diff --git a/src/app/components/history-dialog/history-dialog.component.html b/src/app/components/history-dialog/history-dialog.component.html
@@ -1,4 +1,4 @@
-<clr-modal [clrModalOpen]="showDialog" (clrModalOpenChange)="toggleDialogChange.next()">
+<clr-modal [clrModalOpen]="showDialog" (clrModalOpenChange)="toggleDialogChange.next($event)">
   <h3 class="modal-title">
     <div class="app-dialog-header">
       <div class="app-dialog-title">{{ 'HISTORY_TEXT' | translate }}</div>
@@ -16,7 +16,7 @@ <h3 class="modal-title">
   </div>
   <div class="modal-footer">
     <div class="app-dialog-footer">
-      <button class="app-button active-primary right" (click)="toggleDialogChange.next()">{{ 'DONE_BUTTON' | translate }}</button>
+      <button class="app-button active-primary right" (click)="toggleDialogChange.next($event)">{{ 'DONE_BUTTON' | translate }}</button>
     </div>
   </div>
 </clr-modal>
diff --git a/src/app/components/index.ts b/src/app/components/index.ts
@@ -40,9 +40,9 @@ const COMPONENTS = [
       CodemirrorModule,
       PipesModule,
       SharedModule,
-      ClarityModule.forRoot()
+      ClarityModule
     ],
     declarations: COMPONENTS,
-    exports: [...COMPONENTS, ClarityModule ]
+    exports: [...COMPONENTS ]
 })
 export class ComponentModule {}
diff --git a/src/app/components/set-variable-dialog/set-variable-dialog.component.html b/src/app/components/set-variable-dialog/set-variable-dialog.component.html
@@ -1,4 +1,4 @@
-<clr-modal [clrModalOpen]="showVariableDialog" (clrModalOpenChange)="toggleVariableDialog.next()">
+<clr-modal [clrModalOpen]="showVariableDialog" (clrModalOpenChange)="toggleVariableDialog.next($event)">
   <h3 class="modal-title">
     <div class="app-dialog-header">
       <div class="app-dialog-title">{{ 'VARIABLES_TEXT' | translate }}</div>
@@ -18,7 +18,7 @@ <h3 class="modal-title">
   </div>
   <div class="modal-footer">
     <div class="app-dialog-footer">
-      <button class="app-button active-primary right" (click)="toggleVariableDialog.next()">{{ 'SAVE_BUTTON' | translate }}</button>
+      <button class="app-button active-primary right" (click)="toggleVariableDialog.next($event)">{{ 'SAVE_BUTTON' | translate }}</button>
     </div>
   </div>
 </clr-modal>
diff --git a/src/app/components/subscription-url-dialog/subscription-url-dialog.component.html b/src/app/components/subscription-url-dialog/subscription-url-dialog.component.html
@@ -1,4 +1,4 @@
-<clr-modal [clrModalOpen]="showDialog" (clrModalOpenChange)="toggleDialogChange.next()">
+<clr-modal [clrModalOpen]="showDialog" (clrModalOpenChange)="toggleDialogChange.next($event)">
   <h3 class="modal-title">
     <div class="app-dialog-header">
       <div class="app-dialog-title">{{ 'SUBSCRIPTION_URL_TEXT' | translate }}</div>
@@ -12,7 +12,7 @@ <h3 class="modal-title">
   </div>
   <div class="modal-footer">
     <div class="app-dialog-footer">
-      <button class="app-button active-primary right" (click)="toggleDialogChange.next()">{{ 'SAVE_BUTTON' | translate }}</button>
+      <button class="app-button active-primary right" (click)="toggleDialogChange.next($event)">{{ 'SAVE_BUTTON' | translate }}</button>
     </div>
   </div>
 </clr-modal>
diff --git a/src/app/containers/window/window.component.html b/src/app/containers/window/window.component.html
@@ -67,7 +67,7 @@
       </div>
     </div>
     <div class="dialogs">
-      <clr-modal [clrModalOpen]="showHeaderDialog" (clrModalOpenChange)="toggleHeader()">
+      <clr-modal [clrModalOpen]="showHeaderDialog" (clrModalOpenChange)="toggleHeader($event)">
         <h3 class="modal-title">
           <div class="app-dialog-header">
             <div class="app-dialog-title">{{ 'HEADERS_TEXT' | translate }}</div>
@@ -90,26 +90,26 @@ <h3 class="modal-title">
         <div class="modal-footer">
           <div class="app-dialog-footer">
             <button class="app-button active-grey left" (click)="addHeader()">{{ 'ADD_HEADER_TEXT' | translate }}</button>
-            <button class="app-button active-primary right" (click)="toggleHeader()">{{ 'SAVE_BUTTON' | translate }}</button>
+            <button class="app-button active-primary right" (click)="toggleHeader($event)">{{ 'SAVE_BUTTON' | translate }}</button>
           </div>
         </div>
       </clr-modal>
       <app-set-variable-dialog
         [variables]="variables"
         [showVariableDialog]="showVariableDialog"
-        (toggleVariableDialog)="toggleVariableDialog()"
+        (toggleVariableDialog)="toggleVariableDialog($event)"
         (variablesChange)="updateVariables($event)"
       ></app-set-variable-dialog>
       <app-subscription-url-dialog
         [subscriptionUrl]="subscriptionUrl"
         [showDialog]="showSubscriptionUrlDialog"
-        (toggleDialogChange)="toggleSubscriptionUrlDialog()"
+        (toggleDialogChange)="toggleSubscriptionUrlDialog($event)"
         (subscriptionUrlChange)="updateSubscriptionUrl($event)"
       ></app-subscription-url-dialog>
       <app-history-dialog
         [historyList]="historyList"
         [showDialog]="showHistoryDialog"
-        (toggleDialogChange)="toggleHistoryDialog()"
+        (toggleDialogChange)="toggleHistoryDialog($event)"
         (restoreHistoryChange)="restoreHistory($event)"
       ></app-history-dialog>
     </div>

diff --git a/src/app/containers/window/window.component.ts b/src/app/containers/window/window.component.ts
@@ -177,7 +177,7 @@ export class WindowComponent implements OnInit {
       console.log('Your query is a SUBSCRIPTION!!!');
       // If the subscription URL is not set, show the dialog for the user to set it
       if (!this.subscriptionUrl) {
-        this.toggleSubscriptionUrlDialog();
+        this.toggleSubscriptionUrlDialog(true);
       } else {
         this.startSubscription();
       }
@@ -202,20 +202,28 @@ export class WindowComponent implements OnInit {
     this.store.dispatch(new queryActions.SetQueryAction(query, this.windowId));
   }
 
-  toggleHeader() {
-    this.store.dispatch(new dialogsActions.ToggleHeaderDialogAction(this.windowId));
+  toggleHeader(isOpen) {
+    if (this.showHeaderDialog !== isOpen) {
+      this.store.dispatch(new dialogsActions.ToggleHeaderDialogAction(this.windowId));
+    }
   }
 
-  toggleVariableDialog() {
-    this.store.dispatch(new dialogsActions.ToggleVariableDialogAction(this.windowId));
+  toggleVariableDialog(isOpen) {
+    if (this.showVariableDialog !== isOpen) {
+      this.store.dispatch(new dialogsActions.ToggleVariableDialogAction(this.windowId));
+    }
   }
 
-  toggleSubscriptionUrlDialog() {
-    this.store.dispatch(new dialogsActions.ToggleSubscriptionUrlDialogAction(this.windowId));
+  toggleSubscriptionUrlDialog(isOpen) {
+    if (this.showSubscriptionUrlDialog !== isOpen) {
+      this.store.dispatch(new dialogsActions.ToggleSubscriptionUrlDialogAction(this.windowId));
+    }
   }
 
-  toggleHistoryDialog() {
-    this.store.dispatch(new dialogsActions.ToggleHistoryDialogAction(this.windowId));
+  toggleHistoryDialog(isOpen) {
+    if (this.showHistoryDialog !== isOpen) {
+      this.store.dispatch(new dialogsActions.ToggleHistoryDialogAction(this.windowId));
+    }
   }
 
   toggleDocs() {

diff --git a/src/app/reducers/index.ts b/src/app/reducers/index.ts
@@ -1,6 +1,7 @@
 import { combineReducers, Action, ActionReducer, ActionReducerMap, MetaReducer } from '@ngrx/store';
 import { compose } from '@ngrx/store';
 import { localStorageSync } from 'ngrx-store-localstorage';
+import { storeFreeze } from 'ngrx-store-freeze';
 
 import { environment } from '../../environments/environment';
 
@@ -55,6 +56,7 @@ export const keySerializer = (key) => 'altair_' + key;
 
 export const metaReducers: MetaReducer<any>[] = [
   localStorageSync({ keys: ['windows', 'windowsMeta'], rehydrate: true, storageKeySerializer: keySerializer }),
+  // !environment.production ? storeFreeze : null,
   log
 ];