geeksltd / olive.mvcjs

Olive.MvcJs

Bundling

Related files structure

📦Olive.MvcJs
 ┣ 📂bundling-helper
 ┃ ┗ 📜fix-bundle-modules.js
 ┣ 📂dist
 ┃ ┣📜bundle-requireJs-help.md
 ┃ ┗📜bundle.js
 ┣ 📜bundle-build.bat
 ┗ 📜bundle-tsconfig.json

Files Description

• /bundling-helper/fix-bundle-modules.js - This file contains functions to read the bundled js file and fix its modules names by adding 'olive' to the start of them. It also generates the bundle-requireJs-help.md - This file contains the names of the modules that are needed in the RequireJs config.
• /dist/bundle-requireJs-help.md (Auto Generated) - This file contains the RequireJs bundle configuration for 'Olive.MvcJs' bundling.
• /dist/bundle.js (Auto Generated) - All of the 'Olive.MvcJs' .js files will be bundled into this file.
• /bundle-build.bat The batch file to handle the bundling automatically.
• /bundle-tsconfig.json - The config file for compiling the .ts files into a single (bundled) .js file.

Notic: Please run the /bundle-build.bat file before pushing the changes that you made in the .ts files.

How to use (with RequireJS)

You need to make two changes in the 'RequireJs' config:

1. Remove the 'olive': "olive.mvc/dist" from the map section
2. Add the bundle that is provided in the bundle-requireJs-help.md file.

olive.mvcjs's Issues

CollapsibleCheckBoxList Refreshing while using ChangeEventHandler

When you are using ChangeEventHandler in CollapsibleCheckBoxList control, it refreshing and cannot easily multi-select / deselect items,

Field(x => x.AccountsLinks).Label("Test:").Control(ControlType.CollapsibleCheckBoxList) .DataSource("await Database.GetList<TestSource>()") .ReloadOnChange().ChangeEventHandler("await PopulateFakeOptions(info);") .ItemCssClass("filter-item")

CollapsibleCheckBoxList bottom margin issue

If any CollapsibleCheckBoxList has more than 1000 items, margin is added at bottom of list records which acts like empty list items causing UI issue.

Modal's Auto Focusing to top of page

Olive.MvcJs/src/olivePage.ts

Lines 82 to 85 in 2b871fe

	if (newPage) {
	$('[autofocus]:not([data-autofocus=disabled]):first').focus();
	if (Config.REDIRECT_SCROLLS_UP) $(window).scrollTop(0);
	}

When opening up a modal the parent page automatically focuses to the top of the page. This makes it scroll to the top of the page.
This is fine for most cases however for some modals it is not useful. They are not necessarily new pages and for longer pages when opening a modal the focus will make it jump to the top. After closing, you would then have to scroll back down to where you were.
Can this change so we have the option to prevent this happening for opening a modal? Is there an alternative we could implement so that it doesnt happen for specific modals on our project?

Query string is getting long while clicking on search button.

This issue comes up when we have an editable grid and we have every cell as control than it will take all the controls value to query string, I believe it should only take search controls as a querystring.

Thanks

Validation on form containing file upload and other elements

When an image is uploaded or removed, validation on the containing form is taking place. This causes an undesired behaviour for users - they will see validation on all other mandatory fields within the form appear when they upload or delete an image.

Autocomplete control doesn't go away when user clicks on another autocomplete on same page

On a module/page where we have multiple autocomplete controls, clicking on any autocomplete opens the suggestion list but if users click on another autocomplete instead of selecting the item, it opens another suggestion list below the already open suggestion list of control 1.

User clicks on products autocomplete but instead of selecting a suggestion, clicks on provider autocomplete control which opens a list of suggestions for provider control but it opens the suggestion list below the products one which doesn't go away.

Closing modal buttons in Edge

On most projects we have buttons like this that close a modal that normally look like this:
Button("Cancel").OnClick(x => x.CloseModal());

The generated button only executes some javascript to close the modal found here:

Olive.MvcJs/src/components/modal.ts

Lines 106 to 116 in 5e116bd

	public static closeMe() {
	if (!this.isAjaxModal) { CrossDomainEvent.raise(parent, "close-modal"); }
	this.close();
	$('body > .tooltip').each((index, elem) => {
	if ($('[aria-discribedby=' + elem.id + ']'))
	elem.remove();
	});
	return true;
	}

For edge, this button causes a 404. This is because it is generated without a button type, and the default is to submit the form. Submitting the form post's to the url defined in the form's action attribute, which is the url for the modal, which only accepts get requests. This results in a 404 in Edge, Chrome logs a warning in the console that explains why the issue does not occur in Chrome:
Form submission canceled because the form is not connected

If we change the button to have the type attribute not set to submit it will work:
Button("Cancel").ExtraTagAttributes("type=\"button\"").OnClick(x => x.CloseModal());
Can this be applied to buttons, that only contain javascript, without having to manually specify the attribute so they wont submit the form in error?

Olive Fileuploader issue after removing the file.

Hi,

There is a problem in file-uploader field after you remove the file from the uploader it still uploading that file.

Thank.

Focusing incorrect element after button click

Hey,

Olive.MvcJs/src/mvc/formAction.ts

