rota de busca horario do cliente agendado (#4)

Co-authored-by: brunohendias <brunodiashen@gmail.com>

app/Http/Controllers/AgendamentoController.php

@@ -3,13 +3,31 @@
 namespace App\Http\Controllers;
 
 use App\Models\Agendamento;
+use App\Models\Cliente;
 use Illuminate\Http\Request;
 
 class AgendamentoController extends Controller
 {
     public function __construct(private Agendamento $model) {}
 
-    public function index(Request $request)
+    public function cliente()
+    {
+        $user = auth('sanctum')->user()->id;
+
+        $cliente = Cliente::select('id')
+            ->where('user_id', $user)
+            ->first();
+
+        return is_null($cliente)
+            ? [] 
+            : $this->model->select('agendamentos.id','pendente_id','data','nome')
+                ->join('pendentes', 'pendente_id', 'pendentes.id')
+                ->join('barbeiros', 'barbeiro_id', 'barbeiros.id')
+                ->where('cliente_id', $cliente->id)
+                ->get();
+    }
+
+    public function barbeiroAgenda(Request $request)
     {
         return $this->model
             ->select('data')

app/Http/Controllers/PendenteController.php

@@ -24,12 +24,15 @@ public function me()
 
         return is_null($cliente)
             ? [] 
-            : $this->model->select('pendentes.id', 'data',
-                'nome', DB::raw('agendamentos.id agendado'))
+            : $this->model->select('pendentes.id','data','nome')
                 ->join('barbeiros', 'barbeiro_id', 'barbeiros.id')
-                ->leftJoin('agendamentos', 'pendente_id', 'pendentes.id')
                 ->where('cliente_id', $cliente->id)
                 ->whereRaw('data > '.date($this->today))
+                ->whereNotExists(function ($query) {
+                    $query->select(DB::raw(1))
+                          ->from('agendamentos')
+                          ->whereColumn('pendentes.id', 'agendamentos.pendente_id');
+                })
                 ->get();
     }
 

cliente/src/components/Navbar.vue

@@ -5,30 +5,29 @@
                 <img src="../assets/imgs/favicon.png" alt="icon" class="w-25">
                 iBarber
             </span>
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" 
-                data-bs-target="#navbarSupportedContent" aria-controls="#navbarSupportedContent" 
-                aria-expanded="false" aria-label="Toggle navigation">
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
+                data-bs-target="#navbarSupportedContent" aria-controls="#navbarSupportedContent" aria-expanded="false"
+                aria-label="Toggle navigation">
                 <span class="navbar-toggler-icon"></span>
             </button>
             <div class="collapse navbar-collapse" id="navbarSupportedContent">
                 <ul class="navbar-nav me-auto">
                     <li v-for="(link, i) in links" :key="i" class="nav-item">
-                        <router-link v-if="enableToShow(link)" 
-                            class="nav-link" :to="link.path">
+                        <router-link v-if="enableToShow(link)" class="nav-link" :to="link.path">
                             {{ link.name }}
                         </router-link>
                     </li>
                 </ul>
-                <horario-pendente />
+                <meusHorarios />
                 <user />
-                <logout style="margin-left: 10px;"/>
+                <logout style="margin-left: 10px;" />
             </div>
         </div>
     </nav>
 </template>
 
 <script setup lang="ts">
-import horarioPendente from './shared/horario-pendente.vue'
+import meusHorarios from './shared/meus-horarios.vue'
 import user from '@/components/User.vue'
 import logout from './shared/buttons/logout.vue'
 import { Routes } from '@/core/enums'
@@ -39,17 +38,17 @@ const router: Router = useRouter()
 const links: RouteRecordRaw[] = router.options.routes;
 
 const routesDontShow: string[] = [
-    'Login', 'Register', 
+    'Login', 'Register',
     'Reset', 'Usuario'
 ]
 
-const enableToShow = (link: RouteRecordRaw): boolean => 
+const enableToShow = (link: RouteRecordRaw): boolean =>
     routesDontShow.find(route => route == link.name) == null
 
 </script>
 
 <style scoped>
-    .navbar-brand {
-        cursor: pointer;
-    }
+.navbar-brand {
+    cursor: pointer;
+}
 </style>

cliente/src/components/shared/buttons/solicitarHorario.vue

@@ -18,10 +18,8 @@ const path: string = 'pendente'
 const loading = ref<boolean>(false)
 
 const possuiAgendamento = computed(()
-    : number =>
-    state.horarios.pendentes
-        .filter(pend => pend.agendado)
-        .length
+    : boolean =>
+    state.horarios.agendados.length > 0
 )
 
 const cliente = computed(()
@@ -37,7 +35,7 @@ const props = defineProps({
 })
 
 const send = () => {
-    if (possuiAgendamento.value > 0) {
+    if (possuiAgendamento.value) {
         return;
     }
     const body = {

cliente/src/components/shared/listas/horarios.vue

@@ -5,7 +5,7 @@
                 Horarios Disponiveis
             </h1>
             <div v-if="date" class="row">
-                <p v-if="agendados > 0">
+                <p v-if="possuiAgendamento">
                     Você já possui horario agendado
                 </p>
                 <p v-else-if="disponiveis.length == 0">
@@ -24,7 +24,7 @@ import horario from '../buttons/horario.vue'
 import { busca } from '@/core/functions'
 import { computed, ref, watch } from 'vue'
 import { useStore } from 'vuex'
-import { Barbeiro, Pendente, State } from '@/core/interfaces'
+import { Barbeiro, State } from '@/core/interfaces'
 import { Actions } from '@/core/enums'
 const store = useStore()
 const state: State = store.state
@@ -37,7 +37,7 @@ const props = defineProps({
 })
 
 const disponiveis = ref<string[]>([])
-const path: string = 'agendamento'
+const path: string = 'agendamento/agenda'
 const action: string = Actions.alteraHorariosAgendados
 const today: Date = new Date()
 
@@ -49,15 +49,13 @@ const diaSelecionado = computed(()
     : number =>
     state.diaSelecionado
 )
-const pendentes = computed(()
-    : Pendente[] =>
-    state.horarios.pendentes
+const limiteSolicitacoes = computed(()
+    : boolean =>
+    state.horarios.pendentes.length >= 3
 )
-const agendados = computed(()
-    : number =>
-    pendentes.value
-        .filter(pend => pend.agendado)
-        .length
+const possuiAgendamento = computed(()
+    : boolean =>
+    state.horarios.agendados.length > 0
 )
 
 watch((): string => props.date,
@@ -67,8 +65,8 @@ watch((): number => barbeiro.value.id,
 
 const geraHorarios = ()
     : void => {
-    if (agendados.value > 0 ||
-        pendentes.value.length >= 3) return;
+    if (possuiAgendamento.value ||
+        limiteSolicitacoes.value) return;
 
     const ini = barbeiro.value.horario_inicio.slice(0, 5)
     const fim = barbeiro.value.horario_fim.slice(0, 5)

cliente/src/components/shared/listas/horariosAgendado.vue

@@ -0,0 +1,42 @@
+<template>
+    <ul class="list-group">
+        <spinner v-if="loading" />
+        <div v-else class="text-center">
+            <span class="text-success">Agendado</span>
+            <li v-for="(dado, i) in dados" :key="i">
+                <p>
+                    {{ dado.nome }}
+                    {{ formaters.data(dado.data) }}
+                </p>
+            </li>
+        </div>
+    </ul>
+</template>
+
+<script setup lang="ts">
+import { busca } from '@/core/functions'
+import { formaters } from '@/core/helpers'
+import spinner from '../spinner.vue'
+import { ref, computed, onMounted } from 'vue'
+import { useStore } from 'vuex'
+import { Agendado, State } from '@/core/interfaces'
+import { Actions } from '@/core/enums'
+const store = useStore()
+const state: State = store.state
+
+const loading = ref<boolean>(false)
+const action: string = Actions.alteraHorariosAgendados
+const path: string = 'agendamento/cliente'
+
+const dados = computed(()
+    : Agendado[] =>
+    state.horarios.agendados
+)
+
+onMounted(()
+    : void => {
+    loading.value = true
+    busca(path, action, store)
+        .finally(() => loading.value = false)
+})
+</script>

cliente/src/components/shared/listas/horariosPendente.vue

@@ -0,0 +1,55 @@
+<template>
+    <ul class="list-group">
+        <spinner v-if="loading" />
+        <div v-else class="text-center">
+            <span class="text-primary">Solicitado</span>
+            <li v-for="(dado, i) in dados" :key="i">
+                <p>
+                    {{ dado.nome }}
+                    {{ formaters.data(dado.data) }}
+                </p>
+            </li>
+        </div>
+    </ul>
+</template>
+
+<script setup lang="ts">
+import { busca } from '@/core/functions'
+import { formaters } from '@/core/helpers'
+import spinner from '../spinner.vue'
+import { bus, Events } from '@/core/bus'
+import { ref, computed, onMounted, watch } from 'vue'
+import { useStore } from 'vuex'
+import { Pendente, State } from '@/core/interfaces'
+import { Actions } from '@/core/enums'
+const store = useStore()
+const state: State = store.state
+
+const loading = ref<boolean>(false)
+const action: string = Actions.alteraHorariosPendentes
+const path: string = 'pendente/me'
+
+const dados = computed(()
+    : Pendente[] =>
+    state.horarios.pendentes
+)
+
+onMounted(()
+    : void => {
+    loading.value = true
+    busca(path, action, store)
+        .finally(() => loading.value = false)
+})
+
+watch(() => bus.on(Events.recarrega_horarios_pendente),
+    () => busca(path, action, store))
+
+</script>
+
+<style>
+.horario-pendente {
+    width: 20px;
+    height: 20px;
+    background-color: orange;
+}
+</style>

cliente/src/components/shared/meus-horarios.vue

@@ -0,0 +1,18 @@
+<template>
+    <div class="dropdown">
+        <button class="btn dropdown-toggle" type="button" id="meus-horarios" data-bs-toggle="dropdown"
+            aria-expanded="false">
+            Meus horarios
+        </button>
+        <ul class="dropdown-menu" aria-labelledby="meus-horarios">
+            <horariosAgendado />
+            <hr>
+            <horariosPendente />
+        </ul>
+    </div>
+</template>
+
+<script setup lang="ts">
+import horariosAgendado from './listas/horariosAgendado.vue';
+import horariosPendente from './listas/horariosPendente.vue';
+</script>