feat: active status switch in discount edit sheet

bin/controls/DiscountEdit.css

@@ -18,4 +18,19 @@
 .discount-edit-vat .field-container-item {
     line-height: 30px;
     padding: 0 0.75em;
+}
+
+.quiqqer-discount-entry-edit-buttons {
+    float: left;
+    height: 40px;
+    width: 100%;
+}
+
+.quiqqer-discount-entry-edit-buttons .qui-button-switch {
+    background: #ededed !important;
+    color: black;
+}
+
+.quiqqer-discount-entry-edit-buttons .qui-button-switch:hover {
+    color: #6a6a6a;
 }
\ No newline at end of file

bin/controls/DiscountEdit.html

+<div class="quiqqer-discount-entry-edit-buttons">
+
+</div>
+
 <form>
     <table class="data-table data-table-flexbox">
         <thead>

bin/controls/DiscountEdit.js

@@ -11,6 +11,7 @@ define('package/quiqqer/discount/bin/controls/DiscountEdit', [
     'qui/QUI',
     'qui/controls/Control',
     'qui/controls/buttons/Button',
+    'qui/controls/buttons/ButtonSwitch',
     'qui/utils/Form',
     'Locale',
     'Mustache',
@@ -20,7 +21,7 @@ define('package/quiqqer/discount/bin/controls/DiscountEdit', [
     'text!package/quiqqer/discount/bin/controls/DiscountEdit.html',
     'css!package/quiqqer/discount/bin/controls/DiscountEdit.css'
 
-], function (QUI, QUIControl, QUIButton, QUIFormUtils, QUILocale,
+], function (QUI, QUIControl, QUIButton, QUIButtonSwitch, QUIFormUtils, QUILocale,
              Mustache, Discounts, Translation, template) {
     "use strict";
 
@@ -32,7 +33,8 @@ define('package/quiqqer/discount/bin/controls/DiscountEdit', [
         Type   : 'package/quiqqer/discount/bin/controls/DiscountEdit',
 
         Binds: [
-            '$onInject'
+            '$onInject',
+            '$onActiveStatusChange'
         ],
 
         options: {
@@ -42,6 +44,8 @@ define('package/quiqqer/discount/bin/controls/DiscountEdit', [
         initialize: function (options) {
             this.parent(options);
 
+            this.$ActiveSwitch = null;
+
             this.addEvents({
                 onInject: this.$onInject
             });
@@ -114,6 +118,14 @@ define('package/quiqqer/discount/bin/controls/DiscountEdit', [
                 opacity : 0
             });
 
+            this.$ActiveSwitch = new QUIButtonSwitch({
+                status: false,
+                text  : QUILocale.get(lg, 'control.edit.btn.active.status_off'),
+                events: {
+                    onChange: this.$onActiveStatusChange
+                }
+            }).inject(this.$Elm.getElement('.quiqqer-discount-entry-edit-buttons'));
+
             return this.$Elm;
         },
 
@@ -167,6 +179,11 @@ define('package/quiqqer/discount/bin/controls/DiscountEdit', [
                         'html',
                         '#' + self.getAttribute('discountId')
                     );
+
+                    if (parseInt(data.active)) {
+                        self.$ActiveSwitch.setAttribute('text', QUILocale.get(lg, 'control.edit.btn.active.status_on'));
+                        self.$ActiveSwitch.setSilentOn();
+                    }
                 }).then(function () {
                     return QUI.parse(self.$Elm);
 
@@ -243,6 +260,40 @@ define('package/quiqqer/discount/bin/controls/DiscountEdit', [
                 }).catch(reject);
 
             });
+        },
+
+        /**
+         * If active switch is triggered
+         */
+        $onActiveStatusChange: function () {
+            this.$ActiveSwitch.disable();
+
+            let Promise;
+            const targetStatus = this.$ActiveSwitch.getStatus();
+
+            if (targetStatus) {
+                Promise = Discounts.activate(this.getAttribute('discountId'));
+            } else {
+                Promise = Discounts.deactivate(this.getAttribute('discountId'));
+            }
+
+            Promise.then((activeStatus) => {
+                this.$ActiveSwitch.enable();
+
+                if (!!activeStatus !== !!targetStatus) {
+                    return;
+                }
+
+                this.fireEvent('activeStatusChange', [activeStatus, this]);
+
+                if (activeStatus) {
+                    this.$ActiveSwitch.setAttribute('text', QUILocale.get(lg, 'control.edit.btn.active.status_on'));
+                    this.$ActiveSwitch.setSilentOn();
+                } else {
+                    this.$ActiveSwitch.setAttribute('text', QUILocale.get(lg, 'control.edit.btn.active.status_off'));
+                    this.$ActiveSwitch.setSilentOff();
+                }
+            });
         }
     });
 });

bin/controls/Discounts.js

@@ -396,9 +396,12 @@ define('package/quiqqer/discount/bin/controls/Discounts', [
                                 var Discount = new DiscountEdit({
                                     discountId: discountId,
                                     events    : {
-                                        onLoaded: function () {
+                                        onLoaded            : function () {
                                             self.Loader.hide();
                                             resolve();
+                                        },
+                                        onActiveStatusChange: () => {
+                                            self.refresh();
                                         }
                                     }
                                 }).inject(Sheet.getContent());

locale.xml

@@ -315,6 +315,15 @@
             <en><![CDATA[gross]]></en>
         </locale>
 
+        <locale name="control.edit.btn.active.status_on">
+            <de><![CDATA[aktiv]]></de>
+            <en><![CDATA[active]]></en>
+        </locale>
+        <locale name="control.edit.btn.active.status_off">
+            <de><![CDATA[inaktiv]]></de>
+            <en><![CDATA[inactive]]></en>
+        </locale>
+
         <locale name="control.select.search.placeholder">
             <de><![CDATA[Suche nach einem Rabatt ...]]></de>
             <en><![CDATA[Search for a discount ...]]></en>