category_external_ids: add shortcut button to the customize propertie…

…s settings
inventaire · Jan 13, 2024 · 1d3d049 · 1d3d049
1 parent 2d42071
commit 1d3d049
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 45 deletions.
diff --git a/app/modules/entities/components/layouts/category_external_ids.svelte b/app/modules/entities/components/layouts/category_external_ids.svelte
@@ -2,13 +2,16 @@
   import { categoryLabels } from '#entities/lib/entity_links'
   import EntityClaimLink from '#entities/components/layouts/entity_claim_link.svelte'
   import { user } from '#user/user_store'
-  import { i18n } from '#user/lib/i18n'
+  import { I18n, i18n } from '#user/lib/i18n'
   import { icon } from '#lib/utils'
   import { getTextDirection } from '#lib/active_languages'
+  import DisplayedLinks from '#settings/components/displayed_links.svelte'
+  import Modal from '#components/modal.svelte'
 
   export let category, categoryAvailableExternalIds
 
   let showAllAvailableExternalIds = false
+  let showCategorySettings = false
 
   let categoryPreferredAvailableExternalIds, displayedCategoryExternalIds
   $: {
@@ -25,7 +28,7 @@
       <EntityClaimLink {property} {name} {value} />{#if i !== displayedCategoryExternalIds.length - 1},{/if}
     {/each}
     {#if categoryPreferredAvailableExternalIds.length !== categoryAvailableExternalIds.length}
-      <button on:click={() => showAllAvailableExternalIds = !showAllAvailableExternalIds}>
+      <button class="toggle-external-ids" on:click={() => showAllAvailableExternalIds = !showAllAvailableExternalIds}>
         {#if showAllAvailableExternalIds}
           {@html icon('chevron-left')}
           {i18n('display less')}
@@ -39,25 +42,50 @@
         {/if}
       </button>
     {/if}
+    <button title={i18n('Customize which links should be displayed')} on:click={() => showCategorySettings = true}>
+      {@html icon('cog')}
+    </button>
   </p>
 {/if}
 
+{#if showCategorySettings}
+  <Modal on:closeModal={() => showCategorySettings = false}>
+    <div class="modal-inner">
+      <h3>{i18n('Which links would you like to see by default?')}</h3>
+      <DisplayedLinks {category} />
+      <button class="tiny-button light-blue" on:click={() => showCategorySettings = false}>{I18n('done')}</button>
+    </div>
+  </Modal>
+{/if}
+
 <style lang="scss">
   @import "#general/scss/utils";
   .category-label{
     color: $label-grey;
   }
-  button{
+  .toggle-external-ids{
     margin-inline-start: 0.5em;
     @include shy;
-    :global(.fa){
+    :global(.fa-chevron-left), :global(.fa-chevron-right){
       font-size: 0.8rem;
       width: 0.7rem;
     }
   }
   [dir="rtl"]{
-    button :global(.fa){
+    :global(.fa-chevron-left), :global(.fa-chevron-right){
       transform: rotate(180deg);
     }
   }
+  h3{
+    @include sans-serif;
+    text-align: center;
+    font-size: 1.1rem;
+  }
+  .modal-inner{
+    margin: 1em;
+    .tiny-button{
+      display: block;
+      margin: 0 auto;
+    }
+  }
 </style>
diff --git a/app/modules/settings/components/displayed_links.svelte b/app/modules/settings/components/displayed_links.svelte
@@ -5,6 +5,8 @@
   import Flash from '#lib/components/flash.svelte'
   import { debounce, difference, intersection, uniq } from 'underscore'
 
+  export let category = null
+
   const { bibliographicDatabases, socialNetworks } = websitesByCategoryAndName
 
   const bibliographicDatabasesNames = Object.keys(bibliographicDatabases)
@@ -55,45 +57,49 @@
   }
 </script>
 
-<section>
-  <label class="category">
-    <input
-      type="checkbox"
-      checked={selectedBibliographicDatabasesCount === bibliographicDatabasesNames.length}
-      indeterminate={selectedBibliographicDatabasesCount !== 0 && selectedBibliographicDatabasesCount !== bibliographicDatabasesNames.length}
-      on:click={() => toggleAllSection({ names: bibliographicDatabasesNames, selectedCount: selectedBibliographicDatabasesCount })}
-    />
-    {I18n('bibliographic databases')}
-  </label>
-  <fieldset>
-    {#each bibliographicDatabasesNames as websiteName}
-      <label>
-        <input type="checkbox" bind:group={selectedWebsites} value={websiteName} />
-        {websiteName}
-      </label>
-    {/each}
-  </fieldset>
-</section>
+{#if category == null || category === 'bibliographicDatabases'}
+  <section>
+    <label class="category">
+      <input
+        type="checkbox"
+        checked={selectedBibliographicDatabasesCount === bibliographicDatabasesNames.length}
+        indeterminate={selectedBibliographicDatabasesCount !== 0 && selectedBibliographicDatabasesCount !== bibliographicDatabasesNames.length}
+        on:click={() => toggleAllSection({ names: bibliographicDatabasesNames, selectedCount: selectedBibliographicDatabasesCount })}
+      />
+      {I18n('bibliographic databases')}
+    </label>
+    <fieldset>
+      {#each bibliographicDatabasesNames as websiteName}
+        <label>
+          <input type="checkbox" bind:group={selectedWebsites} value={websiteName} />
+          {websiteName}
+        </label>
+      {/each}
+    </fieldset>
+  </section>
+{/if}
 
-<section>
-  <label class="category">
-    <input
-      type="checkbox"
-      checked={selectedSocialNetworksCount === socialNetworksNames.length}
-      indeterminate={selectedSocialNetworksCount !== 0 && selectedSocialNetworksCount !== socialNetworksNames.length}
-      on:click={() => toggleAllSection({ names: socialNetworksNames, selectedCount: selectedSocialNetworksCount })}
-    />
-    {I18n('social networks')}
-  </label>
-  <fieldset>
-    {#each socialNetworksNames as websiteName}
-      <label>
-        <input type="checkbox" bind:group={selectedWebsites} value={websiteName} />
-        {websiteName}
-      </label>
-    {/each}
-  </fieldset>
-</section>
+{#if category == null || category === 'socialNetworks'}
+  <section>
+    <label class="category">
+      <input
+        type="checkbox"
+        checked={selectedSocialNetworksCount === socialNetworksNames.length}
+        indeterminate={selectedSocialNetworksCount !== 0 && selectedSocialNetworksCount !== socialNetworksNames.length}
+        on:click={() => toggleAllSection({ names: socialNetworksNames, selectedCount: selectedSocialNetworksCount })}
+      />
+      {I18n('social networks')}
+    </label>
+    <fieldset>
+      {#each socialNetworksNames as websiteName}
+        <label>
+          <input type="checkbox" bind:group={selectedWebsites} value={websiteName} />
+          {websiteName}
+        </label>
+      {/each}
+    </fieldset>
+  </section>
+{/if}
 
 <Flash bind:state={flash} />
 
@@ -105,7 +111,7 @@
     @include radius;
   }
   fieldset{
-    @include display-flex(row, null, null, wrap);
+    columns: 15rem auto;
   }
   .category{
     font-weight: bold;
@@ -116,7 +122,6 @@
   label:not(.category){
     font-size: 1rem;
     @include display-flex(row, center);
-    width: min(15em, 80vw);
     padding: 0.5em;
   }
 </style>