mirror of
https://github.com/woodpecker-ci/woodpecker.git
synced 2024-06-13 10:59:37 +00:00
e2ab8a46ed
Some improvements to the Page Header and Tab UI. Original | New :--------:|:-------:  |   |   |   |   |  What? - Create a new Scaffold component, which includes the header and tabs required for a page. - Use this component to wrap all the views that have a header. - Ensures consistency in headers between different pages. - [x] Add support to use custom html/component in place of title (for repo page, pipeline page, etc) - [x] Add support of right icon buttons (for repo page, pipeline page, etc) - [x] Refactor tabs handling using compositions (useTabsProvider, useTabsClient) - [x] Make new header ui resposive
78 lines
2.1 KiB
Vue
78 lines
2.1 KiB
Vue
<template>
|
|
<Scaffold v-model:search="search">
|
|
<template #title>
|
|
{{ repoOwner }}
|
|
</template>
|
|
|
|
<template #titleActions>
|
|
<IconButton
|
|
v-if="orgPermissions.admin"
|
|
icon="settings"
|
|
:to="{ name: 'org-settings' }"
|
|
:title="$t('org.settings.settings')"
|
|
/>
|
|
</template>
|
|
|
|
<div class="space-y-4">
|
|
<ListItem
|
|
v-for="repo in searchedRepos"
|
|
:key="repo.id"
|
|
clickable
|
|
@click="$router.push({ name: 'repo', params: { repoName: repo.name, repoOwner: repo.owner } })"
|
|
>
|
|
<span class="text-color">{{ `${repo.name}` }}</span>
|
|
</ListItem>
|
|
</div>
|
|
<div v-if="(searchedRepos || []).length <= 0" class="text-center">
|
|
<span class="text-color m-auto">{{ $t('repo.user_none') }}</span>
|
|
</div>
|
|
</Scaffold>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { computed, defineComponent, onMounted, ref } from 'vue';
|
|
|
|
import IconButton from '~/components/atomic/IconButton.vue';
|
|
import ListItem from '~/components/atomic/ListItem.vue';
|
|
import Scaffold from '~/components/layout/scaffold/Scaffold.vue';
|
|
import useApiClient from '~/compositions/useApiClient';
|
|
import { useRepoSearch } from '~/compositions/useRepoSearch';
|
|
import { OrgPermissions } from '~/lib/api/types';
|
|
import RepoStore from '~/store/repos';
|
|
|
|
export default defineComponent({
|
|
name: 'ReposOwner',
|
|
|
|
components: {
|
|
ListItem,
|
|
IconButton,
|
|
Scaffold,
|
|
},
|
|
|
|
props: {
|
|
repoOwner: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
},
|
|
|
|
setup(props) {
|
|
const apiClient = useApiClient();
|
|
const repoStore = RepoStore();
|
|
// TODO: filter server side
|
|
const repos = computed(() => Object.values(repoStore.repos).filter((v) => v.owner === props.repoOwner));
|
|
const search = ref('');
|
|
const orgPermissions = ref<OrgPermissions>({ member: false, admin: false });
|
|
|
|
const { searchedRepos } = useRepoSearch(repos, search);
|
|
|
|
onMounted(async () => {
|
|
await repoStore.loadRepos();
|
|
orgPermissions.value = await apiClient.getOrgPermissions(props.repoOwner);
|
|
});
|
|
|
|
return { searchedRepos, search, orgPermissions };
|
|
},
|
|
});
|
|
</script>
|