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 { RunnerOrganisationService } from "@odit/lfk-client-js";
import Toastify from "toastify-js";
import { createEventDispatcher } from "svelte";
export let modal_open;
export let delete_org;
const dispatch = createEventDispatcher();
function cancelDelete() {
modal_open = false;
dispatch("cancelDelete", { id: delete_org.id });
}
function deleteOrg() {
RunnerOrganisationService.runnerOrganisationControllerRemove(
delete_org.id,
@ -30,9 +36,7 @@
class="fixed z-10 inset-0 overflow-y-auto"
use:focusTrap
use:clickOutside
on:click_outside={() => {
modal_open = false;
}}>
on:click_outside={cancelDelete}>
<div
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">
@ -84,9 +88,7 @@
Confirm, delete organization and associated teams+runners.
</button>
<button
on:click={() => {
modal_open = false;
}}
on:click={cancelDelete}
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">
Cancel, keep organization

32
src/components/OrgDetail.svelte
View File

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

36
src/components/OrgOverview.svelte
View File

@ -19,7 +19,13 @@
);
</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')}
{#await promise}
<div
@ -116,20 +122,20 @@
Delete</button>
<button
on:click={() => {
RunnerOrganisationService.runnerOrganisationControllerRemove(o.id, false)
.then((resp) => {
current_organizations = current_organizations.filter((obj) => obj.id !== o.id);
Toastify({
text: 'Organization deleted',
duration: 500,
backgroundColor:
'linear-gradient(to right, #00b09b, #96c93d)',
}).showToast();
})
.catch((err) => {
modal_open = true;
delete_org = o;
});
// RunnerOrganisationService.runnerOrganisationControllerRemove(o.id, false)
// .then((resp) => {
// current_organizations = current_organizations.filter((obj) => obj.id !== o.id);
// Toastify({
// text: 'Organization deleted',
// duration: 500,
// backgroundColor:
// 'linear-gradient(to right, #00b09b, #96c93d)',
// }).showToast();
// })
// .catch((err) => {
modal_open = true;
delete_org = o;
// });
}}
tabindex="0"
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Confirm