feat: simplify web code

2023-11-21 23:52:15 -05:00
parent 454d36f9ab
commit a4cf62f918
9 changed files with 149 additions and 286 deletions
--- a/server/src/domain/metadata/metadata.service.ts
+++ b/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;
  }
--- a/web/src/lib/components/asset-viewer/detail-panel.svelte
+++ b/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: {
-          description: description,
-        },
+        updateAssetDto: { 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({
-        id: asset.id,
-        updateAssetDto: {
-          dateTimeOriginal: event.detail,
-        },
-      });
+      await api.assetApi.updateAsset({ id: asset.id, updateAssetDto: { dateTimeOriginal } });
      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,
-          longitude: event.detail.lng,
+          latitude: gps.lat,
+          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 = DateTime.fromISO(asset.exifInfo.dateTimeOriginal, {
-          zone: asset.exifInfo.timeZone ?? undefined,
-        })}
-        <ChangeDate
-          title="Change Date"
-          confirmText="Confirm"
-          initialDate={assetDateTimeOriginal}
-          on:confirm={handleConfirmChangeDate}
-          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}
+      {@const assetDateTimeOriginal = asset.exifInfo?.dateTimeOriginal
+        ? DateTime.fromISO(asset.exifInfo.dateTimeOriginal, {
+            zone: asset.exifInfo.timeZone ?? undefined,
+          })
+        : DateTime.now()}
+      <ChangeDate
+        initialDate={assetDateTimeOriginal}
+        on:confirm={({ detail: date }) => handleConfirmChangeDate(date)}
+        on:cancel={() => (isShowChangeDate = false)}
+      />
    {/if}

    {#if asset.exifInfo?.fileSizeInByte}
@@ -453,29 +430,11 @@
      </div>
    {/if}
    {#if isShowChangeLocation}
-      {#if latlng}
-        <ChangeLocation
-          confirmText="Confirm"
-          location={latlng}
-          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}
+      <ChangeLocation
+        {asset}
+        on:confirm={({ detail: gps }) => handleConfirmChangeLocation(gps)}
+        on:cancel={() => (isShowChangeLocation = false)}
+      />
    {/if}
  </div>
 </section>
--- a/web/src/lib/components/elements/buttons/link-button.svelte
+++ b/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>
--- a/web/src/lib/components/elements/dropdown.svelte
+++ b/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 }}
-      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"
+      transition:fly={{ y: -30, x: 30, duration: 100 }}
+      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)}
--- a/web/src/lib/components/photos-page/actions/change-date.svelte
+++ b/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: {
-          ids: ids,
-          dateTimeOriginal: event.detail,
-        },
+        assetBulkUpdateDto: { ids, dateTimeOriginal },
      });
      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}
--- a/web/src/lib/components/photos-page/actions/change-location.svelte
+++ b/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,
-          latitude: event.detail.lat,
-          longitude: event.detail.lng,
+          ids,
+          latitude: point.lat,
+          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={handleConfirmChangeLocation}
+    on:confirm={({ detail: point }) => handleConfirm(point)}
    on:cancel={() => (isShowChangeLocation = false)}
-  >
-    <svelte:fragment slot="prompt">
-      <p>Please select a new location:</p>
-    </svelte:fragment>
-  </ChangeLocation>
+  />
 {/if}
--- a/web/src/lib/components/shared-components/change-date.svelte
+++ b/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';
-  export let prompt = 'Please select a new date:';
-  export let confirmText = 'Confirm';
-  export let confirmColor: Color = 'primary';
-  export let cancelText = 'Cancel';
-  export let cancelColor: Color = 'secondary';
-  export let hideCancelButton = false;
+  import ConfirmDialogue from './confirm-dialogue.svelte';
+  import Dropdown from '../elements/dropdown.svelte';
  export let initialDate: DateTime = DateTime.now();

-  let selectedDate: string;
-  let selectedTimezone: string | null;
+  interface ZoneOption {
+    zone: string;
+    offset: string;
+  }

-  let timezones = [
-    '',
-    'UTC-12:00',
-    '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',
-  ];
+  const timezones: ZoneOption[] = (Intl as any)
+    .supportedValuesOf('timeZone')
+    .map((zone: string) => ({ zone, offset: 'UTC' + DateTime.local({ zone }).toFormat('ZZ') }));

-  selectedDate = initialDate.toFormat("yyyy-MM-dd'T'HH:mm");
-  selectedTimezone = 'UTC' + initialDate.toFormat('ZZ');
+  const initialOption = timezones.find((item) => item.offset === '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;
-    dispatch('confirm', date.toISO());
+    const value = date.toISO();
+    if (value) {
+      disabled = true;
+      dispatch('confirm', value);
+    }
  };
 </script>

-<FullScreenModal on:clickOutside={handleCancel} on:escape={() => handleEscape()}>
-  <div
-    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"
-  >
-    <div
-      class="flex flex-col place-content-center place-items-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
-    >
-      <h1 class="pb-2 text-2xl font-medium text-immich-primary dark:text-immich-dark-primary">
-        {title}
-      </h1>
+<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>
-      <div class="text-md px-4 py-5 text-center">
-        <slot name="prompt">
-          <p>{prompt}</p>
-        </slot>
-        <div class="mt-2" />
-        <div class="flex flex-col">
-          <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 class="flex flex-col w-full">
+      <label for="timezone">Timezone</label>
+      <Dropdown
+        selectedOption={initialOption}
+        options={timezones}
+        render={(item) => (item ? `${item.zone} (${item.offset})` : '(not selected)')}
+        on:select={({ detail: item }) => handleSelect(item)}
+      />
    </div>
  </div>
-</FullScreenModal>
+</ConfirmDialogue>
--- a/web/src/lib/components/shared-components/change-location.svelte
+++ b/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 Button from '../elements/buttons/button.svelte';
-  import type { Color } from '$lib/components/elements/buttons/button.svelte';
+  import ConfirmDialogue from './confirm-dialogue.svelte';
  import Map from './map/map.svelte';
  export const title = 'Change Location';
-  export let prompt = 'Please select a new date:';
-  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();
+  export let asset: AssetResponseDto | undefined = undefined;

-  let isConfirmButtonDisabled = false;
+  interface Point {
+    lng: number;
+    lat: number;
+  }

-  const originalLat = location.lat;
-  const originalLng = location.lng;
+  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 handleEscape = () => {
-    if (!isConfirmButtonDisabled) {
-      dispatch('cancel');
-    }
+
+  const handleSelect = (selected: Point) => {
+    point = selected;
  };

  const handleConfirm = () => {
-    dispatch('confirm', location);
+    dispatch('confirm', { lat, lng });
  };
 </script>

-<FullScreenModal on:clickOutside={handleCancel} on:escape={() => handleEscape()}>
-  <div
-    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"
-  >
-    <div
-      class="flex flex-col place-content-center place-items-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
-    />
-    <div>
-      <div class="text-md px-4 py-5 text-center">
-        <slot name="prompt">
-          <p>{prompt}</p>
-        </slot>
-        <div class="mt-2" />
-        <div class="flex flex-col">
-          <label for="datetime">Pick a location</label>
-        </div>
-        <div style="height: 500px;">
-          <Map
-            mapMarkers={id_asset
-              ? [
-                  {
-                    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>
+<ConfirmDialogue
+  confirmColor="primary"
+  cancelColor="secondary"
+  title="Change Location"
+  prompt="Please select a new location:"
+  disabled={!point}
+  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>
-</FullScreenModal>
+</ConfirmDialogue>
--- a/web/src/lib/components/shared-components/confirm-dialogue.svelte
+++ b/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>