New: Extended with the new DataStorage.nrw resource types

c1a029eb · Petar Hristov · b02da20c · c1a029eb · c1a029eb · c1a029eb
Commit c1a029eb authored 4 months ago by Petar Hristov
--- a/.eslintrc-auto-import.json
+++ b/.eslintrc-auto-import.json
@@ -301,6 +301,13 @@
    "watchThrottled": true,
    "watchTriggerable": true,
    "watchWithFilter": true,
-    "whenever": true
+    "whenever": true,
+    "DirectiveBinding": true,
+    "MaybeRef": true,
+    "MaybeRefOrGetter": true,
+    "onWatcherCleanup": true,
+    "useId": true,
+    "useModel": true,
+    "useTemplateRef": true
  }
 }
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
    "coverage": "vitest run --coverage"
  },
  "dependencies": {
-    "@coscine/api-client": "^3.15.0",
+    "@coscine/api-client": "3.15.0-issue-3043-datastoragenrwresource.3",
    "@coscine/form-generator": "^4.0.5",
    "@dynamic-mapper/mapper": "^1.10.4",
    "@pinia/testing": "^0.1.3",
@@ -40,12 +40,12 @@
    "sass-loader": "^13.3.2",
    "stream-to-string": "^1.2.1",
    "uuid": "^9.0.1",
-    "vue": "^3.4.27",
-    "vue-dompurify-html": "^5.0.1",
+    "vue": "^3.5.13",
+    "vue-dompurify-html": "^5.2.0",
    "vue-i18n": "^9.13.1",
-    "vue-multiselect": "^3.0.0",
+    "vue-multiselect": "^3.2.0",
    "vue-observe-visibility": "^2.0.0-alpha.1",
-    "vue-router": "^4.3.2",
+    "vue-router": "^4.5.0",
    "vue-select": "^4.0.0-beta.6",
    "vue-sidebar-menu": "^5.4.0"
  },

