#92 allow user to see full URL when they are truncated (#93)

Conserto · Oct 1, 2024 · da8c675 · da8c675
1 parent 678ad08
commit da8c675
Show file tree

Hide file tree

Showing 12 changed files with 46 additions and 31 deletions.
diff --git a/.tool-versions b/.tool-versions
@@ -1 +1,2 @@
 nodejs 22.2.0
+yarn 1.22.22
diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
@@ -245,9 +245,6 @@
   "resDetCountrySwitchUrlHide": {
     "message": "Hide full URL"
   },
-  "resDetCountrySwitchUrlShow": {
-    "message": "Show full URL"
-  },
   "resDetCountTitleHit": {
     "message": "requests"
   },
@@ -484,5 +481,8 @@
   },
   "wuEquivalent": {
     "message": "Water"
+  },
+  "switchUrlShow": {
+    "message": "Show full URL"
   }
 }
diff --git a/public/_locales/fr/messages.json b/public/_locales/fr/messages.json
@@ -245,9 +245,6 @@
   "resDetCountrySwitchUrlHide": {
     "message": "Masquer les URL complètes"
   },
-  "resDetCountrySwitchUrlShow": {
-    "message": "Afficher les URL complètes"
-  },
   "resDetCountTitleHit": {
     "message": "requêtes"
   },
@@ -484,5 +481,8 @@
   },
   "wuEquivalent": {
     "message": "Eau"
+  },
+  "switchUrlShow": {
+    "message": "Afficher les URL complètes"
   }
 }
diff --git a/src/assets/styles/components.scss b/src/assets/styles/components.scss
@@ -50,4 +50,12 @@ h1 {
   font-size: var(--font-size--xl);
   text-align: center;
   color: var(--color--green);
+}
+
+.hide--url .table--url {
+  max-width: 24ch;
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
diff --git a/src/components/cards/ResDetailByCountry.svelte b/src/components/cards/ResDetailByCountry.svelte
@@ -69,7 +69,7 @@
     <Button
       on:buttonClick={switchUrl}
       buttonType={ButtonTypeEnum.PRIMARY}
-      translateKey={'resDetCountrySwitchUrlShow'}
+      translateKey={'switchUrlShow'}
     />
   {/if}
 {/if}

diff --git a/src/components/journey/Synthesis.svelte b/src/components/journey/Synthesis.svelte
@@ -7,6 +7,8 @@
   export let datas: Measure[];
   export let caption: string = '';
   export let description: string = '';
+  export let className: string = '';
+
   let srv = new SynthesisSrv();
   const synthesis = srv.getSynthesis(datas);
 
@@ -27,7 +29,7 @@
 </script>
 
 <!-- TODO trop de code répété, faire un générateur) -->
-<div class="synthesis-container">
+<div class="synthesis-container {className}">
   <table class="table">
     <caption>
       {caption}
