docs/CHANGELOG.md

 # Changelog
 
+## [1.5.0](https://gitlab.mim-libre.fr/alphabet/laboite-blog-front/compare/release/1.4.0...release/1.5.0) (2023-01-30)
+
+
+### Features
+
+* **groups:** display structure groups correctly ([07b0960](https://gitlab.mim-libre.fr/alphabet/laboite-blog-front/commit/07b0960cabc9017698ec8385cb18f78d783ab19f))
+* **tag:** factorise add tags management ([84cb2a5](https://gitlab.mim-libre.fr/alphabet/laboite-blog-front/commit/84cb2a5377450cebf235ee99e099e5c60b7f2770))
+* **tags:** allow click for searching on article tags ([b2c4c3d](https://gitlab.mim-libre.fr/alphabet/laboite-blog-front/commit/b2c4c3d1c561038882269bb865c3974bdb2e7a4c))
+
+
+### Bug Fixes
+
+* **stylesheet:** delete import from quilljs cdn ([fb9255e](https://gitlab.mim-libre.fr/alphabet/laboite-blog-front/commit/fb9255ee48d1b16113f15825e13b45730b6c14ff))
+* **tags:** delete tagfilter in useless pages ([af6fc31](https://gitlab.mim-libre.fr/alphabet/laboite-blog-front/commit/af6fc31b6a9e08e19a9735fdeece33cd5c9788a5))
+
 ## [1.4.0](https://gitlab.mim-libre.fr/alphabet/laboite-blog-front/compare/release/1.3.0...release/1.4.0) (2022-11-22)
 
 

package.json

 {
   "name": "laboite-blog-front",
   "description": "laboite blog service frontend",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "license": "EUPL-1.2",
   "author": "EOLE/PCLL <team@eole.education> - DINUM",
   "type": "module",

src/components/articles/SingleArticleBlock.svelte

@@ -3,6 +3,7 @@
   import {getStores} from '$app/stores';
   import BigLink from '../common/BigLink.svelte';
   import SingleTag from '../common/SingleTag.svelte';
+  import { getGroupName } from '../../utils/functions/groups';
   const {page} = getStores();
   const tags = $page.url.searchParams.get('tags') || '';
 
@@ -42,7 +43,7 @@
       <div class="tags">
         {#each article.groups as tag}
           <span class="tag is-medium">
-            {tag.name}
+            {getGroupName(tag)}
           </span>
         {/each}
       </div>
@@ -55,6 +56,8 @@
             {tag}
             disabled={!!queryTags.length &&
               queryTags.filter(t => t !== tag).length === queryTags.length}
+            tagSearch={$page.url.pathname === '/articles'}
+            on:getTag
           />
         {/each}
       </div>

src/components/common/SingleTag.svelte

 <script>
+  import {_} from 'svelte-i18n';
+  import {createEventDispatcher} from 'svelte';
+
   export let tag;
   export let disabled = false;
   export let onDelete = null;
+  export let tagSearch = false;
+
+  const dispatch = createEventDispatcher();
+
+  function getTag(tag) {
+    dispatch('getTag', {
+      tag: tag,
+    });
+  }
 </script>
 
-<span class="tag is-medium" class:disabled
-  >{tag}{#if onDelete}
+<span class="tag is-medium" class:disabled>
+  {tag}
+  {#if onDelete}
     <button class="delete is-medium" on:click={onDelete} />
-  {/if}</span
->
+  {/if}
+  {#if tagSearch}
+    <button
+      class="buttonSearch is-medium"
+      on:click={getTag(tag)}
+      title={$_('components.SearchField.search') + ' ' + `${tag}`}
+    >
+      <i class="fas fa-search" />
+    </button>
+  {/if}
+</span>
 
 <style>
+  .buttonSearch {
+    background-color: var(--secondary);
+    border: none;
+    color: var(--tertiary);
+    margin-left: 0.5vw;
+    padding: 5px;
+  }
+  .buttonSearch:hover {
+    cursor: pointer;
+    border: 1px solid white;
+    border-radius: 20px;
+  }
+
   .tag {
     text-decoration: none;
     transition: all 0.2s ease-in-out;
     background-color: var(--secondary);
-    color: var(--tertiary);
     border-radius: 20px;
   }
   .tag.disabled {

src/components/common/TagsFilter.svelte

 <script>
   import {_} from 'svelte-i18n';
+  import {createEventDispatcher} from 'svelte';
   import {goto} from '$app/navigation';
   import {getStores} from '$app/stores';
   import {toQuery} from '../../utils/functions/queryStringMaker';
@@ -10,14 +11,20 @@
   export let query = {};
   export let path;
   export let tagsList;
-  let queryTags;
-  $: if ($page.url.searchParams.get('tags')) {
-    queryTags = $page.url.searchParams.get('tags').split(',');
-  } else {
-    queryTags = [];
+  export let queryTags;
+
+  const dispatch = createEventDispatcher();
+
+  function addTag(tag) {
+    dispatch('addTag', {
+      tag: tag,
+    });
   }
+
   let opened = false;
 
+  const toggleOpened = () => (opened = !opened);
+
   const resetUrl = () =>
     `${path}?${toQuery({
       ...query,
@@ -25,8 +32,6 @@
       tags: '',
     })}`;
 
-  const toggleOpened = () => (opened = !opened);
-
   const deleteTag = tag => {
     if (queryTags.length === 1) {
       goto(resetUrl());
@@ -41,17 +46,6 @@
       goto(url);
     }
   };
-  const addTag = tag => {
-    const tagsArray = [...queryTags];
-    tagsArray.push(tag);
-    const tagsString = tagsArray.join(',');
-    const url = `${path}?${toQuery({
-      ...query,
-      page: 1,
-      tags: tagsString,
-    })}`;
-    goto(url);
-  };
 </script>
 
 {#if !opened}

src/components/groups/GroupCard.svelte

 <script>
   import {_} from 'svelte-i18n';
   import {fetchData} from '../../utils/api/methods';
+  import {getGroupName, getGroupAvatar} from '../../utils/functions/groups';
   import Avatar from '../authors/Avatar.svelte';
   import BigLink from '../common/BigLink.svelte';
   import {onMount} from 'svelte';
@@ -27,10 +28,10 @@
   <div class="card-content">
     <div class="media">
       <div class="media-left">
-        <Avatar firstName={group.name} avatar={group.avatar} />
+        <Avatar firstName={getGroupAvatar(group)} avatar={group.avatar} />
       </div>
       <div class="media-content">
-        <p class="title is-4">{group.name}</p>
+        <p class="title is-4">{getGroupName(group)}</p>
       </div>
     </div>
   </div>

src/routes/academies/[_id]/articles/index.svelte

@@ -80,7 +80,6 @@
   import Pagination from '../../../../components/common/Pagination.svelte';
   import NoResults from '../../../../components/common/NoResults.svelte';
   import BackButton from '../../../../components/navigation/BackButton.svelte';
-  import TagsFilter from '../../../../components/common/TagsFilter.svelte';
   import PageTransition from '../../../../components/common/PageTransition.svelte';
   import FavoritesButton from '../../../../components/common/FavoritesButton.svelte';
 
@@ -90,7 +89,6 @@
   export let page = 1;
   export let query = {};
   export let path = '';
-  export let tagsList = [];
   export let academy;
   export let isResearchLink;
   export let request;
@@ -139,11 +137,6 @@
           <Pagination {total} {page} {limit} {query} {path} />
         {/if}
       </div>
-      <div class="column is-full">
-        {#if !$navigating}
-          <TagsFilter {query} {path} {tagsList} />
-        {/if}
-      </div>
     </div>
 
     {#if articles.length}

src/routes/articles/[slug].svelte

@@ -65,7 +65,6 @@
     |
     {article ? article.title : $_('pages.article.no_article_title')}
   </title>
-  <link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet" />
 </svelte:head>
 
 <PageTransition>
@@ -108,7 +107,7 @@
                 content={article.content}
               />
             {:else}
-              <div class="ql-editor">
+              <div class="quill-editor">
                 {@html article.content}
               </div>
             {/if}
@@ -169,6 +168,20 @@
 </PageTransition>
 
 <style>
+  .quill-editor {
+    box-sizing: border-box;
+    cursor: text;
+    line-height: 1.42;
+    height: 100%;
+    outline: none;
+    overflow-y: auto;
+    padding: 12px 15px;
+    tab-size: 4;
+    -moz-tab-size: 4;
+    text-align: left;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+  }
   .content {
     text-align: justify;
   }

src/routes/articles/index.svelte

@@ -74,17 +74,42 @@
   import TagsFilter from '../../components/common/TagsFilter.svelte';
   import PageTransition from '../../components/common/PageTransition.svelte';
   import FavoritesButton from '../../components/common/FavoritesButton.svelte';
+  import {toQuery} from '../../utils/functions/queryStringMaker';
+  import {goto} from '$app/navigation';
 
   export let articles = [];
   export let total = 0;
   export let limit;
-  export let page = 1;
+  export let currentPage = 1;
   export let query = {};
   export let path = '';
   export let tagsList = [];
   export let isResearchLink;
   export let request;
-  const {navigating} = getStores();
+  const {navigating, page} = getStores();
+
+  let tagSearch = '';
+  let queryTags;
+
+  $: if ($page.url.searchParams.get('tags')) {
+    queryTags = $page.url.searchParams.get('tags').split(',');
+  } else {
+    queryTags = [];
+  }
+
+  function addTag(event) {
+    const tagsArray = [...queryTags];
+    tagsArray.push(event.detail.tag);
+    const tagsString = tagsArray.join(',');
+    const url = `${path}?${toQuery({
+      ...query,
+      page: 1,
+      tags: tagsString,
+    })}`;
+    goto(url);
+  }
+
+  $: tagSearch = tagSearch;
 </script>
 
 <svelte:head>
@@ -118,12 +143,18 @@
       </div>
       <div class="column is-half is-full-mobile">
         {#if !$navigating}
-          <Pagination {total} {page} {limit} {query} {path} />
+          <Pagination {total} {currentPage} {limit} {query} {path} />
         {/if}
       </div>
       <div class="column is-full">
         {#if !$navigating}
-          <TagsFilter {query} {path} {tagsList} />
+          <TagsFilter
+            {query}
+            {path}
+            {tagsList}
+            on:addTag={addTag}
+            {queryTags}
+          />
         {/if}
       </div>
     </div>
@@ -131,14 +162,14 @@
     {#if articles.length}
       <div class="columns is-multiline">
         {#each articles as article, index}
-          <SingleArticleBlock {article} />
+          <SingleArticleBlock {article} on:getTag={addTag} />
         {/each}
       </div>
     {:else}
       <NoResults query={!!Object.keys(query).length} />
     {/if}
     {#if !$navigating}
-      <Pagination {total} {page} {limit} {query} {path} />
+      <Pagination {total} {currentPage} {limit} {query} {path} />
     {/if}
   </section>
 </PageTransition>

src/routes/authors/[_id].svelte

@@ -65,7 +65,6 @@
   import NoResults from '../../components/common/NoResults.svelte';
   import Avatar from '../../components/authors/Avatar.svelte';
   import BackButton from '../../components/navigation/BackButton.svelte';
-  import TagsFilter from '../../components/common/TagsFilter.svelte';
   import FavoritesButton from '../../components/common/FavoritesButton.svelte';
   import PageTransition from '../../components/common/PageTransition.svelte';
 
@@ -121,11 +120,6 @@
           <Pagination {total} {page} {limit} {query} {path} />
         {/if}
       </div>
-      <div class="column is-full">
-        {#if !$navigating}
-          <TagsFilter {query} {path} {tagsList} />
-        {/if}
-      </div>
     </div>
 
     {#if articles.length}

src/routes/groups/[slug].svelte

@@ -56,10 +56,10 @@
   import Pagination from '../../components/common/Pagination.svelte';
   import NoResults from '../../components/common/NoResults.svelte';
   import BackButton from '../../components/navigation/BackButton.svelte';
-  import TagsFilter from '../../components/common/TagsFilter.svelte';
   import FavoritesButton from '../../components/common/FavoritesButton.svelte';
   import PageTransition from '../../components/common/PageTransition.svelte';
   import Avatar from '../../components/authors/Avatar.svelte';
+  import {getGroupName, getGroupAvatar} from '../../utils/functions/groups';
 
   export let articles = [];
   export let group = {};
@@ -91,12 +91,12 @@
     <div class="container">
       <article class="media">
         <figure class="media-left">
-          <Avatar avatar={group.avatar} firstName={group.name} />
+          <Avatar avatar={group.avatar} firstName={getGroupAvatar(group)} />
         </figure>
 
         <div class="media-content">
           <div class="content">
-            <h1 class="title">{group.name}</h1>
+            <h1 class="title">{getGroupName(group)}</h1>
           </div>
         </div>
       </article>
@@ -111,11 +111,6 @@
           <Pagination {total} {page} {limit} {query} {path} />
         {/if}
       </div>
-      <div class="column is-full">
-        {#if !$navigating}
-          <TagsFilter {query} {path} {tagsList} />
-        {/if}
-      </div>
     </div>
 
     {#if articles.length}

src/utils/functions/groups.js

+export const getGroupName = (group) => {
+  if (group.type !== 15) return group.name;
+
+  return `[STRUC] ${group.name.slice(group.name.indexOf('_') + 1, group.name.length)}`;
+};
+
+export const getGroupAvatar = (group) => {
+  if (group.type !== 15) return group.name;
+
+  return group.name.slice(group.name.indexOf('_') + 1, group.name.length);
+}