FreeDatas2HTML/src/freeDatas2HTMLPagination.ts

const errors = require("./errors.js");
import {  DOMElement, Paginations, PaginationsOptions, PaginationsPages } from "./freeDatas2HTMLInterfaces";
import { FreeDatas2HTML } from "./freeDatas2HTML";

export class Pagination implements Paginations
{
    private _converter: FreeDatas2HTML;
     // la pagination en cours, qui peut être modifiée/initialisée par l'utilisateur, si des options lui sont proposées :
    private _selectedValue: number|undefined;
    // les éventuelles options de pagination :
    private _options: PaginationsOptions | undefined;
    // les pages proposées, si le nombre d'enregistrement est > à la pagination en cours.
    private _pages: PaginationsPages;

    public static isPositiveInteger(nb: number)
    {
       return  (Number.isInteger(nb) === false ||  nb <= 0) ? false : true;
    }

    // Injection de la classe principale, mais uniquement si les données ont été importées
    // De plus l'élément du DOM devant recevoir la liste des pages doit exister
    constructor(converter: FreeDatas2HTML, pagesElt: DOMElement, pagesName: string="Pages")
    {
        if(converter.fields === undefined)
            throw new Error(errors.paginationNeedDatas);
        else
        {
            this._pages={ displayElement: FreeDatas2HTML.checkInDOMById(pagesElt), name: pagesName };
            this._converter=converter;
        }
    }

    set selectedValue(value : number|undefined)
    {
        if(value === undefined ||  !Pagination.isPositiveInteger(value))
            throw new Error(errors.needPositiveInteger);
        if(this.options !== undefined && this.options.values.indexOf(value) === -1)
            throw new Error(errors.paginationNeedByfaultValueBeInOptions);
        this._selectedValue=value;
    }

    get selectedValue() : number|undefined
    {
        return this._selectedValue;
    }

    set options(options : PaginationsOptions|undefined)
    {
        if(options !== undefined)
        {
            options.displayElement=FreeDatas2HTML.checkInDOMById(options.displayElement);
            if(options.values.length === 0)
                throw new Error(errors.paginationNeedOptionsValues);
            for(let i in options.values)
            {
                if(!Pagination.isPositiveInteger(options.values[i]))
                    throw new Error(errors.needPositiveInteger);
            }
            if(this.selectedValue !== undefined && options.values.indexOf(this.selectedValue) === -1)
                throw new Error(errors.paginationNeedByfaultValueBeInOptions);
            options.name= (options.name===undefined) ? "Pagination" : options.name ; // on garde la possibilité d'une chaîne vide, si souhaité
            this._options=options;
        }
    }

    get options() : PaginationsOptions|undefined
    {
        return this._options;
    }

    get pages() : PaginationsPages
    {
        return this._pages;
    }

    // Création du <select> correspondant aux choix de valeurs de pagination.
    public rend2HTML() : void
    {
        if(this._converter === undefined || this._options === undefined)
            throw new Error(errors.pagination2HTMLFail);
        else
        {
            let selectorsHTML="<label for='freeDatas2HTMLPaginationSelector'>"+this._options.name+" </label><select name='freeDatas2HTMLPaginationSelector' id='freeDatas2HTMLPaginationSelector'><option value='0'>----</option>";
            for(let j in this._options.values)
                 selectorsHTML+="<option value='"+(Number(j)+1)+"'>"+this._options.values[j]+"</option>";
            selectorsHTML+="</select>";
            this._options.displayElement.eltDOM!.innerHTML=selectorsHTML; // initialiser dans le setter
            let selectElement=document.getElementById("freeDatas2HTMLPaginationSelector") as HTMLInputElement;
            // Si une Pagination par défaut existe, on la sélectionne :
            if(this._selectedValue !== undefined)
            {
                let indexSelectedValue=this._options.values.indexOf(this._selectedValue)+1;
                selectElement.value=""+indexSelectedValue;
            }
            const pagination=this;
            selectElement.addEventListener("change", function(e)
           {
                if(selectElement.value === "0")
                    pagination._selectedValue=undefined; // = pas de Pagination
                else                 
                    pagination._selectedValue=pagination._options!.values[Number(selectElement.value)-1];
                // on regénère le HTML :
                pagination._converter.refreshView();
            });            
        }
    }

    // Création du <select> permettant de changer de page
    creaPageSelector(nbTotal:number) : void
    {
         if (this.selectedValue !== undefined)
         {
             if( nbTotal > this.selectedValue)
             {
                let nbPages=Math.ceil(nbTotal/this.selectedValue);
                let selectorsHTML="<label for='freeDatas2HTMLPagesSelector'>"+this.pages.name+" </label><select name='freeDatas2HTMLPagesSelector' id='freeDatas2HTMLPagesSelector'><option value='1'>1</option>";
                this.pages.values=[1];
                for(let j=2; j <= nbPages; j++)
                {
                     selectorsHTML+="<option value='"+j+"'>"+j+"</option>";
                     this.pages.values.push(j);
                 }
                selectorsHTML+="</select>";
                this.pages.displayElement.eltDOM!.innerHTML=selectorsHTML;
                let selectElement=document.getElementById("freeDatas2HTMLPagesSelector") as HTMLInputElement;
                if(this.pages.selectedValue !== undefined)
                    selectElement.value=""+this.pages.selectedValue;
                this.pages.selectedValue=1;
                let pagination=this;
                selectElement.addEventListener('change', function(e)
               {
                    pagination.pages.selectedValue=Number(selectElement.value);
                    pagination._converter.refreshView();
                });
             }
             else
                this.pages.displayElement.eltDOM!.innerHTML="";
            }
            else
                this.pages.displayElement.eltDOM!.innerHTML="";
    }
}