bizmate-components v1.0.2

Bizmate svelte-components

To install:

npm i bizmate-components -D

Template di riferimento

In tal caso dovesse cambiare il README ho salvato una copia dell'originale all'interno della repository. E' stato scelto un tipo di template "regular" in modo da poter gestire più di un singolo componente.

E' stato integrato storybook. Per startarlo in development mode:

npm run storybook

Va bene mantenere storybook o non è necessario e deve essere tolto? (eventualmente inserire Table su story)

Componenti

Input

Per validare il form è necessario installare la libreria svelte-forms (non necessario)

<script>
    import {form} from 'svelte-forms';
    let example;
    
    const validator = form(() => ({
        idField: {value: example, validators: ['required']},
    }))
</script>

<Input type="text" id="idField" label="Label example" placeholder="Placeholder example" bind:value={example} form={validator} error="Customized error" {readonly} />

Modal

<script>
    import {Modal, openModal} from 'bizmate-components';
    function tmp(){
        openModal('modal-id')
            .then(response => {
                console.log(response)
            })
    }
</script>

<Modal id="modal-id" title="Title example">
    Modal body
</Modal>

Code

<script>
    import {Code} from 'bizmate-components';
    let obj = {"example": 12}
</script>

<Code id="code" bind:code={obj} label="Default label" readonly={true}/>

Table

In questo caso nel componente sono stati lasciati dei commenti riguardo dove è stato preso il codice (quando si cita LM & my-acc fa riferimento alla versione di Table presente nella repository di gogs) E' stata data "precedenza" al codice su meraki-backup dato che è l'ultimo modificato (su LM e my-acc le versioni sono identiche perché prende il componente da gogs) Nel caso del TableRow, l'ultima versione di meraki-backup non permetteva di selezionare obj di obj nella riga (non ritornava errore, ma risultava vuoto)

Feature test:

• pageRows funzionante
• isSelectable && selected funzionante
• isExportable funzionante
  • PDF funzionante
  • CSV funzionante
  • XLS non funziona aperto con libreOffice. Lo stesso file aperto su una versione non-open di excel funziona.
• checkbox funzionante
• search funzionante

• sortable funzionante

• currentPage --> esempio se metto currentPage 1 mi mostrerà tutti i record dalla pagina 1 all'ultima. è corretta come cosa o è un bug? waiting

• il conteggio degli elementi selezionati si perde se si seleziona un'altra riga ---> selected è utilizzata sia per la selezione della singola riga, sia per selezionare elementi multipli con la checkbox. Deve essere usata una variabile diversa?

<script>
    let selectedUser = false;
    // Per aprire la pagina relativa ad un record della tabella
    $: if(selectedUser) { goto(`/path/${selectedUser._id}`) }
    let users = [{
        name: "username1",
        email: "email@gmail.com",
        token: "cffbbtg135",
        date: new Date('2018-07-22')
    },
    {
        name: "username2",
        email: "email2@gmail.com",
        token: "cffbbtg135",
        date: new Date('December 17, 1995 03:24:00')
    }]
    let usersCols = [
        {
            id: 'name',
            label: 'Name'
        },
        {
            id: 'email',
            label: 'Email'
        },
        {
            id: 'token',
            label: '',
            format: () => '<i class="fas fa-eye"></i>',
            click: (val) => tmp(val),
            sortable: false
        }
    ];
    function tmp(val){
        console.log("Your value is seen by the execution of this function", val);
    }

</script>

<Table title="title" id="id-tabke" cols={usersCols} rows={users} pageRows={20} isSelectable isExportable bind:selected={selectedUser}/>

AdaptiveCard

Per prendersi i dati valorizzati della configurazione bisogna usare il metodo getData e fare bind:this={variabile}.

<script>
    let template = {"type":"AdaptiveCard","version":"1.3","body":[{"type":"Input.Number","placeholder":"ex.: 1","id":"mvdevice_limit","value":1,"label":"MV Device Limit","isRequired":true,"errorMessage":"Value required"},{"type":"Input.Number","placeholder":"ex.: 1","id":"mvnetwork_limit","value":1,"label":"MV Network Limit","isRequired":true,"errorMessage":"Value required"},{"type":"ActionSet","isVisible":false,"actions":[{"type":"Action.Submit","title":"Action.Submit","id":"submit"}]}]}	

    let card;

    async function test(){
        let config = await card.getData()
        console.log("output", config)
    }

</script>

<button on:click={test}>get data</button>

<AdaptiveCard bind:this={card} template={template}/>

quando aggiorni il pkg su licenseManager sposta gli import dal template.html vedi come booqr

• per la tabella devo fare una pagina di test dove testo un set di dati e tutte le funzinalità della tabella quale selzione con i checkbox, (meraki-backup con selezione parziale, multipagina) fare un dataset di almeno 30 record con tabella a 10 dove testo checkbox, colonne normali, come data come stringa come icona, una colonna truncate, il click.

Piano di sviluppo

• Import modal
• Import Code
• ~~Import input ~~ disabled deprecato!! per comidità, francesco aveva messo il readonly, per evitare troppe modifiche
• Import Table

• Import adaptiveCard ho messo il codice di una card di default nel codice delle stories. Si dovrebbe fare un controllo per controllare che in input arrivi una stringa o un oggetto. Nel caso del primo caso si converte a JSON.object . Non credo sia necessario

• Ricorda di aggiornare il package dai progetti una volta confermata la correttezza del lavoro

• effettuare logout da npmjs quando finito.
• creato package da importare come guide: https://docs.npmjs.com/creating-node-js-modules https://zellwk.com/blog/publish-to-npm/ (senza np ho fatto il publish standard per i test (devo rifarlo con un account di bizmate no?) )
• ho creato un account npmjs per fare dei test sulla coretta implementazione. Sostituiti componenti su LicenseManager. Non ha ritornato nessun errore.