package.json

 {
   "name": "ui",
-  "version": "2.7.0",
+  "version": "2.8.0",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -49,6 +49,7 @@
     "vue-demi": "^0.14.6",
     "vue-i18n": "^8.28.2",
     "vue-multiselect": "^2.1.8",
+    "vue-observe-visibility": "^1.0.0",
     "vue-router": "^3.6.5",
     "vue-select": "^3.20.2",
     "vue-sidebar-menu": "^4.8.1"

src/i18n/de.ts

@@ -192,6 +192,12 @@ export default {
       description:
         "Research Data Storage (RDS) Technische Universität Dortmund ist objektbasierter Speicher für Forschungsdaten. Sie können RDS-Ressourcen mit Speicherplatz für Ihre Forschungsdaten erstellen solange das Projekt ausreichend Speicherquota hat. Projektbesitzer können zusätzliche Speicherquota beantragen.",
     },
+    rdsrub: {
+      displayName: "RUB-RDS-Web",
+      fullName: "Research Data Storage (RDS)",
+      description:
+        "Research Data Storage (RDS) Ruhr-Universität Bochum ist objektbasierter Speicher für Forschungsdaten. Sie können RDS-Ressourcen mit Speicherplatz für Ihre Forschungsdaten erstellen solange das Projekt ausreichend Speicherquota hat. Projektbesitzer können zusätzliche Speicherquota beantragen.",
+    },
     rdsnrw: {
       displayName: "NRW-RDS-Web",
       fullName: "Research Data Storage (RDS)",
@@ -222,6 +228,12 @@ export default {
       description:
         "RDS-S3 Technische Universität Dortmund sind objektbasierte Speichereinheiten für Forschungsdaten. Sie basieren auf der gleichen Technik wie der Research Data Storage (RDS), die Verwaltung der Metadaten liegt jedoch beim Nutzer. Daher ist ein Antragsverfahren notwendig, um sicherzustellen, dass die Daten die in RDS-S3 gespeichert werden mit Metadaten beschrieben werden um langfristig auffindbar und nachnutzbar zu sein.",
     },
+    rdss3rub: {
+      displayName: "RUB-RDS-S3",
+      fullName: "RDS-S3-Ressource (S3)",
+      description:
+        "RDS-S3 Ruhr-Universität Bochum sind objektbasierte Speichereinheiten für Forschungsdaten. Sie basieren auf der gleichen Technik wie der Research Data Storage (RDS), die Verwaltung der Metadaten liegt jedoch beim Nutzer. Daher ist ein Antragsverfahren notwendig, um sicherzustellen, dass die Daten die in RDS-S3 gespeichert werden mit Metadaten beschrieben werden um langfristig auffindbar und nachnutzbar zu sein.",
+    },
     rdss3nrw: {
       displayName: "NRW-RDS-S3",
       fullName: "RDS-S3-Ressource (S3)",

src/i18n/en.ts

@@ -190,6 +190,12 @@ export default {
       description:
         "Research Data Storage (RDS) TU Dortmund University is object-based storage for research data. You can create RDS resources with storage space for your research data as long as the project has sufficient storage quota. Project owners can request additional storage quota.",
     },
+    rdsrub: {
+      displayName: "RUB-RDS-Web",
+      fullName: "Research Data Storage (RDS)",
+      description:
+        "Research Data Storage (RDS) Ruhr-Universität Bochum is object-based storage for research data. You can create RDS resources with storage space for your research data as long as the project has sufficient storage quota. Project owners can request additional storage quota.",
+    },
     rdsnrw: {
       displayName: "NRW-RDS-Web",
       fullName: "Research Data Storage (RDS)",
@@ -220,6 +226,12 @@ export default {
       description:
         "RDS-S3 TU Dortmund University are object-based storage units for research data. They are based on the same technology as the research data storage (RDS), but the administration of the metadata lies with the user. Therefore, an application procedure is necessary to ensure that the data stored in S3 Buckets is described with metadata in order to be retrievable and reusable in the long term.",
     },
+    rdss3rub: {
+      displayName: "RUB-RDS-S3",
+      fullName: "RDS-S3-Resource (S3)",
+      description:
+        "RDS-S3 Ruhr-Universität Bochum are object-based storage units for research data. They are based on the same technology as the research data storage (RDS), but the administration of the metadata lies with the user. Therefore, an application procedure is necessary to ensure that the data stored in S3 Buckets is described with metadata in order to be retrievable and reusable in the long term.",
+    },
     rdss3nrw: {
       displayName: "NRW-RDS-S3",
       fullName: "RDS-S3-Resource (S3)",

src/modules/resource/components/create-resource/ApplicationProfile.vue

@@ -55,7 +55,18 @@
               : false,
           }"
           @input="setSelectedApplicationProfile"
+          @search-change="applicationProfileSearchChange"
         >
+          <template slot="afterList">
+            <div
+              v-if="groupedApplicationProfiles.length && !allResultsLoaded"
+              v-observe-visibility="reachedEndOfAPList"
+            >
+              <div class="d-flex justify-content-left my-3 pl-3">
+                <b-spinner v-if="isLoadingResults" small />
+              </div>
+            </div>
+          </template>
           <span slot="noResult">
             {{ $t("page.createResource.multiselect.noResults") }}
           </span>
@@ -121,6 +132,7 @@ import { defineComponent, reactive, ref, type PropType } from "vue";
 import useResourceStore from "../../store";
 import useUserStore from "@/modules/user/store";
 import "@/plugins/form-generator";
+import "@/plugins/vue-observe-visibility";
 import type { Dataset } from "@rdfjs/types";
 import type {
   BilingualLabel,
@@ -137,6 +149,7 @@ import type {
 import useVuelidate from "@vuelidate/core";
 import { required, url } from "@vuelidate/validators";
 import CreateAPModal from "./modals/CreateAPModal.vue";
+import { useDebounceFn } from "@vueuse/core";
 
 export default defineComponent({
   components: {
@@ -147,6 +160,10 @@ export default defineComponent({
       type: Object as PropType<ResourceForCreationDto>,
       required: true,
     },
+    allResultsLoaded: {
+      default: false,
+      type: Boolean,
+    },
     applicationProfile: {
       type: [Object, null] as PropType<Dataset | null>,
       default: null,
@@ -155,6 +172,10 @@ export default defineComponent({
       type: Array as PropType<ApplicationProfileDto[]>,
       required: true,
     },
+    isLoadingResults: {
+      default: false,
+      type: Boolean,
+    },
     isLoadingFormGenerator: {
       type: Boolean,
       required: true,
@@ -165,10 +186,12 @@ export default defineComponent({
     },
   },
   emits: {
-    valid: (_: boolean) => true,
+    applicationProfileSearchChange: (_: string) => true,
     input: (_: ResourceForCreationDto) => true,
+    reachedEndOfAPList: () => true,
+    valid: (_: boolean) => true,
   },
-  setup(props) {
+  setup(props, ctx) {
     const resourceStore = useResourceStore();
     const userStore = useUserStore();
     /*
@@ -186,7 +209,14 @@ export default defineComponent({
       },
     };
     const v$ = useVuelidate(rules, state);
-    return { resourceStore, userStore, v$ };
+    const applicationProfileSearchChange = useDebounceFn(
+      (searchTerm: string) => {
+        ctx.emit("applicationProfileSearchChange", searchTerm);
+      },
+      500,
+    );
+
+    return { applicationProfileSearchChange, resourceStore, userStore, v$ };
   },
 
   data() {
@@ -327,6 +357,15 @@ export default defineComponent({
       return groupedProfiles;
     },
 
+    /**
+     * Propagate that end of AP list has been hit.
+     */
+    reachedEndOfAPList() {
+      if (!this.allResultsLoaded) {
+        this.$emit("reachedEndOfAPList");
+      }
+    },
+
     /**
      * Sets the selected application profile.
      */

src/modules/resource/pages/CreateResource.vue

@@ -27,9 +27,13 @@
         <ApplicationProfile
           v-else-if="currentTab === 1"
           v-model="resourceForCreation"
+          :all-results-loaded="allResultsLoaded"
           :application-profile="applicationProfileDefinition"
           :application-profiles="applicationProfiles"
           :is-loading-form-generator="isLoadingFormGenerator"
+          :is-loading-results="isLoadingResults"
+          @applicationProfileSearchChange="applicationProfileSearchChange"
+          @reachedEndOfAPList="reachedEndOfAPList"
           @valid="setNextTab"
         />
         <ResourceMetadata
@@ -107,6 +111,8 @@ export default defineComponent({
 
   data() {
     return {
+      allResultsLoaded: false,
+      apPageNumber: 1,
       currentTab: 0,
       tabsStatus: [true, false, false, false],
       resourceForCreation: {
@@ -129,6 +135,8 @@ export default defineComponent({
       isLoadingFormGenerator: false,
       isWaitingForResponse: false,
       isLoading: false,
+      isLoadingResults: false,
+      searchTerm: "",
     };
   },
 
@@ -182,6 +190,11 @@ export default defineComponent({
         this.getApplicationProfile();
       }
     },
+    searchTerm() {
+      this.applicationProfiles = [];
+      this.apPageNumber = 1;
+      this.getApplicationProfiles();
+    },
   },
 
   async created() {
@@ -217,13 +230,22 @@ export default defineComponent({
       }
     },
     async getApplicationProfiles() {
-      const applicationProfileDtos =
+      this.isLoadingResults = true;
+      const applicationProfilesObject =
         await this.resourceStore.getApplicationProfiles(
           "displayName asc, baseUrl asc",
+          this.searchTerm,
+          this.apPageNumber,
         );
-      if (applicationProfileDtos) {
-        this.applicationProfiles = applicationProfileDtos;
+      this.apPageNumber++;
+      if (applicationProfilesObject) {
+        this.applicationProfiles = [
+          ...this.applicationProfiles,
+          ...applicationProfilesObject.applicationProfiles,
+        ];
+        this.allResultsLoaded = applicationProfilesObject.allResultsLoaded;
       }
+      this.isLoadingResults = false;
     },
     async getApplicationProfile() {
       if (this.resourceForCreation?.applicationProfile) {
@@ -238,6 +260,12 @@ export default defineComponent({
         this.applicationProfileDefinition = null;
       }
     },
+    reachedEndOfAPList() {
+      this.getApplicationProfiles();
+    },
+    applicationProfileSearchChange(searchTerm: string) {
+      this.searchTerm = searchTerm;
+    },
     back() {
       this.currentTab -= 1;
     },

src/modules/resource/store.ts

 import { defineStore } from "pinia";
 import type {
   ApplicationProfileDefinition,
+  ApplicationProfilesPaged,
   BilingualLabel,
   BilingualLabels,
   ResourceState,
@@ -30,7 +31,6 @@ import factory from "rdf-ext";
 import fileSaver from "file-saver";
 import type {
   RdfFormat,
-  ApplicationProfileDto,
   GitlabBranchDto,
   GitlabProjectDto,
   MetadataTreeForCreationDto,
@@ -253,18 +253,23 @@ export const useResourceStore = defineStore({
 
     async getApplicationProfiles(
       orderBy: string,
-    ): Promise<ApplicationProfileDto[] | undefined> {
+      searchTerm: string,
+      pageNumber: number,
+      pageSize: number = 10,
+    ): Promise<ApplicationProfilesPaged | undefined> {
       const notificationStore = useNotificationStore();
       try {
-        return await wrapListRequest((pageNumber: number) =>
-          ApplicationProfileApi.getApplicationProfiles({
-            searchTerm: "",
+        const response = await ApplicationProfileApi.getApplicationProfiles({
+          searchTerm,
           modules: false,
           orderBy,
           pageNumber,
-            pageSize: 50,
-          }),
-        );
+          pageSize,
+        });
+        return {
+          applicationProfiles: response.data.data ?? [],
+          allResultsLoaded: !response.data.pagination?.hasNext ?? false,
+        };
       } catch (error) {
         // Handle other Status Codes
         notificationStore.postApiErrorNotification(error as AxiosError);

src/modules/resource/types.ts

@@ -91,6 +91,7 @@ export interface CoscineSpecificResourceType {
   NRW?: string;
   UDE?: string;
   TUDO?: string;
+  RUB?: string;
 }
 
 /**
@@ -134,6 +135,7 @@ export const CoscineResourceTypes: CoscineResourceTypesDefinition = {
       NRW: "rdsnrw",
       UDE: "rdsude",
       TUDO: "rdstudo",
+      RUB: "rdsrub",
     },
   },
   RdsS3: {
@@ -143,6 +145,7 @@ export const CoscineResourceTypes: CoscineResourceTypesDefinition = {
       NRW: "rdss3nrw",
       UDE: "rdss3ude",
       TUDO: "rdss3tudo",
+      RUB: "rdss3rub",
     },
   },
   RdsS3Worm: {
@@ -249,3 +252,8 @@ export interface ApplicationProfileDefinition {
   definition: Dataset;
   displayName: string;
 }
+
+export type ApplicationProfilesPaged = {
+  applicationProfiles: ApplicationProfileDto[];
+  allResultsLoaded: boolean;
+};

src/plugins/vue-observe-visibility.ts

+import Vue from "vue";
+import VueObserveVisibility from "vue-observe-visibility";
+
+Vue.use(VueObserveVisibility);

yarn.lock

@@ -461,7 +461,6 @@ __metadata:
     vue-material-design-icons: "npm:^5.2.0"
     vue-multiselect: "npm:^2.1.8"
     vue-observe-visibility: "npm:^1.0.0"
-    vue-observe-visibility: "npm:^1.0.0"
   peerDependencies:
     "@vue/composition-api": ^1.0.0-rc.1
     vue: ^2.0.0
@@ -13240,6 +13239,7 @@ __metadata:
     vue-demi: "npm:^0.14.6"
     vue-i18n: "npm:^8.28.2"
     vue-multiselect: "npm:^2.1.8"
+    vue-observe-visibility: "npm:^1.0.0"
     vue-router: "npm:^3.6.5"
     vue-select: "npm:^3.20.2"
     vue-sidebar-menu: "npm:^4.8.1"
@@ -13989,13 +13989,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vue-observe-visibility@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "vue-observe-visibility@npm:1.0.0"
-  checksum: 46b2e6415d53e42ed53875622f241458af3d8493d31acfcc41d0f53a26f8aaa37378fa49ff3ebdcc5438dbac6d6b77c578d234ca7431917f8a1629fb06c2dfb5
-  languageName: node
-  linkType: hard
-
 "vue-router@npm:^3.6.5":
   version: 3.6.5
   resolution: "vue-router@npm:3.6.5"