I left the webpack.config.js as well as the devDependencies in place for now.
We can remove them in a follow-up patch on this bug after testing it out.
To test:
1) Run js:build and js:build:prod
2) Note the build time
3) Apply patch
4) Run yarn install
5) Run js:build and js:build:prod again
6) Note the much faster build time
7) Extra credit: take a look at the ERM or preservations module and make sure everything works as expected.
8) Extra credit: run the cypress tests.
9) Sign off or give your opinion
Signed-off-by: Marcel de Rooy <m.de.rooy@rijksmuseum.nl>
Looks faster to me. Where webpack failed for me (Killed, error 137), this passed.
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Katrin Fischer <katrin.fischer@bsz-bw.de>
This patch
- removes bootstrap 4 from the project dependencies.
- reverts the import paths for sass back to 'bootstrap' from 'bootstrap5'.
- updates yarn's lockfile.
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Katrin Fischer <katrin.fischer@bsz-bw.de>
- This patch adds a new dev dependency node-sass-tilde-importer.
- We use the tilde to resolve to the nearest node_moduldes, meaning
- /kohadevbox/koha/node_modules
or
- /kohadevbox/node_modules
- We explicitly prefix the last path component with an underscore to prevent the
resolution from failing (this doesn't seem necessary for all cases, though)
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Katrin Fischer <katrin.fischer@bsz-bw.de>
This patch updates the OPAC and staff interface to use Bootstrap 5.
Bootstrap CSS assets are now pulled from node_modules and compiled into
staff-global.css and opac.css at build time. This update lays the
foundations of some other chnages, especially the addition of a dark
mode in the future.
Hundreds of templates have been updated, mostly with updates to the grid
markup. Most of the responsive behavior is still the same with the
exception of improved flexibility of headers and footers in both the
OPAC and staff interface.
The other most common change is to add a new "namespace" to data
attributes used by Bootstrap, e.g. "data-bs-target" or "data-bs-toggle".
Modal markup has also been updated everywhere. Other common changes:
dropdown button markup, alert markup (we now use Bootstrap's "alert
alert-warning" and "alert alert-info" instead of our old "dialog alert"
and "dialog info").
Bootstrap 5 now uses CSS variables which we can override in our own
'_variables.scss' (in both the OPAC and staff) to accomplish a lot of
the style overrides which we previously put in staff-global.scss.
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Katrin Fischer <katrin.fischer@bsz-bw.de>
We were having some issues with package building because we missed the
update to the yarn.lock file here.
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Paul Derscheid <paul.derscheid@lmscloud.de>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Katrin Fischer <katrin.fischer@bsz-bw.de>
This patch makes the Koha::REST::V1 class use a bundled version of the
API spec.
For that to happen, this patch also adds:
* a `yarn api:bundle` task for generating the `swagger_bundle.yaml`
file
* the bundle file to `.gitignore`
* @redocly/cli to the packages.json dependencies (yarn add @redocly/cli)
* `api:bundle` is added to the `yarn build` general command
NOTE: A new workflow is introduced by this patch as developers will need
to call the `yarn api:bundle` command on each API spec change they make.
To test:
1. Have KTD running
2. Verify the API works as usual
=> SUCCESS: The API just works
3. Apply this patch
4. Run:
$ ktd --shell
k$ yarn api:bundle
5. Restart plack:
k$ koha-plack --restart kohadev ; tail -f /var/log/koha/kohadev/*.log
=> SUCCESS: The API loads correctly
6. Repeat 2
=> SUCCESS: Nothing changed
7. Sign off :-D
Signed-off-by: Paul Derscheid <paul.derscheid@lmscloud.de>
Signed-off-by: David Cook <dcook@prosentient.com.au>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Katrin Fischer <katrin.fischer@bsz-bw.de>
Let's centralize all formatting for js, ts and vue files in a .prettierrc.js.
The goal here is to preserve eslint's linting but ignore all of its formatting options.
Seems to work for vue files in vscode, vscodium and neovim w/ vscode-eslint-language-server.
To test:
1) Pick any vue file for example.
2) Run format via your editor and either npx prettier -c .prettierrc.js <PATH_TO_VUE_FILE> [you can also use the -w flag to directly write].
3) Look for unexpected changes: vue files should be already formatted w/ these inline flags (see: https://wiki.koha-community.org/wiki/Coding_Guidelines#JS14:_Prettier_JavaScript): [--trailing-comma es5, --arrow-parens avoid].
4) Sign off if you're happy and comment or show what went wrong in a comment.
Signed-off-by: Brendan Lawlor <blawlor@clamsnet.org>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Katrin Fischer <katrin.fischer@bsz-bw.de>
Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
Signed-off-by: Katrin Fischer <katrin.fischer@bsz-bw.de>
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>
Vue 3.2.34 required Node14
npm install -g n
sudo n 14
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>
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>
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>
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>
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>
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>
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>
