dsfdf.js

import Ember from 'ember';
import DS from 'ember-data';

export default Ember.Component.extend({
    store: Ember.inject.service(),

    showOptions: true,
    types: [
        'country',
        'province',
        'zone'
    ],
    scopes: [
        'geen scope',
        'shipping',
        'content',
        'price'
    ],

    showNoResultsForQueryInMembers: function() {
        return this.get('zone.members.isFulfilled') && !!this.get('query') && !this.get('showOptions');
    }.property('zone.members.isFulfilled', 'query', 'showOptions'),

    showNoResultsForQuery: function() {
        return this.get('zone.members.isFulfilled') && !!this.get('query') && this.get('showOptions');
    }.property('zone.members.isFulfilled', 'query', 'showOptions'),

    showNoMembers: function() {
        return this.get('zone.members.isFulfilled') && !this.get('zone.members.length') && !this.get('showOptions');
    }.property('zone.members.isFulfilled', 'zone.members.length', 'showOptions'),

    countryMembers: function() {
        return DS.PromiseArray.create({
            promise: this.get('store').query('country', {
                limit: 0
            }).then((countries) => {
                return this.createMembers(countries);
            })
        });
    }.property(),

    provinceMembers: function() {
        return DS.PromiseArray.create({
            promise: this.get('store').query('province', {
                limit: 0
            }).then((provinces) => {
                return this.createMembers(provinces);
            })
        });
    }.property(),

    zoneMembers: function() {
        return DS.PromiseArray.create({
            promise: this.get('store').query('zone', {
                limit: 0
            }).then((zones) => {
                return this.createMembers(zones);
            })
        });
    }.property(),

    /**
     * @param collection
     * @returns {Array}
     */
    createMembers(collection) {
        return this.get('zone.members').then((addedMembers) => {
            let store = this.get('store'),
                memberCodes = addedMembers.filterBy('isDeleted', false).mapBy('code'),
                members = [],
                code;

            members.addObjects(addedMembers);

            collection.forEach((record) => {
                code = record.get('code');

                if (!memberCodes.contains(code)) {
                    members.addObject(store.createRecord('zone-member', {
                        code: code,
                        _name: record.get('name')
                    }));
                }
            });

            return members;
        });
    },

    members: function() {
        let members;

        switch (this.get('zone.type')) {
            case 'country':
                members = this.get('countryMembers');
                break;
            case 'province':
                members = this.get('provinceMembers');
                break;
            case 'zone':
                members = this.get('zoneMembers');
                break;
            default:
                return [];
        }

        let query = this.get('query'),
            regExp = new RegExp(query, 'gi');

        return DS.PromiseArray.create({
            promise: members.then((members) => {
                return members.filter((member) => {
                    let code = member.get('code'),
                        name = String(member.get('_name')),
                        nameMatch = name.match(regExp),
                        codeMatch = code.match(regExp);

                    if (nameMatch && query) {
                        let newName = name.replace(nameMatch, '<strong><u>' + query + '</u></strong>');
                        name = newName;
                    }

                    member.set('_displayName', name);

                    return nameMatch || codeMatch;
                });
            })
        });
    }.property('zone.type', 'query', 'countryMembers', 'provinceMembers', 'zoneMembers'),

    scope: Ember.computed('zone.scope', {
        get() {
            let scope = this.get('zone.scope');
            if (!scope) {
                return this.get('scopes.firstObject');
            } else {
                return scope;
            }
        },
        set(key, value) {
            if (this.get('scopes.firstObject') === value) {
                this.set('zone.scope', null);
            } else {
                this.set('zone.scope', value);
            }
            return value;
        }
    }),

    actions: {
        toggleShowOptions() {
            this.toggleProperty('showOptions');
        },

        removeMember(member) {
            member.set('zone', null);
            member.set('_hasZone', false);
        },

        addMember(member) {
            member.set('zone', this.get('zone'));
            member.set('_hasZone', true);
        },

        onTypeChange(type) {
            this.get('zone.').clear();

            this.set('zone.type', type);
        }
    }
});