Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add a Left Sidebar for Placing Schemas #400

Closed
hand-dot opened this issue Dec 30, 2023 · 6 comments
Closed

Add a Left Sidebar for Placing Schemas #400

hand-dot opened this issue Dec 30, 2023 · 6 comments
Assignees
@hand-dot
Labels
idea @pdfme/schemas @pdfme/ui Designer

Comments

@hand-dot
Copy link
Collaborator

hand-dot commented Dec 30, 2023 •
edited

Is your feature request related to a problem? Please describe.

Currently, in pdfme, schemas are added by clicking the "Add new field" button. This button is located at the bottom of the right sidebar, and I don't think the user experience is particularly good. Not only is the location not optimal, but for example, if you want to add an image schema, you need to change the schema type after adding it.

Describe the solution you'd like

Add a left sidebar, and place icons for each schema type on this sidebar. Allow schemas to be placed by dragging and dropping these icons.

CleanShot 2023-12-30 at 15 32 54

ref: https://pdfgeneratorapi.com/templates/free-templates/personalized-quote -> Edit template button

Describe alternatives you've considered

None.

Additional context

I have been thinking about this UX improvement for a while, but it required adding icons to existing schemas and would be a breaking change, so I haven't been able to implement it. However, with many breaking changes occurring in V4, I would like to take this opportunity to implement it.
@peteward
Copy link
Collaborator

peteward commented Jan 2, 2024

I really like this.

It also increases the vertical real-estate of the right-hand sidebar, which can scroll off the screen for smaller resolutions.

@hand-dot
Copy link
Collaborator Author

hand-dot commented Jan 4, 2024 •
edited

ref: https://docs.dndkit.com/api-documentation/droppable
ref: https://lucide.dev/

@hand-dot hand-dot self-assigned this Mar 11, 2024
@hand-dot hand-dot mentioned this issue Mar 22, 2024
Merged
@vpn-dev
Copy link

vpn-dev commented Mar 22, 2024

Any work in progress on this @hand-dot
?

hand-dot added a commit that referenced this issue Mar 22, 2024
@hand-dot @peteward
Add a Left Sidebar for Placing Schemas #400 (#452)
8ddfa7a 
* TMP

* Remove original 'Add new field' Button

* TMP

* TMP

* add icon

* FIx drag position bug

* Minor fix

* Fix sidebar position

* Update snapshot

* Minor fix

* Update packages/ui/src/components/Designer/index.tsx

Co-authored-by: Peter Ward <pete@pennyblack.io>

---------

Co-authored-by: Peter Ward <pete@pennyblack.io>
@hand-dot
Copy link
Collaborator Author

hand-dot commented Mar 22, 2024 •
edited

Hi @vpn-dev

here is pr: #452
implementation is done.

this feature will be release as v4

@vpn-dev
Copy link

vpn-dev commented Mar 22, 2024

Cool @hand-dot , any idea when V4 will be published?

@hand-dot
Copy link
Collaborator Author

@vpn-dev
we need to resolve https://github.com/pdfme/pdfme/issues?q=is%3Aissue+is%3Aopen+label%3Atable

