fix: min search error message (#186)

* feat: fixed min search error message * fix: ensure translation script is run with bash to avoid `[[: not found` issue * feat: tooltip on disabled search button * chore: add line ending visualizer to devcontainer extensions * feat: localize search failed message * fix: switch to ternary expressions for search * fix: invalid if statement * fix: pagination incorrectly disappearing --------- Co-authored-by: Rob B <[email protected]>
satisfactorymodding · Oct 8, 2024 · 9950e3e · 9950e3e
1 parent 6f9cb6c
commit 9950e3e
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 25 deletions.
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
@@ -37,7 +37,8 @@
 				"me-dutour-mathieu.vscode-github-actions",
 				"eamodio.gitlens",
 				"GitHub.copilot",
-				"GitHub.vscode-pull-request-github"
+				"GitHub.vscode-pull-request-github",
+				"medo64.render-crlf"
 			]
 		}
 	},

diff --git a/package.json b/package.json
@@ -19,7 +19,7 @@
     "postinstall": "svelte-kit sync",
     "start": "svelte-kit start",
     "format": "prettier --write . && eslint . --fix",
-    "translations": "sh ./download_translations.sh"
+    "translations": "bash ./download_translations.sh"
   },
   "dependencies": {
     "@felte/core": "^1.4.3",

diff --git a/src/lib/components/mods/ModGrid.svelte b/src/lib/components/mods/ModGrid.svelte
@@ -45,12 +45,14 @@
   let totalMods: number;
 
   let searchField = search;
+  $: searchDisabled = searchField.length < 3;
+  $: searchButtonClass = searchDisabled ? 'variant-filled-surface' : 'variant-filled-primary';
 
   let timer: number;
   $: {
     clearTimeout(timer);
     timer = setTimeout(() => {
-      if (searchField && searchField.length > 2) {
+      if (searchField && !searchDisabled) {
         if ((search === '' || search === null) && searchField !== '' && searchField !== null) {
           orderBy = ModFields.Search;
           page = 0;
@@ -70,11 +72,12 @@
   $: if (browser) {
     const url = new URL(window.location.origin + window.location.pathname);
     url.searchParams.append('p', page.toString());
-    searchField !== '' && searchField !== null && url.searchParams.append('q', searchField);
+    !searchDisabled && searchField !== '' && searchField !== null && url.searchParams.append('q', searchField);
     goto(url.toString(), { keepFocus: true });
   }
 
   $: totalMods = $mods?.data?.getMods?.count || 0;
+  $: showPagination = ($mods && $mods.fetching) || ($mods && !$mods.fetching && totalMods > 0 && !$mods.error);
 
   $: gridClasses =
     colCount == 4
@@ -149,7 +152,10 @@
             class="border-0 bg-transparent p-1.5 ring-0"
             name="search"
             placeholder={$t('search.placeholder-text')} />
-          <button class="material-icons variant-filled-primary">arrow_forward</button>
+          <button
+            class="material-icons {searchButtonClass}"
+            disabled={searchDisabled}
+            title={searchDisabled ? $t('search.disabled') : ''}>arrow_forward</button>
         </div>
       </div>
       {#if tagsOpen}
@@ -178,16 +184,17 @@
     {#if newMod && $user !== null}
       <a class="variant-ghost-primary btn self-end" href="{base}/new-mod">{$t('mods.new')}</a>
     {/if}
-
-    <div class="self-end">
-      <Paginator
-        bind:settings={paginationSettings}
-        showFirstLastButtons={true}
-        showPreviousNextButtons={true}
-        on:page={(p) => (page = p.detail)}
-        on:amount={(p) => (perPage = p.detail)}
-        controlVariant="variant-filled-surface" />
-    </div>
+    {#if showPagination}
+      <div class="self-end">
+        <Paginator
+          bind:settings={paginationSettings}
+          showFirstLastButtons={true}
+          showPreviousNextButtons={true}
+          on:page={(p) => (page = p.detail)}
+          on:amount={(p) => (perPage = p.detail)}
+          controlVariant="variant-filled-surface" />
+      </div>
+    {/if}
   </div>
 </div>
 
@@ -197,8 +204,12 @@
       <FicsitCard fake />
     {/each}
   </div>
+{:else if $mods.error && $mods.error.message.includes("'Search' failed on the 'min' tag")}
+  {$t('search.failed.query-too-short')}
 {:else if $mods.error}
   <p>Oh no... {$mods.error.message}</p>
+{:else if totalMods == 0}
+  {$t('search.results.empty')}
 {:else}
   <div class="grid {gridClasses} gap-4">
     {#each $mods.data.getMods.mods as mod}
@@ -207,17 +218,19 @@
   </div>
 {/if}
 
-<div class="ml-auto mt-5 flex justify-end">
-  <div>
-    <Paginator
-      bind:settings={paginationSettings}
-      showFirstLastButtons={true}
-      showPreviousNextButtons={true}
-      on:page={(p) => (page = p.detail)}
-      on:amount={(p) => (perPage = p.detail)}
-      controlVariant="variant-filled-surface" />
+{#if showPagination}
+  <div class="ml-auto mt-5 flex justify-end">
+    <div>
+      <Paginator
+        bind:settings={paginationSettings}
+        showFirstLastButtons={true}
+        showPreviousNextButtons={true}
+        on:page={(p) => (page = p.detail)}
+        on:amount={(p) => (perPage = p.detail)}
+        controlVariant="variant-filled-surface" />
+    </div>
   </div>
-</div>
+{/if}
 
 <style lang="postcss">
   * :global(.search-paper) {