Тёмный

Filament Livestream: Pet Clinic Admin Panel - New Project 

Tuto1902
Подписаться 4,5 тыс.
Просмотров 17 тыс.
50% 1

Let's build an admin panel for a fictional Pet clinic using Filament v3. In this live session I'll try to demonstrate my process for creating and entire project from start to finish.
phpstan.neon gist.github.com/tuto1902/23e0...
Code: github.com/tuto1902/filament-...
Latest Subscriber: Allysson JM
Subscriber Goal: ||||||||||||||| 68% ||||||......... 3.4K/5K
Start creating Filament Admin Panels today with the Filament Bootcamp
👉jorgearturorojas.gumroad.com/...
Do you like my content? Buy me a coffee and help the channel grow ☕️ mercury.streamelements.com/ti...
Latest tippers: MilenKo - $10.00, Sean - $5.00, Daniel GAMEL - $1.00, Mwest2020 - $5.00
Join me on Discord
/ discord
Discord Goal: ||||||||||||||| 73% ||||||||....... 221/300
Latest discord member: excellenci_media♯0

Опубликовано:

 

4 авг 2023

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 61   
@milenkostadinov8702
@milenkostadinov8702 9 месяцев назад
FYI to all users viewing this amazing channel - Filament has updated their installation steps so no longer required set the DEV in config.json to install the admin. I would guess it was OK for filament to be in PROD version but was not for LiveWire 3 so this was what triggered the need for the switch earlier.
@Tuto1902
@Tuto1902 9 месяцев назад
Thank you for the clarification. You are correct. I forgot to mention this caveat. I'll just pin your comment so everyone can see it.
@fillable
@fillable 6 месяцев назад
I'm creating a similar project and there's alot here that I didn't know about. Best tutorial by a mile, you earned my sub.
@Tuto1902
@Tuto1902 6 месяцев назад
Awesome, thank you!
@learntechbasics
@learntechbasics 11 месяцев назад
Watching your stream now.. liking how you are going step by step in a clear fashion for everyone to understand!!
@Tuto1902
@Tuto1902 11 месяцев назад
Thank you! I'm glad you like it. I tried to approach it less like me coding and more like me teaching a class. Still have a lot to improve but hey, the hard part is always to get started.
@spirosmakris7847
@spirosmakris7847 7 месяцев назад
Excellent tutorial, thank you so much! I was searching a Filament project tutorial that is a little bit closer to a real-world application and this is perfect.
@FelipeSantos-ce4hd
@FelipeSantos-ce4hd 5 месяцев назад
Thank you very much. You're a doing a really great job. Thanks from Brazil
@JamesAutoDude
@JamesAutoDude 10 месяцев назад
This is gonna be a MAJOR time saver for me. Just Laravel by itself has so many steps for forms and especially to pass select drop downs of the database, etc... And the way you just make one form and it's there for both create and edit... This Filament is game changer! Thank you so much Also the reason why they moved the URL out of Config file is because each Panel can have its own URL. /admin is for admins only, for instance. And then you can have other panels like /user If it was set in config file it would apply to all Panels. This new way gives you multi tenancy
@Tuto1902
@Tuto1902 10 месяцев назад
I'm glad you find this helpful. I thought the exact same thing when I started using Filament. Game 👏 Changer 👏 And speaking of multi-tenancy, in this week's stream I reworked the database for this exact purpose. From here onward, we are working on having multi-tenancy, not only at a clinic level, but at a user level as well, which will require a bit of manual labor, but totally worth it.
@neverforget1575
@neverforget1575 9 месяцев назад
Brilliant tutorial!! Laravel is a breathe of fresh air and your teaching style is perfect. Can I suggest a tut? A marketplace app where vendors can sell images or videos and clients can subscribe to them to view, or a booking app where clients can book vendors for appointments etc. This will probably incorporate using stripe connect so vendors can get paid automatically and the app takes a cut. I feel this could be a great series as there is nothing good showing this type of build. Keep up the great work!
@Tuto1902
@Tuto1902 9 месяцев назад
Aww shucks! Thank you 🙏🏻 That just made my day. And that’s an amazing idea too. Writing it down right now 📝
@milenkostadinov8702
@milenkostadinov8702 10 месяцев назад
I must admit, that I came across your channel randomly, but boy I am so glad to have found you. I've attempted a few times to try Filament admin when it came out and all I could say was that the projects ended up with a custom admin I've felt more comfortable with, however this video is an eye opener for me as it showed me the missing chains about Fillament. I would like to find out how to make smaller columns when building a form, but now that I know the basics, I can digg that on my own and not ask you to explain what you said you don't like to have ;) Can't thank you enough and I second the need for PEST tests as I will have to start writing those and a good explanation from a humble teacher would be the best win for everybody on this channel. May Forces be with you and you have a safe and productive days!
@milenkostadinov8702
@milenkostadinov8702 10 месяцев назад
Sorry, actually I would dare to ask - how would you make a form having more coluimns by defining the form columns width? I guess fillament by default would show 2 form inputs per row but if we have a small checkbox, name, date, I am pretty confident that there will be a time where we might need a smaller form, especially if we have too much data to add by a single form. Any hints about defining the width of columns of Filament forms?
@Tuto1902
@Tuto1902 10 месяцев назад
Thank you so much for your kind words. I’m truthfully glad that I was able to help you. I really appreciate you taking the time to write a comment like this. And yes, I have plans to write a micro course focused on testing filament with pest v2 😉 stay tuned!
@milenkostadinov8702
@milenkostadinov8702 10 месяцев назад
@@Tuto1902 Another suggestion if I may would be to have a video where a custom admin is styled with Filament as most of the videos I've watched only show how to change what is in the documentation (icons, colors etc.) but what about implementing a custom admin theme with Filament? - at least I did not find anywhere a video tutorial to demonstrate that. In my scenario, I have a website that was asked for a redo and I thought Filament would be the best candidate, however the current project uses a custom admin using bootstrap so I am not sure it is even feasible to achieve with filament
@Tuto1902
@Tuto1902 10 месяцев назад
@@milenkostadinov8702You're right, I myself haven't seen any in-depth tutorial on Filament theme creation. Sounds like a good opportunity for a video indeed. Since Filament is built with Tailwind CSS, I don't think it will play well with Bootstrap. Another option, if you want to go with the custom route is that you can technically use any of the Filament packages (Table Builder, Form Builder, Widgets, etc) without having to use Filament's admin panels. Technically, you can use your own TALL Stack application and integrate Filament into it. Every section in the filament docs start with an installation process, where you can create your own layout file and Livewire component. Maybe that's more suited to your needs.
@JorgeAnibalZapata
@JorgeAnibalZapata 10 месяцев назад
Excelente tutorial bro, muchas gracias!!!
@Tuto1902
@Tuto1902 10 месяцев назад
Con mucho gusto 👍🏻
@AmitErandole
@AmitErandole 9 месяцев назад
This was great. Learnt a lot. Would be interesting to see you add history tracking to the updates model and then create custom view where we can see a timeline of how the appointment is going or how it went
@Tuto1902
@Tuto1902 9 месяцев назад
Yes, and for a comercial product that would be a great feature. I heard someone say that projects are never finished, only abandoned. I want to keep this series as a learning experience, so I’ll try to keep it somewhat simple so we can move to a different series/project in the near future. So much to learn, so little time.
@Tuto1902
@Tuto1902 11 месяцев назад
For anyone interested. I've posted the code for this project in github. github.com/tuto1902/filament-pet-clinic (link in the description as well)
@MaulikBhatt85
@MaulikBhatt85 4 месяца назад
Thanks!
@Tuto1902
@Tuto1902 3 месяца назад
No problem!
@DR9Productions
@DR9Productions 10 месяцев назад
Great tutorial! Very good step by step! Would be very nice in that project to have a backoffice also for owners to book appointments for there own pets. Cant wait to see your next tutorial!
@Tuto1902
@Tuto1902 10 месяцев назад
You read my mind. I’ll live-stream again this Saturday. Once I go over some last details, I’ll start working on the database changes required for adding a second panel for owners and doctors
@DR9Productions
@DR9Productions 10 месяцев назад
@@Tuto1902 that sounds great! Keep up the good work. Cant wait for your next live! Thank you so much for sharing your knowledge with everyone.
@KennethIsrael_aiikendoit
@KennethIsrael_aiikendoit 9 месяцев назад
i like this because i'm using AdminLTE
@Tuto1902
@Tuto1902 9 месяцев назад
Oh you're gonna love this one then. Way better than AdminLTE in my opinion. (and I've used AdminLTE)
@vugarkhalil
@vugarkhalil 9 месяцев назад
Respect
@beticohernandez9536
@beticohernandez9536 3 месяца назад
Hello. I have tried to do your project but I always get this ad when I install filament. Installation failed, reverting ./composer.json and ./composer.lock to their original content. What will it be? composer is with the latest update.
@Tuto1902
@Tuto1902 3 месяца назад
The error doesn't tell me much. Is there any other details about the failure? PHP version, unsatisfiable dependencies?
@Tuto1902
@Tuto1902 11 месяцев назад
Also for @stanleykariuki2068 regarding wire:navigate in Filament links. This is not yet enabled but there's currently a pull request to make this available in the future. From what I can tell from the filament code, wire:navigate is present in some elements like the navigation items, but at the moment is commented out.
@joaofelipern
@joaofelipern 11 месяцев назад
Thanks
@Tuto1902
@Tuto1902 11 месяцев назад
You’re more than welcome 👍🏻
@user-ry5cw2nu1r
@user-ry5cw2nu1r 8 месяцев назад
how to make an editable Status(ex: published,pending,cancelled) using select in table(outside edit page)? basically it can edit Status inside or outside edit page
@Tuto1902
@Tuto1902 8 месяцев назад
Use a select column: filamentphp.com/docs/3.x/tables/columns/select#overview
@justgkp
@justgkp 11 месяцев назад
Awesome work!😍 Could you make a video on add more items to enum....
@Tuto1902
@Tuto1902 11 месяцев назад
Thank you! I'm glad you like it. I don't think an entire video is needed. Since PHP enums are just special types that can hold a set of scalar values (fancy words for "a place to store a list of things"), if you need to add one more "thing" to the list, just add one more case to the enum. For example, if we need to add Hamsters to the type of pets, just add the following line in the PetType enum: enum PetType: string implements HasLabel { ... case Hamster = 'hamster'; } Of course, in this example, you would also need to add the corresponding lines to the getLabel method, so all the places where you need this label, will work accordingly enum PetType: string implements HasLabel { ... case Hamster = 'hamster'; public function getLabel(): ?string { return match ($this) { ... self::Hamster => 'Hamster', }; } }
@Tuto1902
@Tuto1902 11 месяцев назад
@stanleykariuki2068 Regarding your question about filtering table records based on the logged in users before they are rendered in the table. Let's say you have a Task model with a user_id for your To-Do list. After you create a filament resource for the Task model (php artisan make:filament-resource Task --simple), you can override this function in you resource class in order to customize the model query: public static function getEloquentQuery(): Builder { $query = parent::getEloquentQuery(); $query->where('user_id', auth()->user()->id); return $query; }
@JamesAutoDude
@JamesAutoDude 10 месяцев назад
What about a way where you can go to Pets in the navigation, and then click on a Pet Name to see all appointments for that specific Pet?
@Tuto1902
@Tuto1902 10 месяцев назад
You can achieve this using a relation manager. For example, you can create a new relation manager using: php artisan make:filament-relation-manager PetResource appointments description All you need to do after that is configure and load the relation manager into your PetResource. Here are the instructions on how to do this: filamentphp.com/docs/3.x/panels/resources/relation-managers#creating-a-relation-manager
@JamesAutoDude
@JamesAutoDude 10 месяцев назад
@@Tuto1902 thank you! What about a way to customize the tables? I want to change from a table to rows of content... I'll try searching for that :)
@JamesAutoDude
@JamesAutoDude 10 месяцев назад
Careful with the image editor, it didn't work right on mobile 😢 Also do you know how to set a clinic ID to the new Pet when adding through a ->createOptionForm?
@Tuto1902
@Tuto1902 10 месяцев назад
Thank you for the warning. I haven't tried it myself on mobile. As for the clinic ID. I would not recommend having the createOptionForm for pets. But if you must have it, what I would do is add an event to the model itself and assign the current Tenant (Clinic) if the Pet doesn't have any. Like this (added in the Pet model): protected static function booted(): void { static::created(function (Pet $pet) { if ($pet->clinic->isEmpty()) { $pet->clinic()->attach(Filament::getTenant()->id); } }); }
@user-tx5ln5se9v
@user-tx5ln5se9v 10 месяцев назад
Hey, Nice tutorial. What theme you are having for the vscode? Name please.
@Tuto1902
@Tuto1902 10 месяцев назад
It’s called One Dark Pro. And I’m using Fira Code with ligatures enabled as my font
@agencialogisticagilbertove2239
@agencialogisticagilbertove2239 8 месяцев назад
Buen dia tuto1902 esperso se encuentre bien, traduciendo el video veo escucho que el ingles es su segunco idioma, de casualidad tienes tutorial de Filament en español?
@Tuto1902
@Tuto1902 8 месяцев назад
De momento solo en ingles
@decapitaregrimm6663
@decapitaregrimm6663 10 месяцев назад
I'm having issues with select in dark mode, kepp showing background white, it make hard to see the options,only when i put the cursor hover the option i'm able to see them. Great tutorial 1sub+ (Update) Already fix it by using native(false) in the Select class
@Tuto1902
@Tuto1902 10 месяцев назад
I'm glad you were able to fix it. I always go for the non-native selects👍
@einnlleinhatt_
@einnlleinhatt_ 8 месяцев назад
If i want to use uuid, how do i make the foreign key ?
@Tuto1902
@Tuto1902 8 месяцев назад
Use the foreignIdFor() method. It will make a foreign key depending on the model key type laravel.com/docs/10.x/migrations#column-method-foreignIdFor
@einnlleinhatt_
@einnlleinhatt_ 8 месяцев назад
@@Tuto1902 I can migrate using foreignIdFor but when i check my database, my owner_id inside pet tables doesnt has the primary key. This is what i did Schema::create('pets', function (Blueprint $table) { $table->uuid('id')->primary(); $table->string('name'); $table->uuid('owner_id')->nullable(); $table->date('date_of_birth'); $table->string('type'); $table->string('avatar')->nullable(); $table->timestamps(); }); Schema::table('pets', function (Blueprint $table) { $table->foreign('owner_id')->references('id')->on('owners'); }); Any advice to make it simple ?
@kincortezao2024
@kincortezao2024 2 месяца назад
Git dont have full project, web route is empty
@Tuto1902
@Tuto1902 2 месяца назад
Correct. This is a Filament v3 project and all routes are managed by Filament internally.
@jamz8241
@jamz8241 11 месяцев назад
I always forget that the forward slash and the backward slash is not the same for linux and windows terminal
@Tuto1902
@Tuto1902 11 месяцев назад
Oh boy, I haven’t used a windows terminal in more than 20 years. The backslash is used for file paths on windows, right?
@Tuto1902
@Tuto1902 11 месяцев назад
Yeah, I just checked, it is used for file paths. Opened a windows prompt, got PTSD, and closed it. 😅
@jamz8241
@jamz8241 11 месяцев назад
@@Tuto1902 Yes, I guess so, but if it gives me errors, I simply try the other one. 😄