@@ -79,7 +81,7 @@
     {#each synthesis.pages as page, index}
       <tr class:even={index % 2 === 0}>
         <td>
-          {page.shortUrl}
+          <span class="table--url">{page.url}</span>
         </td>
         <td class="scroll">{page.sScroll.count}</td>
         <td

diff --git a/src/components/journey/Table.svelte b/src/components/journey/Table.svelte
@@ -10,11 +10,13 @@
   export let datas: Map<string, TableData>[] = [];
   export let caption: string = '';
   export let description: string = '';
+  export let className: string = '';
+
   const dispatch = createEventDispatcher();
   const surHeads = getSurHead(columnHeaders);
 </script>
 
-<div class="table-container">
+<div class="table-container {className}">
   <table class="table">
     <caption>
       {caption}
@@ -61,8 +63,8 @@
                   buttonType={ButtonTypeEnum.SECONDARY}
                   translateKey={data.get(header.id)?.content ?? ""}
                 />
-              {:else if data.get(header.id)?.detail}
-                {data.get(header.id)?.content}
+              {:else if data.get(header.id)?.contentHtml}
+                {@html data.get(header.id)?.contentHtml}
               {:else}
                 {translate(data.get(header.id)?.content)}
               {/if}

diff --git a/src/components/results/JourneyResults.svelte b/src/components/results/JourneyResults.svelte
@@ -3,14 +3,28 @@
   import { formatGesMeasuresForTable, translate } from 'src/utils';
   import { SynthesisTable, Table } from 'src/components/journey';
   import { gesTableHeaders } from 'src/const';
+  import { ButtonTypeEnum } from '../../enum';
+  import { Button } from '../html';
 
   export let measures: Measure[];
 
   const dataFormatted = formatGesMeasuresForTable(measures);
+  let shortUrl = true;
+
+  const switchUrl = () => {
+    shortUrl = !shortUrl;
+  };
 </script>
 
-<SynthesisTable datas={measures} caption={translate('messageResults')} description={translate('descriptionResults')} />
+<SynthesisTable className="{shortUrl ? 'hide--url' : ''}" datas={measures} caption={translate('messageResults')} description={translate('descriptionResults')} />
 <br />
 
-<Table caption={translate('messageResultsDetail')} description={translate('descriptionResultsDetail')}
-       columnHeaders={gesTableHeaders} datas={dataFormatted} />
+<Table className="{shortUrl ? 'hide--url' : ''}" caption={translate('messageResultsDetail')} description={translate('descriptionResultsDetail')}
+       columnHeaders={gesTableHeaders} datas={dataFormatted} />
+<p>
+  <Button
+    on:buttonClick={switchUrl}
+    buttonType={ButtonTypeEnum.PRIMARY}
+    translateKey={'switchUrlShow'}
+  />
+</p>
diff --git a/src/interface/synthesis.interface.ts b/src/interface/synthesis.interface.ts
@@ -7,7 +7,6 @@ export interface Synthesis {
 
 export interface SynthesisLine extends SynthesisBase {
   url: string;
-  shortUrl: string;
 }
 
 export interface SynthesisBase {

diff --git a/src/interface/table.interface.ts b/src/interface/table.interface.ts
@@ -2,7 +2,7 @@ export interface TableData {
   content?: any;
   style?: string;
   action?: boolean;
-  detail?: string;
+  contentHtml?: string;
 }
 
 export interface TableHeader {

diff --git a/src/service/synthesis.service.ts b/src/service/synthesis.service.ts
@@ -1,14 +1,13 @@
 import { GESService, ScoreService } from '.';
 import type {
-  DetailServerGes,
   GES,
   Measure,
   NetworkMeasure, SimpleGES,
   Synthesis,
   SynthesisCommon,
   SynthesisLine
 } from '../interface';
-import { filterMeasure, formatShortUrl } from 'src/utils';
+import { filterMeasure } from 'src/utils';
 
 export class SynthesisSrv {
   private gesService: GESService;
@@ -31,8 +30,7 @@ export class SynthesisSrv {
           sScroll: calScroll,
           sClick: calClick,
           sPage: calPage,
-          url: url,
-          shortUrl: formatShortUrl(url)
+          url: url
         });
       }
     }

diff --git a/src/utils/format.ts b/src/utils/format.ts
@@ -45,7 +45,7 @@ export const formatGesMeasuresForTable = (measures: Measure[], add?: Map<string,
   return measures.map((measure): Map<string, TableData> => {
     let data: Map<any, TableData> = new Map<any, TableData>;
     data.set('date', { content: formatDate(measure.date), style: 'font-weight:bold' });
-    data.set('url', { content: formatShortUrl(measure.url), detail: measure.url });
+    data.set('url', { contentHtml: `<span class="table--url">${measure.url}</span>`});
     data.set('urlAction', { content: measure.action });
     data.set('sizeTransferred', {
       content: formatSizeTransferred(measure.networkMeasure.network.size, measure.networkMeasure.network.sizeUncompress)
@@ -88,15 +88,6 @@ export const formatGesMeasuresForTable = (measures: Measure[], add?: Map<string,
   });
 };
 
-export const formatShortUrl = (url: string | undefined) => {
-  let formatted = '';
-  if (url) {
-    formatted = url.replace(/(^\w+:|^)\/\//, '');
-    formatted = formatted.length > 23 ? `${formatted.slice(0, 23)}...` : formatted;
-  }
-  return formatted;
-};
-
 export const formatUriOnly = (url: string | undefined) => {
   let formatted = '';
   try {