Merge branch 'next' into 'master'

Next

See merge request !30

bin/controls/Select.js

+/**
+ * Makes an input field to a currency selection field
+ *
+ * @module package/quiqqer/currency/bin/controls/Select
+ * @author www.pcsg.de (Henning Leutz)
+ *
+ * @event onChange [ this ]
+ */
+define('package/quiqqer/currency/bin/controls/Select', [
+
+    'qui/QUI',
+    'qui/controls/elements/Select',
+    'package/quiqqer/currency/bin/Currency',
+    'Locale'
+
+], function(QUI, QUIElementSelect, Currencies, QUILocale) {
+    'use strict';
+
+    const lg = 'quiqqer/currency';
+
+    /**
+     * @param {Object} options
+     * @param {HTMLInputElement} [Input]  - (optional), if no input given, one would be created
+     *
+     * @memberof! <global>
+     */
+    return new Class({
+
+        Extends: QUIElementSelect,
+        Type: 'package/quiqqer/currency/bin/controls/Select',
+
+        Binds: [
+            '$onSearchButtonClick',
+            'currencySearch'
+        ],
+
+        options: {},
+
+        initialize: function(options) {
+            this.parent(options);
+
+            this.setAttribute('Search', this.currencySearch);
+            this.setAttribute('icon', 'fa fa-money');
+            this.setAttribute(
+                'child',
+                'package/quiqqer/currency/bin/controls/SelectItem'
+            );
+
+            this.setAttribute(
+                'placeholder',
+                QUILocale.get(lg, 'control.select.search.placeholder')
+            );
+
+            this.addEvents({
+                onSearchButtonClick: this.$onSearchButtonClick
+            });
+        },
+
+        /**
+         * Search areas
+         *
+         * @param {String} value
+         * @returns {Promise}
+         */
+        currencySearch: function(value) {
+            return new Promise((resolve) => {
+                require(['package/quiqqer/currency/bin/settings/AllowedCurrencies'], (AllowedCurrencies) => {
+                    let GetCurrencies;
+
+                    if (this.getAttribute('onlyAllowed')) {
+                        GetCurrencies = Currencies.getCurrencies();
+                    } else {
+                        GetCurrencies = new AllowedCurrencies().getCurrencies();
+                    }
+
+                    GetCurrencies.then((list) => {
+                        let result = [], data;
+                        value = value.toLowerCase();
+
+
+                        for (let currency in list) {
+                            if (!list.hasOwnProperty(currency)) {
+                                continue;
+                            }
+
+                            data = list[currency];
+                            
+                            if (data.text.toLowerCase().indexOf(value) !== -1) {
+                                result.push({
+                                    icon: 'fa fa-money',
+                                    title: '#' + data.code + ' - <b>' + data.text + '</b>',
+                                    id: data.code
+                                });
+                            }
+                        }
+
+                        resolve(result);
+                    });
+                });
+            });
+        },
+
+        /**
+         * event : on search button click
+         *
+         * @param self
+         * @param Btn
+         */
+        $onSearchButtonClick: function(self, Btn) {
+            Btn.setAttribute('icon', 'fa fa-spinner fa-spin');
+
+            require([
+                'package/quiqqer/currency/bin/controls/search/Window'
+            ], function(Search) {
+                new Search({
+                    events: {
+                        onSubmit: function(Win, values) {
+                            for (let i = 0, len = values.length; i < len; i++) {
+                                self.addItem(values[i]);
+                            }
+                        }
+                    }
+                }).open();
+
+                Btn.setAttribute('icon', 'fa fa-search');
+            });
+        }
+    });
+});

bin/controls/SelectItem.css

+.quiqqer-currency-selectItem {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    clear: both;
+    cursor: default;
+    float: left;
+    font-size: 14px;
+    line-height: 20px;
+    padding: 5px;
+    width: 100%;
+}
+
+.quiqqer-currency-selectItem:hover {
+    background: rgba(0, 0, 0, 0.1);
+}
+
+.quiqqer-currency-selectItem-icon {
+    float: left;
+    line-height: 20px;
+    text-align: center;
+    width: 30px;
+}
+
+.quiqqer-currency-selectItem-text {
+    float: left;
+    line-height: 20px;
+    overflow: hidden;
+    padding: 0 10px 0 0;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: calc(100% - 50px);
+}
+
+.quiqqer-currency-selectItem-destroy {
+    cursor: pointer;
+    float: left;
+    line-height: 20px;
+    text-align: center;
+    visibility: hidden;
+    width: 20px;
+}
+
+.quiqqer-currency-selectItem:hover .quiqqer-currency-selectItem-destroy {
+    visibility: visible;
+}
+
+.quiqqer-currency-selectItem-destroy:hover {
+    background: #2F8FC6;
+    color: #FFFFFF;
+}

