Sumayya

availableChannels_channelSelection.hbs

{{#if alertModel.validationErrors.channelsInvalid}}
    <div class="alert alert-error">
        <button type="button" class="close" data-dismiss="alert"
            {{action clearInvalid "alertModel.validationErrors.channelsInvalid"}}>&times;
        </button>
        {{alertModel.validationErrors.channels}}
    </div>
{{/if}}

{{#each channel in controller.allChannels}}
  {{#if channel.isAdded}}
	  {{#if channel.channelObject.validationErrors.channelConfigInvalid}}
	  <div class="alert alert-error">
	        <button type="button" class="close" data-dismiss="alert"
	            {{action clearInvalid "alertModel.validationErrors.channelConfigInvalid"}}>&times;
	        </button>
	        {{channel.channelObject.validationErrors.channelConfig}}
	    </div>
	  {{/if}}
	  {{#if channel.channelObject.validationErrors.countInvalid}}
	  <div class="alert alert-error">
	        <button type="button" class="close" data-dismiss="alert"
	            {{action clearInvalid "alertModel.validationErrors.channelConfigInvalid"}}>&times;
	        </button>
	        {{channel.channelObject.validationErrors.count}}
	    </div>
	  {{/if}}
  {{/if}}
{{/each}}

{{#if noRecipientsWarning}}
    <div class="alert">
        <button type="button" class="close" data-dismiss="alert"
            {{action clearInvalid "alertModel.validationErrors.countInvalid"}}>&times;
        </button>
        {{t no.recipients.warning}}
    </div>
{{/if}}
{{#if voiceChannel.validationErrors.recipientTypeInvalid}}
    <div class="alert alert-error">
        <button type="button" class="close" data-dismiss="alert"
            {{action clearInvalid "alertModel.validationErrors.recipientTypeInvalid"}}>&times;
        </button>
        {{voiceChannel.validationErrors.recipientType}}
    </div>
{{/if}}

<table class="channelTable" align="center">
    <colgroup>
        <col span="1" style="width: 20%;">
        <col span="1" style="width: 80%;">
    </colgroup>
    <thead>
    <tr>
        <th>
            {{t composer.add.channels}}
        </th>
        <th>
            {{t composer.count.channels}}
        </th>
    </tr>
    </thead>
    <tbody>
    {{#each channel in controller.allChannels}}
        <tr>
            <td>
                <div>
                    {{#if channel.isAdded}}
                        <input type="checkbox" checked  {{action addNewChannel channel.channel}} class="leftDiv"/>
                    {{else}}
                        <input type="checkbox" {{action addNewChannel channel.channel}} class="leftDiv"/>
                    {{/if}}
                    {{view App.SelectedChannelIconView channelBinding=channel.channel channelNameBinding= channel.name class="cursorPointer" displayNameBinding=view.isNameDisplayed}}
                </div>
            </td>
            <td>
                {{view App.IndividualChannelView channelTypeBinding=channel.channel channelAddedBinding=channel.isAdded channelObjectBinding=channel.channelObject}}
            </td>
        </tr>
    {{/each}}
    </tbody>
</table>
{{view App.SegmentSelectionView}}

availableChannels_channelSelection.less

.channelTable {
  width:100%;
}
.channelTable th {
  padding-top: 5px;
  padding-left: 8px;
  padding-bottom: 5px;
  text-align:left;
  bgcolor:#f5f5f5
}
.channelTable td, .channelTable th {
  height: 22px;
  padding-top:5px;
  padding-left:8px;
  padding-bottom: 5px;
  border: 1px solid #d3d3d3;
  border-left: 1px solid #FFF;
  border-right: 1px solid #d3d3d3;
}
.channelTable tr:first-child th {
    border-top: 1px solid #d4d4d4;
    border-bottom: 1px solid #c3c3c3;
    white-space: nowrap;
    background: #e3e3e3;
}

.channelTable tr td:first-child,
.channelTable tr th:first-child {
  border-left: 0;
  border-top: 1px solid #FFF;
  border-bottom: 1px solid #d3d3d3;
}
.channelTable tr td:last-child,
.channelTable tr th:last-child {
  border-right: 0;
  border-top: 1px solid #FFF;
  border-bottom: 1px solid #d3d3d3;
}
.channelLabel {
color: #0A0A0A;;
}

.segmentDesc {
  color: #000000 !important;
  text-align: left !important;
  margin-left: 0 !important;
}

availableChannels_ChannelSelectionController.js

require("./channelSelection");
require("./ChannelSelectionView");

var App = require("core/App")
var SmsChannel = require("alertComposer/sms/SmsChannel")
var VoiceChannel = require("alertComposer/voice/VoiceChannel")
var EmailChannel = require("alertComposer/email/EmailChannel")
var MessageLibrary = require("alertComposer/messageLibrary/MessageLibrary")
var Area = require("alertComposer/recipient/Area")
var ChannelNetworkAdapter = require("networkAdapters/adapter/ChannelNetworkAdapter")
var Segments = require("alertComposer/segments/Segment")
var SegmentFilter = require("alertComposer/segments/SegmentFilter")
var SegmentsCriteria = require("alertComposer/segments/SegmentCriteria")

var channelIds = ["voice","sms","email"]

/**
 * Returns the list of available channels.
 *
 * This method will return all the channel types that the current organization
 * has access to.
 *
 * @returns list of channel types
 */
function channelTypes(store) {
    var modules = heimdall.userContext.get("organization.modules");
    // Filter on modules, unless modules is null
    var availableChannelIds = (modules) ? channelIds.filter(modules.hasModule, modules) : channelIds;
    return availableChannelIds.map(function (channelId) {
        return store.modelFor(channelId + "Channel");
    })
}

module.exports = App.ChannelSelectionController = Ember.ObjectController.extend( ChannelNetworkAdapter, {
    alertModel: Ember.computed.alias('target.model'),
    privateCount: 0,
    enterpriseCount: 0,
    smsCount: 0,
    addPrivate: true,
    addEnterprise: true,
    voiceChannel: null,
    smsChannel: null,
    emailChannel: null,
    noRecipientsError:false,
    noRecipientsWarning:false,
    isGasTabEnabledBinding:"target.isGasEnabled",
    area : null,
    availableSegments:[],
    selectedSegment:null,
    init: function () {
        var self = this;
        this.store.find("segment", {}).then(function (segments) {
            self.get("availableSegments").clear()
            if(segments){
                self.set("availableSegments", segments.map(function(segment) {
                    return self.store.createRecord("segmentFilter", {
                        segmentId: segment.get("id"),
                        name: segment.get("name"),
                        description: segment.get("description"),
                        criteria: segment.get("criteria")
                    });
                }))
                self.setSelectedSegment();
                console.log(self.get("availableSegments").invoke("serialize"))
            }
            else{
                Ember.Logger.error("No Segments received!")
            }
        }, function(error) {
            Ember.Logger.error(error)
        });
    } ,
    setSelectedSegment:function(){
        if(this.get("target.model.filters.length") > 0){
            selectedFilter = this.get("target.model.filters.firstObject");
            this.set("selectedSegment", this.get("availableSegments").findBy("segmentId", selectedFilter.get("segmentId")))
        } /*else {
            this.set("selectedSegment", this.get("availableSegments.firstObject"))
        }*/
    },
    allChannels: function () {
        if(this.get('target.model') != null) {
            var channelList = channelTypes(this.store);
            if (this.get("target.model.channels")) {
                return channelList.map(function (channelType) {
                    return {
                        "name": channelType.channelName,
                        "isAdded": this.get("target.model.channels").getEach("constructor").contains(channelType),
                        "channel": channelType ,
                        "channelObject" : this.get("target.model").getChannel(channelType)
                    }
                }, this)
            }
        }
    }.property("target.model.channels.@each"),

    addNewChannel: function(channelType) {
        Ember.Logger.info("Channel toggled")
        var removeChannel = false;
        var channelsSelected = this.get("target.model.channels").toArray();
        Ember.Logger.info("Selected channel:" + channelsSelected)
        var channel = this.get("target.model").registerChannel(channelType);
        Ember.Logger.info("Current channel:" + channel)
        if(channelsSelected.length > 0 ) {
            for(var i=0; i < channelsSelected.length; i++) {
                if(this.get("target.model.channels").toArray()[i].get("name") == channel.get("name")) {
                    removeChannel = true;
                }
            }
            if(removeChannel) {
                this.removeChannel(channel);
            } else {
                if (channel && !removeChannel) {
                    this.selectChannel(channel);
                }
            }
        } else {
            this.selectChannel(channel);
        }
        //this.isCheckedChanged();
    },
    //sets total, private and enterprise count for Voice channel
    setCount: function() {
        var self = this;
        var privateCount = 0;
        var enterpriseCount =0;
        if (this.get("target.model.recipients.length") > 0) {
            if (this.get("activeChannel") != undefined) {
                this.get('alertModel.channels').forEach(function(channel){
                    if (channel instanceof App.VoiceChannel) {
                        privateCount = channel.get("privateMobile") + channel.get("privateFixed");
                        enterpriseCount = channel.get("companyMobile") + channel.get("companyFixed");
                    }
                    self.set("privateCount",privateCount)
                    self.set("enterpriseCount", enterpriseCount)
                })
            }
        }
    }.observes("target.model.channels.@each.count","target.model.recipients.@each"),
    removeChannel: function (channel) {
        Ember.Logger.info("Removing chhanel " + channel)
        var channels = this.get("target.content.channels");
        var idx = channels.indexOf(channel);
        if (idx != -1) {
            var wasSelected = channels.objectAt(idx) == this.get("target.activeChannel")
            channels.removeAt(idx);
            if (idx >= channels.get("length")) {
                idx--;
            }
            if (wasSelected && idx >= 0 && idx < channels.get("length")) {
                this.selectChannel(channels.objectAt(idx))
            }
            else if (wasSelected && channels.get("length") == 0) {
                this.selectChannel(null);
            }
        }
    },
    selectChannel: function (channel) {
        Ember.Logger.info("Selecting chhanel " + channel)
        this.set('target.model.activeChannel', channel);
        if(channel instanceof  App.VoiceChannel) {
            this.set('addPrivate', true)
            this.set('addEnterprise', true)
        }
    }  ,
    actions:{
        applySegmentFilter:function(){
            var segments = this.get("selectedSegment")
              ? [this.get("selectedSegment")]
              : [];
            this.set("target.model.filters",segments)
            this.getRecipientCount(this.get("target.model.allAreas"),this.get("target.model"))
        }
    }  ,
    activeChannel: function () {
        Ember.Logger.info("Active chhanel " + this.get("target.content.activeChannel"))
        return this.get("target.content.activeChannel");
    }.property("target.content.activeChannel") ,
    //sets the recipient type as private/enterprise/all and sets the channel count
    //as per recipient type selected
    isCheckedChanged: function() {
        if(this.get('target.model') != null) {
            var privateRule = "none";
            var enterpriseRule = "none";
            if(this.get("target.model.channels"))
                var channel = this.get("target.model.channels").objectAt(0);
            if(this.get('addPrivate') && this.get('addEnterprise')) {
                privateRule = "Fixed Voice";
                enterpriseRule = "Fixed Voice";
                if(channel != undefined)
                    channel.set("count", (channel.get("privateMobile") == undefined ? 0 : channel.get("privateMobile")) + (channel.get("privateFixed") == undefined ? 0 : channel.get("privateFixed"))
                        + (channel.get("companyMobile") == undefined ? 0 : channel.get("companyMobile")) + (channel.get("companyFixed") == undefined ? 0 : channel.get("companyFixed")))
            } else if(this.get('addPrivate')) {
                privateRule = "Fixed Voice";
                if(channel != undefined)
                    channel.set("count", (channel.get("privateMobile") == undefined ? 0 : channel.get("privateMobile")) + (channel.get("privateFixed") == undefined ? 0 : channel.get("privateFixed")))
            } else if(this.get('addEnterprise')){
                enterpriseRule = "Fixed Voice";
                if(channel != undefined)
                    channel.set("count", (channel.get("companyMobile") == undefined ? 0 : channel.get("companyMobile")) + (channel.get("companyFixed") == undefined ? 0 : channel.get("companyFixed")))
            }
            if (privateRule == "none" && enterpriseRule == "none") {
                if(this.get("activeChannel") != undefined) {
                    this.removeChannel(this.get("activeChannel"))
                }
            }

            var hasEmailChannel = this.get("target.model.channels").any(function(channel) {
              return channel instanceof EmailChannel;
            })

            if (this.get('target.model.recipients')) {
                this.get('target.model.recipients').forEach(function(recipient){
                    // I have set only for fixed phones as
                    // in SOS's address database we have only fixed line
                    // phones
                    recipient.set('privateFixed',privateRule)
                    recipient.set('entrprseFixed',enterpriseRule)
                    recipient.set('privateMobile',privateRule)
                    recipient.set('entrprseMobile',enterpriseRule)
                    recipient.set("email", (hasEmailChannel) ? "true" : "none");
                })
            }
            Ember.Logger.debug("value of private: "+ privateRule + "--value of enterprise: " + enterpriseRule);
        }
    }.observes('addPrivate', 'addEnterprise', 'target.model.channels.@each','target.model.recipients.@each'),
    setRecipientType: function() {
        if(this.get('target.model') != null) {
            var privateRule = this.get('target.model').get("privateFixed");
            var enterpriseRule = this.get('target.model').get("entrprseFixed");
            if (privateRule == "none") {
                this.set('addPrivate', false)
            } else if (privateRule == "Fixed Voice") {
                this.set('addPrivate', true)
            }
            if (enterpriseRule == "none") {
                this.set('addEnterprise', false)
            } else if (enterpriseRule == "Fixed Voice") {
                this.set('addEnterprise', true)
            }
        }
    }.observes('target.model.entrprseFixed'),
    groupAndPersonRecipients:function(){
        var tempGroupAndPersons =  new Array();
        var tempRecipients=  this.get("target.model.recipients")
        for(var i=0;i<tempRecipients.get('length');i++) {
            if(!(tempRecipients[i] instanceof Area) ){
                tempGroupAndPersons.push(tempRecipients[i]);
            }
        }
        this.set("target.model.onlyGroupAndPersons" , tempGroupAndPersons);
    },
    noRecipientChecker: function() {
        var self = this;
        var invalidChannelCount = 0;
        if (this.get('alertModel.channels') != null) {
            this.get('alertModel.channels').forEach(function(channel){
                if(channel.get('validationErrors.countInvalid')){
                    ++invalidChannelCount;
                }
            })
            if(invalidChannelCount!=0) {
                if(invalidChannelCount == this.get('alertModel.channels').toArray().length){
                    this.set('noRecipientsError',true)
                } else if(invalidChannelCount < this.get('alertModel.channels').toArray().length){
                    this.set('noRecipientsWarning',true)
                } else{
                    this.set('noRecipientsError',false)
                    this.set('noRecipientsWarning',false)
                }
            }
        }
    },
    channelCountObserver: function() {
        var self = this;
        if (this.get('alertModel.channels') != null) {
            this.get('alertModel.channels').forEach(function(channel){
                if(channel instanceof VoiceChannel){
                    self.set('voiceChannel',channel);
                } else if(channel instanceof SmsChannel){
                    self.set('smsChannel',channel);
                } else if(channel instanceof EmailChannel){
                    self.set('emailChannel',channel);
                }
            })
        }
    }.observes('alertModel.channels.@each'),
    modelChanged: function(){
        this.set("privateCount" ,0)
        this.set("enterpriseCount" ,0)
    }.observes('target.model'),
    resetObserver: function() {
        if(this.get('target.isReset')) {
            this.set('addEnterprise', true)
            this.set('addPrivate', true)
        }
    }.observes('target.isReset'),
    disableApply :function(){
        var setSegment = this.get("target.model.filters")
        if(setSegment.length>0){
            return (setSegment.contains(this.get("selectedSegment")))
        } else{
            return false;
        }
    }.property("selectedSegment"),
    categoryNameTruncator:function() {
        var maxLength = this.get('maxEventNameLength')
        var self = this;
        self.set("categoryNameArray",[]);
        if(this.get("event.categoryPath.length") > maxLength) {
            var nameArray = this.get("event.categoryPath").split(" ");
            self.get("categoryNameArray").pushObjects(self.stringMaker(nameArray));
        } else {
            self.get("categoryNameArray").push(this.get("event.categoryPath"));
        }

    },
    stringMaker:function(nameArray) {
        var maxLength = this.get('maxCategoryNameLength');
        var finalEventArray = [];
        finalEventArray.push("");
        var self = this;
        nameArray.forEach(function(name){
            var stringToPush = finalEventArray[finalEventArray.length-1] + " " + name+"/";
            // check if new element combined with last
            // element of finalEventArray is greater than
            // max length.
            if(stringToPush.length > maxLength) {
                //check for new element's length
                if(name.length > maxLength){
                    var trimmedStringArray = self.stringTrimmer(name);
                    trimmedStringArray.forEach(function(trimmedString){
                        finalEventArray.push(trimmedString);
                    })
                } else {
                    finalEventArray.push(name);
                }
            } else {
                finalEventArray[finalEventArray.length-1] = stringToPush;
            }
        })
        return finalEventArray.filter(function(element){return element !== ''});;
    },
    stringTrimmer:function(string) {
        var maxLength = this.get('maxCategoryNameLength')
        var stringArray = [];
        if(string.length > maxLength) {
            var fullName = string;
            stringArray.push(fullName.substring(0,maxLength));
            stringArray.push(fullName.substring(maxLength,fullName.length));
        } else {
            stringArray.push(string)
        }
        return stringArray;
    },

});

availableChannels_ChannelSelectionView.js

var App = require("core/App");

require("./channelSelection");
require("alertComposer/core/SelectedChannelIconView");
require("./IndividualChannelView");
require("./SegmentSelectionView");

module.exports = App.ChannelSelectionView = Ember.View.extend({
    templateName: "alertComposer/availableChannels/channelSelection",
    error: function() {
        return this.get("controller.content.validationErrors.channelInvalid");
    }.property("controller.content.validationErrors.channelInvalid"),
    didInsertElement:function() {
        this.get('controller').groupAndPersonRecipients();
        this.get('controller').noRecipientChecker();
        this.get('controller').setSelectedSegment();
    },
    isNameDisplayed:true
})

availableChannels_individualChannel.hbs

{{#if view.channelAdded}}
    <span class="channelLabel">{{t composer.map}} :</span> &nbsp
    {{#if target.isSplitCountForMapEnabled}}
        {{view.channel.privateRecipient}}
        {{view Ember.Checkbox  titleBinding =private  checkedBinding=view.addPrivate}}
        {{t composer.private}}{{view.channel.privateRecipient}}:<span class="channelLabel">{{view.privateCountDisplay}}</span>
        {{view Ember.Checkbox  titleBinding =enterprise  checkedBinding=controller.addEnterprise}}
        {{t composer.enterprise}}{{view.channel.enterpriseRecipient}}:<span class="channelLabel">{{view.enterpriseCountDisplay}}</span>
    {{else}}
        <span class="channelLabel">{{view.mapCountDisplay}}</span> &nbsp
    {{/if}}
    {{#if target.isGasTabEnabled}}
        <span class="channelLabel">{{t common.select.person.or.group}}:{{view.groupPersonCountDisplay}}</span> &nbsp
    {{/if}}
    <span class="channelLabel">{{t composer.total}}:{{view.totalCountDisplay}}</span>
{{/if}}

availableChannels_IndividualChannelView.js

var App = require("core/App")

var Voice = require("alertComposer/voice/VoiceChannel")
var Sms =  require("alertComposer/sms/SmsChannel")
var Email = require("alertComposer/email/EmailChannel")
require("./individualChannel");
require("alertComposer/channel/Channel")


var iconMap = {}
var imgMap = {}


imgMap[Voice] = "/static/img/icon_voice_channel.png"
imgMap[Sms] = "/static/img/icon_sms_channel.png"
imgMap[Email] = "/static/img/icon_email_channel.png"

module.exports = App.IndividualChannelView = Ember.View.extend({
    templateName: "alertComposer/availableChannels/individualChannel",
    channel:null,
    channelAdded :false,
    channelObject : null,
    isVoice:function() {
        var channel = this.get("channel")
        if (this.get("channel") === App.VoiceChannel) {
            return true
        } else {
            return false
        }
    }.property("channel"),
    privateCountDisplay:function(){
        var count = 0;
        if(!isNaN(this.get("channelObject.privateCount"))) {
            count = this.get("channelObject.privateCount");
            return count;
        }
        else{
            return "Updating..."
        }

    }.property("channelObject.privateCount"),
    enterpriseCountDisplay:function(){
        var count = 0;
        if(!isNaN(this.get("channelObject.enterpriseCount"))) {
            count = this.get("channelObject.enterpriseCount");
            return count;
        }
        else{
            return "Updating..."
        }

    }.property("channelObject.enterpriseCount"),
    mapCountDisplay:function(){
        var count = 0;
        if(!isNaN(this.get("channelObject.mapCount"))) {
            count = this.get("channelObject.mapCount")
            return count;
        }
        else{
            return "Updating..."
        }

    }.property("channelObject.mapCount"),
    groupPersonCountDisplay:function(){
        var count = 0;
        if(!isNaN(this.get("channelObject.groupPersonCounts"))) {
            count = this.get("channelObject.groupPersonCounts")
            return count;
        }
        else{
            return "Updating..."
        }
    }.property("channelObject.groupPersonCounts"),
    totalCountDisplay:function(){
        var count =0;
        if(!isNaN(this.get("channelObject.groupPersonCounts"))&& !isNaN(this.get("channelObject.mapCount"))) {
            count = this.get("channelObject.groupPersonCounts")+this.get("channelObject.mapCount")
            removePreloader()
            return count;
        }    else{
            addPreloader()
            return "Updating..."
        }
    } .property("channelObject.groupPersonCounts","channelObject.mapCount")
})

availableChannels_segmentSelection.hbs

<div class="control-group callFlowTopMargin">
    <br/>
    {{view Ember.Select contentBinding="availableSegments" valueBinding="selectedSegment"
    optionLabelPath="content.name" optionValuePath="content" promptBinding= "view.promptDropDown"}}
    <button class="btn btn-tertiary" {{action setModal "customize"}}>
        {{t common.view}}
    </button>
    <button class="btn btn-secondary"  {{bind-attr disabled= disableApply}} {{action applySegmentFilter }}>
        {{t common.apply}}
    </button>
</div>

{{#view UI.ModalView name="customize" activeModalBinding="target.activeModal" class="custompop" }}
    <div class="modal-header">
        <button type="button" class="close" {{action setModal "none"}}  {{translateAttr title="tooltip.directory.close"}}   aria-hidden="true">&times;</button>
        <h3 id="myModalLabel">{{t composer.event.filterRecipient}}</h3>
    </div>
    <div class="modal-body">
        <div class="form-horizontal customizeChannel">
            <div class="control-group">
                <label class="control-label labelWithNoMargin"> {{t addressbook.segment.name}}:</label>
                <label class="control-label segmentDesc">{{selectedSegment.name}} </label>
            </div>
            <div class="control-group">
                <label class="control-label labelWithNoMargin"> {{t addressbook.segment.description}}:</label>
                <label class="control-label segmentDesc ">{{selectedSegment.description}}</label>
            </div>
            {{#each thisCriteria in selectedSegment.criteria}}
                <div class="control-group">
                    <label class="control-label labelWithNoMargin">   {{ thisCriteria.name}}:</label>
                    <label class="control-label segmentDesc">{{thisCriteria.text}} </label>
                </div>
            {{/each}}
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn btn-tertiary" {{action setModal "none" target="target"}}>{{t composer.close}}</button>
    </div>
{{/view}}

availableChannels_SegmentSelectionView.js

var App = require("core/App")

require("./segmentSelection")

module.exports = App.SegmentSelectionView = Ember.View.extend(  {
    templateName: "alertComposer/availableChannels/segmentSelection"  ,
    promptDropDown : function(){
        return Ember.I18n.t("composer.filter.recipients")
    }.property(),
    disableApply :function(){
        var setSegment = this.get("controller.target.model.filters")
        if(setSegment.length>0){
            return (setSegment.contains(this.get("controller.selectedSegment")))
        } else{
            return false;
        }
    }.property("controller.selectedSegment"),
    applySegmentFilter:function(){
        this.get("controller").applySegmentFilter()
        this.get("disableApply")
    }
})