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

✨ TeamDetail with edit,delete

Browse Source 
ref #14
This commit is contained in:
Philipp Dormann 2021-01-15 22:01:43 +01:00
parent 8f9a4ebc04
commit ccf09f97d5
4 changed files with 222 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/App.svelte
View File

@ -49,6 +49,7 @@
import UserDetail from "./components/UserDetail.svelte";
OpenAPI.BASE = config.baseurl;
import { register as registerSW } from "./swmodule";
import TeamDetail from "./components/TeamDetail.svelte";
store.init();
// registerSW();
</script>
@ -85,9 +86,14 @@
<Route path="/runners">
<Runners />
</Route>
<Route path="/teams">
<Route path="/teams/*">
<Route path="/">
<Teams />
</Route>
<Route path="/:teamid" let:params>
<TeamDetail {params} />
</Route>
</Route>
<Route path="/orgs/*">
<Route path="/">
<Orgs />

6
src/components/AddTeamModal.svelte
View File

@ -31,12 +31,12 @@
}
};
})();
$: teams = [];
$: parentGroup = undefined;
$: orgs = [];
const orgs_promise = RunnerOrganisationService.runnerOrganisationControllerGetAll().then(
(val) => {
console.log(val);
teams = val;
orgs = val;
val.forEach((t) => {
console.log(t.name);
});
@ -155,7 +155,7 @@
<select
bind:value={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 teams as t}
{#each orgs as t}
<option value={t.id}>{t.name}</option>
{/each}
</select>

210
src/components/TeamDetail.svelte Normal file
View File

@ -0,0 +1,210 @@
<script>
import {
RunnerOrganisationService,
RunnerTeamService,
} from "@odit/lfk-client-js";
import { _ } from "svelte-i18n";
import Toastify from "toastify-js";
import store from "../store";
import PromiseError from "./PromiseError.svelte";
$: 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) => {
data_loaded = true;
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);
});
}
);
function deleteTeam() {
RunnerTeamService.runnerTeamControllerRemove(original.id, true)
.then((resp) => {
location.replace("./");
})
.catch((err) => {});
}
function submit() {
if (data_loaded === true && save_enabled) {
Toastify({
text: "updating team",
duration: 2500,
}).showToast();
teamdata.parentGroup = teamdata.parentGroup.id;
RunnerTeamService.runnerTeamControllerPut(original.id, teamdata)
.then((resp) => {
Object.assign(original, teamdata);
original = teamdata;
Object.assign(original, teamdata);
//
Toastify({
text: "updated team",
duration: 2500,
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
}).showToast();
})
.catch((err) => {});
} else {
}
}
</script>
{#if data_loaded}
<section class="container p-5">
<div class="mb-8 text-3xl font-extrabold leading-tight">
{original.name}
<span data-id="org_actions_${teamdata.id}">
{#if store.state.jwtinfo.userdetails.permissions.includes('TEAM:DELETE')}
{#if delete_triggered}
<button
on:click={deleteTeam}
class="w-full 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')}</button>
<button
on:click={() => {
delete_triggered = !delete_triggered;
}}
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm">{$_('cancel')}</button>
{/if}
{#if !delete_triggered}
<button
on:click={() => {
delete_triggered = true;
}}
type="button"
class="w-full 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">{$_('delete-team')}</button>
{/if}
{/if}
{#if !delete_triggered}
<button
on:click={submit}
disabled={!save_enabled}
class:opacity-50={!save_enabled}
type="button"
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('save-changes')}</button>
{/if}
</span>
</div>
<div class="flex flex-row mb-4">
<div class="w-full">
<nav class="w-full flex">
<ol class="list-none flex flex-row items-center justify-start">
<li class="mr-2 flex items-center">
<svg
stroke="currentColor"
fill="none"
stroke-width="2"
viewBox="0 0 24 24"
stroke-linecap="round"
stroke-linejoin="round"
class="h-3 w-3 stroke-current"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"><path
d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
<polyline points="9 22 9 12 15 12 15 22" /></svg>
</li>
<li class="flex items-center">
<a class="mr-2" href="/">Home</a><svg
stroke="currentColor"
fill="none"
stroke-width="2"
viewBox="0 0 24 24"
stroke-linecap="round"
stroke-linejoin="round"
class="h-3 w-3 mr-2 stroke-current"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"><line
x1="5"
y1="12"
x2="19"
y2="12" />
<polyline points="12 5 19 12 12 19" /></svg>
</li>
<li class="mr-2 flex items-center">
<svg
class="flex-shrink-0 w-5 h-5 mr-2"
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>
</li>
<li class="flex items-center">
<a class="mr-2" href="./">Teams</a><svg
stroke="currentColor"
fill="none"
stroke-width="2"
viewBox="0 0 24 24"
stroke-linecap="round"
stroke-linejoin="round"
class="h-3 w-3 mr-2 stroke-current"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"><line
x1="5"
y1="12"
x2="19"
y2="12" />
<polyline points="12 5 19 12 12 19" /></svg>
</li>
<li class="flex items-center">
<span class="mr-2">Team-Details #{params.teamid}</span>
</li>
</ol>
</nav>
</div>
</div>
<div class="text-sm w-full">
<label for="name" class="font-medium text-gray-700">Name</label>
<input
autocomplete="off"
placeholder="Name"
type="text"
bind:value={teamdata.name}
name="name"
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>
<div class="text-sm w-full">
<label
for="contact"
class="font-medium text-gray-700">{$_('contact')}</label>
<input
autocomplete="off"
placeholder={$_('contact')}
type="text"
bind:value={teamdata.contact}
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>
</section>
{:else}
{#await promise}
organization detail is being loaded...
{:catch error}
<PromiseError />
{/await}
{/if}

1
src/locales/en.json
View File

@ -40,6 +40,7 @@
"an_error_happened_while_fetching_the_data": "An error happened while fetching the data"
},
"delete-organization": "Delete Organization",
"delete-team": "Delete Team",
"delete-user": "Delete User",
"dependency_name": "Name",
"dont-have-your-email-connected": "Don't have your email connected?",