Skip to content

Commit

Permalink
Merge pull request #399 from amit-webkul/doc-updates
Browse files Browse the repository at this point in the history 
Datagrid section added in versions 2.2 and 2.1 as well.
  • Loading branch information
@devansh-webkul
devansh-webkul authored Sep 17, 2024
2 parents c1a1bac + be50b9f commit d489da3
Show file tree
Hide file tree
Showing 12 changed files with 230 additions and 29 deletions.
95 changes: 95 additions & 0 deletions docs/2.1/packages/datagrid.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -361,3 +361,98 @@ You can use these props to customize the appearance and behavior of the datagrid
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).
:::


## Available Column Types

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.

### Integer Column Type

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.


```php
$this->addColumn([
'index' => 'id',
'label' => trans('blog::app.admin.datagrid.index.id'),
'type' => 'integer',
'searchable' => true,
'filterable' => true,
'sortable' => true,
]);
```

### String Column Type

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.

```php
$this->addColumn([
'index' => 'name',
'label' => trans('blog::app.admin.datagrid.index.name'),
'type' => 'string',
'searchable' => true,
'filterable' => true,
'sortable' => true,
]);
```

### Boolean Column Type

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."

```php
$this->addColumn([
'index' => 'status',
'label' => trans('blog::app.admin.datagrid.index.status'),
'type' => 'boolean',
'searchable' => true,
'filterable' => true,
'sortable' => true,
]);
```

### Date Column Type

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.

```php
$this->addColumn([
'index' => 'created_at',
'label' => trans('blog::app.admin.datagrid.index.date'),
'type' => 'date',
'searchable' => true,
'filterable' => 'date_range',
'sortable' => true,
]);
```

### DateTime Column Type

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.

```php
$this->addColumn([
'index' => 'updated_at',
'label' => trans('blog::app.admin.datagrid.index.date'),
'type' => 'datetime',
'searchable' => true,
'filterable' => 'datetime_range',
'sortable' => true,
]);
```

### Aggregate Type Column

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.

```php
$this->addColumn([
'index' => 'total',
'label' => trans('blog::app.admin.datagrid.index.total'),
'type' => 'aggregate',
'searchable' => true,
'filterable' => true,
'sortable' => true,
]);
```
4 changes: 2 additions & 2 deletions docs/2.2/packages/blade-components.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -722,8 +722,8 @@ Let's assume you want to use the **`tabs`** component on shop. You can call it l
class="container"
:title="Tab-2"
>
<div class="container mt-[60px] max-1180:px-[20px]">
<p class="text-[#6E6E6E] text-[18px] max-1180:text-[14px]">
<div class="container mt-[60px] max-1180:px-5">
<p class="text-[#6E6E6E] text-lg max-1180:text-sm">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</div>
Expand Down
2 changes: 0 additions & 2 deletions docs/2.2/packages/controllers.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,6 @@ In `packages/Webkul/Blog/src/Http/Controllers/Admin/PostController.php`, define
/**
* Create a controller instance.
*
* @param \Webkul\Blog\Repository\PostRepository $postRepository
* @return void
*/
public function __construct(protected PostRepository $postRepository){}
Expand Down Expand Up @@ -151,7 +150,6 @@ In `packages/Webkul/Blog/src/Http/Controllers/Shop/PostController.php`, define t
/**
* Create a controller instance.
*
* @param \Webkul\Blog\Repository\PostRepository $postRepository
* @return void
*/
public function __construct(protected PostRepository $postRepository){}
Expand Down
109 changes: 109 additions & 0 deletions docs/2.2/packages/datagrid.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -440,3 +440,112 @@ Once you've completed this step, all the data within the DataGrid becomes access
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).
:::

## Available Column Types

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.

### Integer Column Type

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.


```php
$this->addColumn([
'index' => 'id',
'label' => trans('blog::app.admin.datagrid.index.id'),
'type' => 'integer',
'searchable' => true,
'filterable' => true,
'sortable' => true,
]);
```

### Float Column Type

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.

```php
$this->addColumn([
'index' => 'price',
'label' => trans('blog::app.admin.datagrid.index.price'),
'type' => 'float',
'searchable' => true,
'filterable' => true,
'sortable' => true,
]);
```

### String Column Type

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.

```php
$this->addColumn([
'index' => 'name',
'label' => trans('blog::app.admin.datagrid.index.name'),
'type' => 'string',
'searchable' => true,
'filterable' => true,
'sortable' => true,
]);
```

### Boolean Column Type

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."

```php
$this->addColumn([
'index' => 'status',
'label' => trans('blog::app.admin.datagrid.index.status'),
'type' => 'boolean',
'searchable' => true,
'filterable' => true,
'sortable' => true,
]);
```

### Date Column Type

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.

```php
$this->addColumn([
'index' => 'created_at',
'label' => trans('blog::app.admin.datagrid.index.date'),
'type' => 'date',
'searchable' => true,
'filterable' => 'date_range',
'sortable' => true,
]);
```

