From 5d86f1980cf6664e37200f23404d7466b323e0f1 Mon Sep 17 00:00:00 2001
From: AlphaX-Projects <77661270+AlphaX-Projects@users.noreply.github.com>
Date: Sat, 19 Feb 2022 10:05:20 -0800
Subject: [PATCH] Add filter fields to Group Management

---
 .../group-management/group-management.src.js  | 14 +++---
 .../name-registration.src.js                  |  2 +-
 .../node-management/node-management.src.js    |  4 +-
 .../plugins/core/puzzles/puzzles.src.js       |  5 ++-
 .../data-management/data-management.src.js    | 11 +++--
 .../plugins/core/qdn/websites.src.js          | 44 ++++++++++++-------
 .../core/reward-share/reward-share.src.js     |  5 ++-
 7 files changed, 52 insertions(+), 33 deletions(-)

diff --git a/qortal-ui-plugins/plugins/core/group-management/group-management.src.js b/qortal-ui-plugins/plugins/core/group-management/group-management.src.js
index 8da2a455..287079db 100644
--- a/qortal-ui-plugins/plugins/core/group-management/group-management.src.js
+++ b/qortal-ui-plugins/plugins/core/group-management/group-management.src.js
@@ -8,6 +8,8 @@ import '@material/mwc-textfield'
 import '@material/mwc-dialog'
 import '@polymer/paper-spinner/paper-spinner-lite.js'
 import '@vaadin/grid/vaadin-grid.js'
+import '@vaadin/grid/vaadin-grid-filter-column.js'
+import '@vaadin/grid/vaadin-grid-sort-column.js'
 import '@vaadin/grid/theme/material/all-imports.js'
 import '@github/time-elements'
 
