Skip to content

Commit d489da3

Browse files
devansh-webkuldevansh-webkul
authored
Merge pull request #399 from amit-webkul/doc-updates
Datagrid section added in versions 2.2 and 2.1 as well.
2 parents c1a1bac + be50b9f commit d489da3

File tree

12 files changed

+230
-29
lines changed

12 files changed

+230
-29
lines changed

‎docs/2.1/packages/datagrid.md

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -361,3 +361,98 @@ You can use these props to customize the appearance and behavior of the datagrid
361361
By customizing the DataGrid directly in the Blade file, you won't affect your default DataGrid. This means you can display the same DataGrid with various appearances and customize it by writing simple Vue.js code and using Tailwind CSS (since we use it in Bagisto).
362362
:::
363363

364+
365+
## Available Column Types
366+
367+
Bagisto’s DataGrid supports various column types that allow you to store, display, and manage diverse kinds of data. This also includes a searchability feature, allowing users to filter data by specific criteria. Below is a breakdown of key column types: integer, string, boolean, date, datetime, and aggregate types.
368+
369+
### Integer Column Type
370+
371+
The integer column type is designed for whole numbers without any fractional or decimal parts. This column type is ideal for counting or identification data. Used for IDs, quantities, and numeric fields that don’t require decimal places.
372+
373+
374+
```php
375+
$this->addColumn([
376+
'index' => 'id',
377+
'label' => trans('blog::app.admin.datagrid.index.id'),
378+
'type' => 'integer',
379+
'searchable' => true,
380+
'filterable' => true,
381+
'sortable' => true,
382+
]);
383+
```
384+
385+
### String Column Type
386+
387+
The string column type stores text or alphanumeric data. It’s widely used for columns that contain names, descriptions, or any textual information. Typically used for product names, customer names, categories, and descriptions.
388+
389+
```php
390+
$this->addColumn([
391+
'index' => 'name',
392+
'label' => trans('blog::app.admin.datagrid.index.name'),
393+
'type' => 'string',
394+
'searchable' => true,
395+
'filterable' => true,
396+
'sortable' => true,
397+
]);
398+
```
399+
400+
### Boolean Column Type
401+
402+
The boolean column type stores binary values such as true or false. It’s useful for indicating the state of a specific condition. Used for status flags like “active/inactive,” “available/unavailable,” or "enabled/disabled."
403+
404+
```php
405+
$this->addColumn([
406+
'index' => 'status',
407+
'label' => trans('blog::app.admin.datagrid.index.status'),
408+
'type' => 'boolean',
409+
'searchable' => true,
410+
'filterable' => true,
411+
'sortable' => true,
412+
]);
413+
```
414+
415+
### Date Column Type
416+
417+
The date column type stores dates, but without time information. It is useful when only the calendar date is important, such as in daily reports or event dates. Often used for birth dates, order dates, or specific event dates.
418+
419+
```php
420+
$this->addColumn([
421+
'index' => 'created_at',
422+
'label' => trans('blog::app.admin.datagrid.index.date'),
423+
'type' => 'date',
424+
'searchable' => true,
425+
'filterable' => 'date_range',
426+
'sortable' => true,
427+
]);
428+
```
429+
430+
### DateTime Column Type
431+
432+
The datetime column type stores both date and time information. This is important when precise timestamps are needed. Used for tracking exact times for events like order creation, login timestamps, or last updated times.
433+
434+
```php
435+
$this->addColumn([
436+
'index' => 'updated_at',
437+
'label' => trans('blog::app.admin.datagrid.index.date'),
438+
'type' => 'datetime',
439+
'searchable' => true,
440+
'filterable' => 'datetime_range',
441+
'sortable' => true,
442+
]);
443+
```
444+
445+
### Aggregate Type Column
446+
447+
The aggregate column type is used for displaying summarized or calculated data, such as totals, averages, or counts derived from other data in the DataGrid. Used to display metrics like total sales, average order value, or product count in categories.
448+
449+
```php
450+
$this->addColumn([
451+
'index' => 'total',
452+
'label' => trans('blog::app.admin.datagrid.index.total'),
453+
'type' => 'aggregate',
454+
'searchable' => true,
455+
'filterable' => true,
456+
'sortable' => true,
457+
]);
458+
```

