Components

require Bootstrap-vue

Components

AppContainer

Le conteneur de la page

<app-container :appTitle="settings.title">
  <template slot="globalActions">
    <b-button variant="primary"><i class="fab fa-empire" /></b-button>
    // Will appear top right
  </template>
  <div class="container">
    // content
  </div>
</app-container>

ChartContainer

Permet de contenir un graphique Il vaut mieux utiliser un tableau de bords pour cela car chart container attends un format précis

Confirm

Modal de confirmation

<confirm ref="confirmUse" title="Attention">
  Êtes-vous sûre de vouloir utiliser ce composant?
</confirm>

export default {
  methods: {
    async use () {
      await this.$refs.confirmUse.trigger()
    }
  }
}

Dashboard

Permet d'intégrer un tableau de bord. Il faut dans un premier temps le créer sur l'interface de paramétrage. Le rendre global puis utiliser l'id du tableau de bord crée. Dans des soucis d'authentification il faut indiquer le module pour lequel le token est actif

<div class="w-100">
  <dashboard id="idDuTableauDeBord" module="xxx" />
</div>

Datatable

Datatable qui permet de trier, d'avoir un classement par pages et de rechercher.

<template>
  <app-container app-title="Mon titre">
    <datatable ref="_datatable_result" class="mb-1" :colonnes="columns" rowId="id" :rows="rows" :selectable="true" :striped="true" :small="true">
      <template slot="actionsOnAll">
        <b-button size="sm" v-b-tooltip.hover.left @click="fakeAction" title="Action pour du vent" variant="success" class="ml-1 mr-1"><i class="fa fa-jedi" /></b-button>
      </template>
      <template slot-scope="datas">
        <td class="font-weight-bold">{{ datas.line.name }}</td>
        <td>{{ datas.line.age }}</td>
        <td>{{ datas.line.animal }}</td>
        <td>{{ datas.line.account }}</td>
      </template>
    </datatable>
  </app-container>
</template>

import uniqid from 'uniqid'
import Chance from 'chance'
export default {
  data () {
    const chance = new Chance()
    const rows = []
    for (let i = 0; i < 168; i++) {
      rows.push({
        id: uniqid('person-'),
        name: chance.name({ nationality: 'fr' }),
        age: chance.age(),
        animal: chance.animal(),
        account: chance.euro()
      })
    }
    return {
      rows,
      columns: [
        { libelle: 'Nom prénom', id: 'name', sortable: true },
        { libelle: 'Âge', id: 'age', sortable: true },
        { libelle: 'animal', id: 'animal', sortable: false },
        { libelle: 'Fortune', id: 'account', sortable: true }
      ]
    }
  },
  methods: {
    fakeAction () {
      const selection = this.$refs._datatable_result
      console.log(selection.selected)
    }
  }
}

Datepicker

Datepicker au thème de bootstrap

<p-datepicker v-model="today"/>

export default {
  data () {
    return {
      today: new Date() // works with string too eg: '2019-01-01'
    }
  }
}

Loading

Joli loader qui correspond au logiciel et qui s'adapte aux primary / scondary / info de bootstrap

<loading>Chargement...</loading>
<!-- OR -->
<loading />

NavbarSide

Side bar intégrer au template de base. Généralement utilisé de la sorte:

<template>
  <div id="app" class="d-flex flex-grow">
    <navbar-side :routes="routes" app-title="Test" appLogo="fa fa-trash"/>
    <router-view />
  </div>
</template>

export default {
  data () {
    return {
      routes: [
        { path: '/home', libelle: this.$t('message.routes.home'), icon: 'fa-home' },
        { path: '/about', libelle: this.$t('message.routes.about'), icon: 'fa-thumbtack' },
        { path: '/datatable', libelle: this.$t('message.routes.datatable'), icon: 'fa-table' }
      ]
    }
  }
}

PopulationSelection

Sélecteur de population sans jquery. Inclu l'iframe de sélection. Doit être connecté au logiciel pour l'utiliser. Sera remplacer à terme par le nouveau rh

<div class="container" v-show="apiReady">
  <population-selection
    :restrictions="restrictions"
    :mergeRestrictions="merge"
    :options="{ filtresDisabled: ['bases', 'agences', 'departements', 'filiales']}"
    :debut="debut"
    :fin="fin"
    ref="selecteur"
    style="width:100%;height:600px;"
    @loaded="apiReady = true"/>
  <div class="pt-1 d-flex justify-content-center">
    <b-button variant="primary" @click="selectPopulation" disabled="!apiReady">Sélectionner</b-button>
  </div>
</div>

export default {
  data () {
    const today = new Date().toISOString().substr(0, 10)
    return {
      restrictions: {
        filtres: [],
        trigrammes: []
      },
      merge: false,
      debut: today,
      fin: today,
      apiReady: false
    }
  },
  methods: {
    async selectPopulation () {
      const selection = this.$refs.selecteur.getApi()
      const selectionDatas = await selection.api('getSelection')
    }
  }
}

Prompt

Un prompt avec une modale bootstrap

<prompt ref="prompt" title="Attention" label="Nouveau nom:" />

export default {
  methods: {
    async launchPrompt () {
      const value = await this.$refs.prompt.trigger()
      console.log(value)
    }
  }
}

RangeSelector

Un composant lié au datepicker permettant d'avoir accès a des dates préselectionnées eg: ce mois-ci, hier etc.

<range-selector v-model="range" />
<range-selector v-model="range2" />

export default {
  data () {
    return {
      range: null, // will go to custome with value to today
      range2: {
        start: null,
        end: null,
        alias: 'yesterday' // will automatically set start and end to yesterday
      }
    }
  }
}

Alias disponibles:

• yesterday
• dayBeforeYesterday
• thisDayLastWeek
• previousWeek
• previousMonth
• previousYear
• last2Days
• last7Days
• last30Days
• last90Days
• last6Months
• last1Year
• last2Years
• last5Years
• all
• today
• todaySoFar
• thisWeek
• thisMonth
• thisYear

Spacer

Utile pour les dispositions flex exemple: Le bouton sera à droite carle spacer prendra tout l'espace disponible

<div class="d-flex">
  <spacer />
  <b-button variant="primary">TEST</b-button>
</div>