fixup! add a basic user lists layout

inventaire · Aug 7, 2022 · ab849aa · ab849aa
1 parent f4514fe
commit ab849aa
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 30 deletions.
diff --git a/app/modules/lists/components/list_creator.svelte b/app/modules/lists/components/list_creator.svelte
@@ -1,8 +1,7 @@
 <script>
   import { icon } from '#lib/handlebars_helpers/icons'
-  // import ListEditor from '#modules/lists/components/list_editor.svelte'
   import { createList } from '#modules/lists/lib/lists'
-  import { I18n, i18n } from '#user/lib/i18n'
+  import { i18n } from '#user/lib/i18n'
 
   export let list = {}
 
@@ -22,15 +21,14 @@
     class="tiny-button light-blue"
     >
     {@html icon('plus')}
-    {I18n('create')}
+    {i18n('Create a new list')}
   </button>
 </form>
 
 <style lang="scss">
   @import '#general/scss/utils';
-
   form{
-    @include display-flex(row, center, center);
+    @include display-flex(row, center, flex-end);
     max-width: 30em;
     flex: 1 0 auto;
   }
@@ -40,9 +38,10 @@
     white-space: nowrap;
   }
   input{
-    max-width: 20em;
+    max-width: 30em;
     margin: 0;
     margin-left: 0.5em;
+    flex: 1;
   }
   .tiny-button{
     padding: 0.5em;

diff --git a/...ules/lists/components/lists_layout.svelte → ...odules/lists/components/user_lists.svelte b/...ules/lists/components/lists_layout.svelte → ...odules/lists/components/user_lists.svelte
@@ -1,9 +1,18 @@
 <script>
   import ListCreator from '#modules/lists/components/list_creator.svelte'
-  import { serializeList } from '#modules/lists/lib/lists'
+  import { getListsByCreator, serializeList } from '#modules/lists/lib/lists'
   import { i18n, I18n } from '#user/lib/i18n'
   import { loadInternalLink } from '#lib/utils'
-  export let lists, user
+  import Flash from '#lib/components/flash.svelte'
+  import Spinner from '#components/spinner.svelte'
+
+  export let user
+
+  let lists, flash
+
+  const waitingForLists = getListsByCreator(user._id)
+    .then(res => lists = res.lists.map(serializeList))
+    .catch(err => flash = err)
 
   const isMainUser = user._id === app.user.id
   let newList = {}
@@ -17,26 +26,31 @@
 <div class="lists-layout">
   <h3 class="subheader">{I18n('lists')}</h3>
 
-  <ul>
-    {#each lists as list}
-      <li>
-        <a href={list.pathname} on:click={loadInternalLink}>
-          {list.name}
-        </a>
-      </li>
-    {/each}
-    {#if lists.length === 0}
-      <li class="empty">
-        {i18n('There is nothing here')}
-      </li>
+  {#await waitingForLists}
+    <Spinner />
+  {:then}
+    <ul>
+      {#each lists as list}
+        <li>
+          <a href={list.pathname} on:click={loadInternalLink}>
+            {list.name}
+          </a>
+        </li>
+      {/each}
+      {#if lists.length === 0}
+        <li class="empty">
+          {i18n('There is nothing here')}
+        </li>
+      {/if}
+    </ul>
+    {#if isMainUser}
+      <div class="menu">
+        <ListCreator bind:list={newList} />
+      </div>
     {/if}
-  </ul>
+  {/await}
 
-  {#if isMainUser}
-    <div class="menu">
-      <ListCreator bind:list={newList} />
-    </div>
-  {/if}
+  <Flash state={flash} />
 </div>
 
 <style lang="scss">

diff --git a/app/modules/lists/lists.js b/app/modules/lists/lists.js
@@ -1,4 +1,4 @@
-import { getListsByCreator, getListWithSelectionsById, serializeList } from './lib/lists.js'
+import { getListWithSelectionsById } from './lib/lists.js'
 
 export default {
   initialize () {
@@ -26,12 +26,10 @@ async function showList (id) {
 }
 
 async function showMainUserLists () {
-  const { default: ListsLayout } = await import('./components/lists_layout.svelte')
+  const { default: ListsLayout } = await import('./components/user_lists.svelte')
   try {
-    const { lists } = await getListsByCreator(app.user.id)
     app.layout.showChildComponent('main', ListsLayout, {
       props: {
-        lists: lists.map(serializeList),
         user: app.user.toJSON()
       }
     })