Dev UI Arc: Make grid cols sortable

Signed-off-by: Phillip Kruger <phillip.kruger@gmail.com>
quarkusio · Jan 9, 2025 · ac90f83 · ac90f83
1 parent 7c545fb
commit ac90f83
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 25 deletions.
diff --git a/extensions/arc/deployment/src/main/resources/dev-ui/qwc-arc-beans.js b/extensions/arc/deployment/src/main/resources/dev-ui/qwc-arc-beans.js
@@ -4,6 +4,7 @@ import { columnBodyRenderer } from '@vaadin/grid/lit.js';
 import { beans } from 'build-time-data';
 import { beanIdsWithDependencyGraphs } from 'build-time-data';
 import '@vaadin/grid';
+import '@vaadin/grid/vaadin-grid-sort-column.js';
 import '@vaadin/vertical-layout';
 import 'qui-badge';
 import 'qui-ide-link';
@@ -90,17 +91,17 @@ export class QwcArcBeans extends LitElement {
 
     _renderBeanList(){
         return html`<vaadin-grid .items="${this._beans}" class="arctable" theme="no-border">
-                    <vaadin-grid-column auto-width
+                    <vaadin-grid-sort-column path="providerType.name" auto-width
                         header="Bean"
                         ${columnBodyRenderer(this._beanRenderer, [])}
                         resizable>
-                    </vaadin-grid-column>
+                    </vaadin-grid-sort-column>
 
-                    <vaadin-grid-column auto-width
+                    <vaadin-grid-sort-column path="kind" auto-width
                         header="Kind"
                         ${columnBodyRenderer(this._kindRenderer, [])}
                         resizable>
-                    </vaadin-grid-column>
+                    </vaadin-grid-sort-column>
 
                     <vaadin-grid-column auto-width
                         header="Associated Interceptors"
@@ -172,7 +173,7 @@ export class QwcArcBeans extends LitElement {
             return html``;
         }
     }
-
+    
     _interceptorsRenderer(bean) {
         if (bean.interceptors && bean.interceptors.length > 0) {
             return html`<vaadin-vertical-layout>

diff --git a/extensions/arc/deployment/src/main/resources/dev-ui/qwc-arc-interceptors.js b/extensions/arc/deployment/src/main/resources/dev-ui/qwc-arc-interceptors.js
@@ -2,6 +2,7 @@ import { LitElement, html, css} from 'lit';
 import { interceptors } from 'build-time-data';
 import { columnBodyRenderer } from '@vaadin/grid/lit.js';
 import '@vaadin/grid';
+import '@vaadin/grid/vaadin-grid-sort-column.js';
 import '@vaadin/vertical-layout';
 import 'qui-badge';
 
@@ -38,17 +39,17 @@ export class QwcArcInterceptors extends LitElement {
         if(this._interceptors){
             return html`
             <vaadin-grid .items="${this._interceptors}" class="arctable" theme="no-border">
-              <vaadin-grid-column auto-width
+              <vaadin-grid-sort-column path="interceptorClass.name" auto-width
                 header="Interceptor Class"
                 ${columnBodyRenderer(this._classRenderer, [])}
                 resizable>
-              </vaadin-grid-column>
+              </vaadin-grid-sort-column>
 
-              <vaadin-grid-column auto-width
+              <vaadin-grid-sort-column path="priority" auto-width
                 header="Priority"
                 ${columnBodyRenderer(this._priorityRenderer, [])}
                 resizable>
-              </vaadin-grid-column>
+              </vaadin-grid-sort-column>
 
               <vaadin-grid-column auto-width
                 header="Bindings"

diff --git a/extensions/arc/deployment/src/main/resources/dev-ui/qwc-arc-observers.js b/extensions/arc/deployment/src/main/resources/dev-ui/qwc-arc-observers.js
@@ -2,6 +2,7 @@ import { LitElement, html, css} from 'lit';
 import { observers } from 'build-time-data';
 import { columnBodyRenderer } from '@vaadin/grid/lit.js';
 import '@vaadin/grid';
+import '@vaadin/grid/vaadin-grid-sort-column.js';
 import '@vaadin/vertical-layout';
 import 'qui-badge';
 import 'qui-ide-link';
@@ -49,41 +50,41 @@ export class QwcArcObservers extends LitElement {
             return html`
                 <vaadin-grid .items="${this._observers}" class="arctable" theme="no-border">
 
-                    <vaadin-grid-column auto-width
+                    <vaadin-grid-sort-column path="declaringClass.name" auto-width
                         header="Source"
                         ${columnBodyRenderer(this._sourceRenderer, [])}
                         resizable>
-                    </vaadin-grid-column>
+                    </vaadin-grid-sort-column>
 
-                    <vaadin-grid-column auto-width
+                    <vaadin-grid-sort-column path="observedType.name" auto-width
                         header="Observed Type / Qualifiers"
                         ${columnBodyRenderer(this._typeRenderer, [])}
                         resizable>
-                    </vaadin-grid-column>
+                    </vaadin-grid-sort-column>
 
-                    <vaadin-grid-column auto-width
+                    <vaadin-grid-sort-column path="priority" auto-width
                         header="Priority"
                         ${columnBodyRenderer(this._priorityRenderer, [])}
                         resizable>
-                    </vaadin-grid-column>
+                    </vaadin-grid-sort-column>
 
-                    <vaadin-grid-column auto-width
+                    <vaadin-grid-sort-column path="reception" auto-width
                         header="Reception"
                         ${columnBodyRenderer(this._receptionRenderer, [])}
                         resizable>
-                    </vaadin-grid-column>
+                    </vaadin-grid-sort-column>
 
-                    <vaadin-grid-column auto-width
+                    <vaadin-grid-sort-column path="transactionPhase" auto-width
                         header="Transaction Phase"
                         ${columnBodyRenderer(this._transactionPhaseRenderer, [])}
                         resizable>
-                    </vaadin-grid-column>
+                    </vaadin-grid-sort-column>
 
-                    <vaadin-grid-column auto-width 
+                    <vaadin-grid-sort-column path="async" auto-width 
                         header="Async"
                         ${columnBodyRenderer(this._asyncRenderer, [])}
                         resizable>
-                    </vaadin-grid-column>
+                    </vaadin-grid-sort-column>
 
                 </vaadin-grid>`;
         }

diff --git a/extensions/arc/deployment/src/main/resources/dev-ui/qwc-arc-removed-components.js b/extensions/arc/deployment/src/main/resources/dev-ui/qwc-arc-removed-components.js
@@ -3,6 +3,7 @@ import { LitElement, html, css} from 'lit';
 import '@vaadin/tabs';
 import '@vaadin/tabsheet';
 import '@vaadin/grid';
+import '@vaadin/grid/vaadin-grid-sort-column.js';
 import '@vaadin/vertical-layout';
 import { columnBodyRenderer } from '@vaadin/grid/lit.js';
 import 'qui-badge';
@@ -76,11 +77,11 @@ export class QwcArcRemovedComponents extends LitElement {
 
             return html`
                 <vaadin-grid .items="${this._removedBeans}" theme="no-border" class="fullHeight">
-                    <vaadin-grid-column auto-width
+                    <vaadin-grid-sort-column path="providerType.name" auto-width
                         header="Bean"
                         ${columnBodyRenderer(this._beanRenderer, [])}
                         resizable>
-                    </vaadin-grid-column>
+                    </vaadin-grid-sort-column>
                     <vaadin-grid-column auto-width
                         header="Kind"
                         ${columnBodyRenderer(this._kindRenderer, [])}
@@ -107,11 +108,11 @@ export class QwcArcRemovedComponents extends LitElement {
         if (this._removedInterceptors.length > 0) {                 	
             return html`
                 <vaadin-grid .items="${this._removedInterceptors}" theme="no-border" class="fullHeight">
-                    <vaadin-grid-column auto-width
+                    <vaadin-grid-sort-column path="interceptorClass.name" auto-width
                         header="Interceptor"
                         ${columnBodyRenderer(this._interceptorRenderer, [])}
                         resizable>
-                    </vaadin-grid-column>
+                    </vaadin-grid-sort-column>
                     <vaadin-grid-column auto-width
                         header="Bindings"
                         ${columnBodyRenderer(this._bindingsRenderer, [])}