Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make possible to open Vue.js modal from legacy grid #9932

Closed
jardakotesovec opened this issue May 2, 2024 · 5 comments
Closed

Make possible to open Vue.js modal from legacy grid #9932

jardakotesovec opened this issue May 2, 2024 · 5 comments
Assignees
Labels
Enhancement:1:Minor A new feature or improvement that can be implemented in less than 3 days.
Milestone

Comments

@jardakotesovec
Copy link
Contributor

jardakotesovec commented May 2, 2024

Describe the issue
Our goal is to write new interfaces using Vue.js components. One of the cases is new or re-build modals thats being triggered from the Legacy Grid. Example of such use case is in #9893 .

Solution
Proposing solution with new VueModal.php action as alternative to typical AjaxModal.php action, which makes possible to open Vue.js side modal, which is built as separate component from the grid action.

Steps for new modals would be

  1. Create separate modal component (see WorkflowLogResponseForModal.vue as example)
  2. Its necessary to register that component in ModalManager.vue, so its possible to open it by name
  3. use VueModal to add the action:
            $this->addAction(
                new LinkAction(
                    'logResponse',
                    new VueModal(
                        'WorkflowLogResponseForModal',
                        $actionArgs // these are passed as props to modal
                    ),
                    'Log Response for'
                )
            );

Its often important to communicate events back to grid to trigger reload if the action changes data. This can be achieved with following pattern:

<script setup>
import {inject} from 'vue';
import SideModalBody from '@/components/Modal/SideModalBody.vue';
import PkpButton from '@/components/Button/Button.vue';

const props = defineProps({
	submissionId: {type: Number, required: true},
	reviewAssignmentId: {type: Number, required: true},
	legacyOptions: {type: Object, required: true},
});
const closeModal = inject('closeModal');

function submitThings() {
	// pass events to the Grid, to trigger reload if action changed the data
	props.legacyOptions.modalHandler
		.getHtmlElement()
		.trigger('dataChanged', props.reviewAssignmentId);
	closeModal();
}
</script>

PR (includes example that we don't want to merge unfinished, but its best to illustrate the functionality for review)
ojs: pkp/ojs#4266
pkp-lib: #9933
ui-library: pkp/ui-library#347
omp: pkp/omp#1568
ops: pkp/ops#681

@jardakotesovec jardakotesovec added the Enhancement:1:Minor A new feature or improvement that can be implemented in less than 3 days. label May 2, 2024
@jardakotesovec jardakotesovec added this to the 3.5.0 LTS milestone May 2, 2024
@jardakotesovec jardakotesovec self-assigned this May 2, 2024
jardakotesovec added a commit to jardakotesovec/ui-library that referenced this issue May 2, 2024
jardakotesovec added a commit to jardakotesovec/pkp-lib that referenced this issue May 2, 2024
@jardakotesovec
Copy link
Contributor Author

Appreciate feedback from anyone.

tagging @asmecher @jonasraoni @eirikhanssen @MrRob100

@jonasraoni
Copy link
Contributor

I can do a late review after I get back on track (11/05). I'm just curious if you didn't intend to tag @ewhanson instead of Eirik Hanssen 😁

@MrRob100
Copy link
Contributor

MrRob100 commented May 2, 2024

@jardakotesovec On my setup this it needed lib/pkp/js/controllers/modal/VueModalHandler.js to be registered in minifiedScripts.txt to work. Otherwise working well :)

@jardakotesovec
Copy link
Contributor Author

@MrRob100 Cool, thanks for testing it out! I added PR for OJS with the updated minifiedScripts.tt

jardakotesovec added a commit to jardakotesovec/ui-library that referenced this issue May 7, 2024
jardakotesovec added a commit to jardakotesovec/pkp-lib that referenced this issue May 21, 2024
jardakotesovec added a commit to jardakotesovec/pkp-lib that referenced this issue May 21, 2024
jardakotesovec added a commit to jardakotesovec/pkp-lib that referenced this issue May 21, 2024
jardakotesovec added a commit that referenced this issue May 21, 2024
* #9932 Introduce VueModal.php
jardakotesovec added a commit to jardakotesovec/ui-library that referenced this issue May 21, 2024
jardakotesovec added a commit to jardakotesovec/ui-library that referenced this issue May 21, 2024
jardakotesovec added a commit to pkp/ui-library that referenced this issue May 21, 2024
* pkp/pkp-lib#9932 Introduce VueModal.php

* pkp/pkp-lib#9932 Fixing legacyCloseHandler

* Allow also for global modals to be picked up
jardakotesovec added a commit to jardakotesovec/omp that referenced this issue May 21, 2024
jardakotesovec added a commit to pkp/omp that referenced this issue May 21, 2024
@jardakotesovec
Copy link
Contributor Author

Cleaned up and merged

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Enhancement:1:Minor A new feature or improvement that can be implemented in less than 3 days.
Projects
None yet
Development

No branches or pull requests

3 participants