Implement form support in Vue.js/REST API #3594

NateWr · 2018-04-17T09:40:07Z

The commit history on this is very large, so I will summarize the PRs and discussion here.

Summary

These PRs replace the context and site settings forms. A set of Vue.js components controls forms on the client side. Forms are submitted to the API, which uses service classes to validate, sanitize, get, create and update objects.

Significant infrastructural changes have been put in place, which I hope to consolidate into best practices used throughout the application. Includes:

Define and document entities with json-schema.
Replace our validation with Laravel's validation library.
Service class methods to sanitize and validate entities based on their json-schema.
A set of form and field components to configure and load forms on the frontend.

I've written up a rough introduction to the new schema-based architecture.

PRs:

#3931
pkp/ojs#2067
pkp/omp#614
pkp/ui-library#20
pkp/ojs-user-guide#20
pkp/omp-user-guide#2
pkp/customBlockManager#46
pkp/citationStyleLanguage#44
pkp/orcidProfile#49
pkp/staticPages#42
pkp/tinymce#41
pkp/usageStats#6

Theme PRs:

https://github.com/NateWr/bootstrap3/pull/101
NateWr/criticalTimes#4

Discussion

The text was updated successfully, but these errors were encountered:

asmecher · 2018-04-19T19:32:11Z

So a couple of notes about the current Form Builder Vocabulary structure. Overall it's been inflexible and weird and unpleasant to work with, but there are a few things it has done decently:

Abstracted away labeling and kept the required markup minimal (and accessibility standardized, if not wonderful)
Managed details like TinyMCE support with the flip of an attribute
Managed escaping/XSS (not hard to do with e.g. raw HTML, but needs to be done)
Especially multilingual support. This probably justifies its own meeting.

For better or for worse it did shrink a lot of multifarious markup down to a much trimmer and more standardized set.

…forms

…forms. When the aria-describedby content is read out by a screenreader, it would read the tooltip label. Something like: Tooltip for fieldname. But a screenreader user has no easy way to interact with that tooltip to display it. So instead we put the tooltip content into a separate hidden element and use that as thet aria-describedby. Now the screenreader reads out the actual tooltip rather than the button label.

…s true

Update ru_RU locale after #3594

#3594 Fix linting and syntax errors and remove unused .git…

pkp/pkp-lib#3594 Add new build process for UI Library

pkp/pkp-lib#3594 Refactor library to improve docs, JS linting and dep…

pkp/pkp-lib#3594 Add announcements locale strings dropped during rebase

- Add components for form fields, groups and pages - Add CSRF token to all POST, PUT and DELETE requests - Add pagination - Add multilingual support and progress tracking - Add tooltips and descriptions - Add HelpButton to open help panel - Add conditional display of form fields and groups - Add form error handling: - Add inline field errors - Add aria-invalid to invalid fields - Add button to go to next error - Add screenreader error interaction controls - Add indication of pages with errors in page list - Prevent form submission when errors present - Prevent form submission when required fields empty - Remove errors when a field is modified - Add styling for forms inside tabs - Add custom fields for metadata, showEnsuringLink, PKP PN plugin - Add custom form for handling theme options, copyrightHolder - Add tab component - Add new Orderer component - Update ListPanelItemOrderer to use new Orderer component - Implement FieldOptions ordering - Update submission list item status to new API structure - Update watchers to use Vue's watch feature

- Update vue-tabs-component to fix id/hash bug - Add CSRF token to file upload fields and LicenseForm - Fix bio showing in reviewer selection when no bio exists - Use description in FieldHTML instead of value so it is not submitted - Adjust size of form group titles - Don't show ListPanel filter button when no filters exist - Use inline tinymce editor [1] [1] This improves load time significantly, because tinymce no longer makes a separate request to a CSS file for each instance of the editor. It also solves an issue with tinymce editors inside modals, in which the iframe would stop loading properly if the modal was closed and reopened.

pkp/pkp-lib#3594 Initial forms implementation

…endencies This is a complete rebuild of the UI Library as a Vue CLI 3 app. It caters to child components better now, which is what the majority of our components will be.

pkp/pkp-lib#3594 Refactor library to improve docs, JS linting and dep…

NateWr self-assigned this Apr 17, 2018

NateWr added the Enhancement:3:Major A new feature or improvement that will take a month or more to complete. label Apr 17, 2018

NateWr added this to the OJS/OMP 3.2 milestone Apr 17, 2018

