Merge branch 'refactor/using-modal-service' into 'master'

Refactor: Using ModalService

See merge request minds/front!1711

Author: markharding

package-lock.json

@@ -33,7 +33,7 @@
     "@angular/compiler": "~12.1.2",
     "@angular/core": "~12.1.2",
     "@angular/forms": "~12.1.2",
-    "@angular/localize": "^12.1.2",
+    "@angular/localize": "~12.1.2",
     "@angular/platform-browser": "~12.1.2",
     "@angular/platform-browser-dynamic": "~12.1.2",
     "@angular/platform-server": "~12.1.2",
@@ -44,6 +44,7 @@
     "@growthbook/growthbook": "^0.13.0",
     "@mindsorg/ngx-universal": "^2.3.0",
     "@mindsorg/web3modal-angular": "^1.6.1",
+    "@ng-bootstrap/ng-bootstrap": "^10.0.0",
     "@nguniversal/builders": "~12.1.0",
     "@nguniversal/common": "~12.1.0",
     "@nguniversal/express-engine": "~12.1.0",
@@ -63,6 +64,7 @@
     "assert": "^2.0.0",
     "blurhash": "^1.1.4",
     "bn.js": "^5.2.0",
+    "bootstrap": "^5.1.3",
     "braintree-web": "3.79.1",
     "cookie-parser": "^1.4.5",
     "core-js": "~3.15.2",

package.json

@@ -54,7 +54,6 @@ import { DropdownComponent } from './components/dropdown/dropdown.component';
 import { DynamicHostDirective } from './directives/dynamic-host.directive';
 import { MindsCard } from './components/card/card.component';
 import { MindsButton } from './components/button-v1/button-v1.component';
-import { OverlayModalComponent } from './components/overlay-modal/overlay-modal.component';
 
 import { ChartComponent } from './components/chart/chart.component';
 import { DateSelectorComponent } from './components/date-selector/date-selector.component';
@@ -144,7 +143,6 @@ import { SidebarNavigationService } from './layout/sidebar/navigation.service';
 import { TopbarService } from './layout/topbar.service';
 import { UserMenuV3Component } from './layout/v3-topbar/user-menu/user-menu.component';
 import { NestedMenuComponent } from './layout/nested-menu/nested-menu.component';
-import { StackableModalComponent } from './components/stackable-modal/stackable-modal.component';
 import { FileUploadComponent } from './components/file-upload/file-upload.component';
 import { IconComponent } from './components/icon/icon.component';
 import { OverlayComponent } from './components/overlay/overlay.component';
@@ -199,6 +197,7 @@ import { AutofocusDirective } from './directives/autofocus.directive';
 import { SidebarMoreComponent } from './layout/sidebar-more/sidebar-more.component';
 import { SidebarMoreTriggerComponent } from './layout/sidebar-more/sidebar-more-trigger/sidebar-more-trigger.component';
 import { TagSelectorComponent } from './components/tag-selector/tag-selector.component';
