helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-14 17:36:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(web): set album description textarea height correctly (#9880)

Browse source 
* fix(web): set description textarea content correctly

* Deduplicate description textarea

* Add strict types to function

* Add strict types to functions

* Add default parameter values

* Add tests covering AutogrowTextarea

* Add another test and lint the files

* Add a test, fix a typo

* Implement suggestions

* Remove use of $$restProp
This commit is contained in:
Snowknight26 2024-06-01 12:47:14 -05:00 • committed by GitHub
parent 7524c746a6
commit 21718cc343
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 130 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

18
web/src/lib/components/album-page/album-description.spec.ts Normal file
View file

@ -0,0 +1,18 @@
import AlbumDescription from '$lib/components/album-page/album-description.svelte';
import '@testing-library/jest-dom';
import { render, screen } from '@testing-library/svelte';
import { describe } from 'vitest';
describe('AlbumDescription component', () => {
it('shows an AutogrowTextarea component when isOwned is true', () => {
render(AlbumDescription, { isOwned: true, id: '', description: '' });
const autogrowTextarea = screen.getByTestId('autogrow-textarea');
expect(autogrowTextarea).toBeInTheDocument();
});
it('does not show an AutogrowTextarea component when isOwned is false', () => {
render(AlbumDescription, { isOwned: false, id: '', description: '' });
const autogrowTextarea = screen.queryByTestId('autogrow-textarea');
expect(autogrowTextarea).not.toBeInTheDocument();
});
});

26
web/src/lib/components/album-page/album-description.svelte
View file

@ -1,20 +1,13 @@
<script lang="ts">
import { autoGrowHeight } from '$lib/actions/autogrow';
import { updateAlbumInfo } from '@immich/sdk';
import { handleError } from '$lib/utils/handle-error';
import { shortcut } from '$lib/actions/shortcut';
import AutogrowTextarea from '$lib/components/shared-components/autogrow-textarea.svelte';
export let id: string;
export let description: string;
export let isOwned: boolean;
$: newDescription = description;
const handleUpdateDescription = async () => {
if (newDescription === description) {
return;
}
const handleUpdateDescription = async (newDescription: string) => {
try {
await updateAlbumInfo({
id,
@ -24,24 +17,17 @@
});
} catch (error) {
handleError(error, 'Error updating album description');
return;
}
description = newDescription;
};
</script>
{#if isOwned}
<textarea
class="w-full mt-2 resize-none text-black dark:text-white border-b-2 border-transparent border-gray-500 bg-transparent text-base outline-none transition-all focus:border-b-2 focus:border-immich-primary disabled:border-none dark:focus:border-immich-dark-primary hover:border-gray-400"
bind:value={newDescription}
on:input={(e) => autoGrowHeight(e.currentTarget)}
on:focusout={handleUpdateDescription}
use:autoGrowHeight
<AutogrowTextarea
content={description}
class="w-full mt-2 text-black dark:text-white border-b-2 border-transparent border-gray-500 bg-transparent text-base outline-none transition-all focus:border-b-2 focus:border-immich-primary disabled:border-none dark:focus:border-immich-dark-primary hover:border-gray-400"
onContentUpdate={handleUpdateDescription}
placeholder="Add a description"
use:shortcut={{
shortcut: { key: 'Enter', ctrl: true },
onShortcut: (e) => e.currentTarget.blur(),
}}
/>
{:else if description}
<p class="break-words whitespace-pre-line w-full text-black dark:text-white text-base">