session-desktop/js/views/blocked_number_view.js

/* global BlockedNumberController: false */
/* global Whisper: false */
/* global storage: false */
/* global i18n: false */

/* eslint-disable no-new */

// eslint-disable-next-line func-names
(function() {
    'use strict';

    window.Whisper = window.Whisper || {};

    Whisper.BlockedNumberView = Whisper.View.extend({
      templateName: 'blockedUserSettings',
      className: 'blockedUserSettings',
      events: {
        'click .unblock-button': 'onUnblock',
      },
      initialize() {
        storage.onready(() => {
          this.collection = BlockedNumberController.getAll();
          this.listView = new Whisper.BlockedNumberListView({
            collection: this.collection,
          });

          this.listView.render();
          this.blockedUserSettings = this.$('.blocked-user-settings');
          this.blockedUserSettings.prepend(this.listView.el);
        });
      },
      render_attributes() {
        return {
          blockedHeader: i18n('settingsUnblockHeader'),
          unblockMessage: i18n('unblockUser'),
        };
      },
      onUnblock() {
        const number = this.$('select option:selected').val();
        if (!number) return;

        if (BlockedNumberController.isBlocked(number)) {
          BlockedNumberController.unblock(number);
          window.onUnblockNumber(number);
          this.listView.collection.remove(this.listView.collection.where({ number }));
        }
      },
    });


  Whisper.BlockedNumberListView = Whisper.View.extend({
      tagName: 'select',
      initialize(options) {
        this.options = options || {};
        this.listenTo(this.collection, 'add', this.addOne);
        this.listenTo(this.collection, 'reset', this.addAll);
        this.listenTo(this.collection, 'remove', this.addAll);
      },
      addOne(model) {
        const number = model.get('number');
        if (number) {
          this.$el.append(`<option value="${number}">${number}</option>`);
        }
      },
      addAll() {
        this.$el.html('');
        this.collection.each(this.addOne, this);
      },

      render() {
        this.addAll();
        return this;
      },
    });
  })();