adding changes

Author: prakhyatox

src/components/Registry/MetricsBenchmarkTable.vue

@@ -8,7 +8,11 @@
       mobile-breakpoint="sm"
     >
       <template #item.name="{ item }">
-        <a :href="item.homepage" rel="noopener noreferrer" target="_blank">
+        <a
+          :href="fairsharingURL + item.id"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
           {{ item.name }}
         </a>
       </template>
@@ -23,6 +27,7 @@ export default {
   name: "MetricsBenchmarkTable",
   data() {
     return {
+      fairsharingURL: import.meta.env.VITE_FAIRSHARING_URL,
       headers: [
         {
           title: "Name",

src/components/Registry/UtilComponents/AutoCompleteComponent.vue

@@ -11,6 +11,7 @@
       :loading="loading"
       chips
       class="text-capitalize advancedSearchAutocomplete advancedSearchDialogBoxContent"
+      clear-on-select
       clearable
       closable-chips
       color="primary"

src/components/Registry/UtilComponents/SelectComponent.vue

@@ -9,6 +9,7 @@
       :items="cleanTextList"
       chips
       class="text-capitalize advancedSearchSelect advancedSearchDialogBoxContent"
+      clear-on-select
       clearable
       closable-chips
       color="primary"

src/stores/advancedSearch.js

@@ -83,10 +83,10 @@ export const useAdvancedSearchStore = defineStore("advancedSearch", {
             this.errorStatus = false;
             // this.advancedSearchResponse = response["advancedSearch"];
             this.advancedSearchResponse = response["advancedSearch"].map(
-              ({ name, type, homepage }) => ({
+              ({ name, type, id }) => ({
                 name,
                 type,
-                homepage,
+                id,
               }),
             );
 
@@ -97,10 +97,10 @@ export const useAdvancedSearchStore = defineStore("advancedSearch", {
             //For metrics as fairassistRelations is empty for benchmarks
             if (fairassistRelations.length) {
               fairassistRelations = fairassistRelations.map(
-                ({ name, type, homepage }) => ({
+                ({ name, type, id }) => ({
                   name,
                   type,
-                  homepage,
+                  id,
                 }),
               );
             }

src/styles/_advancedSearchComponents.scss

@@ -1,10 +1,15 @@
 //Styling for select dropdown
 .advancedSearchSelectWrapper {
   background-color: #27aae1;
+  width: 100%;
+  max-width: 750px;
+  margin-left: 10px;
+  margin-right: 10px;
   box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
   0px 2px 2px 0px rgba(0, 0, 0, 0.14),
   0px 1px 5px 0px rgba(0, 0, 0, 0.12);
 
+
   //Only for selectRecord
   &.selectRecordType {
     background-color: #E67E22

src/views/Registry/RegistryView.vue

@@ -7,12 +7,16 @@
     text="This Alpha system is under construction  and some functionalities are still under development"
   />
   <CollapseTreeGraph />
-  <SelectRecordType class="mt-6" />
-  <ObjectTypeFilter />
-  <MetricsToolFilter />
-  <MetricsNameFilter />
-  <SubjectFilter />
-  <OrganisationsFilter />
+  <SelectRecordType class="mt-6 mx-auto" />
+  <div class="d-flex justify-center">
+    <ObjectTypeFilter />
+    <MetricsToolFilter />
+  </div>
+  <MetricsNameFilter class="mx-auto" />
+  <div class="d-flex justify-center">
+    <SubjectFilter />
+    <OrganisationsFilter />
+  </div>
   <ApplyFilterButton />
   <MetricsBenchmarkTable />
 </template>