PHP code example of yanah / laravel-kwik-crud

1. Go to this page and download the library: Download yanah/laravel-kwik-crud library. Choose the download type require.

2. Extract the ZIP file and open the index.php.

3. Add this code to the index.php.
    
        
<?php
require_once('vendor/autoload.php');

/* Start to develop here. Best regards https://php-download.com/ */

    

yanah / laravel-kwik-crud example snippets


'providers' => [
    // Other providers...
    Yanah\LaravelKwik\KwikServiceProvider::class,
]

protected $middlewareGroups = [
    'web' => [
        \App\Http\Middleware\HandleInertiaRequests::class,
        // other middlewares...
    ],
];

$this->formgroup->addGroup('users', [
    'tab' => true,
    'label' => 'Users',
]);

$this->formgroup->addField('first_name', [
    'label' => 'Samuel',
    'type' => 'text'
]);

$this->formgroup->addGroup('GROUP_NAME_UNIQUE', [
    'tab' => boolean,
    'label' => string,
]);

$this->formgroup->addField('FIELD_NAME', $attributes);

**Text** $attributes example:
[
    'label' => 'Post Title',
    'type' => 'text'
]

**Input Group** $attributes example:
[
    'type' => 'input_group',
    'label' => 'Address',
    'placeholder' => 'Type your address',
    'group_icon' => 'pi pi-address-book' 
]

- group_icon is referred here: https://primevue.org/icons/

**Textarea** $attributes example:
[
    'label' => 'Post Body',
    'type' => 'textarea',
    'rows' => 4
]
**Switch** $attributes example:
[
    'label' => 'Billing details',
    'type' => 'switch'
]

**Checkbox**  $attributes example:
[
    'type' => 'checkbox',
    'is_boolean' => true, // if you need to return the checkbox as boolean, else string.
    'value' => old('CHECKBOX_ITEM', false),
    'label' => 'Your label',
    'class_item' => 'mb-5'
]

**Radio** $attributes example:
[
    'label' => 'Business Options',
    'type' => 'radio',
    'options' => [
        ['label' => 'Option 1', 'value' => 'option1'],
        ['label' => 'Option 2', 'value' => 'option2'],
        ['label' => 'Option 3', 'value' => 'option3'],
    ]
]


**Select** $attributes example:
[
    'label' => 'Business category',
    'type' => 'select',
    'options' => [
        ['label' => 'Option 1', 'optionValue' => 'option1'], // note: optionValue should be string
        ['label' => 'Option 2', 'optionValue' => 'option2'],
        ['label' => 'Option 3', 'optionValue' => 'option3'],
    ]
]

