Add process modal

Author: onechiporenko

Diff for: addon/components/modals-container/process.js

@@ -0,0 +1,23 @@
+import Base from './base';
+import layout from '../../templates/components/modals-container/process';
+import {get} from '@ember/object';
+
+/**
+ * Here `process` means function thar return Promise
+ *
+ * @class Process
+ * @namespace Components
+ * @extends Components.BaseModal
+ */
+export default Base.extend({
+  layout,
+
+  didInsertElement() {
+    const process = get(this, 'options.process');
+    if (process) {
+      process()
+        .then(v => this.send('confirm', v))
+        .catch(e => this.send('decline', e));
+    }
+  }
+});

Diff for: addon/components/modals-container/progress.js

@@ -2,7 +2,6 @@ import layout from '../../templates/components/modals-container/progress';
 import Base from './base';
 import {computed, get, set} from '@ember/object';
 import {alias} from '@ember/object/computed';
-import {inject as service} from '@ember/service';
 import {later} from '@ember/runloop';
 import {A} from '@ember/array';
 import {run} from '@ember/runloop';
@@ -18,8 +17,6 @@ export default Base.extend({
 
   layout,
 
-  modalsManager: service(),
-
   /**
    * Number of fulfilled promises
    *

Diff for: addon/services/modals-manager.js

@@ -276,6 +276,44 @@ import {defer} from 'rsvp';
  *
  * **IMPORTANT** Here `options.promises` is a list of _FUNCTIONS_ that returns Promises!
  *
+ * ### `process`
+ *
+ * This modal is used to show a "placeholder" while some process is running. This modal doesn't have any controls like confirm/decline-buttons in the footer or "×" in the header and can't be closed by pressing Esc or clicking somewhere outside a modal. Modal will be confirmed and self-closed after provided promise (`process`) is fulfilled or it will be declined (and self-closed) if it becomes rejected.
+ *
+ * ```js
+ * import Controller from '@ember/controller';
+ * import {inject as service} from '@ember/service';
+ * import {get} from '@ember/object';
+ * import {Promise} from 'rsvp';
+ *
+ * export default Controller.extend({
+ *   modalsManager: service(),
+ *
+ *   actions: {
+ *     showProcessModal() {
+ *       get(this, 'modalsManager')
+ *         .process({
+ *           body: 'Some text goes here',
+ *           iconClass: 'text-center fa fa-spinner fa-spin fa-3x fa-fw',
+ *           title: '',
+ *           // this is required
+ *           process: () => new Promise(resolve => setTimeout(resolve(1), 100))
+ *         })
+ *         .then(result => {
+ *           // called after `process` is resolved
+ *           // here "result" is value of fulfilled Promise
+ *         })
+ *         .catch(error => {
+ *           // called after `process` is rejected
+ *           // here "error" is a reason why last promise was rejected
+ *         });
+ *     }
+ *   }
+ * });
+ * ```
+ *
+ * **IMPORTANT** Here `options.process` is a _FUNCTION_ that return Promise!
+ *
  * ## Go Pro
  *
  * ### Custom components for `title`, `body` and `footer`
@@ -622,7 +660,7 @@ import {defer} from 'rsvp';
  *
  * #### Title Component
  *
- * It takes a single parameter options. Its value is an object passed to the modalsManager.progress.
+ * It takes a single parameter `options`. Its value is an object passed to the `modalsManager.progress`.
  *
  * ```hbs
  * <h4 class="modal-title"><i class="glyphicon glyphicon-info-sign"></i> Custom Progress Title Component</h4>
@@ -653,6 +691,45 @@ import {defer} from 'rsvp';
  * <p>Custom Progress Footer Component</p>
  * ```
  *
+ * ### `process`
+ *
+ * ```js
+ * import Controller from '@ember/controller';
+ * import {inject as service} from '@ember/service';
+ * import {get} from '@ember/object';
+ * import {Promise} from 'rsvp';
+ *
+ * export default Controller.extend({
+ *   modalsManager: service(),
+ *
+ *   actions: {
+ *     showProcessModal() {
+ *       get(this, 'modalsManager')
+ *         .process({
+ *           bodyComponent: 'custom-process-body',
+ *           headerComponent: 'custom-process-footer',
+ *           footerComponent: 'custom-process-header',
+ *           process: () => new Promise(resolve => setTimeout(resolve(1), 100))
+ *         })
+ *         .then(result => {})
+ *         .catch(error => {});
+ *     }
+ *   }
+ * });
+ * ```
+ *
+ * #### Title Component
+ *
+ * It takes a single parameter `options`. Its value is an object passed to the `modalsManager.process`.
+ *
+ * #### Body Component
+ *
+ * It takes a single parameter `options`. Its value is an object passed to the `modalsManager.process`.
+ *
+ * #### Footer Component
+ *
+ * It takes a single parameter `options`. Its value is an object passed to the `modalsManager.process`.
+ *
  * @module EmberBootstrapModalsManager
  * @main EmberBootstrapModalsManager
  */
@@ -794,8 +871,6 @@ export default Service.extend({
   /**
    * Shows `progress`-modal. This modal doesn't have any controls and is auto-closed when progress is completed
    *
-   * Alert-modal will be opened if some error-appears
-   *
    * @method progress
    * @param {object} options
    * @returns {RSVP.Promise}
@@ -805,6 +880,16 @@ export default Service.extend({
     return this.show('modals-container/progress', options);
   },
 
+  /**
+   * @method process
+   * @param {object} options
+   * @returns {RSVP.Promise}
+   */
+  process(options) {
+    assert('`options.process` must be defined', options && options.process);
+    return this.show('modals-container/process', options);
+  },
+
   /**
    * @method onConfirmClick
    * @private

Diff for: addon/templates/components/modals-container/process.hbs

@@ -0,0 +1,33 @@
+{{#bs-modal open=modalIsOpened keyboard=false backdropClose=false onSubmit=(action "confirm") onHide=(action "decline") as |modal|}}
+  {{#modal.header closeButton=false}}
+    {{#if options.titleComponent}}
+      {{component
+        options.titleComponent
+        options=options
+      }}
+    {{else}}
+      {{#bs-modal/header/title}}{{options.title}}{{/bs-modal/header/title}}
+    {{/if}}
+  {{/modal.header}}
+  {{#modal.body}}
+    {{#if options.bodyComponent}}
+      {{component
+        options.bodyComponent
+        options=options
+      }}
+    {{else}}
+      <p>{{options.body}}</p>
+      {{#if options.iconClass}}
+        <p class="text-center"><i class={{options.iconClass}}></i></p>
+      {{/if}}
+    {{/if}}
+  {{/modal.body}}
+  {{#modal.footer}}
+    {{#if options.footerComponent}}
+      {{component
+        options.footerComponent
+        options=options
+      }}
+    {{/if}}
+  {{/modal.footer}}
+{{/bs-modal}}

Diff for: app/components/modals-container/process.js

@@ -0,0 +1 @@
+export { default } from 'ember-bootstrap-modals-manager/components/modals-container/process';

Diff for: package-lock.json

@@ -269,3 +269,52 @@ test('Custom progress-modal (success)', function (assert) {
     return done();
   }, 3000);
 });
+
+test('process-modal (success)', function (assert) {
+  openModal('process');
+  const done = assert.async();
+  modalIsOpened(assert, true);
+  andThen(() => {
+    customModalText(assert, 'body', 'Some long process (you must add font-awesome to your project to use `fa`-icons)');
+    assert.equal(find('.modal-footer button').length, 0, 'Footer has not buttons');
+    keyEvent('.modal', 'keydown', 27).then(() => {  // click Esc
+      assert.equal(find('.modal-body').length, 1, 'Modal exists');
+    });
+    triggerEvent('.modal', 'click');
+    modalIsOpened(assert, true);
+  });
+  setTimeout(() => {
+    modalIsOpened(assert, false);
+    lastLogMessageAssert(assert, 'Process was confirmed (with some result)');
+    return done();
+  }, 3100);
+});
+
+test('process-modal (error)', function (assert) {
+  click('.process-will-fail input');
+  openModal('process');
+  const done = assert.async();
+  modalIsOpened(assert, true);
+  setTimeout(() => {
+    modalIsOpened(assert, false);
+    lastLogMessageAssert(assert, 'Process was declined (with some error)');
+    return done();
+  }, 3100);
+});
+
+test('Custom process-modal', function (assert) {
+  openModal('custom-process');
+  const done = assert.async();
+  modalIsOpened(assert, true);
+  andThen(() => {
+    customModalText(assert, 'header', 'Custom Process Title Component');
+    customModalText(assert, 'body', 'Custom Process Body Component');
+    customModalText(assert, 'body', 'Some long process (you must add font-awesome to your project to use `fa`-icons)');
+    customModalText(assert, 'footer', 'Custom Process Footer Component');
+  });
+  setTimeout(() => {
+    modalIsOpened(assert, false);
+    lastLogMessageAssert(assert, 'Process was confirmed (with some result)');
+    return done();
+  }, 3100);
+});

Diff for: tests/acceptance/modals-test.js

@@ -0,0 +1,6 @@
+import Component from '@ember/component';
+import layout from '../templates/components/custom-process-body';
+
+export default Component.extend({
+  layout
+});

Diff for: tests/dummy/app/components/custom-process-body.js

@@ -0,0 +1,6 @@
+import Component from '@ember/component';
+import layout from '../templates/components/custom-process-footer';
+
+export default Component.extend({
+  layout
+});

Diff for: tests/dummy/app/components/custom-process-footer.js

@@ -0,0 +1,6 @@
+import Component from '@ember/component';
+import layout from '../templates/components/custom-process-header';
+
+export default Component.extend({
+  layout
+});

Diff for: tests/dummy/app/components/custom-process-header.js

@@ -37,6 +37,7 @@ export default Controller.extend({
   striped: false,
   notStriped: not('striped'),
   progressWillFail: false,
+  processWillFail: false,
 
   addMessage(msg) {
     get(this, 'messages').pushObject(msg);
@@ -126,7 +127,7 @@ export default Controller.extend({
       set(this, 'options', options);
       get(this, 'modalsManager')
         .progress(options)
-        .then((v) => this.addMessage(`Progress was finished (with ${JSON.stringify(v)})`))
+        .then(v => this.addMessage(`Progress was finished (with ${JSON.stringify(v)})`))
         .catch(([result, error]) => {
           this.addMessage(`Progress was failed (completed ${JSON.stringify(result)}). Error - "${error}"`);
           return get(this, 'modalsManager')
@@ -136,6 +137,21 @@ export default Controller.extend({
             });
         });
     },
+    showProcessModal() {
+      const options = {
+        body: 'Some long process (you must add font-awesome to your project to use `fa`-icons)',
+        iconClass: 'text-center fa fa-spinner fa-spin fa-3x fa-fw',
+        title: '',
+        process: () => new Promise((resolve, reject) => setTimeout(() => {
+          get(this, 'processWillFail') ? reject('some error') : resolve('some result');
+        }, 3000))
+      };
+      set(this, 'options', options);
+      get(this, 'modalsManager')
+        .process(options)
+        .then(v => this.addMessage(`Process was confirmed (with ${v})`))
+        .catch(e => this.addMessage(`Process was declined (with ${e})`));
+    },
 
     showCustomAlertModal() {
       const options = {
@@ -226,6 +242,24 @@ export default Controller.extend({
             });
         });
     },
+    showCustomProcessModal() {
+      const options = {
+        title: 'Process Modal Title',
+        body: 'Some long process (you must add font-awesome to your project to use `fa`-icons)',
+        titleComponent: 'custom-process-header',
+        bodyComponent: 'custom-process-body',
+        footerComponent: 'custom-process-footer',
+        iconClass: 'text-center fa fa-spinner fa-spin fa-3x fa-fw',
+        process: () => new Promise((resolve, reject) => setTimeout(() => {
+          get(this, 'processWillFail') ? reject('some error') : resolve('some result');
+        }, 3000))
+      };
+      set(this, 'options', options);
+      get(this, 'modalsManager')
+        .process(options)
+        .then(v => this.addMessage(`Process was confirmed (with ${v})`))
+        .catch(e => this.addMessage(`Process was declined (with ${e})`));
+    },
     cleanMessage() {
       set(this, 'messages', A([]));
     }

Diff for: tests/dummy/app/controllers/index.js

@@ -7,6 +7,8 @@
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+
     {{content-for "head"}}
 
     <link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css">

Diff for: tests/dummy/app/index.html

@@ -0,0 +1,5 @@
+<p class="alert alert-info">Custom Process Body Component</p>
+<p class="alert alert-info">{{options.body}}</p>
+{{#if options.iconClass}}
+  <p class="text-center"><i class={{options.iconClass}}></i></p>
+{{/if}}

Diff for: tests/dummy/app/templates/components/custom-process-body.hbs

@@ -0,0 +1 @@
+Custom Process Footer Component

Diff for: tests/dummy/app/templates/components/custom-process-footer.hbs

@@ -0,0 +1 @@
+Custom Process Title Component

Diff for: tests/dummy/app/templates/components/custom-process-header.hbs

@@ -7,6 +7,7 @@
     {{#bs-button class="prompt-confirm-modal" onClick=(action "showPromptConfirmModal")}}Prompt Confirm Modal{{/bs-button}}
     {{#bs-button class="check-confirm-modal" onClick=(action "showCheckConfirmModal")}}Check Confirm Modal{{/bs-button}}
     {{#bs-button class="progress-modal" onClick=(action "showProgressModal")}}Progress Modal{{/bs-button}}
+    {{#bs-button class="process-modal" onClick=(action "showProcessModal")}}Process Modal{{/bs-button}}
 
     <h3>Modals with custom components:</h3>
     {{#bs-button class="custom-alert-modal" onClick=(action "showCustomAlertModal")}}Alert Modal{{/bs-button}}
@@ -15,6 +16,7 @@
     {{#bs-button class="custom-prompt-confirm-modal" onClick=(action "showCustomPromptConfirmModal")}}Prompt Confirm Modal{{/bs-button}}
     {{#bs-button class="custom-check-confirm-modal" onClick=(action "showCustomCheckConfirmModal")}}Check Confirm Modal{{/bs-button}}
     {{#bs-button class="custom-progress-modal" onClick=(action "showCustomProgressModal")}}Progress Modal{{/bs-button}}
+    {{#bs-button class="custom-process-modal" onClick=(action "showCustomProcessModal")}}Process Modal{{/bs-button}}
     <h3>Settings:</h3>
     {{#bs-form formLayout="vertical" model=this as |form|}}
       <h4>Prompt:</h4>
@@ -33,6 +35,8 @@
           {{form.element controlType="checkbox" class="progress-will-fail" label="Progress will fail" property="progressWillFail"}}
         </div>
       </div>
+      <h4>Process</h4>
+      {{form.element controlType="checkbox" class="process-will-fail" label="Process will fail" property="processWillFail"}}
     {{/bs-form}}
     {{outlet}}
   </div>