issues Create an `unsaved changes` message when you make changes in user permissions or book settings without saving it #123

This commit is contained in:
SvyatoslavArtymovych 2023-06-08 09:45:53 +03:00
parent b55b74283a
commit 07360a6fcd
5 changed files with 152677 additions and 7 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -50,13 +50,13 @@
<input value="{{book.id}}" type="text" name="book_id" id="book_id" class="hidden" placeholder="Book id" required> <input value="{{book.id}}" type="text" name="book_id" id="book_id" class="hidden" placeholder="Book id" required>
<div> <div>
<label for="label" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Label</label> <label for="label" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Label</label>
<input value="{{book.label}}" type="text" name="label" id="label" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="My Book" required> <input value="{{book.label}}" type="text" name="label" id="label" class="book-label-input bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="My Book" required>
</div> </div>
<div> <div>
<label for="about" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"> <label for="about" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
Book about Book about
</label> </label>
<textarea type="text" name="about" id="about" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">{{book.about if not book.about==None}}</textarea> <textarea type="text" name="about" id="about" class="book-about-input bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">{{book.about if not book.about==None}}</textarea>
</div> </div>
<div class="multiple-input-block mb-6"> <div class="multiple-input-block mb-6">
<label for="tags-input" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"> <label for="tags-input" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
@ -66,7 +66,7 @@
<input <input
type="text" type="text"
id="tags-input" id="tags-input"
class="multiple-input mb-3 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" class="book-tags-input multiple-input mb-3 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="e.g. Law (press 'Enter' or Comma to add tag. Click on tag to edit it)" placeholder="e.g. Law (press 'Enter' or Comma to add tag. Click on tag to edit it)"
data-save-results-to="tags-to-submit" data-save-results-to="tags-to-submit"
> >
@ -157,7 +157,7 @@
</tbody> </tbody>
</table> </table>
</div> </div>
<button type="button" data-modal-target="add-contributor-modal" data-modal-toggle="add-contributor-modal" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"> <button type="button" data-modal-target="add-contributor-modal" data-modal-toggle="add-contributor-modal" class="add-contributor-btn text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-1"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /> </svg> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-1"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /> </svg>
New Contributor New Contributor
</button> </button>

View File

@ -33,6 +33,7 @@ import {deleteInterpretation} from './deleteInterpretation';
import {indeterminateInputs} from './indeterminateInputs'; import {indeterminateInputs} from './indeterminateInputs';
import {initRefreshAccessLevelTree} from './refreshAccessLevelTree'; import {initRefreshAccessLevelTree} from './refreshAccessLevelTree';
import {deleteContributor} from './deleteContributor'; import {deleteContributor} from './deleteContributor';
import {initUnsavedChangedAlerts} from './unsavedChangedAlert';
initQuillReadOnly(); initQuillReadOnly();
initBooks(); initBooks();
@ -69,3 +70,4 @@ deleteInterpretation();
indeterminateInputs(); indeterminateInputs();
initRefreshAccessLevelTree(); initRefreshAccessLevelTree();
deleteContributor(); deleteContributor();
initUnsavedChangedAlerts();

View File

@ -0,0 +1,32 @@
const initAlertOnClick = (element: HTMLElement) => {
element.addEventListener('click', () => {
window.addEventListener('beforeunload', function (e) {
var confirmationMessage =
'It looks like you have been editing something. ' +
'If you leave before saving, your changes will be lost.';
(e || window.event).returnValue = confirmationMessage; //Gecko + IE
return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
});
});
};
export const initUnsavedChangedAlerts = () => {
const elementsSelectors = [
'.book-label-input',
'.book-about-input',
'.book-tags-input',
'.multiple-input-word',
'.contributor-role-select',
'.edit-permissions-btn',
'.add-contributor-btn',
];
elementsSelectors.forEach(selector => {
const elements: NodeListOf<HTMLElement> =
document.querySelectorAll(selector);
elements.forEach(element => {
initAlertOnClick(element);
});
});
};