Commit graph

24 commits

Author SHA1 Message Date
765fd1ced3
Bug 33066: Introduce a KohaTable Vue component
The way we deal with DataTables in Vue component is not nice, especially when we
need to add buttons/link in the cell and interact with the rest of the Vue app from
there.

When I started to work on Vue last year there was no good solution from DataTables,
now there is a Vue component. It is not perfect, you still cannot add Vue component
in the DT component, but it brings something to follow. Agustin implemented something
on theke/import_source_vue, but he went too far, and it will need to rewrite the
whole ERM module. Additionally he didn't provide a solution that has the same features
as what we have now.

The goal of this patch is to not duplicate the code in datatables.js, we
don't want to maintain two version of this code (one is enough already!)
We split the huge function in datatables.js in small ones to make them
reusable from the Vue component.

This is quite ugly, and it needs to lot more addition, but it's a first
start!

Help, ideas, and feedback welcome (and needed!)

Bug 33066: Fix agreement name in delete confirmation dialog

Signed-off-by: Pedro Amorim <pedro.amorim@ptfs-europe.com>

Signed-off-by: Agustín Moyano <agustinmoyano@theke.io>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
2023-04-10 07:38:28 -03:00
e5b28d9c40
Bug 32978: Replace node-sass with dart-sass
'npm install' fails in ktd on aarch64, giving unsupported architecture error for node-sass.

This patch addresses this by replacing node-sass with dart-sass, updating our gulpfile
accordingly. Some corrections have been made to SCSS to fix warnings
raised during the build process.

Signed-off-by: Paul Derscheid <paul.derscheid@lmscloud.de>
Works like a charm. Great work oleonard! Tested on Apple M1, e.g. aarch64.

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
Edit: I removed some useless formatting changes in the gulpfile, and the
yarn.lock changes as well.
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
2023-02-22 10:03:39 -03:00
bc43c6e7fe
Bug 32975: Error in package.json's definition of css:build vs css:build:prod
The "css:build" command runs "gulp css && gulp css --view opac",
processes that build CSS in a development context.

The "css:build:prod" currently runs "gulp build && gulp css --view
opac", which runs the production-oriented command "gulp build" (for the
staff interface), but runs "gulp css --view opac" which is the same
devel-environment command as above.

It should be "gulp build && gulp build --view opac"

To test, apply the patch and run the two commands and check these two
files to confirm the difference:

koha-tmpl/intranet-tmpl/prog/css/staff-global.css
koha-tmpl/opac-tmpl/bootstra/css/opac.css

"yarn css:build" should create unminimized versions of those files.
"yarn css:build:prod" should create minimized versions.

Signed-off-by: David Nind <david@davidnind.com>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
2023-02-20 09:44:07 -03:00
9bdca7f216
Bug 32609: Improve yarn build commands
We had:
yarn css # Build staff css
yarn css --view opac # Build OPAC css
yarn build # Nothing, was broken
yarn watch # Nothing, was broken
yarn build_js # Build JS/Vue
yarn watch_js # Watch JS/Vue

This patch is suggesting to have something more consistent:
yarn css:build      # Build CSS for OPAC and staff (dev)
yarn css:build:prod # Build CSS for OPAC and staff (prod)
yarn css:watch      # Watch CSS for OPAC and staff (dev)
yarn js:build       # Build JS (dev)
yarn js:build:prod  # Build JS (prod)
yarn js:watch       # Watch JS (dev)
yarn build          # Same as css:build and js:build (dev)
yarn build:prod     # Same as css:build:prod and js:build:prod (prod)

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
2023-02-10 11:07:51 -03:00
e7d4898d67
Bug 32212: (bug 32030 follow-up) Restore bootstrap 4
During the development of the eRM module I've tried to use bootstrap 5
(and vue-bootstrap), but I didn't manage to make it work without
modifying the version used in Koha. This change is actually not needed
and we can keep version 4.
See commit 8c32f186d5
Bug 32030: ERM - Remove BootstrapVue3

