.gitignore

@@ -305,6 +305,7 @@ $RECYCLE.BIN/
 
 # End of https://www.toptal.com/developers/gitignore/api/vue,node,macos,windows,linux,vscode,intellij+all
 
+# Other
 .husky
 .yarn/*
 !.yarn/patches

package.json

 {
   "name": "ui",
-  "version": "1.20.5",
+  "version": "1.21.0",
   "private": true,
   "scripts": {
     "dev": "vite",
@@ -13,7 +13,7 @@
     "coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@coscine/api-client": "^2.8.1",
+    "@coscine/api-client": "^2.9.0",
     "@coscine/form-generator": "^3.0.12",
     "@rdfjs-elements/formats-pretty": "^0.4.3",
     "@rdfjs/data-model": "^2.0.0",

src/modules/project/ProjectModule.vue

@@ -83,14 +83,6 @@ export default defineComponent({
       if (this.projectStore.currentProjectRoles === null) {
         this.projectStore.retrieveProjectRoles(this.project);
       }
-      // Load Quotas for the project if not present
-      if (this.projectStore.currentQuotas === null) {
-        this.projectStore.retrieveQuotas(this.project);
-      }
-      // Load list of Enabled Resource Types if not present
-      if (this.resourceStore.resourceTypes === null) {
-        this.resourceStore.retrieveResourceTypes();
-      }
       // Load list of all Project Role Types if not present
       if (this.projectStore.roles === null) {
         this.projectStore.retrieveRoles();

src/modules/project/pages/CreateProject.vue

@@ -130,9 +130,9 @@ export default defineComponent({
     },
   },
 
-  created() {
+  async created() {
     this.isLoading = true;
-    this.fetchData();
+    await this.fetchData();
     this.isLoading = false;
   },
 

src/modules/project/pages/ProjectPage.vue

@@ -69,6 +69,7 @@
           <CoscineCard
             :title="$t('page.listProjects.addProject')"
             type="create"
+            :style="cardStyle"
             :to="toCreateSubProject()"
             @open-card="openCreateProject($event)"
           />
@@ -85,6 +86,7 @@
             :key="index"
             :title="subProject.displayName"
             type="project"
+            :style="cardStyle"
             :to="toSubProject(subProject)"
             @open-card="openProject($event, subProject)"
           />

src/modules/project/pages/Quota.vue

@@ -391,11 +391,22 @@ export default defineComponent({
     },
   },
 
-  created() {
+  async created() {
+    await this.fetchData();
     this.selectFirstResourceType();
   },
 
   methods: {
+    async fetchData() {
+      // Load Quotas for the project if not present
+      if (this.projectStore.currentQuotas === null) {
+        await this.projectStore.retrieveQuotas(this.project);
+      }
+      // Load list of Enabled Resource Types if not present
+      if (this.resourceStore.resourceTypes === null) {
+        await this.resourceStore.retrieveResourceTypes();
+      }
+    },
     async changeProjectQuota() {
       if (
         this.project &&

src/modules/resource/components/settings/Actions.vue

@@ -11,10 +11,10 @@
       <b-form-checkbox
         id="Archive"
         :checked="resourceForm.archived"
-        :disabled="!(isOwner || isResourceCreator) || !resourceForm"
+        :disabled="!isUserAllowedToEdit"
         switch
         size="lg"
-        @click.native.prevent="isArchiveModalVisible = true"
+        @click.prevent="isArchiveModalVisible = true"
       />
     </CoscineFormGroup>
 
@@ -31,7 +31,7 @@
         type="delete"
         variant="danger"
         :disabled="
-          !resourceForm ||
+          !isUserAllowedToEdit ||
           (resourceTypeInformation && !resourceTypeInformation.canDelete)
         "
         @click.prevent="isDeleteModalVisible = true"
@@ -61,12 +61,10 @@
 <script lang="ts">
 import { defineComponent, type PropType } from "vue";
 import useProjectStore from "@/modules/project/store";
-import useUserStore from "@/modules/user/store";
 import useResourceStore from "../../store";
 import ArchiveResourceModal from "./modals/ArchiveResourceModal.vue";
 import DeleteResourceModal from "./modals/DeleteResourceModal.vue";
 import type { ResourceObject } from "@coscine/api-client/dist/types/Coscine.Api.Resources";
-import type { UserObject } from "@coscine/api-client/dist/types/Coscine.Api.User";
 import type { ResourceTypeInformation } from "@coscine/api-client/dist/types/Coscine.Api.Resources";
 export default defineComponent({
   components: {
@@ -82,6 +80,10 @@ export default defineComponent({
       default: false,
       type: Boolean,
     },
+    isUserAllowedToEdit: {
+      default: false,
+      type: Boolean,
+    },
   },
 
   emits: {
@@ -91,10 +93,9 @@ export default defineComponent({
 
   setup() {
     const projectStore = useProjectStore();
-    const userStore = useUserStore();
     const resourceStore = useResourceStore();
 
-    return { projectStore, userStore, resourceStore };
+    return { projectStore, resourceStore };
   },
 
   data() {
@@ -116,19 +117,6 @@ export default defineComponent({
       }
       return null;
     },
-    isOwner(): boolean | undefined {
-      return this.projectStore.currentUserRoleIsOwner;
-    },
-    user(): UserObject | null {
-      return this.userStore.user;
-    },
-    isResourceCreator(): boolean | undefined {
-      if (this.resourceForm.creator && this.user && this.user.id) {
-        return this.resourceForm.creator === this.user.id;
-      } else {
-        return undefined;
-      }
-    },
   },
 
   methods: {

src/modules/resource/components/settings/MetadataView.vue

@@ -7,7 +7,7 @@
     <FormGenerator
       v-else-if="resource"
       :key="resourceForm.applicationProfile"
-      :disabled-mode="!isOwner || resource.archived"
+      :disabled-mode="!isUserAllowedToEdit || resource.archived"
       :fixed-value-mode="true"
       :fixed-values="resourceForm.fixedValues"
       :locale="$root.$i18n.locale"
@@ -25,7 +25,6 @@
 import { defineComponent, type PropType } from "vue";
 // import the store for current module
 import useResourceStore from "../../store";
-import useProjectStore from "@/modules/project/store";
 import useUserStore from "@/modules/user/store";
 import "@/plugins/form-generator";
 import type { Dataset } from "@rdfjs/types";
@@ -47,6 +46,10 @@ export default defineComponent({
       type: Boolean,
       required: true,
     },
+    isUserAllowedToEdit: {
+      default: false,
+      type: Boolean,
+    },
   },
 
   emits: {
@@ -55,10 +58,9 @@ export default defineComponent({
 
   setup() {
     const resourceStore = useResourceStore();
-    const projectStore = useProjectStore();
     const userStore = useUserStore();
 
-    return { resourceStore, projectStore, userStore };
+    return { resourceStore, userStore };
   },
 
   data() {
@@ -71,9 +73,6 @@ export default defineComponent({
     resource(): ResourceObject | null {
       return this.resourceStore.currentResource;
     },
-    isOwner(): boolean | undefined {
-      return this.projectStore.currentUserRoleIsOwner;
-    },
     user(): UserObject | null {
       return this.userStore.user;
     },
@@ -99,5 +98,3 @@ export default defineComponent({
   },
 });
 </script>
-
-<style></style>

src/modules/resource/components/settings/Overview.vue

@@ -129,7 +129,7 @@
           type="input"
         >
           <b-form-input
-            v-if="resource"
+            v-if="resource && resource.type"
             id="ResourceType"
             :value="
               $t('resourceTypes.' + resource.type.displayName + '.displayName')
@@ -143,7 +143,12 @@
       <!-- Resource Quota -->
       <b-col>
         <CoscineFormGroup
-          v-if="resource && resource.resourceTypeOption.Size"
+          v-if="
+            resource &&
+            resource.resourceTypeOption.Size &&
+            quotaCurrentBytes !== null &&
+            quotaMaximumBytes !== null
+          "
           label-for="Quota"
           :label="$t('page.settings.overview.quotaLabel')"
           :is-loading="

src/modules/resource/pages/CreateResource.vue

@@ -62,7 +62,8 @@
             variant="outline-primary"
             :disabled="!tabs[currentTab + 1].active"
             @click.prevent="next"
-            >{{ $t("buttons.next") }}
+          >
+            {{ $t("buttons.next") }}
           </b-button>
         </b-form-group>
       </div>
@@ -171,15 +172,23 @@ export default defineComponent({
     },
   },
 
-  created() {
+  async created() {
     this.isLoading = true;
     this.getGroupedApplicationProfilesList();
-    this.fetchData();
+    await this.fetchData();
     this.isLoading = false;
   },
 
   methods: {
     async fetchData() {
+      // Load Quotas for the project if not present
+      if (this.projectStore.currentQuotas === null) {
+        await this.projectStore.retrieveQuotas(this.project);
+      }
+      // Load list of Enabled Resource Types if not present
+      if (this.resourceStore.resourceTypes === null) {
+        await this.resourceStore.retrieveResourceTypes();
+      }
       // Load Project Visibilities if not present
       if (this.projectStore.visibilities === null) {
         await this.projectStore.retrieveVisibilities();

src/modules/resource/pages/Settings.vue

@@ -40,6 +40,7 @@
       v-model="resourceForm"
       :application-profile="applicationProfile"
       :is-loading-form-generator="isLoading"
+      :is-user-allowed-to-edit="isUserAllowedToEdit"
       @clickSave="clickSave"
     />
 
@@ -48,6 +49,7 @@
       v-if="resource"
       v-show="tabs[currentTab].step === 'action'"
       :resource-form="resource"
+      :is-user-allowed-to-edit="isUserAllowedToEdit"
       @toggleArchive="toggleArchive"
       @clickDelete="clickDelete"
     />
@@ -75,6 +77,7 @@ import { defineComponent } from "vue";
 // import the store for current module
 import useResourceStore from "../store";
 import useProjectStore from "@/modules/project/store";
+import useUserStore from "@/modules/user/store";
 import { navigateToProject } from "@/router";
 import General from "../components/create-resource/General.vue";
 import MetadataView from "../components/settings/MetadataView.vue";
@@ -91,6 +94,7 @@ import type { ResourceCreationTab, ResourceTypeOption } from "../types";
 import type { ProjectObject } from "@coscine/api-client/dist/types/Coscine.Api.Project";
 import useNotificationStore from "@/store/notification";
 import type { Validation } from "@vuelidate/core";
+import type { UserObject } from "@coscine/api-client/dist/types/Coscine.Api.User";
 
 export default defineComponent({
   components: {
@@ -103,9 +107,10 @@ export default defineComponent({
   setup() {
     const resourceStore = useResourceStore();
     const projectStore = useProjectStore();
+    const userStore = useUserStore();
     const notificationStore = useNotificationStore();
 
-    return { resourceStore, projectStore, notificationStore };
+    return { resourceStore, projectStore, userStore, notificationStore };
   },
 
   data() {
@@ -198,6 +203,25 @@ export default defineComponent({
       }
       return tabs;
     },
+    isOwner(): boolean | undefined {
+      return this.projectStore.currentUserRoleIsOwner;
+    },
+    user(): UserObject | null {
+      return this.userStore.user;
+    },
+    isResourceCreator(): boolean | undefined {
+      if (this.resourceForm.creator && this.user && this.user.id) {
+        return this.resourceForm.creator === this.user.id;
+      } else {
+        return undefined;
+      }
+    },
+    isUserAllowedToEdit(): boolean {
+      if ((this.isOwner || this.isResourceCreator) && this.resourceForm) {
+        return true;
+      }
+      return false;
+    },
   },
 
   watch: {

src/modules/search/pages/Search.vue

@@ -28,7 +28,7 @@
               <b-form-select
                 v-model="selectedProject"
                 :options="allProjectsOptions"
-                @change="queryData(searchText)"
+                @change="queryData(searchText, selectedPage, paginationPageSize)"
               >
                 <template #first>
                   <b-form-select-option :value="null">
@@ -41,7 +41,7 @@
               <b-form-select
                 v-model="selectedResource"
                 :options="projectResourcesOptions"
-                @change="queryData(searchText)"
+                @change="queryData(searchText, selectedPage, paginationPageSize)"
               >
                 <template #first>
                   <b-form-select-option :value="null">
@@ -56,7 +56,7 @@
                   id="searchButton"
                   variant="primary"
                   :disabled="resultsViewLoading"
-                  @click="queryData(searchText)"
+                  @click="queryData(searchText, selectedPage, paginationPageSize)"
                 >
                   {{ $t("page.search.search") }}
                   <b-spinner v-if="resultsViewLoading" variant="secondary" />
@@ -132,10 +132,10 @@
                 </template>
                 <b-table
                   id="resultsView"
-                  :items="filteredResults"
+                  :items="searchResults"
                   :fields="resultsViewFields"
-                  :per-page="paginationPerPage"
-                  :current-page="paginationCurrentPage"
+                  :per-page="pagination ? pagination.PageSize : 0"
+                  :current-page="1"
                   thead-class="d-none"
                   style="min-height: 100%"
                   small
@@ -161,9 +161,7 @@
                     <!-- Show footer if there are results and only on the last page -->
                     <div
                       v-if="
-                        foot.items.length > 0 &&
-                        paginationCurrentPage ===
-                          Math.ceil(paginationTotalRows / paginationPerPage)
+                        foot.items.length > 0 && pagination && !pagination.HasNext
                       "
                       class="p-2 text-center text-muted border-top"
                     >
@@ -183,16 +181,16 @@
         <b-col align-self="center" class="p-0">
           <b-pagination
             id="pagination"
-            v-model="paginationCurrentPage"
-            :total-rows="paginationTotalRows"
-            :per-page="paginationPerPage"
+            v-model="selectedPage"
+            :total-rows="pagination ? pagination.TotalCount : 0"
+            :per-page="pagination ? pagination.PageSize : 0"
             aria-controls="resultsView"
             align="center"
           />
         </b-col>
         <b-col align-self="center" class="p-0">
           <b-form-select
-            v-model="paginationPerPage"
+            v-model="paginationPageSize"
             :options="paginationPerPageOptions"
             style="max-width: 5rem"
           />
@@ -216,10 +214,8 @@ import useResourceStore from "@/modules/resource/store";
 
 import type { ProjectObject } from "@coscine/api-client/dist/types/Coscine.Api.Project";
 import type { ResourceObject } from "@coscine/api-client/dist/types/Coscine.Api.Resources";
-import type {
-  ItemSearchResult,
-  SearchResult,
-} from "@coscine/api-client/dist/types/Coscine.Api.Search";
+import type { ItemSearchResult } from "@coscine/api-client/dist/types/Coscine.Api.Search";
+import { Pagination } from "../types";
 
 export default defineComponent({
   components: {
@@ -249,9 +245,9 @@ export default defineComponent({
       resultsViewFields: ["type"],
       resultsViewLoading: true,
       
-      paginationCurrentPage: 1,
-      paginationPerPage: 100,
-      paginationPerPageOptions: [5, 10, 20, 50, 100],
+      paginationPerPageOptions: [5, 10, 20, 50],
+      selectedPage: 1,
+      paginationPageSize: 10
     };
   },
 
@@ -294,30 +290,34 @@ export default defineComponent({
       });
     },
     paginationTotalRows(): number {
-      return this.filteredResults.length;
+      if(this.searchStore.pagination?.TotalCount){
+        return this.searchStore.pagination.TotalCount;
+      } else return 0;
+    },
+    pagination(): Pagination | null {
+      return this.searchStore.pagination;
     },
     resultsForTable(): ItemSearchResult[] {
       const result: ItemSearchResult[] = [];
       if (this.searchResults) {
-        if (this.searchResults.items) {
         result.push(
-            ...this.searchResults.items.filter((item) =>
+          ...this.searchResults.filter((item) =>
             this.isFilteredItem(item)
           )
         );
       }
-      }
       return result;
     },
-    searchResults(): SearchResult | null {
+    searchResults(): ItemSearchResult[] | null {
       return this.searchStore.searchResults;
     },
   },
 
   watch: {
     searchText() {
-      this.queryData(this.searchText);
+      this.queryData(this.searchText, this.selectedPage, this.paginationPageSize);
     },
+
     selectedProject() {
       this.selectedResource = null;
       this.projectResources = null;
@@ -326,8 +326,17 @@ export default defineComponent({
       this.retrieveResources();
       this.retrieveSubProjects();
     },
-    resultsForTable() {
-      this.assignResultsFilter();
+
+    // resultsForTable() {
+    //   this.assignResultsFilter();
+    // },
+    
+    selectedPage() {
+      this.queryData(this.searchText, this.selectedPage, this.paginationPageSize);
+    },
+    
+    paginationPageSize() {
+      this.queryData(this.searchText, this.selectedPage, this.paginationPageSize);
     },
   },
 
@@ -362,11 +371,11 @@ export default defineComponent({
       const query = Object.fromEntries(urlSearchParams.entries());
       return query !== null ? decodeURIComponent(query.q) : "";
     },
-    async queryData(query: string) {
+    async queryData(query: string, pageNumber: number, pageSize: number) {
       this.resultsViewLoading = true;
       // attach search query, resulting in "/search?q=<searchTerm>"
       this.$router.push({ name: "search", query: { q: query } });
-      await this.searchStore.retrieveSearchResults(query, this.selectedProject);
+      await this.searchStore.retrieveSearchResults(query, pageNumber, pageSize, this.selectedProject);
       this.resultsViewLoading = false;
     },
     async retrieveResources() {

src/modules/search/store.ts

@@ -20,6 +20,7 @@ export const useSearchStore = defineStore({
   */
   state: (): SearchState => ({
     searchResults: null,
+    pagination: null
   }),
 
   /*  
@@ -45,6 +46,8 @@ export const useSearchStore = defineStore({
   actions: {
     async retrieveSearchResults(
       query: string,
+      pageNumber: number,
+      pageSize: number,
       projectObject?: ProjectObject | null
     ): Promise<boolean> {
       const notificationStore = useNotificationStore();
@@ -53,7 +56,12 @@ export const useSearchStore = defineStore({
         if (projectObject && projectObject.id) {
           adaptedQuery = `(${adaptedQuery}) + (belongsToProject: "https://purl.org/coscine/projects/${projectObject.id}")`;
         }
-        const response = await SearchApi.searchSearch(adaptedQuery);
+        const response = await SearchApi.searchSearch(adaptedQuery, undefined, undefined, undefined, pageNumber, pageSize);
+        
+        if(response.headers["x-pagination"]){
+          this.pagination = JSON.parse(response.headers["x-pagination"]);
+        }
+        
         this.searchResults = response.data;
         return true;
       } catch (error) {

src/modules/search/types.ts

-import type { SearchResult } from "@coscine/api-client/dist/types/Coscine.Api.Search";
+import type { ItemSearchResult } from "@coscine/api-client/dist/types/Coscine.Api.Search";
+
+export interface Pagination {
+  TotalCount: number;
+  PageSize: number;
+  CurrentPage: number;
+  TotalPages: number;
+  HasNext: boolean;
+  HasPrevious: boolean;
+}
 
 export interface SearchState {
   /*  
@@ -6,5 +15,6 @@ export interface SearchState {
     STATE TYPE DEFINITION
     --------------------------------------------------------------------------------------
   */
-  searchResults: SearchResult | null;
+  pagination: Pagination | null;
+  searchResults: ItemSearchResult[] | null;
 }

yarn.lock

@@ -331,6 +331,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@coscine/api-client@npm:^2.9.0":
+  version: 2.9.0
+  resolution: "@coscine/api-client@npm:2.9.0"
+  dependencies:
+    axios: ^0.21.1
+  checksum: 5bc66ca4087d9a20c7373321c289402f29b55105fec5120bdbb4c832bdd5ba25a0e8d3482ca57a55364b1537724a550a0ae380d5e4a0e447d037daedaa3fa8c6
+  languageName: node
+  linkType: hard
+
 "@coscine/form-generator@npm:^3.0.12":
   version: 3.0.12
   resolution: "@coscine/form-generator@npm:3.0.12"
@@ -10368,7 +10377,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "ui@workspace:."
   dependencies:
-    "@coscine/api-client": ^2.8.1
+    "@coscine/api-client": ^2.9.0
     "@coscine/form-generator": ^3.0.12
     "@esbuild-plugins/node-globals-polyfill": ^0.1.1
     "@esbuild-plugins/node-modules-polyfill": ^0.1.4