opdavies/rebuilding-uis
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Extract task list, make it expandable

Browse source
This commit is contained in:
Oliver Davies 2018-12-26 01:17:10 +00:00
parent 7d60b4d150
commit b613feba11
5 changed files with 259 additions and 78 deletions
Download patch file Download diff file Expand all files Collapse all files

93
src/components/TaskLog.vue
View file

@ -5,23 +5,8 @@
</div>
<div>
<ul class="list-reset bg-white">
<li v-for="item in items" :key="item.text" class="px-3 py-4 border-b border-grey-light flex">
<div class="flex-none mr-3">
<svg v-if="item.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="!item.loading && item.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="!item.loading && !item.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">{{ item.text }}</div>
<div class="text-grey-darker text-2xs">{{ item.date }}</div>
</div>
<div>
<button type="button">
<svg class="h-5 w-5 text-grey-darker fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#alpha__chevron"></use></svg>
</button>
</div>
<li v-for="task in reversedTasks" :key="task.text">
<task-log-item :task="task"></task-log-item>
</li>
</ul>
</div>
@ -29,65 +14,23 @@
</template>
<script>
import _ from 'lodash'
import TaskLogItem from '@/components/TaskLogItem'
export default {
data() {
return {
items: [
{
text: 'Commit: 8056d51 Add production URLs as settings refs/heads/master',
date: 'Dec 21, 2018 1:34:13 PM UTC +0000',
loading: true,
success: false,
},
{
text: 'Commit: 96ac151 Fix syntax refs/heads/master',
date: 'Dec 21, 2018 1:23:43 PM UTC +0000',
loading: false,
success: true,
},
{
text: 'Commit: 716e178 Configure stage_file_proxy refs/heads/master',
date: 'Dec 21, 2018 1:18:25 PM UTC +0000',
loading: false,
success: true,
},
{
text: 'Commit: 398945c Ensure stage_file_proxy is enabled refs/heads/master',
date: 'Dec 21, 2018 1:09:19 PM UTC +0000',
loading: false,
success: true,
},
{
text: 'Commit: e75c4a3 Merge branch \'voucher-code-bug-34\' refs/heads/master',
date: 'Dec 21, 2018 12:55:49 PM UTC +0000',
success: false,
},
{
text: 'Deploy the code reference tags/2018-12-19 to test',
date: 'Dec 20, 2018 10:25:07 PM UTC +0000',
success: true,
},
{
text: 'Deploy the code reference master to dev',
date: 'Dec 20, 2018 10:13:48 PM UTC +0000',
success: true,
},
{
text: 'Deploy code from test to prod',
date: 'Dec 19, 2018 3:55:29 PM UTC +0000',
success: true,
},
{
text: 'Commit: 9688c41 Update IP address refs/heads/master',
date: 'Dec 19, 2018 3:50:31 PM UTC +0000',
success: true,
},
{
text: 'Commit: fdac923 Merge branch \'update-password-policy\' refs/heads/master',
date: 'Dec 19, 2018 3:48:29 PM UTC +0000',
success: true,
},
],
components: {
TaskLogItem,
},
props: {
tasks: Array,
},
computed: {
reversedTasks: function () {
let tasks = this.tasks
return _.reverse(tasks)
}
}
}