asmecher mentioned this issue Apr 17, 2018

Implement modals/tabs support in Vue.js #3595

Closed

NateWr added a commit to NateWr/ui-library that referenced this issue May 24, 2018

pkp/pkp-lib#3594 Initial implementation of Form component

0bf891d

NateWr added a commit to NateWr/ui-library that referenced this issue May 29, 2018

pkp/pkp-lib#3594 Add field types and groups to sample form

e57672e

NateWr added a commit to NateWr/ui-library that referenced this issue May 30, 2018

pkp/pkp-lib#3594 Move form field help/tooltips into components

7c5ecc9

NateWr added a commit to NateWr/ui-library that referenced this issue May 30, 2018

pkp/pkp-lib#3594 Add plain textarea field type

94f2ebb

NateWr added a commit to NateWr/ui-library that referenced this issue May 30, 2018

pkp/pkp-lib#3594 Add checkbox/radio input field component

d6ca3ea

NateWr added a commit to NateWr/ui-library that referenced this issue May 30, 2018

pkp/pkp-lib#3594 Separate aria-describedby from tooltip component in …

6c87948

…forms

NateWr added a commit to NateWr/ui-library that referenced this issue May 30, 2018

pkp/pkp-lib#3594 Style option form fields

a2e9390

NateWr added a commit to NateWr/ui-library that referenced this issue May 31, 2018

pkp/pkp-lib#3594 Add more to demo form and fix multilingual tooltips

6d54d2c

NateWr added a commit to NateWr/ui-library that referenced this issue May 31, 2018

pkp/pkp-lib#3594 Add initial support for paged forms

058df26

NateWr added a commit to NateWr/ui-library that referenced this issue May 31, 2018

pkp/pkp-lib#3594 Add border above form page buttons

3965400

NateWr added a commit to NateWr/ui-library that referenced this issue May 31, 2018

pkp/pkp-lib#3594 Allow showing two language inputs at once

14b6728

NateWr added a commit to NateWr/ui-library that referenced this issue May 31, 2018

pkp/pkp-lib#3594 Improve styling of form language toggler

e1b3f11

NateWr added a commit to NateWr/ui-library that referenced this issue Jun 1, 2018

pkp/pkp-lib#3594 Indicate progress in multilingual fields

fba37d9

NateWr added a commit to NateWr/ui-library that referenced this issue Jun 1, 2018

pkp/pkp-lib#3594 Initial implementation of tinymce field

94a3a33

NateWr added a commit to NateWr/ui-library that referenced this issue Jun 1, 2018

pkp/pkp-lib#3594 Add multilingual progress to select and options fields

aa77a17

NateWr added a commit to NateWr/ui-library that referenced this issue Jun 1, 2018

pkp/pkp-lib#3594 Add new password field with strength meter

dccc046

NateWr mentioned this issue Jun 4, 2018

[OJS 3.1.1.0] TinyMCE calls for google font even when enable_cdn is disabled #3759

Closed

NateWr added a commit to NateWr/ui-library that referenced this issue Jun 4, 2018

pkp/pkp-lib#3594 Only load NotoSans font in TinyMCE when enable_cdn i…

7fb4918

…s true

NateWr added a commit to NateWr/ui-library that referenced this issue Jun 4, 2018

pkp/pkp-lib#3594 Only load NotoSans font in TinyMCE when enable_cdn i…

8468a51

…s true

NateWr added a commit to NateWr/ui-library that referenced this issue Jun 12, 2018

pkp/pkp-lib#3594 Updates for initial integration with OJS

f8fac22

NateWr added a commit to NateWr/ui-library that referenced this issue Jun 12, 2018

pkp/pkp-lib#3594 Initial forms implementation

2e684b6

NateWr mentioned this issue Jun 12, 2018

UI components that communicate with the API don't consider mapped domains #3786

Closed

NateWr added a commit to NateWr/ojs that referenced this issue Jan 16, 2019

pkp/pkp-lib#3594 Add new build process for UI Library

74eaa05

NateWr added a commit to NateWr/ojs that referenced this issue Jan 16, 2019

pkp/pkp-lib#3594 Update exclusions when building package

58a14c6

NateWr added a commit to NateWr/omp that referenced this issue Jan 16, 2019

pkp/pkp-lib#3594 Update exclusions when building package

3344ab3

NateWr added a commit to NateWr/omp that referenced this issue Jan 16, 2019

