woodpecker/web/src/components/build-feed/BuildFeedItem.vue
Anbraten 9d17e26671
Update build layout (#678)
* show yml config of build in UI

* fix after merge

* improve build configs

* fix approve & decline build

* improve build layout

* undo un-related changes

* fix type

* move icon back to right side

Co-authored-by: 6543 <6543@obermui.de>
2022-01-09 02:21:30 +01:00

49 lines
1.4 KiB
Vue

<template>
<div v-if="build" class="flex text-gray-600 dark:text-gray-500 w-full">
<BuildStatusIcon :build="build" class="flex items-center" />
<div class="flex flex-col ml-4 min-w-0">
<span class="underline">{{ build.owner }} / {{ build.name }}</span>
<span class="whitespace-nowrap overflow-hidden overflow-ellipsis">{{ message }}</span>
<div class="flex flex-col mt-2">
<div class="flex space-x-2 items-center">
<Icon name="since" />
<span>{{ since }}</span>
</div>
<div class="flex space-x-2 items-center">
<Icon name="duration" />
<span>{{ duration }}</span>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, PropType, toRef } from 'vue';
import Icon from '~/components/atomic/Icon.vue';
import BuildStatusIcon from '~/components/repo/build/BuildStatusIcon.vue';
import useBuild from '~/compositions/useBuild';
import { BuildFeed } from '~/lib/api/types';
export default defineComponent({
name: 'BuildFeedItem',
components: { BuildStatusIcon, Icon },
props: {
build: {
type: Object as PropType<BuildFeed>,
required: true,
},
},
setup(props) {
const build = toRef(props, 'build');
const { since, duration, message } = useBuild(build);
return { since, duration, message };
},
});
</script>