Todo-list: A PHP repository from RafaelBlum

Projeto Todo task v.2.0

Este é uma aplicação Laravel utilizando a "extensão" Livewire. Uma extensão reativa, que agiliza o desenvolvimento com componentes reativo "sem" o uso de javascript (Existe o javascript, mas não precisamos se preocupar com desenvolvimento).

Com livewire temos componentes responsivos e juntamente com o blade, temos uma ferramenta poderosa. Componentes que podemos atualizar sem precisar atualizar toda página de forma fácil e rápida.

Descrição de funcionalidades do `app task`

listagem de todas atividades Criação de compoenente todo e busca de atividades por query e when para filtro e messagem de listagem vazia caso não tenha.
Filtro das atividades por pendentes e concluídas Criação de propriedade filter com status all, pending, done para query when.
Ordenação da listagem Utilização de orderBy por checked de atividades.
Check com input da atividade concluída Criação de input do typo checkbox para concluir atividade com novo componente item com metodo updatedTodo da propriedade Propriedade Todo $todo.
Reoordenação da listagem ao check da atividade Utilização de event livewire no compoente Item que vai ao salvar fazer o refresh na listagem do component Todo pelo evento emitTo e listeners.
Creação de atividade A criação da atividade irá receber via click o titulo da atividade e refresh na lista todo.
Exclusão da atividade Uma deleção básica e refresh na lista todo.
No frontend: Layout responsivo e mode dark usando Tailwindcss.

Descrição de funcionalidades do `app task` para a versão `2.0`.

Na versão 2.0 do app, além do layout novo, foi adicionado propriedades computadas do livewire, autorizações de usuários para suas atividades, autenticação básica de login/logout para demonstração do que um usuário pode visualizar e interagir no app e por fim notificações para cada ação.

Autenticação de usuário Criação demonstrativa de usuário direto pelo id.
Politicas de Autenticação de usuário Usuários só podem criar, editar e deletar se estiverem logados.
Autorização de ações Usuário não pode visualizar a deleção da atividade se a atividade não foi criada por ele.
Negação de ações Usuário não pode editar atividade que não foi criada por ele.
Notificações Criar notificações na tela para ações.
Parametros da url Criar parametros nos filtro da URL para um histórico na navegação.

Tecnologias (serviços externos, libs, frameworks, hospedagem etc.) e instalações.

Php 8.2
Laravel 9.52.5 [Projeto laravel] composer create-project laravel/laravel name-project
Livewire 2.12 [Livewire] composer require livewire/livewire
laravel debugbar 3.8 [Debugbar] composer require barryvdh/laravel-debugbar --dev
Remixicon 2.5.0 Docs
Tailwindcss 3.3.3 [Tailwindcss] npm install -D tailwindcss postcss autoprefixer
- Configuração do framework esta neste link Install Tailwind CSS with Laravel
Alpine jS 2.8.2 Docs

Desenvolvimento (backend lógica e comandos)

php artisan serve --port=8000 [inicializando servidor]
php artisan livewire:make todo [Criando componente todo]
php artisan make:model Todo -m [Criado a tabela modelo para add propriedades]
- checked boolean nullable false
- title string
php artisan make:factory TodoFactory --model=Todo [Criado a migration para tabela no banco]
- checked => $this->faker->boolean
- title => $this->faker->sentence
php artisan migrate --seed [Criado a migration de todas tabelas no banco e seed populando dados fakes]
Criação do componentes de interação: A ideia é trabalhar com cada componente livewire de modo separado e não no proprio componente todo, para assim não ter um componente com muitas responsabilidades e desta forma cada componente tera a sua.
- php artisan livewire:make todo.item [Criando componente todo item] | Componente que terá a responsabilidade de realizar o checked da atividade.
- php artisan livewire:make todo.create [Criando componente todo create] | Componente que terá a responsabilidade de criar componente com seu titulo.
- php artisan livewire:make todo.delete [Criando componente todo delete] | Componente que terá a responsabilidade de deletar a tividade.

Desenvolvimento (Frontend layout e lógica)

View blade *todo* - listagem

{{-- LIST TASKS --}}
@if(count($todos) > 0)
    @foreach($todos as $todo)
        <livewire:todo.item :todo="$todo" :key="$todo->id" />
    @endforeach
@else
    <div class="flex justify-center rounded-lg font-medium tracking-wide text-red-500 text-xs mt-6 mb-6">
        <div>
            Não existem tarefas registradas!
        </div>
    </div>
@endif

