<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40"><head><meta http-equiv=Content-Type content="text/html; charset=utf-8"><meta name=Generator content="Microsoft Word 15 (filtered medium)"><style><!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:DengXian;
panose-1:2 1 6 0 3 1 1 1 1 1;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
{font-family:"\@DengXian";
panose-1:2 1 6 0 3 1 1 1 1 1;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0cm;
font-size:11.0pt;
font-family:"Calibri",sans-serif;}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
span.EmailStyle18
{mso-style-type:personal-reply;
font-family:"Calibri",sans-serif;
color:windowtext;}
.MsoChpDefault
{mso-style-type:export-only;
font-family:"Calibri",sans-serif;
mso-ligatures:standardcontextual;}
@page WordSection1
{size:612.0pt 792.0pt;
margin:72.0pt 72.0pt 72.0pt 72.0pt;}
div.WordSection1
{page:WordSection1;}
--></style><!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]--></head><body lang=EN-AU link=blue vlink=purple style='word-wrap:break-word'><div class=WordSection1><p class=MsoNormal>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.<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>I took a look at “routes.js” for <a href="https://bugs.koha-community.org/bugzilla3/page.cgi?id=splinter.html&bug=32806&attachment=146664">https://bugs.koha-community.org/bugzilla3/page.cgi?id=splinter.html&bug=32806&attachment=146664</a> and all the import statements looked a bit cumbersome. <o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>I quizzed ChatGPT earlier about my design for the different app, and was impressed with what it had to say.<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>My prompt: “With Vue.js 3, is there an easy way to import multiple components without having to specify each one separately?”<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>ChatGPT: It gave some explanatory text and the following code:<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>import { defineAsyncComponent } from 'vue';<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>const components = [<o:p></o:p></p><p class=MsoNormal> 'MyComponent1',<o:p></o:p></p><p class=MsoNormal> 'MyComponent2',<o:p></o:p></p><p class=MsoNormal> 'MyComponent3',<o:p></o:p></p><p class=MsoNormal>];<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>const asyncComponents = components.map(name => defineAsyncComponent(() => import(`@/components/${name}.vue`)));<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>export default {<o:p></o:p></p><p class=MsoNormal> components: {<o:p></o:p></p><p class=MsoNormal> ...asyncComponents.reduce((obj, component, index) => {<o:p></o:p></p><p class=MsoNormal> obj[components[index]] = component;<o:p></o:p></p><p class=MsoNormal> return obj;<o:p></o:p></p><p class=MsoNormal> }, {}),<o:p></o:p></p><p class=MsoNormal> },<o:p></o:p></p><p class=MsoNormal>};<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>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. <o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>Anyway, I have to run, but I thought you might find that interesting. <o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>David Cook<o:p></o:p></p><p class=MsoNormal>Senior Software Engineer<o:p></o:p></p><p class=MsoNormal>Prosentient Systems<o:p></o:p></p><p class=MsoNormal>Suite 7.03<o:p></o:p></p><p class=MsoNormal>6a Glen St<o:p></o:p></p><p class=MsoNormal>Milsons Point NSW 2061<o:p></o:p></p><p class=MsoNormal>Australia<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>Office: 02 9212 0899<o:p></o:p></p><p class=MsoNormal>Online: 02 8005 0595<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><div style='border:none;border-top:solid #E1E1E1 1.0pt;padding:3.0pt 0cm 0cm 0cm'><p class=MsoNormal><b><span lang=EN-US>From:</span></b><span lang=EN-US> Koha-devel <koha-devel-bounces@lists.koha-community.org> <b>On Behalf Of </b>Jonathan Druart<br><b>Sent:</b> Thursday, 16 February 2023 6:41 PM<br><b>To:</b> koha-devel <koha-devel@lists.koha-community.org><br><b>Subject:</b> Re: [Koha-devel] Vue improvements/refactorings<o:p></o:p></span></p></div><p class=MsoNormal><o:p> </o:p></p><div><div><p class=MsoNormal>Bug 32806 modifies the directory structure and how Vue files are organised.<o:p></o:p></p></div><div><p class=MsoNormal>Bug 32939 is centralising the way we request the Koha REST API by having a single place where the fetch is made.<o:p></o:p></p></div><div><p class=MsoNormal>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.<o:p></o:p></p></div><p class=MsoNormal><o:p> </o:p></p><div><div><p class=MsoNormal>Le mer. 15 févr. 2023 à 23:18, David Cook <<a href="mailto:dcook@prosentient.com.au">dcook@prosentient.com.au</a>> a écrit :<o:p></o:p></p></div><blockquote style='border:none;border-left:solid #CCCCCC 1.0pt;padding:0cm 0cm 0cm 6.0pt;margin-left:4.8pt;margin-right:0cm'><div><div><div><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'>I’ve started playing more with Vue for some other projects, so I wouldn’t mind taking a look.<o:p></o:p></p><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'> <o:p></o:p></p><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'>Is there anything particular you want us to look at with these patches? <o:p></o:p></p><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'> <o:p></o:p></p><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'>David Cook<o:p></o:p></p><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'>Senior Software Engineer<o:p></o:p></p><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'>Prosentient Systems<o:p></o:p></p><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'>Suite 7.03<o:p></o:p></p><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'>6a Glen St<o:p></o:p></p><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'>Milsons Point NSW 2061<o:p></o:p></p><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'>Australia<o:p></o:p></p><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'> <o:p></o:p></p><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'>Office: 02 9212 0899<o:p></o:p></p><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'>Online: 02 8005 0595<o:p></o:p></p><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'> <o:p></o:p></p><div style='border:none;border-top:solid windowtext 1.0pt;padding:3.0pt 0cm 0cm 0cm;border-color:currentcolor currentcolor'><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'><b><span lang=EN-US>From:</span></b><span lang=EN-US> Koha-devel <<a href="mailto:koha-devel-bounces@lists.koha-community.org" target="_blank">koha-devel-bounces@lists.koha-community.org</a>> <b>On Behalf Of </b>Jonathan Druart<br><b>Sent:</b> Thursday, 16 February 2023 12:10 AM<br><b>To:</b> koha-devel <<a href="mailto:koha-devel@lists.koha-community.org" target="_blank">koha-devel@lists.koha-community.org</a>><br><b>Subject:</b> [Koha-devel] Vue improvements/refactorings</span><o:p></o:p></p></div><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'> <o:p></o:p></p><div><div><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'>Hi,<o:p></o:p></p></div><div><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'> <o:p></o:p></p></div><div><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'>Pedro and I have been working on improving the way we request the Koha REST API from Vue components.<o:p></o:p></p></div><div><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'>We ended up with the implementation that is available on the following remote branch:<o:p></o:p></p></div><div><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'><a href="https://gitlab.com/joubu/Koha/-/commits/bug_32925" target="_blank">https://gitlab.com/joubu/Koha/-/commits/bug_32925</a><o:p></o:p></p></div><div><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'> <o:p></o:p></p></div><div><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'>It contains the patches from the following bug reports:<o:p></o:p></p><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'><a href="https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=32898" target="_blank"><b>Bug 32898</b></a> - Cypress tests are failing<o:p></o:p></p></div><div><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'><a href="https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=32923" target="_blank"><b>Bug 32923</b></a> - x-koha-embed must a header of collectionFormat csv <o:p></o:p></p></div><div><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'><a href="https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=32806" target="_blank"><b>Bug 32806</b></a> - Some Vue files need to be moved for better reusability <o:p></o:p></p></div><div><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'><a href="https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=32939" target="_blank"><b>Bug 32939</b></a> - Have generic fetch functions in vue modules<o:p></o:p></p></div><div><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'><a href="https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=32925" target="_blank"><b>Bug 32925</b></a> - Display loading info when a form is submitted<o:p></o:p></p></div><div><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'> <o:p></o:p></p></div><div><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'>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.<o:p></o:p></p></div><div><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'>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).<o:p></o:p></p></div><div><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'>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!<o:p></o:p></p></div><div><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'> <o:p></o:p></p></div><div><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'>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.<o:p></o:p></p></div><div><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'> <o:p></o:p></p></div><div><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'>Cheers,<o:p></o:p></p></div><div><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'>Jonathan<o:p></o:p></p></div></div></div></div></div></blockquote></div></div></div></body></html>