‎docs/2.2/packages/blade-components.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -722,8 +722,8 @@ Let's assume you want to use the **`tabs`** component on shop. You can call it l
722722
class="container"
723723
:title="Tab-2"
724724
>
725-
<div class="container mt-[60px] max-1180:px-[20px]">
726-
<p class="text-[#6E6E6E] text-[18px] max-1180:text-[14px]">
725+
<div class="container mt-[60px] max-1180:px-5">
726+
<p class="text-[#6E6E6E] text-lg max-1180:text-sm">
727727
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
728728
</p>
729729
</div>

‎docs/2.2/packages/controllers.md

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,6 @@ In `packages/Webkul/Blog/src/Http/Controllers/Admin/PostController.php`, define
7979
/**
8080
* Create a controller instance.
8181
*
82-
* @param \Webkul\Blog\Repository\PostRepository $postRepository
8382
* @return void
8483
*/
8584
public function __construct(protected PostRepository $postRepository){}
@@ -151,7 +150,6 @@ In `packages/Webkul/Blog/src/Http/Controllers/Shop/PostController.php`, define t
151150
/**
152151
* Create a controller instance.
153152
*
154-
* @param \Webkul\Blog\Repository\PostRepository $postRepository
155153
* @return void
156154
*/
157155
public function __construct(protected PostRepository $postRepository){}

‎docs/2.2/packages/datagrid.md

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -440,3 +440,112 @@ Once you've completed this step, all the data within the DataGrid becomes access
440440
By customizing the DataGrid directly in the Blade file, you won't affect your default DataGrid. This means you can display the same DataGrid with various appearances and customize it by writing simple Vue.js code and using Tailwind CSS (since we use it in Bagisto).
441441
:::
442442

443+
## Available Column Types
444+
445+
Bagisto’s DataGrid supports various column types that allow you to store, display, and manage diverse kinds of data. This also includes a searchability feature, allowing users to filter data by specific criteria. Below is a breakdown of key column types: float, integer, string, boolean, date, datetime, and aggregate types.
446+
447+
### Integer Column Type
448+
449+
The integer column type is designed for whole numbers without any fractional or decimal parts. This column type is ideal for counting or identification data. Used for IDs, quantities, and numeric fields that don’t require decimal places.
450+
451+
452+
```php
453+
$this->addColumn([
454+
'index' => 'id',
455+
'label' => trans('blog::app.admin.datagrid.index.id'),
456+
'type' => 'integer',
457+
'searchable' => true,
458+
'filterable' => true,
459+
'sortable' => true,
460+
]);
461+
```
462+
463+
### Float Column Type
464+
465+
The Float column type stores numbers with high precision, allowing fractional parts. It’s ideal for financial or measurement data where exact precision is necessary. Used for columns like product prices, weights, or tax rates that require float values.
466+
467+
```php
468+
$this->addColumn([
469+
'index' => 'price',
470+
'label' => trans('blog::app.admin.datagrid.index.price'),
471+
'type' => 'float',
472+
'searchable' => true,
473+
'filterable' => true,
474+
'sortable' => true,
475+
]);
476+
```
477+
478+
### String Column Type
479+
480+
The string column type stores text or alphanumeric data. It’s widely used for columns that contain names, descriptions, or any textual information. Typically used for product names, customer names, categories, and descriptions.
481+
482+
```php
483+
$this->addColumn([
484+
'index' => 'name',
485+
'label' => trans('blog::app.admin.datagrid.index.name'),
486+
'type' => 'string',
487+
'searchable' => true,
488+
'filterable' => true,
489+
'sortable' => true,
490+
]);
491+
```
492+
493+
### Boolean Column Type
494+
495+
The boolean column type stores binary values such as true or false. It’s useful for indicating the state of a specific condition. Used for status flags like “active/inactive,” “available/unavailable,” or "enabled/disabled."
496+
497+
```php
498+
$this->addColumn([
499+
'index' => 'status',
500+
'label' => trans('blog::app.admin.datagrid.index.status'),
501+
'type' => 'boolean',
502+
'searchable' => true,
503+
'filterable' => true,
504+
'sortable' => true,
505+
]);
506+
```
507+
508+
### Date Column Type
509+
510+
The date column type stores dates, but without time information. It is useful when only the calendar date is important, such as in daily reports or event dates. Often used for birth dates, order dates, or specific event dates.
511+
512+
```php
513+
$this->addColumn([
514+
'index' => 'created_at',
515+
'label' => trans('blog::app.admin.datagrid.index.date'),
516+
'type' => 'date',
517+
'searchable' => true,
518+
'filterable' => 'date_range',
519+
'sortable' => true,
520+
]);
521+
```
522+
523+
### DateTime Column Type
524+
525+
The datetime column type stores both date and time information. This is important when precise timestamps are needed. Used for tracking exact times for events like order creation, login timestamps, or last updated times.
526+
527+
```php
528+
$this->addColumn([
529+
'index' => 'updated_at',
530+
'label' => trans('blog::app.admin.datagrid.index.date'),
531+
'type' => 'datetime',
532+
'searchable' => true,
533+
'filterable' => 'datetime_range',
534+
'sortable' => true,
535+
]);
536+
```
537+
538+
### Aggregate Type Column
539+
540+
The aggregate column type is used for displaying summarized or calculated data, such as totals, averages, or counts derived from other data in the DataGrid. Used to display metrics like total sales, average order value, or product count in categories.
541+
542+
```php
543+
$this->addColumn([
544+
'index' => 'total',
545+
'label' => trans('blog::app.admin.datagrid.index.total'),
546+
'type' => 'aggregate',
547+
'searchable' => true,
548+
'filterable' => true,
549+
'sortable' => true,
550+
]);
551+
```