Diretiva	Explicação
`@foreach($todos as $todo)`	Recebendo a listagem com todas atividades ou por filtro no componente `todo` com um foreach para mostrar cada um.
`<livewire:todo.item :todo="$todo" :key="$todo->id" />`	Passando cada atividade para `componente view item` e para que cada tenha sua identificação para livewire, passamos o `key` do `ID`.

Exemplo 1

View blade *create* - Como passar dados de input para metodo com click Enter.

<input wire:model.defer="title" wire:keydown.enter="save"

Controller *create*

    public string $title ='';

    public function save()
    {
        $this->validate(['title' => ['required', 'min:3']],
            [
                'title.required' => 'Descrição é obrigatória!',
                'title.min'=> 'Mínimo de 3 letras, por favor!'
            ]);

        Todo::create(['title' => $this->title]);
        $this->reset('title');
        $this->emitTo(\App\Http\Livewire\Todo::class, 'todo::created');
    }

Controller *Todo*

protected $listeners = [
        'todo::updated' => '$refresh',
        'todo::created' => '$refresh',
        'todo::deleted' => '$refresh'
];

Classe	Explicação importantes
`validate(['title' => ['required', 'min:3']]`	* Validação de criação e mensagens personalizadas de cada tipo*
`$this->emitTo`	EmitTo é uma função que avisa um componente de alguma atividade realizada e apartir disso podemos por exemplo, realizar `refresh`

Desenvolvimento para versão 2.0

Estruturação de migrate e model da Todo.
- Adição da foreignId $table->foreignIdFor(\App\Models\User::class)->nullable();
- Adição da fillable user id protected $fillable = ['title', 'checked', 'user_id']
- Metodo belongsTo da Todo pegar o usuário dono.

    public function user(){
        return $this->belongsTo(User::class);
    }

Criação de factories e seeders para popular banco.
- Exemplo

    User::updateOrCreate([
        'name'=> 'Rafael Blum',
        'email'=> 'Rafaelblum_digital@hotmail.com',
        'email_verified_at' => now(),
        'password'=> Hash::make('123'),
        'remember_token' => Str::random(10),
    ]);


    User::updateOrCreate([
        'name' => fake()->name(),
        'email' => fake()->unique()->safeEmail(),
        'email_verified_at' => now(),
        'password' => '$2y$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi', // password
        'remember_token' => Str::random(10),
    ]);

    Todo::updateOrCreate([
        'checked' => fake()->boolean,
        'user_id' => User::where('email', 'Rafaelblum_digital@hotmail.com')->first()->id,
        'title' => fake()->sentence
    ]);

Criação de politica todo.
- php artisan make:policy TodoPolicy --model=Todo [Criando politica] | Cria a policy e com o --model=Todo cria todos metodos.
A criação de notificações seram acessados direto pelo componente que irá iniciar um evento e assendo as props de componente do blade.

    $this->emit('notifications', [
        'type'      => 'error',
        'message'   => 'Você precisa se logar para criar atividade'
    ]);

Metodo da classe Notifications

    protected $listeners = ['notifications'=>'notify'];

    public function notify($props)
    {
        $this->message = $props['message'];
        $this->type = $props['type'];
    }

view livewire e componente x-blade

<x-notification :type="$type">
    {!! $message !!}
</x-notification>

@props([
    'type'
])


<div {{$attributes->class([
    'w-80 text-center text-sm mb-2 font-semibold tracking-wide cursor-pointer',
    'text-yellow-500' => $type == 'warning',
    'text-red-500' => $type == 'error',
    'text-green-500' => $type == 'success',
    'text-indigo-500' => $type == 'info',
])}} >
    {{$slot}}
</div>

Autorizações de ações.
- Atraves da Politica criada da todo, cada metodo ira retornar e verificar se o user id do user logado é igual ao id do user_id da tabela Todo.
- return $user->is($todo->user);
- Na classe Delete, por exemplo.

    use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
    use AuthorizesRequests;
    $this->authorize('delete', $this->todo);

Outra forma de autorização é utilizando o can()

    if(!auth()->check() || !auth()->user()->can('update', $this->todo)){
        $this->emit('notifications', [
            'type'      => "error",
            'message'   => "Você não pode finalizar a atividade <br> {$this->todo->title}"
        ]);

        return;
    }

Nas views podemos também usar o @can()
- Aqui se não é sua atividade, você não terá acesso a visualização do componente.

    @can('update', $todo)
        ...
    @endcan

Contatos

👇🏼 [rafaelblum_digital@hotmail.com]

Adoro me conectar com pessoas diferentes, então se você quiser dizer oi, ficarei feliz em conhecê-lo mais! :)

RafaelBlum/Todo-list