lfk/frontend
2
0
Fork 0
Code Issues 3 Pull Requests Actions Projects Releases Wiki Activity

✨ UX - ConfirmOrgDeletion cancel event reflection in datatable

Browse Source 
ref #16
This commit is contained in:
Philipp Dormann 2021-01-15 22:49:16 +01:00
parent 83f19a7572
commit 84a9cf069a
3 changed files with 45 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/ConfirmOrgDeletion.svelte
View File

@ -4,8 +4,14 @@
import { focusTrap } from "svelte-focus-trap"; import { focusTrap } from "svelte-focus-trap";
import { RunnerOrganisationService } from "@odit/lfk-client-js"; import { RunnerOrganisationService } from "@odit/lfk-client-js";
import Toastify from "toastify-js"; import Toastify from "toastify-js";
import { createEventDispatcher } from "svelte";
export let modal_open; export let modal_open;
export let delete_org; export let delete_org;
const dispatch = createEventDispatcher();
function cancelDelete() {
modal_open = false;
dispatch("cancelDelete", { id: delete_org.id });
}
function deleteOrg() { function deleteOrg() {
RunnerOrganisationService.runnerOrganisationControllerRemove( RunnerOrganisationService.runnerOrganisationControllerRemove(
delete_org.id, delete_org.id,
@ -30,9 +36,7 @@
class="fixed z-10 inset-0 overflow-y-auto" class="fixed z-10 inset-0 overflow-y-auto"
use:focusTrap use:focusTrap
use:clickOutside use:clickOutside
on:click_outside={() => { on:click_outside={cancelDelete}>
modal_open = false;
}}>
<div <div
class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div class="fixed inset-0 transition-opacity" aria-hidden="true"> <div class="fixed inset-0 transition-opacity" aria-hidden="true">
@ -84,9 +88,7 @@
Confirm, delete organization and associated teams+runners. Confirm, delete organization and associated teams+runners.
</button> </button>
<button <button
on:click={() => { on:click={cancelDelete}
modal_open = false;
}}
type="button" type="button"
class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"> class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
Cancel, keep organization Cancel, keep organization

28
src/components/OrgDetail.svelte
View File

@ -22,22 +22,22 @@
let modal_open = false; let modal_open = false;
let delete_org = {}; let delete_org = {};
function deleteOrganisation() { function deleteOrganisation() {
RunnerOrganisationService.runnerOrganisationControllerRemove( // RunnerOrganisationService.runnerOrganisationControllerRemove(
original.id, // original.id,
false // false
) // )
.then((resp) => { // .then((resp) => {
Toastify({ // Toastify({
text: "Organization deleted", // text: "Organization deleted",
duration: 500, // duration: 500,
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)", // backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
}).showToast(); // }).showToast();
location.replace("./"); // location.replace("./");
}) // })
.catch((err) => { // .catch((err) => {
modal_open = true; modal_open = true;
delete_org = original; delete_org = original;
}); // });
} }
function submit() { function submit() {
if (data_loaded === true && save_enabled) { if (data_loaded === true && save_enabled) {

32
src/components/OrgOverview.svelte
View File

@ -19,7 +19,13 @@
); );
</script> </script>
<ConfirmOrgDeletion bind:modal_open bind:delete_org /> <ConfirmOrgDeletion
on:cancelDelete={(event) => {
modal_open = false;
active_deletes[event.detail.id] = false;
}}
bind:modal_open
bind:delete_org />
{#if store.state.jwtinfo.userdetails.permissions.includes('ORGANISATION:GET')} {#if store.state.jwtinfo.userdetails.permissions.includes('ORGANISATION:GET')}
{#await promise} {#await promise}
<div <div
@ -116,20 +122,20 @@
Delete</button> Delete</button>
<button <button
on:click={() => { on:click={() => {
RunnerOrganisationService.runnerOrganisationControllerRemove(o.id, false) // RunnerOrganisationService.runnerOrganisationControllerRemove(o.id, false)
.then((resp) => { // .then((resp) => {
current_organizations = current_organizations.filter((obj) => obj.id !== o.id); // current_organizations = current_organizations.filter((obj) => obj.id !== o.id);
Toastify({ // Toastify({
text: 'Organization deleted', // text: 'Organization deleted',
duration: 500, // duration: 500,
backgroundColor: // backgroundColor:
'linear-gradient(to right, #00b09b, #96c93d)', // 'linear-gradient(to right, #00b09b, #96c93d)',
}).showToast(); // }).showToast();
}) // })
.catch((err) => { // .catch((err) => {
modal_open = true; modal_open = true;
delete_org = o; delete_org = o;
}); // });
}} }}
tabindex="0" tabindex="0"
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Confirm class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Confirm