2021-11-03 16:40:31 +00:00
|
|
|
<template>
|
2022-10-27 22:55:07 +00:00
|
|
|
<Scaffold v-model:search="search">
|
|
|
|
<template #title>
|
|
|
|
{{ $t('repositories') }}
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<template #titleActions>
|
|
|
|
<Button :to="{ name: 'repo-add' }" start-icon="plus" :text="$t('repo.add')" />
|
|
|
|
</template>
|
2021-11-03 16:40:31 +00:00
|
|
|
|
|
|
|
<div class="space-y-4">
|
|
|
|
<ListItem
|
|
|
|
v-for="repo in searchedRepos"
|
|
|
|
:key="repo.id"
|
2022-11-18 07:10:43 +00:00
|
|
|
:to="{ name: 'repo', params: { repoName: repo.name, repoOwner: repo.owner } }"
|
2021-11-03 16:40:31 +00:00
|
|
|
>
|
2022-06-17 00:00:31 +00:00
|
|
|
<span class="text-color">{{ `${repo.owner} / ${repo.name}` }}</span>
|
2021-11-03 16:40:31 +00:00
|
|
|
</ListItem>
|
|
|
|
</div>
|
2022-10-27 22:55:07 +00:00
|
|
|
</Scaffold>
|
2021-11-03 16:40:31 +00:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts">
|
|
|
|
import { computed, defineComponent, onMounted, ref } from 'vue';
|
|
|
|
|
|
|
|
import Button from '~/components/atomic/Button.vue';
|
|
|
|
import ListItem from '~/components/atomic/ListItem.vue';
|
2022-10-27 22:55:07 +00:00
|
|
|
import Scaffold from '~/components/layout/scaffold/Scaffold.vue';
|
2021-11-03 16:40:31 +00:00
|
|
|
import { useRepoSearch } from '~/compositions/useRepoSearch';
|
|
|
|
import RepoStore from '~/store/repos';
|
|
|
|
|
|
|
|
export default defineComponent({
|
|
|
|
name: 'Repos',
|
|
|
|
|
|
|
|
components: {
|
|
|
|
Button,
|
|
|
|
ListItem,
|
2022-10-27 22:55:07 +00:00
|
|
|
Scaffold,
|
2021-11-03 16:40:31 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
setup() {
|
|
|
|
const repoStore = RepoStore();
|
|
|
|
const repos = computed(() => Object.values(repoStore.repos));
|
|
|
|
const search = ref('');
|
|
|
|
|
|
|
|
const { searchedRepos } = useRepoSearch(repos, search);
|
|
|
|
|
|
|
|
onMounted(async () => {
|
|
|
|
await repoStore.loadRepos();
|
|
|
|
});
|
|
|
|
|
|
|
|
return { searchedRepos, search };
|
|
|
|
},
|
|
|
|
});
|
|
|
|
</script>
|