Shiloh/lasthourcloud
Shiloh/lasthourcloud
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Merge pull request #235 from SaraVieira/add-better-repo-select

Browse Source 
Add search in repo and branch select
This commit is contained in:
Andras Bacsai 2022-03-27 22:34:15 +02:00 committed by GitHub
commit 2786e7dbaf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 63 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
src/routes/applications/[id]/configuration/_GithubRepositories.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
export let application; export let application;
import Select from 'svelte-select';
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { page } from '$app/stores'; import { page } from '$app/stores';
import { get, post } from '$lib/api'; import { get, post } from '$lib/api';
@ -35,6 +35,9 @@
Authorization: `token ${$gitTokens.githubToken}` Authorization: `token ${$gitTokens.githubToken}`
}); });
} }
let reposSelectOptions;
let branchSelectOptions;
async function loadRepositories() { async function loadRepositories() {
let page = 1; let page = 1;
let reposCount = 0; let reposCount = 0;
@ -49,8 +52,13 @@
} }
} }
loading.repositories = false; loading.repositories = false;
reposSelectOptions = repositories.map((repo) => ({
value: repo.full_name,
label: repo.name
}));
} }
async function loadBranches() { async function loadBranches(event) {
selected.repository = event.detail.value;
loading.branches = true; loading.branches = true;
selected.branch = undefined; selected.branch = undefined;
selected.projectId = repositories.find((repo) => repo.full_name === selected.repository).id; selected.projectId = repositories.find((repo) => repo.full_name === selected.repository).id;
@ -58,6 +66,10 @@
branches = await get(`${apiUrl}/repos/${selected.repository}/branches`, { branches = await get(`${apiUrl}/repos/${selected.repository}/branches`, {
Authorization: `token ${$gitTokens.githubToken}` Authorization: `token ${$gitTokens.githubToken}`
}); });
branchSelectOptions = branches.map((branch) => ({
value: branch.name,
label: branch.name
}));
return; return;
} catch ({ error }) { } catch ({ error }) {
return errorNotification(error); return errorNotification(error);
@ -65,7 +77,8 @@
loading.branches = false; loading.branches = false;
} }
} }
async function isBranchAlreadyUsed() { async function isBranchAlreadyUsed(event) {
selected.branch = event.detail.value;
try { try {
const data = await get( const data = await get(
`/applications/${id}/configuration/repository.json?repository=${selected.repository}&branch=${selected.branch}` `/applications/${id}/configuration/repository.json?repository=${selected.repository}&branch=${selected.branch}`
@ -153,47 +166,33 @@
{:else} {:else}
<form on:submit|preventDefault={handleSubmit} class="flex flex-col justify-center text-center"> <form on:submit|preventDefault={handleSubmit} class="flex flex-col justify-center text-center">
<div class="flex-col space-y-3 md:space-y-0 space-x-1"> <div class="flex-col space-y-3 md:space-y-0 space-x-1">
{#if loading.repositories} <div class="flex gap-4">
<select name="repository" disabled class="w-96"> <div class="custom-select-wrapper">
<option selected value="">Loading repositories...</option> <Select
</select> placeholder={loading.repositories
{:else} ? 'Loading repositories ...'
<select : 'Please select a repository'}
name="repository" id="repository"
class="w-96" on:select={loadBranches}
bind:value={selected.repository} items={reposSelectOptions}
on:change={loadBranches} isDisabled={loading.repositories}
> />
<option value="" disabled selected>Please select a repository</option> </div>
{#each repositories as repository}
<option value={repository.full_name}>{repository.name}</option>
{/each}
</select>
{/if}
<input class="hidden" bind:value={selected.projectId} name="projectId" /> <input class="hidden" bind:value={selected.projectId} name="projectId" />
{#if loading.branches} <div class="custom-select-wrapper">
<select name="branch" disabled class="w-96"> <Select
<option selected value="">Loading branches...</option> placeholder={loading.branches
</select> ? 'Loading branches ...'
{:else} : !selected.repository
<select ? 'Please select a repository first'
name="branch" : 'Please select a branch'}
class="w-96" id="repository"
disabled={!selected.repository} on:select={isBranchAlreadyUsed}
bind:value={selected.branch} items={branchSelectOptions}
on:change={isBranchAlreadyUsed} isDisabled={loading.branches || !selected.repository}
> />
{#if !selected.repository} </div>
<option value="" disabled selected>Select a repository first</option> </div>
{:else}
<option value="" disabled selected>Please select a branch</option>
{/if}
{#each branches as branch}
<option value={branch.name}>{branch.name}</option>
{/each}
</select>
{/if}
</div> </div>
<div class="pt-5 flex-col flex justify-center items-center space-y-4"> <div class="pt-5 flex-col flex justify-center items-center space-y-4">
<button <button

20
src/tailwind.css
View File

@ -37,6 +37,26 @@ textarea {
@apply min-w-[24rem] rounded border border-transparent bg-transparent bg-coolgray-200 p-2 text-xs tracking-tight text-white placeholder-stone-600 outline-none transition duration-150 hover:bg-coolgray-500 focus:bg-coolgray-500 disabled:border disabled:border-dashed disabled:border-coolgray-300 disabled:bg-transparent md:text-sm; @apply min-w-[24rem] rounded border border-transparent bg-transparent bg-coolgray-200 p-2 text-xs tracking-tight text-white placeholder-stone-600 outline-none transition duration-150 hover:bg-coolgray-500 focus:bg-coolgray-500 disabled:border disabled:border-dashed disabled:border-coolgray-300 disabled:bg-transparent md:text-sm;
} }
#svelte .custom-select-wrapper .selectContainer.disabled input {
@apply placeholder:text-stone-600;
}
#svelte .custom-select-wrapper .selectContainer input {
@apply text-white;
}
#svelte .custom-select-wrapper .selectContainer {
@apply h-12 w-96 rounded border-none bg-coolgray-200 p-2 text-xs font-bold tracking-tight outline-none transition duration-150 hover:bg-coolgray-500 focus:bg-coolgray-500 md:text-sm;
}
#svelte .listContainer {
@apply bg-coolgray-200 text-white;
}
#svelte .item.hover {
@apply bg-coolgray-100 text-white;
}
select { select {
@apply h-12 w-96 rounded bg-coolgray-200 p-2 text-xs font-bold tracking-tight text-white placeholder-stone-600 outline-none transition duration-150 hover:bg-coolgray-500 focus:bg-coolgray-500 disabled:text-stone-600 md:text-sm; @apply h-12 w-96 rounded bg-coolgray-200 p-2 text-xs font-bold tracking-tight text-white placeholder-stone-600 outline-none transition duration-150 hover:bg-coolgray-500 focus:bg-coolgray-500 disabled:text-stone-600 md:text-sm;
} }