#198 - Additional media sort options

CHANGELOG.md

@@ -7,6 +7,7 @@
 - Added default field value for content type fields
 - HMR support for panel webview development
 - [#197](https://github.com/estruyf/vscode-front-matter/issues/197): Support for multi-dimensional content type fields on content creation and editing.
+- [#198](https://github.com/estruyf/vscode-front-matter/issues/198): Additional media sort options (alt, caption, and size).
 
 ## [5.10.0] - 2022-01-10
 

src/dashboardWebView/components/Header/Sorting.tsx

@@ -10,6 +10,7 @@ import { NavigationType } from '../../models';
 import { SortingOption } from '../../models/SortingOption';
 import { SearchSelector, SettingsSelector, SortingAtom } from '../../state';
 import { MenuButton, MenuItem, MenuItems } from '../Menu';
+import { Sorting as SortingHelpers } from '../../../helpers/Sorting';
 
 export interface ISortingProps {
   disableCustomSorting?: boolean;
@@ -23,6 +24,15 @@ export const sortOptions: SortingOption[] = [
   { name: "By filename (desc)", id: SortOption.FileNameDesc, order: SortOrder.desc, type: SortType.string },
 ];
 
+const mediaSortOptions: SortingOption[] = [
+  { name: "Size (asc)", id: SortOption.SizeAsc, order: SortOrder.asc, type: SortType.number },
+  { name: "Size (desc)", id: SortOption.SizeDesc, order: SortOrder.desc, type: SortType.number },
+  { name: "Caption (asc)", id: SortOption.CaptionAsc, order: SortOrder.asc, type: SortType.string },
+  { name: "Caption (desc)", id: SortOption.CaptionDesc, order: SortOrder.desc, type: SortType.string },
+  { name: "Alt (asc)", id: SortOption.AltAsc, order: SortOrder.asc, type: SortType.string },
+  { name: "Alt (desc)", id: SortOption.AltDesc, order: SortOrder.desc, type: SortType.string },
+];
+
 export const Sorting: React.FunctionComponent<ISortingProps> = ({disableCustomSorting, view}: React.PropsWithChildren<ISortingProps>) => {
   const [ crntSorting, setCrntSorting ] = useRecoilState(SortingAtom);
   const searchValue = useRecoilValue(SearchSelector);
@@ -38,6 +48,13 @@ export const Sorting: React.FunctionComponent<ISortingProps> = ({disableCustomSo
   };
 
   let allOptions = [...sortOptions];
+
+  if (view === NavigationType.Media) {
+    allOptions = [...allOptions, ...mediaSortOptions];
+  }
+
+  allOptions = allOptions.sort(SortingHelpers.alphabetically("name"))
+
   if (settings?.customSorting && !disableCustomSorting) {
     allOptions = [...allOptions, ...settings.customSorting.map((s) => ({ 
       title: s.title || s.name, 
@@ -72,7 +89,7 @@ export const Sorting: React.FunctionComponent<ISortingProps> = ({disableCustomSo
       <Menu as="div" className="relative z-10 inline-block text-left">
         <MenuButton label={`Sort by`} title={crntSort?.title || crntSort?.name || ""} disabled={!!searchValue} />
 
-        <MenuItems>
+        <MenuItems widthClass="w-48">
           {allOptions.map((option) => (
             <MenuItem 
               key={option.id}

src/dashboardWebView/constants/SortOption.ts

@@ -2,5 +2,11 @@ export enum SortOption {
   LastModifiedAsc = "LastModifiedAsc",
   LastModifiedDesc = "LastModifiedDesc",
   FileNameAsc = "FileNameAsc",
-  FileNameDesc = "FileNameDesc"
+  FileNameDesc = "FileNameDesc",
+  SizeAsc = "SizeAsc",
+  SizeDesc = "SizeDesc",
+  CaptionAsc = "CaptionAsc",
+  CaptionDesc = "CaptionDesc",
+  AltAsc = "AltAsc",
+  AltDesc = "AltDesc",
 }

src/helpers/MediaHelpers.ts

@@ -10,6 +10,7 @@ import { commands, Uri, workspace, window, Position } from "vscode";
 import imageSize from "image-size";
 import { EditorHelper } from "@estruyf/vscode";
 import { ExplorerView } from "../explorerView/ExplorerView";
+import { SortOption } from "../dashboardWebView/constants/SortOption";
 
 
 export class MediaHelpers {
@@ -91,20 +92,7 @@ export class MediaHelpers {
       }
     }
 
-    if (crntSort?.type === SortType.string) {
-      allMedia = allMedia.sort(Sorting.alphabetically("fsPath"));
-    } else if (crntSort?.type === SortType.date) {
-      allMedia = allMedia.sort(Sorting.dateWithFallback("mtime", "fsPath"));
-    } else {
-      allMedia = allMedia.sort(Sorting.alphabetically("fsPath"));
-    }
-
-    if (crntSort?.order === SortOrder.desc) {
-      allMedia = allMedia.reverse();
-    }
-
     MediaHelpers.media = Object.assign([], allMedia);
-
     let files: MediaInfo[] = MediaHelpers.media;
 
     // Retrieve the total after filtering and before the slicing happens
@@ -126,6 +114,27 @@ export class MediaHelpers {
     });
     files = files.filter(f => f.mtime !== undefined);
 
+    // Sort the files
+    if (crntSort?.type === SortType.string) {
+      if (crntSort.id === SortOption.AltAsc || crntSort.id === SortOption.AltDesc) {
+        files = files.sort(Sorting.alphabetically("alt"));
+      } else if (crntSort.id === SortOption.CaptionAsc || crntSort.id === SortOption.CaptionDesc) {
+        files = files.sort(Sorting.alphabetically("caption"));
+      } else {
+        files = files.sort(Sorting.alphabetically("fsPath"));
+      }
+    } else if (crntSort?.type === SortType.number && (crntSort?.id === SortOption.SizeAsc || crntSort?.id === SortOption.SizeDesc)) {
+      files = files.sort(Sorting.numerically("size"));
+    } else if (crntSort?.type === SortType.date) {
+      files = files.sort(Sorting.dateWithFallback("mtime", "fsPath"));
+    } else {
+      files = files.sort(Sorting.alphabetically("fsPath"));
+    }
+
+    if (crntSort?.order === SortOrder.desc) {
+      files = files.reverse();
+    }
+
     // Retrieve all the folders
     let allContentFolders: string[] = [];
     let allFolders: string[] = [];

src/helpers/Sorting.ts

@@ -20,6 +20,17 @@ export class Sorting {
     };
   };
 
+  /**
+   * Sort field value numerically
+   * @param property 
+   * @returns 
+   */
+  public static numerically = (property: string) => {
+    return (a: any, b: any) => {
+      return a[property] - b[property];
+    };
+  }
+
   /**
    * Sort by date
    * @param property 

src/models/SortType.ts

@@ -1,4 +1,5 @@
 export enum SortType {
   string = 'string',
+  number = 'number',
   date = 'date'
 }