Add 'Others' resource category in the resources tab (dataset data section)

src/app/geosource/components/dataset-detail/dataset-resources/dataset-resources.component.html

@@ -75,6 +75,29 @@
     </ng-container>
   </div>
 
+  <div class="columns is-multiline" *ngIf="otherResources.length > 0">
+    <div class="column is-12 title-resource" (click)="otherPanelOpen = !otherPanelOpen">
+      <span class="icon">
+        <i class="far fa-arrow-alt-circle-down fa-lg"></i>
+      </span>
+      Other Resources
+      <div class="open-close">
+        <span class="icon" *ngIf="otherPanelOpen">
+          <i class="fas fa-minus fa-lg"></i>
+        </span>
+        <span class="icon" *ngIf="!otherPanelOpen">
+          <i class="fas fa-plus fa-lg"></i>
+        </span>
+      </div>
+    </div>
+    <ng-container *ngIf="otherPanelOpen">
+      <div class="column is-12 resource" *ngFor="let metadataLink of otherResources">
+        <div><strong>{{ metadataLink.name }}</strong></div>
+        <div>{{ metadataLink.url }}</div>
+      </div>
+    </ng-container>
+  </div>
+
   <app-license-modal (close)="toggleLicenseModal()" [isOpen]="displayLicenseModal"></app-license-modal>
 
 </ng-container>

src/app/geosource/components/dataset-detail/dataset-resources/dataset-resources.component.ts

@@ -20,10 +20,12 @@ export class DatasetResourcesComponent implements OnInit, OnDestroy {
   // To display in the template
   queryableResources: Resource[];
   downloadableResources: Resource[];
+  otherResources: IMetadataLink[];
 
   // Variables for open/use resources panels
   queryablePanelOpen = true;
   downloadablePanelOpen = true;
+  otherPanelOpen = true;
 
   constructor(
     private _datasetDetailService: DatasetDetailService,
@@ -33,8 +35,8 @@ export class DatasetResourcesComponent implements OnInit, OnDestroy {
   ngOnInit() {
     this.queryableResources = [];
     this.downloadableResources = [];
+    this.otherResources = [];
 
-    console.log('ng on inits');
     this.initialize();
     this._resourcesService.getResources().subscribe((resources) => {
       this.resources = resources;
@@ -49,22 +51,33 @@ export class DatasetResourcesComponent implements OnInit, OnDestroy {
     this.sub.unsubscribe();
   }
 
+  // Resources are organized in 3 categories:
+  // - queryable
+  // - downloadable
+  // - other
+  // How to organize: we compare the type of one resource from our resource service
+  // and the ES metadata link property. If there is a match, the service will let us know if the resource
+  // is queryable or downloadable. If there is no match and the ES resource cannot be found in the service,
+  // we put it in "others" resources catagory.
   initialize() {
-    //
-    console.log(this.resources);
     this.metadata = this._datasetDetailService.datasetMetadata;
     if (this.metadata !== undefined && this.resources !== undefined) {
       this.metadata.link.forEach((link) => {
+        let metadataLinkFound = false;
         this.resources.forEach((resource) => {
           if (link.protocol === resource.type) {
+            metadataLinkFound = true;
             resource.metadataLink = link;
             if (resource.queryable) {
               this.queryableResources.push(resource);
-            } else {
+            } else if (resource.downloadable) {
               this.downloadableResources.push(resource);
             }
           }
         });
+        if (! metadataLinkFound) {
+          this.otherResources.push(link);
+        }
       });
     }
   }