feat: simplify web code

server/src/domain/metadata/metadata.service.ts

@@ -280,7 +280,7 @@ export class MetadataService {
       await this.assetRepository.save({ id, sidecarPath });
     }
 
-    await this.jobRepository.queue({ name: JobName.METADATA_EXTRACTION, data: { id: id } });
+    await this.jobRepository.queue({ name: JobName.METADATA_EXTRACTION, data: { id } });
 
     return true;
   }

web/src/lib/components/asset-viewer/detail-panel.svelte

@@ -28,6 +28,7 @@
   import Map from '../shared-components/map/map.svelte';
   import { AppRoute } from '$lib/constants';
   import ChangeLocation from '../shared-components/change-location.svelte';
+  import { handleError } from '../../utils/handle-error';
 
   export let asset: AssetResponseDto;
   export let albums: AlbumResponseDto[] = [];
@@ -86,9 +87,7 @@
     try {
       await api.assetApi.updateAsset({
         id: asset.id,
-        updateAssetDto: {
+        updateAssetDto: { description },
-          description: description,
-        },
       });
     } catch (error) {
       console.error(error);
@@ -100,40 +99,36 @@
 
   let isShowChangeDate = false;
 
-  async function handleConfirmChangeDate(event: CustomEvent<string>) {
+  async function handleConfirmChangeDate(dateTimeOriginal: string) {
     isShowChangeDate = false;
     if (asset.exifInfo) {
-      asset.exifInfo.dateTimeOriginal = event.detail;
+      asset.exifInfo.dateTimeOriginal = dateTimeOriginal;
     }
+
     try {
-      await api.assetApi.updateAsset({
+      await api.assetApi.updateAsset({ id: asset.id, updateAssetDto: { dateTimeOriginal } });
-        id: asset.id,
-        updateAssetDto: {
-          dateTimeOriginal: event.detail,
-        },
-      });
       notificationController.show({ message: 'Metadata updated please reload to apply', type: NotificationType.Info });
     } catch (error) {
-      console.error(error);
+      handleError(error, 'Unable to change date');
     }
   }
 
   let isShowChangeLocation = false;
 
-  async function handleConfirmChangeLocation(event: CustomEvent<{ lng: number; lat: number }>) {
+  async function handleConfirmChangeLocation(gps: { lng: number; lat: number }) {
     isShowChangeLocation = false;
 
     try {
       await api.assetApi.updateAsset({
         id: asset.id,
         updateAssetDto: {
-          latitude: event.detail.lat,
+          latitude: gps.lat,
-          longitude: event.detail.lng,
+          longitude: gps.lng,
         },
       });
       notificationController.show({ message: 'Metadata updated please reload to apply', type: NotificationType.Info });
     } catch (error) {
-      console.error(error);
+      handleError(error, 'Unable to change location');
     }
   }
 </script>
@@ -307,34 +302,16 @@
     {/if}
 
     {#if isShowChangeDate}
-      {#if asset.exifInfo?.dateTimeOriginal}
+      {@const assetDateTimeOriginal = asset.exifInfo?.dateTimeOriginal
-        {@const assetDateTimeOriginal = DateTime.fromISO(asset.exifInfo.dateTimeOriginal, {
+        ? DateTime.fromISO(asset.exifInfo.dateTimeOriginal, {
-          zone: asset.exifInfo.timeZone ?? undefined,
+            zone: asset.exifInfo.timeZone ?? undefined,
-        })}
+          })
-        <ChangeDate
+        : DateTime.now()}
-          title="Change Date"
+      <ChangeDate
-          confirmText="Confirm"
+        initialDate={assetDateTimeOriginal}
-          initialDate={assetDateTimeOriginal}
+        on:confirm={({ detail: date }) => handleConfirmChangeDate(date)}
-          on:confirm={handleConfirmChangeDate}
+        on:cancel={() => (isShowChangeDate = false)}
-          on:cancel={() => (isShowChangeDate = false)}
+      />
-        >
-          <svelte:fragment slot="prompt">
-            <p>Please select a new date:</p>
-          </svelte:fragment>
-        </ChangeDate>
-      {:else}
-        <ChangeDate
-          title="Change Date"
-          confirmText="Confirm"
-          initialDate={DateTime.now()}
-          on:confirm={handleConfirmChangeDate}
-          on:cancel={() => (isShowChangeDate = false)}
-        >
-          <svelte:fragment slot="prompt">
-            <p>Please select a new date:</p>
-          </svelte:fragment>
-        </ChangeDate>
-      {/if}
     {/if}
 
     {#if asset.exifInfo?.fileSizeInByte}
@@ -453,29 +430,11 @@
       </div>
     {/if}
     {#if isShowChangeLocation}
-      {#if latlng}
+      <ChangeLocation
-        <ChangeLocation
+        {asset}
-          confirmText="Confirm"
+        on:confirm={({ detail: gps }) => handleConfirmChangeLocation(gps)}
-          location={latlng}
+        on:cancel={() => (isShowChangeLocation = false)}
-          id_asset={asset.id}
+      />
-          on:confirm={handleConfirmChangeLocation}
-          on:cancel={() => (isShowChangeLocation = false)}
-        >
-          <svelte:fragment slot="prompt">
-            <p>Please select a new location:</p>
-          </svelte:fragment>
-        </ChangeLocation>
-      {:else}
-        <ChangeLocation
-          confirmText="Confirm"
-          on:confirm={handleConfirmChangeLocation}
-          on:cancel={() => (isShowChangeLocation = false)}
-        >
-          <svelte:fragment slot="prompt">
-            <p>Please select a new location:</p>
-          </svelte:fragment>
-        </ChangeLocation>
-      {/if}
     {/if}
   </div>
 </section>

web/src/lib/components/elements/buttons/link-button.svelte

@@ -7,8 +7,9 @@
 
   export let color: Color = 'transparent-gray';
   export let disabled = false;
+  export let fullwidth = false;
 </script>
 
-<Button size="link" {color} shadow={false} rounded="lg" {disabled} on:click>
+<Button size="link" {color} shadow={false} rounded="lg" {disabled} on:click {fullwidth}>
   <slot />
 </Button>

web/src/lib/components/elements/dropdown.svelte

@@ -60,7 +60,7 @@
 
 <div id="dropdown-button" use:clickOutside on:outclick={handleClickOutside} on:escape={handleClickOutside}>
   <!-- BUTTON TITLE -->
-  <LinkButton on:click={() => (showMenu = true)}>
+  <LinkButton on:click={() => (showMenu = true)} fullwidth>
     <div class="flex place-items-center gap-2 text-sm">
       {#if renderedSelectedOption?.icon}
         <Icon path={renderedSelectedOption.icon} size="18" />
@@ -72,13 +72,13 @@
   <!-- DROP DOWN MENU -->
   {#if showMenu}
     <div
-      transition:fly={{ y: -30, x: 30, duration: 200 }}
+      transition:fly={{ y: -30, x: 30, duration: 100 }}
-      class="text-md absolute right-0 top-5 z-50 flex min-w-[250px] flex-col rounded-2xl bg-gray-100 py-4 text-black shadow-lg dark:bg-gray-700 dark:text-white"
+      class="text-md fixed z-50 flex min-w-[250px] max-h-[70vh] overflow-y-scroll immich-scrollbar flex-col rounded-2xl bg-gray-100 py-2 text-black shadow-lg dark:bg-gray-700 dark:text-white"
     >
       {#each options as option (option)}
         {@const renderedOption = renderOption(option)}
         <button
-          class="grid grid-cols-[20px,1fr] place-items-center gap-2 p-4 transition-all hover:bg-gray-300 dark:hover:bg-gray-800"
+          class="grid grid-cols-[20px,1fr] place-items-center p-2 transition-all hover:bg-gray-300 dark:hover:bg-gray-800"
           on:click={() => handleSelectOption(option)}
         >
           {#if _.isEqual(selectedOption, option)}

web/src/lib/components/photos-page/actions/change-date.svelte

@@ -1,21 +1,20 @@
 <script lang="ts">
-  import { api } from '@api';
+  import ChangeDate from '$lib/components/shared-components/change-date.svelte';
   import {
     notificationController,
     NotificationType,
   } from '$lib/components/shared-components/notification/notification';
+  import { handleError } from '$lib/utils/handle-error';
+  import { api } from '@api';
+  import { DateTime } from 'luxon';
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
-  import { featureFlags } from '$lib/stores/server-config.store';
-  import ChangeDate from '$lib/components/shared-components/change-date.svelte';
-  import { DateTime } from 'luxon';
-  export let force = !$featureFlags.trash;
   export let menuItem = false;
   const { clearSelect, getOwnedAssets } = getAssetControlContext();
 
   let isShowChangeDate = false;
 
-  async function handleConfirmChangeDate(event: CustomEvent<string>) {
+  const handleConfirm = async (dateTimeOriginal: string) => {
     isShowChangeDate = false;
     const ids = Array.from(getOwnedAssets())
       .filter((a) => !a.isExternal)
@@ -23,32 +22,23 @@
 
     try {
       await api.assetApi.updateAssets({
-        assetBulkUpdateDto: {
+        assetBulkUpdateDto: { ids, dateTimeOriginal },
-          ids: ids,
-          dateTimeOriginal: event.detail,
-        },
       });
       notificationController.show({ message: 'Metadata updated please reload to apply', type: NotificationType.Info });
     } catch (error) {
-      console.error(error);
+      handleError(error, 'Unable to change date');
     }
     clearSelect();
-  }
+  };
 </script>
 
 {#if menuItem}
-  <MenuOption text={force ? 'Change date' : 'Change date'} on:click={() => (isShowChangeDate = true)} />
+  <MenuOption text="Change date" on:click={() => (isShowChangeDate = true)} />
 {/if}
 {#if isShowChangeDate}
   <ChangeDate
-    title="Change Date"
-    confirmText="Confirm"
     initialDate={DateTime.now()}
-    on:confirm={handleConfirmChangeDate}
+    on:confirm={({ detail: date }) => handleConfirm(date)}
     on:cancel={() => (isShowChangeDate = false)}
-  >
+  />
-    <svelte:fragment slot="prompt">
-      <p>Please select a new date:</p>
-    </svelte:fragment>
-  </ChangeDate>
 {/if}

web/src/lib/components/photos-page/actions/change-location.svelte

@@ -6,16 +6,15 @@
   } from '$lib/components/shared-components/notification/notification';
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
-  import { featureFlags } from '$lib/stores/server-config.store';
   import ChangeLocation from '$lib/components/shared-components/change-location.svelte';
+  import { handleError } from '../../../utils/handle-error';
 
-  export let force = !$featureFlags.trash;
   export let menuItem = false;
   const { clearSelect, getOwnedAssets } = getAssetControlContext();
 
   let isShowChangeLocation = false;
 
-  async function handleConfirmChangeLocation(event: CustomEvent<{ lng: number; lat: number }>) {
+  async function handleConfirm(point: { lng: number; lat: number }) {
     isShowChangeLocation = false;
     const ids = Array.from(getOwnedAssets())
       .filter((a) => !a.isExternal)
@@ -24,30 +23,25 @@
     try {
       await api.assetApi.updateAssets({
         assetBulkUpdateDto: {
-          ids: ids,
+          ids,
-          latitude: event.detail.lat,
+          latitude: point.lat,
-          longitude: event.detail.lng,
+          longitude: point.lng,
         },
       });
       notificationController.show({ message: 'Metadata updated please reload to apply', type: NotificationType.Info });
     } catch (error) {
-      console.error(error);
+      handleError(error, 'Unable to update location');
     }
     clearSelect();
   }
 </script>
 
 {#if menuItem}
-  <MenuOption text={force ? 'Change location' : 'Change location'} on:click={() => (isShowChangeLocation = true)} />
+  <MenuOption text="Change location" on:click={() => (isShowChangeLocation = true)} />
 {/if}
 {#if isShowChangeLocation}
   <ChangeLocation
-    confirmText="Confirm"
+    on:confirm={({ detail: point }) => handleConfirm(point)}
-    on:confirm={handleConfirmChangeLocation}
     on:cancel={() => (isShowChangeLocation = false)}
-  >
+  />
-    <svelte:fragment slot="prompt">
-      <p>Please select a new location:</p>
-    </svelte:fragment>
-  </ChangeLocation>
 {/if}

web/src/lib/components/shared-components/change-date.svelte

@@ -1,129 +1,74 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
-  import FullScreenModal from './full-screen-modal.svelte';
-  import Button from '../elements/buttons/button.svelte';
-  import type { Color } from '$lib/components/elements/buttons/button.svelte';
   import { DateTime } from 'luxon';
-  export let title = 'Change Date';
+  import ConfirmDialogue from './confirm-dialogue.svelte';
-  export let prompt = 'Please select a new date:';
+  import Dropdown from '../elements/dropdown.svelte';
-  export let confirmText = 'Confirm';
-  export let confirmColor: Color = 'primary';
-  export let cancelText = 'Cancel';
-  export let cancelColor: Color = 'secondary';
-  export let hideCancelButton = false;
   export let initialDate: DateTime = DateTime.now();
 
-  let selectedDate: string;
+  interface ZoneOption {
-  let selectedTimezone: string | null;
+    zone: string;
+    offset: string;
+  }
 
-  let timezones = [
+  const timezones: ZoneOption[] = (Intl as any)
-    '',
+    .supportedValuesOf('timeZone')
-    'UTC-12:00',
+    .map((zone: string) => ({ zone, offset: 'UTC' + DateTime.local({ zone }).toFormat('ZZ') }));
-    'UTC-11:00',
-    'UTC-10:00',
-    'UTC-09:30',
-    'UTC-09:00',
-    'UTC-08:00',
-    'UTC-07:00',
-    'UTC-06:00',
-    'UTC-05:00',
-    'UTC-04:00',
-    'UTC-03:30',
-    'UTC-03:00',
-    'UTC-02:00',
-    'UTC-01:00',
-    'UTC+00:00',
-    'UTC+01:00',
-    'UTC+02:00',
-    'UTC+03:00',
-    'UTC+03:30',
-    'UTC+04:00',
-    'UTC+04:30',
-    'UTC+05:00',
-    'UTC+05:30',
-    'UTC+05:45',
-    'UTC+06:00',
-    'UTC+06:30',
-    'UTC+07:00',
-    'UTC+08:00',
-    'UTC+08:45',
-    'UTC+09:00',
-    'UTC+09:30',
-    'UTC+10:00',
-    'UTC+10:30',
-    'UTC+11:00',
-    'UTC+12:00',
-    'UTC+12:45',
-    'UTC+13:00',
-    'UTC+14:00',
-  ];
 
-  selectedDate = initialDate.toFormat("yyyy-MM-dd'T'HH:mm");
+  const initialOption = timezones.find((item) => item.offset === 'UTC' + initialDate.toFormat('ZZ'));
-  selectedTimezone = 'UTC' + initialDate.toFormat('ZZ');
 
-  const dispatch = createEventDispatcher();
+  let selectedDate = initialDate.toFormat("yyyy-MM-dd'T'HH:mm");
+  let selectedTimezone = initialOption?.offset || null;
+  let disabled = false;
 
-  let isConfirmButtonDisabled = false;
+  const dispatch = createEventDispatcher<{
+    cancel: void;
+    confirm: string;
+  }>();
 
+  const handleSelect = (item: ZoneOption) => (selectedTimezone = item.offset);
   const handleCancel = () => dispatch('cancel');
-  const handleEscape = () => {
-    if (!isConfirmButtonDisabled) {
-      dispatch('cancel');
-    }
-  };
-
   const handleConfirm = () => {
     let date = DateTime.fromISO(selectedDate);
     if (selectedTimezone != null) {
       date = date.setZone(selectedTimezone);
     }
 
-    isConfirmButtonDisabled = true;
+    const value = date.toISO();
-    dispatch('confirm', date.toISO());
+    if (value) {
+      disabled = true;
+      dispatch('confirm', value);
+    }
   };
 </script>
 
-<FullScreenModal on:clickOutside={handleCancel} on:escape={() => handleEscape()}>
+<ConfirmDialogue
-  <div
+  confirmColor="primary"
-    class="w-[500px] max-w-[95vw] rounded-3xl border bg-immich-bg p-4 py-8 shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
+  cancelColor="secondary"
-  >
+  title="Change Date"
-    <div
+  prompt="Please select a new date:"
-      class="flex flex-col place-content-center place-items-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
+  {disabled}
-    >
+  on:confirm={handleConfirm}
-      <h1 class="pb-2 text-2xl font-medium text-immich-primary dark:text-immich-dark-primary">
+  on:cancel={handleCancel}
-        {title}
+>
-      </h1>
+  <div class="flex flex-col text-md px-4 py-5 text-center gap-2" slot="prompt">
+    <div class="mt-2" />
+    <div class="flex flex-col">
+      <label for="datetime">Date and Time</label>
+      <input
+        class="immich-form-label text-sm mt-2 w-full text-black"
+        id="datetime"
+        type="datetime-local"
+        bind:value={selectedDate}
+      />
     </div>
-    <div>
+    <div class="flex flex-col w-full">
-      <div class="text-md px-4 py-5 text-center">
+      <label for="timezone">Timezone</label>
-        <slot name="prompt">
+      <Dropdown
-          <p>{prompt}</p>
+        selectedOption={initialOption}
-        </slot>
+        options={timezones}
-        <div class="mt-2" />
+        render={(item) => (item ? `${item.zone} (${item.offset})` : '(not selected)')}
-        <div class="flex flex-col">
+        on:select={({ detail: item }) => handleSelect(item)}
-          <label for="datetime">Date and Time</label>
+      />
-          <input id="datetime" type="datetime-local" bind:value={selectedDate} class="mt-2 w-full text-black" />
-        </div>
-        <div class="flex flex-col">
-          <label for="timezone">Timezone</label>
-          <select id="timezone" bind:value={selectedTimezone} class="mt-2 w-full text-black">
-            {#each timezones as timezone}
-              <option value={timezone}>{timezone || 'Choose a timezone'}</option>
-            {/each}
-          </select>
-        </div>
-      </div>
-
-      <div class="mt-4 flex w-full gap-4 px-4">
-        {#if !hideCancelButton}
-          <Button color={cancelColor} fullwidth on:click={handleCancel}>
-            {cancelText}
-          </Button>
-        {/if}
-        <Button color={confirmColor} fullwidth on:click={handleConfirm} disabled={isConfirmButtonDisabled}>
-          {confirmText}
-        </Button>
-      </div>
     </div>
   </div>
-</FullScreenModal>
+</ConfirmDialogue>

web/src/lib/components/shared-components/change-location.svelte

@@ -1,85 +1,58 @@
 <script lang="ts">
+  import type { AssetResponseDto } from '@api';
   import { createEventDispatcher } from 'svelte';
-  import FullScreenModal from './full-screen-modal.svelte';
+  import ConfirmDialogue from './confirm-dialogue.svelte';
-  import Button from '../elements/buttons/button.svelte';
-  import type { Color } from '$lib/components/elements/buttons/button.svelte';
   import Map from './map/map.svelte';
   export const title = 'Change Location';
-  export let prompt = 'Please select a new date:';
+  export let asset: AssetResponseDto | undefined = undefined;
-  export let confirmText = 'Confirm';
-  export let confirmColor: Color = 'primary';
-  export let cancelText = 'Cancel';
-  export let cancelColor: Color = 'secondary';
-  export let hideCancelButton = false;
-  export let location: { lng: number; lat: number } = { lng: 0, lat: 0 };
-  export let id_asset: string | null = null;
-  const dispatch = createEventDispatcher();
 
-  let isConfirmButtonDisabled = false;
+  interface Point {
+    lng: number;
+    lat: number;
+  }
 
-  const originalLat = location.lat;
+  const dispatch = createEventDispatcher<{
-  const originalLng = location.lng;
+    cancel: void;
+    confirm: Point;
+  }>();
+
+  $: lat = asset?.exifInfo?.latitude || 0;
+  $: lng = asset?.exifInfo?.longitude || 0;
+  $: zoom = lat && lng ? 15 : 1;
+
+  let point: Point | null = null;
 
   const handleCancel = () => dispatch('cancel');
-  const handleEscape = () => {
+
-    if (!isConfirmButtonDisabled) {
+  const handleSelect = (selected: Point) => {
-      dispatch('cancel');
+    point = selected;
-    }
   };
 
   const handleConfirm = () => {
-    dispatch('confirm', location);
+    dispatch('confirm', { lat, lng });
   };
 </script>
 
-<FullScreenModal on:clickOutside={handleCancel} on:escape={() => handleEscape()}>
+<ConfirmDialogue
-  <div
+  confirmColor="primary"
-    class="w-[500px] max-w-[95vw] rounded-3xl border bg-immich-bg p-4 py-8 shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
+  cancelColor="secondary"
-  >
+  title="Change Location"
-    <div
+  prompt="Please select a new location:"
-      class="flex flex-col place-content-center place-items-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
+  disabled={!point}
-    />
+  on:confirm={handleConfirm}
-    <div>
+  on:cancel={handleCancel}
-      <div class="text-md px-4 py-5 text-center">
+>
-        <slot name="prompt">
+  <div slot="prompt" class="flex flex-col w-full h-full gap-2">
-          <p>{prompt}</p>
+    <label for="datetime">Pick a location</label>
-        </slot>
+    <div class="h-[350px] min-h-[300px] w-full">
-        <div class="mt-2" />
+      <Map
-        <div class="flex flex-col">
+        mapMarkers={lat && lng && asset ? [{ id: asset.id, lat, lon: lng }] : []}
-          <label for="datetime">Pick a location</label>
+        {zoom}
-        </div>
+        center={lat && lng ? { lat, lng } : undefined}
-        <div style="height: 500px;">
+        simplified={true}
-          <Map
+        clickable={true}
-            mapMarkers={id_asset
+        on:clickedPoint={({ detail: point }) => handleSelect(point)}
-              ? [
+      />
-                  {
-                    id: id_asset,
-                    lat: originalLat,
-                    lon: originalLng,
-                  },
-                ]
-              : []}
-            zoom={id_asset ? 15 : 1}
-            center={location}
-            simplified={true}
-            clickable={true}
-            on:clickedPoint={(e) => {
-              location = e.detail;
-            }}
-          />
-        </div>
-      </div>
-
-      <div class="mt-4 flex w-full gap-4 px-4">
-        {#if !hideCancelButton}
-          <Button color={cancelColor} fullwidth on:click={handleCancel}>
-            {cancelText}
-          </Button>
-        {/if}
-        <Button color={confirmColor} fullwidth on:click={handleConfirm} disabled={isConfirmButtonDisabled}>
-          {confirmText}
-        </Button>
-      </div>
     </div>
   </div>
-</FullScreenModal>
+</ConfirmDialogue>

web/src/lib/components/shared-components/confirm-dialogue.svelte

@@ -11,8 +11,9 @@
   export let cancelText = 'Cancel';
   export let cancelColor: Color = 'primary';
   export let hideCancelButton = false;
+  export let disabled = false;
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{ cancel: void; confirm: void }>();
 
   let isConfirmButtonDisabled = false;
 
@@ -53,7 +54,7 @@
             {cancelText}
           </Button>
         {/if}
-        <Button color={confirmColor} fullwidth on:click={handleConfirm} disabled={isConfirmButtonDisabled}>
+        <Button color={confirmColor} fullwidth on:click={handleConfirm} disabled={disabled || isConfirmButtonDisabled}>
           {confirmText}
         </Button>
       </div>