Lines 81 to 82 in 18aff03

	let triggerTabIndex = $(":focusable").index($(triggerUniqueSelector));
	if (triggerTabIndex > -1) $(":focusable").eq(triggerTabIndex + 1).focus();

Here it is trying to focus the element that triggered the ajax request. But is focusing on the next element that is focusable. As the next focusable element is in the footer on our project, this causes the page to scroll down to the bottom of the page.

This can be replicated on a page with a vertical scroll bar and having a form with a button like this:

Button("Submit").OnClick(x =>
{
    x.MessageBox("Sample message").AndExit();
});

Also if you follow guidelines set out in the olive change log this logic will throw an exception. This is because the focusable selector is defined in jqueryUI and the new version only pulls though widget component of jqueryUI.

Thanks

Pages being opened in popup

In the olive latest package, all the pages which are opened in an iframe, are being loaded in a modal popup window as well.

Ajax redirect to login page doesn't work when session expires

System doesn't redirect user to login page If user clicks on any link or button (Ajax request to a controller action which is for authenticated user).

Ajax request fails with 401 (Unauthorized) and show a confirmation dialog with message Request failed. Do you want to see the error details?. Clicking OK opens the login page in new tab rather than redirecting user to login page in same tab.

AjaxRedirect.defaultOnRedirectionFailed probably should check the status of response and if status is 401 it should simply open the url in same tab without any confirmation dialog.

Validation for AutoComplete with a collapsed BoxTemplate.CollapsiblePanel

If one has an AutoComplete control marked as mandatory in the UI on a form - within a Box with the BoxTemplate CollapsiblePanel - when the panel is expanded and the form is visible, click a Save button which validates the form performs exactly as expected, and the tooltip validation appears at the missing AutoComplete control. If the panel is collapsed though with the field missing a value, and the Save button (which is still visible in this example) is clicked - then the popup validation appears (as it should) but contains two occurrences of the validation message.

If an invalid value is entered in the autocomplete field - and the panel is collapsed before clicking Save, then a single validation popup message appears as expected- the problem just occurs with the AutoComplete in a collapsed panel with no field entered at all.

Another strange behaviour with BoxTemplate Collapsible panel is that if the panel is expanded and Save is clicked - and a bunch of validation tooltip messages are displayed, when the Panel is collapsed - then these all still show as tooltips (like the panel was hidden but not the tooltip validation messages showing within it.

Modal -> browser back not working

Steps to recreate:

• open a modal page
• click a link on the modal page that redirects the modal
• use browser back

The parent page is then loaded into the modal page incorrectly.

noImplicitUseStrict is deprecated

please remove noImplicitUseStrict from tsconfig.json or add "ignoreDeprecations": "5.0". we have a compilation error because this property is deprecated

Form Action Ajax redirect error when unauthorised

System doesn't redirect user to login page if user tries upload a video to a page and when session has timed out/ expired

Ajax request fails with 401 (Unauthorized) and show Unauthorized message rather than redirecting user to login page in same tab.

FormAction.onAjaxResponseErrorprobably should check the status of response and if status is 401 it should simply redirect to root/login

Multiselect Reload Event issue

By enabling multi-select reload on change option, as soon as the user clicks on any list item, post back occurs. In MSharp, that postback only happened when the user was done selecting all required options and drop down list was closed.

Third level menu item does not stay open.

If third level menu item is clicked, the whole menu collapses. Selected third level menu item does not stay open.

Modal Issues - Internet Explorer

On Internet Explorer and with the latest packages updates, a problems are occurring regarding the modal forms.

1. Clicking the Close button does not close the modal (nothing is shown to the user and the only error it receives is what is shown below). User can still close the modal by via clicking the "X" or clicking outside the modal form.

2. After closing the modal, it not only logs another error, but it also retains the modal URL in the address bar.

This causes a problem where clicking a popup link again would result in the modal form being opened in a new page with no styling associated with it. It has also caused a side effect where the address URL remains unchanged when navigating to some pages.

Tooltip doesn't fade when a master detail is closed

Custom action when form validation fails

In one of our projects we need to scroll the page to the first field with validation tooltip on it after the form validation fails. (e.g. by clicking on Save button)

It would help if the framework triggers an event for custom actions when form validation fails.

Entering Dates in the format dd/MM/yyyy results in dd/MM/00yy

Our client has reported the following issue:

_"When entering a date manually anywhere in a date field in the system, we've come across an issue.

If you type in the date as, for example, 23/03/21, you would expect the system to write that as 23/03/2021. Instead, it is writing it as 23/03/0021 - as in 23rd March 21 C.E."

"010" also produces the same issue.

Regards

Testing requirements

for Pangolin testing optimization we need to have below commands:

page.isAjaxRedirecting
page.isOpeningModal
page.isClosingModal
page.isAwaitingAjaxResponse
page.awaitingAutocompleteResponses
page.closeModal()
parent.CloseModal()

regards

CSS loading should unload also when leaving a page.

When you navigate to a page using Ajax redirect, if that page has its own CSS or JS files, they will be loaded, but when you navigate away from that page, they don't get removed. They should.

Otherwise, a new page you go to, will get the previous page's scripts and CSS applied to it!