Skip to content

Commit

Permalink
[7.x] Next (#1060)
Browse files Browse the repository at this point in the history 
* PHP 8.0

* Translator: switch from ITranslator to Translator (#973)

* [7.x] Bootstrap 5 + PHP 8 + vanilla javascript (#1021)

* Bootstrap 5

* Bootstrap 5 (docs)

* Bootstrap 5

* form-control -> form-select

* Bump bootstrap-select for Bootstrap 5 support

* Removed `input-sm` from Bootstrap 3

See https://getbootstrap.com/docs/4.0/migration/#forms-1

* Bootstrap 5: When selectpicker, replace form-select classes with form-control and refresh it

* Hide `underline` also for `dropdown-item`. And merged into one CSS rule.

* Update the filterMultiSelect initialization

* Text-align: left -> start

Co-authored-by: Radim Vaculík <[email protected]>
Co-authored-by: Jaroslav Líbal <[email protected]>

* [7.x] phpstan-deprecation-rules (#1061)

* Fix sort

* Add method for setting custom Action href, v6.x (#853)

* [7.x] Nextras ORM 4 support, closes #984

* Fix ElasticsearchDataSource.php data source (#1041)

* Error: Typed property Ublaboo\DataGrid\InlineEdit\InlineEdit::$itemID must not be accessed before initialization

* composer: allow-plugins: php-http/discovery

* ItemDetailForm: $httpPost: Typed property must not be accessed...

* phpstan: revert  --memory-limit=4G

* NetteDatabaseSelectionHelper: Context -> Explorer, getSupplementalDriver -> getDriver

* Update README.md

* Templates: fix variables

* data-bs-toggle attribute for multiaction button (#1072)

* dependabot.yml (#1078)

* Allow nette/utils:4.0 (#1077)

* Add onColumnShow and onColumnHide event methods (#1076)

* Add onColumnShow and onColumnHide event methods

* Add native type array

* Removed duplicity

* Return value of BackedEnum when reading Doctrine entity property. (#1081)

* Return value of BackedEnum when reading array value (#1083)

* Added method to check if filter is on default values; Closes #1082 (#1084)

* ublaboo -> contributte (#1067) (#1075)

* Delete dependabot.yml

* Gitignore: remove compat.php

* Assets: rewrite to TS and plugin system

* Add missing phpdoc type (#1090)

* Add support for `nette/utils` version `4.0.0` (#1086)

* Add missing phpdoc type

---------

Co-authored-by: Dominik Harmim <[email protected]>

* fix: resolution name for datagrid -> attribute instead of class

* Fix timeout utils.ts (#1091)

During the build 
[tsl] ERROR in /node_modules/ublaboo-datagrid/assets/utils.ts(130,3)
      TS2322: Type 'Timeout' is not assignable to type 'number'.

* Typo fixes in docs (#1088)

* Fixed typos in columns.md

* Fixed typos in actions.md

* Update data-source.md

* Fixed typos in export.md

* Fixed typos, missing/redundant words in filters.md

* Update columns.md

* Fixed typos group-action.md

* Fixed typo inline-edit.md

* Fixed missin comma localization.md

* Fixed typos row.md

* Add support for `nette/utils` version `4.0.0` (#1086)

* Update .docs/export.md

Co-authored-by: Radim Vaculík <[email protected]>

---------

Co-authored-by: Dominik Harmim <[email protected]>
Co-authored-by: Radim Vaculík <[email protected]>

* Housekeep: Fix cs & phpstan issues (#1097)

* Fix: Github Actions: Coverage (#1098)

* Using data-datagrid-name="<name>" instead if data-datagrid-<name>

* Fixed CSS: change .datagrid selector to [data-datagrid-name]

* Fixed inline edit plugin

* phpstan fix

* Minor CSS changes for the next verison of datagrid

* Fix cs & phpstan

* Fix failing tests

* PHP 8.1 is new minimal version

* Fix phpstan

---------

Co-authored-by: Radim Vaculík <[email protected]>
Co-authored-by: Jaroslav Líbal <[email protected]>
Co-authored-by: Pavel Linhart <[email protected]>
Co-authored-by: Jan Bednář <[email protected]>
Co-authored-by: emololftw <[email protected]>
Co-authored-by: Vojtěch Kaizr <[email protected]>
Co-authored-by: jiriermis <[email protected]>
Co-authored-by: Martin Procházka <[email protected]>
Co-authored-by: Mia Vališová (Liliana) <[email protected]>
Co-authored-by: Vít Kutný <[email protected]>
Co-authored-by: Dominik Harmim <[email protected]>
Co-authored-by: Tomáš Mîčka <[email protected]>
Co-authored-by: Martin Kokeš <[email protected]>
Co-authored-by: RYUcze <[email protected]>
Co-authored-by: Pavel Janda <[email protected]>
Co-authored-by: Kryštof Záhumenský <[email protected]>
  • Loading branch information
@f3l1x @radimvaculik
@jaroslavlibal @Gappa @Creeperface01 @emololftw @wojtishek @jiriermis @juniwalk @lilianalillyy @vitkutny @harmim @to23mas @MartinKokesCz @RYUcze @paveljanda @KrisWav
17 people authored Mar 13, 2024
1 parent 1a63088 commit 6f9e6fb
Show file tree
Hide file tree
Showing 213 changed files with 6,178 additions and 6,567 deletions.
50 changes: 25 additions & 25 deletions .docs/actions.md
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
Table of contents

- [Actions](#actions)
- [Api](#api)
- [Parameters](#parameters)
- [Icon](#icon)
- [Class](#class)
- [Title](#title)
- [Confirmation](#confirmation)
- [Ajax](#ajax)
- [Redrawing the data](#redrawing-the-data)
- [Redrawing one row](#redrawing-one-row)
- [Sortable](#sortable)
- [Sorting handler](#sorting-handler)
- [MultiAction](#multiaction)
- [Item detail](#item-detail)
- [Item detail form](#item-detail-form)
- [Item detail template variables](#item-detail-template-variables)
- [Item detail render condition](#item-detail-render-condition)
- [ActionCallback](#actioncallback)
- [Toolbar button](#toolbar-button)
- [Api](#api)
- [Parameters](#parameters)
- [Icon](#icon)
- [Class](#class)
- [Title](#title)
- [Confirmation](#confirmation)
- [Ajax](#ajax)
- [Redrawing the data](#redrawing-the-data)
- [Redrawing one row](#redrawing-one-row)
- [Sortable](#sortable)
- [Sorting handler](#sorting-handler)
- [MultiAction](#multiaction)
- [Item detail](#item-detail)
- [Item detail form](#item-detail-form)
- [Item detail template variables](#item-detail-template-variables)
- [Item detail render condition](#item-detail-render-condition)
- [ActionCallback](#actioncallback)
- [Toolbar button](#toolbar-button)

# Actions

Expand Down Expand Up @@ -105,7 +105,7 @@ All links are by default not-ajax. Do you see the bold `ajax` class in previous
```php
public function handleDelete($id)
{
$this->connection->delete('ublaboo_example')
$this->connection->delete('example')
->where('id = ?', $id)
->execute();

Expand All @@ -127,7 +127,7 @@ When you are updating row data (i.e. status), you can send only one row as snipp
```php
public function handleSetStatus($id, $status)
{
$this->connection->update('ublaboo_example', ['status' => $satatus])
$this->connection->update('example', ['status' => $satatus])
->where('id = ?', $id)
->execute();

Expand Down Expand Up @@ -242,15 +242,15 @@ The name of the handler used for sorting can be changed:
$grid->setSortableHandler('foo!');
```

Also when you are using datagrid in component, you have to alter the name a bit:
Also, when you are using datagrid in component, you have to alter the name a bit:

```php
$grid->setSortableHandler('myComponent:sort!');
```

## MultiAction

Same as there is column status with pretty dropdown menu, ublaboo datagrid comes with similar dropdown menu for actions. It is called MultiAction:
Same as there is column status with pretty dropdown menu, the datagrid comes with similar dropdown menu for actions. It is called MultiAction:

```php
/**
Expand All @@ -261,7 +261,7 @@ $grid->addMultiAction('multi_action', 'MultiAction')
->addAction('blah2', 'Blahblah2', 'blah!', ['name']);
```

Sure you can alter multiaction class, icons, etc. Same you can change icon, class, etc of nested actions:
Sure you can alter multiaction class, icons, etc. Same you can change icon, class, etc. of nested actions:

```php
$grid->getAction('multi_blah')
Expand Down Expand Up @@ -312,7 +312,7 @@ $grid->setItemsDetailForm(function(Nette\Forms\Container $container) use ($grid,
});
```

DataGrid user template:
Datagrid user template:

```latte
{extends $originalTemplate}
Expand Down Expand Up @@ -361,7 +361,7 @@ $grid->addActionCallback('custom_callback', '')
};
```

You treat `ActionCallback` same as `Action`, except for some arguments passed to the `DataGrid::addActionCallback` method.
You treat `ActionCallback` same as `Action`, except for some arguments passed to the `Datagrid::addActionCallback` method.

## Toolbar button

Expand Down
185 changes: 86 additions & 99 deletions .docs/assets.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,116 +6,103 @@ Table of contents

# Assets

DataGrid needs for its precise functionality some third party scripts and styles. Install all required assets with NPM.
There are prepare JS/TS and CSS files for precise functionality. The best way is to use some frontend bundler, for example [Vite](https://vitejs.dev).

**CSS (external)**
## Installation

- bootstrap
- bootstrap datepicker
- bootstrap select

**CSS**

- datagrid.css
- datagrid-spinners.css

**JS (external)**

- jquery
- nette forms
- nette ajax / naja
- bootstrap
- bootstrap datepicker
- bootstrap select

**JS**

- datagrid.js
- datagrid-instant-url-refresh.js
- datagrid-spinners.js

**Icons**

You will probably want to use some icon font, but that is in your command.
On this project website we use font awesome (you can change the icon prefix by setting new value to static property `DataGrid::$iconPrefix = 'fa fa-';`).

**Spinners**

As you can see, there is also a `datagrid-spinners.js` script in a datagrid repository. If you include this file within you project layout, there are some actions, that will show spinner/some other animation when waiting for ajax response. Actions, that has somehow animated spinner:

- Group actions
- Pagination
- Changing items per page
- Toggling item detail - loading the detail for the first time

## NPM

```
npm install --save ublaboo-datagrid
```

package.json:
You need to install datagrid's assets. For example this way.

```json
{
"dependencies": {
"bootstrap-datepicker": "^1.9",
"bootstrap-select": "^1.13",
"bootstrap": "^4.4.1",
"happy-inputs": "^2.0",
"jquery": "^3.4.1",
"jquery-ui-sortable": "^1.0",
"nette-forms": "^3.0",
"nette.ajax.js": "^2.3",
"popper.js": "^1.14.7",
"ublaboo-datagrid": "^6.2"
}
"dependencies": {
"@contributte/datagrid": "git+ssh://[email protected]:contributte/datagrid.git#next"
}
}
```

## Example html when not using NPM

```html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/src/happy.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-datepicker.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/assets/datagrid.css">

<!-- Use this css for ajax spinners -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/assets/datagrid-spinners.css">

<!-- Include this css when using FilterMultiSelect (silviomoreto.github.io/bootstrap-select) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-select.css">
##

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
</head>
## Demo

<body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/src/nomodule-es5-fallback.js"></script>
<script>
var happy = new Happy;
Full example of using bundler.

happy.init();
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-datepicker.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/nette.ajax.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/assets/datagrid.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/src/assets/netteForms.min.js"></script>
**package.json**

<!-- It is recommended to include this JS file with just a few bits. It refreshes URL on non ajax request -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/assets/datagrid-instant-url-refresh.js"></script>

<!-- Use this little extension for ajax spinners -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/assets/datagrid-spinners.js"></script>
```json
{
"dependencies": {
"@contributte/datagrid": "git+ssh://[email protected]:contributte/datagrid.git#next",
"@fortawesome/fontawesome-free": "^6.3.0",
"bootstrap": "^5.3.0-alpha3",
"naja": "^2.5.0",
"nette-forms": "^3.3.1",
"prismjs": "^1.29.0",
"sortablejs": "^1.15.0",
"tom-select": "^2.2.2",
"vanillajs-datepicker": "^1.3.1"
},
"devDependencies": {
"@types/bootstrap-select": "^1.13.4",
"@types/jquery": "^3.5.16",
"@types/jqueryui": "^1.12.16",
"@types/sortablejs": "^1.15.1",
"@types/vanillajs-datepicker": "^1.2.1",
"autoprefixer": "^10.4.0",
"typescript": "^4.9.5",
"vite": "^2.6.10"
},
"scripts": {
"watch": "vite build --watch --mode=development",
"build": "vite build --mode=production"
}
}
```

<!-- Include bootstrap-select.js when using FilterMultiSelect (silviomoreto.github.io/bootstrap-select) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.js"></script>
</body>
</html>
**vite.config.js**

```js
import { defineConfig } from 'vite';
import { resolve } from 'path';

export default defineConfig(({ mode }) => {
const DEV = mode === 'development';

return {
publicDir: './assets/public',
resolve: {
alias: {
'@': resolve(__dirname, 'assets/js'),
'~': resolve(__dirname, 'node_modules'),
},
},
base: '/dist/',
server: {
open: false,
hmr: false,
},
css: {
postcss: [
"autoprefixer"
]
},
build: {
manifest: true,
assetsDir: '',
outDir: './www/dist/',
emptyOutDir: true,
minify: DEV ? false : 'esbuild',
rollupOptions: {
output: {
manualChunks: undefined,
chunkFileNames: '[name].js',
entryFileNames: '[name].js',
assetFileNames: '[name].[ext]',
},
input: {
app: './assets/js/main.js'
}
}
},
}
});
```
Loading

0 comments on commit 6f9e6fb

Please sign in to comment.