@fleetbase/ember-ui/addon/components/country-select.js

Fleetbase UI provides all the interface components, helpers, services and utilities for building a Fleetbase extension into the Console.

import Component from '@glimmer/component';
import { inject as service } from '@ember/service';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';
import { guidFor } from '@ember/object/internals';
import { task } from 'ember-concurrency';

export default class CountrySelectComponent extends Component {
    @service fetch;
    @tracked countries = [];
    @tracked selected;
    @tracked disabled = false;
    @tracked value;
    @tracked id = guidFor(this);

    get renderInPlace() {
        return this.args.renderInPlace ?? true;
    }

    constructor(owner, { value = null, disabled = false }) {
        super(...arguments);
        this.disabled = disabled;
        this.value = value;
        this.fetchCountries.perform(value);
    }

    @task *fetchCountries(value = null) {
        try {
            this.countries = yield this.fetch.get(
                'lookup/countries',
                { columns: ['name', 'cca2', 'flag', 'emoji'] },
                { fromCache: true, expirationInterval: 1, expirationIntervalUnit: 'week' }
            );
            this.selected = this.findCountry(value);
        } catch (error) {
            this.countries = [];
        }
    }

    @action changed(value) {
        const country = this.findCountry(value);

        if (country) {
            this.selectCountry(country);
        }
    }

    @action handleChange(el, [value]) {
        this.selected = this.findCountry(value);
    }

    @action selectCountry(country) {
        const { onChange } = this.args;
        this.selected = country;

        if (country && typeof onChange === 'function') {
            onChange(country.cca2, country);
        }
    }

    findCountry(iso2) {
        if (typeof iso2 === 'string') {
            return this.countries.find((country) => country.cca2 === iso2.toUpperCase());
        }

        return null;
    }
}