Vue 3

[Skrypt]

Work in progress.

The goal here is first to migrate all the components and SFC to Vue 3. We cannot use new Vue with Vue 3 so some components will need to be refactored.

Also, the components dynamic loading methods need to be removed in favor of using a wrapping component with props simply. Favor usage of Vite with Vue 3 apps/components.

Tasks

• Migrate Media Library to Vue 3
• Migrate MediaField Media Picker to Vue 3
• Make Media Library (standalone) by using a different modal than the Bootstrap one. https://vue-final-modal.org/
• Make Media Library (standalone) by using display Flex and Grid simply instead of using Bootstrap classes for styling.
• Migrate Options Editor to Vue 3
• Update vue-multiselect and components that use it to Vue 3.
• Update vuedraggable and components that use it to Vue 3.
• CORS settings UI
• Check if it MediaApplication constraining extensions based on the first instantiated media field #15569 is fixed by this; if yes, close it.
• Check for other Media issues that might be fixed by this.

Fixes #7110.

Optional

Consider refactoring upload bits by using Uppy instead of JQuery FileUpload as it is now archived and old.

See:

https://uppy.io/
https://tus.io/
https://github.com/tusdotnet/tusdotnet
https://www.ietf.org/archive/id/draft-tus-httpbis-resumable-uploads-protocol-00.html

[github-actions]

This pull request has merge conflicts. Please resolve those before requesting a review.

[github-actions]

This pull request has merge conflicts. Please resolve those before requesting a review.

[github-actions]

It seems that this pull request didn't really move for quite a while. Is this something you'd like to revisit any time soon or should we close? Please comment if you'd like to pick it up.

[Skrypt]

Of course bot I will pick it up at some time in the future 😄

[github-actions]

This pull request has merge conflicts. Please resolve those before requesting a review.

[MikeAlhayek]

for instructions on how to resolve the merge conflicts due to #16572 please follow the step listed in this comment.

[github-actions]

It seems that this pull request didn't really move for quite a while. Is this something you'd like to revisit any time soon or should we close? Please comment if you'd like to pick it up.

[Skrypt]

The current state of this is that I'm refactoring the entire thing with Typescript and Uppy.
I will need to check if I can use that code here with @deanmarcussen and @aderderian
Also, need to evaluate how to replace the contextual menu Primevue component that we used with a different one.
We will need to strip out some code in there too that will not be necessary for this App.

Also one thing that doesn't work quite well is the fact that we are generating a TSClient.ts with NSwagStudio and by default OC doesn't have any Swagger endpoint. I remember that we decided back then to not include anything by default in OC.
At least, we could give some directions on how to generate the TSClient.

There would be some work to do also on the response produced by ApiControllers.

I remember that I got stuck at one point where I was trying to also refactor the build tool in OC to use something a little more up to date. The issue is that now everything Vue should be bundled with "Vite" but we also need to support legacy apps and also webpack.

[Piedone]

Thanks for the update!

[deanmarcussen]

The current state of this is that I'm refactoring the entire thing with Typescript and Uppy. I will need to check if I can use that code here with @deanmarcussen and @aderderian Also, need to evaluate how to replace the contextual menu Primevue component that we used with a different one. We will need to strip out some code in there too that will not be necessary for this App.

Happy to support that from our end.

Also one thing that doesn't work quite well is the fact that we are generating a TSClient.ts with NSwagStudio and by default OC doesn't have any Swagger endpoint. I remember that we decided back then to not include anything by default in OC. At least, we could give some directions on how to generate the TSClient.

I would suggest not trying to use a generated client here.
The problem (one of many) is that the generated swagger would be different depending on which modules are turned on, so very hard to achieve. It would be nice if nswag supported multiple documents, so we could generate one per controller/module, but that feature request with nswag has been open a very long time.

Obviously I have an nswag module, which is fine to use, or bring into OC, but it doesn't fix the above problem.

[Skrypt]

I can generate the client and remove what is not needed for the file app manually. But, yeah, that's a downside.