package.json

 {
   "name": "ui",
-  "version": "1.11.7",
+  "version": "1.12.0",
   "private": true,
   "scripts": {
     "dev": "vite",
@@ -42,7 +42,7 @@
     "stream-to-string": "^1.2.0",
     "uuid": "^8.3.2",
     "vite-aliases": "^0.9.1",
-    "vue": "^2.6.14",
+    "vue": "~2.6.14",
     "vue-demi": "^0.12.1",
     "vue-i18n": "^8.27.0",
     "vue-multiselect": "^2.1.6",
@@ -88,7 +88,7 @@
     "vite": "^2.8.6",
     "vite-plugin-vue2": "^2.0.1",
     "vite-plugin-windicss": "^1.8.3",
-    "vue-template-compiler": "^2.6.14"
+    "vue-template-compiler": "~2.6.14"
   },
   "packageManager": "yarn@3.2.1"
 }

src/modules/project/store.ts

@@ -249,12 +249,14 @@ export const useProjectStore = defineStore({
       }
     },
 
-    async retrieveSubProjects(project: ProjectObject | null) {
+    async getSubProjects(
+      project: ProjectObject | null
+    ): Promise<ProjectObject[]> {
       const notificationStore = useNotificationStore();
       try {
         if (project && project.id && project.slug) {
           const apiResponse = await SubProjectApi.subProjectGet(project.id);
-          this.visitedProjects[project.slug].subProjects = apiResponse.data;
+          return apiResponse.data;
         } else {
           console.error("Selected project is null or its ID is undefined.");
         }
@@ -262,14 +264,26 @@ export const useProjectStore = defineStore({
         // Handle other Status Codes
         notificationStore.postApiErrorNotification(error as AxiosError);
       }
+      return [];
     },
 
-    async retrieveResources(project: ProjectObject | null) {
+    async retrieveSubProjects(project: ProjectObject | null) {
+      if (project && project.slug) {
+        this.visitedProjects[project.slug].subProjects =
+          await this.getSubProjects(project);
+      } else {
+        console.error("Selected project is null or its ID is undefined.");
+      }
+    },
+
+    async getResources(
+      project: ProjectObject | null
+    ): Promise<ResourceObject[]> {
       const notificationStore = useNotificationStore();
       try {
         if (project && project.id && project.slug) {
           const apiResponse = await ProjectApi.projectGetResources(project.id);
-          this.visitedProjects[project.slug].resources = apiResponse.data;
+          return apiResponse.data;
         } else {
           console.error("Selected project is null or its ID is undefined.");
         }
@@ -277,6 +291,16 @@ export const useProjectStore = defineStore({
         // Handle other Status Codes
         notificationStore.postApiErrorNotification(error as AxiosError);
       }
+      return [];
+    },
+
+    async retrieveResources(project: ProjectObject | null) {
+      if (project && project.slug) {
+        const resources = await this.getResources(project);
+        this.visitedProjects[project.slug].resources = resources;
+      } else {
+        console.error("Selected project is null or its ID is undefined.");
+      }
     },
 
     async retrieveQuotas(project: ProjectObject | null) {

src/modules/search/SearchModule.vue

@@ -14,13 +14,16 @@ import { defineComponent } from "vue-demi";
 import useSearchStore from "./store";
 // import the main store
 import useMainStore from "@/store/index";
+// import the project store
+import useProjectStore from "@/modules/project/store";
 
 export default defineComponent({
   setup() {
     const mainStore = useMainStore();
     const searchStore = useSearchStore();
+    const projectStore = useProjectStore();
 
-    return { mainStore, searchStore };
+    return { mainStore, searchStore, projectStore };
   },
 
   computed: {
@@ -35,8 +38,9 @@ export default defineComponent({
 
   methods: {
     async initialize() {
-      // do initialization stuff (e.g. API calls, element loading, etc.)
-      // ...
+      if (!this.projectStore.allProjects) {
+        await this.projectStore.retrieveAllProjects();
+      }
     },
   },
 });

src/modules/search/pages/Search.vue

@@ -17,18 +17,26 @@
             ></b-form-input>
           </b-col>
           <b-col id="selectProjCol" sm="2" align-self="center" class="pl-0">
-            <b-form-select v-model="selectProjValue">
+            <b-form-select
+              v-model="selectedProject"
+              :options="allProjectsOptions"
+              @change="queryData(searchText)"
+            >
               <template #first>
-                <b-form-select-option :value="null" disabled
+                <b-form-select-option :value="null"
                   >{{ $t("page.search.allProjects") }}
                 </b-form-select-option>
               </template>
             </b-form-select>
           </b-col>
           <b-col id="selectResCol" sm="2" align-self="center" class="pl-0">
-            <b-form-select v-model="selectResValue">
+            <b-form-select
+              v-model="selectedResource"
+              :options="projectResourcesOptions"
+              @change="queryData(searchText)"
+            >
               <template #first>
-                <b-form-select-option :value="null" disabled
+                <b-form-select-option :value="null"
                   >{{ $t("page.search.allResources") }}
                 </b-form-select-option>
               </template>
@@ -36,9 +44,16 @@
           </b-col>
           <b-col sm="0" align-self="center" class="text-right p-0">
             <b-button-group>
-              <b-button id="searchButton" variant="primary">
+              <b-button
+                id="searchButton"
+                variant="primary"
+                :disabled="resultsViewLoading"
+                @click="queryData(searchText)"
+              >
                 {{ $t("page.search.search") }}
+                <b-spinner v-if="resultsViewLoading" variant="secondary" />
               </b-button>
+              <!-- Uncommented until implemented
               <b-dropdown id="searchDropdown" right size="sm" variant="primary">
                 <b-dropdown-item>{{
                   $t("page.search.buttonSearch.Item1")
@@ -47,6 +62,7 @@
                   $t("page.search.buttonSearch.Item2")
                 }}</b-dropdown-item>
               </b-dropdown>
+              -->
             </b-button-group>
           </b-col>
         </b-row>
@@ -179,6 +195,8 @@ import Sidebar from "./components/Sidebar.vue";
 import useSearchStore from "../store";
 // import the main store
 import useMainStore from "@/store/index";
+// import the project store
+import useProjectStore from "@/modules/project/store";
 
 import type {
   EnhancedOldSearchResult,
@@ -186,6 +204,10 @@ import type {
   OldSearchCollection,
 } from "../types";
 import type { SearchResult } from "@coscine/api-client/dist/types/Coscine.Api.Search";
+import type {
+  ProjectObject,
+  ResourceObject,
+} from "@coscine/api-client/dist/types/Coscine.Api.Project";
 
 export default defineComponent({
   components: {
@@ -195,17 +217,21 @@ export default defineComponent({
   setup() {
     const mainStore = useMainStore();
     const searchStore = useSearchStore();
+    const projectStore = useProjectStore();
 
-    return { mainStore, searchStore };
+    return { mainStore, searchStore, projectStore };
   },
 
   data() {
     return {
       searchText: "",
-      selectProjValue: null,
-      selectResValue: null,
+      selectedProject: null as null | ProjectObject,
+      selectedResource: null as null | ResourceObject,
 
-      filterTags: ["Filter 1", "Filter 2", "Filter 3"],
+      projectResources: [] as ResourceObject[],
+      projectSubProjects: [] as ProjectObject[],
+
+      filterTags: [],
 
       resultsViewFields: ["type"],
       resultsViewLoading: true,
@@ -217,6 +243,37 @@ export default defineComponent({
   },
 
   computed: {
+    allProjects(): ProjectObject[] | null {
+      return this.projectStore.allProjects;
+    },
+    allProjectsOptions(): {
+      value: ProjectObject;
+      text: string | null | undefined;
+    }[] {
+      if (this.allProjects) {
+        return this.allProjects.map((project) => {
+          return {
+            value: project,
+            text: project.displayName,
+          };
+        });
+      }
+      return [];
+    },
+    projectResourcesOptions(): {
+      value: ResourceObject;
+      text: string | null | undefined;
+    }[] {
+      if (this.projectResources) {
+        return this.projectResources.map((resource) => {
+          return {
+            value: resource,
+            text: resource.displayName,
+          };
+        });
+      }
+      return [];
+    },
     paginationTotalRows(): number {
       if (this.searchResults !== null) {
         return this.searchResults.length;
@@ -231,17 +288,34 @@ export default defineComponent({
         [];
       if (this.oldSearchResults !== null) {
         searchResults.push(
-          ...this.oldSearchResults.Projects.map((project) => {
+          ...this.oldSearchResults.Projects.filter(
+            (project) =>
+              !this.selectedProject || this.selectedProject.id === project.Id
+          ).map((project) => {
             return { ...project, type: "Project" } as EnhancedOldSearchResult;
           })
         );
         searchResults.push(
-          ...this.oldSearchResults.Resources.map((resource) => {
+          ...this.oldSearchResults.Resources.filter(
+            (resource) =>
+              (!this.selectedProject ||
+                this.projectResources.some(
+                  (projectResource) => projectResource.id === resource.Id
+                )) &&
+              (!this.selectedResource ||
+                this.selectedResource.id === resource.Id)
+          ).map((resource) => {
             return { ...resource, type: "Resource" } as EnhancedOldSearchResult;
           })
         );
         searchResults.push(
-          ...this.oldSearchResults.SubProjects.map((subProject) => {
+          ...this.oldSearchResults.SubProjects.filter(
+            (subProject) =>
+              !this.selectedProject ||
+              this.projectSubProjects.some(
+                (projectSubProject) => projectSubProject.id === subProject.Id
+              )
+          ).map((subProject) => {
             return {
               ...subProject,
               type: "SubProject",
@@ -251,7 +325,14 @@ export default defineComponent({
       }
       if (this.semanticSearchResults !== null) {
         searchResults.push(
-          ...this.semanticSearchResults.map((result) => {
+          ...this.semanticSearchResults
+            .filter(
+              (file) =>
+                !this.selectedResource ||
+                !this.selectedResource.id ||
+                file.graphName?.includes(this.selectedResource.id)
+            )
+            .map((result) => {
               return { ...result, type: "File" } as EnhancedSearchResult;
             })
         );
@@ -267,10 +348,20 @@ export default defineComponent({
     searchText() {
       this.queryData(this.searchText);
     },
+    selectedProject() {
+      this.selectedResource = null;
+      this.projectResources = [];
+      this.projectSubProjects = [];
+
+      this.retrieveResources();
+      this.retrieveSubProjects();
+    },
   },
 
   mounted() {
     this.searchText = this.getSearchQuery();
+    this.retrieveResources();
+    this.retrieveSubProjects();
   },
 
   methods: {
@@ -284,10 +375,32 @@ export default defineComponent({
       this.resultsViewLoading = true;
       await Promise.all([
         this.searchStore.retrieveOldSearchResults(query),
-        this.searchStore.retrieveSemanticSearchResults(query),
+        this.searchStore.retrieveSemanticSearchResults(
+          query,
+          this.selectedProject
+        ),
       ]);
       this.resultsViewLoading = false;
     },
+    async retrieveResources() {
+      if (this.selectedProject) {
+        this.projectResources = await this.projectStore.getResources(
+          this.selectedProject
+        );
+        this.selectedResource = null;
+      } else {
+        this.projectResources = [];
+      }
+    },
+    async retrieveSubProjects() {
+      if (this.selectedProject) {
+        this.projectSubProjects = await this.projectStore.getSubProjects(
+          this.selectedProject
+        );
+      } else {
+        this.projectSubProjects = [];
+      }
+    },
   },
 });
 </script>
@@ -314,4 +427,9 @@ export default defineComponent({
 .card-body {
   padding: 0rem;
 }
+button >>> span.spinner-border {
+  height: 15px;
+  width: 15px;
+  margin-right: 4px;
+}
 </style>

src/modules/search/pages/components/Result.vue

@@ -82,6 +82,11 @@ export default defineComponent({
     url(): string {
       if (this.result.type === "File") {
         return this.result.graphName ? this.result.graphName : "#";
+      } else if (this.result.type === "Resource") {
+        return this.$router.resolve({
+          name: "resource-page",
+          params: { guid: this.result.Id, slug: this.result.Slug },
+        }).href;
       } else {
         return this.$router.resolve({
           name: "project-page",

src/modules/search/store.ts

@@ -2,6 +2,7 @@ import { defineStore } from "pinia";
 import { SearchApi, SemanticSearchApi } from "@coscine/api-client";
 
 import type { SearchState } from "./types";
+import type { ProjectObject } from "@coscine/api-client/dist/types/Coscine.Api.Project";
 
 /*  
   Store variable name is "this.<id>Store"
@@ -51,9 +52,18 @@ export const useSearchStore = defineStore({
         return false;
       }
     },
-    async retrieveSemanticSearchResults(query: string): Promise<boolean> {
+    async retrieveSemanticSearchResults(
+      query: string,
+      projectObject?: ProjectObject | null
+    ): Promise<boolean> {
       try {
-        const response = await SemanticSearchApi.semanticSearchSearch(query);
+        let adaptedQuery = query;
+        if (projectObject && projectObject.id) {
+          adaptedQuery = `(belongsToProject: "https://purl.org/coscine/projects/${projectObject.id}") + (${query})`;
+        }
+        const response = await SemanticSearchApi.semanticSearchSearch(
+          adaptedQuery
+        );
         this.semanticSearchResults = response.data;
         return true;
       } catch {