woodpecker/web/src/components/repo/settings/ActionsTab.vue
Anbraten 58838f225c
Rewrite of WebUI (#245)
Rewrite of the UI using Typescript, Vue3, Windicss and Vite. The design should  be close to the current one with some changes:
- latest pipeline in a sidebar on the right
- secrets and registry as part of the repo-settings (secrets and registry entries shouldn't be used as much so they can be "hidden" under settings IMO)
- start page shows list of active repositories with button to enable / add new ones (currently you see all repositories and in most cases you only add new repositories once in a while)
2021-11-03 17:40:31 +01:00

86 lines
2.4 KiB
Vue

<template>
<Panel>
<div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-gray-600">
<h1 class="text-xl ml-2 text-gray-500">Actions</h1>
</div>
<div class="flex flex-col">
<Button
class="mr-auto mt-4"
color="blue"
start-icon="heal"
text="Repair repository"
:is-loading="isRepairingRepo"
@click="repairRepo"
/>
<Button
class="mr-auto mt-4"
color="red"
start-icon="trash"
text="Delete repository"
:is-loading="isDeletingRepo"
@click="deleteRepo"
/>
</div>
</Panel>
</template>
<script lang="ts">
import { defineComponent, inject, Ref } from 'vue';
import { useRouter } from 'vue-router';
import Button from '~/components/atomic/Button.vue';
import Panel from '~/components/layout/Panel.vue';
import useApiClient from '~/compositions/useApiClient';
import { useAsyncAction } from '~/compositions/useAsyncAction';
import useNotifications from '~/compositions/useNotifications';
import { Repo } from '~/lib/api/types';
export default defineComponent({
name: 'ActionsTab',
components: { Button, Panel },
setup() {
const apiClient = useApiClient();
const router = useRouter();
const notifications = useNotifications();
const repo = inject<Ref<Repo>>('repo');
const { doSubmit: repairRepo, isLoading: isRepairingRepo } = useAsyncAction(async () => {
if (!repo) {
throw new Error('Unexpected: Repo should be set');
}
await apiClient.repairRepo(repo.value.owner, repo.value.name);
notifications.notify({ title: 'Repository repaired', type: 'success' });
});
const { doSubmit: deleteRepo, isLoading: isDeletingRepo } = useAsyncAction(async () => {
if (!repo) {
throw new Error('Unexpected: Repo should be set');
}
// TODO use proper dialog
// eslint-disable-next-line no-alert, no-restricted-globals
if (!confirm('All data will be lost after this action!!!\n\nDo you really want to procceed?')) {
return;
}
await apiClient.deleteRepo(repo.value.owner, repo.value.name);
notifications.notify({ title: 'Repository deleted', type: 'success' });
await router.replace({ name: 'repos' });
});
return {
isRepairingRepo,
isDeletingRepo,
deleteRepo,
repairRepo,
};
},
});
</script>