Tutoriel pour apprendre à utiliser le framework Vue.js version 2

<?php
 
use Illuminate\Database\Seeder;
 
class DatabaseSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        factory(App\User::class, 1000)->create();;
    }
}

<template>
  <div class="ui raised container segment">
    <message  
      type="positive"
      header="Serveur mis à jour avec succès !"
      :show="success"
      @close="closeSuccess">
    </message>
    <message 
      type="negative"
      header="Echec de la communication avec le serveur !"
      :show="danger"
      @close="closeDanger">
    </message>
    <message 
      type="negative"
      header="Il y a des erreurs dans la validation des données saisies :"
      :list="[ validation.name, validation.email ]"
      :show="validation.name != '' || validation.email != ''"
      @close="closeValidation">
    </message>
    <div class="ui three column grid">
      <div class="row">
        <div class="column"></div>
        <div class="column"><h1>Liste des utilisateurs</h1></div>
        <div class="column right aligned" v-show="!edition">  
          <select v-model="paginationSelect" class="ui menu dropdown">
            <option value="5">5 lignes</option>
            <option value="10">10 lignes</option>
            <option value="20">20 lignes</option>
            <option value="50">50 lignes</option>
          </select>
        </div>
      </div>    
      <div class="row" v-if="users.length == 0" style="height: 100px">
        <div class="ui active inverted centered dimmer">
          <div class="ui text loader">Chargement</div>
        </div>
        <p></p>
      </div>
    </div>    
    <table class="ui celled table" v-if="users.length > 0">
      <thead>
        <tr>
         <th>Nom</th>
         <th>Email</th>
         <th></th>
         <th></th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(user, index) in userShowed">
          <td>{{ user.name }}</td>
          <td>{{ user.email }}</td>
          <td>
            <button class="fluid ui orange button" :class="{ disabled: edition }" data-tooltip="Modifier cet utilisateur" data-position="top center" @click="edit(index)">
              <i class="edit icon"></i>
            </button>
          </td>
          <td>
            <button class="fluid ui red button" :class="{ disabled: edition }" data-tooltip="Supprimer cet utilisateur" data-position="top center" @click="del(index)">
              <i class="remove user icon"></i>
            </button>
          </td>  
        </tr>  
        <tr class="ui form">
          <td>
            <div class="ui field" :class="{ error: validation.name }">
              <input type="text" v-model="user.name" placeholder="Nom">
            </div>
          </td>
          <td>
            <div class="ui field" :class="{ error: validation.email }">
              <input type="email" class="form-control" v-model="user.email" placeholder="Email">
            </div>
          </td>
          <td colspan="2" v-if="!edition">
            <button class="fluid ui blue button" data-tooltip="Ajouter un utilisateur" data-position="top center" @click="add()">
              <i class="add user icon"></i>
            </button>
          </td>
          <td v-if="edition">
            <button class="fluid ui blue button" data-tooltip="Mettre à jour cet utilisateur" data-position="top center" @click="update()">
              <i class="add user icon"></i>
            </button>
          </td>
          <td v-if="edition">
            <button class="fluid ui violet button" data-tooltip="Annuler la modification" data-position="top center" @click="undo()">
              <i class="undo icon"></i>
            </button>
          </td>
        </tr>
      </tbody>       
    </table>
    <pagination :records="maxUsers" :number-per-page="paginationNumber" :hide="edition" @changepage="changePage"></pagination>
  </div>  
</template>
 
<script>
import Message from './Message.vue'
import Pagination from './Pagination.vue'
 
export default {
  name: 'application',
  resource: null,
  data() {
    return {
      users: [],
      userShowed: [],
      user: { name: '', email: '' },
      save: { index: 0, user: {} },
      success: false,
      danger: false,
      edition: false,
      validation: { name: '', email: '' },
      paginationIndex: 1,
      paginationNumber: 10,
      paginationSelect: 10
    }
  },
  computed: {
    maxUsers() {
      return this.users.length
    }
  },
  watch: {
    paginationSelect() {
      this.paginationNumber = _.toInteger(this.paginationSelect)
      this.paginationIndex = 1
      this.refreshPage()
    }
  },
  mounted() {
    this.resource = this.$resource('/users{/id}')
    this.resource.get().then((response) => {
      this.users = response.body
      this.userShowed = this.users.slice(0, this.paginationNumber)
    }, (response) => {
      this.danger = true
    })
  },
  methods: {
    add() {
        this.resetMessages()
        this.resource.save(this.user).then((response) => {
          this.success = true
          this.users.push(this.user)
          this.user = { name: '', email: '' }
        }, (response) => {
        this.setValidation(response)
      });
    },
    update() {
        this.resetMessages()
        this.resource.update({id: this.user.id}, this.user).then((response) => {
          this.success = true
          this.userShowed.splice(this.save.index, 0, this.user)
          this.users[this.save.index + this.getStartPagination] = _.clone(this.user)
          this.edition = false
          this.user = { name: '', email: '' }
        }, (response) => {
        this.setValidation(response)
      });
    },
    del(index) {
      let that = this
      index = index + this.getStartPagination()
      this.resetMessages()
      this.$swal({
        title: 'Vous êtes sûr de vous ?',
        text: "Il n'y aura aucun retour en arrière possible !",
        type: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Oui supprimer !',
        cancelButtonText: 'Non, surtout pas !',
      }).then(function() {
        that.resource.delete({id: that.users[index].id}).then((response) => {
          that.success = true
          that.users.splice(index, 1)
          that.changePage(1)
        }, (response) => {
          that.danger = true 
        });        
      }).done()
    },
    edit(index) {
      this.resetMessages()
      this.save.index = index
      this.user = this.userShowed[index]
      this.save.user = _.clone(this.user)
      this.edition = true
      this.userShowed.splice(index, 1)
    },
    undo() {
      this.userShowed.splice(this.save.index, 0, this.save.user)
      this.user = { name: '', email: '' }
      this.edition = false
    },
    resetMessages() {
      this.success = false
      this.danger = false
      this.closeValidation()
    },
    setValidation(response) {
      this.validation.name = response.body.name ? response.body.name[0] : ''
      this.validation.email = response.body.email ? response.body.email[0] : ''
    },
    closeSuccess() {
      this.success = false
    },
    closeDanger() {
      this.danger = false
    },
    closeValidation() {
      this.validation = { name: '', email: ''}
    },
    changePage(index) {
      this.paginationIndex = index
      this.refreshPage()
    },
    refreshPage() {
      let start = this.getStartPagination()
      this.userShowed = this.users.slice(start, start + this.paginationNumber)
    },
    getStartPagination() {
      return (this.paginationIndex - 1) * this.paginationNumber
    }
  },
  components: {
    Message, 
    Pagination
  }
}
</script>

