[Koha-devel] Vue improvements/refactorings

[David Cook]

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 <https://bugs.koha-community.org/bugzilla3/page.cgi?id=splinter.html&bug=32806&attachment=146664> &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 <mailto: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 <mailto: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 <mailto: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:

 <https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=32898> Bug 32898 - Cypress tests are failing

 <https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=32923> Bug 32923 - x-koha-embed must a header of collectionFormat csv 

 <https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=32806> Bug 32806 - Some Vue files need to be moved for better reusability 

 <https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=32939> Bug 32939 - Have generic fetch functions in vue modules

 <https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=32925> Bug 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/5eb2693f/attachment.htm>