--- a/src/auto-imports.d.ts
+++ b/src/auto-imports.d.ts
@@ -74,6 +74,7 @@ declare global {
  const onStartTyping: typeof import('@vueuse/core')['onStartTyping']
  const onUnmounted: typeof import('vue')['onUnmounted']
  const onUpdated: typeof import('vue')['onUpdated']
+  const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
  const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
  const provide: typeof import('vue')['provide']
  const provideLocal: typeof import('@vueuse/core')['provideLocal']
@@ -187,6 +188,7 @@ declare global {
  const useGamepad: typeof import('@vueuse/core')['useGamepad']
  const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
  const useI18n: typeof import('vue-i18n')['useI18n']
+  const useId: typeof import('vue')['useId']
  const useIdle: typeof import('@vueuse/core')['useIdle']
  const useImage: typeof import('@vueuse/core')['useImage']
  const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
@@ -203,6 +205,7 @@ declare global {
  const useMediaQuery: typeof import('@vueuse/core')['useMediaQuery']
  const useMemoize: typeof import('@vueuse/core')['useMemoize']
  const useMemory: typeof import('@vueuse/core')['useMemory']
+  const useModel: typeof import('vue')['useModel']
  const useMounted: typeof import('@vueuse/core')['useMounted']
  const useMouse: typeof import('@vueuse/core')['useMouse']
  const useMouseInElement: typeof import('@vueuse/core')['useMouseInElement']
@@ -250,6 +253,7 @@ declare global {
  const useStyleTag: typeof import('@vueuse/core')['useStyleTag']
  const useSupported: typeof import('@vueuse/core')['useSupported']
  const useSwipe: typeof import('@vueuse/core')['useSwipe']
+  const useTemplateRef: typeof import('vue')['useTemplateRef']
  const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList']
  const useTextDirection: typeof import('@vueuse/core')['useTextDirection']
  const useTextSelection: typeof import('@vueuse/core')['useTextSelection']
@@ -301,6 +305,6 @@ declare global {
 // for type re-export
 declare global {
  // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
  import('vue')
 }
--- a/src/data/mockup/testProject.ts
+++ b/src/data/mockup/testProject.ts
@@ -77,6 +77,7 @@ export const testProject: VisitedProjectDto = {
      },
      resourceType: {
        id: testResourceType.id,
+        // generalType: testResourceType.generalType,
      },
    },
  ],

--- a/src/data/mockup/testUser.ts
+++ b/src/data/mockup/testUser.ts
@@ -4,6 +4,7 @@ import type {
  UserDto,
  UserOrganizationDto,
  IdentityProviderDto,
+  LanguageDto,
 } from "@coscine/api-client/dist/types/Coscine.Api";

 export const testOrganizationFromShibboleth: UserOrganizationDto = {
@@ -35,7 +36,11 @@ export const NFDI4Ing_AAIProvider: IdentityProviderDto = {
  displayName: "NFDI4Ing AAI",
 };

-export const testLanguage = { id: "1", displayName: "en" };
+export const testLanguage = {
+  id: "1",
+  displayName: "en",
+  abbreviation: "en",
+} as LanguageDto;

 /**
 * Generates a mock Shibboleth user data object for testing purposes.
@@ -53,6 +58,7 @@ export const getTestShibbolethUser: () => UserDto = (): UserDto => {
    ],
    disciplines: [testDiscipline],
    language: testLanguage,
+    identities: [],
    organizations: [testOrganizationFromShibboleth],
    areToSAccepted: true,
  };
@@ -63,7 +69,7 @@ export const getTestShibbolethUser: () => UserDto = (): UserDto => {
 *
 * @returns {UserDto} A mock ORCID user data object.
 */
-export const getTestOrcidUser: () => UserDto = () => {
+export const getTestOrcidUser: () => UserDto = (): UserDto => {
  return {
    id: "d302cb44-c934-4b54-a581-9765cab96fca",
    givenName: "Coscine",
@@ -74,7 +80,9 @@ export const getTestOrcidUser: () => UserDto = () => {
    ],
    disciplines: [testDiscipline],
    language: testLanguage,
+    identities: [],
    organizations: [testOrganizationFromOrcid],
+    areToSAccepted: true,
  };
 };

@@ -82,7 +90,7 @@ export const getTestShibbolethUserState: () => UserState = () => {
  return {
    userProfile: {
      disciplines: [testDiscipline],
-      languages: [testLanguage, { id: "2", displayName: "de" }],
+      languages: [testLanguage, { id: "2", displayName: "de", abbreviation: "de" }],
      organizations: [testOrganizationFromShibboleth],
      titles: [
        {
@@ -121,8 +129,9 @@ export const getTestShibbolethUserWithoutLanguageState: () => UserState =
      },
      user: {
        ...getTestShibbolethUser(),
-        language: null,
+        language: undefined!, // Force a missing language
      },
+      isRetrievingUser: false
    };
  };

@@ -130,7 +139,7 @@ export const getTestOrcidUserState: () => UserState = () => {
  return {
    userProfile: {
      disciplines: [testDiscipline],
-      languages: [testLanguage, { id: "2", displayName: "de" }],
+      languages: [testLanguage, { id: "2", displayName: "de", abbreviation: "de" }],
      organizations: [testOrganizationFromShibboleth],
      titles: [
        {

--- a/src/i18n/de.ts
+++ b/src/i18n/de.ts
@@ -197,6 +197,33 @@ export default {

  resourceTypes: {
    resource: "Ressource",
+    gitlab: {
+      displayName: "GitLab",
+      fullName: "GitLab (Git)",
+      description:
+        "GitLab (Git) ist eine Webanwendung zur Versionsverwaltung für Softwareprojekte auf Git-Basis. Sie können Git-Repositorien in Ihren Coscine Projekten hinterlegen und mit Metadaten beschreiben. Im Arbeitsalltag können Sie Git wie gewohnt nutzen und haben in Coscine die Übersicht über verschiedene Repositorien und die Möglichkeit zur  Metadatenverwaltung.",
+    },
+    linked: {
+      displayName: "Linked Data",
+      fullName: "Linked Data (Linked)",
+      description:
+        "Linked Data Ressourcen erlauben das Metadatenmanagement für Daten, die in externen Speichersystemen liegen und auf die nicht direkt mit Coscine zugegriffen werden kann oder soll. So können z.B. Daten auf lokalen Datenspeichern im Institut oder externen Datenspeichern, die nicht mit Coscine kompatibel sind mit Metadaten beschrieben werden. Die Handhabung der Metadaten erfolgt weitgehend analog zu anderen Ressourcentypen, statt dem Upload- und Download von Daten werden Platzhalter angelegt die mit den Metadaten beschrieben werden. Durch ein zusätzliches Feld kann eine Referenz auf den Ort der Datei angegeben werden, um eine eindeutige Zuordnung auf Dateilevel zu erlauben, z. B. Institutsfileserver/Projekt X/Messreihe B/11-12-2020_data.csv.",
+    },
+    dsNrwWeb: {
+      displayName: "DataStorage.nrw (Web)",
+      fullName: "DataStorage.nrw (Web)",
+      description: "k.A.",
+    },
+    dsNrwS3: {
+      displayName: "DataStorage.nrw (S3)",
+      fullName: "DataStorage.nrw (S3)",
+      description: "k.A.",
+    },
+    dsNrwS3Worm: {
+      displayName: "DataStorage.nrw (WORM)",
+      fullName: "DataStorage.nrw (WORM)",
+      description: "k.A.",
+    },
    rdsrwth: {
      displayName: "RWTH-RDS-Web",
      fullName: "Research Data Storage (RDS)",
@@ -227,12 +254,6 @@ export default {
      description:
        "Research Data Storage (RDS) Nordrhein-Westfalen 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.",
    },
-    s3: {
-      displayName: "S3 Bucket",
-      fullName: "S3 Bucket (S3)",
-      description:
-        "S3 Buckets (S3) 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 Nutzenden. Daher ist ein gesondertes Antragsverfahren und ein Datenmanagementplan (DMP) notwendig, um sicherzustellen, dass die Daten die in S3 Buckets gespeichert werden mit Metadaten beschrieben werden um langfristig auffindbar und nachnutzbar zu sein.",
-    },
    rdss3rwth: {
      displayName: "RWTH-RDS-S3",
      fullName: "RDS-S3-Ressource (S3)",
@@ -263,18 +284,6 @@ export default {
      description:
        "RDS-S3 Nordrhein-Westfalen 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 Nutzenden. 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.",
    },
-    gitlab: {
-      displayName: "GitLab",
-      fullName: "GitLab (Git)",
-      description:
-        "GitLab (Git) ist eine Webanwendung zur Versionsverwaltung für Softwareprojekte auf Git-Basis. Sie können Git-Repositorien in Ihren Coscine Projekten hinterlegen und mit Metadaten beschreiben. Im Arbeitsalltag können Sie Git wie gewohnt nutzen und haben in Coscine die Übersicht über verschiedene Repositorien und die Möglichkeit zur  Metadatenverwaltung.",
-    },
-    linked: {
-      displayName: "Linked Data",
-      fullName: "Linked Data (Linked)",
-      description:
-        "Linked Data Ressourcen erlauben das Metadatenmanagement für Daten, die in externen Speichersystemen liegen und auf die nicht direkt mit Coscine zugegriffen werden kann oder soll. So können z.B. Daten auf lokalen Datenspeichern im Institut oder externen Datenspeichern, die nicht mit Coscine kompatibel sind mit Metadaten beschrieben werden. Die Handhabung der Metadaten erfolgt weitgehend analog zu anderen Ressourcentypen, statt dem Upload- und Download von Daten werden Platzhalter angelegt die mit den Metadaten beschrieben werden. Durch ein zusätzliches Feld kann eine Referenz auf den Ort der Datei angegeben werden, um eine eindeutige Zuordnung auf Dateilevel zu erlauben, z. B. Institutsfileserver/Projekt X/Messreihe B/11-12-2020_data.csv.",
-    },
    rdss3wormrwth: {
      displayName: "RWTH-RDS-WORM",
      fullName: "RDS-WORM-Ressource (WORM)",

--- a/src/i18n/en.ts
+++ b/src/i18n/en.ts
@@ -194,6 +194,33 @@ export default {

  resourceTypes: {
    resource: "Resource",
+    gitlab: {
+      displayName: "GitLab",
+      fullName: "GitLab (Git)",
+      description:
+        "GitLab (Git) is a web application for version management of software projects based on Git. You can store Git repositories in your Coscine projects and describe them with metadata. In your daily work you can use Git as usual and have an overview of different repositories and the possibility to manage metadata in Coscine.",
+    },
+    linked: {
+      displayName: "Linked Data",
+      fullName: "Linked Data (Linked)",
+      description:
+        "Linked Data Resources allow metadata management for data stored in external storage systems that cannot or should not be directly accessed via Coscine. For example, data on local data storage systems in the institute or external data storage systems that are not compatible with Coscine can be described with metadata. The handling of metadata is largely analogous to other resource types. Instead of uploading and downloading data, placeholders are created which are described with the metadata. An additional field can be used to specify a reference to the location of the file in order to allow a unique assignment at file level, e.g. Institute file server/Project X/Measurement B/11-12-2020_data.csv.",
+    },
+    dsNrwWeb: {
+      displayName: "DataStorage.nrw (Web)",
+      fullName: "DataStorage.nrw (Web)",
+      description: "N/A",
+    },
+    dsNrwS3: {
+      displayName: "DataStorage.nrw (S3)",
+      fullName: "DataStorage.nrw (S3)",
+      description: "N/A",
+    },
+    dsNrwS3Worm: {
+      displayName: "DataStorage.nrw (WORM)",
+      fullName: "DataStorage.nrw (WORM)",
+      description: "N/A",
+    },
    rdsrwth: {
      displayName: "RWTH-RDS-Web",
      fullName: "Research Data Storage (RDS)",
@@ -260,18 +287,6 @@ export default {
      description:
        "RDS-S3 North Rhine-Westphalia 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.",
    },
-    gitlab: {
-      displayName: "GitLab",
-      fullName: "GitLab (Git)",
-      description:
-        "GitLab (Git) is a web application for version management of software projects based on Git. You can store Git repositories in your Coscine projects and describe them with metadata. In your daily work you can use Git as usual and have an overview of different repositories and the possibility to manage metadata in Coscine.",
-    },
-    linked: {
-      displayName: "Linked Data",
-      fullName: "Linked Data (Linked)",
-      description:
-        "Linked Data Resources allow metadata management for data stored in external storage systems that cannot or should not be directly accessed via Coscine. For example, data on local data storage systems in the institute or external data storage systems that are not compatible with Coscine can be described with metadata. The handling of metadata is largely analogous to other resource types. Instead of uploading and downloading data, placeholders are created which are described with the metadata. An additional field can be used to specify a reference to the location of the file in order to allow a unique assignment at file level, e.g. Institute file server/Project X/Measurement B/11-12-2020_data.csv.",
-    },
    rdss3wormrwth: {
      displayName: "RWTH-RDS-WORM",
      fullName: "RDS-WORM-Resource (WORM)",

--- a/src/mapping/resource.ts
+++ b/src/mapping/resource.ts
 import { MapperConfiguration, MappingPair } from "@dynamic-mapper/mapper";

 import type {
+  DataStorageNrwS3OptionsDto,
+  DataStorageNrwS3ResourceTypeOptionsForManipulationDto,
+  DataStorageNrwS3WormOptionsDto,
+  DataStorageNrwS3WormResourceTypeOptionsForManipulationDto,
+  DataStorageNrwWebOptionsDto,
+  DataStorageNrwWebResourceTypeOptionsForManipulationDto,
  DisciplineDto,
  DisciplineForResourceManipulationDto,
  GitLabOptionsDto,
@@ -61,7 +67,21 @@ export const RdsS3WormOptionsDto2RdsS3WormResourceTypeOptionsForManipulationDto
    RdsS3WormOptionsDto,
    RdsS3WormResourceTypeOptionsForManipulationDto
  >();
-
+export const DsNrwWebOptionsDto2DsNrwWebResourceTypeOptionsForManipulationDto =
+  new MappingPair<
+    DataStorageNrwWebOptionsDto,
+    DataStorageNrwWebResourceTypeOptionsForManipulationDto
+  >();
+export const DsNrwS3OptionsDto2DsNrwS3ResourceTypeOptionsForManipulationDto =
+  new MappingPair<
+    DataStorageNrwS3OptionsDto,
+    DataStorageNrwS3ResourceTypeOptionsForManipulationDto
+  >();
+export const DsNrwS3WormOptionsDto2DsNrwS3WormResourceTypeOptionsForManipulationDto =
+  new MappingPair<
+    DataStorageNrwS3WormOptionsDto,
+    DataStorageNrwS3WormResourceTypeOptionsForManipulationDto
+  >();
 export const ResourceTypeInformationDto2ResourceTypeOptionsForCreationDto =
  new MappingPair<
    ResourceTypeInformationDto,
@@ -128,6 +148,27 @@ const configuration = new MapperConfiguration((cfg) => {
          RdsS3WormOptionsDto2RdsS3WormResourceTypeOptionsForManipulationDto,
        )
        .condition((con) => con.rdsS3Worm !== undefined),
+    dataStorageNrwWebResourceTypeOptions: (opt) =>
+      opt
+        .mapFromUsing(
+          (e) => e.dataStorageNrwWeb,
+          DsNrwWebOptionsDto2DsNrwWebResourceTypeOptionsForManipulationDto,
+        )
+        .condition((con) => con.dataStorageNrwWeb !== undefined),
+    dataStorageNrwS3ResourceTypeOptions: (opt) =>
+      opt
+        .mapFromUsing(
+          (e) => e.dataStorageNrwS3,
+          DsNrwS3OptionsDto2DsNrwS3ResourceTypeOptionsForManipulationDto,
+        )
+        .condition((con) => con.dataStorageNrwS3 !== undefined),
+    dataStorageNrwS3WormResourceTypeOptions: (opt) =>
+      opt
+        .mapFromUsing(
+          (e) => e.dataStorageNrwS3Worm,
+          DsNrwS3WormOptionsDto2DsNrwS3WormResourceTypeOptionsForManipulationDto,
+        )
+        .condition((con) => con.dataStorageNrwS3Worm !== undefined),
  });
  cfg.createMap(ResourceTypeInformationDto2ResourceTypeOptionsForCreationDto, {
    linkedResourceTypeOptions: (opt) =>
@@ -156,7 +197,9 @@ const configuration = new MapperConfiguration((cfg) => {
          (rti) => rti.generalType === CoscineResourceTypes.Rds.General,
        )
        .mapFrom((rti) =>
-          rti.generalType === CoscineResourceTypes.Rds.General ? {} : undefined,
+          rti.generalType === CoscineResourceTypes.Rds.General
+            ? ({} as RdsResourceTypeOptionsForManipulationDto)
+            : undefined,
        ),
    rdsS3ResourceTypeOptions: (opt) =>
      opt
@@ -165,7 +208,7 @@ const configuration = new MapperConfiguration((cfg) => {
        )
        .mapFrom((rti) =>
          rti.generalType === CoscineResourceTypes.RdsS3.General
-            ? {}
+            ? ({} as RdsS3ResourceTypeOptionsForManipulationDto)
            : undefined,
        ),
    rdsS3WormResourceTypeOptions: (opt) =>
@@ -175,7 +218,41 @@ const configuration = new MapperConfiguration((cfg) => {
        )
        .mapFrom((rti) =>
          rti.generalType === CoscineResourceTypes.RdsS3Worm.General
-            ? {}
+            ? ({} as RdsS3WormResourceTypeOptionsForManipulationDto)
+            : undefined,
+        ),
+    dataStorageNrwWebResourceTypeOptions: (opt) =>
+      opt
+        .preCondition(
+          (rti) =>
+            rti.generalType === CoscineResourceTypes.DataStorageNrwWeb.General,
+        )
+        .mapFrom((rti) =>
+          rti.generalType === CoscineResourceTypes.DataStorageNrwWeb.General
+            ? ({} as DataStorageNrwWebResourceTypeOptionsForManipulationDto)
+            : undefined,
+        ),
+    dataStorageNrwS3ResourceTypeOptions: (opt) =>
+      opt
+        .preCondition(
+          (rti) =>
+            rti.generalType === CoscineResourceTypes.DataStorageNrwS3.General,
+        )
+        .mapFrom((rti) =>
+          rti.generalType === CoscineResourceTypes.DataStorageNrwS3.General
+            ? ({} as DataStorageNrwS3ResourceTypeOptionsForManipulationDto)
+            : undefined,
+        ),
+    dataStorageNrwS3WormResourceTypeOptions: (opt) =>
+      opt
+        .preCondition(
+          (rti) =>
+            rti.generalType ===
+            CoscineResourceTypes.DataStorageNrwS3Worm.General,
+        )
+        .mapFrom((rti) =>
+          rti.generalType === CoscineResourceTypes.DataStorageNrwS3Worm.General
+            ? ({} as DataStorageNrwS3WormResourceTypeOptionsForManipulationDto)
            : undefined,
        ),
  });
@@ -198,6 +275,27 @@ const configuration = new MapperConfiguration((cfg) => {
        opt.mapFromUsing((e) => e.size, QuotaDto2QuotaForManipulationDto),
    },
  );
+  cfg.createAutoMap(
+    DsNrwWebOptionsDto2DsNrwWebResourceTypeOptionsForManipulationDto,
+    {
+      quota: (opt) =>
+        opt.mapFromUsing((e) => e.size, QuotaDto2QuotaForManipulationDto),
+    },
+  );
+  cfg.createAutoMap(
+    DsNrwS3OptionsDto2DsNrwS3ResourceTypeOptionsForManipulationDto,
+    {
+      quota: (opt) =>
+        opt.mapFromUsing((e) => e.size, QuotaDto2QuotaForManipulationDto),
+    },
+  );
+  cfg.createAutoMap(
+    DsNrwS3WormOptionsDto2DsNrwS3WormResourceTypeOptionsForManipulationDto,
+    {
+      quota: (opt) =>
+        opt.mapFromUsing((e) => e.size, QuotaDto2QuotaForManipulationDto),
+    },
+  );

  // Other maps
  cfg.createAutoMap(LicenseDto2LicenseForResourceManipulationDto, {

--- a/src/modules/project/pages/ProjectPage.vue
+++ b/src/modules/project/pages/ProjectPage.vue
@@ -40,7 +40,9 @@
                  :key="index"
                  :title="resource.displayName"
                  type="resource"
-                  :badge-visibility="resource.archived || resource.maintenanceMode"
+                  :badge-visibility="
+                    resource.archived || resource.maintenanceMode
+                  "
                  :badge-text="badgeText(resource)"
                  :to="toResource(resource)"
                  :to-settings="toResourceSettings(resource)"
@@ -211,7 +213,7 @@ export default defineComponent({
        this.$router.push(to);
      } else {
        console.error(
-          `Slug for ${project.displayName} is possibly undefined...`
+          `Slug for ${project.displayName} is possibly undefined...`,
        );
      }
    },
@@ -222,7 +224,7 @@ export default defineComponent({
        this.$router.push(to);
      } else {
        console.warn(
-          `Resource ${resource.displayName} is currently in maintenance mode and cannot be accessed...`
+          `Resource ${resource.displayName} is currently in maintenance mode and cannot be accessed...`,
        );
      }
    },
@@ -233,7 +235,7 @@ export default defineComponent({
        this.$router.push(to);
      } else {
        console.warn(
-          `Resource ${resource.displayName} is currently in maintenance mode and cannot be accessed...`
+          `Resource ${resource.displayName} is currently in maintenance mode and cannot be accessed...`,
        );
      }
    },

--- a/src/modules/project/store.ts
+++ b/src/modules/project/store.ts
@@ -509,6 +509,42 @@ export const useProjectStore = defineStore({
            quota: desiredReservedQuota,
          };
        }
+        // Evaluate general resource type - DataStorage.nrw (Web)
+        else if (
+          resource.type?.generalType ===
+          CoscineResourceTypes.DataStorageNrwWeb.General
+        ) {
+          resourceTypeOptionsForManipulationDto.dataStorageNrwWebResourceTypeOptions =
+            {
+              quota: desiredReservedQuota,
+            };
+        }
+        // Evaluate general resource type - DataStorage.nrw (S3)
+        else if (
+          resource.type?.generalType ===
+          CoscineResourceTypes.DataStorageNrwS3.General
+        ) {
+          resourceTypeOptionsForManipulationDto.dataStorageNrwS3ResourceTypeOptions =
+            {
+              quota: desiredReservedQuota,
+            };
+        }
+        // Evaluate general resource type - DataStorage.nrw (WORM)
+        else if (
+          resource.type?.generalType ===
+          CoscineResourceTypes.DataStorageNrwS3Worm.General
+        ) {
+          resourceTypeOptionsForManipulationDto.dataStorageNrwS3WormResourceTypeOptions =
+            {
+              quota: desiredReservedQuota,
+            };
+        } else {
+          // Log error for unsupported resource type
+          console.error(
+            "Resource type not supported for setting resource size: ",
+            resource.type?.generalType,
+          );
+        }
        // Assign the correct resource type options
        resourceForUpdate.resourceTypeOptions =
          resourceTypeOptionsForManipulationDto;

--- a/src/modules/resource/ResourceModule.vue
+++ b/src/modules/resource/ResourceModule.vue
@@ -56,7 +56,7 @@ export default defineComponent({
    },
    resourceTypeInformation(): ResourceTypeInformationDto | undefined {
      return this.resourceStore.enabledResourceTypes?.find(
-        (resourceType) => resourceType.id === this.resource?.type?.id
+        (resourceType) => resourceType.id === this.resource?.type?.id,
      );
    },
    moduleIsReady(): boolean {
@@ -121,7 +121,7 @@ export default defineComponent({
        await this.resourceStore.retrieveUnsetResource(
          this.project.id,
          this.resource,
-          route
+          route,
        );
        if (this.resource) {
          if (!this.resourceStore.currentFullApplicationProfile) {
@@ -155,7 +155,7 @@ export default defineComponent({
              ];
            i18n.global.mergeLocaleMessage(
              "de",
-              cloneDeep(resourceTypeDefinition)
+              cloneDeep(resourceTypeDefinition),
            );
          }
        }
@@ -175,7 +175,7 @@ export default defineComponent({
              ];
            i18n.global.mergeLocaleMessage(
              "en",
-              cloneDeep(resourceTypeDefinition)
+              cloneDeep(resourceTypeDefinition),
            );
          }
        }

--- a/src/modules/resource/components/create-resource/ConfigurationSizeSlider.vue
+++ b/src/modules/resource/components/create-resource/ConfigurationSizeSlider.vue
@@ -7,18 +7,18 @@
      <div class="d-flex align-items-center">
        <b-form-input
          id="quotaInput"
-          v-model="v$.sliderValue.$model"
+          v-model="v$.quotaValue.$model"
          class="w-40"
          type="number"
          :min="min"
          :max="max"
          :step="1"
-          :state="v$.sliderValue.$anyDirty && !v$.sliderValue.$error"
+          :state="v$.quotaValue.$anyDirty && !v$.quotaValue.$error"
          oninput="if(Number(this.value) > Number(this.max)) this.value = this.max;"
        />
        <span class="ml-2">GB of {{ max }} GB</span>
      </div>
-      <div v-if="v$.sliderValue.$error" class="text-danger">
+      <div v-if="v$.quotaValue.$error" class="text-danger">
        <p>
          {{
            $t("page.createResource.configuration.exceededQuotaWarning", {
@@ -73,19 +73,22 @@ const coscineResourceTypes = CoscineResourceTypes;

 const min = ref(1);
 const max = ref(1);
-const sliderValue = ref(min.value); // used to set the Resource Size
+const quotaValue = ref(min.value); // used to set the Resource Size

 // Define validations
-const rules = reactive(() => ({
-  sliderValue: {
+const state = reactive({
+  quotaValue: quotaValue,
+});
+const rules = {
+  quotaValue: {
    required,
    numeric,
    minValue: minValue(min.value),
    maxValue: maxValue(max.value),
  },
-}));
+};

-const v$ = useVuelidate(rules, reactive({ sliderValue }));
+const v$ = useVuelidate(rules, state);

 const isOwner = computed(() => {
  return projectStore.currentUserRoleIsOwner;
@@ -96,14 +99,12 @@ watch(
  () => {
    initTabContent();
    retrieveResourceTypeQuota();
-    // Timeout deals with otherwise incorrect updates
-    setTimeout(() => setResourceSize(sliderValue.value), 1);
  },
  { deep: true },
 );

-watch(sliderValue, () => {
-  setResourceSize(sliderValue.value);
+watch(quotaValue, () => {
+  setResourceSize(quotaValue.value);
 });

 /**
@@ -129,12 +130,12 @@ const retrieveResourceTypeQuota = () => {
          max.value = 0;
        }
        // Prevent above maximum values
-        if (sliderValue.value > max.value) {
-          sliderValue.value = max.value;
+        if (quotaValue.value > max.value) {
+          quotaValue.value = max.value;
        }
        // Set slider to 1 when maximum is available
-        if (max.value > 0 && sliderValue.value === 0) {
-          sliderValue.value = 1;
+        if (max.value > 0 && quotaValue.value === 0) {
+          quotaValue.value = 1;
        }
      }
    }
@@ -145,13 +146,13 @@ const retrieveResourceTypeQuota = () => {
 * Initialize the tab content based on the resource type options
 */
 const initTabContent = () => {
-  if (sliderValue.value <= 0) {
+  if (quotaValue.value <= 0) {
    // Handle general resource type - RDS
    if (
      resourceForCreation.value.resourceTypeOptions?.rdsResourceTypeOptions
        ?.quota?.value !== undefined
    ) {
-      sliderValue.value =
+      quotaValue.value =
        resourceForCreation.value.resourceTypeOptions?.rdsResourceTypeOptions
          ?.quota?.value;
    }
@@ -160,7 +161,7 @@ const initTabContent = () => {
      resourceForCreation.value.resourceTypeOptions?.rdsS3ResourceTypeOptions
        ?.quota?.value !== undefined
    ) {
-      sliderValue.value =
+      quotaValue.value =
        resourceForCreation.value.resourceTypeOptions?.rdsS3ResourceTypeOptions
          ?.quota?.value;
    }
@@ -169,7 +170,7 @@ const initTabContent = () => {
      resourceForCreation.value.resourceTypeOptions
        ?.rdsS3WormResourceTypeOptions?.quota?.value !== undefined
    ) {
-      sliderValue.value =
+      quotaValue.value =
        resourceForCreation.value.resourceTypeOptions
          ?.rdsS3WormResourceTypeOptions?.quota?.value;
    }
@@ -212,6 +213,42 @@ const setResourceSize = (size: number) => {
      quota: { value: size, unit: QuotaUnit.GibiByte },
    };
  }
+  // Evaluate general resource type - DataStorage.nrw (Web)
+  else if (
+    props.selectedResourceTypeInformation.generalType ===
+    coscineResourceTypes.DataStorageNrwWeb.General
+  ) {
+    resourceTypeOptionsForManipulationDto.dataStorageNrwWebResourceTypeOptions =
+      {
+        quota: { value: size, unit: QuotaUnit.GibiByte },
+      };
+  }
+  // Evaluate general resource type - DataStorage.nrw (S3)
+  else if (
+    props.selectedResourceTypeInformation.generalType ===
+    coscineResourceTypes.DataStorageNrwS3.General
+  ) {
+    resourceTypeOptionsForManipulationDto.dataStorageNrwS3ResourceTypeOptions =
+      {
+        quota: { value: size, unit: QuotaUnit.GibiByte },
+      };
+  }
+  // Evaluate general resource type - DataStorage.nrw (WORM)
+  else if (
+    props.selectedResourceTypeInformation.generalType ===
+    coscineResourceTypes.DataStorageNrwS3Worm.General
+  ) {
+    resourceTypeOptionsForManipulationDto.dataStorageNrwS3WormResourceTypeOptions =
+      {
+        quota: { value: size, unit: QuotaUnit.GibiByte },
+      };
+  } else {
+    // Log error for unsupported resource type
+    console.error(
+      "Resource type not supported for setting resource size: ",
+      props.selectedResourceTypeInformation.generalType,
+    );
+  }
  resourceForCreation.value.resourceTypeOptions =
    resourceTypeOptionsForManipulationDto;
 };
@@ -228,6 +265,6 @@ const toGiB = (quota: QuotaDto): number => {

 initTabContent();
 retrieveResourceTypeQuota();
-setResourceSize(sliderValue.value);
+setResourceSize(quotaValue.value);
 v$.value.$touch();
 </script>
--- a/src/modules/resource/types.ts
+++ b/src/modules/resource/types.ts
@@ -113,6 +113,9 @@ export interface CoscineResourceTypesDefinition {
  Rds: CoscineResourceType;
  RdsS3: CoscineResourceType;
  RdsS3Worm: CoscineResourceType;
+  DataStorageNrwWeb: CoscineResourceType;
+  DataStorageNrwS3: CoscineResourceType;
+  DataStorageNrwS3Worm: CoscineResourceType;
 }

 /**
@@ -154,6 +157,24 @@ export const CoscineResourceTypes: CoscineResourceTypesDefinition = {
      RWTH: "rdss3wormrwth",
    },
  },
+  DataStorageNrwWeb: {
+    General: "dsNrwWeb",
+    Specific: {
+      NRW: "dsNrwWeb",
+    },
+  },
+  DataStorageNrwS3: {
+    General: "dsNrwS3",
+    Specific: {
+      NRW: "dsNrwS3",
+    },
+  },
+  DataStorageNrwS3Worm: {
+    General: "dsNrwS3Worm",
+    Specific: {
+      NRW: "dsNrwS3Worm",
+    },
+  },
 };

 /**

--- a/src/modules/resource/utils/validators.ts
+++ b/src/modules/resource/utils/validators.ts
@@ -3,6 +3,9 @@ import type {
  RdsResourceTypeOptionsForManipulationDto,
  RdsS3ResourceTypeOptionsForManipulationDto,
  RdsS3WormResourceTypeOptionsForManipulationDto,
+  DataStorageNrwWebResourceTypeOptionsForManipulationDto,
+  DataStorageNrwS3ResourceTypeOptionsForManipulationDto,
+  DataStorageNrwS3WormResourceTypeOptionsForManipulationDto,
 } from "@coscine/api-client/dist/types/Coscine.Api";
 import { QuotaUnit } from "../types";

@@ -65,6 +68,30 @@ export const validResourceTypeOptions = (
      options.rdsS3WormResourceTypeOptions,
    );
  }
+  // Evaluate general resource type - DataStorage.nrw (Web)
+  else if (options.dataStorageNrwWebResourceTypeOptions) {
+    return hasValidResourceTypeOptionsWithQuota(
+      options.dataStorageNrwWebResourceTypeOptions,
+    );
+  }
+  // Evaluate general resource type - DataStorage.nrw (S3)
+  else if (options.dataStorageNrwS3ResourceTypeOptions) {
+    return hasValidResourceTypeOptionsWithQuota(
+      options.dataStorageNrwS3ResourceTypeOptions,
+    );
+  }
+  // Evaluate general resource type - DataStorage.nrw (WORM)
+  else if (options.dataStorageNrwS3WormResourceTypeOptions) {
+    return hasValidResourceTypeOptionsWithQuota(
+      options.dataStorageNrwS3WormResourceTypeOptions,
+    );
+  } else {
+    // Log error for unsupported resource type
+    console.error(
+      "Resource type not supported for setting resource size: ",
+      options,
+    );
+  }
  return false;
 };

@@ -78,7 +105,10 @@ const hasValidResourceTypeOptionsWithQuota = (
  options:
    | RdsResourceTypeOptionsForManipulationDto
    | RdsS3ResourceTypeOptionsForManipulationDto
-    | RdsS3WormResourceTypeOptionsForManipulationDto,
+    | RdsS3WormResourceTypeOptionsForManipulationDto
+    | DataStorageNrwWebResourceTypeOptionsForManipulationDto
+    | DataStorageNrwS3ResourceTypeOptionsForManipulationDto
+    | DataStorageNrwS3WormResourceTypeOptionsForManipulationDto,
 ): boolean => {
  if (options !== undefined && options.quota) {
    const { value, unit } = options.quota;

--- a/src/plugins/vue-i18n.ts
+++ b/src/plugins/vue-i18n.ts
@@ -8,7 +8,16 @@ export const def = {
  en: en,
 };

-const i18n = createI18n<[(typeof def)["en"]], "en" | "de">({
+/**
+ * Represents the schema of localized messages.
+ * 
+ * @remarks
+ * This type is derived from the default English localization
+ * and provides a structure for all defined messages.
+ */
+type I18nMessageSchema = typeof en;
+
+const i18n = createI18n<I18nMessageSchema, "en" | "de">({
  locale: localStorage.getItem("coscine.locale")?.toString(),
  fallbackLocale: "en",
  messages: def,

--- a/src/router/index.ts
+++ b/src/router/index.ts
--- a/vite.config.mts
+++ b/vite.config.mts
@@ -92,6 +92,7 @@ const config: UserConfig = defineConfig({
      interval: 300,
      ignored: ["**/node_modules/**", "**/.git/**"],
    },
+    allowedHosts: true,
  },

  test: {

--- a/yarn.lock
+++ b/yarn.lock