Herty/start with filter

i18n/en.json

@@ -67,6 +67,9 @@
     "fuzzyDescription": "Fuzzy search",
     "fuzzyHint": "Fuzzy search",
     "fuzzyMoreInfo": "Filter which updates the results as you type. It finds videos even if the spelling is not an exact match",
+    "startWithDescription": "Start with search",
+    "startWithHint": "Start with search",
+    "startWithMoreInfo": "Filter which updates the result as you type. It finds videos which start with what you typed",
     "hideOfflineDescription": "Hide offline",
     "hideOfflineHint": "Hide offline",
     "hideOfflineMoreInfo": "Hide from view videos that are from folders that are not currently connected to the computer",
@@ -345,6 +348,7 @@
     "folderUnion": "folder has any",
     "found": "found",
     "fuzzy": "fuzzy search",
+    "startWith": "start with search",
     "hidingOffline": "Hiding Offline",
     "invalidRegex": "Invalid RegEx",
     "magic": "folder or video name",

src/app/app.module.ts

@@ -86,6 +86,7 @@ import { FolderArrowsPipe } from './pipes/folder-arrows.pipe';
 import { FolderSizePipe } from './pipes/folder-size.pipe';
 import { FolderViewPipe } from './pipes/folder-view.pipe';
 import { FuzzySearchPipe } from './pipes/fuzzy-search.pipe';
+import { StartWithSearchPipe } from './pipes/start-with-search.pipe';
 import { HideOfflinePipe } from './pipes/hide-offline.pipe';
 import { LengthFilterPipe } from './pipes/length-filter.pipe';
 import { LengthPipe } from './pipes/length.pipe';
@@ -136,6 +137,7 @@ import { YearPipe } from './pipes/year.pipe';
     FolderViewPipe,
     FullViewComponent,
     FuzzySearchPipe,
+    StartWithSearchPipe,
     HideOfflinePipe,
     HomeComponent,
     IconComponent,
@@ -197,7 +199,7 @@ import { YearPipe } from './pipes/year.pipe';
     MatDialogModule,
     MatSnackBarModule,
     TranslateModule.forRoot(),