@@ -141,8 +143,8 @@ class GroupManagement extends LitElement {
 
                 <div class="divCard">
                     <h3 style="margin: 0; margin-bottom: 1em; text-align: center;">Your Joined Groups</h3>
-                    <vaadin-grid theme="compact" id="joinedGroupsGrid" ?hidden="${this.isEmptyArray(this.joinedGroups)}" .items="${this.joinedGroups}" aria-label="Joined Groups" all-rows-visible>
-                        <vaadin-grid-column header="Name" path="groupName"></vaadin-grid-column>
+                    <vaadin-grid theme="large" id="joinedGroupsGrid" ?hidden="${this.isEmptyArray(this.joinedGroups)}" .items="${this.joinedGroups}" aria-label="Joined Groups" all-rows-visible>
+                        <vaadin-grid-column header="Group Name" path="groupName"></vaadin-grid-column>
                         <vaadin-grid-column header="Description" path="description"></vaadin-grid-column>
                         <vaadin-grid-column width="9.8rem" flex-grow="0" header="Role" .renderer=${(root, column, data) => {
                             render(html`${this.renderRole(data.item)}`, root)
@@ -158,10 +160,10 @@ class GroupManagement extends LitElement {
 
                 <div class="divCard">
                     <h3 style="margin: 0; margin-bottom: 1em; text-align: center;">Public Groups</h3>
-                    <vaadin-grid theme="compact" id="publicGroupsGrid" ?hidden="${this.isEmptyArray(this.publicGroups)}" .items="${this.publicGroups}" aria-label="Public Open Groups" all-rows-visible>
-                        <vaadin-grid-column path="groupName"></vaadin-grid-column>
-                        <vaadin-grid-column header="Description" path="description"></vaadin-grid-column>
-                        <vaadin-grid-column path="owner"></vaadin-grid-column>
+                    <vaadin-grid theme="large" id="publicGroupsGrid" ?hidden="${this.isEmptyArray(this.publicGroups)}" .items="${this.publicGroups}" aria-label="Public Open Groups" all-rows-visible>
+                        <vaadin-grid-filter-column header="Group Name" path="groupName"></vaadin-grid-filter-column>
+                        <vaadin-grid-filter-column header="Description" path="description"></vaadin-grid-filter-column>
+                        <vaadin-grid-filter-column header="Owner" path="owner"></vaadin-grid-filter-column>
                         <vaadin-grid-column width="9.8rem" flex-grow="0" header="Action" .renderer=${(root, column, data) => {
                             render(html`<mwc-button @click=${() => this.joinGroup(data.item)}><mwc-icon>queue</mwc-icon>Join</mwc-button>`, root)
                         }}></vaadin-grid-column>
diff --git a/qortal-ui-plugins/plugins/core/name-registration/name-registration.src.js b/qortal-ui-plugins/plugins/core/name-registration/name-registration.src.js
index bbc4b4f7..3c3e4dfa 100644
--- a/qortal-ui-plugins/plugins/core/name-registration/name-registration.src.js
+++ b/qortal-ui-plugins/plugins/core/name-registration/name-registration.src.js
@@ -85,7 +85,7 @@ class NameRegistration extends LitElement {
 
                 <div class="divCard">
                     <h3 style="margin: 0; margin-bottom: 1em; text-align: center;">Registered Names</h3>
-                    <vaadin-grid theme="compact" id="namesGrid" ?hidden="${this.isEmptyArray(this.names)}" aria-label="Names" .items="${this.names}" all-rows-visible>
+                    <vaadin-grid theme="large" id="namesGrid" ?hidden="${this.isEmptyArray(this.names)}" aria-label="Names" .items="${this.names}" all-rows-visible>
                         <vaadin-grid-column width="5rem" flex-grow="0" header="Avatar" .renderer=${(root, column, data) => {
                             render(html`${this.renderAvatar(data.item)}`, root)
                         }}></vaadin-grid-column>
diff --git a/qortal-ui-plugins/plugins/core/node-management/node-management.src.js b/qortal-ui-plugins/plugins/core/node-management/node-management.src.js
index 405e57f2..3e4e3353 100644
--- a/qortal-ui-plugins/plugins/core/node-management/node-management.src.js
+++ b/qortal-ui-plugins/plugins/core/node-management/node-management.src.js
@@ -201,7 +201,7 @@ class NodeManagement extends LitElement {
               </mwc-button>
             </mwc-dialog>
 
-            <vaadin-grid theme="compact" id="mintingAccountsGrid" ?hidden="${this.isEmptyArray(this.mintingAccounts)}" .items="${this.mintingAccounts}" aria-label="Minting Accounts" all-rows-visible>
+            <vaadin-grid theme="large" id="mintingAccountsGrid" ?hidden="${this.isEmptyArray(this.mintingAccounts)}" .items="${this.mintingAccounts}" aria-label="Minting Accounts" all-rows-visible>
               	<vaadin-grid-column auto-width header="Minting Account" path="mintingAccount"></vaadin-grid-column>
               	<vaadin-grid-column auto-width header="Recipient Account" path="recipientAccount"></vaadin-grid-column>
                 <vaadin-grid-column  width="12em" header="Action" .renderer=${(root, column, data) => {
@@ -253,7 +253,7 @@ class NodeManagement extends LitElement {
               </mwc-button>
             </mwc-dialog>
 
-            <vaadin-grid theme="compact" id="peersGrid" ?hidden="${this.isEmptyArray(this.peers)}" .items="${this.peers}" aria-label="Peers" all-rows-visible>
+            <vaadin-grid theme="large" id="peersGrid" ?hidden="${this.isEmptyArray(this.peers)}" .items="${this.peers}" aria-label="Peers" all-rows-visible>
                 <vaadin-grid-column path="address"></vaadin-grid-column>
                 <vaadin-grid-column path="lastHeight"></vaadin-grid-column>
                 <vaadin-grid-column path="version" header="Build Version"></vaadin-grid-column>
diff --git a/qortal-ui-plugins/plugins/core/puzzles/puzzles.src.js b/qortal-ui-plugins/plugins/core/puzzles/puzzles.src.js
index 88038230..b2f41aaf 100644
--- a/qortal-ui-plugins/plugins/core/puzzles/puzzles.src.js
+++ b/qortal-ui-plugins/plugins/core/puzzles/puzzles.src.js
@@ -85,14 +85,15 @@ class Puzzles extends LitElement {
 					<h3 style="margin: 0; flex: 1; padding-top: 8px; display: inline;">Puzzles</h3>
 				</div>
                                 <div class="divCard">
-				    <vaadin-grid theme="compact" id="puzzlesGrid" ?hidden="${this.isEmptyArray(this.puzzles)}" .items="${this.puzzles}" aria-label="Puzzles" all-rows-visible>
+				    <vaadin-grid theme="large" id="puzzlesGrid" ?hidden="${this.isEmptyArray(this.puzzles)}" .items="${this.puzzles}" aria-label="Puzzles" all-rows-visible>
 				        <vaadin-grid-column auto-width header="Reward" .renderer=${(root, column, data) => {
                             			if (data.item.isSolved) {
                                 			render(html`<span style="font-size: smaller;">SOLVED by ${data.item.winner}</span>`, root)
                             			} else {
                                 			render(html`<span>${data.item.reward} QORT</span>`, root)
                             			}
-                        		}}></vaadin-grid-column>
+                        		}}>
+                                        </vaadin-grid-column>
 					<vaadin-grid-column auto-width path="name"></vaadin-grid-column>
 					<vaadin-grid-column auto-width path="description"></vaadin-grid-column>
 					<vaadin-grid-column auto-width path="clue" style="font-family: monospace; font-size: smaller;"></vaadin-grid-column>
diff --git a/qortal-ui-plugins/plugins/core/qdn/data-management/data-management.src.js b/qortal-ui-plugins/plugins/core/qdn/data-management/data-management.src.js
index 65511611..89d9de0f 100644
--- a/qortal-ui-plugins/plugins/core/qdn/data-management/data-management.src.js
+++ b/qortal-ui-plugins/plugins/core/qdn/data-management/data-management.src.js
@@ -146,18 +146,21 @@ class DataManagement extends LitElement {
                 </div>
                 <div class="divCard">
                     <h3 style="margin: 0; margin-bottom: 1em; text-align: center;">Data hosted by this node</h3>
-                    <vaadin-grid theme="compact" id="resourcesGrid" ?hidden="${this.isEmptyArray(this.datres)}" aria-label="Data Hosted" page-size="20" all-rows-visible>
+                    <vaadin-grid theme="large" id="resourcesGrid" ?hidden="${this.isEmptyArray(this.datres)}" aria-label="Data Hosted" page-size="20" all-rows-visible>
                         <vaadin-grid-column header="Registered Name" path="name"></vaadin-grid-column>
                         <vaadin-grid-column header="Service" path="service"></vaadin-grid-column>
 			<vaadin-grid-column header="Identifier" .renderer=${(root, column, data) => {
                 	    render(html`${this.renderIdentifier(data.item)}`, root)
-            		}}></vaadin-grid-column>
+            		}}>
+                        </vaadin-grid-column>
 			<vaadin-grid-column width="10rem" flex-grow="0" header="" .renderer=${(root, column, data) => {
                 	    render(html`${this.renderDeleteButton(data.item)}`, root);
-            		}}></vaadin-grid-column>
+            		}}>
+                        </vaadin-grid-column>
 			<vaadin-grid-column width="10rem" flex-grow="0" header="" .renderer=${(root, column, data) => {
                 	    render(html`${this.renderBlockUnblockButton(data.item)}`, root);
-            		}}></vaadin-grid-column>
+            		}}>
+                        </vaadin-grid-column>
                     </vaadin-grid>
                     <div id="pages"></div>
 		    ${this.renderDefaultText()}
diff --git a/qortal-ui-plugins/plugins/core/qdn/websites.src.js b/qortal-ui-plugins/plugins/core/qdn/websites.src.js
index cba3c62b..44a36c7d 100644
--- a/qortal-ui-plugins/plugins/core/qdn/websites.src.js
+++ b/qortal-ui-plugins/plugins/core/qdn/websites.src.js
@@ -184,48 +184,60 @@ class Websites extends LitElement {
                         <mwc-textfield outlined label="Name To Search" id="searchName" type="text" value="${this.searchName}"></mwc-textfield>&nbsp;&nbsp;<br>
                         <mwc-button raised icon="search" @click="${(e) => this.doSearch(e)}">Search</mwc-button>
                     </div><br />
-                    <vaadin-grid theme="compact" id="searchResourcesGrid" ?hidden="${this.isEmptyArray(this.searchResources)}" .items="${this.searchResources}" aria-label="Search Websites" all-rows-visible>
+                    <vaadin-grid theme="large" id="searchResourcesGrid" ?hidden="${this.isEmptyArray(this.searchResources)}" .items="${this.searchResources}" aria-label="Search Websites" all-rows-visible>
                         <vaadin-grid-column width="5rem" flex-grow="0" header="Avatar" .renderer=${(root, column, data) => {
                             render(html`${this.renderSearchAvatar(data.item)}`, root)
-                        }}></vaadin-grid-column>
+                        }}>
+                        </vaadin-grid-column>
                         <vaadin-grid-column header="Name" .renderer=${(root, column, data) => {
                             render(html`${this.renderSearchName(data.item)}`, root)
-                        }}></vaadin-grid-column>
+                        }}>
+                        </vaadin-grid-column>
                         <vaadin-grid-column header="Status" .renderer=${(root, column, data) => {
                              render(html`${this.renderSearchStatus(data.item)}`, root)
-                        }}></vaadin-grid-column>
-			            <vaadin-grid-column header="Size" .renderer=${(root, column, data) => {
+                        }}>
+                        </vaadin-grid-column>
+			<vaadin-grid-column header="Size" .renderer=${(root, column, data) => {
                             render(html`${this.renderSearchSize(data.item)}`, root)
-                        }}></vaadin-grid-column>
+                        }}>
+                        </vaadin-grid-column>
                         <vaadin-grid-column width="10rem" flex-grow="0" header="Action" .renderer=${(root, column, data) => {
                             render(html`${this.renderSearchFollowUnfollowButton(data.item)}`, root);
-                        }}></vaadin-grid-column>
+                        }}>
+                        </vaadin-grid-column>
                         <vaadin-grid-column width="10rem" flex-grow="0" header="" .renderer=${(root, column, data) => {
                             render(html`${this.renderSearchBlockUnblockButton(data.item)}`, root);
-                        }}></vaadin-grid-column>
+                        }}>
+                        </vaadin-grid-column>
                     </vaadin-grid><br />
                 </div>
                 <div class="divCard">
                     <h3 style="margin: 0; margin-bottom: 1em; text-align: center;">Websites</h3>
