Andras Bacsai
101
src/routes/new/source/_Github.svelte
Normal file
101
src/routes/new/source/_Github.svelte
Normal file
@@ -0,0 +1,101 @@
|
||||
<script lang="ts">
|
||||
export let gitSource;
|
||||
import { goto } from '$app/navigation';
|
||||
import { post } from '$lib/api';
|
||||
|
||||
import Explainer from '$lib/components/Explainer.svelte';
|
||||
|
||||
import { errorNotification } from '$lib/form';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let nameEl;
|
||||
let organizationEl;
|
||||
|
||||
onMount(() => {
|
||||
nameEl.focus();
|
||||
});
|
||||
async function handleSubmit() {
|
||||
try {
|
||||
const { id } = await post(`/new/source.json`, { ...gitSource });
|
||||
return await goto(`/sources/${id}/`);
|
||||
} catch ({ error }) {
|
||||
return errorNotification(error);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex justify-center pb-8">
|
||||
<form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4">
|
||||
<div class="flex h-8 items-center space-x-2">
|
||||
<div class="text-xl font-bold text-white">Configuration</div>
|
||||
<button type="submit" class="bg-orange-600 hover:bg-orange-500">Save</button>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 items-center">
|
||||
<label for="type">Type</label>
|
||||
|
||||
<div class="col-span-2">
|
||||
<select name="type" id="type" class="w-96" bind:value={gitSource.type}>
|
||||
<option value="github">GitHub</option>
|
||||
<option value="gitlab">GitLab</option>
|
||||
<option value="bitbucket">BitBucket</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 items-center">
|
||||
<label for="name">Name</label>
|
||||
<div class="col-span-2">
|
||||
<input
|
||||
name="name"
|
||||
id="name"
|
||||
placeholder="GitHub.com"
|
||||
required
|
||||
bind:this={nameEl}
|
||||
bind:value={gitSource.name}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-3 items-center">
|
||||
<label for="htmlUrl">HTML URL</label>
|
||||
<div class="col-span-2">
|
||||
<input
|
||||
type="url"
|
||||
name="htmlUrl"
|
||||
id="htmlUrl"
|
||||
placeholder="eg: https://github.com"
|
||||
required
|
||||
bind:value={gitSource.htmlUrl}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 items-center">
|
||||
<label for="apiUrl">API URL</label>
|
||||
<div class="col-span-2">
|
||||
<input
|
||||
name="apiUrl"
|
||||
type="url"
|
||||
id="apiUrl"
|
||||
placeholder="eg: https://api.github.com"
|
||||
required
|
||||
bind:value={gitSource.apiUrl}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-3">
|
||||
<label for="organization" class="pt-2">Organization</label>
|
||||
<div class="col-span-2">
|
||||
<input
|
||||
name="organization"
|
||||
id="organization"
|
||||
placeholder="eg: coollabsio"
|
||||
bind:value={gitSource.organization}
|
||||
bind:this={organizationEl}
|
||||
/>
|
||||
<Explainer
|
||||
text="Fill it if you would like to use an organization's as your Git Source. Otherwise your
|
||||
user will be used."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
82
src/routes/new/source/_Gitlab.svelte
Normal file
82
src/routes/new/source/_Gitlab.svelte
Normal file
@@ -0,0 +1,82 @@
|
||||
<script lang="ts">
|
||||
export let gitSource;
|
||||
import { goto } from '$app/navigation';
|
||||
import { post } from '$lib/api';
|
||||
|
||||
import { errorNotification } from '$lib/form';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let nameEl;
|
||||
|
||||
onMount(() => {
|
||||
nameEl.focus();
|
||||
});
|
||||
async function handleSubmit() {
|
||||
try {
|
||||
const { id } = await post(`/new/source.json`, { ...gitSource });
|
||||
return await goto(`/sources/${id}/`);
|
||||
} catch ({ error }) {
|
||||
return errorNotification(error);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex justify-center pb-8">
|
||||
<form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4">
|
||||
<div class="flex h-8 items-center space-x-2">
|
||||
<div class="text-xl font-bold text-white">Configuration</div>
|
||||
<button type="submit" class="bg-orange-600 hover:bg-orange-500">Save</button>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 items-center">
|
||||
<label for="type">Type</label>
|
||||
|
||||
<div class="col-span-2">
|
||||
<select name="type" id="type" class="w-96" bind:value={gitSource.type}>
|
||||
<option value="github">GitHub</option>
|
||||
<option value="gitlab">GitLab</option>
|
||||
<option value="bitbucket">BitBucket</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 items-center">
|
||||
<label for="name">Name</label>
|
||||
<div class="col-span-2">
|
||||
<input
|
||||
name="name"
|
||||
id="name"
|
||||
placeholder="GitHub.com"
|
||||
required
|
||||
bind:this={nameEl}
|
||||
bind:value={gitSource.name}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-3 items-center">
|
||||
<label for="htmlUrl">HTML URL</label>
|
||||
<div class="col-span-2">
|
||||
<input
|
||||
type="url"
|
||||
name="htmlUrl"
|
||||
id="htmlUrl"
|
||||
placeholder="eg: https://github.com"
|
||||
required
|
||||
bind:value={gitSource.htmlUrl}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 items-center">
|
||||
<label for="apiUrl">API URL</label>
|
||||
<div class="col-span-2">
|
||||
<input
|
||||
name="apiUrl"
|
||||
type="url"
|
||||
id="apiUrl"
|
||||
placeholder="eg: https://api.github.com"
|
||||
required
|
||||
bind:value={gitSource.apiUrl}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
17
src/routes/new/source/index.json.ts
Normal file
17
src/routes/new/source/index.json.ts
Normal file
@@ -0,0 +1,17 @@
|
||||
import { getUserDetails } from '$lib/common';
|
||||
import * as db from '$lib/database';
|
||||
import { PrismaErrorHandler } from '$lib/database';
|
||||
import type { RequestHandler } from '@sveltejs/kit';
|
||||
|
||||
export const post: RequestHandler = async (event) => {
|
||||
const { teamId, status, body } = await getUserDetails(event);
|
||||
if (status === 401) return { status, body };
|
||||
|
||||
const { name, type, htmlUrl, apiUrl, organization } = await event.request.json();
|
||||
try {
|
||||
const { id } = await db.newSource({ name, teamId, type, htmlUrl, apiUrl, organization });
|
||||
return { status: 201, body: { id } };
|
||||
} catch (e) {
|
||||
return PrismaErrorHandler(e);
|
||||
}
|
||||
};
|
||||
66
src/routes/new/source/index.svelte
Normal file
66
src/routes/new/source/index.svelte
Normal file
@@ -0,0 +1,66 @@
|
||||
<script lang="ts">
|
||||
import Github from './_Github.svelte';
|
||||
import Gitlab from './_Gitlab.svelte';
|
||||
let gitSource = {
|
||||
name: undefined,
|
||||
type: 'github',
|
||||
htmlUrl: undefined,
|
||||
apiUrl: undefined,
|
||||
organization: undefined
|
||||
};
|
||||
function setPredefined(type) {
|
||||
switch (type) {
|
||||
case 'github':
|
||||
gitSource = {
|
||||
name: 'GitHub.com',
|
||||
type,
|
||||
htmlUrl: 'https://github.com',
|
||||
apiUrl: 'https://api.github.com',
|
||||
organization: undefined
|
||||
};
|
||||
break;
|
||||
case 'gitlab':
|
||||
gitSource = {
|
||||
name: 'GitLab.com',
|
||||
type,
|
||||
htmlUrl: 'https://gitlab.com',
|
||||
apiUrl: 'https://gitlab.com/api',
|
||||
organization: undefined
|
||||
};
|
||||
break;
|
||||
case 'bitbucket':
|
||||
gitSource = {
|
||||
name: 'BitBucket.com',
|
||||
type,
|
||||
htmlUrl: 'https://bitbucket.com',
|
||||
apiUrl: 'https://bitbucket.com',
|
||||
organization: undefined
|
||||
};
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex space-x-1 p-6 font-bold">
|
||||
<div class="mr-4 text-2xl tracking-tight">Add New Git Source</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-col space-y-2 pb-10 text-center">
|
||||
<div class="text-xl font-bold text-white">Offical providers</div>
|
||||
<div class="flex justify-center space-x-2">
|
||||
<button class="w-32" on:click={() => setPredefined('github')}>GitHub.com</button>
|
||||
<button class="w-32" on:click={() => setPredefined('gitlab')}>GitLab.com</button>
|
||||
<button class="w-32" on:click={() => setPredefined('bitbucket')}>Bitbucket.com</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-6">
|
||||
{#if gitSource.type === 'github'}
|
||||
<Github {gitSource} />
|
||||
{:else if gitSource.type === 'gitlab'}
|
||||
<Gitlab {gitSource} />
|
||||
{:else if gitSource.type === 'bitbucket'}
|
||||
<div class="text-center font-bold text-4xl py-10">Not implemented yet</div>
|
||||
{/if}
|
||||
</div>
|
||||
Reference in New Issue
Block a user