pkp/pkp-lib#3594 Add new build process for UI Library

ec6bb07

NateWr added a commit to NateWr/omp that referenced this issue Jan 16, 2019

pkp/pkp-lib#3594 Update exclusions when building package

6205648

ppv1979 added a commit to ppv1979/pkp-lib that referenced this issue Jan 17, 2019

Update ru_RU locale after pkp#3594

57318cb

mtub added a commit that referenced this issue Jan 17, 2019

Merge pull request #4367 from ppv1979/master

b1420da

Update ru_RU locale after #3594

NateWr added a commit that referenced this issue Jan 17, 2019

Merge pull request #4354 from NateWr/i3594_ui_library

36a76bb

#3594 Fix linting and syntax errors and remove unused .git…

NateWr added a commit to pkp/omp that referenced this issue Jan 17, 2019

Merge pull request #617 from NateWr/i3594_ui_library

42472bb

pkp/pkp-lib#3594 Add new build process for UI Library

NateWr added a commit to pkp/ojs that referenced this issue Jan 17, 2019

Merge pull request #2235 from NateWr/i3594_ui_library

d45492f

pkp/pkp-lib#3594 Add new build process for UI Library

NateWr added a commit to pkp/ui-library that referenced this issue Jan 17, 2019

Merge pull request #27 from NateWr/i3594_ui_library

140c044

pkp/pkp-lib#3594 Refactor library to improve docs, JS linting and dep…

helix84 mentioned this issue Feb 17, 2019

make upgrade work again on postgres #4509

Merged

ajnyga mentioned this issue Feb 27, 2019

[OJS] Payments need to be enabled to change the length of journal embargo #3330

Closed

NateWr added a commit to pkp/bootstrap3 that referenced this issue Mar 4, 2019

pkp/pkp-lib#3594 Remove unused alt text locale key

6636324

NateWr mentioned this issue Mar 26, 2019

Translator plugin doesn't work with new settings tabs #4637

Closed

NateWr added a commit to NateWr/pkp-lib that referenced this issue Apr 1, 2019

pkp#3594 Fix fatal error when uploading homepage image

3944641

NateWr added a commit to NateWr/ojs that referenced this issue Apr 11, 2019

pkp/pkp-lib#3594 Add announcements locale strings dropped during rebase

216373e

NateWr added a commit to pkp/ojs that referenced this issue Apr 11, 2019

Merge pull request #2358 from NateWr/i3594_missing_locales

e020f16

pkp/pkp-lib#3594 Add announcements locale strings dropped during rebase

asmecher modified the milestones: OJS/OMP 3.3 (Unconfirmed), OJS 3.2.0 Apr 15, 2019

NateWr mentioned this issue May 14, 2019

Restore site settings and multi-press availability to OMP #4762

Closed

NateWr added a commit to NateWr/pkp-docs that referenced this issue Jan 23, 2020

pkp/pkp-lib#3594 Document file uploading in API

38fc5ee

NateWr added a commit to pkp/defaultManuscript that referenced this issue Feb 18, 2020

pkp/pkp-lib#3594 Convert theme option to new field classes

63c7e84

ViRuSTriNiTy mentioned this issue Mar 18, 2020

The command npm run build is not working since updating to OJS 3.2 #5641

Closed

NateWr mentioned this issue Nov 29, 2021

REST API sends wrong http status code on authorization failure #3014

Closed

henriqueramos pushed a commit to henriqueramos/ui-library that referenced this issue Jan 20, 2022

Merge pull request pkp#20 from NateWr/i3594_forms

a4d33b8

pkp/pkp-lib#3594 Initial forms implementation

henriqueramos pushed a commit to henriqueramos/ui-library that referenced this issue Jan 20, 2022

Merge pull request pkp#27 from NateWr/i3594_ui_library

d00b7ac

pkp/pkp-lib#3594 Refactor library to improve docs, JS linting and dep…

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement form support in Vue.js/REST API #3594

Implement form support in Vue.js/REST API #3594

NateWr commented Apr 17, 2018 •

edited

Loading

asmecher commented Apr 19, 2018

Implement form support in Vue.js/REST API #3594

Implement form support in Vue.js/REST API #3594

Comments

NateWr commented Apr 17, 2018 • edited Loading

Summary

PRs:

Theme PRs:

Discussion

asmecher commented Apr 19, 2018

NateWr commented Apr 17, 2018 •

edited

Loading