sort assets, show date

FrameOS · Oct 7, 2024 · 679a55c · 679a55c
1 parent 03d5dba
commit 679a55c
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 7 deletions.
diff --git a/frontend/src/scenes/frame/panels/Assets/Assets.tsx b/frontend/src/scenes/frame/panels/Assets/Assets.tsx
@@ -17,21 +17,51 @@ function humaniseSize(size: number) {
 
 export function Assets(): JSX.Element {
   const { frame } = useValues(frameLogic)
-  const { assetsLoading, cleanedAssets } = useValues(assetsLogic({ frameId: frame.id }))
+  const { assetsLoading, cleanedAssets, sortKey } = useValues(assetsLogic({ frameId: frame.id }))
+  const { setSortKey } = useActions(assetsLogic({ frameId: frame.id }))
   const { openAsset } = useActions(panelsLogic({ frameId: frame.id }))
   return (
     <div className="space-y-2">
       {assetsLoading ? (
         <div>Loading assets...</div>
       ) : (
         <table className="w-full">
+          <thead>
+            <tr className="bg-gray-900">
+              <th
+                onClick={() => setSortKey(sortKey === 'path' ? '-path' : 'path')}
+                className="cursor-pointer hover:underline"
+              >
+                Path
+                {sortKey === 'path' ? ' ▲' : sortKey === '-path' ? ' ▼' : ''}
+              </th>
+              <th
+                onClick={() => setSortKey(sortKey === 'size' ? '-size' : 'size')}
+                className="cursor-pointer hover:underline"
+              >
+                Size
+                {sortKey === 'size' ? ' ▲' : sortKey === '-size' ? ' ▼' : ''}
+              </th>
+              <th
+                onClick={() => setSortKey(sortKey === 'mtime' ? '-mtime' : 'mtime')}
+                className="cursor-pointer hover:underline"
+              >
+                Date
+                {sortKey === 'mtime' ? ' ▲' : sortKey === '-mtime' ? ' ▼' : ''}
+              </th>
+              <th>&nbsp;</th>
+            </tr>
+          </thead>
           <tbody>
             {cleanedAssets.map((asset) => (
               <tr key={asset.path} className="even:bg-gray-700 hover:bg-gray-900">
                 <td onClick={() => openAsset(asset.path)} className="hover:underline cursor-pointer">
                   {asset.path}
                 </td>
                 <td className="text-nowrap">{humaniseSize(asset.size)}</td>
+                <td title={new Date(asset.mtime * 1000).toLocaleString()}>
+                  {new Date(asset.mtime * 1000).toLocaleString()}
+                </td>
                 <td>
                   <a href={`/api/frames/${frame.id}/asset?path=${encodeURIComponent(asset.path)}`} download>
                     <CloudArrowDownIcon className="w-5 h-5" />

diff --git a/frontend/src/scenes/frame/panels/Assets/assetsLogic.ts b/frontend/src/scenes/frame/panels/Assets/assetsLogic.ts
@@ -16,6 +16,17 @@ export const assetsLogic = kea<assetsLogicType>([
   props({} as AssetsLogicProps),
   connect(({ frameId }: AssetsLogicProps) => ({ logic: [socketLogic], values: [frameLogic({ frameId }), ['frame']] })),
   key((props) => props.frameId),
+  actions({
+    setSortKey: (sortKey: string) => ({ sortKey }),
+  }),
+  reducers({
+    sortKey: [
+      'path',
+      {
+        setSortKey: (_, { sortKey }) => sortKey,
+      },
+    ],
+  }),
   loaders(({ props }) => ({
     assets: [
       [] as AssetType[],
@@ -38,13 +49,29 @@ export const assetsLogic = kea<assetsLogicType>([
   })),
   selectors({
     cleanedAssets: [
-      (s) => [s.assets, s.frame],
-      (assets, frame) => {
+      (s) => [s.assets, s.frame, s.sortKey],
+      (assets, frame, sortKey) => {
         const assetsPath = frame.assets_path ?? '/srv/assets'
-        return assets.map((asset) => ({
+        const cleanedAssets = assets.map((asset) => ({
           ...asset,
-          path: asset.path.startsWith(assetsPath + '/') ? asset.path.substring(assetsPath.length + 1) : asset.path,
+          path: asset.path.startsWith(assetsPath + '/') ? '.' + asset.path.substring(assetsPath.length) : asset.path,
         }))
+        const sorter: (a: any, b: any) => number =
+          sortKey === 'path'
+            ? (a, b) => a.path.localeCompare(b.path)
+            : sortKey === '-path'
+            ? (a, b) => b.path.localeCompare(a.path)
+            : sortKey === 'size'
+            ? (a, b) => a.size - b.size
+            : sortKey === '-size'
+            ? (a, b) => b.size - a.size
+            : sortKey === 'mtime'
+            ? (a, b) => a.mtime - b.mtime
+            : sortKey === '-mtime'
+            ? (a, b) => b.mtime - a.mtime
+            : () => 0
+        cleanedAssets.sort(sorter)
+        return cleanedAssets
       },
     ],
   }),

diff --git a/frontend/src/scenes/frame/panels/panelsLogic.ts b/frontend/src/scenes/frame/panels/panelsLogic.ts
@@ -144,9 +144,13 @@ export const panelsLogic = kea<panelsLogicType>([
         }),
         openAsset: (state, { path }) => ({
           ...state,
-          [Area.TopLeft]: state[Area.TopLeft].find((a) => a.panel === Panel.Asset && a.key === path)
+          [Area.TopLeft]: state[Area.TopLeft].find((a) => a.panel === Panel.Asset)
             ? state[Area.TopLeft].map((a) =>
-                a.key === path ? { ...a, active: true } : a.active ? { ...a, active: false } : a
+                a.panel === Panel.Asset
+                  ? { ...a, metadata: { path }, active: true }
+                  : a.active
+                  ? { ...a, active: false }
+                  : a
               )
             : [
                 ...state[Area.TopLeft].map((a) => ({ ...a, active: false })),