diff --git a/CHANGELOG.md b/CHANGELOG.md index 1e420887..7ca1c5e3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ These changes are awaiting release: - HTTP Requests: Replace `axios` with `Fetch`. - Show `Airs On` date for episodes that have yet to air (thanks [@KarpachMarko]!). - Show `Aired Date` for episodes. +- Import: Add a `rating` column. ## Fixed @@ -14,6 +15,9 @@ These changes are awaiting release: - Removed some legacy code that still thought there was a `store.watchedList`. - DropDown: Fix whole page scrolling when pressing letter to scroll to first relevant dropdown item (only the dropdown list should scroll now, which is less jarring). - Media pages: Only show PosterImage if we have a poster path. +- Import: + - Mark import item as failed correctly when error is thrown from doImport. + - Make the table horizontally scrollable when necessary (instead of just cutting off the end). ## Maintenance diff --git a/src/routes/(app)/import/process/+page.svelte b/src/routes/(app)/import/process/+page.svelte index 64015160..9a35e72c 100644 --- a/src/routes/(app)/import/process/+page.svelte +++ b/src/routes/(app)/import/process/+page.svelte @@ -41,6 +41,7 @@ let isImporting = $state(false); let importText = $state(""); let cancelled = $state(false); + let importTableEl: HTMLTableElement | undefined = $state(); onDestroy(() => { cancelled = true; @@ -432,8 +433,47 @@ rList = rList; } + /** + * inputs that have a `data-validateme` property, we will validate with the + * browser. + */ + function validatableInputsAreValid(): boolean { + if (!importTableEl) { + // Somehow the table isn't defined, i guess allow continuing so we + // dont block. + console.warn("validatableInputsAreValid: There is no table element."); + return true; + } + const inputs = importTableEl.querySelectorAll( + "tbody input[data-validateme]", + ); + if (inputs.length <= 0) { + console.warn("validatableInputsAreValid: No inputs found."); + return true; + } + for (const input of inputs) { + if (!input.reportValidity()) { + // Stop the for loop after we hit one input that is invalid. + // No need to continue after we know at least one is invalid. + console.error("validatableInputsAreValid: Invalid input found.", input); + return false; + } + } + return true; + } + async function startImport() { - console.log(rList); + if (!validatableInputsAreValid()) { + console.warn( + "startImport: Some fields are not valid, not starting import!", + ); + notify({ + type: "error", + text: "An error was found in one of the inputs, please fix it and try starting the import again.", + }); + return; + } + console.log("startImport: Starting.", rList); isImporting = true; window.scrollTo(0, 0); for (let i = 0; i < rList.length; i++) { @@ -446,6 +486,7 @@ console.log("Importing", li); await doImport(li); } catch (err) { + li.state = ImportResponseType.IMPORT_FAILED; console.error("Failed to import item:", li, "reason:", err); notify({ type: "error", @@ -596,131 +637,150 @@ You can fix any failed imports when the process completes. {/if} - - - - {#if isImporting} - - {/if} - - - - - {#if !isImporting} - - {/if} - - - - - - {#each rList as l} +
+
NameYearTypeStatus
+ {#if isImporting} - + {/if} - - - - + + + + + {#if !isImporting} - + {/if} - {/each} - {#if !isImporting} - - - - - - - - {/if} - -
-
- {#if !l.state} - - {:else if l.state === ImportResponseType.IMPORT_SUCCESS} - - {:else if l.state === ImportResponseType.IMPORT_NOTFOUND} - - {:else if l.state === ImportResponseType.IMPORT_FAILED} - - {:else if l.state === ImportResponseType.IMPORT_EXISTS} - - {/if} -
- 		- - - - - - - - NameYearTypeStatusRating - -
- -
+ + + + + {#each rList as l} + + {#if isImporting} + +
+ {#if !l.state} + + {:else if l.state === ImportResponseType.IMPORT_SUCCESS} + + {:else if l.state === ImportResponseType.IMPORT_NOTFOUND} + + {:else if l.state === ImportResponseType.IMPORT_FAILED} + + {:else if l.state === ImportResponseType.IMPORT_EXISTS} + + {/if} +
+ + {/if} + + + + + + + + + + + + + + + + {#if !isImporting} + + + + {/if} + + {/each} + {#if !isImporting} + + + + + + + + + + + {/if} + + +
- - + + -
{#if typeof changeAllStatusesModalCb === "function"} table { + margin-top: 20px; + td { padding: 12px 15px; word-wrap: anywhere; diff --git a/src/styles/norm.scss b/src/styles/norm.scss index 792ad376..983a15ee 100644 --- a/src/styles/norm.scss +++ b/src/styles/norm.scss @@ -263,7 +263,6 @@ :global { table { - margin-top: 20px; width: 100%; border-spacing: 0px; border: 1px solid $accent-color;