From ee0f49b96e2033a1bbc3452fe87134dc930ed477 Mon Sep 17 00:00:00 2001
From: Matthias Stein <m.stein@conterra.de>
Date: Fri, 29 Nov 2024 11:53:14 +0100
Subject: [PATCH 01/13] Improve ui

---
 .../PortalContentWidgetFactory.ts             |   2 +-
 .../dn_portalitemloader/css/styles.css        |  59 ++---
 .../bundles/dn_portalitemloader/manifest.json |   4 -
 .../templates/FilterWidget.vue                |   2 +-
 .../templates/PortalContentWidget.vue         |  85 +++---
 .../templates/PortalItem.vue                  | 242 +++++++++---------
 6 files changed, 188 insertions(+), 206 deletions(-)

diff --git a/src/main/js/bundles/dn_portalitemloader/PortalContentWidgetFactory.ts b/src/main/js/bundles/dn_portalitemloader/PortalContentWidgetFactory.ts
index 116da7f..3106b24 100644
--- a/src/main/js/bundles/dn_portalitemloader/PortalContentWidgetFactory.ts
+++ b/src/main/js/bundles/dn_portalitemloader/PortalContentWidgetFactory.ts
@@ -45,7 +45,7 @@ export default class PortalContentWidgetFactory {
 
     createInstance(): any {
         const controller = this.controller;
-        const widget = VueDijit(this.vm, { class: "portal-content-widget" });
+        const widget = VueDijit(this.vm, { class: "ct-portal-content-widget" });
 
         widget.activateTool = async () => {
             this.binding.enable().syncToLeftNow();
diff --git a/src/main/js/bundles/dn_portalitemloader/css/styles.css b/src/main/js/bundles/dn_portalitemloader/css/styles.css
index 334bf03..386a6fc 100644
--- a/src/main/js/bundles/dn_portalitemloader/css/styles.css
+++ b/src/main/js/bundles/dn_portalitemloader/css/styles.css
@@ -13,89 +13,80 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.ctAppRoot .portal-content-widget {
-    overflow: hidden;
-}
-
-.ctAppRoot .portal-content-widget .portal-content--container {
+.ctAppRoot .ct-portal-content-widget__main {
     height: 100%;
+    display: flex;
+    flex-direction: row;
 }
 
-.ctAppRoot .portal-content-widget .left {
+.ctAppRoot .ct-portal-content-widget__portal-item-filter {
     width: 300px;
+    flex: 0 0 auto;
 }
 
-.ctAppRoot .portal-content-widget .center {
-    overflow: auto;;
-}
-
-.ctAppRoot .portal-content-widget .v-data-iterator {
+.ctAppRoot .ct-portal-content-widget__portal-item-gallery {
+    flex: 1 1 auto;
     display: flex;
     flex-direction: column;
+    overflow: auto;
 }
 
-.ctAppRoot .portal-content-widget .v-data-iterator .loading-indicator {
+.ctAppRoot .ct-portal-content-widget__portal-item-gallery .loading-indicator {
     height: 8px;
 }
 
-.ctAppRoot .portal-content-widget .v-data-iterator>div:first-child {
+.ctAppRoot .ct-portal-content-widget__portal-item-gallery>div:first-child {
     flex: 0 0 auto;
 }
 
-.ctAppRoot .portal-content-widget .v-data-iterator>div:nth-child(2) {
+.ctAppRoot .ct-portal-content-widget__portal-item-gallery>div:nth-child(2) {
     flex: 1 1 auto;
     overflow: auto;
 }
 
-.ctAppRoot .portal-content-widget .v-data-iterator>div:nth-child(3) {
+.ctAppRoot .ct-portal-content-widget__portal-item-gallery>div:nth-child(3) {
     flex: 0 0 auto;
 }
 
-.ctAppRoot .portal-content-widget .v-toolbar__content {
-    padding-left: 4px;
-    padding-right: 4px;
-}
-
-/* .ctAppRoot .portal-content-widget .portal-flex-item {
-    height: 480px;
-} */
-
-.ctAppRoot .portal-content-widget .portal-flex-item .portal-item-node {
-    height: 100%;
+.ctAppRoot .ct-portal-content-widget__portal-item-gallery-content {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 12px;
     padding: 4px;
 }
 
-.ctAppRoot .portal-content-widget .portal-item-card {
+.ctAppRoot .ct-portal-content-widget__portal-item-gallery-content .portal-item-card {
     display: flex;
 }
 
-.ctAppRoot .portal-content-widget .portal-item-card .v-image {
+.ctAppRoot .ct-portal-content-widget__portal-item-gallery-content .portal-item-card .v-image {
     height: 200px;
     max-height: 200px;
 }
 
-.ctAppRoot .portal-content-widget .portal-item-card .backup-icon {
+.ctAppRoot .ct-portal-content-widget__portal-item-gallery-content .portal-item-card .backup-icon {
     height: 200px;
     max-height: 200px;
 }
 
-.ctAppRoot .portal-content-widget .portal-item-card .v-list {
+.ctAppRoot .ct-portal-content-widget__portal-item-gallery-content .portal-item-card .v-list {
     padding: 0 0 4px;
 }
 
-.ctAppRoot .portal-content-widget .portal-item-card .v-list--dense .v-list__tile--avatar {
+.ctAppRoot .ct-portal-content-widget__portal-item-gallery-content .portal-item-card .v-list--dense .v-list__tile--avatar {
     height: 30px;
     padding: 0;
 }
 
-.ctAppRoot .portal-content-widget .portal-item-card .v-icon--left {
+.ctAppRoot .ct-portal-content-widget__portal-item-gallery-content .portal-item-card .v-icon--left {
     margin-right: 4px;
 }
 
-.ctAppRoot .portal-content-widget .portal-item-card .item-text {
+.ctAppRoot .ct-portal-content-widget__portal-item-gallery-content .portal-item-card .item-text {
     display: block;
     display: -webkit-box;
     -webkit-line-clamp: 4;
+    line-clamp: 4;
     -webkit-box-orient: vertical;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -104,6 +95,6 @@
     padding-right: 8px;
 }
 
-.ctAppRoot .portal-content-widget .filter-widget .sort-ascending-button .v-icon {
+.ctAppRoot .ct-portal-content-widget__portal-item-filter .sort-ascending-button .v-icon {
     margin-right: 0;
 }
diff --git a/src/main/js/bundles/dn_portalitemloader/manifest.json b/src/main/js/bundles/dn_portalitemloader/manifest.json
index bca0e60..c8e6bdd 100644
--- a/src/main/js/bundles/dn_portalitemloader/manifest.json
+++ b/src/main/js/bundles/dn_portalitemloader/manifest.json
@@ -45,10 +45,6 @@
                 "marginBox": {
                     "h": "50%",
                     "w": "50%"
-                },
-                "minSize": {
-                    "h": 600,
-                    "w": 1000
                 }
             }
         },
diff --git a/src/main/js/bundles/dn_portalitemloader/templates/FilterWidget.vue b/src/main/js/bundles/dn_portalitemloader/templates/FilterWidget.vue
index 1ec2c8f..455a811 100644
--- a/src/main/js/bundles/dn_portalitemloader/templates/FilterWidget.vue
+++ b/src/main/js/bundles/dn_portalitemloader/templates/FilterWidget.vue
@@ -20,7 +20,7 @@
         fluid
         grid-list-md
         pa-1
-        class="filter-widget"
+        class="ct-portal-content-widget__portal-item-filter"
     >
         <v-select
             v-if="portals.length>1"
diff --git a/src/main/js/bundles/dn_portalitemloader/templates/PortalContentWidget.vue b/src/main/js/bundles/dn_portalitemloader/templates/PortalContentWidget.vue
index 08e0a5b..ebd3f10 100644
--- a/src/main/js/bundles/dn_portalitemloader/templates/PortalContentWidget.vue
+++ b/src/main/js/bundles/dn_portalitemloader/templates/PortalContentWidget.vue
@@ -16,8 +16,10 @@
 
 -->
 <template>
-    <div class="ct-flex-container ct-flex-container--row portal-content--container">
-        <div class="left ct-flex-item ct-flex-item--no-grow ct-flex-item--no-shrink">
+    <div class="ct-portal-content-widget__main">
+        <div
+            class="ct-portal-content-widget__portal-item-filter"
+        >
             <filter-widget
                 :i18n="i18n"
                 :portals="portals"
@@ -33,50 +35,45 @@
                 :sort-by-field.sync="sortByField"
             />
         </div>
-        <div class="center ct-flex-item">
-            <v-data-iterator
-                :items="portalItems"
-                :total-items="totalItems"
-                :rows-per-page-items="rowsPerPageItems"
-                :pagination.sync="pagination"
-                :loading="loading"
-                :no-results-text="i18n.noResultsText"
-                :no-data-text="i18n.noDataText"
-                content-tag="v-layout"
-                row
-                wrap
-                class="fullHeight"
+        <v-data-iterator
+            :items="portalItems"
+            :total-items="totalItems"
+            :rows-per-page-items="rowsPerPageItems"
+            :pagination.sync="pagination"
+            :loading="loading"
+            :no-results-text="i18n.noResultsText"
+            :no-data-text="i18n.noDataText"
+            content-tag="div"
+            content-class="ct-portal-content-widget__portal-item-gallery-content"
+            class="ct-portal-content-widget__portal-item-gallery"
+        >
+            <template
+                #header
             >
-                <template
-                    #header
+                <div
+                    class="loading-indicator"
                 >
-                    <div
-                        class="loading-indicator"
-                    >
-                        <v-progress-linear
-                            v-show="loading"
-                            :indeterminate="true"
-                            class="pa-0 ma-0"
-                        />
-                    </div>
-                </template>
-                <template #item="props">
-                    <v-flex
-                        xs12
-                        sm6
-                        md4
-                        lg4
-                        class="portal-flex-item"
-                    >
-                        <portal-item
-                            :i18n="i18n"
-                            :item="props.item"
-                            @load-item="$emit('load-item', $event)"
-                        />
-                    </v-flex>
-                </template>
-            </v-data-iterator>
-        </div>
+                    <v-progress-linear
+                        v-show="loading"
+                        :indeterminate="true"
+                        class="pa-0 ma-0"
+                    />
+                </div>
+            </template>
+            <template
+                #item="props"
+            >
+                <div
+                    class="portal-flex-item"
+                >
+                    <portal-item
+                        :i18n="i18n"
+                        :item="props.item"
+                        @load-item="$emit('load-item', $event)"
+                    />
+                </div>
+            </template>
+        </v-data-iterator>
     </div>
 </template>
 <script>
diff --git a/src/main/js/bundles/dn_portalitemloader/templates/PortalItem.vue b/src/main/js/bundles/dn_portalitemloader/templates/PortalItem.vue
index a91e59f..8102057 100644
--- a/src/main/js/bundles/dn_portalitemloader/templates/PortalItem.vue
+++ b/src/main/js/bundles/dn_portalitemloader/templates/PortalItem.vue
@@ -16,134 +16,132 @@
 
 -->
 <template>
-    <div class="portal-item-node">
-        <v-card
-            class="portal-item-card ct-flex-container ct-flex-container--column fullHeight"
+    <v-card
+        class="portal-item-card ct-flex-container ct-flex-container--column fullHeight"
+    >
+        <a
+            :href="item.itemPageUrl"
+            target="_blank"
         >
-            <a
-                :href="item.itemPageUrl"
-                target="_blank"
+            <v-img
+                v-if="item.thumbnailUrl"
+                class="ct-flex-item ct-flex-item--no-grow"
+                :src="item.thumbnailUrl + '&w=400'"
+            />
+            <v-icon
+                v-else
+                class="backup-icon"
+                x-large
+            >
+                panorama
+            </v-icon>
+        </a>
+        <v-card-title
+            class="ct-flex-item ct-flex-item--no-grow"
+        >
+            <h4 class="text-truncate">
+                {{ item.title }}
+            </h4>
+        </v-card-title>
+        <v-card-text
+            class="ct-flex-item py-0"
+        >
+            <v-list dense>
+                <v-list-tile
+                    avatar
+                    inactive
+                >
+                    <v-list-tile-avatar>
+                        <v-icon>
+                            category
+                        </v-icon>
+                    </v-list-tile-avatar>
+                    <v-list-tile-content>
+                        <v-list-tile-title>{{ item.type }}</v-list-tile-title>
+                    </v-list-tile-content>
+                </v-list-tile>
+                <v-list-tile
+                    avatar
+                >
+                    <v-list-tile-avatar>
+                        <v-icon>
+                            person
+                        </v-icon>
+                    </v-list-tile-avatar>
+                    <v-list-tile-content>
+                        <v-list-tile-title>{{ item.owner }}</v-list-tile-title>
+                    </v-list-tile-content>
+                </v-list-tile>
+                <v-list-tile
+                    avatar
+                >
+                    <v-list-tile-avatar>
+                        <v-icon>
+                            visibility
+                        </v-icon>
+                    </v-list-tile-avatar>
+                    <v-list-tile-content>
+                        <v-list-tile-title>{{ item.numViews }}</v-list-tile-title>
+                    </v-list-tile-content>
+                </v-list-tile>
+                <v-list-tile
+                    avatar
+                >
+                    <v-list-tile-avatar>
+                        <v-icon>
+                            more_time
+                        </v-icon>
+                    </v-list-tile-avatar>
+                    <v-list-tile-content>
+                        <v-list-tile-title>{{ created }}</v-list-tile-title>
+                    </v-list-tile-content>
+                </v-list-tile>
+                <v-list-tile
+                    avatar
+                >
+                    <v-list-tile-avatar>
+                        <v-icon>
+                            update
+                        </v-icon>
+                    </v-list-tile-avatar>
+                    <v-list-tile-content>
+                        <v-list-tile-title>{{ modified }}</v-list-tile-title>
+                    </v-list-tile-content>
+                </v-list-tile>
+            </v-list>
+            <div class="item-text">
+                {{ item.snippet }}
+            </div>
+        </v-card-text>
+        <v-card-actions
+            class="ct-flex-item ct-flex-item--no-grow ct-flex-item--no-shrink"
+        >
+            <v-btn
+                block
+                small
+                color="primary"
+                @click="$emit('load-item', item)"
             >
-                <v-img
-                    v-if="item.thumbnailUrl"
-                    class="ct-flex-item ct-flex-item--no-grow"
-                    :src="item.thumbnailUrl + '&w=400'"
-                />
                 <v-icon
-                    v-else
-                    class="backup-icon"
-                    x-large
+                    left
                 >
-                    panorama
+                    add
                 </v-icon>
-            </a>
-            <v-card-title
-                class="ct-flex-item ct-flex-item--no-grow"
-            >
-                <h4 class="text-truncate">
-                    {{ item.title }}
-                </h4>
-            </v-card-title>
-            <v-card-text
-                class="ct-flex-item py-0"
-            >
-                <v-list dense>
-                    <v-list-tile
-                        avatar
-                        inactive
-                    >
-                        <v-list-tile-avatar>
-                            <v-icon>
-                                category
-                            </v-icon>
-                        </v-list-tile-avatar>
-                        <v-list-tile-content>
-                            <v-list-tile-title>{{ item.type }}</v-list-tile-title>
-                        </v-list-tile-content>
-                    </v-list-tile>
-                    <v-list-tile
-                        avatar
-                    >
-                        <v-list-tile-avatar>
-                            <v-icon>
-                                person
-                            </v-icon>
-                        </v-list-tile-avatar>
-                        <v-list-tile-content>
-                            <v-list-tile-title>{{ item.owner }}</v-list-tile-title>
-                        </v-list-tile-content>
-                    </v-list-tile>
-                    <v-list-tile
-                        avatar
-                    >
-                        <v-list-tile-avatar>
-                            <v-icon>
-                                visibility
-                            </v-icon>
-                        </v-list-tile-avatar>
-                        <v-list-tile-content>
-                            <v-list-tile-title>{{ item.numViews }}</v-list-tile-title>
-                        </v-list-tile-content>
-                    </v-list-tile>
-                    <v-list-tile
-                        avatar
-                    >
-                        <v-list-tile-avatar>
-                            <v-icon>
-                                more_time
-                            </v-icon>
-                        </v-list-tile-avatar>
-                        <v-list-tile-content>
-                            <v-list-tile-title>{{ created }}</v-list-tile-title>
-                        </v-list-tile-content>
-                    </v-list-tile>
-                    <v-list-tile
-                        avatar
-                    >
-                        <v-list-tile-avatar>
-                            <v-icon>
-                                update
-                            </v-icon>
-                        </v-list-tile-avatar>
-                        <v-list-tile-content>
-                            <v-list-tile-title>{{ modified }}</v-list-tile-title>
-                        </v-list-tile-content>
-                    </v-list-tile>
-                </v-list>
-                <!-- <div class="item-text">
-                    {{ item.snippet }}
-                </div> -->
-            </v-card-text>
-            <v-card-actions
-                class="ct-flex-item ct-flex-item--no-grow ct-flex-item--no-shrink"
+                {{ i18n.addToMap }}
+            </v-btn>
+            <v-btn
+                icon
+                small
+                color="secondary"
+                :href="item.itemPageUrl"
+                target="_blank"
             >
-                <v-btn
-                    block
-                    small
-                    color="primary"
-                    @click="$emit('load-item', item)"
-                >
-                    <v-icon
-                        left
-                    >
-                        add
-                    </v-icon>
-                    {{ i18n.addToMap }}
-                </v-btn>
-                <v-btn
-                    icon
-                    small
-                    color="secondary"
-                    :href="item.itemPageUrl"
-                    target="_blank"
-                >
-                    <v-icon>
-                        link
-                    </v-icon>
-                </v-btn>
-            </v-card-actions>
-        </v-card>
-    </div>
+                <v-icon>
+                    open_in_new
+                </v-icon>
+            </v-btn>
+        </v-card-actions>
+    </v-card>
 </template>
 <script>
     import moment from 'moment';

From 30b629e519aaa2f29e082d56b38bf1b9d9a353e1 Mon Sep 17 00:00:00 2001
From: Matthias Stein <m.stein@conterra.de>
Date: Sun, 1 Dec 2024 10:03:51 +0100
Subject: [PATCH 02/13] Rename some components

---
 src/main/js/apps/sample/app.json              |  9 +++++-
 src/main/js/bundles/README.md                 |  6 ++--
 ...oller.ts => PortalItemLoaderController.ts} | 30 +++++++++----------
 ...ntentModel.ts => PortalItemLoaderModel.ts} |  6 ++--
 ...ry.ts => PortalItemLoaderWidgetFactory.ts} | 20 ++++++-------
 .../bundles/dn_portalitemloader/manifest.json | 29 +++++++++---------
 .../js/bundles/dn_portalitemloader/module.ts  |  4 +--
 ...tWidget.vue => PortalItemLoaderWidget.vue} |  0
 8 files changed, 55 insertions(+), 49 deletions(-)
 rename src/main/js/bundles/dn_portalitemloader/{PortalContentController.ts => PortalItemLoaderController.ts} (88%)
 rename src/main/js/bundles/dn_portalitemloader/{PortalContentModel.ts => PortalItemLoaderModel.ts} (91%)
 rename src/main/js/bundles/dn_portalitemloader/{PortalContentWidgetFactory.ts => PortalItemLoaderWidgetFactory.ts} (80%)
 rename src/main/js/bundles/dn_portalitemloader/templates/{PortalContentWidget.vue => PortalItemLoaderWidget.vue} (100%)

diff --git a/src/main/js/apps/sample/app.json b/src/main/js/apps/sample/app.json
index e4561ae..5a4202d 100644
--- a/src/main/js/apps/sample/app.json
+++ b/src/main/js/apps/sample/app.json
@@ -131,7 +131,7 @@
                             "helloTool",
                             "IMPRINT_Imprint_CustomInfoTool",
                             "IMPRINT_Imprint_CustomInfoTool_mobile",
-                            "portalContentToggleTool"
+                            "portalItemLoaderToggleTool"
                         ],
                         "registerWidget": {
                             "widgetRole": "drawer_button"
@@ -147,6 +147,13 @@
                     }
                 ]
             }
+        },
+        "toolrules": {
+            "ToolActiveStateManager": {
+                "activateOnStartToolIds": [
+                    "portalItemLoaderToggleTool"
+                ]
+            }
         }
     }
 }
diff --git a/src/main/js/bundles/README.md b/src/main/js/bundles/README.md
index 81c6ab8..3050805 100644
--- a/src/main/js/bundles/README.md
+++ b/src/main/js/bundles/README.md
@@ -1,14 +1,12 @@
 # dn_portalitemloader
 
-This bundle allows to add portal content
+This bundle allows to add portal content to your map.apps app.
 
 ## Usage
 
 1. First you need to add the bundle dn_mapapps-portal-item-loader to your app.
 2. Then you can configure it.
-3. The last thing you need to do is add the portalContentToggleTool
-
-
+3. The last thing you need to do is add the portalItemLoaderToggleTool
 
 ### Configurable Components of dn_portalitemloader:
 
diff --git a/src/main/js/bundles/dn_portalitemloader/PortalContentController.ts b/src/main/js/bundles/dn_portalitemloader/PortalItemLoaderController.ts
similarity index 88%
rename from src/main/js/bundles/dn_portalitemloader/PortalContentController.ts
rename to src/main/js/bundles/dn_portalitemloader/PortalItemLoaderController.ts
index 53b476b..137cd1f 100644
--- a/src/main/js/bundles/dn_portalitemloader/PortalContentController.ts
+++ b/src/main/js/bundles/dn_portalitemloader/PortalItemLoaderController.ts
@@ -17,23 +17,23 @@
 import Portal from "esri/portal/Portal";
 import Layer from "esri/layers/Layer";
 import MapWidgetModel from "map-widget/MapWidgetModel";
-import PortalContentModel from "./PortalContentModel";
+import PortalItemLoaderModel from "./PortalItemLoaderModel";
 
-export default class PortalContentWidgetController {
+export default class PortalItemLoaderWidgetController {
 
     private readonly mapWidgetModel: MapWidgetModel;
-    private readonly portalContentModel: typeof PortalContentModel;
+    private readonly portalItemLoaderModel: typeof PortalItemLoaderModel;
     private lastTimeout: any;
     private abortController: AbortController | undefined;
     private portal: __esri.Portal | undefined;
 
-    constructor(i18n: any, mapWidgetModel: MapWidgetModel, portalContentModel: typeof PortalContentModel) {
+    constructor(i18n: any, mapWidgetModel: MapWidgetModel, portalItemLoaderModel: typeof PortalItemLoaderModel) {
         this.mapWidgetModel = mapWidgetModel;
-        const model = this.portalContentModel = portalContentModel;
+        const model = this.portalItemLoaderModel = portalItemLoaderModel;
         model.portalFilter = model.portals[0].id;
         this.changeSelectedPortal(model.portalFilter);
 
-        portalContentModel.watch("portalFilter", ({ value }) => {
+        portalItemLoaderModel.watch("portalFilter", ({ value }) => {
             // delete current results
             model.portalItems = [];
             // set new portal
@@ -42,32 +42,32 @@ export default class PortalContentWidgetController {
                 model.sortAscending, model.sortByField);
         });
 
-        portalContentModel.watch("searchText", ({ value }) => {
+        portalItemLoaderModel.watch("searchText", ({ value }) => {
             this.queryPortalItems(model.pagination, value, model.spaceFilter, model.typeFilter,
                 model.sortAscending, model.sortByField);
         });
 
-        portalContentModel.watch("pagination", ({ value }) => {
+        portalItemLoaderModel.watch("pagination", ({ value }) => {
             this.queryPortalItems(value, model.searchText, model.spaceFilter, model.typeFilter,
                 model.sortAscending, model.sortByField);
         });
 
-        portalContentModel.watch("spaceFilter", ({ value }) => {
+        portalItemLoaderModel.watch("spaceFilter", ({ value }) => {
             this.queryPortalItems(model.pagination, model.searchText, value, model.typeFilter,
                 model.sortAscending, model.sortByField);
         });
 
-        portalContentModel.watch("typeFilter", ({ value }) => {
+        portalItemLoaderModel.watch("typeFilter", ({ value }) => {
             this.queryPortalItems(model.pagination, model.searchText, model.spaceFilter, value,
                 model.sortAscending, model.sortByField);
         });
 
-        portalContentModel.watch("sortAscending", ({ value }) => {
+        portalItemLoaderModel.watch("sortAscending", ({ value }) => {
             this.queryPortalItems(model.pagination, model.searchText, model.spaceFilter, model.typeFilter,
                 value, model.sortByField);
         });
 
-        portalContentModel.watch("sortByField", ({ value }) => {
+        portalItemLoaderModel.watch("sortByField", ({ value }) => {
             this.queryPortalItems(model.pagination, model.searchText, model.spaceFilter, model.typeFilter,
                 model.sortAscending, value);
         });
@@ -76,7 +76,7 @@ export default class PortalContentWidgetController {
     queryPortalItems(pagination: any, searchText: string, spaceFilter: "all" | "organisation" | "my-content", typeFilter: string,
         sortAscending: boolean,
         sortByField: string): void {
-        const model = this.portalContentModel;
+        const model = this.portalItemLoaderModel;
         const portal = this.portal!;
         clearTimeout(this.lastTimeout);
         this.lastTimeout = setTimeout(() => {
@@ -99,7 +99,7 @@ export default class PortalContentWidgetController {
     }
 
     private changeSelectedPortal(portalId: string) {
-        const model = this.portalContentModel;
+        const model = this.portalItemLoaderModel;
         const selectedPortal = model.portals.find((portalConfig) => portalConfig.id === portalId);
         const portal = this.portal = new Portal(selectedPortal.url);
         portal.load().then(() => {
@@ -175,7 +175,7 @@ export default class PortalContentWidgetController {
                 portalUrl: portalItem.portal.url
             };
         });
-        this.portalContentModel.portalItems = portalItems;
+        this.portalItemLoaderModel.portalItems = portalItems;
     }
 
     addPortalItemLayerToMap(item: any): void {
diff --git a/src/main/js/bundles/dn_portalitemloader/PortalContentModel.ts b/src/main/js/bundles/dn_portalitemloader/PortalItemLoaderModel.ts
similarity index 91%
rename from src/main/js/bundles/dn_portalitemloader/PortalContentModel.ts
rename to src/main/js/bundles/dn_portalitemloader/PortalItemLoaderModel.ts
index ab6eada..0742b43 100644
--- a/src/main/js/bundles/dn_portalitemloader/PortalContentModel.ts
+++ b/src/main/js/bundles/dn_portalitemloader/PortalItemLoaderModel.ts
@@ -21,9 +21,9 @@ function defineProperties<Impl, P>(mutableDefinition: any, mutableProperties: P)
     return mutableDefinition;
 }
 
-class PortalContentModel extends Mutable { }
+class PortalItemLoaderModel extends Mutable { }
 
-interface PortalContentModelProps {
+interface PortalItemLoaderModelProps {
     portals: any[],
     portalItems: __esri.PortalItem[],
     authenticated: boolean,
@@ -42,7 +42,7 @@ interface PortalContentModelProps {
     sortByFields: any[]
 }
 
-export default defineProperties<PortalContentModel, PortalContentModelProps>(PortalContentModel, {
+export default defineProperties<PortalItemLoaderModel, PortalItemLoaderModelProps>(PortalItemLoaderModel, {
     portals: [],
     portalItems: [],
     authenticated: false,
diff --git a/src/main/js/bundles/dn_portalitemloader/PortalContentWidgetFactory.ts b/src/main/js/bundles/dn_portalitemloader/PortalItemLoaderWidgetFactory.ts
similarity index 80%
rename from src/main/js/bundles/dn_portalitemloader/PortalContentWidgetFactory.ts
rename to src/main/js/bundles/dn_portalitemloader/PortalItemLoaderWidgetFactory.ts
index 3106b24..f348262 100644
--- a/src/main/js/bundles/dn_portalitemloader/PortalContentWidgetFactory.ts
+++ b/src/main/js/bundles/dn_portalitemloader/PortalItemLoaderWidgetFactory.ts
@@ -19,23 +19,23 @@ import Vue from "apprt-vue/Vue";
 import VueDijit from "apprt-vue/VueDijit";
 import Binding from "apprt-binding/Binding";
 import MapWidgetModel from "map-widget/MapWidgetModel";
-import PortalContentController from "./PortalContentController";
-import PortalContentModel from "./PortalContentModel";
-import PortalContentWidget from "./templates/PortalContentWidget.vue";
+import PortalItemLoaderController from "./PortalItemLoaderController";
+import PortalItemLoaderModel from "./PortalItemLoaderModel";
+import PortalItemLoaderWidget from "./templates/PortalItemLoaderWidget.vue";
 
-export default class PortalContentWidgetFactory {
+export default class PortalItemLoaderWidgetFactory {
 
     private readonly _i18n!: InjectedReference<any>;
     private readonly _mapWidgetModel!: InjectedReference<MapWidgetModel>;
-    private readonly _portalContentModel!: InjectedReference<typeof PortalContentModel>;
-    private controller: PortalContentController;
+    private readonly _portalItemLoaderModel!: InjectedReference<typeof PortalItemLoaderModel>;
+    private controller: PortalItemLoaderController;
     private vm: Vue;
     private binding: Binding;
 
     activate(): void {
         this.initComponent();
         const i18n = this._i18n.get().ui;
-        this.controller = new PortalContentController(i18n, this._mapWidgetModel, this._portalContentModel);
+        this.controller = new PortalItemLoaderController(i18n, this._mapWidgetModel, this._portalItemLoaderModel);
     }
 
     deactivate(): void {
@@ -49,7 +49,7 @@ export default class PortalContentWidgetFactory {
 
         widget.activateTool = async () => {
             this.binding.enable().syncToLeftNow();
-            const model = this._portalContentModel;
+            const model = this._portalItemLoaderModel;
             controller.queryPortalItems(model.pagination, model.portalFilter, model.searchText,
                 model.spaceFilter, model.sortAscending, model.sortByField);
 
@@ -73,8 +73,8 @@ export default class PortalContentWidgetFactory {
     }
 
     private initComponent(): void {
-        const vm = this.vm = new Vue(PortalContentWidget);
-        const model = this._portalContentModel;
+        const vm = this.vm = new Vue(PortalItemLoaderWidget);
+        const model = this._portalItemLoaderModel;
         vm.i18n = this._i18n.get().ui;
         vm.pagination = model.pagination;
         vm.rowsPerPageItems = model.rowsPerPageItems;
diff --git a/src/main/js/bundles/dn_portalitemloader/manifest.json b/src/main/js/bundles/dn_portalitemloader/manifest.json
index c8e6bdd..6891ea4 100644
--- a/src/main/js/bundles/dn_portalitemloader/manifest.json
+++ b/src/main/js/bundles/dn_portalitemloader/manifest.json
@@ -27,17 +27,18 @@
     ],
     "layout-widgets": [
         {
-            "widgetRole": "portalContentWidget",
+            "widgetRole": "portalItemLoaderWidget",
             "window": {
-                "dockTool": "portalContentToggleTool",
+                "dockTool": "portalItemLoaderToggleTool",
                 "closable": true,
                 "minimizeOnClose": true,
                 "maximizable": true,
-                "resizable": true
+                "resizable": true,
+                "windowClass": "noPadding"
             }
         },
         {
-            "widgetRole": "portalContentWidget",
+            "widgetRole": "portalItemLoaderWidget",
             "sublayout": [
                 "desktop"
             ],
@@ -49,7 +50,7 @@
             }
         },
         {
-            "widgetRole": "portalContentWidget",
+            "widgetRole": "portalItemLoaderWidget",
             "sublayout": [
                 "tablet_landscape",
                 "tablet_portrait"
@@ -67,7 +68,7 @@
             }
         },
         {
-            "widgetRole": "portalContentWidget",
+            "widgetRole": "portalItemLoaderWidget",
             "sublayout": [
                 "mobile_landscape",
                 "mobile_portrait"
@@ -86,8 +87,8 @@
     "components": [
         {
             "name": "Config",
-            "impl": "./PortalContentModel",
-            "provides": "dn_portalitemloader.PortalContentModel",
+            "impl": "./PortalItemLoaderModel",
+            "provides": "dn_portalitemloader.PortalItemLoaderModel",
             "propertiesConstructor": true,
             "properties": {
                 "portals": [
@@ -199,19 +200,19 @@
             }
         },
         {
-            "name": "PortalContentWidgetFactory",
+            "name": "PortalItemLoaderWidgetFactory",
             "provides": [
                 "dijit.Widget",
                 "dn_portalitemloader.Widget"
             ],
             "instanceFactory": true,
             "properties": {
-                "widgetRole": "portalContentWidget"
+                "widgetRole": "portalItemLoaderWidget"
             },
             "references": [
                 {
-                    "name": "_portalContentModel",
-                    "providing": "dn_portalitemloader.PortalContentModel"
+                    "name": "_portalItemLoaderModel",
+                    "providing": "dn_portalitemloader.PortalItemLoaderModel"
                 },
                 {
                     "name": "_mapWidgetModel",
@@ -220,14 +221,14 @@
             ]
         },
         {
-            "name": "PortalContentToggleTool",
+            "name": "PortalItemLoaderToggleTool",
             "impl": "ct/tools/Tool",
             "provides": [
                 "ct.tools.Tool"
             ],
             "propertiesConstructor": true,
             "properties": {
-                "id": "portalContentToggleTool",
+                "id": "portalItemLoaderToggleTool",
                 "title": "${tool.title}",
                 "tooltip": "${tool.tooltip}",
                 "iconClass": "icon-toolcase",
diff --git a/src/main/js/bundles/dn_portalitemloader/module.ts b/src/main/js/bundles/dn_portalitemloader/module.ts
index dd6b5a8..fdf6e17 100644
--- a/src/main/js/bundles/dn_portalitemloader/module.ts
+++ b/src/main/js/bundles/dn_portalitemloader/module.ts
@@ -15,6 +15,6 @@
 ///
 
 import ".";
-import "./PortalContentWidgetFactory";
-import "./PortalContentModel";
+import "./PortalItemLoaderWidgetFactory";
+import "./PortalItemLoaderModel";
 import "ct/tools/Tool";
diff --git a/src/main/js/bundles/dn_portalitemloader/templates/PortalContentWidget.vue b/src/main/js/bundles/dn_portalitemloader/templates/PortalItemLoaderWidget.vue
similarity index 100%
rename from src/main/js/bundles/dn_portalitemloader/templates/PortalContentWidget.vue
rename to src/main/js/bundles/dn_portalitemloader/templates/PortalItemLoaderWidget.vue

From 4cf40702b24188720920f97641f7ccb68eff5888 Mon Sep 17 00:00:00 2001
From: Matthias Stein <m.stein@conterra.de>
Date: Sun, 1 Dec 2024 10:08:36 +0100
Subject: [PATCH 03/13] Rename some css classes

---
 .../PortalItemLoaderWidgetFactory.ts          |  2 +-
 .../dn_portalitemloader/css/styles.css        | 35 +++++++++----------
 .../templates/FilterWidget.vue                |  2 +-
 .../templates/PortalItemLoaderWidget.vue      |  8 ++---
 4 files changed, 23 insertions(+), 24 deletions(-)

diff --git a/src/main/js/bundles/dn_portalitemloader/PortalItemLoaderWidgetFactory.ts b/src/main/js/bundles/dn_portalitemloader/PortalItemLoaderWidgetFactory.ts
index f348262..32b43a8 100644
--- a/src/main/js/bundles/dn_portalitemloader/PortalItemLoaderWidgetFactory.ts
+++ b/src/main/js/bundles/dn_portalitemloader/PortalItemLoaderWidgetFactory.ts
@@ -45,7 +45,7 @@ export default class PortalItemLoaderWidgetFactory {
 
     createInstance(): any {
         const controller = this.controller;
-        const widget = VueDijit(this.vm, { class: "ct-portal-content-widget" });
+        const widget = VueDijit(this.vm, { class: "ct-portal-item-loader-widget" });
 
         widget.activateTool = async () => {
             this.binding.enable().syncToLeftNow();
diff --git a/src/main/js/bundles/dn_portalitemloader/css/styles.css b/src/main/js/bundles/dn_portalitemloader/css/styles.css
index 386a6fc..c65b2b4 100644
--- a/src/main/js/bundles/dn_portalitemloader/css/styles.css
+++ b/src/main/js/bundles/dn_portalitemloader/css/styles.css
@@ -13,76 +13,75 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.ctAppRoot .ct-portal-content-widget__main {
+.ctAppRoot .ct-portal-item-loader-widget__main {
     height: 100%;
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
 }
 
-.ctAppRoot .ct-portal-content-widget__portal-item-filter {
-    width: 300px;
+.ctAppRoot .ct-portal-item-loader-widget__portal-item-filter {
     flex: 0 0 auto;
 }
 
-.ctAppRoot .ct-portal-content-widget__portal-item-gallery {
+.ctAppRoot .ct-portal-item-loader-widget__portal-item-gallery {
     flex: 1 1 auto;
     display: flex;
     flex-direction: column;
     overflow: auto;
 }
 
-.ctAppRoot .ct-portal-content-widget__portal-item-gallery .loading-indicator {
+.ctAppRoot .ct-portal-item-loader-widget__portal-item-gallery .loading-indicator {
     height: 8px;
 }
 
-.ctAppRoot .ct-portal-content-widget__portal-item-gallery>div:first-child {
+.ctAppRoot .ct-portal-item-loader-widget__portal-item-gallery>div:first-child {
     flex: 0 0 auto;
 }
 
-.ctAppRoot .ct-portal-content-widget__portal-item-gallery>div:nth-child(2) {
+.ctAppRoot .ct-portal-item-loader-widget__portal-item-gallery>div:nth-child(2) {
     flex: 1 1 auto;
     overflow: auto;
 }
 
-.ctAppRoot .ct-portal-content-widget__portal-item-gallery>div:nth-child(3) {
+.ctAppRoot .ct-portal-item-loader-widget__portal-item-gallery>div:nth-child(3) {
     flex: 0 0 auto;
 }
 
-.ctAppRoot .ct-portal-content-widget__portal-item-gallery-content {
+.ctAppRoot .ct-portal-item-loader-widget__portal-item-gallery-content {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
     gap: 12px;
     padding: 4px;
 }
 
-.ctAppRoot .ct-portal-content-widget__portal-item-gallery-content .portal-item-card {
+.ctAppRoot .ct-portal-item-loader-widget__portal-item-gallery-content .portal-item-card {
     display: flex;
 }
 
-.ctAppRoot .ct-portal-content-widget__portal-item-gallery-content .portal-item-card .v-image {
+.ctAppRoot .ct-portal-item-loader-widget__portal-item-gallery-content .portal-item-card .v-image {
     height: 200px;
     max-height: 200px;
 }
 
-.ctAppRoot .ct-portal-content-widget__portal-item-gallery-content .portal-item-card .backup-icon {
+.ctAppRoot .ct-portal-item-loader-widget__portal-item-gallery-content .portal-item-card .backup-icon {
     height: 200px;
     max-height: 200px;
 }
 
-.ctAppRoot .ct-portal-content-widget__portal-item-gallery-content .portal-item-card .v-list {
+.ctAppRoot .ct-portal-item-loader-widget__portal-item-gallery-content .portal-item-card .v-list {
     padding: 0 0 4px;
 }
 
-.ctAppRoot .ct-portal-content-widget__portal-item-gallery-content .portal-item-card .v-list--dense .v-list__tile--avatar {
+.ctAppRoot .ct-portal-item-loader-widget__portal-item-gallery-content .portal-item-card .v-list--dense .v-list__tile--avatar {
     height: 30px;
     padding: 0;
 }
 
-.ctAppRoot .ct-portal-content-widget__portal-item-gallery-content .portal-item-card .v-icon--left {
+.ctAppRoot .ct-portal-item-loader-widget__portal-item-gallery-content .portal-item-card .v-icon--left {
     margin-right: 4px;
 }
 
-.ctAppRoot .ct-portal-content-widget__portal-item-gallery-content .portal-item-card .item-text {
+.ctAppRoot .ct-portal-item-loader-widget__portal-item-gallery-content .portal-item-card .item-text {
     display: block;
     display: -webkit-box;
     -webkit-line-clamp: 4;
@@ -95,6 +94,6 @@
     padding-right: 8px;
 }
 
-.ctAppRoot .ct-portal-content-widget__portal-item-filter .sort-ascending-button .v-icon {
+.ctAppRoot .ct-portal-item-loader-widget__portal-item-filter .sort-ascending-button .v-icon {
     margin-right: 0;
 }
diff --git a/src/main/js/bundles/dn_portalitemloader/templates/FilterWidget.vue b/src/main/js/bundles/dn_portalitemloader/templates/FilterWidget.vue
index 455a811..1f705c0 100644
--- a/src/main/js/bundles/dn_portalitemloader/templates/FilterWidget.vue
+++ b/src/main/js/bundles/dn_portalitemloader/templates/FilterWidget.vue
@@ -20,7 +20,7 @@
         fluid
         grid-list-md
         pa-1
-        class="ct-portal-content-widget__portal-item-filter"
+        class="ct-portal-item-loader-widget__portal-item-filter"
     >
         <v-select
             v-if="portals.length>1"
diff --git a/src/main/js/bundles/dn_portalitemloader/templates/PortalItemLoaderWidget.vue b/src/main/js/bundles/dn_portalitemloader/templates/PortalItemLoaderWidget.vue
index ebd3f10..d7b7e42 100644
--- a/src/main/js/bundles/dn_portalitemloader/templates/PortalItemLoaderWidget.vue
+++ b/src/main/js/bundles/dn_portalitemloader/templates/PortalItemLoaderWidget.vue
@@ -16,9 +16,9 @@
 
 -->
 <template>
-    <div class="ct-portal-content-widget__main">
+    <div class="ct-portal-item-loader-widget__main">
         <div
-            class="ct-portal-content-widget__portal-item-filter"
+            class="ct-portal-item-loader-widget__portal-item-filter"
         >
             <filter-widget
                 :i18n="i18n"
@@ -44,8 +44,8 @@
             :no-results-text="i18n.noResultsText"
             :no-data-text="i18n.noDataText"
             content-tag="div"
-            content-class="ct-portal-content-widget__portal-item-gallery-content"
-            class="ct-portal-content-widget__portal-item-gallery"
+            content-class="ct-portal-item-loader-widget__portal-item-gallery-content"
+            class="ct-portal-item-loader-widget__portal-item-gallery"
         >
             <template
                 #header

From 446ff09285bee8aebd62f4a2b90cdabe2908396c Mon Sep 17 00:00:00 2001
From: Matthias Stein <m.stein@conterra.de>
Date: Sun, 1 Dec 2024 12:23:54 +0100
Subject: [PATCH 04/13] Improve styling

---
 .../dn_portalitemloader/css/styles.css        |  69 +++++--
 .../bundles/dn_portalitemloader/manifest.json |  28 +--
 .../bundles/dn_portalitemloader/nls/bundle.js |   2 +
 .../dn_portalitemloader/nls/de/bundle.js      |   4 +-
 .../templates/FilterWidget.vue                | 184 +++++++++++-------
 .../templates/PortalItem.vue                  |  44 ++---
 .../templates/PortalItemLoaderWidget.vue      |  20 +-
 7 files changed, 200 insertions(+), 151 deletions(-)

diff --git a/src/main/js/bundles/dn_portalitemloader/css/styles.css b/src/main/js/bundles/dn_portalitemloader/css/styles.css
index c65b2b4..23b2456 100644
--- a/src/main/js/bundles/dn_portalitemloader/css/styles.css
+++ b/src/main/js/bundles/dn_portalitemloader/css/styles.css
@@ -30,8 +30,9 @@
     overflow: auto;
 }
 
-.ctAppRoot .ct-portal-item-loader-widget__portal-item-gallery .loading-indicator {
+.ctAppRoot .ct-portal-item-loader-widget__loading-indicator {
     height: 8px;
+    padding: 0 8px;
 }
 
 .ctAppRoot .ct-portal-item-loader-widget__portal-item-gallery>div:first-child {
@@ -49,49 +50,77 @@
 
 .ctAppRoot .ct-portal-item-loader-widget__portal-item-gallery-content {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
     gap: 12px;
-    padding: 4px;
+    padding: 8px;
 }
 
-.ctAppRoot .ct-portal-item-loader-widget__portal-item-gallery-content .portal-item-card {
-    display: flex;
+.ctAppRoot .ct-portal-item-loader-widget__portal-item-card {
+    display: flex !important;
+    flex-direction: column !important;
+    text-align: center;
 }
 
-.ctAppRoot .ct-portal-item-loader-widget__portal-item-gallery-content .portal-item-card .v-image {
+.ctAppRoot .ct-portal-item-loader-widget__portal-item-card-image .v-image {
     height: 200px;
     max-height: 200px;
 }
 
-.ctAppRoot .ct-portal-item-loader-widget__portal-item-gallery-content .portal-item-card .backup-icon {
+.ctAppRoot .ct-portal-item-loader-widget__portal-item-card-image .backup-icon {
     height: 200px;
     max-height: 200px;
 }
 
-.ctAppRoot .ct-portal-item-loader-widget__portal-item-gallery-content .portal-item-card .v-list {
+.ctAppRoot .ct-portal-item-loader-widget__portal-item-card-title {
+    flex: 0 1 auto;
+    padding: 8px;
+    text-align: left;
+    font-weight: bold;
+    display: inline-block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.ctAppRoot .ct-portal-item-loader-widget__portal-item-card-snippet {
+    flex: 1 1 auto;
+    padding: 0 8px;
+    max-height: 75px;
+    text-align: left;
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.ctAppRoot .ct-portal-item-loader-widget__portal-item-card-list {
+    flex: 0 1 auto;
+    padding: 8px 8px 0 8px;
+}
+
+.ctAppRoot .ct-portal-item-loader-widget__portal-item-card-list .v-list {
     padding: 0 0 4px;
 }
 
-.ctAppRoot .ct-portal-item-loader-widget__portal-item-gallery-content .portal-item-card .v-list--dense .v-list__tile--avatar {
+.ctAppRoot .ct-portal-item-loader-widget__portal-item-card-list .v-list--dense .v-list__tile--avatar {
     height: 30px;
     padding: 0;
 }
 
-.ctAppRoot .ct-portal-item-loader-widget__portal-item-gallery-content .portal-item-card .v-icon--left {
+.ctAppRoot .ct-portal-item-loader-widget__portal-item-card-list .v-icon--left {
     margin-right: 4px;
 }
 
-.ctAppRoot .ct-portal-item-loader-widget__portal-item-gallery-content .portal-item-card .item-text {
-    display: block;
-    display: -webkit-box;
-    -webkit-line-clamp: 4;
-    line-clamp: 4;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    text-overflow: ellipsis;
+.ctAppRoot .ct-portal-item-loader-widget__portal-item-filter .ct-portal-item-loader-widget__portal-item-filter-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 12px;
+    padding: 0 24px;
+    padding-bottom: 0;
+}
 
-    padding-left: 8px;
-    padding-right: 8px;
+.ctAppRoot .ct-portal-item-loader-widget__portal-item-filter .ct-portal-item-loader-widget__portal-item-filter-search {
+    padding: 0;
+    width: 100%;
 }
 
 .ctAppRoot .ct-portal-item-loader-widget__portal-item-filter .sort-ascending-button .v-icon {
diff --git a/src/main/js/bundles/dn_portalitemloader/manifest.json b/src/main/js/bundles/dn_portalitemloader/manifest.json
index 6891ea4..3302a9a 100644
--- a/src/main/js/bundles/dn_portalitemloader/manifest.json
+++ b/src/main/js/bundles/dn_portalitemloader/manifest.json
@@ -44,8 +44,12 @@
             ],
             "window": {
                 "marginBox": {
-                    "h": "50%",
-                    "w": "50%"
+                    "h": "70%",
+                    "w": "70%"
+                },
+                "minSize": {
+                    "h": 400,
+                    "w": 340
                 }
             }
         },
@@ -62,8 +66,8 @@
                     "w": "70%"
                 },
                 "minSize": {
-                    "h": 600,
-                    "w": 1000
+                    "h": 400,
+                    "w": 340
                 }
             }
         },
@@ -124,23 +128,23 @@
                 "spaceFilter": "all",
                 "typeFilters": [
                     {
-                        "id":  "MapService",
-                        "title":  "MapService"
+                        "id": "MapService",
+                        "title": "MapService"
                     },
                     {
-                        "id":  "Scene Service",
-                        "title":  "Scene Service"
+                        "id": "Scene Service",
+                        "title": "Scene Service"
                     },
                     {
-                        "id":  "Image Service",
-                        "title":  "Image Service"
+                        "id": "Image Service",
+                        "title": "Image Service"
                     },
                     {
-                        "id":  "Vector Tile Service",
+                        "id": "Vector Tile Service",
                         "title": "Vector Tile Service"
                     },
                     {
-                        "id":  "Feature Service",
+                        "id": "Feature Service",
                         "title": "Feature Service"
                     },
                     {
diff --git a/src/main/js/bundles/dn_portalitemloader/nls/bundle.js b/src/main/js/bundles/dn_portalitemloader/nls/bundle.js
index e3c7386..24cd8df 100644
--- a/src/main/js/bundles/dn_portalitemloader/nls/bundle.js
+++ b/src/main/js/bundles/dn_portalitemloader/nls/bundle.js
@@ -26,6 +26,8 @@ module.exports = {
             addToMap: "Add to map",
             searchForItems: "Search for items",
             searchForItemsPlaceholder: "Search for...",
+            showFilters: "Hide filters",
+            hideFilters: "Show filters",
             filterForPortal: "Select portal",
             tags: "Tags",
             noDataText: "No portal items",
diff --git a/src/main/js/bundles/dn_portalitemloader/nls/de/bundle.js b/src/main/js/bundles/dn_portalitemloader/nls/de/bundle.js
index 2ddbe5c..bcd92cf 100644
--- a/src/main/js/bundles/dn_portalitemloader/nls/de/bundle.js
+++ b/src/main/js/bundles/dn_portalitemloader/nls/de/bundle.js
@@ -22,9 +22,11 @@ module.exports = {
     },
     ui: {
         all: "Alle Portale",
-        addToMap: "Hinzufügen",
+        addToMap: "Zur Karte hinzufügen",
         searchForItems: "Nach Inhalten suchen",
         searchForItemsPlaceholder: "Suchen nach...",
+        showFilters: "Filter anzeigen",
+        hideFilters: "Filter ausblenden",
         filterForPortal: "Portal auswählen",
         tags: "Tags",
         noDataText: "Keine Portalinhalte vorhanden",
diff --git a/src/main/js/bundles/dn_portalitemloader/templates/FilterWidget.vue b/src/main/js/bundles/dn_portalitemloader/templates/FilterWidget.vue
index 1f705c0..d54e9b0 100644
--- a/src/main/js/bundles/dn_portalitemloader/templates/FilterWidget.vue
+++ b/src/main/js/bundles/dn_portalitemloader/templates/FilterWidget.vue
@@ -19,84 +19,106 @@
     <v-container
         fluid
         grid-list-md
-        pa-1
+        pa-0
         class="ct-portal-item-loader-widget__portal-item-filter"
     >
-        <v-select
-            v-if="portals.length>1"
-            v-model="localPortalFilter"
-            class="pb-2"
-            item-value="id"
-            item-text="title"
-            prepend-inner-icon="filter"
-            :items="portals"
-            :label="i18n.filterForPortal"
-            hide-details
-        />
-        <v-text-field
-            v-model="localSearchText"
-            class="pb-2"
-            clearable
-            prepend-inner-icon="search"
-            :label="i18n.searchForItems"
-            :placeholder="i18n.searchForItemsPlaceholder"
-            hide-details
-        />
-        <v-select
-            v-if="authenticated"
-            v-model="localSpaceFilter"
-            class="pb-2"
-            item-value="id"
-            item-text="title"
-            prepend-inner-icon="filter"
-            :items="spaceFilters"
-            :label="i18n.spaceFilter"
-            hide-details
-        />
-        <v-select
-            v-model="localTypeFilter"
-            class="pb-2"
-            item-value="id"
-            item-text="title"
-            prepend-inner-icon="filter"
-            :items="typeFilters"
-            :label="i18n.typeFilter"
-            hide-details
-        />
-        <div class="ct-flex-container">
-            <div class="ct-flex-item">
-                <v-select
-                    v-model="localSortByField"
-                    class="pb-2"
-                    item-value="id"
-                    item-text="title"
-                    prepend-inner-icon="sort"
-                    :items="sortByFields"
-                    :label="i18n.sortBy"
-                    hide-details
-                />
-            </div>
-            <div class="ct-flex-item ct-flex-item--no-grow">
-                <v-btn
-                    icon
-                    flat
-                    class="sort-ascending-button"
-                    color="primary"
-                    @click="localSortAscending=!localSortAscending"
-                >
-                    <v-icon
-                        v-if="localSortAscending"
-                        left
-                    >
-                        arrow_downward
-                    </v-icon>
-                    <v-icon
-                        v-else
-                        left
+        <v-toolbar
+            flat
+            dense
+        >
+            <v-text-field
+                v-model="localSearchText"
+                clearable
+                prepend-inner-icon="search"
+                :placeholder="i18n.searchForItemsPlaceholder"
+                hide-details
+                class="ct-portal-item-loader-widget__portal-item-filter-search"
+            />
+            <v-spacer />
+
+            <v-btn
+                flat
+                :input-value="filterVisible"
+                :color="filterVisible ? 'primary' : undefined"
+                @click="filterVisible=!filterVisible"
+            >
+                {{ filterText }}
+                <v-icon right>
+                    filter_alt
+                </v-icon>
+            </v-btn>
+        </v-toolbar>
+        <div
+            v-if="filterVisible"
+            class="ct-portal-item-loader-widget__portal-item-filter-container"
+        >
+            <v-select
+                v-if="portals.length>1"
+                v-model="localPortalFilter"
+                item-value="id"
+                item-text="title"
+                prepend-inner-icon="filter"
+                :items="portals"
+                :label="i18n.filterForPortal"
+                hide-details
+                class="ct-portal-item-loader-widget__portal-item-filter-portal-select"
+            />
+            <v-select
+                v-if="authenticated"
+                v-model="localSpaceFilter"
+                class="pb-2"
+                item-value="id"
+                item-text="title"
+                prepend-inner-icon="filter"
+                :items="spaceFilters"
+                :label="i18n.spaceFilter"
+                hide-details
+            />
+            <v-select
+                v-model="localTypeFilter"
+                class="pb-2"
+                item-value="id"
+                item-text="title"
+                prepend-inner-icon="filter"
+                :items="typeFilters"
+                :label="i18n.typeFilter"
+                hide-details
+            />
+            <div class="ct-flex-container">
+                <div class="ct-flex-item">
+                    <v-select
+                        v-model="localSortByField"
+                        class="pb-2"
+                        item-value="id"
+                        item-text="title"
+                        prepend-inner-icon="sort"
+                        :items="sortByFields"
+                        :label="i18n.sortBy"
+                        hide-details
+                    />
+                </div>
+                <div class="ct-flex-item ct-flex-item--no-grow">
+                    <v-btn
+                        icon
+                        flat
+                        class="sort-ascending-button"
+                        color="primary"
+                        @click="localSortAscending=!localSortAscending"
                     >
-                        arrow_upward
-                    </v-icon>
-                </v-btn>
+                        <v-icon
+                            v-if="localSortAscending"
+                            left
+                        >
+                            arrow_downward
+                        </v-icon>
+                        <v-icon
+                            v-else
+                            left
+                        >
+                            arrow_upward
+                        </v-icon>
+                    </v-btn>
+                </div>
             </div>
         </div>
     </v-container>
@@ -155,7 +177,19 @@
                 default: () => []
             }
         },
+        data() {
+            return {
+                filterVisible: false
+            };
+        },
         computed: {
+            filterText() {
+                if(this.filterVisible) {
+                    return this.i18n.hideFilters;
+                } else {
+                    return this.i18n.showFilters;
+                }
+            },
             localSearchText: {
                 get: function () {
                     return this.searchText;
diff --git a/src/main/js/bundles/dn_portalitemloader/templates/PortalItem.vue b/src/main/js/bundles/dn_portalitemloader/templates/PortalItem.vue
index 8102057..dfed09e 100644
--- a/src/main/js/bundles/dn_portalitemloader/templates/PortalItem.vue
+++ b/src/main/js/bundles/dn_portalitemloader/templates/PortalItem.vue
@@ -17,11 +17,12 @@
 -->
 <template>
     <v-card
-        class="portal-item-card ct-flex-container ct-flex-container--column fullHeight"
+        class="ct-portal-item-loader-widget__portal-item-card"
     >
         <a
             :href="item.itemPageUrl"
             target="_blank"
+            class="ct-portal-item-loader-widget__portal-item-card-image"
         >
             <v-img
                 v-if="item.thumbnailUrl"
@@ -36,15 +37,18 @@
                 panorama
             </v-icon>
         </a>
-        <v-card-title
-            class="ct-flex-item ct-flex-item--no-grow"
+        <div
+            class="ct-portal-item-loader-widget__portal-item-card-title"
         >
-            <h4 class="text-truncate">
-                {{ item.title }}
-            </h4>
-        </v-card-title>
-        <v-card-text
-            class="ct-flex-item py-0"
+            {{ item.title }}
+        </div>
+        <div
+            class="ct-portal-item-loader-widget__portal-item-card-snippet"
+        >
+            {{ item.snippet }}
+        </div>
+        <div
+            class="ct-portal-item-loader-widget__portal-item-card-list"
         >
             <v-list dense>
                 <v-list-tile
@@ -84,18 +88,6 @@
                         <v-list-tile-title>{{ item.numViews }}</v-list-tile-title>
                     </v-list-tile-content>
                 </v-list-tile>
-                <v-list-tile
-                    avatar
-                >
-                    <v-list-tile-avatar>
-                        <v-icon>
-                            more_time
-                        </v-icon>
-                    </v-list-tile-avatar>
-                    <v-list-tile-content>
-                        <v-list-tile-title>{{ created }}</v-list-tile-title>
-                    </v-list-tile-content>
-                </v-list-tile>
                 <v-list-tile
                     avatar
                 >
@@ -109,10 +101,7 @@
                     </v-list-tile-content>
                 </v-list-tile>
             </v-list>
-            <div class="item-text">
-                {{ item.snippet }}
-            </div>
-        </v-card-text>
+        </div>
         <v-card-actions
             class="ct-flex-item ct-flex-item--no-grow ct-flex-item--no-shrink"
         >
@@ -162,11 +151,8 @@
             }
         },
         computed: {
-            created() {
-                return moment(this.item.created).format("DD.MM.YYYY, HH:mm:ss");
-            },
             modified() {
-                return moment(this.item.modified).format("DD.MM.YYYY, HH:mm:ss");
+                return moment(this.item.modified).format("DD.MM.YYYY");
             }
         }
     };
diff --git a/src/main/js/bundles/dn_portalitemloader/templates/PortalItemLoaderWidget.vue b/src/main/js/bundles/dn_portalitemloader/templates/PortalItemLoaderWidget.vue
index d7b7e42..2ee3a2f 100644
--- a/src/main/js/bundles/dn_portalitemloader/templates/PortalItemLoaderWidget.vue
+++ b/src/main/js/bundles/dn_portalitemloader/templates/PortalItemLoaderWidget.vue
@@ -51,7 +51,7 @@
                 #header
             >
                 <div
-                    class="loading-indicator"
+                    class="ct-portal-item-loader-widget__loading-indicator"
                 >
                     <v-progress-linear
                         v-show="loading"
@@ -63,15 +63,11 @@
             <template
                 #item="props"
             >
-                <div
-                    class="portal-flex-item"
-                >
-                    <portal-item
-                        :i18n="i18n"
-                        :item="props.item"
-                        @load-item="$emit('load-item', $event)"
-                    />
-                </div>
+                <portal-item
+                    :i18n="i18n"
+                    :item="props.item"
+                    @load-item="$emit('load-item', $event)"
+                />
             </template>
         </v-data-iterator>
     </div>
@@ -167,10 +163,6 @@
                 default: () => []
             }
         },
-        data() {
-            return {
-            };
-        },
         methods: {
             filterItems: function (items, search) {
                 return items.filter(r => this.customFilter(r, search));

From 988e4ddf623a88689a170b94cff9c71ec24fc4c9 Mon Sep 17 00:00:00 2001
From: Matthias Stein <m.stein@conterra.de>
Date: Sun, 1 Dec 2024 12:26:04 +0100
Subject: [PATCH 05/13] Improve styling

---
 src/main/js/bundles/dn_portalitemloader/css/styles.css        | 4 ++++
 .../js/bundles/dn_portalitemloader/templates/PortalItem.vue   | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/main/js/bundles/dn_portalitemloader/css/styles.css b/src/main/js/bundles/dn_portalitemloader/css/styles.css
index 23b2456..3e46649 100644
--- a/src/main/js/bundles/dn_portalitemloader/css/styles.css
+++ b/src/main/js/bundles/dn_portalitemloader/css/styles.css
@@ -126,3 +126,7 @@
 .ctAppRoot .ct-portal-item-loader-widget__portal-item-filter .sort-ascending-button .v-icon {
     margin-right: 0;
 }
+
+.ctAppRoot .ct-portal-item-loader-widget__portal-item-card-actions {
+    flex: 0 1 auto;
+}
diff --git a/src/main/js/bundles/dn_portalitemloader/templates/PortalItem.vue b/src/main/js/bundles/dn_portalitemloader/templates/PortalItem.vue
index dfed09e..b192f86 100644
--- a/src/main/js/bundles/dn_portalitemloader/templates/PortalItem.vue
+++ b/src/main/js/bundles/dn_portalitemloader/templates/PortalItem.vue
@@ -103,7 +103,7 @@
             </v-list>
         </div>
         <v-card-actions
-            class="ct-flex-item ct-flex-item--no-grow ct-flex-item--no-shrink"
+            class="ct-portal-item-loader-widget__portal-item-card-actions"
         >
             <v-btn
                 block

From 62c9a0be2316bfaec3e48deeadfa3aa9d1361453 Mon Sep 17 00:00:00 2001
From: Matthias Stein <m.stein@conterra.de>
Date: Mon, 2 Dec 2024 08:15:33 +0100
Subject: [PATCH 06/13] Show filters on startup

---
 .../js/bundles/dn_portalitemloader/templates/FilterWidget.vue   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/main/js/bundles/dn_portalitemloader/templates/FilterWidget.vue b/src/main/js/bundles/dn_portalitemloader/templates/FilterWidget.vue
index d54e9b0..b88bcbb 100644
--- a/src/main/js/bundles/dn_portalitemloader/templates/FilterWidget.vue
+++ b/src/main/js/bundles/dn_portalitemloader/templates/FilterWidget.vue
@@ -179,7 +179,7 @@
         },
         data() {
             return {
-                filterVisible: false
+                filterVisible: true
             };
         },
         computed: {

From 2a32bd15691a519fa8c51df8113954d9974c458c Mon Sep 17 00:00:00 2001
From: Matthias Stein <m.stein@conterra.de>
Date: Mon, 2 Dec 2024 08:29:07 +0100
Subject: [PATCH 07/13] Improve add to map code

---
 pom.xml                                       |  8 +++++
 src/main/js/apps/sample/app.json              |  3 +-
 .../PortalItemLoaderController.ts             | 32 ++++++++++++++-----
 .../PortalItemLoaderWidgetFactory.ts          |  8 +++--
 .../bundles/dn_portalitemloader/manifest.json | 13 +++++++-
 .../bundles/dn_portalitemloader/nls/bundle.js |  1 +
 .../dn_portalitemloader/nls/de/bundle.js      |  1 +
 7 files changed, 53 insertions(+), 13 deletions(-)

diff --git a/pom.xml b/pom.xml
index 2082069..a557aa1 100644
--- a/pom.xml
+++ b/pom.xml
@@ -49,6 +49,14 @@
             </dependency>
         </dependencies>
     </dependencyManagement>
+    <dependencies>
+        <dependency>
+            <groupId>de.conterra.sdi-extension</groupId>
+            <artifactId>ct-sdi-extension-js</artifactId>
+            <version>5.6.3</version>
+            <scope>test</scope>
+        </dependency>
+    </dependencies>
     <build>
         <pluginManagement>
             <plugins>
diff --git a/src/main/js/apps/sample/app.json b/src/main/js/apps/sample/app.json
index 5a4202d..d9e6c8b 100644
--- a/src/main/js/apps/sample/app.json
+++ b/src/main/js/apps/sample/app.json
@@ -25,7 +25,8 @@
             "search-ui",
             "locator-store",
             "toc",
-            "dn_portalitemloader"
+            "dn_portalitemloader",
+            "sdi_loadservice"
         ]
     },
     "bundles": {
diff --git a/src/main/js/bundles/dn_portalitemloader/PortalItemLoaderController.ts b/src/main/js/bundles/dn_portalitemloader/PortalItemLoaderController.ts
index 137cd1f..9d3eb41 100644
--- a/src/main/js/bundles/dn_portalitemloader/PortalItemLoaderController.ts
+++ b/src/main/js/bundles/dn_portalitemloader/PortalItemLoaderController.ts
@@ -18,17 +18,21 @@ import Portal from "esri/portal/Portal";
 import Layer from "esri/layers/Layer";
 import MapWidgetModel from "map-widget/MapWidgetModel";
 import PortalItemLoaderModel from "./PortalItemLoaderModel";
+import GroupLayer from "esri/layers/GroupLayer";
 
 export default class PortalItemLoaderWidgetController {
 
     private readonly mapWidgetModel: MapWidgetModel;
     private readonly portalItemLoaderModel: typeof PortalItemLoaderModel;
+    private readonly addLayerService: any;
     private lastTimeout: any;
     private abortController: AbortController | undefined;
     private portal: __esri.Portal | undefined;
 
-    constructor(i18n: any, mapWidgetModel: MapWidgetModel, portalItemLoaderModel: typeof PortalItemLoaderModel) {
+    constructor(i18n: any, mapWidgetModel: MapWidgetModel,
+        portalItemLoaderModel: typeof PortalItemLoaderModel, addLayerService: any) {
         this.mapWidgetModel = mapWidgetModel;
+        this.addLayerService = addLayerService;
         const model = this.portalItemLoaderModel = portalItemLoaderModel;
         model.portalFilter = model.portals[0].id;
         this.changeSelectedPortal(model.portalFilter);
@@ -178,20 +182,32 @@ export default class PortalItemLoaderWidgetController {
         this.portalItemLoaderModel.portalItems = portalItems;
     }
 
-    addPortalItemLayerToMap(item: any): void {
-        Layer.fromPortalItem({
+    async addPortalItemLayerToMap(item: any): Promise<void> {
+        const model = this.portalItemLoaderModel;
+        const map = this.mapWidgetModel.map;
+        const layer = await Layer.fromPortalItem({
             portalItem: {
-                // autocasts new PortalItem()
                 id: item.id,
-                // autocastable to Portal
                 portal: {
                     url: item.portalUrl
                 }
             }
-        }).then((layer) => {
-            // add the layer to the map
-            this.mapWidgetModel.map.add(layer);
         });
+
+        if (this.addLayerService) {
+            this.addLayerService.addLayerToMap(layer);
+            console.info("PortalItemLoader: Used sdi_loadservice to add layer to map");
+        } else {
+            let root = map.findLayerById(model.rootId);
+            if (!root) {
+                root = new GroupLayer({
+                    id: model.rootId,
+                    title: model.rootTitle || model.rootId
+                });
+            }
+            map.add(root);
+            root.add(layer);
+        }
     }
 
 }
diff --git a/src/main/js/bundles/dn_portalitemloader/PortalItemLoaderWidgetFactory.ts b/src/main/js/bundles/dn_portalitemloader/PortalItemLoaderWidgetFactory.ts
index 32b43a8..b227f13 100644
--- a/src/main/js/bundles/dn_portalitemloader/PortalItemLoaderWidgetFactory.ts
+++ b/src/main/js/bundles/dn_portalitemloader/PortalItemLoaderWidgetFactory.ts
@@ -28,6 +28,7 @@ export default class PortalItemLoaderWidgetFactory {
     private readonly _i18n!: InjectedReference<any>;
     private readonly _mapWidgetModel!: InjectedReference<MapWidgetModel>;
     private readonly _portalItemLoaderModel!: InjectedReference<typeof PortalItemLoaderModel>;
+    private readonly _addLayerService!: InjectedReference<any>;
     private controller: PortalItemLoaderController;
     private vm: Vue;
     private binding: Binding;
@@ -35,7 +36,8 @@ export default class PortalItemLoaderWidgetFactory {
     activate(): void {
         this.initComponent();
         const i18n = this._i18n.get().ui;
-        this.controller = new PortalItemLoaderController(i18n, this._mapWidgetModel, this._portalItemLoaderModel);
+        this.controller = new PortalItemLoaderController(i18n, this._mapWidgetModel,
+            this._portalItemLoaderModel, this._addLayerService);
     }
 
     deactivate(): void {
@@ -49,11 +51,11 @@ export default class PortalItemLoaderWidgetFactory {
 
         widget.activateTool = async () => {
             this.binding.enable().syncToLeftNow();
-            const model = this._portalItemLoaderModel;
+            const model = this._portalItemLoaderModel!;
             controller.queryPortalItems(model.pagination, model.portalFilter, model.searchText,
                 model.spaceFilter, model.sortAscending, model.sortByField);
 
-            this.vm.$on("load-item", (item) => {
+            this.vm.$on("load-item", (item: any) => {
                 controller.addPortalItemLayerToMap(item);
             });
         };
diff --git a/src/main/js/bundles/dn_portalitemloader/manifest.json b/src/main/js/bundles/dn_portalitemloader/manifest.json
index 3302a9a..51a1869 100644
--- a/src/main/js/bundles/dn_portalitemloader/manifest.json
+++ b/src/main/js/bundles/dn_portalitemloader/manifest.json
@@ -17,6 +17,9 @@
         "map-widget": "^4.14.0",
         "esri": "^4.22.0"
     },
+    "optionalDependencies": {
+        "sdi_loadservice": "^5.6.0"
+    },
     "cssThemesExtension": [
         {
             "name": "*",
@@ -200,7 +203,9 @@
                         "id": "num-view",
                         "title": "${ui.sortByFields.num-view}"
                     }
-                ]
+                ],
+                "rootId": "my_services",
+                "rootTitle": "${ui.myServicesTitle}"
             }
         },
         {
@@ -221,6 +226,12 @@
                 {
                     "name": "_mapWidgetModel",
                     "providing": "map-widget.MapWidgetModel"
+                },
+                {
+                    "name": "_addLayerService",
+                    "providing": "sdi_loadservice.AddLayerService",
+                    "cardinality": "0..1",
+                    "bind": "addLayerService"
                 }
             ]
         },
diff --git a/src/main/js/bundles/dn_portalitemloader/nls/bundle.js b/src/main/js/bundles/dn_portalitemloader/nls/bundle.js
index 24cd8df..2204ee3 100644
--- a/src/main/js/bundles/dn_portalitemloader/nls/bundle.js
+++ b/src/main/js/bundles/dn_portalitemloader/nls/bundle.js
@@ -24,6 +24,7 @@ module.exports = {
         ui: {
             all: "All portals",
             addToMap: "Add to map",
+            myServicesTitle: "My Services",
             searchForItems: "Search for items",
             searchForItemsPlaceholder: "Search for...",
             showFilters: "Hide filters",
diff --git a/src/main/js/bundles/dn_portalitemloader/nls/de/bundle.js b/src/main/js/bundles/dn_portalitemloader/nls/de/bundle.js
index bcd92cf..f51dd39 100644
--- a/src/main/js/bundles/dn_portalitemloader/nls/de/bundle.js
+++ b/src/main/js/bundles/dn_portalitemloader/nls/de/bundle.js
@@ -23,6 +23,7 @@ module.exports = {
     ui: {
         all: "Alle Portale",
         addToMap: "Zur Karte hinzufügen",
+        myServicesTitle: "Eigene Dienste",
         searchForItems: "Nach Inhalten suchen",
         searchForItemsPlaceholder: "Suchen nach...",
         showFilters: "Filter anzeigen",

From dcba4e54e9abbbb8b6a31a6b48da5975aaf96c13 Mon Sep 17 00:00:00 2001
From: Matthias Stein <m.stein@conterra.de>
Date: Mon, 2 Dec 2024 09:22:50 +0100
Subject: [PATCH 08/13] Improve ui

---
 src/main/js/bundles/dn_portalitemloader/css/styles.css | 3 ++-
 src/main/js/bundles/dn_portalitemloader/manifest.json  | 5 +----
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/main/js/bundles/dn_portalitemloader/css/styles.css b/src/main/js/bundles/dn_portalitemloader/css/styles.css
index 3e46649..620cf8d 100644
--- a/src/main/js/bundles/dn_portalitemloader/css/styles.css
+++ b/src/main/js/bundles/dn_portalitemloader/css/styles.css
@@ -56,6 +56,7 @@
 }
 
 .ctAppRoot .ct-portal-item-loader-widget__portal-item-card {
+    max-height: 488px;
     display: flex !important;
     flex-direction: column !important;
     text-align: center;
@@ -102,7 +103,7 @@
 }
 
 .ctAppRoot .ct-portal-item-loader-widget__portal-item-card-list .v-list--dense .v-list__tile--avatar {
-    height: 30px;
+    height: 24px;
     padding: 0;
 }
 
diff --git a/src/main/js/bundles/dn_portalitemloader/manifest.json b/src/main/js/bundles/dn_portalitemloader/manifest.json
index 51a1869..459ef0a 100644
--- a/src/main/js/bundles/dn_portalitemloader/manifest.json
+++ b/src/main/js/bundles/dn_portalitemloader/manifest.json
@@ -106,13 +106,10 @@
                     }
                 ],
                 "rowsPerPageItems": [
-                    10,
-                    25,
-                    50,
                     100
                 ],
                 "pagination": {
-                    "rowsPerPage": 10
+                    "rowsPerPage": 100
                 },
                 "spaceFilters": [
                     {

From 5c67b15f1a9021f7122a91f14d223ea6095cab8d Mon Sep 17 00:00:00 2001
From: Matthias Stein <m.stein@conterra.de>
Date: Mon, 2 Dec 2024 10:14:10 +0100
Subject: [PATCH 09/13] Add tags to search

---
 .../bundles/dn_portalitemloader/PortalItemLoaderController.ts   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/main/js/bundles/dn_portalitemloader/PortalItemLoaderController.ts b/src/main/js/bundles/dn_portalitemloader/PortalItemLoaderController.ts
index 9d3eb41..9e89814 100644
--- a/src/main/js/bundles/dn_portalitemloader/PortalItemLoaderController.ts
+++ b/src/main/js/bundles/dn_portalitemloader/PortalItemLoaderController.ts
@@ -134,7 +134,7 @@ export default class PortalItemLoaderWidgetController {
                         query = "owner:" + portal.user.username;
                 }
                 if (searchText !== "") {
-                    query += " AND (title:" + searchText + " OR description:" + searchText + " OR snippet:" + searchText + ")";
+                    query += " AND (title:" + searchText + " OR description:" + searchText + " OR snippet:" + searchText + " OR tags:" + searchText + ")";
                 }
                 if (typeFilter !== "all") {
                     query += " AND type:" + typeFilter;

From da9f4ff74e93f7a21644ad7c09a07d8908c10b7c Mon Sep 17 00:00:00 2001
From: Lia Kirsch <l.kirsch@conterra.de>
Date: Mon, 2 Dec 2024 13:56:25 +0100
Subject: [PATCH 10/13] update sort fields

---
 src/main/js/bundles/README.md                                 | 4 ++--
 src/main/js/bundles/dn_portalitemloader/manifest.json         | 4 ++--
 src/main/js/bundles/dn_portalitemloader/nls/bundle.js         | 2 +-
 src/main/js/bundles/dn_portalitemloader/nls/de/bundle.js      | 2 +-
 .../js/bundles/dn_portalitemloader/templates/FilterWidget.vue | 4 ++--
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/main/js/bundles/README.md b/src/main/js/bundles/README.md
index 3050805..d17622e 100644
--- a/src/main/js/bundles/README.md
+++ b/src/main/js/bundles/README.md
@@ -98,8 +98,8 @@ This bundle allows to add portal content to your map.apps app.
                 "title": "${ui.sortByFields.num-comments}"
             },
             {
-                "id": "num-view",
-                "title": "${ui.sortByFields.num-view}"
+                "id": "num-views",
+                "title": "${ui.sortByFields.num-views}"
             }
         ]
     }
diff --git a/src/main/js/bundles/dn_portalitemloader/manifest.json b/src/main/js/bundles/dn_portalitemloader/manifest.json
index 459ef0a..63cbc40 100644
--- a/src/main/js/bundles/dn_portalitemloader/manifest.json
+++ b/src/main/js/bundles/dn_portalitemloader/manifest.json
@@ -197,8 +197,8 @@
                         "title": "${ui.sortByFields.num-comments}"
                     },*/
                     {
-                        "id": "num-view",
-                        "title": "${ui.sortByFields.num-view}"
+                        "id": "num-views",
+                        "title": "${ui.sortByFields.num-views}"
                     }
                 ],
                 "rootId": "my_services",
diff --git a/src/main/js/bundles/dn_portalitemloader/nls/bundle.js b/src/main/js/bundles/dn_portalitemloader/nls/bundle.js
index 2204ee3..b1bcbce 100644
--- a/src/main/js/bundles/dn_portalitemloader/nls/bundle.js
+++ b/src/main/js/bundles/dn_portalitemloader/nls/bundle.js
@@ -57,7 +57,7 @@ module.exports = {
                 "avg-rating": "Average rating",
                 "num-ratings": "Number of ratings",
                 "num-comments": "Number of comments",
-                "num-view": "Number of views"
+                "num-views": "Number of views"
             }
         }
     },
diff --git a/src/main/js/bundles/dn_portalitemloader/nls/de/bundle.js b/src/main/js/bundles/dn_portalitemloader/nls/de/bundle.js
index f51dd39..a9d2426 100644
--- a/src/main/js/bundles/dn_portalitemloader/nls/de/bundle.js
+++ b/src/main/js/bundles/dn_portalitemloader/nls/de/bundle.js
@@ -56,7 +56,7 @@ module.exports = {
             "avg-rating": "Durchschnittliche Bewertung",
             "num-ratings": "Anzahl der Bewertungen",
             "num-comments": "Anzahl der Kommentare",
-            "num-view": "Anzahl der Zugriffe"
+            "num-views": "Anzahl der Zugriffe"
         }
     }
 };
diff --git a/src/main/js/bundles/dn_portalitemloader/templates/FilterWidget.vue b/src/main/js/bundles/dn_portalitemloader/templates/FilterWidget.vue
index b88bcbb..afe2f35 100644
--- a/src/main/js/bundles/dn_portalitemloader/templates/FilterWidget.vue
+++ b/src/main/js/bundles/dn_portalitemloader/templates/FilterWidget.vue
@@ -109,13 +109,13 @@
                             v-if="localSortAscending"
                             left
                         >
-                            arrow_downward
+                            arrow_upward
                         </v-icon>
                         <v-icon
                             v-else
                             left
                         >
-                            arrow_upward
+                            arrow_downward
                         </v-icon>
                     </v-btn>
                 </div>

From 7c3d4b4f83e13a7276425e036523a69ac2fbef06 Mon Sep 17 00:00:00 2001
From: Matthias Stein <m.stein@conterra.de>
Date: Mon, 2 Dec 2024 16:59:47 +0100
Subject: [PATCH 11/13] Improve portal login

---
 gulpfile.js                                   |   2 +-
 src/main/js/apps/sample/app.json              |   3 +-
 .../PortalItemLoaderController.ts             | 117 ++++++++++--------
 3 files changed, 65 insertions(+), 57 deletions(-)

diff --git a/gulpfile.js b/gulpfile.js
index b228ffa..b7ca3db 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -92,7 +92,7 @@ mapappsBrowserSync.registerTask({
     port: localOverrides?.port ?? 9090,
     // activate https protocol, generates a self signed certificate for "localhost"
     // https://browsersync.io/docs/options#option-https
-    https: localOverrides?.https ?? false,
+    https: localOverrides?.https ?? true,
 
     // to prevent auto open of browser, set this to false
     urlToOpen: localOverrides?.openBrowser ?? true,
diff --git a/src/main/js/apps/sample/app.json b/src/main/js/apps/sample/app.json
index d9e6c8b..e042989 100644
--- a/src/main/js/apps/sample/app.json
+++ b/src/main/js/apps/sample/app.json
@@ -36,7 +36,8 @@
                     {
                         "id": "arcgis",
                         "title": "ArcGIS Online",
-                        "url": "https://arcgis.com"
+                        "url": "https://arcgis.com",
+                        "authMode": "auto"
                     }
                 ]
             }
diff --git a/src/main/js/bundles/dn_portalitemloader/PortalItemLoaderController.ts b/src/main/js/bundles/dn_portalitemloader/PortalItemLoaderController.ts
index 9e89814..2b2c234 100644
--- a/src/main/js/bundles/dn_portalitemloader/PortalItemLoaderController.ts
+++ b/src/main/js/bundles/dn_portalitemloader/PortalItemLoaderController.ts
@@ -105,7 +105,7 @@ export default class PortalItemLoaderWidgetController {
     private changeSelectedPortal(portalId: string) {
         const model = this.portalItemLoaderModel;
         const selectedPortal = model.portals.find((portalConfig) => portalConfig.id === portalId);
-        const portal = this.portal = new Portal(selectedPortal.url);
+        const portal = this.portal = new Portal({ url: selectedPortal.url, authMode: selectedPortal.authMode || "auto" });
         portal.load().then(() => {
             if (portal.user) {
                 model.authenticated = true;
@@ -115,71 +115,78 @@ export default class PortalItemLoaderWidgetController {
         });
     }
 
-    private queryPortal(portal: __esri.Portal, pagination: any, searchText: string, spaceFilter: "all" | "organisation" | "my-content", typeFilter: string,
+    private async queryPortal(portal: __esri.Portal, pagination: any, searchText: string, spaceFilter: "all" | "organisation" | "my-content", typeFilter: string,
         sortAscending: boolean, sortByField: string): Promise<__esri.PortalQueryResult> {
         const page = pagination.page;
         const rowsPerPage = pagination.rowsPerPage;
+
+        await this.loginToPortal();
+        let query = "";
+        const filter = "typeKeywords:Service";
+        switch (spaceFilter) {
+            case "all":
+                query = "1=1";
+                break;
+            case "organisation":
+                query = "orgid:" + portal.user.orgId;
+                break;
+            case "my-content":
+                query = "owner:" + portal.user.username;
+        }
+        if (searchText !== "") {
+            query += " AND (title:" + searchText + " OR description:" + searchText + " OR snippet:" + searchText + " OR tags:" + searchText + ")";
+        }
+        if (typeFilter !== "all") {
+            query += " AND type:" + typeFilter;
+        }
+        const queryParams: __esri.PortalQueryParamsProperties = {
+            query: query,
+            sortField: sortByField,
+            sortOrder: sortAscending ? "asc" : "desc",
+            filter: filter,
+            num: rowsPerPage,
+            start: page * rowsPerPage - rowsPerPage + 1
+        };
+
+        const abortController = this.abortController = new AbortController();
+        return portal.queryItems(queryParams, { signal: abortController.signal });
+    }
+
+    private loginToPortal(): Promise<void> {
+        let portal = this.portal!;
         return new Promise(resolve => {
             portal.load().then(() => {
-                let query = "";
-                const filter = "typeKeywords:Service";
-                switch (spaceFilter) {
-                    case "all":
-                        query = "1=1";
-                        break;
-                    case "organisation":
-                        query = "orgid:" + portal.user.orgId;
-                        break;
-                    case "my-content":
-                        query = "owner:" + portal.user.username;
-                }
-                if (searchText !== "") {
-                    query += " AND (title:" + searchText + " OR description:" + searchText + " OR snippet:" + searchText + " OR tags:" + searchText + ")";
-                }
-                if (typeFilter !== "all") {
-                    query += " AND type:" + typeFilter;
-                }
-                const queryParams: __esri.PortalQueryParamsProperties = {
-                    query: query,
-                    sortField: sortByField,
-                    sortOrder: sortAscending ? "asc" : "desc",
-                    filter: filter,
-                    num: rowsPerPage,
-                    start: page * rowsPerPage - rowsPerPage + 1
-                };
-
-                const abortController = this.abortController = new AbortController();
-                portal.queryItems(queryParams, { signal: abortController.signal }).then((result) => {
-                    resolve(result);
-                });
+                resolve();
             }, (error) => {
-                resolve(error);
+                console.error(error);
+                resolve();
             });
         });
-
     }
 
     private addPortalItemsToModel(result: __esri.PortalQueryResult): void {
-        let portalItems = result.results.filter((result) => result.isLayer);
-        portalItems = portalItems.map((portalItem) => {
-            return {
-                id: portalItem.id,
-                title: portalItem.title,
-                snippet: portalItem.snippet,
-                description: portalItem.description,
-                thumbnailUrl: portalItem.thumbnailUrl,
-                tags: portalItem.tags,
-                owner: portalItem.owner,
-                numViews: portalItem.numViews,
-                created: portalItem.created,
-                modified: portalItem.modified,
-                type: portalItem.type,
-                url: portalItem.url,
-                itemPageUrl: portalItem.itemPageUrl,
-                portalUrl: portalItem.portal.url
-            };
-        });
-        this.portalItemLoaderModel.portalItems = portalItems;
+        if (result?.results) {
+            let portalItems = result.results.filter((result) => result.isLayer);
+            portalItems = portalItems.map((portalItem) => {
+                return {
+                    id: portalItem.id,
+                    title: portalItem.title,
+                    snippet: portalItem.snippet,
+                    description: portalItem.description,
+                    thumbnailUrl: portalItem.thumbnailUrl,
+                    tags: portalItem.tags,
+                    owner: portalItem.owner,
+                    numViews: portalItem.numViews,
+                    created: portalItem.created,
+                    modified: portalItem.modified,
+                    type: portalItem.type,
+                    url: portalItem.url,
+                    itemPageUrl: portalItem.itemPageUrl,
+                    portalUrl: portalItem.portal.url
+                };
+            });
+            this.portalItemLoaderModel.portalItems = portalItems;
+        }
     }
 
     async addPortalItemLayerToMap(item: any): Promise<void> {

From ce0d922cf9ff5a3c6edc5a7dd8725189c771e11c Mon Sep 17 00:00:00 2001
From: Lia Kirsch <l.kirsch@conterra.de>
Date: Tue, 3 Dec 2024 13:15:30 +0100
Subject: [PATCH 12/13] update style

---
 .../dn_portalitemloader/css/styles.css        | 40 +++++++++----------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/main/js/bundles/dn_portalitemloader/css/styles.css b/src/main/js/bundles/dn_portalitemloader/css/styles.css
index 620cf8d..f38f66d 100644
--- a/src/main/js/bundles/dn_portalitemloader/css/styles.css
+++ b/src/main/js/bundles/dn_portalitemloader/css/styles.css
@@ -19,60 +19,60 @@
     flex-direction: column;
 }
 
-.ctAppRoot .ct-portal-item-loader-widget__portal-item-filter {
+.ctAppRoot .ct-portal-item-loader-widget__main .ct-portal-item-loader-widget__portal-item-filter {
     flex: 0 0 auto;
 }
 
-.ctAppRoot .ct-portal-item-loader-widget__portal-item-gallery {
+.ctAppRoot .ct-portal-item-loader-widget__main .ct-portal-item-loader-widget__portal-item-gallery {
     flex: 1 1 auto;
     display: flex;
     flex-direction: column;
     overflow: auto;
 }
 
-.ctAppRoot .ct-portal-item-loader-widget__loading-indicator {
+.ctAppRoot .ct-portal-item-loader-widget__main .ct-portal-item-loader-widget__loading-indicator {
     height: 8px;
     padding: 0 8px;
 }
 
-.ctAppRoot .ct-portal-item-loader-widget__portal-item-gallery>div:first-child {
+.ctAppRoot .ct-portal-item-loader-widget__main .ct-portal-item-loader-widget__portal-item-gallery>div:first-child {
     flex: 0 0 auto;
 }
 
-.ctAppRoot .ct-portal-item-loader-widget__portal-item-gallery>div:nth-child(2) {
+.ctAppRoot .ct-portal-item-loader-widget__main .ct-portal-item-loader-widget__portal-item-gallery>div:nth-child(2) {
     flex: 1 1 auto;
     overflow: auto;
 }
 
-.ctAppRoot .ct-portal-item-loader-widget__portal-item-gallery>div:nth-child(3) {
+.ctAppRoot .ct-portal-item-loader-widget__main .ct-portal-item-loader-widget__portal-item-gallery>div:nth-child(3) {
     flex: 0 0 auto;
 }
 
-.ctAppRoot .ct-portal-item-loader-widget__portal-item-gallery-content {
+.ctAppRoot .ct-portal-item-loader-widget__main .ct-portal-item-loader-widget__portal-item-gallery-content {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
     gap: 12px;
     padding: 8px;
 }
 
-.ctAppRoot .ct-portal-item-loader-widget__portal-item-card {
+.ctAppRoot .ct-portal-item-loader-widget__main .ct-portal-item-loader-widget__portal-item-card {
     max-height: 488px;
     display: flex !important;
     flex-direction: column !important;
     text-align: center;
 }
 
-.ctAppRoot .ct-portal-item-loader-widget__portal-item-card-image .v-image {
+.ctAppRoot .ct-portal-item-loader-widget__main .ct-portal-item-loader-widget__portal-item-card-image .v-image {
     height: 200px;
     max-height: 200px;
 }
 
-.ctAppRoot .ct-portal-item-loader-widget__portal-item-card-image .backup-icon {
+.ctAppRoot .ct-portal-item-loader-widget__main .ct-portal-item-loader-widget__portal-item-card-image .backup-icon {
     height: 200px;
     max-height: 200px;
 }
 
-.ctAppRoot .ct-portal-item-loader-widget__portal-item-card-title {
+.ctAppRoot .ct-portal-item-loader-widget__main .ct-portal-item-loader-widget__portal-item-card-title {
     flex: 0 1 auto;
     padding: 8px;
     text-align: left;
@@ -83,7 +83,7 @@
     text-overflow: ellipsis;
 }
 
-.ctAppRoot .ct-portal-item-loader-widget__portal-item-card-snippet {
+.ctAppRoot .ct-portal-item-loader-widget__main .ct-portal-item-loader-widget__portal-item-card-snippet {
     flex: 1 1 auto;
     padding: 0 8px;
     max-height: 75px;
@@ -93,25 +93,25 @@
     text-overflow: ellipsis;
 }
 
-.ctAppRoot .ct-portal-item-loader-widget__portal-item-card-list {
+.ctAppRoot .ct-portal-item-loader-widget__main .ct-portal-item-loader-widget__portal-item-card-list {
     flex: 0 1 auto;
     padding: 8px 8px 0 8px;
 }
 
-.ctAppRoot .ct-portal-item-loader-widget__portal-item-card-list .v-list {
+.ctAppRoot .ct-portal-item-loader-widget__main .ct-portal-item-loader-widget__portal-item-card-list .v-list {
     padding: 0 0 4px;
 }
 
-.ctAppRoot .ct-portal-item-loader-widget__portal-item-card-list .v-list--dense .v-list__tile--avatar {
+.ctAppRoot .ct-portal-item-loader-widget__main .ct-portal-item-loader-widget__portal-item-card-list .v-list--dense .v-list__tile--avatar {
     height: 24px;
     padding: 0;
 }
 
-.ctAppRoot .ct-portal-item-loader-widget__portal-item-card-list .v-icon--left {
+.ctAppRoot .ct-portal-item-loader-widget__main .ct-portal-item-loader-widget__portal-item-card-list .v-icon--left {
     margin-right: 4px;
 }
 
-.ctAppRoot .ct-portal-item-loader-widget__portal-item-filter .ct-portal-item-loader-widget__portal-item-filter-container {
+.ctAppRoot .ct-portal-item-loader-widget__main .ct-portal-item-loader-widget__portal-item-filter .ct-portal-item-loader-widget__portal-item-filter-container {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
     gap: 12px;
@@ -119,15 +119,15 @@
     padding-bottom: 0;
 }
 
-.ctAppRoot .ct-portal-item-loader-widget__portal-item-filter .ct-portal-item-loader-widget__portal-item-filter-search {
+.ctAppRoot .ct-portal-item-loader-widget__main .ct-portal-item-loader-widget__portal-item-filter .ct-portal-item-loader-widget__portal-item-filter-search {
     padding: 0;
     width: 100%;
 }
 
-.ctAppRoot .ct-portal-item-loader-widget__portal-item-filter .sort-ascending-button .v-icon {
+.ctAppRoot .ct-portal-item-loader-widget__main .ct-portal-item-loader-widget__portal-item-filter .sort-ascending-button .v-icon {
     margin-right: 0;
 }
 
-.ctAppRoot .ct-portal-item-loader-widget__portal-item-card-actions {
+.ctAppRoot .ct-portal-item-loader-widget__main .ct-portal-item-loader-widget__portal-item-card-actions {
     flex: 0 1 auto;
 }

From 37554706ff2cbf2633ba0a3c8ef98b672059a99b Mon Sep 17 00:00:00 2001
From: Matthias Stein <m.stein@conterra.de>
Date: Tue, 3 Dec 2024 13:18:34 +0100
Subject: [PATCH 13/13] Use const instead of let

---
 .../bundles/dn_portalitemloader/PortalItemLoaderController.ts   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/main/js/bundles/dn_portalitemloader/PortalItemLoaderController.ts b/src/main/js/bundles/dn_portalitemloader/PortalItemLoaderController.ts
index 2b2c234..6512a93 100644
--- a/src/main/js/bundles/dn_portalitemloader/PortalItemLoaderController.ts
+++ b/src/main/js/bundles/dn_portalitemloader/PortalItemLoaderController.ts
@@ -153,7 +153,7 @@ export default class PortalItemLoaderWidgetController {
     }
 
     private loginToPortal(): Promise<void> {
-        let portal = this.portal!;
+        const portal = this.portal!;
         return new Promise(resolve => {
             portal.load().then(() => {
                 resolve();