feat: Edit metadata (#5066)

* chore: rebase and clean-up

* feat: sync description, add e2e tests

* feat: simplify web code

* chore: unit tests

* fix: linting

* Bug fix with the arrows key

* timezone typeahead filter

timezone typeahead filter

* small stlying

* format fix

* Bug fix in the map selection

Bug fix in the map selection

* Websocket basic

Websocket basic

* Update metadata visualisation through the websocket

* Update timeline

* fix merge

* fix web

* fix web

* maplibre system

* format fix

* format fix

* refactor: clean up

* Fix small bug in the hour/timezone

* Don't diplay modify for readOnly asset

* Add log in case of failure

* Formater + try/catch error

* Remove everything related to websocket

* Revert "Remove everything related to websocket"

This reverts commit 14bcb9e1e4.

* remove notification

* fix test

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

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

@@ -0,0 +1,128 @@
+<script lang="ts" context="module">
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  declare namespace Intl {
+    type Key = 'calendar' | 'collation' | 'currency' | 'numberingSystem' | 'timeZone' | 'unit';
+    function supportedValuesOf(input: Key): string[];
+  }
+</script>
+
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  import { DateTime } from 'luxon';
+  import ConfirmDialogue from './confirm-dialogue.svelte';
+  import Dropdown from '../elements/dropdown.svelte';
+  export let initialDate: DateTime = DateTime.now();
+
+  interface ZoneOption {
+    zone: string;
+    offset: string;
+  }
+
+  const timezones: ZoneOption[] = Intl.supportedValuesOf('timeZone').map((zone: string) => ({
+    zone,
+    offset: 'UTC' + DateTime.local({ zone }).toFormat('ZZ'),
+  }));
+
+  const initialOption = timezones.find((item) => item.offset === 'UTC' + initialDate.toFormat('ZZ'));
+
+  let selectedDate = initialDate.toFormat("yyyy-MM-dd'T'HH:mm");
+  let selectedTimezone = initialOption?.offset || null;
+  let disabled = false;
+
+  let searchQuery = '';
+  let filteredTimezones: ZoneOption[] = timezones;
+
+  const updateSearchQuery = (event: Event) => {
+    searchQuery = (event.target as HTMLInputElement).value;
+    filterTimezones();
+  };
+
+  const filterTimezones = () => {
+    filteredTimezones = timezones.filter((timezone) => timezone.zone.toLowerCase().includes(searchQuery.toLowerCase()));
+  };
+
+  const dispatch = createEventDispatcher<{
+    cancel: void;
+    confirm: string;
+  }>();
+
+  const handleCancel = () => dispatch('cancel');
+  const handleConfirm = () => {
+    let date = DateTime.fromISO(selectedDate);
+    if (selectedTimezone != null) {
+      date = date.setZone(selectedTimezone, { keepLocalTime: true }); // Keep local time if not it's really confusing
+    }
+
+    const value = date.toISO();
+    if (value) {
+      disabled = true;
+      dispatch('confirm', value);
+    }
+  };
+  const handleKeydown = (event: KeyboardEvent) => {
+    if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
+      event.stopPropagation();
+    }
+  };
+  let isDropdownOpen = false;
+
+  const openDropdown = () => {
+    isDropdownOpen = true;
+  };
+
+  const closeDropdown = () => {
+    isDropdownOpen = false;
+  };
+
+  const handleSelectTz = (item: ZoneOption) => {
+    selectedTimezone = item.offset;
+    closeDropdown();
+  };
+</script>
+
+<div role="presentation" on:keydown={handleKeydown}>
+  <ConfirmDialogue
+    confirmColor="primary"
+    cancelColor="secondary"
+    title="Change Date"
+    prompt="Please select a new date:"
+    {disabled}
+    on:confirm={handleConfirm}
+    on:cancel={handleCancel}
+  >
+    <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 class="flex flex-col w-full">
+        <label for="timezone">Timezone</label>
+        <div class="relative">
+          <input
+            class="immich-form-label text-sm mt-2 w-full text-black"
+            id="timezoneSearch"
+            type="text"
+            placeholder="Search timezone..."
+            bind:value={searchQuery}
+            on:input={updateSearchQuery}
+            on:focus={openDropdown}
+          />
+          <Dropdown
+            selectedOption={initialOption}
+            options={filteredTimezones}
+            render={(item) => (item ? `${item.zone} (${item.offset})` : '(not selected)')}
+            on:select={({ detail: item }) => handleSelectTz(item)}
+            controlable={true}
+            bind:showMenu={isDropdownOpen}
+          />
+        </div>
+      </div>
+    </div>
+  </ConfirmDialogue>
+</div>

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

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import type { AssetResponseDto } from '@api';
+  import { createEventDispatcher } from 'svelte';
+  import ConfirmDialogue from './confirm-dialogue.svelte';
+  import Map from './map/map.svelte';
+  export const title = 'Change Location';
+  export let asset: AssetResponseDto | undefined = undefined;
+
+  interface Point {
+    lng: number;
+    lat: number;
+  }
+
+  const dispatch = createEventDispatcher<{
+    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 handleSelect = (selected: Point) => {
+    point = selected;
+  };
+
+  const handleConfirm = () => {
+    if (!point) {
+      dispatch('cancel');
+    } else {
+      dispatch('confirm', point);
+    }
+  };
+</script>
+
+<ConfirmDialogue
+  confirmColor="primary"
+  cancelColor="secondary"
+  title="Change Location"
+  on:confirm={handleConfirm}
+  on:cancel={handleCancel}
+>
+  <div slot="prompt" class="flex flex-col w-full h-full gap-2">
+    <label for="datetime">Pick a location</label>
+    <div class="h-[350px] min-h-[300px] w-full">
+      <Map
+        mapMarkers={lat && lng && asset ? [{ id: asset.id, lat, lon: lng }] : []}
+        {zoom}
+        center={lat && lng ? { lat, lng } : undefined}
+        simplified={true}
+        clickable={true}
+        on:clickedPoint={({ detail: point }) => handleSelect(point)}
+      />
+    </div>
+  </div>
+</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>

web/src/lib/components/shared-components/map/map.svelte

@@ -28,6 +28,10 @@
   export let zoom: number | undefined = undefined;
   export let center: LngLatLike | undefined = undefined;
   export let simplified = false;
+  export let clickable = false;
+
+  let map: maplibregl.Map;
+  let marker: maplibregl.Marker | null = null;
 
   $: style = (async () => {
     const { data } = await api.systemConfigApi.getMapStyle({
@@ -36,7 +40,10 @@
     return data as StyleSpecification;
   })();
 
-  const dispatch = createEventDispatcher<{ selected: string[] }>();
+  const dispatch = createEventDispatcher<{
+    selected: string[];
+    clickedPoint: { lat: number; lng: number };
+  }>();
 
   function handleAssetClick(assetId: string, map: Map | null) {
     if (!map) {
@@ -63,6 +70,19 @@
     });
   }
 
+  function handleMapClick(event: maplibregl.MapMouseEvent) {
+    if (clickable) {
+      const { lng, lat } = event.lngLat;
+      dispatch('clickedPoint', { lng, lat });
+
+      if (marker) {
+        marker.remove();
+      }
+
+      marker = new maplibregl.Marker().setLngLat([lng, lat]).addTo(map);
+    }
+  }
+
   type FeaturePoint = Feature<Point, { id: string }>;
 
   const asFeature = (marker: MapMarkerResponseDto): FeaturePoint => {
@@ -96,6 +116,8 @@
     diffStyleUpdates={true}
     let:map
     on:load={(event) => event.detail.setMaxZoom(14)}
+    on:load={(event) => event.detail.on('click', handleMapClick)}
+    bind:map
   >
     <NavigationControl position="top-left" showCompass={!simplified} />
     {#if !simplified}

web/src/lib/components/shared-components/update-panel.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { websocketStore } from '$lib/stores/websocket';
+  import type { AssetStore } from '$lib/stores/assets.store';
+
+  export let assetStore: AssetStore | null;
+
+  websocketStore.onAssetUpdate.subscribe((asset) => {
+    if (asset && asset.originalFileName && assetStore) {
+      assetStore.updateAsset(asset, true);
+
+      assetStore.removeAsset(asset.id); // Update timeline
+      assetStore.addAsset(asset);
+    }
+  });
+</script>