‎docs/2.2/packages/layouts.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,13 @@ To extend the default layout of the Bagisto admin panel, you'll create or modify
2121
@lang('blog::app.admin.index.page-title')
2222
</x-slot:title>
2323

24-
<div class="flex gap-[16px] justify-between max-sm:flex-wrap">
25-
<p class="py-[11px] text-[20px] text-gray-800 dark:text-white font-bold">
24+
<div class="flex gap-4 justify-between max-sm:flex-wrap">
25+
<p class="py-[11px] text-xl text-gray-800 dark:text-white font-bold">
2626
<!-- Section Title -->
2727
@lang('blog::app.admin.index.page-title')
2828
</p>
2929

30-
<div class="flex gap-x-[10px] items-center">
30+
<div class="flex gap-x-2.5 items-center">
3131
<!-- Action Button -->
3232
</div>
3333
</div>

‎docs/2.2/packages/store-data-through-repositories.md

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,8 +69,6 @@ Copy the following code into your newly created repository file.
6969
{
7070
/**
7171
* Specify the Model class name
72-
*
73-
* @return string
7472
*/
7573
function model(): string
7674
{

‎docs/2.2/packages/validation.md

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -113,14 +113,12 @@ import { createApp } from "vue/dist/vue.esm-bundler";
113113
import { configure, defineRule } from "vee-validate";
114114
import { localize } from "@vee-validate/i18n";
115115
import en from "@vee-validate/i18n/dist/locale/en.json";
116-
import * as AllRules from '@vee-validate/rules';
116+
import { all } from '@vee-validate/rules';
117117

118118
/**
119119
* Registration of all global validators.
120120
*/
121-
Object.keys(AllRules).forEach(rule => {
122-
defineRule(rule, AllRules[rule]);
123-
});
121+
Object.entries(all).forEach(([name, rule]) => defineRule(name, rule));
124122

125123
/**
126124
* This regular expression allows phone numbers with the following conditions:
@@ -131,7 +129,7 @@ Object.keys(AllRules).forEach(rule => {
131129
* someone wants to customize it, they can override this rule.
132130
*/
133131
defineRule("phone", (value) => {
134-
if (!value || !value.length) {
132+
if (! value || ! value.length) {
135133
return true;
136134
}
137135

@@ -195,7 +193,7 @@ configure({
195193
Below are examples of how to use VeeValidate for validation in Vue components within Bagisto:
196194

197195
```html
198-
<x-admin::form.control-group class="w-full mb-[10px]">
196+
<x-admin::form.control-group class="w-full mb-2.5">
199197
<x-admin::form.control-group.label class="required">
200198
@lang('blog::app.admin.blog.create.title')
201199
</x-admin::form.control-group.label>
@@ -223,11 +221,11 @@ Below are examples of how to use VeeValidate for validation in Vue components wi
223221

224222
```javascript
225223
defineRule("phone", (value) => {
226-
if (!value || !value.length) {
224+
if (! value || ! value.length) {
227225
return true;
228226
}
229227

230-
if (!/^\+?\d+$/.test(value)) {
228+
if (! /^\+?\d+$/.test(value)) {
231229
return false;
232230
}
233231

@@ -238,12 +236,12 @@ defineRule("phone", (value) => {
238236

239237
```javascript
240238
defineRule("address", (value) => {
241-
if (!value || !value.length) {
239+
if (! value || ! value.length) {
242240
return true;
243241
}
244242

245243
if (
246-
!/^[a-zA-Z0-9\s.\/*'\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\u0590-\u05FF\u3040-\u309F\u30A0-\u30FF\u0400-\u04FF\u0D80-\u0DFF\u3400-\u4DBF\u2000-\u2A6D\u00C0-\u017F\u0980-\u09FF\u0900-\u097F\u4E00-\u9FFF,\(\)-]{1,60}$/iu.test(
244+
! /^[a-zA-Z0-9\s.\/*'\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\u0590-\u05FF\u3040-\u309F\u30A0-\u30FF\u0400-\u04FF\u0D80-\u0DFF\u3400-\u4DBF\u2000-\u2A6D\u00C0-\u017F\u0980-\u09FF\u0900-\u097F\u4E00-\u9FFF,\(\)-]{1,60}$/iu.test(
247245
value
248246
)
249247
) {

‎docs/2.2/themes/create-store-theme.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -154,3 +154,6 @@ return [
154154

155155
By following these steps, you can create and configure a new theme for your Bagisto store, enabling you to customize the appearance and layout to suit your branding and design preferences.
156156

157+
After adding your new theme, you will be able to select it when creating a new section for your storefront homepage from the admin panel.
158+
159+
![limiting-error-messages](../../assets/2.2/images/themes/new-theme-added.png)

‎docs/assets/2.2/images/themes/new-theme-added.png

95.6 KB
Loading

‎docs/master/packages/blade-components.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -251,7 +251,7 @@ Let's assume you want to use the **`tabs`** component on shop. You can call it l
251251
:title="Tab-1"
252252
:is-selected="true"
253253
>
254-
<div class="container mt-[60px] max-1180:px-[20px]">
254+
<div class="container mt-[60px] max-1180:px-5">
255255
<p class="text-[#6E6E6E] text-lg max-1180:text-sm">
256256
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
257257
</p>
@@ -262,7 +262,7 @@ Let's assume you want to use the **`tabs`** component on shop. You can call it l
262262
class="container"
263263
:title="Tab-2"
264264
>
265-
<div class="container mt-[60px] max-1180:px-[20px]">
265+
<div class="container mt-[60px] max-1180:px-5">
266266
<p class="text-[#6E6E6E] text-lg max-1180:text-sm">
267267
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
268268
</p>
@@ -711,8 +711,8 @@ Let's assume you want to use the **`tabs`** component on shop. You can call it l
711711
:title="Tab-1"
712712
:is-selected="true"
713713
>
714-
<div class="container mt-[60px] max-1180:px-[20px]">
715-
<p class="text-[#6E6E6E] text-[18px] max-1180:text-[14px]">
714+
<div class="container mt-[60px] max-1180:px-5">
715+
<p class="text-[#6E6E6E] text-lg max-1180:text-sm">
716716
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
717717
</p>
718718
</div>
@@ -722,8 +722,8 @@ Let's assume you want to use the **`tabs`** component on shop. You can call it l
722722
class="container"
723723
:title="Tab-2"
724724
>
725-
<div class="container mt-[60px] max-1180:px-[20px]">
726-
<p class="text-[#6E6E6E] text-[18px] max-1180:text-[14px]">
725+
<div class="container mt-[60px] max-1180:px-5">
726+
<p class="text-[#6E6E6E] text-lg max-1180:text-sm">
727727
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
728728
</p>
729729
</div>

0 commit comments

Comments
 (0)