bin/controls/SelectItem.js

+/**
+ * @module package/quiqqer/currency/bin/controls/currency/SelectItem
+ * @author www.pcsg.de (Henning Leutz)
+ */
+define('package/quiqqer/currency/bin/controls/SelectItem', [
+
+    'qui/controls/Control',
+    'package/quiqqer/currency/bin/Currency',
+
+    'css!package/quiqqer/currency/bin/controls/SelectItem.css'
+
+], function(QUIControl, Currencies) {
+    'use strict';
+
+    return new Class({
+
+        Extends: QUIControl,
+        Type: 'package/quiqqer/currency/bin/controls/SelectItem',
+
+        Binds: [
+            '$onInject'
+        ],
+
+        options: {
+            id: false
+        },
+
+        initialize: function(options) {
+            this.parent(options);
+
+            this.$Icon = null;
+            this.$Text = null;
+            this.$Destroy = null;
+
+            this.addEvents({
+                onInject: this.$onInject
+            });
+        },
+
+        /**
+         * Return the DOMNode Element
+         *
+         * @returns {HTMLElement}
+         */
+        create: function() {
+            const self = this,
+                Elm = this.parent();
+
+            Elm.set({
+                'class': 'quiqqer-currency-selectItem smooth',
+                html: '<span class="quiqqer-currency-selectItem-icon fa fa-money"></span>' +
+                    '<span class="quiqqer-currency-selectItem-text">&nbsp;</span>' +
+                    '<span class="quiqqer-currency-selectItem-destroy fa fa-remove"></span>'
+            });
+
+            this.$Icon = Elm.getElement('.quiqqer-currency-selectItem-icon');
+            this.$Text = Elm.getElement('.quiqqer-currency-selectItem-text');
+            this.$Destroy = Elm.getElement('.quiqqer-currency-selectItem-destroy');
+
+            this.$Destroy.addEvent('click', function() {
+                self.destroy();
+            });
+
+            return Elm;
+        },
+
+        /**
+         * event : on inject
+         */
+        $onInject: function() {
+            this.$Text.set({
+                html: '<span class="fa fa-spinner fa-spin"></span>'
+            });
+
+            Currencies.getCurrency(this.getAttribute('id')).then((data) => {
+                this.$Text.set('html', '#' + data.code + ' - <b>' + data.text + '</b>');
+                this.getElm().set('title', '#' + data.code + ' - ' + data.text);
+            }).catch(() => {
+                this.$Icon.removeClass('fa-money');
+                this.$Icon.addClass('fa-bolt');
+                this.$Text.set('html', '...');
+
+                this.$Destroy.click();
+            });
+        }
+    });
+});

bin/controls/search/Search.css

+.quiqqer-currency-search {
+    float: left;
+    width: 100%;
+}
+
+.quiqqer-currency-search-form {
+    float: left;
+    margin-bottom: 10px;
+    width: 100%;
+}
+
+.quiqqer-currency-search-form [type="search"] {
+    float: left;
+    max-width: calc(100% - 80px);
+    width: 300px;
+}

bin/controls/search/Search.js