-    VirtualScrollerModule,
+    VirtualScrollerModule
   ],
   providers: [
     AutoTagsSaveService,

src/app/common/settings-buttons.ts

@@ -24,6 +24,7 @@ export type SettingsButtonKey = 'autoFileTags'
  | 'folderUnion'
  | 'fontSizeLarger'
  | 'fuzzy'
+ | 'startWith'
  | 'hideOffline'
  | 'hideSidebar'
  | 'hideTop'
@@ -106,6 +107,7 @@ export const SettingsButtonsGroups: SettingsButtonKey[][] = [
     'magic',
     'regex',
     'fuzzy',
+    'startWith',
   ],
   [ // 2 - Filters & sorting options
     'durationFilter',
@@ -442,6 +444,14 @@ export const SettingsButtons: SettingsButtonsType = {
     title: 'BUTTONS.fuzzyHint',
     toggled: true
   },
+  startWith: {
+    description: 'BUTTONS.startWithDescription',
+    hidden: false,
+    iconName: 'icon-start-with',
+    moreInfo: 'BUTTONS.startWithMoreInfo',
+    title: 'BUTTONS.startWithHint',
+    toggled: true,
+  },
   'hideOffline': {
     description: 'BUTTONS.hideOfflineDescription',
     hidden: true,

src/app/components/home.component.html

@@ -501,6 +501,36 @@
         </div>
       </div>
 
+       <!-- startWith search -->
+       <div *ngIf="settingsButtons['startWith'].toggled" @filterItemAppear>
+        <app-icon
+          class="input-icon"
+          [icon]="settingsButtons['startWith'].iconName"
+        ></app-icon>
+        <input
+          #startWithSearch
+          (keydown.escape)="startWithSearchString = ''"
+          [(ngModel)]="startWithSearchString"
+          [ngStyle]="{
+            color: settingsButtons['darkMode'].toggled ? 'white' : 'black'
+          }"
+          type="text"
+          class="filter-general input-filter"
+          placeholder="{{ 'SIDEBAR.startWith' | translate }}"
+        />
+
+        <div class="filteredWords">
+          <span
+            *ngIf="startWithSearchString !== ''"
+            (click)="startWithSearchString = ''"
+            [ngStyle]="{ background: '#aaffaa' }"
+            class="search-or-tag-general search-word"
+          >
+            {{ startWithSearchString }}
+          </span>
+        </div>
+      </div>
+
       <!-- durationFilter -->
       <div *ngIf="settingsButtons['durationFilter'].toggled">
 
@@ -729,6 +759,8 @@
 
                 | fuzzySearchPipe : fuzzySearchString
 
+                | startWithSearchPipe : startWithSearchString
+
                 | duplicateFinderPipe : settingsButtons['duplicateLength'].toggled : 'length'
 
                 | duplicateFinderPipe : settingsButtons['duplicateSize'].toggled   : 'size'

src/app/components/home.component.ts

@@ -107,6 +107,7 @@ import {
 export class HomeComponent implements OnInit, AfterViewInit {
 
   @ViewChild('fuzzySearch', { static: false }) fuzzySearch: ElementRef;
+  @ViewChild('startWithSearch', {static:false}) startWithSearch: ElementRef;
   @ViewChild('magicSearch', { static: false }) magicSearch: ElementRef;
   @ViewChild('searchRef',   { static: false }) searchRef:   ElementRef;
 
@@ -282,6 +283,7 @@ export class HomeComponent implements OnInit, AfterViewInit {
   fullPathToCurrentFile = '';
 
   fuzzySearchString = '';
+  startWithSearchString = '';
   magicSearchString = '';
   regexSearchString = '';
   regexError = false; // handle pipe-side-effect BehaviorSubject
@@ -1607,7 +1609,9 @@ export class HomeComponent implements OnInit, AfterViewInit {
     } else if (uniqueKey === 'fuzzy') {
       this.fuzzySearchString = '';
       this.toggleButtonOpposite(uniqueKey);
-
+    } else if (uniqueKey === 'startWith') {
+      this.startWithSearchString = '';
+      this.toggleButtonOpposite(uniqueKey);
       // ======== Other buttons ========================
     } else if (uniqueKey === 'compactView') {
       this.toggleButtonOpposite(uniqueKey);

src/app/components/icon/svg-definitions.component.html

@@ -757,5 +757,43 @@
     <symbol id="icon-heart" viewBox="-3 -3 21 21">
       <path d="M13.91,6.75c-1.17,2.25-4.3,5.31-6.07,6.94c-0.1903,0.1718-0.4797,0.1718-0.67,0C5.39,12.06,2.26,9,1.09,6.75  C-1.48,1.8,5-1.5,7.5,3.45C10-1.5,16.48,1.8,13.91,6.75z"/>
     </symbol>
+
+
+    <symbol id="icon-start-with" viewBox="0 0 15 15">
+      <path
+        d="M 11.18,7.35
+        C 11.38,7.16 11.69,7.16 11.89,7.35
+          11.89,7.35 11.89,7.35 11.89,7.35
+          12.08,7.55 12.08,7.87 11.89,8.06
+          11.89,8.06 9.06,10.89 9.06,10.89
+          8.87,11.08 8.55,11.08 8.35,10.89
+          8.35,10.89 8.35,10.89 8.35,10.89
+          8.16,10.69 8.16,10.38 8.35,10.18
+          8.35,10.18 11.18,7.35 11.18,7.35 Z
+        M 11.89,7.18
+        C 12.08,7.38 12.08,7.69 11.89,7.89
+          11.89,7.89 11.89,7.89 11.89,7.89
+          11.69,8.08 11.38,8.08 11.18,7.89
+          11.18,7.89 8.35,5.06 8.35,5.06
+          8.16,4.87 8.16,4.55 8.35,4.35
+          8.35,4.35 8.35,4.35 8.35,4.35
+          8.55,4.16 8.87,4.16 9.06,4.35
+          9.06,4.35 11.89,7.18 11.89,7.18 Z
+        M 11.02,7.00
+        C 11.29,7.00 11.29,8.00 11.02,8.00
+          11.02,8.00 4.02,8.00 4.02,8.00
+          3.74,8.00 3.74,7.00 4.02,7.00
+          4.02,7.00 11.02,7.00 11.02,7.00 Z
+        M 3.50,3.00
+        C 3.22,3.00 3.00,3.22 3.00,3.50
+          3.00,3.50 3.00,11.50 3.00,11.50
+          3.00,11.78 3.22,12.00 3.50,12.00
+          3.50,12.00 3.50,12.00 3.50,12.00
+          3.78,12.00 4.00,11.78 4.00,11.50
+          4.00,11.50 4.00,3.50 4.00,3.50
+          4.00,3.22 3.78,3.00 3.50,3.00
+          3.50,3.00 3.50,3.00 3.50,3.00 Z"
+      />
+    </symbol>
   </defs>
 </svg>

src/app/pipes/start-with-search.pipe.ts

@@ -0,0 +1,24 @@
+import type { PipeTransform } from "@angular/core";
+import { Pipe } from "@angular/core";
+
+import type { ImageElement } from "../../../interfaces/final-object.interface";
+
+@Pipe({
+  name: "startWithSearchPipe",
+})
+export class StartWithSearchPipe implements PipeTransform {
+  /**
+   * Return only items that names start with search string
+   * @param finalArray
+   * @param searchString  the search string
+   */
+  transform(finalArray: ImageElement[], searchString?: string): ImageElement[] {
+    if (searchString.length > 0) {
+      return finalArray.filter((item) =>
+        item.cleanName.split(" ").find((word) => word.startsWith(searchString))
+      );
+    } else {
+      return finalArray;
+    }
+  }
+}