Vue.js changes in js/build.js

I have downloaded source from GitHub - pkp/ui-library: Design pattern and component library for Public Knowledge Project's applications
run npm install, npm run serve
Made some changes (2 lines of code, actually) (code is working), then run
npm run build, and I’ve got these files in dist/js:
chunk-vendors.fd9bdb81.js.map 5 mb
app.9e16cc31.js 360kb
app.9e16cc31.js.map 1.5mb
chunk-vendors.fd9bdb81.js 1.7mb

What should I do next to get build.js file, which I can change on dev server?
I’m pretty new to vue.js

I have later downloaded source and submodules from ojs github page. When I run npm run build I get build.js which is smaller than one included in ojs installation. I tried to change this file on production server, but it’s not working. When I open submission page, nothing is shown. I tried to delete ojs cache, but with no success. I am using ojs 3.1.2

Hi @Dragoljub_Djordjevic,

It sounds like you’re on the right track. The ui-library repository houses the core components and a special library viewing app. But the OJS and OMP repositories are where the application JavaScript is built.

If you’re running OJS 3.1.2, you’ll need to make sure that you check out the stable branches for OJS, the pkp-lib submodule, and the UI Library before you run the build script. That would look like this:

# Put the three main repositories onto the stable branch
cd <ojs-root-directory>
git checkout stable-3_1_2
cd lib/pkp-lib
git checkout stable-3_1_2
cd ../ui-library
git checkout stable-3_1_2

Now you’ll need to make your changes to the components in UI Library and then run the build script:

cd <ojs-root>
npm install
npm run build

Beware that your changes will be overwritten every time you update OJS. The Vue.js stuff is still new, so we don’t have good guidance on making one-off changes. But if you let me know what changes you are making, that will help me write better guidance for doing this in a plugin in the future.

Thanks you for your replay.

First, I am trying to display numerical reviewer rating instead of stars. I found that in src\components\ListPanel\users\SelectReviewerListItem.vue and made changes.

I am still having probles to get proper build.js to include in ojs installation.
I’ll check stable branches first.

Second, I have made new questionary for authors to rate reviewers, and new field author_rating in review_assignment table. I would like to show that rating also. I’ll have two ratings, editor rating and author rating in reviewers panel.
Can you tell me, is lib/pkp/controllers/list/users/SelectReviewerListHandler.inc.php right place ot add new author rating to i18n array?

Beware that your changes will be overwritten every time you update OJS

I have made a lot of local changes, updating would be very hard anyway

You were right, I wasn’t on stable branch. Build.js is now working, changes are visible. Thanks again.

Can you tell me, is lib/pkp/controllers/list/users/SelectReviewerListHandler.inc.php right place ot add new author rating to i18n array?

You’ll need to hit a few places in order to ensure the data is retrieved from the database at the right time, assigned to the reviewer’s User object, and then collected in the API responses that serve the reviewer selection component.

  1. In UserListQueryBuilder you can see how the reviewer stats are retrieved from the database: https://github.com/pkp/pkp-lib/blob/stable-3_1_2/classes/services/queryBuilders/UserListQueryBuilder.inc.php#L428.
  2. In UserDao::_returnUserFromRowWithReviewerStats() you can see how these stats are then assigned to the User object: https://github.com/pkp/pkp-lib/blob/stable-3_1_2/classes/user/UserDAO.inc.php#L245.
  3. In UserService::getProperties() you can see how the User object is converted to properties which can be passed to UI components: https://github.com/pkp/pkp-lib/blob/stable-3_1_2/classes/services/UserService.inc.php#L199.
  4. And finally, in UserService::getReviewerSummaryProperties() you can see which properties are included in the reviewer summary, which serves the reviewer selection component as well as the API endpoint: https://github.com/pkp/pkp-lib/blob/stable-3_1_2/classes/services/UserService.inc.php#L397.

In each of these places, you’ll notice calls to the HookRegistry, like this:

HookRegistry::call('UserDAO::_returnUserFromRowWithReviewerStats', array(&$user, &$row));

These hooks allow you to extend the platform by writing plugins that hook into each of these processes. That way, you can keep your modifications separate from the core application code, and you won’t cut yourself off from updates.

If you’re making customizations to the platform, I encourage you to explore the hook system further. It will save you a lot of pain down the road.

Thank you very much, you answers are very helpfull. I’ll sure explore hook system in the future, so I can make this changes in form of plugin. Maybe you can point me to some documentation?

I’m writing it as we speak! Keep an eye on https://docs.pkp.sfu.ca/ for new developer documentation in the next month or so.

1 Like

I have made all changes succesfully. Now I want to make some modifications in dashboard panel (change colors and some small modifications).
I found this in one older topic, but link is not working anymore:
https://pkp.gitbooks.io/pkp-theming-guide/content/en/theme-backend.html

Can you help me with this?

https://docs.pkp.sfu.ca/pkp-theming-guide/en/theme-backend

1 Like

Hi @NateWr,
I would like to modify code, I am not really familiar with VueJS, I created a new question on forum:

I need to blocked all radio buttons on primary Locale of this template:
i found this file:
/lib/pkp/controllers/grid/languages/LanguageGridCellProvider.inc.php

case 'contextPrimary':
		$primary = $element['primary'];
		print_r($primary);

		if (!$primary) {					
			$action = 'setPrimary-' . $row->getId();
                        $actionRequest = new AjaxAction($router->url($request, null, null, 'setContextPrimaryLocale', null, $actionArgs));
				}
				break;

Regards,
xavi.

Hi @xavi,

If you just want to prevent an editor from accidentally changing that, it’s probably easiest to add a little bit of JavaScript to disable the buttons. That would look something like this:

$('[id*="unique-string-in-grid-id"] input[type="radio"]').prop('disabled', true);

You will need to change the unique-string-in-grid-id part to match the unique string that you’ll find in the id attribute of the language grid’s HTML code.

Hi @NateWr, I resolved my question in this post:

Thank you.

Regards,
xavi