fix(server): library control doesn't apply to new library from the third row (#4331)

This commit is contained in:
Alex 2023-10-03 14:05:14 -05:00 committed by GitHub
parent 260a600bbc
commit 02f9b40d67
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -43,7 +43,8 @@
let dropdownOpen: boolean[] = []; let dropdownOpen: boolean[] = [];
let showContextMenu = false; let showContextMenu = false;
let contextMenuPosition = { x: 0, y: 0 }; let contextMenuPosition = { x: 0, y: 0 };
let libraryType: LibraryType; let selectedLibraryIndex = 0;
let selectedLibrary: LibraryResponseDto | null = null;
onMount(() => { onMount(() => {
readLibraryList(); readLibraryList();
@ -61,10 +62,12 @@
} }
}; };
const showMenu = (event: MouseEvent, type: LibraryType) => { const showMenu = (event: MouseEvent, library: LibraryResponseDto, index: number) => {
contextMenuPosition = getContextMenuPosition(event); contextMenuPosition = getContextMenuPosition(event);
showContextMenu = !showContextMenu; showContextMenu = !showContextMenu;
libraryType = type;
selectedLibraryIndex = index;
selectedLibrary = library;
}; };
const onMenuExit = () => { const onMenuExit = () => {
@ -216,54 +219,63 @@
} }
}; };
const onRenameClicked = (index: number) => { const onRenameClicked = () => {
closeAll(); closeAll();
renameLibrary = index; renameLibrary = selectedLibraryIndex;
updateLibraryIndex = index; updateLibraryIndex = selectedLibraryIndex;
}; };
const onEditImportPathClicked = (index: number) => { const onEditImportPathClicked = () => {
closeAll(); closeAll();
editImportPaths = index; editImportPaths = selectedLibraryIndex;
updateLibraryIndex = index; updateLibraryIndex = selectedLibraryIndex;
}; };
const onScanNewLibraryClicked = (libraryId: string) => { const onScanNewLibraryClicked = () => {
closeAll(); closeAll();
handleScan(libraryId);
if (selectedLibrary) {
handleScan(selectedLibrary.id);
}
}; };
const onScanSettingClicked = (index: number) => { const onScanSettingClicked = () => {
closeAll(); closeAll();
editScanSettings = index; editScanSettings = selectedLibraryIndex;
updateLibraryIndex = index; updateLibraryIndex = selectedLibraryIndex;
}; };
const onScanAllLibraryFilesClicked = (libraryId: string) => { const onScanAllLibraryFilesClicked = () => {
closeAll(); closeAll();
handleScanChanges(libraryId); if (selectedLibrary) {
handleScanChanges(selectedLibrary.id);
}
}; };
const onForceScanAllLibraryFilesClicked = (libraryId: string) => { const onForceScanAllLibraryFilesClicked = () => {
closeAll(); closeAll();
handleForceScan(libraryId); if (selectedLibrary) {
handleForceScan(selectedLibrary.id);
}
}; };
const onRemoveOfflineFilesClicked = (libraryId: string) => { const onRemoveOfflineFilesClicked = () => {
closeAll(); closeAll();
handleRemoveOffline(libraryId); if (selectedLibrary) {
handleRemoveOffline(selectedLibrary.id);
}
}; };
const onDeleteLibraryClicked = (index: number, library: LibraryResponseDto) => { const onDeleteLibraryClicked = () => {
closeAll(); closeAll();
if (confirm(`Are you sure you want to delete ${library.name} library?`) == true) { if (selectedLibrary && confirm(`Are you sure you want to delete ${selectedLibrary.name} library?`) == true) {
refreshStats(index); refreshStats(selectedLibraryIndex);
if (totalCount[index] > 0) { if (totalCount[selectedLibraryIndex] > 0) {
deleteAssetCount = totalCount[index]; deleteAssetCount = totalCount[selectedLibraryIndex];
confirmDeleteLibrary = library; confirmDeleteLibrary = selectedLibrary;
} else { } else {
deleteLibrary = library; deleteLibrary = selectedLibrary;
handleDelete(); handleDelete();
} }
} }
@ -295,104 +307,92 @@
</tr> </tr>
</thead> </thead>
<tbody class="block w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray"> <tbody class="block w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray">
{#each libraries as library, index} {#each libraries as library, index (library.id)}
{#key library.id} <tr
<tr class={`flex h-[80px] w-full place-items-center text-center dark:text-immich-dark-fg ${
class={`flex h-[80px] w-full place-items-center text-center dark:text-immich-dark-fg ${ index % 2 == 0
index % 2 == 0 ? 'bg-immich-gray dark:bg-immich-dark-gray/75'
? 'bg-immich-gray dark:bg-immich-dark-gray/75' : 'bg-immich-bg dark:bg-immich-dark-gray/50'
: 'bg-immich-bg dark:bg-immich-dark-gray/50' }`}
}`} >
<td class="w-1/6 px-10 text-sm">
{#if library.type === LibraryType.External}
<Database size="40" title="External library (created on {library.createdAt})" />
{:else if library.type === LibraryType.Upload}
<Upload size="40" title="Upload library (created on {library.createdAt})" />
{/if}</td
> >
<td class="w-1/6 px-10 text-sm">
{#if library.type === LibraryType.External}
<Database size="40" title="External library (created on {library.createdAt})" />
{:else if library.type === LibraryType.Upload}
<Upload size="40" title="Upload library (created on {library.createdAt})" />
{/if}</td
>
<td class="w-1/3 text-ellipsis px-4 text-sm">{library.name}</td> <td class="w-1/3 text-ellipsis px-4 text-sm">{library.name}</td>
{#if totalCount[index] == undefined} {#if totalCount[index] == undefined}
<td colspan="2" class="flex w-1/3 items-center justify-center text-ellipsis px-4 text-sm"> <td colspan="2" class="flex w-1/3 items-center justify-center text-ellipsis px-4 text-sm">
<Pulse color="gray" size="40" unit="px" /> <Pulse color="gray" size="40" unit="px" />
</td>
{:else}
<td class="w-1/6 text-ellipsis px-4 text-sm">
{totalCount[index]}
</td>
<td class="w-1/6 text-ellipsis px-4 text-sm">{diskUsage[index]} {diskUsageUnit[index]} </td>
{/if}
<td class="w-1/6 text-ellipsis px-4 text-sm">
<button
class="rounded-full bg-immich-primary p-3 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700"
on:click|stopPropagation|preventDefault={(e) => showMenu(e, library.type)}
>
<DotsVertical size="16" />
</button>
{#if showContextMenu}
<Portal target="body">
<ContextMenu {...contextMenuPosition} on:outclick={() => onMenuExit()}>
<MenuOption on:click={() => onRenameClicked(index)} text="Rename" />
{#if libraryType === LibraryType.External}
<MenuOption on:click={() => onEditImportPathClicked(index)} text="Edit Import Paths" />
<MenuOption on:click={() => onScanSettingClicked(index)} text="Scan Settings" />
<hr />
<MenuOption
on:click={() => onScanNewLibraryClicked(library.id)}
text="Scan New Library Files"
/>
<MenuOption
on:click={() => onScanAllLibraryFilesClicked(library.id)}
text="Re-scan All Library Files"
subtitle={'Only refreshes modified files'}
/>
<MenuOption
on:click={() => onForceScanAllLibraryFilesClicked(library.id)}
text="Force Re-scan All Library Files"
subtitle={'Refreshes every file'}
/>
<hr />
<MenuOption
on:click={() => onRemoveOfflineFilesClicked(library.id)}
text="Remove Offline Files"
/>
<MenuOption on:click={() => onDeleteLibraryClicked(index, library)}>
<p class="text-red-600">Delete library</p>
</MenuOption>
{/if}
</ContextMenu>
</Portal>
{/if}
</td> </td>
</tr> {:else}
{#if renameLibrary === index} <td class="w-1/6 text-ellipsis px-4 text-sm">
<div transition:slide={{ duration: 250 }}> {totalCount[index]}
<LibraryRenameForm {library} on:submit={handleUpdate} on:cancel={() => (renameLibrary = null)} /> </td>
</div> <td class="w-1/6 text-ellipsis px-4 text-sm">{diskUsage[index]} {diskUsageUnit[index]}</td>
{/if} {/if}
{#if editImportPaths === index}
<div transition:slide={{ duration: 250 }}> <td class="w-1/6 text-ellipsis px-4 text-sm">
<LibraryImportPathsForm <button
{library} class="rounded-full bg-immich-primary p-3 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700"
on:submit={handleUpdate} on:click|stopPropagation|preventDefault={(e) => showMenu(e, library, index)}
on:cancel={() => (editImportPaths = null)} >
/> <DotsVertical size="16" />
</div> </button>
{/if}
{#if editScanSettings === index} {#if showContextMenu}
<div transition:slide={{ duration: 250 }} class="mb-4 ml-4 mr-4"> <Portal target="body">
<LibraryScanSettingsForm <ContextMenu {...contextMenuPosition} on:outclick={() => onMenuExit()}>
{library} <MenuOption on:click={() => onRenameClicked()} text={`Rename`} />
on:submit={handleUpdate}
on:cancel={() => (editScanSettings = null)} {#if selectedLibrary && selectedLibrary.type === LibraryType.External}
/> <MenuOption on:click={() => onEditImportPathClicked()} text="Edit Import Paths" />
</div> <MenuOption on:click={() => onScanSettingClicked()} text="Scan Settings" />
{/if} <hr />
{/key} <MenuOption on:click={() => onScanNewLibraryClicked()} text="Scan New Library Files" />
<MenuOption
on:click={() => onScanAllLibraryFilesClicked()}
text="Re-scan All Library Files"
subtitle={'Only refreshes modified files'}
/>
<MenuOption
on:click={() => onForceScanAllLibraryFilesClicked()}
text="Force Re-scan All Library Files"
subtitle={'Refreshes every file'}
/>
<hr />
<MenuOption on:click={() => onRemoveOfflineFilesClicked()} text="Remove Offline Files" />
<MenuOption on:click={() => onDeleteLibraryClicked()}>
<p class="text-red-600">Delete library</p>
</MenuOption>
{/if}
</ContextMenu>
</Portal>
{/if}
</td>
</tr>
{#if renameLibrary === index}
<div transition:slide={{ duration: 250 }}>
<LibraryRenameForm {library} on:submit={handleUpdate} on:cancel={() => (renameLibrary = null)} />
</div>
{/if}
{#if editImportPaths === index}
<div transition:slide={{ duration: 250 }}>
<LibraryImportPathsForm {library} on:submit={handleUpdate} on:cancel={() => (editImportPaths = null)} />
</div>
{/if}
{#if editScanSettings === index}
<div transition:slide={{ duration: 250 }} class="mb-4 ml-4 mr-4">
<LibraryScanSettingsForm
{library}
on:submit={handleUpdate}
on:cancel={() => (editScanSettings = null)}
/>
</div>
{/if}
{/each} {/each}
</tbody> </tbody>
</table> </table>