+import { ModalCloseButtonComponent } from './components/modal-close-button/modal-close-button.component';
 import { BlurhashDirective } from './directives/blurhash/blurhash.directive';
 
 const routes: Routes = [
@@ -273,7 +272,6 @@ const routes: Routes = [
     MindsButton,
 
     ChartComponent,
-    OverlayModalComponent,
 
     AdminActionsButtonComponent,
 
@@ -330,7 +328,6 @@ const routes: Routes = [
     FormInputCheckboxComponent,
     ExplicitOverlayComponent,
     NestedMenuComponent,
-    StackableModalComponent,
     FileUploadComponent,
     IconComponent,
     OverlayComponent,
@@ -370,6 +367,7 @@ const routes: Routes = [
     SidebarMoreComponent,
     SidebarMoreTriggerComponent,
     TagSelectorComponent,
+    ModalCloseButtonComponent,
     BlurhashDirective,
   ],
   exports: [
@@ -422,7 +420,6 @@ const routes: Routes = [
     MindsButton,
 
     ChartComponent,
-    OverlayModalComponent,
 
     AdminActionsButtonComponent,
 
@@ -478,7 +475,6 @@ const routes: Routes = [
     FormInputCheckboxComponent,
     ExplicitOverlayComponent,
     NestedMenuComponent,
-    StackableModalComponent,
     FileUploadComponent,
     IconComponent,
     OverlayComponent,
@@ -517,6 +513,7 @@ const routes: Routes = [
     SidebarMoreComponent,
     SidebarMoreTriggerComponent,
     TagSelectorComponent,
+    ModalCloseButtonComponent,
     BlurhashDirective,
   ],
   providers: [

src/app/common/common.module.ts

@@ -36,3 +36,5 @@
     </m-button>
   </div>
 </div>
+
+<m-modalCloseButton></m-modalCloseButton>

src/app/common/components/date-range-modal/date-range-modal.component.html

@@ -9,18 +9,12 @@
     border-radius: $m-borderRadius;
     display: flex;
     flex-direction: column;
-    margin: 40px;
 
     @media screen and (max-width: $max-mobile) {
       padding: 24px;
       margin: 20vh 0;
     }
 
-    @include m-theme() {
-      background-color: themed($m-bgColor--primary);
-      box-shadow: 0 0 15px 0 rgba(themed($m-black-always), 0.1);
-    }
-
     .m-dateRangeModal__header {
       font-size: 22px;
       line-height: 29px;

src/app/common/components/date-range-modal/date-range-modal.component.ng.scss

@@ -68,16 +68,6 @@ export class DateRangeModalComponent implements OnInit, OnDestroy {
     }
   }
 
-  /**
-   * Modal options
-   * @param onApply
-   * @param onDismissIntent
-   */
-  set opts({ onApply, onDismissIntent }) {
-    this.onApplyIntent = onApply || noOp;
-    this.onDismissIntent = onDismissIntent || noOp;
-  }
-
   onFromDateChange(newDate): void {
     this.fromDate = moment(new Date(newDate))
       .startOf('day')
@@ -125,4 +115,14 @@ export class DateRangeModalComponent implements OnInit, OnDestroy {
   get dateRange(): FeedFilterDateRange {
     return { fromDate: this.fromDate, toDate: this.toDate };
   }
+
+  /**
+   * Modal options
+   * @param onApply
+   * @param onDismissIntent
+   */
+  setModalData({ onApply, onDismiss }) {
+    this.onApplyIntent = onApply || noOp;
+    this.onDismissIntent = onDismiss || noOp;
+  }
 }

src/app/common/components/date-range-modal/date-range-modal.component.ts

@@ -1,52 +1,30 @@
 import { Injectable, Injector } from '@angular/core';
-import { Observable } from 'rxjs';
-import { OverlayModalService } from '../../../services/ux/overlay-modal';
 import { DateRangeModalComponent } from '../date-range-modal/date-range-modal.component';
 import { FeedFilterDateRange } from '../feed-filter/feed-filter.component';
+import { ModalService } from '../../../services/ux/modal.service';
 
 @Injectable()
 export class DateRangeModalService {
   /**
    * Constructor
-   * @param overlayModal
+   * @param modalService
    */
-  constructor(protected overlayModal: OverlayModalService) {}
+  constructor(protected modalService: ModalService) {}
 
   /**
-   * Presents the languages modal
+   * Presents the date range modal
    * @param injector
    */
-  present(injector: Injector): Observable<FeedFilterDateRange> {
-    return new Observable<FeedFilterDateRange>(subscriber => {
-      let open = true;
-
-      this.overlayModal
-        .create(
-          DateRangeModalComponent,
-          null,
-          {
-            wrapperClass: 'm-modalV2__wrapper',
-            onApply: dateRange => {
-              subscriber.next(dateRange);
-              this.overlayModal.dismiss();
-            },
-            onDismissIntent: () => {
-              this.overlayModal.dismiss();
-            },
-          },
-          injector
-        )
-        .onDidDismiss(() => {
-          open = false;
-          subscriber.complete();
-        })
-        .present();
-
-      return () => {
-        if (open) {
-          this.overlayModal.dismiss();
-        }
-      };
+  pick(injector: Injector): Promise<FeedFilterDateRange> {
+    const modal = this.modalService.present(DateRangeModalComponent, {
+      data: {
+        onApply: dateRange => {
+          modal.close(dateRange);
+        },
+      },
+      injector,
     });
+
+    return modal.result;
   }
 }

src/app/common/components/date-range-modal/date-range-modal.services.ts

@@ -147,9 +147,9 @@ export class FeedFilterComponent implements OnInit {
    * Opens date range modal
    */
   async openDateRangeModal(): Promise<void> {
-    const dateRange: FeedFilterDateRange = await this.dateRangeModal
-      .present(this.injector)
-      .toPromise();
+    const dateRange: FeedFilterDateRange = await this.dateRangeModal.pick(
+      this.injector
+    );
 
     if (dateRange) {
       this.service.dateRange$.next(dateRange);

src/app/common/components/feed-filter/feed-filter.component.ts

@@ -0,0 +1,3 @@
+<a [class.white]="white" (click)="close()">
+  <i class="material-icons">close</i>
+</a>

src/app/common/components/modal-close-button/modal-close-button.component.html

@@ -0,0 +1,38 @@
+@import 'defaults.scss';
+
+:host {
+  a {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    z-index: 3;
+    display: inline-block;
+    padding: 10px;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+
+    @include m-theme() {
+      background-color: rgba(themed($m-black), 0.025);
+    }
+
+    &:hover {
+      @include m-theme() {
+        background-color: rgba(themed($m-black), 0.05);
+      }
+    }
+
+    &.white {
+      @include m-theme() {
+        background-color: rgba(themed($m-white-always), 0.025);
+        color: themed($m-white-always);
+      }
+
+      &:hover {
+        @include m-theme() {
+          background-color: rgba(themed($m-white-always), 0.05);
+        }
+      }
+    }
+  }
+}