feat(server): add storage template variable `assetId` (#4555)

* Added assetId as template

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
Signed-off-by: ItalyPaleAle <43508+ItalyPaleAle@users.noreply.github.com>

* styling

* styling

---------

Signed-off-by: ItalyPaleAle <43508+ItalyPaleAle@users.noreply.github.com>
Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

server/src/domain/storage-template/storage-template.service.ts

@@ -191,6 +191,7 @@ export class StorageTemplateService {
       fileCreatedAt: new Date(),
       originalPath: '/upload/test/IMG_123.jpg',
       type: AssetType.IMAGE,
+      id: 'd587e44b-f8c0-4832-9ba3-43268bbf5d4e',
     } as AssetEntity;
     try {
       this.render(this.compile(config.storageTemplate.template), testAsset, 'IMG_123', 'jpg');
@@ -218,6 +219,7 @@ export class StorageTemplateService {
       ext,
       filetype: asset.type == AssetType.IMAGE ? 'IMG' : 'VID',
       filetypefull: asset.type == AssetType.IMAGE ? 'IMAGE' : 'VIDEO',
+      assetId: asset.id,
     };
 
     const systemTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;

server/src/domain/system-config/system-config.constants.ts

@@ -20,6 +20,9 @@ export const supportedPresetTokens = [
   '{{y}}-{{MMMM}}-{{dd}}/{{filename}}',
   '{{y}}/{{y}}-{{MM}}/{{filename}}',
   '{{y}}/{{y}}-{{WW}}/{{filename}}',
+  '{{y}}/{{y}}-{{MM}}-{{dd}}/{{assetId}}',
+  '{{y}}/{{y}}-{{MM}}/{{assetId}}',
+  '{{y}}/{{y}}-{{WW}}/{{assetId}}',
 ];
 
 export const INITIAL_SYSTEM_CONFIG = 'INITIAL_SYSTEM_CONFIG';

server/src/domain/system-config/system-config.service.spec.ts

@@ -239,6 +239,9 @@ describe(SystemConfigService.name, () => {
           '{{y}}-{{MMMM}}-{{dd}}/{{filename}}',
           '{{y}}/{{y}}-{{MM}}/{{filename}}',
           '{{y}}/{{y}}-{{WW}}/{{filename}}',
+          '{{y}}/{{y}}-{{MM}}-{{dd}}/{{assetId}}',
+          '{{y}}/{{y}}-{{MM}}/{{assetId}}',
+          '{{y}}/{{y}}-{{WW}}/{{assetId}}',
         ],
         secondOptions: ['s', 'ss'],
         weekOptions: ['W', 'WW'],

web/src/lib/components/admin-page/settings/storage-template/storage-template-settings.svelte

@@ -56,6 +56,7 @@
       ext: 'jpg',
       filetype: 'IMG',
       filetypefull: 'IMAGE',
+      assetId: 'a8312960-e277-447d-b4ea-56717ccba856',
     };
 
     const dt = luxon.DateTime.fromISO(new Date('2022-02-03T04:56:05.250').toISOString());
@@ -151,35 +152,36 @@
         <SupportedVariablesPanel />
       </section>
 
-      <div class="mt-4 flex flex-col">
+      <div class="flex flex-col mt-4">
         <h3 class="text-base font-medium text-immich-primary dark:text-immich-dark-primary">Template</h3>
 
-        <div class="my-2 text-xs">
+        <div class="my-2 text-sm">
           <h4>PREVIEW</h4>
         </div>
 
-        <p class="text-xs">
+        <p class="text-sm">
           Approximately path length limit : <span
             class="font-semibold text-immich-primary dark:text-immich-dark-primary"
             >{parsedTemplate().length + user.id.length + 'UPLOAD_LOCATION'.length}</span
           >/260
         </p>
 
-        <p class="text-xs">
-          <code>{user.storageLabel || user.id}</code> is the user's Storage Label
+        <p class="text-sm">
+          <code class="text-immich-primary dark:text-immich-dark-primary">{user.storageLabel || user.id}</code> is the user's
+          Storage Label
         </p>
 
-        <p class="mt-2 rounded-lg bg-gray-200 p-4 py-2 text-xs dark:bg-gray-700 dark:text-immich-dark-fg">
+        <p class="p-4 py-2 mt-2 text-xs bg-gray-200 rounded-lg dark:bg-gray-700 dark:text-immich-dark-fg">
           <span class="text-immich-fg/25 dark:text-immich-dark-fg/50"
             >UPLOAD_LOCATION/{user.storageLabel || user.id}</span
           >/{parsedTemplate()}.jpg
         </p>
 
         <form autocomplete="off" class="flex flex-col" on:submit|preventDefault>
-          <div class="my-2 flex flex-col">
-            <label class="text-xs" for="preset-select">PRESET</label>
+          <div class="flex flex-col my-2">
+            <label class="text-sm" for="preset-select">PRESET</label>
             <select
-              class="mt-2 rounded-lg bg-slate-200 p-2 text-sm hover:cursor-pointer dark:bg-gray-600"
+              class="p-2 mt-2 text-sm rounded-lg bg-slate-200 hover:cursor-pointer dark:bg-gray-600"
               {disabled}
               name="presets"
               id="preset-select"

web/src/lib/components/admin-page/settings/storage-template/supported-datetime-panel.svelte

@@ -9,7 +9,7 @@
   };
 </script>
 
-<div class="mt-2 text-xs">
+<div class="mt-2 text-sm">
   <h4>DATE & TIME</h4>
 </div>
 

web/src/lib/components/admin-page/settings/storage-template/supported-variables-panel.svelte

@@ -1,8 +1,8 @@
-<div class="mt-4 text-xs">
+<div class="mt-4 text-sm">
   <h4>OTHER VARIABLES</h4>
 </div>
 
-<div class="mt-2 rounded-lg bg-gray-200 p-4 text-xs dark:bg-gray-700 dark:text-immich-dark-fg">
+<div class="p-4 mt-2 text-xs bg-gray-200 rounded-lg dark:bg-gray-700 dark:text-immich-dark-fg">
   <div class="flex gap-[50px]">
     <div>
       <p class="font-medium text-immich-primary dark:text-immich-dark-primary">FILE NAME</p>
@@ -25,5 +25,12 @@
         <li>{`{{filetypefull}}`} - VIDEO or IMAGE</li>
       </ul>
     </div>
+
+    <div>
+      <p class="font-medium text-immich-primary dark:text-immich-dark-primary">FILE TYPE</p>
+      <ul>
+        <li>{`{{assetId}}`} - Asset ID</li>
+      </ul>
+    </div>
   </div>
 </div>