[Koha-devel] Vue improvements/refactorings

[Jonathan Druart]

Yes, David, we can lazy load the components. I have not considered it a
high priority for now.

I've opened a bug to keep track of the need bug 33024 (Lazy load the
components in the routes definition)

Le mar. 21 févr. 2023 à 07:08, David Cook <dcook at prosentient.com.au> a
écrit :

> I’ve spent the past few days working with Vue.js on a different app, so
> it’s certainly on my mind, but I’ve also had a build up of tasks.
>
>
>
> I took a look at “routes.js” for
> https://bugs.koha-community.org/bugzilla3/page.cgi?id=splinter.html&bug=32806&attachment=146664
> and all the import statements looked a bit cumbersome.
>
>
>
> I quizzed ChatGPT earlier about my design for the different app, and was
> impressed with what it had to say.
>
>
>
> My prompt: “With Vue.js 3, is there an easy way to import multiple
> components without having to specify each one separately?”
>
>
>
> ChatGPT: It gave some explanatory text and the following code:
>
>
>
> import { defineAsyncComponent } from 'vue';
>
>
>
> const components = [
>
>   'MyComponent1',
>
>   'MyComponent2',
>
>   'MyComponent3',
>
> ];
>
>
>
> const asyncComponents = components.map(name => defineAsyncComponent(() =>
> import(`@/components/${name}.vue`)));
>
>
>
> export default {
>
>   components: {
>
>     ...asyncComponents.reduce((obj, component, index) => {
>
>       obj[components[index]] = component;
>
>       return obj;
>
>     }, {}),
>
>   },
>
> };
>
>
>
> I haven’t looked enough at Koha’s Vue.js code for ERM, but doing something
> along those lines could reduce the copy/paste text from routes.js.
>
>
>
> Anyway, I have to run, but I thought you might find that interesting.
>
>
>
> David Cook
>
> Senior Software Engineer
>
> Prosentient Systems
>
> Suite 7.03
>
> 6a Glen St
>
> Milsons Point NSW 2061
>
> Australia
>
>
>
> Office: 02 9212 0899
>
> Online: 02 8005 0595
>
>
>
> *From:* Koha-devel <koha-devel-bounces at lists.koha-community.org> *On
> Behalf Of *Jonathan Druart
> *Sent:* Thursday, 16 February 2023 6:41 PM
> *To:* koha-devel <koha-devel at lists.koha-community.org>
> *Subject:* Re: [Koha-devel] Vue improvements/refactorings
>
>
>
> Bug 32806 modifies the directory structure and how Vue files are organised.
>
> Bug 32939 is centralising the way we request the Koha REST API by having a
> single place where the fetch is made.
>
> I want people to be aware of these changes, and see them agree (or
> disagree and provide follow-ups) quickly. There are many changes to build
> on top of that, and we don't want to provide them before getting the
> suggestion approved.
>
>
>
> Le mer. 15 févr. 2023 à 23:18, David Cook <dcook at prosentient.com.au> a
> écrit :
>
> I’ve started playing more with Vue for some other projects, so I wouldn’t
> mind taking a look.
>
>
>
> Is there anything particular you want us to look at with these patches?
>
>
>
> David Cook
>
> Senior Software Engineer
>
> Prosentient Systems
>
> Suite 7.03
>
> 6a Glen St
>
> Milsons Point NSW 2061
>
> Australia
>
>
>
> Office: 02 9212 0899
>
> Online: 02 8005 0595
>
>
>
> *From:* Koha-devel <koha-devel-bounces at lists.koha-community.org> *On
> Behalf Of *Jonathan Druart
> *Sent:* Thursday, 16 February 2023 12:10 AM
> *To:* koha-devel <koha-devel at lists.koha-community.org>
> *Subject:* [Koha-devel] Vue improvements/refactorings
>
>
>
> Hi,
>
>
>
> Pedro and I have been working on improving the way we request the Koha
> REST API from Vue components.
>
> We ended up with the implementation that is available on the following
> remote branch:
>
> https://gitlab.com/joubu/Koha/-/commits/bug_32925
>
>
>
> It contains the patches from the following bug reports:
>
> *Bug 32898*
> <https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=32898> -
> Cypress tests are failing
>
> *Bug 32923*
> <https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=32923> -
> x-koha-embed must a header of collectionFormat csv
>
> *Bug 32806*
> <https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=32806> - Some
> Vue files need to be moved for better reusability
>
> *Bug 32939*
> <https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=32939> - Have
> generic fetch functions in vue modules
>
> *Bug 32925*
> <https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=32925> -
> Display loading info when a form is submitted
>
>
>
> First, make the tests pass (32898)! We forgot to include the cypress test
> in the jenkins pipeline and we missed regressions! There have been
> regressions on the REST API specs, that are fixed on 32923.
>
> We noticed that the code we provided for the ERM module was not flexible
> enough and too ERM oriented. Some directories have been moved and code
> split a bit to make it more reusable for other modules (32806).
>
> Finally there are 32939 that introduce generic fetch functions, to have
> all the error handling (catch exceptions and display the error on the UI)
> in a single place. On top of that we added a "loading" message when a form
> (POST/PUT/DELETE) is submitted and, thanks to the previous moves, it's only
> a couple of lines of code!
>
>
>
> All this must be considered a base for future Vue enhancements, and I
> would like people interested in the Vue work to have a look at it.
>
>
>
> Cheers,
>
> Jonathan
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.koha-community.org/pipermail/koha-devel/attachments/20230221/cb029c0e/attachment-0001.htm>