Initial commit

lib/assets/javascripts/dashboard/views/organization/organization-notification/delete-notification-dialog-view.js

@@ -0,0 +1,48 @@
+const CoreView = require('backbone/core-view');
+const checkAndBuildOpts = require('builder/helpers/required-opts');
+const loadingView = require('builder/components/loading/render-loading');
+const template = require('./delete-notification-dialog.tpl');
+
+var REQUIRED_OPTS = [
+  'userModel',
+  'modalModel',
+  'authenticityToken',
+  'notificationId'
+];
+
+module.exports = CoreView.extend({
+  events: {
+    'click .js-submit': '_onSubmit',
+    'click .js-cancel': '_closeDialog'
+  },
+
+  initialize: function (options) {
+    checkAndBuildOpts(options, REQUIRED_OPTS, this);
+  },
+
+  render: function () {
+    const { authenticityToken, notificationId } = this.options;
+
+    return this.$el.html(template({
+      formAction: `${this._userModel.get('base_url')}/organization/notifications/${notificationId}`,
+      authenticityToken
+    }));
+  },
+
+  _onSubmit: function (event) {
+    event.preventDefault();
+
+    this.$('form').submit();
+
+    this.$('.Modal-inner').hide();
+
+    this.$('.Modal-inner').after(loadingView({
+      title: 'Removing...'
+    }));
+  },
+
+  _closeDialog: function (event) {
+    event && event.preventDefault();
+    this._modalModel.destroy();
+  }
+});

lib/assets/javascripts/dashboard/views/organization/organization-notification/delete-notification-dialog.tpl

@@ -0,0 +1,32 @@
+<div class="u-flex u-justifyCenter">
+  <div class="Modal-inner Modal-inner--grid u-flex u-justifyCenter">
+    <div class="Modal-icon">
+      <svg width="24px" height="25px" viewbox="521 436 24 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <path d="M524.5,440 L540.5,440 L540.5,460 L524.5,460 L524.5,440 Z M528.5,437 L536.5,437 L536.5,440 L528.5,440 L528.5,437 Z M522,440 L544,440 L522,440 Z M528.5,443.5 L528.5,455.5 L528.5,443.5 Z M532.5,443.5 L532.5,455.5 L532.5,443.5 Z M536.5,443.5 L536.5,455.5 L536.5,443.5 Z" id="Shape" stroke="#F19243" stroke-width="1" fill="none"/>
+      </svg>
+    </div>
+    <div>
+      <form accept-charset="UTF-8" action="<%- formAction %>" method="post">
+        <input name="utf8" type="hidden" value="&#x2713;" />
+        <input name="authenticity_token" type="hidden" value="<%- authenticityToken %>" />
+        <input name="_method" type="hidden" value="delete" />
+
+        <h2 class=" CDB-Text CDB-Size-huge is-light u-bSpace--xl">You are about to remove a notification</h2>
+        <p class="CDB-Text CDB-Size-large u-altTextColor">Are you sure you want to remove it?</p>
+
+        <ul class="Modal-listActions u-flex u-alignCenter">
+          <li class="Modal-listActionsitem">
+            <button class="CDB-Button CDB-Button--secondary CDB-Button--big js-cancel">
+              <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium u-upperCase">Cancel</span>
+            </button>
+          </li>
+          <li class="Modal-listActionsitem">
+            <button class="CDB-Button CDB-Button--primary CDB-Button--big js-submit">
+              <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium u-upperCase">Ok, remove it</span>
+            </button>
+          </li>
+        </ul>
+      </form>
+    </div>
+  </div>
+</div>

lib/assets/javascripts/dashboard/views/organization/organization-notification/organization-notification-view.js

