80 lines
2.7 KiB
Vue
80 lines
2.7 KiB
Vue
<template>
|
|
<div>
|
|
<div class="px-3 py-4 border-b border-grey-light flex" :class="{'bg-yellow-lightest': open}">
|
|
<div class="flex-none mr-3">
|
|
<svg v-if="task.loading" class="h-5 w-5 text-grey fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#feedback__loading"></use></svg>
|
|
<svg v-if="!task.loading && task.success" class="h-5 w-5 text-green fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#feedback__success-circle"></use></svg>
|
|
<svg v-if="!task.loading && !task.success" class="h-5 w-5 text-red-dark fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#feedback__warning"></use></svg>
|
|
</div>
|
|
|
|
<div class="flex-1">
|
|
<div class="text-sm font-bold mb-2">{{ task.text }}</div>
|
|
<div class="text-grey-darker text-2xs">{{ task.times.display }}</div>
|
|
</div>
|
|
|
|
<div>
|
|
<button type="button" @click="open = !open">
|
|
<svg v-if="!open" class="h-5 w-5 text-grey-darker fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#alpha__chevron"></use></svg>
|
|
<svg v-else class="h-5 w-5 text-grey-darker fill-current" style="transform: rotate(180deg)" role="presentation"><use xlink:href="/img/icons.symbol.svg#alpha__chevron"></use></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-4 bg-grey-darker text-white antialiased" v-show="open">
|
|
<div class="lg:flex lg:flex-wrap -mx-4 -mb-4">
|
|
<div class="px-4 mb-4">
|
|
<div class="text-xs uppercase mb-1">Task ID</div>
|
|
<div class="text-sm font-bold">12345678</div>
|
|
</div>
|
|
|
|
<div class="px-4 mb-4 lg:w-1/6 lg:flex-none">
|
|
<div class="text-xs uppercase mb-1">User</div>
|
|
<div class="text-sm font-bold truncate">{{ task.user }}</div>
|
|
</div>
|
|
|
|
<div class="px-4 mb-4 lg:w-1/4 lg:flex-none">
|
|
<div class="text-xs uppercase mb-1">Started</div>
|
|
<div class="text-sm font-bold truncate">{{ task.times.started }}</div>
|
|
</div>
|
|
|
|
<div class="px-4 mb-4 lg:w-1/4 lg:flex-none">
|
|
<div class="text-xs uppercase mb-1">Completed</div>
|
|
<div class="text-sm font-bold truncate">{{ task.times.completed }}</div>
|
|
</div>
|
|
|
|
<div class="px-4 mb-4">
|
|
<div class="text-xs uppercase mb-1">Status</div>
|
|
<div class="text-sm font-bold">{{ status }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
task: Object,
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
open: false,
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
status: function () {
|
|
if (this.task.loading) {
|
|
return 'In progress'
|
|
}
|
|
|
|
if (!this.task.success) {
|
|
return 'Failed'
|
|
}
|
|
|
|
return 'Completed'
|
|
}
|
|
}
|
|
}
|
|
</script>
|