works browser: add action button when table mode display

inventaire · May 17, 2023 · c6b864e · c6b864e
1 parent b8c7234
commit c6b864e
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 21 deletions.
diff --git a/app/modules/entities/components/layouts/add_to_dot_dot_dot_menu.svelte b/app/modules/entities/components/layouts/add_to_dot_dot_dot_menu.svelte
@@ -4,6 +4,7 @@
   import Dropdown from '#components/dropdown.svelte'
   import { userListings } from '#listings/lib/stores/user_listings'
   import { addElement, getUserListingsByEntityUri, removeElement } from '#modules/listings/lib/listings'
+  import { getSubEntities } from '../lib/entities'
   import Spinner from '#components/spinner.svelte'
   import { onChange } from '#lib/svelte/svelte'
   import { pluck } from 'underscore'
@@ -12,7 +13,7 @@
   import EntitiesList from '#entities/components/layouts/entities_list.svelte'
   import EditionCreation from '#entities/components/layouts/edition_creation.svelte'
 
-  export let entity, editions, flash
+  export let entity, editions, flash, align
 
   const { uri } = entity
   const { loggedIn } = app.user
@@ -58,13 +59,23 @@
     }
   }
 
+  async function fetchEditions () {
+    if (!editions) {
+      editions = await getSubEntities('work', entity.uri)
+    }
+  }
+
   let showListingCreationModal = false
   let showEditionPickerModal = false
