fix(frontend): entity-lists are now more consistently displayed

frontend/src/components/EndpointList.svelte

@@ -1,32 +1,20 @@
 <script lang="ts">
   import { api, db } from '../api'
-  import Spinner from './Spinner.svelte'
   import EndpointItem from './items/EndpointItem.svelte'
-  import Button from './Button.svelte'
-  import Alert from './Alert.svelte'
   import { state } from '../state'
+  import EntityList from './EntityList.svelte'
   export let selectedID = ''
   let endpoints = api.endpoint.list()
   let loading = true
   endpoints.then(() => (loading = false))
+  $: deletedCount = Object.values($db.endpoint).filter((e) => e.deleted).length
+  let error: string | undefined = undefined
+  $: {
+    endpoints.then((response) => (error = response[1]?.error))
+  }
 </script>
 
-<div class="spinner"><Spinner active={loading} /></div>
-{#await endpoints then [_, err]}
-  {#if err}
-    {err.error}
-  {/if}
-{/await}
-<Button
-  icon="delete"
-  on:click={() => ($state.showDeleted = !$state.showDeleted)}>
-  {#if $state.showDeleted}
-    Hide deleted
-  {:else}
-    Show deleted
-  {/if}
-</Button>
-<ul>
+<EntityList {error} {loading} {deletedCount}>
   {#each Object.values($db.endpoint)
     .filter((e) => {
       if (!$state.showDeleted) {
@@ -47,21 +35,9 @@
       return 0
     })
     .reverse() as v}
-    {#if v.deleted}
-      <Alert kind="warning">
-        <EndpointItem endpoint={v} />
-      </Alert>
-    {:else}
-      <EndpointItem endpoint={v} />
-      <div class="item-actions">
-        <Button icon="edit" on:click={() => (selectedID = v.id)}>Edit</Button>
-      </div>
-    {/if}
+    <EndpointItem
+      endpoint={v}
+      onEdit={(id) => (selectedID = id)}
+      onDelete={(id) => api.endpoint.delete(id)} />
   {/each}
-</ul>
-
-<style>
-  .spinner {
-    float: right;
-  }
-</style>
+</EntityList>

frontend/src/components/EntityList.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import Spinner from './Spinner.svelte'
+  import ButtonShowDeleted from './buttons/ButtonShowDeleted.svelte'
+  export let loading: boolean
+  export let deletedCount: number
+  export let error: string | undefined
+</script>
+
+<div class="spinner"><Spinner active={loading} /></div>
+{#if error}
+  {error}
+{/if}
+<ButtonShowDeleted {deletedCount} />
+<ul>
+  <slot />
+</ul>
+
+<style>
+  .spinner {
+    float: right;
+  }
+
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    border-radius: var(--radius);
+    box-shadow: var(--elevation-4);
+  }
+</style>

frontend/src/components/ListItem.svelte

@@ -56,6 +56,9 @@
 
 <style>
   .deleted {
+    background-color: hsl(0, 88%, 96.1%);
+  }
+  .deleted .item-header {
     text-decoration: line-through;
   }
   .error {

frontend/src/components/RequestLIst.svelte

@@ -1,20 +1,22 @@
 <script lang="ts">
   import { api, db } from '../api'
-  import { slide } from 'svelte/transition'
-  import Spinner from './Spinner.svelte'
+  import EntityList from './EntityList.svelte'
   import RequestItem from './items/RequestItem.svelte'
-  let requests = api.request.list()
+
   let loading = true
-  requests.then(() => (loading = false))
+  let error: undefined | string = undefined
+  export let selectedID: string = ''
+
+  let requests = api.request.list()
+  requests.then((response) => {
+    loading = false
+    error = response[1]?.error
+  })
+
+  $: deletedCount = Object.values($db.request).filter((s) => s.deleted).length
 </script>
 
-<div class="spinner"><Spinner active={loading} /></div>
-{#await requests then [_, err]}
-  {#if err}
-    {err.error}
-  {/if}
-{/await}
-<ul>
+<EntityList {loading} {error} {deletedCount}>
   {#each Object.values($db.request)
     .sort((a, b) => {
       const A = a.createdAt
@@ -29,12 +31,10 @@
       return 0
     })
     .reverse() as v}
-    <RequestItem request={v} />
+    <RequestItem
+      {selectedID}
+      onEdit={(id) => (selectedID = id)}
+      onDelete={(id) => api.request.delete(id)}
+      request={v} />
   {/each}
-</ul>
-
-<style>
-  .spinner {
-    float: right;
-  }
-</style>
+</EntityList>

frontend/src/components/ScheduleList.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
   import { api, db } from '../api'
-  import Spinner from './Spinner.svelte'
   import ScheduleItem from './items/ScheduleItem.svelte'
+  import EntityList from './EntityList.svelte'
   export let selectedID: string = ''
   let loading = true
+  let error: undefined | string = undefined
+  $: deletedCount = Object.values($db.schedule).filter((s) => s.deleted).length
 </script>
 
-<div class="spinner"><Spinner active={loading} /></div>
-<ul>
+<EntityList {loading} {error} {deletedCount}>
   {#each Object.values($db.schedule)
     .sort((a, b) => {
       const A = a.start_date || ''
@@ -28,18 +29,4 @@
       onEdit={(id) => (selectedID = id)}
       onDelete={(id) => api.schedule.delete(id)} />
   {/each}
-</ul>
-
-<style>
-  .spinner {
-    float: right;
-  }
-
-  ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    border-radius: var(--radius);
-    box-shadow: var(--elevation-4);
-  }
-</style>
+</EntityList>

frontend/src/components/buttons/ButtonShowDeleted.svelte

@@ -0,0 +1,17 @@
+<script type="ts">
+  import { state } from 'state'
+
+  import Button from '../Button.svelte'
+  export let deletedCount: number
+</script>
+
+{#if !!deletedCount}
+  <Button
+    icon="delete"
+    color="secondary"
+    active={$state.showDeleted}
+    disabled={!$state.showDeleted && !deletedCount}
+    on:click={() => ($state.showDeleted = !$state.showDeleted)}>
+    Show deleted ({deletedCount})
+  </Button>
+{/if}

frontend/src/components/items/EndpointItem.svelte

@@ -1,39 +1,41 @@
 <script lang="ts">
-  import { api } from '../../api'
-
-  import Button from '../../components/Button.svelte'
-
   import formatDate from '../../dates'
 
-  import { slide } from 'svelte/transition'
   import ConfigItem from './ConfigItem.svelte'
+  import ListItem from '../ListItem.svelte'
+  import Collapse from 'components/Collapse.svelte'
 
   export let endpoint: ApiDef.EndpointEntity
+  export let onEdit: ((ID: string) => void) | undefined = undefined
+  export let onDelete: ((ID: string) => void) | undefined = undefined
+  export let selectedID: string = ''
 </script>
 
-<li transition:slide|local class:deleted={!!endpoint.deleted}>
-  {endpoint.url}
-  {formatDate(endpoint.createdAt)}
-  {#if endpoint.config}
-    <ConfigItem config={endpoint.config} short={true} />
-  {/if}
-  {#if endpoint.headers}
-    <strong>Headers</strong>
-    <ul>
-      {#each Object.entries(endpoint.headers) as [hKey, hVal]}
-        <li>
-          {hKey} - {hVal.join('; ')}
-        </li>
-      {/each}
-    </ul>
-  {/if}
-  <Button icon="delete" on:click={() => api.endpoint.delete(endpoint.id)}>
-    Delete
-  </Button>
-</li>
+<ListItem
+  deleteDisabled={selectedID === endpoint.id}
+  editDisabled={selectedID === endpoint.id}
+  {onEdit}
+  {onDelete}
+  ID={endpoint.id}
+  deleted={!!endpoint.deleted}>
+  <svelte:fragment slot="header">
+    {endpoint.url}
+  </svelte:fragment>
+  <svelte:fragment slot="description">
+    Created: {formatDate(endpoint.createdAt)}
 
-<style>
-  .deleted {
-    text-decoration: line-through;
-  }
-</style>
+    {#if endpoint.updatedAt}
+      Updated: {formatDate(endpoint.updatedAt)}
+    {/if}
+  </svelte:fragment>
+  <svelte:fragment slot="details">
+    <Collapse key="item-config">
+      <span slot="title">Details</span>
+      {#if endpoint.config}
+        <div class="sub-item">
+          <ConfigItem config={endpoint.config} />
+        </div>
+      {/if}
+    </Collapse>
+  </svelte:fragment>
+</ListItem>

frontend/src/components/items/RequestItem.svelte

@@ -1,18 +1,40 @@
 <script type="ts">
-  import { slide } from 'svelte/transition'
   import ConfigItem from './ConfigItem.svelte'
+  import ListItem from '../ListItem.svelte'
+  import formatDate from 'dates'
+  import Collapse from 'components/Collapse.svelte'
 
   export let request: ApiDef.RequestEntity
+  export let onEdit: ((ID: string) => void) | undefined = undefined
+  export let onDelete: ((ID: string) => void) | undefined = undefined
+  export let selectedID: string = ''
 </script>
 
-<li transition:slide|local>
-  {request.method}
-  {request.operationName}
-  {new Date(request.createdAt).toLocaleTimeString()}
-  {request.query || ''}
-  {request.variables || ''}
-  {request.body || ''}
-  {#if request.config}
-    <ConfigItem config={request.config} short={true} />
-  {/if}
-</li>
+<ListItem
+  deleteDisabled={selectedID === request.id}
+  editDisabled={selectedID === request.id}
+  {onEdit}
+  {onDelete}
+  ID={request.id}
+  deleted={!!request.deleted}>
+  <svelte:fragment slot="header">
+    {request.operationName}
+  </svelte:fragment>
+  <svelte:fragment slot="description">
+    Created: {formatDate(request.createdAt)}
+
+    {#if request.updatedAt}
+      Updated: {formatDate(request.updatedAt)}
+    {/if}
+  </svelte:fragment>
+  <svelte:fragment slot="details">
+    <Collapse key="item-config">
+      <span slot="title">Details</span>
+      {#if request.config}
+        <div class="sub-item">
+          <ConfigItem config={request.config} />
+        </div>
+      {/if}
+    </Collapse>
+  </svelte:fragment>
+</ListItem>

frontend/src/components/items/ScheduleItem.svelte

@@ -42,7 +42,7 @@
     Last Run: {formatDate(schedule.lastRun)}
   </svelte:fragment>
   <svelte:fragment slot="details">
-    <Collapse key="bob">
+    <Collapse key="item-config">
       <span slot="title">Details</span>
       {#if schedule.config}
         <div class="sub-item">

frontend/src/index.svelte

@@ -65,9 +65,7 @@
       <paper>
         <EndpointForm bind:editID={endpointID} />
       </paper>
-      <paper>
-        <EndpointList bind:selectedID={endpointID} />
-      </paper>
+      <EndpointList bind:selectedID={endpointID} />
     {:else if $state.tab === 'stat'}
       <h2>Statistics</h2>
       <paper>
@@ -78,9 +76,7 @@
       <paper>
         <RequestForm />
       </paper>
-      <paper>
-        <RequestLIst />
-      </paper>
+      <RequestLIst />
     {/if}
   </main>
   {#if $state.serverStats}