Test plan:
% yarn install
% git diff
you should notice the version change in yarn.lock

Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
2022-11-17 14:49:07 -03:00
2946f92bf0
Bug 32224: Add prettier to yarn commands
xt/vue_tidy.t was failing with:
  error Command "prettier" not found.

Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
2022-11-17 14:08:00 -03:00
50140c16c2
Bug 32224: Add cypress to yarn commands
Either I am missing something obvious, or we need to add cypress to the scripts of package.json

With /kohadevbox/node_modules only (ie. without $SYNC_REPO/node_modules), I cannot run
  yarn run cypress run

`cypress run` is working with an adjusted PATH (see https://gitlab.com/koha-community/koha-testing-docker/-/issues/313#note_1173792905) but I think both should work.

Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
2022-11-17 14:08:00 -03:00
ef15517add
Bug 32223: Remove node_modules/.bin from package.json
We should not specify the node_modules/.bin part if the env is correctly configured.

Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
2022-11-16 08:31:33 -03:00
de77f3a719
Bug 32030: I18N rewrite
The previous implementation was using vue-i18n inject localized strings
into the Vue app. However it was using json files, and we needed
additional overhead to convert from/to PO files.

I've also tried vue3-gettext that use PO, but the overhead to work with
our workflow was existent as well (see branch joubu/vue3-gettext).

vue-i18n-extract was using for extracting, and a specific misc script
(misc/translate_json.pl) was also used to generate the json file. They
can be removed.

Here we are simply reusing our existing workflow, and we will improve it
(ie. make it more vue-ish) later if we need it.

Signed-off-by: Jonathan Field <jonathan.field@ptfs-europe.com>

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
2022-11-08 09:44:38 -03:00
f642d5f859
Bug 32030: Use vue-select beta.3, beta.5 is buggy
Signed-off-by: Jonathan Field <jonathan.field@ptfs-europe.com>

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
2022-11-08 09:44:33 -03:00
cd2884d907
Bug 32030: Improve form UI
* Align inputs, textareas and selects
* Use vue-select for dropdown lists

Note that the only way I found to make the select required is to follow
what is on their doc https://vue-select.org/guide/validation.html#required

However we need our own vue-select-required component to avoid the
repetition (the #search slot). I've tried (but failed) on
https://gitlab.com/joubu/Koha/-/commits/erm-v-select-required

Signed-off-by: Jonathan Field <jonathan.field@ptfs-europe.com>

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
2022-11-08 09:44:19 -03:00
556a3962b0
Bug 32030: ERM - I18N
Make the string translatable

To update the json files:
npx vue-i18n-extract --vueFiles 'koha-tmpl/intranet-tmpl/prog/js/vue/**/*.?(js|vue)' --exclude koha-tmpl/intranet-tmpl/prog/js/vue/dist/main.js --languageFiles 'koha-tmpl/intranet-tmpl/prog/js/vue/locales/*.json' --add --remove

Signed-off-by: Jonathan Field <jonathan.field@ptfs-europe.com>

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
2022-11-08 09:43:55 -03:00
a95b659e68
Bug 32030: Use Pinia for vendors 🍍
Signed-off-by: Jonathan Field <jonathan.field@ptfs-europe.com>

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
2022-11-08 09:43:46 -03:00
2adaddeea4
Bug 32030: ERM - Refactoring
We want the whole erm.pl to be a Vue app \o/

Signed-off-by: Jonathan Field <jonathan.field@ptfs-europe.com>

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
2022-11-08 09:43:43 -03:00
b0c6ca0e2b
Bug 32030: ERM - Add "integration" tests using Cypress
We are mocking the REST API routes responses here, we could do better,
but it's a nice first step.

To run the tests:
From the host (ie. *not* inside ktd): `yarn run cypress open`

Signed-off-by: Jonathan Field <jonathan.field@ptfs-europe.com>

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
2022-11-08 09:43:39 -03:00
e5042cc5c1
Bug 32030: ERM - Vue version
First, `yarn install`.
Then use `yarn build_js` or `yarn watch_js` to regenerate the dist/main.js file

Signed-off-by: Jonathan Field <jonathan.field@ptfs-europe.com>

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
2022-11-08 09:43:38 -03:00
b90c13912d
Bug 31528: Replace scss-lint configuration with one for stylelint
This patch removes the SCSS linting configuration .scss-lint.yml which
was intended to be used with a now-obsolete tool, scss-lint.

It is replaced with .stylelintrc.json, for use with stylelint. I've
tried to keep the linting rules the same as before.

To test, run 'yarn install' to install the new dependencies.

You can test stylelint from the command line like so:

npx stylelint koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss

It should output a list of problems with the file:

koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
   30:27   ✖  Expected "#e6f0f2" to be "#E6F0F2" color-hex-case
   81:31   ✖  Expected single space after "("    function-parentheses-space-inside
   ...etc.

Signed-off-by: David Nind <david@davidnind.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
2022-10-03 08:23:14 -03:00
4b416c98f4 Bug 27939: Update yarn.lock file
There is a minor security vulnerability, it is good to fix it even if there is no impact on security: yarn is only used for dev purpose.

The the logs of https://wiki.koha-community.org/wiki/Development_IRC_meeting_24_February_2021

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>

https://bugs.koha-community.org/show_bug.cgi?id=27938

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
2021-03-16 12:04:06 +01:00
Julian Maurice
3cfc2ec7bd Bug 25067: Move PO file manipulation code into gulp tasks
misc/translator/translate was doing three different things:
- extract translatable strings
- create or update PO files
- install translated templates

This patch separates responsibilities by moving the string extraction
code into several 'xgettext-like' scripts and adds gulp tasks to
automate string extraction and PO files update

This has several benefits:

- gulp runs tasks in parallel, so it's a lot faster (updating all PO
  files is at least 10 times faster with my 4-cores CPU)

- there is no need for $KOHA_CONF to be defined
  LangInstaller.pm relied on $KOHA_CONF to get the different paths
  needed. I'm not sure why, since string extraction and PO update should
  work on source files, not installed files

- string extraction code can be more easily tested

This patch also brings a couple of fixes and improvements:

- TT string extraction (strings wrapped in [% t(...) %]) was done with
  Template::Parser and PPI, which was extremely slow, and had some
  problems (see bug 24797).
  This is now done with Locale::XGettext::TT2 (new dependency) which is
  a lot faster, and fixes bug 24797

- Fix header in 4 PO files

For backward compatibility, 'create' and 'update' commands of
misc/translator/translate can still be used and will execute the
corresponding gulp task

Test plan:
1. Run `yarn install` and install Locale::XGettext::TT2
2. Run `gulp po:update`
3. Verify the contents of updated PO files
4. Run `cd misc/translator && ./translate install <lang>`
5. Verify that all (templates, sysprefs, xslt, installer files) is
   correctly translated
6. Run `gulp po:create --lang <lang>` and verify that it created all PO
   files for that language
7. Run `prove t/misc/translator`

Signed-off-by: Bernardo Gonzalez Kriegel <bgkriegel@gmail.com>
Need to install yarn & gulp, no errors

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
2020-11-06 09:46:11 +01:00
00b1bf3c2c Bug 20168: (follow-up) Add automatic creation of RTL CSS
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
2020-09-09 14:13:09 +02:00
9cb89b4639 Bug 20168: Update of the OPAC bootstrap template to bootstrap v4
This patch updates the version of Bootstrap in the OPAC from 2.3.1 to
4.5.0. The Bootstrap JavaScript files have been replaced with custom
builds of the 4.5.0 JavaScript source files. The Bootstrap CSS is now
built into the OPAC CSS by loading the required Bootstrap 4.5.0 SCSS
files in node_modules.

OPAC SCSS now starts with Bootstrap customizations:

/* Bootstrap variable customizations */
$headings-color: #727272;
...

Followed by loading the necessary Bootstrap SCSS files:

/* Bootstrap imports */
@import "../../../../../node_modules/bootstrap/scss/functions";
@import "../../../../../node_modules/bootstrap/scss/variables";
...

Followed by our CSS. The build process for generating compiled CSS now
creates a file which bundles Bootstrap CSS and ours. Removed from the
Koha source: Bootstrap CSS files, Bootstrap "glyphicons" images.

The upgrade to Bootstrap 4 involved a lot of markup changes to conform
with new Bootstrap classes, especially in classes related to the grid.
Besides duplicating the grid we used before, this upgrade adds some new
features made possible by Bootstrap 4.5's use of flexbox as a layout
tool. This includes custom ordering of columns based on class names:
https://getbootstrap.com/docs/4.5/layout/grid/#order-classes.

Other areas where the most changes have been made: Navigation menus,
breadcrumb menus, buttons, dropdowns.

Bootstrap's JavaScript file is now "bootstrap.bundle.min.js" to reflect
the fact that a required JavaScript asset is now distributed separately
in Bootstrap 4. The "bundle" version includes Popper.js.

Unrelated changes: Indentation corrections, removal of invalid
"//<![CDATA[" markers, removal of invalid script type attributes.

To test, apply the patch and run 'yarn install' to install Bootstrap as
an npm module. Run 'yarn build --view opac' to regenerate the OPAC CSS.

Test as many aspect of the OPAC as possible, viewing pages at various
browser widths to confirm that everything adjusts well. Test with
various OPAC interface system preferences enabled and disabled.

Test self checkout and self checkin.

Known issues: RTL support has not been updated.

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
2020-09-09 14:13:03 +02:00
a7e3c12e61 Bug 26228: Update gulpfile to work with Node.js v12
This patch makes the gulpfile work with gulp v4 on Node v12. To test it,
make sure your dev env has Node.js v12.

It also replaces the use of 'gulp-util' (deprecated) by 'minimist' as
recommended on their site.

On both KTD and KohaDevBox edit your sources.list so the node line
points to 'node_12.x' instead of 'node_8.x'.

Once that's done:
1. On your clone run:
   $ yarn install
   $ npm install -E
2. Build the CSS:
   $ yarn build
   $ yarn build --view opac
=> SUCCESS: Things build correctly
3. Sign off :-D

Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>

Signed-off-by: Owen Leonard <oleonard@myacpl.org>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
2020-08-18 14:47:44 +02:00
78bf5b3ec6
Bug 23025: security vulnerability detected in fstream < 1.0.12 defined in yarn.lock
This patch updates the version requirements for modules used by yarn.
Running "yarn upgrade" will upgrade the project's direct dependencies as
listed in package.json. However, the output of "yarn audit" will
identify more vulnerabilities with libraries further down the dependency
tree.

Adding a "resolutions" list in package.json seems to be the way to
include these upgrades in an installation.

After making these changes I ran "yarn install" and "yarn audit" again.
The audit reported no vulnerabilities.

Upgrading yarn.lock should allow for the installation of newer versions
of npm modules in new installations. I believe it is necessary to run
"yarn upgrade" on existing installations in order to bring dependencies
up to versions matching those on existing installations.

To test, run the yarn commands we use to compile SCSS in the staff
client and the opac:

yarn build
yarn build --view opac

They should complete without error.

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
2019-11-27 11:30:17 +00:00
5b35c97a84 Bug 19474: Convert staff client CSS to SCSS
This patch converts staff-global.css to Sass, using SCSS syntax. This
changes the build process for Koha to include installation and execution
of yarn to install npm dependencies and run SCSS -> CSS conversion.

To test, apply the patch and run the following:

$ sudo apt-get install nodejs npm [not necessary in kohadevbox]
$ sudo npm install -g yarn
$ yarn install
$ yarn build

Clear your browser cache if necessary and confirm that CSS styling
throughout the staff client looks correct.

The "yarn build" command triggers a gulp process which compiles SCSS to
CSS, adds automatic vendor-prefixing, and minifies the resulting CSS
file.

There is also a "yarn css" command available which might be used by
developers who are making changes to SCSS. This command does two things
differently:

1. Adds .css.map files which aid CSS debugging using in-browser
   inspector tools.
2. Compiles staff-global.css without minification. It can be useful to
   see unminified CSS during development, especially to see how SCSS
   compiles.

This patch adds a configuration file for sass-lint, .sass-lint.yml.
Currently this configuration is not used during the build process but
can be used in a code editor which supports linting.

Signed-off-by: Claire Gravely <claire.gravely@bsz-bw.de>

Signed-off-by: Josef Moravec <josef.moravec@gmail.com>

Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
2018-08-09 15:12:20 +00:00