Download the PHP package yanah/laravel-kwik-crud without Composer

Yanah Laravel "Kwik" CRUD Package

Description

This package is built to ease the work developers do by streamlining the process of scaffolding CRUD operations. It integrates seamlessly with Laravel, Inertia, and Vue.js 3, reducing boilerplate and simplifying the creation of CRUD functionality.

Discord

To collaborate, please join here: https://discord.gg/UksAt4HqF9

Overview

• Stack Used
• Installation & Configurations
• Run the application
• Package Command/s
• CRUD Implementation

  I. CRUD (Create)
  II. CRUD (LIST)
  III. CRUD (EDIT/UPDATE)
  IV. CRUD (SHOW)

• Customize Pages (CRUD)

  Insert Components before / after CRUD Pages (List, Edit, Create)
  Customize Form fields (Create/Edit)

• Additional Security
• CRUD Lifecycle
• Overriding CRUD controller method
• Before & After Create (CRUD)
• Before & After Update (CRUD)

Stack Used

• Inertia 2.0
• Vue 3
• Prime Vue 4
• Reactjs (Coming soon)

Installation & Configurations

To install the package, follow these steps:

• The default scafold is vuejs. We'll use reactjs soon.
• kwik:install --client=reactjs, Install for reactjs (SOON)

Add KwikServiceProvider to the providers array in your config/app.php:

In app/Http/Kernel.php, ensure that the HandleInertiaRequests middleware is added under web middleware groups.

Publish kwik configurations

$ php artisan vendor:publish --tag=kwikconfig

After this, new files will be added in config

Install Front-end dependencies:

$ npm install vue@latest @fortawesome/fontawesome-free primevue @primevue/themes primeicons @primevue/forms

In vite.config.js alias, add @kwik

In tailwind.config.js alias, add this line.

Run the application

Check tailwind.config.js configuration

Make sure to implement or use primevue in app.ts

$ npm run dev

$ php artisan serve

Package Commands

Execute CRUD automatically

Check the flags below:

name - refers to your model name. It should be capitalized & in singular form.

--only=:

• crudfiles - Only the ModelList.php, ModelCreate.php, ModelEdit.php will be generated
• controller - Only the {Model}Controller will be generated
• model - Only the Model will be generate

Example:

I. CRUD (Create)

Populate form with fields inside prepareCreateForm():

Example:

In creating of a form, configure Crud\{Model}Create.php

First, in prepareCreateForm(), Add group

Use the following syntax to add a group:

Second, Add field. Here is the syntax:

Note: The type attribute serves as the key to determine what input type we'll implement.

$attributes (Properties)

Types:

• text
• input Group
• textarea
• switch
• checkbox
• radio
• select
• select_group
• calendar: date & time
• autocomplete
• custom_file
• custom_html

Autocomplete input

Example:

Creating custom vue file

Add custom vue file into the field.

• source - All fileds should be saved inside Components folder.

Props:

attributes - All of the array values above will serve as attributes.

Emit

@updateFieldValue - This will update the value and be passed as payload.

Example:

More Attributes:

(To customize fields proceed to the bottom.)

Validations

Validations are defined in $validationRules.

II. CRUD (LIST)

CRUD List is configured in Crud\{Model}List.php

A. Two options how we display the table

First, Through Pagination.

Use BodyPaginatorInterface as interface, then add the responseBodyPaginator().
It should look like this:

Second, We may want to display all response data.

Use BodyCollectionInterface as interface, then add the responseBodyCollection()
It should look like this:

or, you may customize the row using html codes by adding rawHtml.

B. Define View

We have two options of how our list should look like:

ListTemplateViewEnum::TABLELIST or ListTemplateViewEnum::LISTITEM

• First, TABLELIST view contains pagination which requires BodyPaginatorInterface interface.
  
• Second, LISTITEM view displays all list it is attached to BodyCollectionInterface.

C. Toggle Visibility

In your \App\CrudKwik\DIR\{Model}List.php file, insert toggleVisibility method

To toggle action buttons:

APIs:

• showSearchBar: boolean - wrapper of add button, search and summary
• showSearch: boolean - toggle display search input
• showPrintPdf: boolean - toggle pdf print button (WIP)
• showAddButton: boolean - toggle Add button
• showListSummary: boolean - This shows the summary list of records in table list
• actions: array - toggle action buttons (preview, edit, delet).

Available toggle controls:

D. Handle Search functionality

Search functionality is visible only on pagination list and $control->set('showSearch', true);

III. CRUD (EDIT/UPDATE)

We'll reuse the fields we defined in prepareCreateForm().

We update those in prepareEditForm().

For $attributes, refer to $attributes (Properties) above.

Example:

Or the details:

(To customize fields proceed to the bottom.)

Validations

Check method getValidationRules to modify validations added in {Model}Create.php

IV. CRUD (SHOW)

From your controller, customize the display based on the data.

Expected return:

Customization:

You may add vue files before or after the table:

Customize Pages (CRUD)

Insert Components before / after CRUD Pages (List, Edit, Create)

Implement PageAffixInterface in Crud\{Model}Create.php, Crud\{Model}Edit.php, Crud\{Model}List.php and define the components to be inserted (prepend / append).

prepend & append have available api:

Example:

Customize Form fields (Create/Edit)

You may want to wrap fields.

Example:

See $attributes below:

See $headings (optional) below:

Additional Security

Notice that in show & edit pages, routes are accessible via id.

You may want to append uuid instead.

First, make sure to add uuid field in your model and migration.

Next, use the UuidRestrictionTrait trait in your controller.
Example:

CRUD Persist Lifecycle

Store

1. PageControl - Serves as middleware.
2. beforeStore - prepare method before storing.
3. Validations - handle validations.
4. Insert Model - updateOrCreate or create
5. afterStore - Handle . We may trigger an event after store.

Update

1. PageControl - Serves as middleware.
2. beforeUpdate - prepare method before storing.
3. Validations - handle validations.
4. Update model
5. afterUpdate - Handle . We may trigger an event after store.

Overriding CRUD controller method

You may want to override Crud Controller methods and use Laravel CRUD methods:

Before & After Create (CRUD)

In some cases, you may want to execute something or trigger an event before and after creating of new record. To do this, you have to override beforeStore() and afterStore() methods.

In your \App\CrudKwik\DIR\{Model}Create.php file, insert these lines:

Before & After Update (CRUD)

In your \App\CrudKwik\DIR\{Model}Edit.php file, insert these lines:

Todo list:

• Add Test
• Responsiveness
• Validate frontend

That's all. Please feel free to send PR when you found a bug.

Hope this package will help you "kwik"en your development. Appreciated!