mirror of https://github.com/logos-co/open-law.git
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:
parent
b55b74283a
commit
07360a6fcd
File diff suppressed because one or more lines are too long
149158
app/static/js/main.js
149158
app/static/js/main.js
File diff suppressed because one or more lines are too long
|
@ -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>
|
||||||
|
|
|
@ -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();
|
||||||
|
|
|
@ -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);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
Loading…
Reference in New Issue