hand-dot added a commit that referenced this issue Apr 11, 2024
@hand-dot @peteward
@ikerd @CharnaceRegis
[WIP] V4 (#427)
a3a2b0b 
* Reconsider the internal data types and the template types (#389)

* Change SchemaForUI's data and readOnlyValue to content

* Fix bug

* Remove sampledata and instead always use content. & Use content regardless of readOnly or not. & Eliminate defaultValue and replace it with always using content.

* Change website template

* Fix placeholder bug

* Change generator test template

* Change content to optional

* Move getInputFromTemplate to common

* Remove columns

* Fix test

* move dynamictable.excalidraw

* remove idea dir

* New basePdf type and Support adding new pages to template (#394)

* Minor fix

* IMPL Support adding new pages to template #111

* Fix test

* Minor fix

* IMPL padding behavior

* Update snapshot

* Minor fix

* Update snapshot

* add i18n

* remove option from BlankPdf.padding

* Minor fix

* Minor fix

* format

* Add changeSchemas unit test (#403)

* Minor fix

* Add a version number to pdfme template from V4 onwards (#404)

* Impl

* Minor fix

* Padding move width (#407)

* Refactor position and size handling in helper.ts

* Fix bug

* Add DynamicTable Schema #332 (#408)

* [tmp] add some comment

* Update snapshot

* Add deploy-table script to package.json

* add new template for playground

* bug fix for form

* fix cell editing bug

* Fix Adding rows doesn't change the overall height of the table

* fix padding problem

* Fix build error

* Fix bug

* Minor fix

* Fix New lines not reflecting correctly

* minor fix

* Minor fix

* Change tableStyles def

* add i18n

* small bugfix

* FIx some TODO

* Remove japanese comment

* Minor fix

* Fix infinity loom for form

* fix save inputs bug

* fix window resize bug

* add skip for failing test and update snapshot

* Minor fix

* add presets for playground

* Minor fix

* Reconsider the internal data types and the template types (#389)

* Change SchemaForUI's data and readOnlyValue to content

* Fix bug

* Remove sampledata and instead always use content. & Use content regardless of readOnly or not. & Eliminate defaultValue and replace it with always using content.

* Change website template

* Fix placeholder bug

* Change generator test template

* Change content to optional

* Move getInputFromTemplate to common

* Remove columns

* Fix test

* move dynamictable.excalidraw

* remove idea dir

* New basePdf type and Support adding new pages to template (#394)

* Minor fix

* IMPL Support adding new pages to template #111

* Fix test

* Minor fix

* IMPL padding behavior

* Update snapshot

* Minor fix

* Update snapshot

* add i18n

* remove option from BlankPdf.padding

* Minor fix

* Minor fix

* format

* Add changeSchemas unit test (#403)

* Minor fix

* Add a version number to pdfme template from V4 onwards (#404)

* Impl

* Minor fix

* Padding move width (#407)

* Refactor position and size handling in helper.ts

* Fix bug

* Add DynamicTable Schema #332 (#408)

* [tmp] add some comment

* Update snapshot

* Add deploy-table script to package.json

* add new template for playground

* bug fix for form

* fix cell editing bug

* Fix Adding rows doesn't change the overall height of the table

* fix padding problem

* Fix build error

* Fix bug

* Minor fix

* Fix New lines not reflecting correctly

* minor fix

* Minor fix

* Change tableStyles def

* add i18n

* small bugfix

* FIx some TODO

* Remove japanese comment

* Minor fix

* Fix infinity loom for form

* fix save inputs bug

* fix window resize bug

* add skip for failing test and update snapshot

* Minor fix

* add presets for playground

* Minor fix

* Minor fix

* Update imports and fix font rendering

* Add a Left Sidebar for Placing Schemas #400 (#452)

* Remove original 'Add new field' Button

* add icon

* FIx drag position bug

* Minor fix

* Fix sidebar position

* Update snapshot

* Minor fix

* Update packages/ui/src/components/Designer/index.tsx

Co-authored-by: Peter Ward <pete@pennyblack.io>

---------

Co-authored-by: Peter Ward <pete@pennyblack.io>

* Fix test

* Improve left sidebar icon drop placement accuracy (#454)

* Fix Spanish translations for v4 (#463)

* Fix #431

* V4 (#467)

* feat: add french language

* feat: relecture

* feat: add french language

---------

Co-authored-by: regis <regis>

* Add French language option to playground

* rename table export name to tableBeta

---------

Co-authored-by: Peter Ward <pete@pennyblack.io>
Co-authored-by: Iker Diez <32014358+ikerd@users.noreply.github.com>
Co-authored-by: Régis <regis.charnace@leandco.fr>
@hand-dot hand-dot mentioned this issue Apr 11, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@hand-dot hand-dot

Labels
idea @pdfme/schemas @pdfme/ui Designer
Projects
No open projects
pdfme V4
Status: Done
Milestone
No milestone
Development

No branches or pull requests
3 participants
@peteward @hand-dot @vpn-dev