Fab_Blab/FreeDatas2HTML
1
1
Fork 0
Code Issues Pull Requests Projects Releases Activity

Création d'une interface Filters plus généraliste que Selectors en prévision d'autres types de filtres (moteur de recherche). Adaptation des scripts dépendants.

Browse Source
This commit is contained in:
Fabrice PENHOËT 2021-10-20 17:57:34 +02:00
parent 188b475c0e
commit f1cdf1cb5f
7 changed files with 33 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/Selector.ts
View File

@ -53,10 +53,10 @@ export class Selector implements Selectors
}
// Création du <select> dans le HTML correspondant au filtre
public selector2HTML() : void
public filter2HTML() : void
{
if(this._converter === undefined || this._datasViewElt.eltDOM === undefined || this._datasFieldNb === undefined)
throw new Error(errors.selector2HTMLFail);
throw new Error(errors.filter2HTMLFail);
else
{
this.name=this._converter.fields![this._datasFieldNb]; // this._converter.parse... ne peuvent être indéfinis si this._converter existe (cf constructeur)

8
src/exampleWithCSV.ts
View File

@ -61,14 +61,14 @@ const initialise = async () =>
// Création d'outils permettant de filtrer les données des champs de données
let filtre1=new Selector(converter, 3, { id:"filtre1"} );
filtre1.selector2HTML();
filtre1.filter2HTML();
let filtre2=new Selector(converter, 4, { id:"filtre2"} );
filtre2.selector2HTML();
filtre2.filter2HTML();
let filtre3=new Selector(converter, 5, { id:"filtre3"} );
filtre3.separator=",";
filtre3.selector2HTML();
filtre3.filter2HTML();
// + Injection des filtres dans le convertisseur
converter.datasSelectors=[filtre1,filtre2,filtre3];
converter.datasFilters=[filtre1,filtre2,filtre3];
// Ajout de champs permettant de classer les données
// Uniquement avec un rendu tableau (grand écran), car entêtes de colonne nécessaires

4
src/exampleWithHTML.ts
View File

@ -43,8 +43,8 @@ const initialise = async () =>
// Création d'un filtre par auteur :
let filtre1=new Selector(converter, 3, { id:"filtre1"} );
filtre1.selector2HTML();
converter.datasSelectors=[filtre1];
filtre1.filter2HTML();
converter.datasFilters=[filtre1];
// Ajout de champs permettant de classer les données
// Uniquement avec un rendu tableau (grand écran), car entêtes de colonne nécessaires

4
src/exampleWithJSON.ts
View File

@ -44,8 +44,8 @@ const initialise = async () =>
// Création d'un filtre par auteur :
let filtre1=new Selector(converter, 0, { id:"filtre1"} );
filtre1.selector2HTML();
converter.datasSelectors=[filtre1];
filtre1.filter2HTML();
converter.datasFilters=[filtre1];
// Ajout de champs permettant de classer les données
// Uniquement avec un rendu tableau (grand écran), car entêtes de colonne nécessaires

10
src/freeDatas2HTML.ts
View File

@ -1,7 +1,7 @@
const { compare }=require('natural-orderby');
const errors=require("./errors.js");
import { Counter, Datas, DatasRenders, DOMElement, Paginations, Parsers, ParseErrors, RemoteSources, Selectors, SortingFields, SortingFunctions } from "./interfaces";
import { Counter, Datas, DatasRenders, DOMElement, Filters, Paginations, Parsers, ParseErrors, RemoteSources, SortingFields, SortingFunctions } from "./interfaces";
import { Pagination} from "./Pagination";
import { ParserForCSV} from "./ParserForCSV";
import { ParserForHTML} from "./ParserForHTML";
@ -35,7 +35,7 @@ export class FreeDatas2HTML
// Les fonctions spécifiques de classement pour certains champs :
private _datasSortingFunctions: SortingFunctions[] = [];
// Les filtres possible sur certains champs :
datasSelectors: Selectors[] = [];
datasFilters: Filters[] = [];
// Les champs pouvant être classés :
datasSortingFields: SortingFields[] = [];
// La dernier champ pour lequel le classement a été demandé :
@ -206,12 +206,12 @@ export class FreeDatas2HTML
for (let row in datas)
{
let visible=true;
if(this.datasSelectors.length !== 0)
if(this.datasFilters.length !== 0)
{
let i=0;
while(this.datasSelectors[i] !== undefined && visible===true)
while(this.datasFilters[i] !== undefined && visible===true)
{
visible=this.datasSelectors[i].dataIsOk(datas[row]);
visible=this.datasFilters[i].dataIsOk(datas[row]);
i++;
}
}

11
src/interfaces.ts
View File

@ -27,6 +27,12 @@ export interface DOMElement
id: string;
eltDOM?: HTMLElement;
}
export interface Filters
{
datasViewElt: DOMElement;
filter2HTML() : void;
dataIsOk(data: any) : boolean;
}
export interface Paginations
{
options?: PaginationsOptions;
@ -84,15 +90,12 @@ export interface RemoteSources extends RemoteSourceSettings
{
getFetchSettings() : {};
}
export interface Selectors
export interface Selectors extends Filters
{
datasViewElt: DOMElement;
datasFieldNb: number;
separator?: string|undefined;
name?: string;
values?: string[];
selector2HTML() : void;
dataIsOk(data: any) : boolean;
}
export interface SortingFields
{

22
tests/selectorSpec.ts
View File

@ -66,10 +66,10 @@ describe("Test des filtres de données", () =>
it("Doit générer un élement <select> listant les valeurs distinctes du champ spécifié, classées dans le bon ordre.", () =>
{
selector.selector2HTML();
selector.filter2HTML();
expect(document.getElementById("selector1").innerHTML).toEqual(fixtures.selector1HTML);
selector=new Selector(converter, 4, { id:"selector2" });
selector.selector2HTML();
selector.filter2HTML();
expect(document.getElementById("selector2").innerHTML).toEqual(fixtures.selector2HTML);
});
@ -78,7 +78,7 @@ describe("Test des filtres de données", () =>
converter=new FreeDatas2HTML("CSV");
converter.parser.setRemoteSource({ url:"http://localhost:9876/datas/datas1-emtyinfield.csv" });
await converter.run();
selector.selector2HTML();
selector.filter2HTML();
expect(document.getElementById("selector1").innerHTML).toEqual(fixtures.selector1HTML);
});
@ -89,7 +89,7 @@ describe("Test des filtres de données", () =>
await converter.run();
selector=new Selector(converter, 5, { id:"selector1" });
selector.separator="|";
selector.selector2HTML();
selector.filter2HTML();
expect(document.getElementById("selector1").innerHTML).toEqual(fixtures.selector1HTMLWithSeparator);
});
@ -110,7 +110,7 @@ describe("Test des filtres de données", () =>
converter.datasSortingFunctions=[{ datasFieldNb: 4, sort:mySort }];
selector=new Selector(converter, 4, { id:"selector1" });
selector.separator="|";
selector.selector2HTML();
selector.filter2HTML();
expect(document.getElementById("selector1").innerHTML).toEqual(fixtures.selector1HTMLWithFunction);
});
@ -128,7 +128,7 @@ describe("Test des filtres de données", () =>
it("Doit retourner false, si la donnée testée ne possède pas le champ sur lequel les données sont filtrées.", () =>
{
selector.selector2HTML();
selector.filter2HTML();
let selectElement=document.getElementById("freeDatas2HTML_selector1") as HTMLInputElement;
selectElement.value="4";
let data2Test= { // le champ à filtrer ("Famille") est manquant
@ -142,7 +142,7 @@ describe("Test des filtres de données", () =>
it("Doit retourner false, si une donnée testée ne correspond pas à la valeur sélectionnée pour le filtre.", () =>
{
selector.selector2HTML();
selector.filter2HTML();
let selectElement=document.getElementById("freeDatas2HTML_selector1") as HTMLInputElement;
selectElement.value="4";
let data2Test= {
@ -157,7 +157,7 @@ describe("Test des filtres de données", () =>
it("Doit retourner true, si une donnée testée correspond pas à la valeur sélectionnée pour ce filtre.", () =>
{
selector.selector2HTML();
selector.filter2HTML();
let selectElement=document.getElementById("freeDatas2HTML_selector1") as HTMLInputElement;
selectElement.value="4";
let data2Test= {
@ -172,7 +172,7 @@ describe("Test des filtres de données", () =>
it("Doit toujours retourner true, si aucune valeur sélectionnée dans la liste.", () =>
{
selector.selector2HTML();
selector.filter2HTML();
let data2Test= {
"Z (numéro atomique)" : "530",
"Élément": "Yode",
@ -186,8 +186,8 @@ describe("Test des filtres de données", () =>
it("La manipulation d'un sélecteur doit appeler la fonction actualisant l'affichage, y compris pour supprimer ce filtre (0).", () =>
{
selector=new Selector(converter, 3, { id:"selector1" });
selector.selector2HTML();
converter.datasSelectors=[selector];
selector.filter2HTML();
converter.datasFilters=[selector];
spyOn(converter, "refreshView");
let selectElement=document.getElementById("freeDatas2HTML_selector1") as HTMLInputElement;
selectElement.value="4";