@@ -0,0 +1,99 @@
+const CoreView = require('backbone/core-view');
+const markdown = require('markdown');
+const $ = require('jquery');
+const checkAndBuildOpts = require('builder/helpers/required-opts');
+const ModalsServiceModel = require('builder/components/modals/modals-service-model');
+const RemoveNotificationDialogView = require('./delete-notification-dialog-view');
+const SendButtonView = require('./send-button-view');
+
+const REQUIRED_OPTS = [
+  'userModel'
+];
+
+module.exports = CoreView.extend({
+
+  events: {
+    'click .js-resend': '_onClickResend',
+    'click .js-remove': '_onClickRemove',
+    'keydown .js-textarea': '_onTextareaKeydown',
+    'input .js-textarea': '_updateCounter',
+    'propertychange .js-textarea': '_updateCounter'
+  },
+
+  initialize: function (options) {
+    checkAndBuildOpts(options, REQUIRED_OPTS, this);
+  },
+
+  render: function () {
+    this.$textarea = this.$('#carto_notification_body');
+    this._modals = new ModalsServiceModel();
+
+    this._initViews();
+    this._initBinds();
+
+    this._updateCounter();
+
+    return this;
+  },
+
+  _initViews: function () {
+    this.sendButton = new SendButtonView({
+      needsPasswordConfirmation: this._userModel.get('needs_password_confirmation'),
+      modals: this._modals
+    });
+    this.$('.js-send').html(this.sendButton.render().el);
+    this.addView(this.sendButton);
+  },
+
+  _initBinds: function () {
+    this.listenTo(this.sendButton, 'submitForm', this._submitForm);
+  },
+
+  _submitForm: function () {
+    if (navigator.userAgent.toLowerCase().indexOf('firefox') !== -1) {
+      this.$('form').clone().appendTo('body').submit(); // FF only
+    } else {
+      this.$('form').submit();
+    }
+  },
+
+  _updateCounter: function () {
+    const textLength = $(markdown.toHTML(this.$textarea.val())).text().length;
+    this.sendButton.updateCounter(textLength);
+  },
+
+  _onClickResend: function (event) {
+    const $notificationItem = $(event.target).closest('.js-NotificationsList-item');
+    const title = $notificationItem.find('.js-html_body').data('body');
+    const recipients = $notificationItem.find('.js-recipients').data('recipients');
+
+    this.$textarea.val(title);
+    this.$('input[name="carto_notification[recipients]"]').prop('checked', false);
+    this.$('input[name="carto_notification[recipients]"][value="' + recipients + '"]').prop('checked', true);
+
+    $('body').animate({
+      scrollTop: 0
+    });
+
+    this._updateCounter();
+  },
+
+  _onTextareaKeydown: function (event) {
+    if (event.key === 'Enter' && event.metaKey) {
+      this.sendButton.onUpdate();
+    }
+  },
+
+  _onClickRemove: function (event) {
+    const $target = $(event.target);
+
+    this._modals.create((modalModel) => (
+      new RemoveNotificationDialogView({
+        userModel: this._userModel,
+        modalModel,
+        authenticityToken: this.options.authenticityToken,
+        notificationId: $target.data('id')
+      })
+    ));
+  }
+});

lib/assets/javascripts/dashboard/views/organization/organization-notification/send-button-view.js

@@ -0,0 +1,94 @@
+const $ = require('jquery');
+const CoreView = require('backbone/core-view');
+const Backbone = require('backbone');
+const PasswordValidatedForm = require('dashboard/helpers/password-validated-form');
+const checkAndBuildOpts = require('builder/helpers/required-opts');
+const template = require('./send-button.tpl');
+
+const REQUIRED_OPTS = [
+  'modals',
+  'needsPasswordConfirmation'
+];
+
+const MAX_NOTIFICATION_LENGTH = 140;
+
+module.exports = CoreView.extend({
+  className: 'FormAccount-rowData',
+
+  events: {
+    'click .js-button': 'onUpdate'
+  },
+
+  initialize: function (options) {
+    checkAndBuildOpts(options, REQUIRED_OPTS, this);
+
+    this.model = new Backbone.Model({
+      status: 'idle',
+      counter: 0
+    });
+
+    this._initBinds();
+  },
+
+  render: function () {
+    this.clearSubViews();
+
+    this.$el.html(template({
+      isLoading: this._isLoading(),
+      isDisabled: this._isDisabled(),
+      isNegative: this._isNegative(),
+      counter: MAX_NOTIFICATION_LENGTH - this.model.get('counter')
+    }));
+
+    return this;
+  },
+
+  updateCounter: function (strLen) {
+    this.model.set('counter', strLen);
+  },
+
+  _initBinds: function () {
+    this.model.bind('change', this.render, this);
+  },
+
+  _isNegative: function () {
+    return this.model.get('counter') > MAX_NOTIFICATION_LENGTH;
+  },
+
+  _isDisabled: function () {
+    return (this.model.get('counter') === 0) || this._isNegative() || this._isLoading();
+  },
+
+  _isLoading: function () {
+    return this.model.get('status') === 'loading';
+  },
+
+  _submit: function () {
+    this.trigger('submitForm');
+  },
+
+  onUpdate: function (event) {
+    this.killEvent(event);
+
+    const form = $('#new_carto_notification');
+
+    if (this._isDisabled()) return false;
+
+    if (!this._needsPasswordConfirmation) {
+      this.model.set({ status: 'loading' });
+      return this._submit();
+    }
+
+    PasswordValidatedForm.showPasswordModal({
+      modalService: this._modals,
+      onPasswordTyped: password => {
+        PasswordValidatedForm.addPasswordToForm(form, password, {
+          doNotSubmit: true
+        });
+
+        this.model.set({ status: 'loading' });
+        this._submit();
+      }
+    });
+  }
+});

lib/assets/javascripts/dashboard/views/organization/organization-notification/send-button.tpl

@@ -0,0 +1,16 @@
+<p class="Md-counter CDB-Text CDB-Size-medium u-secondaryTextColor u-rSpace--xl <% if (isNegative) { %>Md-counter--negative<% } %>"><%= counter %></p>
+
+<button class="OrganizationNotifications-button CDB-Button CDB-Button--primary <% if (isDisabled) { %>is-disabled<% } %> js-button js-save">
+  <div class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small u-upperCase u-flex">
+    <% if (isLoading) { %>
+      <div class="CDB-LoaderIcon CDB-LoaderIcon--small u-iBlock">
+        <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
+          <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
+        </svg>
+      </div>
+      Sending
+    <% } else { %>
+      Send
+    <% } %>
+  </div>
+</button>