'2023/11/14'에 해당되는 글 2건

  1. 2023.11.14 filament-select-tree (1)
  2. 2023.11.14 simple-datatables

filament-select-tree

php 2023. 11. 14. 23:44

라라벨에는 crud 리소스를 자동으로 생성해주는 여러가지 프레임워크가 있다

주로 admin 관리자 패널을 만드는데 최적화된 패키지들이다

그 중 라라벨 공식사이트에서 추천하는 nova가 있는데 이건 라이센스를 구매해야 한다

 

오픈소스 무료인 것 중 비슷한 것으로 filament라는 프레임워크가 있다

현재 3.x 버전까지 나온 상태인데 spatie와 연동되는 플러그인도 쓸만한 것이 많다

 

그 중 라라벨의 ORM인 Eloquent의 연관관계(relationships)을 이용해

트리 구조의 테이블 필터나 폼을 만들 수 있는 플러그인이 있다

https://github.com/CodeWithDennis/filament-select-tree

 

GitHub - CodeWithDennis/filament-select-tree: The multi-level select field lets you pick one or multiple options from a list tha

The multi-level select field lets you pick one or multiple options from a list that is neatly organized into different levels. - GitHub - CodeWithDennis/filament-select-tree: The multi-level select...

github.com

 

설치해서 BelongsTo 또는 BelongsToMany 연관관계(relationships)를 맺어주면 아래와 같이 사용 가능하다

 

매뉴얼 중에 드롭다운을 펼치는 방향에 대한 옵션에 오타가 있어서 풀리퀘스트를 날려서 현재는 수정된 상태

https://github.com/CodeWithDennis/filament-select-tree/commit/94e5a7fde6dfae8eb2ba5e38a264e510dabc84bf

 

Fix typos · CodeWithDennis/filament-select-tree@94e5a7f

directon => direction

github.com

 

연관관계에 대한 라라벨코리아의 문서는 아래에서 볼 수 있다

https://laravel.kr/docs/9.x/eloquent-relationships

 

라라벨 9.x - Relationships-연관관계

라라벨 한글 메뉴얼 9.x - Relationships-연관관계

laravel.kr

 

filament 데모 페이지는 아래에서 볼 수 있다

https://demo.filamentphp.com/

 

Login - Filament Demo

 

demo.filamentphp.com

 

db 스키마와 model, resource를 포함한 샘플 저장소를 깃허브에 올려두었다

https://github.com/illlust/filament-select-tree-sample-app

 

GitHub - illlust/filament-select-tree-sample-app

Contribute to illlust/filament-select-tree-sample-app development by creating an account on GitHub.

github.com

 

Posted by illlust
,

simple-datatables

javascript 2023. 11. 14. 23:16

자바스크립트에서 테이블 렌더링에 많이 쓰는 datatables
하지만 태고적 라이브러리인지라 jQuery에 의존적인 문제가 있다
simple-datatables 는 타입스크립트로 만들어서 바닐라js로 트랜스파일된 테이블 라이브러리로
datatables와 비슷하지만 jQuery 의존성이 없다
 
https://github.com/fiduswriter/simple-datatables/

GitHub - fiduswriter/simple-datatables: DataTables but in TypeScript transpiled to Vanilla JS

DataTables but in TypeScript transpiled to Vanilla JS - GitHub - fiduswriter/simple-datatables: DataTables but in TypeScript transpiled to Vanilla JS

github.com

 
아래 사이트에서 다양한 데모를 확인해볼 수 있다
https://fiduswriter.github.io/simple-datatables/demos/

Demos

fiduswriter.github.io

 
데모 Editing 쪽에 화면에서 제외될 컬럼(excludeColumns)을 옵션으로 넣으면 에러가 발생하는 버그가 있어서 이슈를 등록했다
https://github.com/fiduswriter/simple-datatables/issues/341

[BUG] When saving a row, an error occurs if you have excludeColumns. · Issue #341 · fiduswriter/simple-datatables

Describe the bug When saving a row, an error occurs if you have excludeColumns. The parameters of the function saveRow(data, row) Arrays data and row, have different lengths. I will Pull request th...

github.com

 
현재는 고쳐진 상태로 아래 링크된 커밋으로 수정되었다
https://github.com/fiduswriter/simple-datatables/commit/e186ebd01b16617734dd04e4b04143b05b34a5ef

resolve issue with excluded columns during editing, fixes #341 · fiduswriter/simple-datatables@e186ebd

johanneswilm committed Nov 13, 2023

github.com

                editor = makeEditable(table, {
                    contextMenu: true,
                    hiddenColumns: true,
                    excludeColumns: [1],
                    inline,
                    menuItems: [
                        {

 

Posted by illlust
,