**Select Group** $attributes example:
[
    'type' => 'select_group',
    'label' => 'Service Group',
    'placeholder' => 'List of Services',
    '

[
    'type'    => 'autocomplete',
    'ult_query_results' => [
        ['label' => 'test', 'value' => 'this'],
        ['label' => 'test2', 'value' => 'this2'],
    ],
    'api_endpoint' => '/post/search'
]

[
    'type'  => 'custom_file', 
    'source' => '@/Components/CustomVueFile.vue' // This is relative to resources/js/Components directory
]

[
    'helper_text' => 'Sample text',
    
    'value' => 'ANY', // we attached this for every field for edit page purposes.

    'wrapperProps' => [
        // We may add bind to the wrapper of label & input
        // example: 'class' => 'bg-danger flex-row'
    ],

    'labelProps' => [
        // Cutomize or add styles on label
        // example: 'class' => 'text-sm'
    ],

    'inputProps' => [
        // Cutomize or add styles on Input Fields
        // example: 'class' => 'bg-danger w-full'
    ],

    'tooltip_label' => 'You may want to add tooltip for label. Icon is question mark.'
]

protected $validationRules = [
    // Add validations here.
];

class {Model}List implements ControlCrudInterface, BodyPaginatorInterface
{
    public function responseBodyPaginator(Builder $query) : LengthAwarePaginator
    {
        // you may customize the query here.
        return $query->paginate($this->perPage);
    }  
}

class {Model}List implements ControlCrudInterface, BodyCollectionInterface
{
    public function responseBodyCollection(Builder $query) : Collection
    {
        return $query->get()->map(function($item) {
            $item->primary = $item->title;  // customized main text
            $item->secondary = $item->body; // description
            return $item;
        });
    }   
}

public function responseBodyCollection(Builder $query) : Collection
{
    return $query->get()->map(function($item) {
        $item->rawHtml = '<div class="text-xl">Custom html here</div>'; // Add this property
        return $item;
    });
}

use Yanah\LaravelKwik\Crud\CrudListControl;

public function toggleVisibility(CrudListControl $control) : array
{
    $control->set('showSearch', true); // add more below

    return $control->get()->toArray();
}

$control->set('showSearchBar', false);
$control->updateAction('edit', true);
$control->updateAction('delete', true);

'showSearchBar' => true,
'showSearch'    => true,
'showPrintPdf'  => false,
'showAddButton' => true,
'showListSummary' => true,
'actions' => [
    'preview' => true,
    'edit' => true,
    'delete' => true,
]

public function search(Builder $query, string $q) : Builder
{
    return $query->where('FIELD', $q);
}

$this->formgroup->editField('GROUP_NAME', 'FIELD_NAME', $attributes); // pattern

$this->formgroup->editField('details', 'post_title', [
    'label' => 'Post Title (Edited)',
    'value' => old('post_title', $post->title)
]);

$this->formgroup->editDetails(string $groupName, array $details);
 
public function getValidationRules() {}

[
    'data' => $data, // This will be shown on the table
    'except' => [] // list down the fields you don't want to display.
];

public function getShowItem(Builder $query, $fields = ['*'], $id)
{
    $this->setPageWrapperItems([
        'prepend' => '@/Components/SampleLorem.vue', // Before the table
        'append'  => '@/Components/SampleLorem.vue', // This will be shown after the table
    ]);
    // More codes below
}

use Yanah\LaravelKwik\App\Contracts\PageAffixInterface;

class {CrudClass} extends KwikForm implements PageAffixInterface
{
    public function defineAttributes(): array
    {
        return [
            'prepend' => '@/Components/YOUR_FILE_HERE.vue',
            'append'  => '@/Components/YOUR_FILE_HERE.vue'
        ];
    }
}

$this->formgroup->beginWrap('INDEX_KEY', $atributes, $headings);

// Add Fields here

$this->formgroup->endWrap();
 
[
    'class' => 'gap-4 xs:grid-cols-1 sm:grid-cols-1', // cuztomize the cols number as desired
    'style' => 'background:red;'
]

[
    'heading' => string,
    'paragraph' => string,
]

use Yanah\LaravelKwik\Traits\UuidRestrictionTrait;

class {Your}Controller extends KwikController implements PageControlInterface
{
    use UuidRestrictionTrait; // Attach this
}

class YourController extends KwikController  implements PageControlInterface
{
    public function create()
    {
        // do something here.

        return parent::create();
    }
}

use Yanah\LaravelKwik\Services\CrudService;

public function beforeStore(CrudService $crudService) : void
{
    // Change to false if you want to insert validated payloads only.
    $crudService->setShouldIncludeFillable(true);

    $crudService->setIndexOfUpdateCreate([
        // You may want to use updateCreate.
        // Add here the index, example:
        'user_id' => 1 // this will updateCreate based on user_id
    ]); 
}

public function afterStore($response)
{
    // Add stuffs

    // response
    return response()->json(['success' => true], 201);
}

use Yanah\LaravelKwik\Services\CrudService;

public function beforeUpdate(CrudService $crudService) : void
{
    $crudService->setShouldIncludeFillable(true);
    $crudService->setIndexOfUpdateCreate([
        // You may want to use updateCreate.
        // Add here the index
    ]); 
}

public function afterUpdate($id)
{
    // trigger event after update

    return response()->json(['success' => true], 201);
}
bash
$ php artisan kwik:install
javascript
content: [
    // More contents here
    'vendor/yanah/laravel-kwik-crud/src/client/vuejs/**/*.vue',
],
bash
$ php artisan kwik:crud Post --only=crudfiles
javascript
//@/Components/YOUR_FILE_HERE.vue
const emit = defineEmits(['updateCrudList']); // Make sure to define updateCrudList.

const ChangeListItems = () => {
  router.visit(`URL`, {
    method: 'get',
    preserveState: true, 
    replace: true, 
    onSuccess: (response) => {
      emit('updateCrudList', response.props.crud)
    },
  });
}