+/**
+ * @module package/quiqqer/currency/bin/backend/controls/search/Search
+ * @author www.pcsg.de (Henning Leutz)
+ */
+define('package/quiqqer/currency/bin/controls/search/Search', [
+
+    'qui/controls/Control',
+    'package/quiqqer/currency/bin/Currency',
+    'qui/controls/buttons/Button',
+    'qui/controls/buttons/Switch',
+    'Locale',
+    'Ajax',
+    'controls/grid/Grid',
+
+    'css!package/quiqqer/currency/bin/controls/search/Search.css'
+
+], function(QUIControl, Currencies, QUIButton, QUISwitch, QUILocale, QUIAjax, Grid) {
+    'use strict';
+
+    const lg = 'quiqqer/currency';
+
+    return new Class({
+
+        Extends: QUIControl,
+        Type: 'package/quiqqer/currency/bin/controls/search/Search',
+
+        Binds: [
+            'search'
+        ],
+
+        options: {
+            limit: 20,
+            page: 1,
+            search: false,
+            onlyAllowed: true
+        },
+
+        initialize: function(options) {
+            this.parent(options);
+
+            this.$Container = null;
+            this.$Grid = null;
+            this.$Input = null;
+        },
+
+        /**
+         * Return the DOMNode Element
+         *
+         * @returns {HTMLElement}
+         */
+        create: function() {
+            this.$Elm = new Element('div', {
+                'class': 'quiqqer-currency-search',
+                html: '',
+                styles: {
+                    height: '100%',
+                    width: '100%'
+                }
+            });
+
+            this.$Input = this.$Elm.getElement('[type="search"]');
+
+            if (this.getAttribute('search')) {
+                this.$Input.value = this.getAttribute('search');
+            }
+
+            this.$Container = new Element('div');
+            this.$Container.inject(this.$Elm);
+
+            this.$Grid = new Grid(this.$Container, {
+                columnModel: [
+                    {
+                        header: QUILocale.get(lg, 'grid.setting.currency'),
+                        dataIndex: 'code',
+                        dataType: 'string',
+                        width: 60,
+                        editable: true
+                    },
+                    {
+                        header: QUILocale.get(lg, 'grid.setting.sign'),
+                        dataIndex: 'sign',
+                        dataType: 'string',
+                        width: 60,
+                        editable: true
+                    },
+                    {
+                        header: QUILocale.get(lg, 'grid.setting.currency'),
+                        dataIndex: 'title',
+                        dataType: 'string',
+                        width: 100
+                    },
+                    {
+                        header: QUILocale.get(lg, 'grid.setting.typeTitle'),
+                        dataIndex: 'typeTitle',
+                        dataType: 'string',
+                        width: 100
+                    }
+                ],
+                pagination: false,
+                filterInput: true,
+                perPage: this.getAttribute('limit'),
+                page: this.getAttribute('page'),
+                sortOn: this.getAttribute('field'),
+                serverSort: true,
+                showHeader: true,
+                sortHeader: true,
+                alternaterows: true,
+                resizeColumns: true,
+                selectable: true,
+                multipleSelection: true,
+                resizeHeaderOnly: true
+            });
+
+            // Events
+            this.$Grid.addEvents({
+                onDblClick: () => {
+                    this.fireEvent('dblClick', [this]);
+                },
+                onRefresh: this.search
+            });
+
+            this.$Grid.refresh();
+
+            return this.$Elm;
+        },
+
+        /**
+         * Resize
+         *
+         * @return {Promise}
+         */
+        resize: function() {
+            const size = this.$Elm.getSize();
+
+            return Promise.all([
+                this.$Grid.setHeight(size.y),
+                this.$Grid.setWidth(size.x)
+            ]);
+        },
+
+        /**
+         * execute the search
+         */
+        search: function() {
+            this.fireEvent('searchBegin', [this]);
+
+            return new Promise((resolve, reject) => {
+
+                require(['package/quiqqer/currency/bin/settings/AllowedCurrencies'], (AllowedCurrencies) => {
+                    let GetCurrencies;
+
+                    if (this.getAttribute('onlyAllowed')) {
+                        GetCurrencies = Currencies.getCurrencies();
+                    } else {
+                        GetCurrencies = new AllowedCurrencies().getCurrencies();
+                    }
+
+                    GetCurrencies.then((list) => {
+                        let data = [];
+
+                        for (let code in list) {
+                            if (!list.hasOwnProperty(code)) {
+                                continue;
+                            }
+
+                            data.push({
+                                code: list[code].code,
+                                sign: list[code].sign,
+                                title: list[code].text,
+                                typeTitle: list[code].typeTitle
+                            });
+                        }
+
+                        this.$Grid.setData({
+                            data: data
+                        });
+
+                        this.fireEvent('searchEnd', [this]);
+                        resolve();
+                    }).catch(reject);
+                });
+            });
+        },
+
+        /**
+         * Return the selected user data
+         *
+         * @return {Array}
+         */
+        getSelectedData: function() {
+            return this.$Grid.getSelectedData();
+        }
+    });
+});

bin/controls/search/Window.js

