From 5ad3c38a04da81ae0fa015a41bc859564402dca4 Mon Sep 17 00:00:00 2001
From: Henning Leutz <leutz@pcsg.de>
Date: Thu, 9 Apr 2020 10:47:34 +0200
Subject: [PATCH] feat: quiqqer/customer#30 - customer comments -> filter
---
.../controls/customer/Panel.Comments.js | 68 +++++++++++++++++--
bin/backend/controls/customer/Panel.css | 34 +++++++++-
bin/backend/controls/customer/Panel.js | 3 +
locale.xml | 4 ++
4 files changed, 104 insertions(+), 5 deletions(-)
diff --git a/bin/backend/controls/customer/Panel.Comments.js b/bin/backend/controls/customer/Panel.Comments.js
index 2cfc4f4..9b976e1 100644
--- a/bin/backend/controls/customer/Panel.Comments.js
+++ b/bin/backend/controls/customer/Panel.Comments.js
@@ -25,7 +25,8 @@ define('package/quiqqer/customer/bin/backend/controls/customer/Panel.Comments',
Binds: [
'addComment',
- '$onInject'
+ '$onInject',
+ '$onFilter'
],
options: {
@@ -37,6 +38,7 @@ define('package/quiqqer/customer/bin/backend/controls/customer/Panel.Comments',
this.$Comments = null;
this.$AddCommentButton = null;
+ this.$FilterInput = null;
this.$editComments = false;
@@ -51,7 +53,30 @@ define('package/quiqqer/customer/bin/backend/controls/customer/Panel.Comments',
* @return {HTMLDivElement}
*/
create: function () {
+ var self = this;
+
this.$Elm = this.parent();
+ this.$Elm.addClass('quiqqer-customer-comments');
+
+ var Header = new Element('section', {
+ 'class': 'quiqqer-customer-comments-header',
+ html : '<div class="quiqqer-customer-comments-header-filter">' +
+ ' <input type="text" name="filter" /> ' +
+ '</div>'
+ }).inject(this.$Elm);
+
+ this.$FilterInput = Header.getElement('[name="filter"]');
+ this.$FilterInput.placeholder = QUILocale.get(lg, 'window.add.comment.filter.placeholder');
+
+ this.$FilterInput.addEvent('keyup', function () {
+ if (typeof self.$timer !== 'undefined') {
+ clearTimeout(self.$timer);
+ }
+
+ self.$timer = (function () {
+ self.$onFilter();
+ }).delay(200);
+ });
this.$AddCommentButton = new QUIButton({
textimage: 'fa fa-comment',
@@ -64,8 +89,11 @@ define('package/quiqqer/customer/bin/backend/controls/customer/Panel.Comments',
}
});
- this.$AddCommentButton.inject(this.$Elm);
- new Element('section').inject(this.$Elm);
+ this.$AddCommentButton.inject(Header);
+
+ new Element('section', {
+ 'class': 'quiqqer-customer-comments-list'
+ }).inject(this.$Elm);
return this.$Elm;
},
@@ -96,7 +124,7 @@ define('package/quiqqer/customer/bin/backend/controls/customer/Panel.Comments',
*/
refresh: function (comments) {
var self = this;
- var Section = this.$Elm.getElement('section');
+ var Section = this.$Elm.getElement('.quiqqer-customer-comments-list');
Section.set('html', '');
@@ -121,6 +149,8 @@ define('package/quiqqer/customer/bin/backend/controls/customer/Panel.Comments',
});
},
+ // region comment list
+
/**
* return all comments for the user
*
@@ -238,6 +268,36 @@ define('package/quiqqer/customer/bin/backend/controls/customer/Panel.Comments',
}
}
}).open();
+ },
+
+ // endregion
+
+ // region filter
+
+ /**
+ * event: on filter
+ */
+ $onFilter: function () {
+ if (!this.$Comments) {
+ return;
+ }
+
+ if (typeof this.$Comments.filter === 'undefined') {
+ return;
+ }
+
+ var value = this.$FilterInput.value;
+
+ if (value === '') {
+ this.$Comments.clearFilter();
+ return;
+ }
+
+ this.$Comments.filter(
+ this.getElm().getElement('[name="filter"]').value
+ );
}
+
+ // endregion
});
});
diff --git a/bin/backend/controls/customer/Panel.css b/bin/backend/controls/customer/Panel.css
index d8f835a..bd4d4db 100644
--- a/bin/backend/controls/customer/Panel.css
+++ b/bin/backend/controls/customer/Panel.css
@@ -17,4 +17,36 @@
.quiqqer-customer-address-select [name="address-country"] {
width: 30%;
-}
\ No newline at end of file
+}
+
+
+/** comments
+ ===================================== */
+
+.quiqqer-customer-comments {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+.quiqqer-customer-comments-header {
+ background: #f7f7f7;
+ display: inline-block;
+ padding: 20px;
+ width: 100%;
+}
+
+.quiqqer-customer-comments-header-filter {
+ float: left;
+}
+
+.quiqqer-customer-comments-header-filter input {
+ width: 300px;
+}
+
+.quiqqer-customer-comments-list {
+ display: inline-block;
+ overflow: auto;
+ padding: 20px;
+ width: 100%;
+}
diff --git a/bin/backend/controls/customer/Panel.js b/bin/backend/controls/customer/Panel.js
index a665bfe..64e8b0b 100644
--- a/bin/backend/controls/customer/Panel.js
+++ b/bin/backend/controls/customer/Panel.js
@@ -981,6 +981,7 @@ define('package/quiqqer/customer/bin/backend/controls/customer/Panel', [
this.Loader.show();
this.$categoryUnload();
+ this.getBody().setStyle('padding', 20);
this.$hideCategory().then(function () {
if (category === 'information') {
@@ -992,6 +993,8 @@ define('package/quiqqer/customer/bin/backend/controls/customer/Panel', [
}
if (category === 'comments') {
+ self.getBody().setStyle('padding', 0);
+
return self.$openComments();
}
diff --git a/locale.xml b/locale.xml
index 10a7b7d..49e63bd 100644
--- a/locale.xml
+++ b/locale.xml
@@ -522,6 +522,10 @@
<de><![CDATA[Kommentar editieren]]></de>
<en><![CDATA[Edit comment]]></en>
</locale>
+ <locale name="window.add.comment.filter.placeholder">
+ <de><![CDATA[Filter ()...]]></de>
+ <en><![CDATA[]]></en>
+ </locale>
<locale name="control.users.select.search.field.placeholder">
<de><![CDATA[Kunden suchen ...]]></de>
--
GitLab