c3lf/c3lf-system-3
9
0
Fork 0
Code Issues 55 Pull requests Projects 2 Releases Wiki Activity Actions

show all item timestamps in timeline
All checks were successful
/ test (push) Successful in 2m32s
Details
/ deploy (push) Successful in 4m24s
Details

Browse source
This commit is contained in:
j3d1 2025-02-09 18:32:00 +01:00
parent 9e0540d133
commit 1568252112
7 changed files with 313 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

18
web/src/components/Timeline.vue
View file

@ -24,6 +24,15 @@
<span class="timeline-item-icon faded-icon" v-else-if="item.type === 'placement'">
<font-awesome-icon icon="archive"/>
</span>
<span class="timeline-item-icon faded-icon" v-else-if="item.type === 'created'">
<font-awesome-icon icon="archive"/>
</span>
<span class="timeline-item-icon faded-icon" v-else-if="item.type === 'returned'">
<font-awesome-icon icon="archive"/>
</span>
<span class="timeline-item-icon faded-icon" v-else-if="item.type === 'deleted'">
<font-awesome-icon icon="trash"/>
</span>
<span class="timeline-item-icon faded-icon" v-else>
<font-awesome-icon icon="pen"/>
</span>
@ -35,6 +44,9 @@
<TimelineShippingVoucher v-else-if="item.type === 'shipping_voucher'" :item="item"/>
<TimelinePlacement v-else-if="item.type === 'placement'" :item="item"/>
<TimelineRelatedTicket v-else-if="item.type === 'issue_relation'" :item="item"/>
<TimelineCreated v-else-if="item.type === 'created'" :item="item"/>
<TimelineReturned v-else-if="item.type === 'returned'" :item="item"/>
<TimelineDeleted v-else-if="item.type === 'deleted'" :item="item"/>
<p v-else>{{ item }}</p>
</li>
<li class="timeline-item">
@ -58,10 +70,16 @@ import TimelineShippingVoucher from "@/components/TimelineShippingVoucher.vue";
import AsyncButton from "@/components/inputs/AsyncButton.vue";
import TimelinePlacement from "@/components/TimelinePlacement.vue";
import TimelineRelatedTicket from "@/components/TimelineRelatedTicket.vue";
import TimelineCreated from "@/components/TimelineCreated.vue";
import TimelineReturned from "@/components/TimelineReturned.vue";
import TimelineDeleted from "@/components/TimelineDeleted.vue";
export default {
name: 'Timeline',
components: {
TimelineDeleted,
TimelineReturned,
TimelineCreated,
TimelineRelatedTicket,
TimelinePlacement,
TimelineShippingVoucher,

83
web/src/components/TimelineCreated.vue Normal file
View file

@ -0,0 +1,83 @@
<template>
<div class="timeline-item-description"><span>created by
<i class="avatar | small">
<font-awesome-icon icon="user"/>
</i>
<a href="#">$USER</a> at <time :datetime="timestamp">{{ timestamp }}</time></span>
</div>
</template>
<script>
import {mapState} from "vuex";
export default {
name: 'TimelineCreated',
props: {
'item': {
type: Object,
required: true
}
},
computed: {
'timestamp': function () {
return new Date(this.item.timestamp).toLocaleString();
},
}
};
</script>
<style scoped>
a {
color: inherit;
}
.timeline-item-description {
display: flex;
padding-top: 6px;
gap: 8px;
color: var(--gray);
img {
flex-shrink: 0;
}
a {
/*color: var(--c-grey-500);*/
font-weight: 500;
text-decoration: none;
&:hover,
&:focus {
outline: 0; /* Don't actually do this */
color: var(--info);
}
}
}
.avatar {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
overflow: hidden;
aspect-ratio: 1 / 1;
flex-shrink: 0;
width: 40px;
height: 40px;
&.small {
width: 28px;
height: 28px;
}
img {
object-fit: cover;
}
}
</style>

83
web/src/components/TimelineDeleted.vue Normal file
View file

@ -0,0 +1,83 @@
<template>
<div class="timeline-item-description"><span>marked deleted by
<i class="avatar | small">
<font-awesome-icon icon="user"/>
</i>
<a href="#">$USER</a> at <time :datetime="timestamp">{{ timestamp }}</time></span>
</div>
</template>
<script>
import {mapState} from "vuex";
export default {
name: 'TimelineDeleted',
props: {
'item': {
type: Object,
required: true
}
},
computed: {
'timestamp': function () {
return new Date(this.item.timestamp).toLocaleString();
},
}
};
</script>
<style scoped>
a {
color: inherit;
}
.timeline-item-description {
display: flex;
padding-top: 6px;
gap: 8px;
color: var(--gray);
img {
flex-shrink: 0;
}
a {
/*color: var(--c-grey-500);*/
font-weight: 500;
text-decoration: none;
&:hover,
&:focus {
outline: 0; /* Don't actually do this */
color: var(--info);
}
}
}
.avatar {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
overflow: hidden;
aspect-ratio: 1 / 1;
flex-shrink: 0;
width: 40px;
height: 40px;
&.small {
width: 28px;
height: 28px;
}
img {
object-fit: cover;
}
}
</style>

83
web/src/components/TimelineReturned.vue Normal file
View file

@ -0,0 +1,83 @@
<template>
<div class="timeline-item-description"><span>marked returned by
<i class="avatar | small">
<font-awesome-icon icon="user"/>
</i>
<a href="#">$USER</a> at <time :datetime="timestamp">{{ timestamp }}</time></span>
</div>
</template>
<script>
import {mapState} from "vuex";
export default {
name: 'TimelineReturned',
props: {
'item': {
type: Object,
required: true
}
},
computed: {
'timestamp': function () {
return new Date(this.item.timestamp).toLocaleString();
},
}
};
</script>
<style scoped>
a {
color: inherit;
}
.timeline-item-description {
display: flex;
padding-top: 6px;
gap: 8px;
color: var(--gray);
img {
flex-shrink: 0;
}
a {
/*color: var(--c-grey-500);*/
font-weight: 500;
text-decoration: none;
&:hover,
&:focus {
outline: 0; /* Don't actually do this */
color: var(--info);
}
}
}
.avatar {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
overflow: hidden;
aspect-ratio: 1 / 1;
flex-shrink: 0;
width: 40px;
height: 40px;
&.small {
width: 28px;
height: 28px;
}
img {
object-fit: cover;
}
}
</style>