gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-12-01 04:14:45 +03:00
Code Issues Packages Projects Releases Wiki Activity

connect project settings forms to the api

Browse Source
This commit is contained in:
Nikita Galaiko 2023-02-27 14:14:22 +01:00
parent e3bb0da7c0
commit 85d8d16e0d
No known key found for this signature in database
GPG Key ID: EBAB54E845BA519D
2 changed files with 118 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/lib/api.ts
View File

@ -138,6 +138,19 @@ export default (
},
body: JSON.stringify(params)
}).then(parseResponseJSON),
update: (
token: string,
repositoryId: string,
params: { name: string; description?: string }
): Promise<Project> =>
fetch(getUrl(`projects/${repositoryId}.json`), {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
'X-Auth-Token': token
},
body: JSON.stringify(params)
}).then(parseResponseJSON),
list: (token: string): Promise<Project[]> =>
fetch(getUrl('projects.json'), {
method: 'GET',

141
src/routes/projects/[projectId]/settings/+page.svelte
View File

@ -2,20 +2,22 @@
import { derived } from 'svelte/store';
import { Login } from '$lib/components';
import type { PageData } from './$types';
import { log, toasts } from '$lib';
import MdAutorenew from 'svelte-icons/md/MdAutorenew.svelte';
export let data: PageData;
const { project, user, api } = data;
function repo_id(url: string) {
const repo_id = (url: string) => {
const hurl = new URL(url);
const path = hurl.pathname.split('/');
return path[path.length - 1];
}
};
function hostname(url: string) {
const hostname = (url: string) => {
const hurl = new URL(url);
return hurl.hostname;
}
};
const isSyncing = derived(project, (project) => project?.api?.sync);
@ -26,16 +28,54 @@
const target = event.target as HTMLInputElement;
const sync = target.checked;
if (!$project.api) {
const apiProject = await api.projects.create($user.access_token, {
name: $project.title,
uid: $project.id
});
await project.update({ api: { ...apiProject, sync } });
} else {
await project.update({ api: { ...$project.api, sync } });
try {
if (!$project.api) {
const apiProject = await api.projects.create($user.access_token, {
name: $project.title,
uid: $project.id
});
await project.update({ api: { ...apiProject, sync } });
} else {
await project.update({ api: { ...$project.api, sync } });
}
} catch (error) {
target.checked = $project.api?.sync || false;
log.error(`Failed to update project sync status: ${error}`);
toasts.error('Failed to update project sync status');
}
};
$: saving = false;
const onSubmit = async (e: SubmitEvent) => {
if (!$project) return;
if (!$user) return;
saving = true;
const target = e.target as HTMLFormElement;
const formData = new FormData(target);
const name = formData.get('name') as string | undefined;
const description = formData.get('description') as string | undefined;
console.log({ name, description });
try {
if (name) {
const updated = await api.projects.update($user.access_token, $project?.api.repository_id, {
name,
description
});
await project.update({
title: name,
api: { ...updated, sync: $project?.api.sync || false }
});
}
toasts.success('Project updated');
} catch (e) {
log.error(e);
toasts.error('Failed to update project');
}
saving = false;
};
</script>
<div class="p-4 mx-auto h-full overflow-auto">
@ -109,30 +149,59 @@
</div>
</div>
{/if}
<div class="space-y-2">
<div class="ml-1">Path</div>
<div class="text-zinc-400 font-mono">
{$project?.path}
</div>
</div>
<div class="space-y-2">
<div class="ml-1">Project Name</div>
<!-- text box -->
<input
type="text"
class="p-2 text-zinc-300 bg-black border border-zinc-600 rounded-lg w-full"
value={$project?.title}
/>
</div>
<div class="space-y-2">
<div class="ml-1">Project Description</div>
<!-- text box -->
<textarea
rows="3"
class="p-2 text-zinc-300 bg-black border border-zinc-600 rounded-lg w-full"
value={$project?.api?.description}
/>
</div>
<form on:submit={onSubmit} class="flex flex-col gap-3">
<fieldset class="flex flex-col gap-2">
<div class="flex flex-col gap-2">
<label for="path" class="ml-1">Path</label>
<input
disabled
id="path"
name="path"
type="text"
class="p-2 text-zinc-300 bg-black border border-zinc-600 rounded-lg w-full"
value={$project?.path}
/>
</div>
<div class="flex flex-col gap-2">
<label for="name" class="ml-1">Project Name</label>
<input
id="name"
name="name"
type="text"
class="p-2 text-zinc-300 bg-black border border-zinc-600 rounded-lg w-full"
value={$project?.title}
required
/>
</div>
<div class="flex flex-col gap-2">
<label for="description" class="ml-1">Project Description</label>
<textarea
id="description"
name="description"
rows="3"
class="p-2 text-zinc-300 bg-black border border-zinc-600 rounded-lg w-full"
value={$project?.api?.description}
/>
</div>
</fieldset>
<footer>
{#if saving}
<div
class="flex w-32 flex-row w-content items-center gap-1 justify-center py-1 px-3 rounded text-white bg-blue-400"
>
<div class="animate-spin w-5 h-5">
<MdAutorenew />
</div>
<span>Updating...</span>
</div>
{:else}
<button type="submit" class="py-1 px-3 rounded text-white bg-blue-400"
>Update profile</button
>
{/if}
</footer>
</form>
</div>
</div>
</div>