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

Runner detail now uses svelte select🔥🔥

Browse Source 
ref #91
This commit is contained in:
Nicolai Ort 2021-03-17 10:55:25 +01:00
parent 9d0c6b9ef4
commit cee1ab1347
1 changed files with 42 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/components/runners/RunnerDetail.svelte
View File

@ -10,6 +10,7 @@
import Toastify from "toastify-js"; import Toastify from "toastify-js";
import PromiseError from "../base/PromiseError.svelte"; import PromiseError from "../base/PromiseError.svelte";
import isEmail from "validator/es/lib/isEmail"; import isEmail from "validator/es/lib/isEmail";
import Select from "svelte-select";
let data_loaded = false; let data_loaded = false;
export let params; export let params;
const runner_promise = RunnerService.runnerControllerGetOne(params.runnerid); const runner_promise = RunnerService.runnerControllerGetOne(params.runnerid);
@ -30,7 +31,6 @@
data_loaded = true; data_loaded = true;
original_data_pdf = Object.assign(original_data_pdf, data); original_data_pdf = Object.assign(original_data_pdf, data);
original_data = Object.assign(original_data, data); original_data = Object.assign(original_data, data);
original_data.group = original_data.group.id;
editable = Object.assign(editable, original_data); editable = Object.assign(editable, original_data);
}); });
document.addEventListener("click", function (e) { document.addEventListener("click", function (e) {
@ -55,11 +55,13 @@
text: $_("updating-runner"), text: $_("updating-runner"),
duration: 2500, duration: 2500,
}).showToast(); }).showToast();
RunnerService.runnerControllerPut(original_data.id, editable) let postdata = {};
postdata = Object.assign(postdata, editable);
postdata.group = postdata.group.id;
RunnerService.runnerControllerPut(original_data.id, postdata)
.then((resp) => { .then((resp) => {
Object.assign(original_data, editable); Object.assign(original_data, editable);
original_data = editable; original_data = original_data;
Object.assign(original_data, editable);
Toastify({ Toastify({
text: $_("runner-updated"), text: $_("runner-updated"),
duration: 2500, duration: 2500,
@ -206,7 +208,17 @@
aria-haspopup="true" aria-haspopup="true"
aria-expanded="true"> aria-expanded="true">
{$_('generate-sponsoring-contract')} {$_('generate-sponsoring-contract')}
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="-mr-1 ml-2 h-5 w-5"><path fill="none" d="M0 0h24v24H0z"/><path fill="currentColor" d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z"/></svg> <svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
class="-mr-1 ml-2 h-5 w-5"><path
fill="none"
d="M0 0h24v24H0z" />
<path
fill="currentColor"
d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z" /></svg>
</button> </button>
</div> </div>
{#if sponsoring_contracts_download_open} {#if sponsoring_contracts_download_open}
@ -349,21 +361,31 @@
</div> </div>
<div class="text-sm w-full"> <div class="text-sm w-full">
<span class="font-medium text-gray-700">{$_('group')}</span> <span class="font-medium text-gray-700">{$_('group')}</span>
<select <Select
bind:value={editable.group} containerClasses="rounded-l-md 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 rounded-md p-2"
name="team" getSelectionLabel={(option) => {
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 rounded-md p-2"> if (option.responseType == 'RUNNERORGANIZATION') {
{#each teams as team} return option.name;
<option value={team.id}> }
{team.parentGroup.name} return `${option.parentGroup.name} &gt; ${option.name}`;
&gt; }}
{team.name} getOptionLabel={(option) => {
</option> if (option.responseType == 'RUNNERORGANIZATION') {
{/each} return option.name;
{#each orgs as org} }
<option value={org.id}>{org.name}</option> return `${option.parentGroup.name} &gt; ${option.name}`;
{/each} }}
</select> itemFilter={(label, filterText, option) => label
.toLowerCase()
.includes(
filterText.toLowerCase()
) || option.id.toString().startsWith(filterText.toLowerCase())}
items={orgs.concat(orgs, teams)}
showChevron={true}
placeholder={$_('search-for-an-organization-or-team-by-name-or-id')}
noOptionsMessage={$_('no-organization-or-team-found')}
bind:selectedValue={editable.group}
on:clear={() => (editable.group = null)} />
</div> </div>
<div class="text-sm w-full"> <div class="text-sm w-full">
<span class="font-medium text-gray-700">{$_('distance')}</span> <span class="font-medium text-gray-700">{$_('distance')}</span>