Closed kubilaymelnikov closed 3 years ago
@kubilaymelnikov I see. I'm not sure we are able to call POST method from vue routing on client side, but at this moment I can show you how we have handled it without the performing of the vuex action to setup the new page content.
This is our submit action
/**
* UiForm Submit callback
* @param {UiFormSubmitObject} FormObject
*/
async onSubmit ({ validator, form, formRef } : UiFormSubmitObject) {
const { flags, setErrors } = validator
const { resetForm } = form
const formData = new FormData(formRef)
if (flags.valid) {
this.setState('sending')
try {
const page = await this.sendForm(formData, this.link.url)
this.response = this.findFormElementById(page, this.id)
if (this.apiResponse?.status === 'success') {
this.setState('success')
resetForm()
return this.onSuccess(this.apiResponse.actionAfterSuccess)
}
if (this.apiResponse?.status === 'failure') {
setErrors(this.prepareErrors(this.apiResponse.errors))
this.setState('failure')
}
} catch (err) {
this.setState('error')
}
}
},
So we can start from const page = await this.sendForm(formData, this.link.url)
which consume formData object and link.url - which is form action.
It looks simple:
async sendForm (formData: FormData, url: string): Promise<TYPO3.Response.Page> {
return await (this.$typo3 as TYPO3.Plugin).api.$http.$post(url, formData, {
headers: { 'Content-Type': 'multipart/form-data' }
})
},
we purposely called it page
because response from this API call will be whole page object - with page.content
field which includes all content elements for this page. So the next step is find the CE responsible for this specific form, because there we can find response (sick I know 😸 ).
this.response = this.findFormElementById(page, this.id)
/**
* Find form content element from page colpos objects
* @param {TYPO3.Response.Page} TYPO3 page object
* @param {number} id of current content element
* @returns {FormContentElement} content elemenet data
*/
findFormElementById (page: TYPO3.Response.Page, id : number) : FormContentElement {
let formContent : FormContentElement
if (Object.values(page.content)) {
formContent = Object.values(page.content).map(contentArr => contentArr.find(element => element?.id === id))?.[0]
}
return formContent
},
Next we have check what is in the this.apiResponse
- this is computed value based on this.response
we got from content element responsible for form:
apiResponse () : FormApi | undefined {
return this.response?.content?.form?.api
},
So it response contain success then we can perform action on success this.apiResponse.actionAfterSuccess
- this is response from finishers.
/**
* Action to call on success
* @param {ActionAfterSuccess} actionAfterSuccess object
* @returns {void}
*/
onSuccess (actionAfterSuccess: ActionAfterSuccess): void {
if (actionAfterSuccess?.redirectUri) {
this.$router.push(actionAfterSuccess.redirectUri)
}
So this is tricky a bit, but doable ;-)
let me know if you need more details about it.
@mercs600, thank you for the detailed answer! I forgot that I have written this here...
Introduction:
We are missing the functionality to send POST-request via router. In this particular project we have a multi-page form in TYPO3. There is no way to handle TYPO3 responses and a way to deal with POST requests in combination with the routing. This problem probably affects other areas (for example news pagination).
Example problem:
My current solution is to put the response in the store:
To refresh the page I had to make changes to the way page content is handed over:
This however, has two negative side effects:
Possible Solution
Add a
postPage(path, data)
here: https://github.com/TYPO3-Initiatives/nuxt-typo3/blob/6bde261c1ee20809f633f92ff5080f590031d3fe/lib/templates/lib/api.js#L36-L44Check if parameters have been handed over and call the respective action at this point: https://github.com/TYPO3-Initiatives/nuxt-typo3/blob/6bde261c1ee20809f633f92ff5080f590031d3fe/lib/templates/middleware/context.js#L35-L62
However, I’m still uncertain how to hand the parameters to the middleware in combination with the router: https://router.vuejs.org/guide/essentials/navigation.html