chore: code formatting

apps/picsa-apps/dashboard/src/app/modules/resources/resources.module.ts

@@ -5,12 +5,10 @@ import { RouterModule } from '@angular/router';
 import { ResourceCreateComponent } from './pages/create/resource-create.component';
 import { ResourcesPageComponent } from './pages/home/resources.page';
 
-
-
 @NgModule({
   declarations: [],
   imports: [
-  CommonModule,
+    CommonModule,
     RouterModule.forChild([
       {
         path: '',
@@ -23,7 +21,7 @@ import { ResourcesPageComponent } from './pages/home/resources.page';
       {
         path: ':id',
         component: ResourceCreateComponent,
-      }
+      },
     ]),
   ],
 })

apps/picsa-tools/resources-tool/src/app/app-routing.module.ts

@@ -17,8 +17,8 @@ export const ROUTES_COMMON: Routes = [
   },
   {
     path: 'search',
-    loadChildren:() => import('./pages/resources/search.module').then((m)=>m.SearchModule)
-  }
+    loadChildren: () => import('./pages/resources/search.module').then((m) => m.SearchModule),
+  },
 ];
 /** Routes only registered in standalone mode */
 const ROUTES_STANDALONE: Routes = [{ path: '**', redirectTo: '' }];

apps/picsa-tools/resources-tool/src/app/pages/collection/collection.component.ts

@@ -73,7 +73,7 @@ export class CollectionComponent implements OnInit, OnDestroy {
     this.collections = this.processDocs(collectionDocs);
     const fileDocs = await this.service.dbFiles.findByIds(files).sort('priority').exec();
     this.files = this.processDocs(fileDocs);
-  } 
+  }
   private processDocs(docs: Map<string, RxDocument<any>>) {
     const entries = [...docs.values()];
     return this.service.filterLocalisedResources(entries).map((d) => d._data);

apps/picsa-tools/resources-tool/src/app/pages/home/home.component.html

@@ -1,12 +1,11 @@
 <div class="page-content">
   <div class="page-columns" *mobxAutorun>
     <div class="content-container">
-
       <div style="display: flex; align-items: center">
         <h2 style="flex: 1">{{ 'Collections' | translate }}</h2>
-        <button mat-stroked-button color="primary" class="search-button" routerLink="search" >
+        <button mat-stroked-button color="primary" routerLink="search" style="margin-right: 1rem">
           <mat-icon>search</mat-icon>
-          {{'Search'}}
+          {{ 'Search' | translate }}
         </button>
         <button mat-stroked-button color="primary" class="downloads-button" routerLink="downloads">
           <mat-icon>download</mat-icon>

apps/picsa-tools/resources-tool/src/app/pages/home/home.component.scss

@@ -16,23 +16,6 @@
   row-gap: 1em;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 }
-.downloads-button {
-  height: 36px;
-  margin-left: 20px;
-  mat-icon {
-    height: 24px;
-    width: 24px;
-    font-size: 24px;
-  }
-}
-.search-button {
-  height: 36px;
-  mat-icon {
-    height: 24px;
-    width: 24px;
-    font-size: 24px;
-  }
-}
 
 // .video-resource-container {
 //   display: none;

apps/picsa-tools/resources-tool/src/app/pages/resources/search.component.html

@@ -1,25 +1,25 @@
-<div>
-  <input
-    type="search"
-    name="filter"
-    class="form-control"
-    placeholder="Search resources...."
-    [(ngModel)]="query"
-    (input)="onSearchInputChange($event)"
-    autofocus
-  />
-  <div *ngIf="searchResults.length > 0" class="card">
-    <div class="card-content" *ngFor="let result of searchResults">
-      <mat-card>
-        <mat-card-header>
-          <mat-card-title>{{ result.item.title }}</mat-card-title>
-          <mat-card-subtitle> {{ result.item.description || '' }} </mat-card-subtitle>
-          <img mat-card-avatar *ngIf="result.item.cover?.image" [src]="result.item.cover?.image" />
-        </mat-card-header>
-      </mat-card>
-  <div *ngIf="searchResults.length === 0 && query.length > 0">
-    <div class="card">
-      <div class="card-content">No results found.</div>
+<input
+  type="search"
+  name="filter"
+  class="form-control"
+  placeholder="Search resources...."
+  [(ngModel)]="query"
+  (input)="onSearchInputChange($event)"
+  autofocus
+/>
+<div *ngIf="searchResults.length > 0" class="card">
+  <div class="card-content" *ngFor="let result of searchResults">
+    <mat-card>
+      <mat-card-header>
+        <mat-card-title>{{ result.item.title }}</mat-card-title>
+        <mat-card-subtitle> {{ result.item.description || '' }} </mat-card-subtitle>
+        <img mat-card-avatar *ngIf="result.item.cover?.image" [src]="result.item.cover?.image" />
+      </mat-card-header>
+    </mat-card>
+    <div *ngIf="searchResults.length === 0 && query.length > 0">
+      <div class="card">
+        <div class="card-content">No results found.</div>
+      </div>
     </div>
   </div>
 </div>

apps/picsa-tools/resources-tool/src/app/pages/resources/search.component.scss

