WIP: polish filtering experience

Author: caleb531

desktop-app/src/components/ResultGrid.svelte

@@ -238,18 +238,12 @@
         <p>{description}</p>
     </header>
 
-    {#if errorMessage}
-        <InlineNotification
-            kind="error"
-            title={`Unable to load ${title.toLowerCase()}`}
-            subtitle={errorMessage}
-        />
-    {:else if loading && !hasLoaded}
+    {#if loading && !hasLoaded}
         <div class="result-grid__loading">
             <Loading withOverlay={false} />
         </div>
     {:else}
-        {#if charts}
+        {#if charts && rows.length && !errorMessage}
             <div class="result-grid-charts" aria-label="Chart area" role="img">
                 {@render charts(rows, columns)}
             </div>
@@ -272,7 +266,7 @@
                 />
             </div>
             <div class="result-grid__filters-row result-grid__filters-row--main">
-                <div class="result-grid__filters-dates">
+                <div class="result-grid__filters-fields">
                     <DatePicker>
                         <DatePickerInput
                             id="result-grid-from-date"
@@ -285,6 +279,17 @@
                             }}
                         />
                     </DatePicker>
+                    {#if enableTimeInput}
+                        <TimePicker
+                            size="sm"
+                            labelText="From time"
+                            placeholder="HH:MM"
+                            bind:value={fromTimeInput}
+                            on:input={(event) => {
+                                fromTimeInput = readInputValue(event);
+                            }}
+                        />
+                    {/if}
                     <DatePicker>
                         <DatePickerInput
                             id="result-grid-to-date"
@@ -297,6 +302,17 @@
                             }}
                         />
                     </DatePicker>
+                    {#if enableTimeInput}
+                        <TimePicker
+                            size="sm"
+                            labelText="To time"
+                            placeholder="HH:MM"
+                            bind:value={toTimeInput}
+                            on:input={(event) => {
+                                toTimeInput = readInputValue(event);
+                            }}
+                        />
+                    {/if}
                 </div>
                 <div class="result-grid__filters-actions">
                     {#if loading && hasLoaded}
@@ -308,36 +324,19 @@
                     <Button kind="secondary" size="small" type="reset">Clear</Button>
                 </div>
             </div>
-            {#if enableTimeInput}
-                <div class="result-grid__filters-row">
-                    <TimePicker
-                        size="sm"
-                        labelText="From time"
-                        placeholder="HH:MM"
-                        bind:value={fromTimeInput}
-                        on:input={(event) => {
-                            fromTimeInput = readInputValue(event);
-                        }}
-                    />
-                    <TimePicker
-                        size="sm"
-                        labelText="To time"
-                        placeholder="HH:MM"
-                        bind:value={toTimeInput}
-                        on:input={(event) => {
-                            toTimeInput = readInputValue(event);
-                        }}
-                    />
-                </div>
-            {/if}
         </form>
 
-        {#if rows.length}
+        {#if errorMessage}
+            <InlineNotification
+                class="result-grid__error"
+                kind="error"
+                title={`Unable to load ${title.toLowerCase()}`}
+                subtitle={errorMessage}
+            />
+        {:else}
             <WillowDark>
                 <Grid data={rows} {columns} />
             </WillowDark>
-        {:else}
-            <p>No data available.</p>
         {/if}
     {/if}
 </section>

desktop-app/src/styles/result-grid.css

@@ -35,25 +35,36 @@
 
 .result-grid__filters--with-time .result-grid__filters-row {
     justify-content: flex-start;
-    align-items: flex-start;
 }
 
 .result-grid__filters-row--main {
-    align-items: flex-start;
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: end;
+    column-gap: 1.5rem;
 }
 
-.result-grid__filters-dates {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 1rem 1.5rem;
+.result-grid__filters-fields {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(9rem, 1fr));
+    gap: 1rem 0.5rem;
+    width: 100%;
+    max-width: 24rem;
+    align-items: end;
+}
+
+.result-grid__filters--with-time .result-grid__filters-fields {
+    grid-template-columns: repeat(4, minmax(8rem, 1fr));
+    max-width: 36rem;
 }
 
 .result-grid__filters-actions {
     display: flex;
     gap: 0.75rem;
     justify-content: flex-end;
     align-items: center;
-    margin-left: auto;
+    margin-left: 0;
+    align-self: end;
 }
 
 .result-grid__soft-loading {
@@ -64,6 +75,11 @@
     height: 1.25rem;
 }
 
+.result-grid__error {
+    margin: 0 auto;
+    max-width: 48rem;
+}
+
 .wx-willow-dark-theme {
     background: none !important;
 }