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

feature/14-team-management #36

Merged
philipp merged 4 commits from feature/14-team-management into dev 2021-01-16 15:29:50 +00:00
Conversation 1 Commits 4 Files Changed 3 +151 -24
3 changed files with 151 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
src/components/ConfirmTeamDeletion.svelte Normal file
View File

@ -0,0 +1,97 @@
<script>
import { _ } from "svelte-i18n";
import { clickOutside } from "./outsideclick";
import { focusTrap } from "svelte-focus-trap";
import { RunnerTeamService } from "@odit/lfk-client-js";
import Toastify from "toastify-js";
import { createEventDispatcher } from "svelte";
export let modal_open;
export let delete_team;
const dispatch = createEventDispatcher();
function cancelDelete() {
modal_open = false;
dispatch("cancelDelete", { id: delete_team.id });
}
function deleteTeam() {
RunnerTeamService.runnerTeamControllerRemove(delete_team.id, true)
.then((resp) => {
Toastify({
text: "Team deleted",
duration: 500,
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
}).showToast();
location.replace("./");
})
.catch((err) => {
//
});
}
</script>
{#if modal_open}
<div
class="fixed z-10 inset-0 overflow-y-auto"
use:focusTrap
use:clickOutside
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">
<div
class="absolute inset-0 bg-gray-500 opacity-75"
data-id="modal_backdrop" />
</div>
<span
class="hidden sm:inline-block sm:align-middle sm:h-screen"
aria-hidden="true">&#8203;</span>
<div
class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
role="dialog"
aria-modal="true"
aria-labelledby="modal-headline">
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="sm:flex sm:items-start">
<div
class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
<svg
class="h-6 w-6 text-blue-600"
fill="currentColor"
width="24"
height="24"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 640 512"><path
fill="currentColor"
d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z" /></svg>
</div>
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<h3 class="text-lg leading-6 font-medium text-gray-900">
Attention!
</h3>
<div class="mt-2 mb-6">
<p class="text-sm text-gray-500">
Do you want to delete the team
{delete_team.name}?<br />All associated runners will be
deleted too!
</p>
</div>
</div>
</div>
</div>
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<button
on:click={deleteTeam}
type="button"
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">
Confirm, delete team and associated runners.
</button>
<button
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 team
</button>
</div>
</div>
</div>
</div>
{/if}

57
src/components/TeamDetail.svelte
View File

@ -7,13 +7,20 @@
import Toastify from "toastify-js";
import store from "../store";
import PromiseError from "./PromiseError.svelte";
import ConfirmTeamDeletion from "./ConfirmTeamDeletion.svelte";
export let params;
let [teamdata, original, delete_team, orgs, modal_open] = [
{},
{},
{},
[],
false,
];
$: delete_triggered = false;
$: save_enabled = !data_changed;
export let params;
let teamdata = {};
let original = {};
$: data_loaded = false;
$: data_changed = JSON.stringify(teamdata) === JSON.stringify(original);
//
const promise = RunnerTeamService.runnerTeamControllerGetOne(
params.teamid
).then((value) => {
@ -21,22 +28,23 @@
teamdata = Object.assign(teamdata, value);
original = Object.assign(original, value);
});
$: orgs = [];
const orgs_promise = RunnerOrganisationService.runnerOrganisationControllerGetAll().then(
(val) => {
console.log(val);
orgs = val;
val.forEach((t) => {
console.log(t.name);
});
}
);
RunnerOrganisationService.runnerOrganisationControllerGetAll().then((val) => {
orgs = val;
});
function deleteTeam() {
RunnerTeamService.runnerTeamControllerRemove(original.id, true)
RunnerTeamService.runnerTeamControllerRemove(original.id, false)
.then((resp) => {
Toastify({
text: "Organization deleted",
duration: 500,
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
}).showToast();
location.replace("./");
})
.catch((err) => {});
.catch((err) => {
modal_open = true;
delete_team = original;
});
}
function submit() {
if (data_loaded === true && save_enabled) {
@ -63,6 +71,7 @@
}
</script>
<ConfirmTeamDeletion bind:modal_open bind:delete_team />
{#if data_loaded}
<section class="container p-5">
<div class="mb-8 text-3xl font-extrabold leading-tight">
@ -193,13 +202,17 @@
name="contact"
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2" />
</div>
<select
bind:value={teamdata.parentGroup}
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2">
{#each orgs as o}
<option value={o.id}>{o.name}</option>
{/each}
</select>
<div class="text-sm w-full">
<label for="org" class="font-medium text-gray-700">Parent Organization</label>
<select
name="org"
bind:value={teamdata.parentGroup}
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2">
{#each orgs as o}
<option value={o.id}>{o.name}</option>
{/each}
</select>
</div>
</section>
{:else}
{#await promise}

21
src/components/TeamsOverview.svelte
View File

@ -7,9 +7,12 @@
import { users as usersstore } from "../store.js";
import store from "../store";
import TeamsEmptyState from "./TeamsEmptyState.svelte";
import ConfirmTeamDeletion from "./ConfirmTeamDeletion.svelte";
$: searchvalue = "";
$: active_deletes = [];
export let current_teams = [];
let modal_open = false;
let delete_team = {};
usersstore.subscribe((val) => {
current_teams = val;
});
@ -18,6 +21,13 @@
});
</script>
<ConfirmTeamDeletion
on:cancelDelete={(event) => {
modal_open = false;
active_deletes[event.detail.id] = false;
}}
bind:modal_open
bind:delete_team />
{#if store.state.jwtinfo.userdetails.permissions.includes('TEAM:GET')}
{#await teams_promise}
<div
@ -114,12 +124,19 @@
Delete</button>
<button
on:click={() => {
RunnerTeamService.runnerTeamControllerRemove(t.id, true)
RunnerTeamService.runnerTeamControllerRemove(t.id, false)
.then((resp) => {
current_teams = current_teams.filter((obj) => obj.id !== t.id);
Toastify({
text: 'Organization deleted',
duration: 500,
backgroundColor:
'linear-gradient(to right, #00b09b, #96c93d)',
}).showToast();
})
.catch((err) => {
// error deleting user
modal_open = true;
delete_team = t;
});
}}
tabindex="0"