-                    <vaadin-grid theme="compact" id="resourcesGrid" ?hidden="${this.isEmptyArray(this.resources)}" aria-label="Websites" page-size="20" all-rows-visible>
+                    <vaadin-grid theme="large" id="resourcesGrid" ?hidden="${this.isEmptyArray(this.resources)}" aria-label="Websites" page-size="20" all-rows-visible>
                         <vaadin-grid-column width="5rem" flex-grow="0" header="Avatar" .renderer=${(root, column, data) => {
                             render(html`${this.renderAvatar(data.item)}`, root)
-                        }}></vaadin-grid-column>
+                        }}>
+                        </vaadin-grid-column>
                         <vaadin-grid-column header="Name" .renderer=${(root, column, data) => {
                             render(html`${this.renderName(data.item)}`, root)
-                        }}></vaadin-grid-column>
+                        }}>
+                        </vaadin-grid-column>
                         <vaadin-grid-column header="Status" .renderer=${(root, column, data) => {
                             render(html`${this.renderStatus(data.item)}`, root)
-                        }}></vaadin-grid-column>
-			            <vaadin-grid-column header="Size" .renderer=${(root, column, data) => {
+                        }}>
+                        </vaadin-grid-column>
+			<vaadin-grid-column header="Size" .renderer=${(root, column, data) => {
                             render(html`${this.renderSize(data.item)}`, root)
-                        }}></vaadin-grid-column>
+                        }}>
+                        </vaadin-grid-column>
                         <vaadin-grid-column width="10rem" flex-grow="0" header="Action" .renderer=${(root, column, data) => {
                             render(html`${this.renderFollowUnfollowButton(data.item)}`, root);
-                        }}></vaadin-grid-column>
+                        }}>
+                        </vaadin-grid-column>
                         <vaadin-grid-column width="10rem" flex-grow="0" header="" .renderer=${(root, column, data) => {
                             render(html`${this.renderBlockUnblockButton(data.item)}`, root);
-                        }}></vaadin-grid-column>
+                        }}>
+                        </vaadin-grid-column>
                     </vaadin-grid>
                     <div id="pages"></div>
                     ${this.isEmptyArray(this.resources) ? html`
diff --git a/qortal-ui-plugins/plugins/core/reward-share/reward-share.src.js b/qortal-ui-plugins/plugins/core/reward-share/reward-share.src.js
index c608f584..8a7af1c3 100644
--- a/qortal-ui-plugins/plugins/core/reward-share/reward-share.src.js
+++ b/qortal-ui-plugins/plugins/core/reward-share/reward-share.src.js
@@ -84,13 +84,14 @@ class RewardShare extends LitElement {
 
                 <div class="divCard">
                     <h3 style="margin: 0; margin-bottom: 1em; text-align: center;">Rewardshares Involving In This Account</h3>
-                    <vaadin-grid theme="compact" id="accountRewardSharesGrid" ?hidden="${this.isEmptyArray(this.rewardShares)}" .items="${this.rewardShares}" all-rows-visible>
+                    <vaadin-grid theme="large" id="accountRewardSharesGrid" ?hidden="${this.isEmptyArray(this.rewardShares)}" .items="${this.rewardShares}" all-rows-visible>
                         <vaadin-grid-column auto-width path="mintingAccount"></vaadin-grid-column>
                         <vaadin-grid-column auto-width path="sharePercent"></vaadin-grid-column>
                         <vaadin-grid-column auto-width path="recipient"></vaadin-grid-column>
                         <vaadin-grid-column width="12em" header="Action" .renderer=${(root, column, data) => {
                             render(html`${this.renderRemoveRewardShareButton(data.item)}`, root)
-                        }}></vaadin-grid-column>
+                        }}>
+                        </vaadin-grid-column>
                     </vaadin-grid>
                 </div>