Gecko [ www.foryou-vip.com ]

Name	Size	Permission	Date	Action
actives.blade.php	1.44 KB	-rwxrwxrwx	2022-04-21 13:44
index.blade.php	9.2 KB	-rwxrwxrwx	2022-04-21 13:44

Rename

@extends('layouts.app', ['activePage' => 'users', 'titlePage' => __('Gestion des utilisateurs')])

@section('content')
  <div class="content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
            <div class="card">
              <div class="card-header card-header-primary">
                <h4 class="card-title ">Utilisateurs</h4>
                <p class="card-category">Gérez la liste des utilisateurs</p>
              </div>

<div class="card-body">
                <div class="row">
                  <div class="col-12 text-right">
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
                      Ajouter un utilisateur
                    </button>
                  </div>
                </div>
                <div class="table-responsive">
                  <table class="table">
                    <thead class=" text-primary">
                      <tr>
                        <th>
                          Utilisateur
                        </th>
                        <th>
                          Email
                        </th>
                        <th>
                          Date de création
                        </th>
                        <th class="text-right">
                          Modifier
                        </th>
                      </tr>
                    </thead>
                    <tbody class="usersTable">
                      @foreach($users as $user)
                        <tr id="{{$user->id}}">
                          <td>
                            {{$user->name}}
                          </td>
                          <td>
                            {{$user->email}}
                          </td>
                          <td>
                            {{$user->created_at->format('d/m/Y')}}
                          </td>
                          <td class="td-actions text-right">
                                <a rel="tooltip" class="btn btn-success btn-link" data-toggle="modal" data-target="#updateUserModal" id="update" href="#" data-original-title="" data-user-data="{{$user}}" data-user-id="{{$user->id}}">
                                <i class="material-icons" id="update" data-toggle="modal" data-target="#updateUserModal" data-user-data="{{$user}}" data-user-id="{{$user->id}}">edit</i>
                                <div class="ripple-container"></div>
                              </a>
                          </td>
                        </tr>
                      @endforeach
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
        </div>
      </div>
    </div>
    <div class="card-body">
      
      <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLongTitle">Ajouter un utilisateur</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <form  method="POST" action="users/add">
                <div class="form-row  col-md-10">
                  <div class="col">
                    <input type="text" name="name" class="form-control" placeholder="Nom">
                  </div>
                </div>
                <div class="form-group col-md-10">
                  <input type="email" name="email" class="form-control" id="inputEmail4" placeholder="Email">
                </div>
                <div class="form-group row">
                  <div class="col-sm-10">
                    <input type="password" name="password" class="form-control" id="inputPassword" placeholder="Mot de passe">
                  </div>
                </div>
                {{ @csrf_field() }}
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
                  <button type="submit" class="btn btn-primary" id="addUser">Ajouter</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>

<div class="card-body">
      
      <div class="modal fade" id="updateUserModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLongTitle">Modifier les informations d'un utilisateur</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body" id="updateFormContainer">
              {{-- The form will rendered here --}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection

@push('js')
  <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

usersTable.addEventListener('click', function(event) {
        if (event.target.id === "update") {

let userData = JSON.parse(event.target.dataset.userData);
          renderContainer.innerHTML = renderUpdateForm(userData);;

let updateModale = document.getElementById('updateForm')
          let nameInput = updateModale.querySelector("[name='name']")
          let emailInput = updateModale.querySelector("[name='email']")
          let passwordInput = updateModale.querySelector("[name='password']")
          let updateBtn = updateModale.querySelector('#updateUser');
          let deleteBtn = updateModale.querySelector('#deleteUser');

updateBtn.addEventListener('click', function(event){
            if (nameInput.value.trim() !== '' && emailInput.value.trim() !== '' && passwordInput.value.trim() !== '') {
              // window.location = "/users/update/" + userData.id;
            }else {
              event.preventDefault();
              Swal.fire({
                icon: 'error',
                title: 'Attention',
                text: 'Un ou plusieurs champs sont vides.'
              })
            }
          })

deleteBtn.addEventListener('click', function(event){
            Swal.fire({
              title: 'Attention',
              text: "Voulez-vous vraiment supprimer l'utilisateur "+ userData.name,
              icon: 'warning',
              showCancelButton: true,
              confirmButtonColor: '#3085d6',
              cancelButtonColor: '#d33',
              confirmButtonText: 'Confirmer',
              cancelButtonText: 'Annuler'
            }).then((result) => {
              if (result.isConfirmed) {
                window.location = "/users/delete/" + userData.id;
              }
            })

})
        }
      })

}

</script>

@endpush