+
+  $:onChange(showEditionPickerModal, fetchEditions)
 </script>
 
 <div class="add-to-dot-dot-dot-menu">
   {#if loggedIn}
-    <Dropdown buttonTitle={i18n('Add this work to your inventory or to a list')}
+    <Dropdown
+      {align}
+      buttonTitle={i18n('Add this work to your inventory or to a list')}
     >
       <div slot="button-inner">
         <span>

diff --git a/app/modules/entities/components/layouts/editions_list.svelte b/app/modules/entities/components/layouts/editions_list.svelte
@@ -39,8 +39,7 @@
       entities={editions}
       relatedEntities={publishersByUris}
       {parentEntity}
-      type="editions"
-      {itemsByEditions}
+      itemsByEditions={itemsByEditions}
     />
   {:else}
     <div class="no-edition-wrapper">

diff --git a/app/modules/entities/components/layouts/entities_list.svelte b/app/modules/entities/components/layouts/entities_list.svelte
@@ -4,8 +4,7 @@
   import WrapToggler from '#components/wrap_toggler.svelte'
   import EditionActions from './edition_actions.svelte'
 
-  // type is optional
-  export let type, entities, relatedEntities, parentEntity, itemsByEditions
+  export let type = 'editions', entities, relatedEntities, parentEntity, itemsByEditions
 
   let showMore = false
   let shownEntities = entities

diff --git a/app/modules/entities/components/layouts/entity_list_row.svelte b/app/modules/entities/components/layouts/entity_list_row.svelte
@@ -31,9 +31,9 @@
     <a
       href={pathname}
       on:click={loadInternalLink}
-      title={title}
+      {title}
       tabindex="-1"
-      >
+    >
       <ImagesCollage
         imagesUrls={images || [ image.url ]}
         limit={isSubEntitiesType(type) ? 4 : 1}
@@ -47,8 +47,8 @@
           href={pathname}
           on:click={loadInternalLink}
           class="link"
-          title={title}
-          >
+          {title}
+        >
           {#if layoutContext === 'serie' && serieOrdinal}
             {serieOrdinal}.
           {/if}
@@ -72,7 +72,7 @@
       <div class="entity-details">
         <Infobox
           {claims}
-          bind:relatedEntities={relatedEntities}
+          bind:relatedEntities
           {listDisplay}
           shortlistOnly={true}
           entityType={type}
@@ -81,6 +81,9 @@
     {/if}
   </div>
 </div>
+{#if type === 'work'}
+  <slot name="actions" />
+{/if}
 <style lang="scss">
   @import "#general/scss/utils";
   .entity-wrapper{
@@ -118,6 +121,7 @@
   @media screen and (max-width: $smaller-screen) {
     .entity-wrapper{
       flex-wrap: wrap;
+      align-self: center;
     }
     .cover{
       width: 5em;

diff --git a/app/modules/entities/components/layouts/work_actions.svelte b/app/modules/entities/components/layouts/work_actions.svelte
@@ -9,12 +9,11 @@
 
   const dispatch = createEventDispatcher()
 
-  export let entity, editions, someEditions, itemsUsers
-
+  export let entity, editions, someEditions, itemsUsers, align
   let areNotOnlyMainUserItems, flash
 
   function hasUsersOtherThanMainUser () {
-    if (itemsUsers.length === 0) return false
+    if (!itemsUsers || itemsUsers.length === 0) return false
     if (_.isEqual(itemsUsers, [ app.user.id ])) return false
     return true
   }
@@ -31,6 +30,7 @@
     {entity}
     {editions}
     {flash}
+    {align}
   />
   {#if someEditions && areNotOnlyMainUserItems}
     {#if $screen.isSmallerThan('$small-screen')}
@@ -61,7 +61,9 @@
   .actions-wrapper{
     @include display-flex(column, stretch, center);
     margin: 1em 0;
+    min-width: 10em;
     .action-button, :global(.add-to-dot-dot-dot-menu){
+      text-align: end;
       margin-bottom: 0.3em;
     }
     .action-button, :global(.dropdown-button){
@@ -71,4 +73,10 @@
   .action-button{
     @include tiny-button($light-grey, black);
   }
+  /*Small screens*/
+  @media screen and (max-width: $smaller-screen) {
+    .actions-wrapper{
+      @include display-flex(row);
+    }
+  }
 </style>
diff --git a/app/modules/entities/components/layouts/works_browser_section.svelte b/app/modules/entities/components/layouts/works_browser_section.svelte
@@ -1,13 +1,14 @@
 <script>
-  import WorkGridCard from '#entities/components/layouts/work_grid_card.svelte'
   import EntityListRow from '#entities/components/layouts/entity_list_row.svelte'
-  import { i18n, I18n } from '#user/lib/i18n'
+  import SectionLabel from '#entities/components/layouts/section_label.svelte'
+  import WorkGridCard from '#entities/components/layouts/work_grid_card.svelte'
+  import WorkActions from '#entities/components/layouts/work_actions.svelte'
+  import { i18n } from '#user/lib/i18n'
   import { bySearchMatchScore, getSelectedUris } from '#entities/components/lib/works_browser_helpers'
   import { onChange } from '#lib/svelte/svelte'
   import { flip } from 'svelte/animate'
   import { setIntersection } from '#lib/utils'
-  import SectionLabel from '#entities/components/layouts/section_label.svelte'
-
+  import { screen } from '#lib/components/stores/screen'
   export let section, displayMode, facets, facetsSelectedValues, textFilterUris
 
   const { label, entities: works } = section
@@ -52,17 +53,23 @@
       class:list={displayMode === 'list'}
       on:scroll={onWorksScroll}
       bind:this={scrollableElement}
-      >
+    >
       {#each displayedWorks as work (work.uri)}
         <li animate:flip={{ duration: 300 }}>
           {#if displayMode === 'grid'}
             <WorkGridCard {work} />
           {:else}
             <EntityListRow
               entity={work}
-              bind:relatedEntities={relatedEntities}
+              bind:relatedEntities
               listDisplay={true}
-            />
+            >
+              <WorkActions
+                slot="actions"
+                entity={work}
+                align={$screen.isSmallerThan('$smaller-screen') ? 'center' : 'right'}
+              />
+            </EntityListRow>
           {/if}
         </li>
       {/each}
@@ -95,9 +102,21 @@
       background-color: white;
     }
   }
+  li{
+    @include display-flex(row, inherit, space-between);
+    background-color: white;
+  }
   .no-work{
     text-align: center;
     color: $grey;
     margin-bottom: 0.5em;
   }
+  /*Small screens*/
+  @media screen and (max-width: $smaller-screen) {
+    li{
+      @include display-flex(column);
+      margin-bottom: 0.5em;
+      padding: 0;
+    }
+  }
 </style>