self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-06-30 05:29:30 +02:00
Code Issues Releases Activity

feat: Add description (#2237)

Browse Source 
* Added dto, logic to insert description and web implementation

* create text field and update on remote database

* Update description and save changes

* styling

* fix web test

* fix server test

* preserve description on metadata extraction job run

* handle exif info is null situation

* pr feedback

* format openapi spec

* update createAssetDto

* refactor logic to service

* move files

* only owner can update description

* Render description correctly in shared album

* Render description correctly in shared link

* disable description edit for not owner of asset on mobile

* localization and clean up

* fix test

* Uses providers for description text (#2244)

* uses providers for description text

* comments

* fixes initial data setting

* fixes notifier

---------

Co-authored-by: martyfuhry <martyfuhry@gmail.com>
This commit is contained in:
Alex
2023-04-13 10:22:06 -05:00
committed by GitHub
parent 561b208508
commit a9859bc029
27 changed files with 843 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,14 +5,26 @@
import CameraIris from 'svelte-material-icons/CameraIris.svelte';
import MapMarkerOutline from 'svelte-material-icons/MapMarkerOutline.svelte';
import { createEventDispatcher } from 'svelte';
import { AssetResponseDto, AlbumResponseDto } from '@api';
import { AssetResponseDto, AlbumResponseDto, api } from '@api';
import { asByteUnitString } from '../../utils/byte-units';
import { locale } from '$lib/stores/preferences.store';
import { DateTime } from 'luxon';
import type { LatLngTuple } from 'leaflet';
import { page } from '$app/stores';
export let asset: AssetResponseDto;
export let albums: AlbumResponseDto[] = [];
let textarea: HTMLTextAreaElement;
let description: string;
$: {
// Get latest description from server
if (asset.id) {
api.assetApi
.getAssetById(asset.id)
.then((res) => (textarea.value = res.data?.exifInfo?.description || ''));
}
}
$: latlng = (() => {
const lat = asset.exifInfo?.latitude;
@ -34,6 +46,27 @@
return undefined;
};
const autoGrowHeight = (e: Event) => {
const target = e.target as HTMLTextAreaElement;
target.style.height = 'auto';
target.style.height = `${target.scrollHeight}px`;
};
const handleFocusIn = () => {
dispatch('description-focus-in');
};
const handleFocusOut = async () => {
dispatch('description-focus-out');
try {
await api.assetApi.updateAsset(asset.id, {
description: description
});
} catch (error) {
console.error(error);
}
};
</script>
<section class="p-2 dark:bg-immich-dark-bg dark:text-immich-dark-fg">
@ -48,6 +81,23 @@
<p class="text-immich-fg dark:text-immich-dark-fg text-lg">Info</p>
</div>
<div class="mx-4 mt-10">
<textarea
bind:this={textarea}
class="max-h-[500px]
text-base text-black bg-transparent dark:text-white border-b focus:border-b-2 border-gray-500 w-full focus:border-immich-primary dark:focus:border-immich-dark-primary transition-all resize-none overflow-hidden outline-none disabled:border-none"
placeholder={$page?.data?.user?.id !== asset.ownerId ? '' : 'Add a description'}
style:display={$page?.data?.user?.id !== asset.ownerId && textarea?.value == ''
? 'none'
: 'block'}
on:focusin={handleFocusIn}
on:focusout={handleFocusOut}
on:input={autoGrowHeight}
bind:value={description}
disabled={$page?.data?.user?.id !== asset.ownerId}
/>
</div>
<div class="px-4 py-4">
{#if !asset.exifInfo}
<p class="text-sm pb-4">NO EXIF INFO AVAILABLE</p>
@ -178,7 +228,7 @@
<section class="p-2 dark:text-immich-dark-fg">
<div class="px-4 py-4">
{#if albums.length > 0}
<p class="text-sm pb-4 ">APPEARS IN</p>
<p class="text-sm pb-4">APPEARS IN</p>
{/if}
{#each albums as album}
<a data-sveltekit-preload-data="hover" href={`/albums/${album.id}`}>