Having a component with a table that contains action buttons, clicking on these buttons triggers the emission of various actions (such as edit, delete, route).
getEvent(action: ActionButtons, object: any) {
// type: (edit,delete,route), route: info where to redirect
const {type, route} = action;
this.action.emit({ type, route, body: object });
}
In the parent component, I handle these emitted objects using the following function and execute different logic based on the action:
getAction({type, route, body: {...faculty }}) {
const action = {
edit: () => {
this.openFacultyModal(faculty);
},
delete: () => {
this.openConfirmDialog(faculty);
},
route: () => {
this.redirecTo(faculty.faculty_id);
}
};
action[type]();
}
The issue arises when wanting to reuse the table in another component, requiring cut-and-pasting of getAction() and just updating the inner functions.
This leads to code duplication.
Is there a way to address this problem of duplication by utilizing closures or creating a separate class?