+/**
+ * @module package/quiqqer/payments/bin/backend/controls/search/Window
+ * @author www.pcsg.de (Henning Leutz)
+ */
+define('package/quiqqer/currency/bin/controls/search/Window', [
+
+    'qui/QUI',
+    'qui/controls/Control',
+    'qui/controls/buttons/Button',
+    'qui/controls/windows/Confirm',
+    'package/quiqqer/currency/bin/controls/search/Search',
+    'Locale'
+
+], function(QUI, QUIControl, QUIButton, QUIConfirm, Search, QUILocale) {
+    'use strict';
+
+    return new Class({
+
+        Extends: QUIConfirm,
+        Type: 'package/quiqqer/currency/bin/controls/search/Window',
+
+        Binds: [
+            'search',
+            'submit',
+            '$onOpen',
+            '$onResize',
+            '$onSearch',
+            '$onSearchBegin',
+            'tableRefresh'
+        ],
+
+        options: {
+            maxHeight: 600,
+            maxWidth: 800,
+            icon: 'fa fa-search',
+            title: QUILocale.get('quiqqer/currency', 'window.search.title'),
+            autoclose: true,
+            multiple: false
+        },
+
+        initialize: function(options) {
+            this.parent(options);
+
+            this.$Search = null;
+
+            this.addEvents({
+                onOpen: this.$onOpen
+            });
+        },
+
+        /**
+         * event : on resize
+         *
+         * @return {Promise}
+         */
+        $onResize: function() {
+            return this.$Search.resize();
+        },
+
+        /**
+         * Return the DOMNode Element
+         *
+         * @returns {HTMLDivElement}
+         */
+        $onOpen: function(Win) {
+            const self = this,
+                Content = Win.getContent();
+
+            Content.set('html', '');
+
+            this.$Search = new Search({
+                searchbutton: false,
+                events: {
+                    onDblClick: function() {
+                        self.submit();
+                    },
+
+                    onSearchBegin: function() {
+                        self.Loader.show();
+                    },
+
+                    onSearchEnd: function() {
+                        self.Loader.hide();
+                    }
+                }
+            }).inject(Content);
+
+            this.$Search.resize();
+        },
+
+        /**
+         * Execute the search
+         */
+        search: function() {
+            this.$Search.search();
+        },
+
+        /**
+         * Submit
+         *
+         * @fires onSubmit
+         */
+        submit: function() {
+            let selected = this.$Search.getSelectedData();
+
+            if (!selected.length) {
+                return;
+            }
+
+            selected = selected.map((entry) => {
+                return entry.code;
+            });
+
+            this.fireEvent('submit', [this, selected]);
+
+            if (this.getAttribute('autoclose')) {
+                this.close();
+            }
+        }
+    });
+});

bin/settings/CurrencyWindow.js

@@ -9,12 +9,13 @@ define('package/quiqqer/currency/bin/settings/CurrencyWindow', [
     'Locale',
     'package/quiqqer/currency/bin/settings/Currency'
 
-], function (QUI, QUIConfirm, QUILocale, Currency) {
-    "use strict";
+], function(QUI, QUIConfirm, QUILocale, Currency) {
+    'use strict';
 
     return new Class({
+        
         Extends: QUIConfirm,
-        Type   : 'package/quiqqer/currency/bin/settings/CurrencyWindow',
+        Type: 'package/quiqqer/currency/bin/settings/CurrencyWindow',
 
         Binds: [
             '$onOpen',
@@ -22,16 +23,16 @@ define('package/quiqqer/currency/bin/settings/CurrencyWindow', [
         ],
 
         options: {
-            currency : false,
-            icon     : 'fa fa-money',
-            title    : false,
-            texticon : false,
+            currency: false,
+            icon: 'fa fa-money',
+            title: false,
+            texticon: false,
             autoclose: false,
             maxHeight: 600,
-            maxWidth : 600
+            maxWidth: 600
         },
 
-        initialize: function (options) {
+        initialize: function(options) {
             this.setAttribute(
                 'title',
                 QUILocale.get('quiqqer/currency', 'control.currency.title', {
@@ -44,7 +45,7 @@ define('package/quiqqer/currency/bin/settings/CurrencyWindow', [
             this.$Currency = null;
 
             this.addEvents({
-                onOpen  : this.$onOpen,
+                onOpen: this.$onOpen,
                 onSubmit: this.$onSubmit
             });
         },
@@ -52,7 +53,7 @@ define('package/quiqqer/currency/bin/settings/CurrencyWindow', [
         /**
          * event : on open
          */
-        $onOpen: function () {
+        $onOpen: function() {
             this.$Currency = new Currency({
                 currency: this.getAttribute('currency')
             }).inject(this.getContent());
@@ -61,10 +62,10 @@ define('package/quiqqer/currency/bin/settings/CurrencyWindow', [
         /**
          * event : on submit
          */
-        $onSubmit: function () {
+        $onSubmit: function() {
             this.Loader.show();
 
-            this.$Currency.save().then(function () {
+            this.$Currency.save().then(function() {
                 this.Loader.hide();
                 this.close();
             }.bind(this));

locale.xml

@@ -601,5 +601,13 @@
             <de><![CDATA[&nbsp;]]></de>
             <en><![CDATA[&nbsp;]]></en>
         </locale>
+        <locale name="control.select.search.placeholder">
+            <de><![CDATA[Währungen suchen ...]]></de>
+            <en><![CDATA[Search for a currency ...]]></en>
+        </locale>
+        <locale name="window.search.title">
+            <de><![CDATA[Währungen suchen ...]]></de>
+            <en><![CDATA[Search for a currency ...]]></en>
+        </locale>
     </groups>
 </locales>