<template>
  <div id="pagination" v-if="paginationEnabled">
    <div class="ui pagination menu" v-show="chunkLeft" @click="bigLeft">
      <a class="item"><i class="angle double left icon"></i></a>
    </div>
    <div class="ui pagination menu" v-show="buttonLeft" @click="left">
      <a class="item"><i class="angle left icon"></i></a>
    </div>
    <div id="numbers" class="ui pagination menu">
      <a v-for="(item, index) in pagination" class="item" :class="{ active: item.active, disabled: item.disabled }" @click="changePage(index)">
        {{ item.text }}
      </a>
    </div>
    <div class="ui pagination menu" v-show="buttonRight" @click="right">
      <a class="item"><i class="angle right icon"></i></a>
    </div>
    <div class="ui pagination menu" v-show="chunkRight" @click="bigRight">
      <a class="item"><i class="angle double right icon"></i></a>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'pagination',
  props: {
    'records': {
      type: Number,
      required: true
    },
    'numberPerPage': {
      type: Number,
      required: false,
      default: 10
    },
    'chunk': {
      type: Number,
      required: false,
      default: 10
    },
    'hide': {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data() {
    return {
      current: 1,
      adjacent: 2,
      pagination: []
    }
  },
  computed: {
    paginationEnabled() {
      return this.records > this.numberPerPage && !this.hide
    },
    buttonLeft() {
      return this.current > 1
    },
    buttonRight() {
      return this.current < this.totalPages()
    },
    chunkLeft() {
      return this.current >= this.chunk
    },
    chunkRight() {
      return this.current <= this.totalPages() - this.chunk
    }
  },
  watch: {
    numberPerPage() {
      this.current = 1
      this.createPagination()
    },
    records() {
      this.current = 1
      this.createPagination()
    },
    current() {
      this.createPagination()
    }
  },
  methods: {
    changePage(index) {
      if(!this.pagination[index].disabled) {
        this.current = this.pagination[index].text
        this.$emit('changepage', this.current)
      }
    },
    createPagination() {
      let total = this.totalPages()
      this.pagination = []
      let encadrement = this.adjacent * 2
      // Sans troncature
      if(total < 7 + encadrement) {
        this.addPages(..._.range(1, total + 1))
      // Avec troncature
      } else {
        // Troncature à droite
        if (this.current < 2 + encadrement) {
          this.addPages(..._.range(1, 4 + encadrement))
          this.addTroncature()
          this.addLastPages(total)       
        }
        // Deux troncatures
        else if ((encadrement + 1 < this.current) && (this.current < total - encadrement)) {
          this.addFirstPages()     
          this.addTroncature()
          this.addPages(..._.range(this.current - this.adjacent, this.current + this.adjacent + 1))
          this.addTroncature()
          this.addLastPages(total)
        }
        // Troncature à gauche
        else {
          this.addFirstPages()
          this.addTroncature()
          this.addPages(..._.range(total - 2 - encadrement, total + 1))    
        }
      }
    },
    addTroncature() {
      this.pagination.push({ text: '...', active: false, disabled: true })
    },
    addFirstPages() {
      this.addPages(1, 2)
    },
    addLastPages(total) {
      this.addPages(total - 1, total)
    },
    addPages(...valeurs) {
      let that = this
      _.forEach(valeurs, function(valeur) {
        that.pagination.push({ text: valeur, active: that.current == valeur, disabled: false })
      });
    },
    totalPages() {
      return _.ceil(this.records / this.numberPerPage)
    },
    left() {
      this.$emit('changepage', --this.current)
    },
    right() {
      this.$emit('changepage', ++this.current)
    },
    bigLeft() {
      this.current -= this.chunk
      this.$emit('changepage', this.current)
    },
    bigRight() {
      this.current += this.chunk
      this.$emit('changepage', this.current)
    }
  }
}
</script>
 
<style>
.ui.pagination.menu .item {
  background-color: rgba(33,133,208,.2);
}
.ui.pagination.menu .active.item {
  background-color: rgba(33,133,208,.5);
}
@media screen and (max-width: 768px) {
  #numbers { display: none; }
}
#pagination {
  display:flex; 
  justify-content:center
}
</style>