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