@@ -1,50 +1,48 @@
 .form-control {
   width: 50%;
   padding: 10px;
-  border: 2px solid maroon; 
-  border-radius: 10px; 
+  border: 2px solid maroon;
+  border-radius: 10px;
   box-sizing: border-box;
   font-size: 16px;
   margin-top: 50px;
-  margin-left: auto; 
+  margin-left: auto;
   margin-right: auto;
   display: block;
 }
-
-  .form-control:focus {
-    outline: none;
-    border-color: maroon; 
-    box-shadow: 0 0 5px maroon(0, 123, 255, 0.5);
-  }
-
-
-  .form-control:focus {
-    outline: none; 
-    box-shadow: 0 0 5px maroon; 
-  }
 
-  .card {
-    width: 50%;
-    border: 1px solid maroon;
-    border-radius: 10px;
-    margin-left: auto; 
-    margin-right: auto; 
-    margin-top: 10px;/* Center the card below the search engine */
-    padding: 10px;
-    box-sizing: border-box;
-    display: block;
-    background-color: white;
-  }
-
-  .card-content {
-    font-size: 16px;
-    color: maroon;
-    font-weight: bold;
-  }
-
-
-  /* Optional: Hover effect for better user experience */
-  .card:hover {
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    cursor: pointer;
-  }
+.form-control:focus {
+  outline: none;
+  border-color: maroon;
+  box-shadow: 0 0 5px maroon(0, 123, 255, 0.5);
+}
+
+.form-control:focus {
+  outline: none;
+  box-shadow: 0 0 5px maroon;
+}
+
+.card {
+  width: 50%;
+  border: 1px solid maroon;
+  border-radius: 10px;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 10px; /* Center the card below the search engine */
+  padding: 10px;
+  box-sizing: border-box;
+  display: block;
+  background-color: white;
+}
+
+.card-content {
+  font-size: 16px;
+  color: maroon;
+  font-weight: bold;
+}
+
+/* Optional: Hover effect for better user experience */
+.card:hover {
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+}

apps/picsa-tools/resources-tool/src/app/pages/resources/search.component.ts

@@ -1,27 +1,25 @@
-import { Component, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatCardModule } from '@angular/material/card';
 import Fuse from 'fuse.js';
+
 import { DB_FILE_ENTRIES } from '../../data';
-import { FormsModule } from '@angular/forms';
 import { DB_COLLECTION_ENTRIES } from '../../data';
 import { DB_LINK_ENTRIES } from '../../data';
-import { MatCardModule } from '@angular/material/card';
-
 
-type SearchResultType = { 
-  item: any,
-  refIndex: number,
-
-  }
+type SearchResultType = {
+  item: any;
+  refIndex: number;
+};
 @Component({
   selector: 'picsa-search',
   standalone: true,
-  imports: [CommonModule,FormsModule,MatCardModule],
-templateUrl: './search.component.html',
+  imports: [CommonModule, FormsModule, MatCardModule],
+  templateUrl: './search.component.html',
   styleUrls: ['./search.component.scss'],
-}) 
-
-export class SearchComponent implements OnInit{
+})
+export class SearchComponent implements OnInit {
   query: string = '';
 
   fuseOptions = {
@@ -33,19 +31,13 @@ export class SearchComponent implements OnInit{
   searchResults: SearchResultType[] = [];
 
   ngOnInit(): void {
-    const allEntries = [
-      ...DB_FILE_ENTRIES,
-      ...DB_COLLECTION_ENTRIES,
-      ...DB_LINK_ENTRIES,]
+    const allEntries = [...DB_FILE_ENTRIES, ...DB_COLLECTION_ENTRIES, ...DB_LINK_ENTRIES];
     this.fuse = new Fuse(allEntries, this.fuseOptions);
-
   }
 
   onSearchInputChange(event: any) {
-  if (this.fuse) {
-    this.searchResults = this.fuse.search(this.query);
-
-  } 
+    if (this.fuse) {
+      this.searchResults = this.fuse.search(this.query);
+    }
   }
-
 }

apps/picsa-tools/resources-tool/src/app/pages/resources/search.module.ts

@@ -1,21 +1,24 @@
-import { SearchComponent } from "./search.component";
 import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { RouterModule, Routes } from '@angular/router';
-import { FormsModule } from "@angular/forms";
-import { ResourcesMaterialModule } from "../../material.module";
-import { ResourcesComponentsModule } from "../../components/components.module";
 import { PicsaCommonComponentsModule } from '@picsa/components';
 import { PicsaTranslateModule } from '@picsa/shared/modules';
 
+import { ResourcesComponentsModule } from '../../components/components.module';
+import { ResourcesMaterialModule } from '../../material.module';
+import { SearchComponent } from './search.component';
+
 const routes: Routes = [{ path: '', component: SearchComponent, title: 'Search' }];
 
 @NgModule({
-    imports: [RouterModule.forChild(routes),
-              FormsModule,
-              ResourcesMaterialModule,
-              ResourcesComponentsModule,
-              PicsaCommonComponentsModule,
-              PicsaTranslateModule],
-    exports: [RouterModule],
-  })
-  export class SearchModule {}
+  imports: [
+    RouterModule.forChild(routes),
+    FormsModule,
+    ResourcesMaterialModule,
+    ResourcesComponentsModule,
+    PicsaCommonComponentsModule,
+    PicsaTranslateModule,
+  ],
+  exports: [RouterModule],
+})
+export class SearchModule {}