### DateTime Column Type

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.

```php
$this->addColumn([
'index' => 'updated_at',
'label' => trans('blog::app.admin.datagrid.index.date'),
'type' => 'datetime',
'searchable' => true,
'filterable' => 'datetime_range',
'sortable' => true,
]);
```

### Aggregate Type Column

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.

```php
$this->addColumn([
'index' => 'total',
'label' => trans('blog::app.admin.datagrid.index.total'),
'type' => 'aggregate',
'searchable' => true,
'filterable' => true,
'sortable' => true,
]);
```
6 changes: 3 additions & 3 deletions docs/2.2/packages/layouts.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,13 @@ To extend the default layout of the Bagisto admin panel, you'll create or modify
@lang('blog::app.admin.index.page-title')
</x-slot:title>

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

<div class="flex gap-x-[10px] items-center">
<div class="flex gap-x-2.5 items-center">
<!-- Action Button -->
</div>
</div>
Expand Down
2 changes: 0 additions & 2 deletions docs/2.2/packages/store-data-through-repositories.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,8 +69,6 @@ Copy the following code into your newly created repository file.
{
/**
* Specify the Model class name
*
* @return string
*/
function model(): string
{
Expand Down
18 changes: 8 additions & 10 deletions docs/2.2/packages/validation.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,14 +113,12 @@ import { createApp } from "vue/dist/vue.esm-bundler";
import { configure, defineRule } from "vee-validate";
import { localize } from "@vee-validate/i18n";
import en from "@vee-validate/i18n/dist/locale/en.json";
import * as AllRules from '@vee-validate/rules';
import { all } from '@vee-validate/rules';

/**
* Registration of all global validators.
*/
Object.keys(AllRules).forEach(rule => {
defineRule(rule, AllRules[rule]);
});
Object.entries(all).forEach(([name, rule]) => defineRule(name, rule));

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

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

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

```javascript
defineRule("phone", (value) => {
if (!value || !value.length) {
if (! value || ! value.length) {
return true;
}

if (!/^\+?\d+$/.test(value)) {
if (! /^\+?\d+$/.test(value)) {
return false;
}

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

```javascript
defineRule("address", (value) => {
if (!value || !value.length) {
if (! value || ! value.length) {
return true;
}

if (
!/^[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(
! /^[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(
value
)
) {
Expand Down
3 changes: 3 additions & 0 deletions docs/2.2/themes/create-store-theme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,3 +154,6 @@ return [

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.

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.

![limiting-error-messages](../../assets/2.2/images/themes/new-theme-added.png)
Binary file added docs/assets/2.2/images/themes/new-theme-added.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 6 additions & 6 deletions docs/master/packages/blade-components.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -251,7 +251,7 @@ Let's assume you want to use the **`tabs`** component on shop. You can call it l
:title="Tab-1"
:is-selected="true"
>
<div class="container mt-[60px] max-1180:px-[20px]">
<div class="container mt-[60px] max-1180:px-5">
<p class="text-[#6E6E6E] text-lg max-1180:text-sm">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
Expand All @@ -262,7 +262,7 @@ Let's assume you want to use the **`tabs`** component on shop. You can call it l
class="container"
:title="Tab-2"
>
<div class="container mt-[60px] max-1180:px-[20px]">
<div class="container mt-[60px] max-1180:px-5">
<p class="text-[#6E6E6E] text-lg max-1180:text-sm">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
Expand Down Expand Up @@ -711,8 +711,8 @@ Let's assume you want to use the **`tabs`** component on shop. You can call it l
:title="Tab-1"
:is-selected="true"
>
<div class="container mt-[60px] max-1180:px-[20px]">
<p class="text-[#6E6E6E] text-[18px] max-1180:text-[14px]">
<div class="container mt-[60px] max-1180:px-5">
<p class="text-[#6E6E6E] text-lg max-1180:text-sm">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</div>
Expand All @@ -722,8 +722,8 @@ Let's assume you want to use the **`tabs`** component on shop. You can call it l
class="container"
:title="Tab-2"
>
<div class="container mt-[60px] max-1180:px-[20px]">
<p class="text-[#6E6E6E] text-[18px] max-1180:text-[14px]">
<div class="container mt-[60px] max-1180:px-5">
<p class="text-[#6E6E6E] text-lg max-1180:text-sm">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</div>
Expand Down
6 changes: 3 additions & 3 deletions docs/master/packages/layouts.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,13 @@ To extend the default layout of the Bagisto admin panel, you'll create or modify
@lang('blog::app.admin.index.page-title')
</x-slot:title>

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

<div class="flex gap-x-[10px] items-center">
<div class="flex gap-x-2.5 items-center">
<!-- Action Button -->
</div>
</div>
Expand Down
Loading

0 comments on commit d489da3

Please sign in to comment.