116 lines
4.0 KiB
Vue
116 lines
4.0 KiB
Vue
<script setup>
|
|
import { computed } from 'vue';
|
|
import { date } from 'quasar';
|
|
import VnPaginate from 'src/components/ui/VnPaginate.vue';
|
|
import VnAvatar from '../ui/VnAvatar.vue';
|
|
import VnUserLink from 'src/components/ui/VnUserLink.vue';
|
|
|
|
const $props = defineProps({
|
|
url: { type: String, default: null },
|
|
where: { type: Object, default: () => {} },
|
|
});
|
|
|
|
const filter = computed(() => {
|
|
return {
|
|
fields: ['smsFk'],
|
|
include: {
|
|
relation: 'sms',
|
|
scope: {
|
|
fields: [
|
|
'senderFk',
|
|
'sender',
|
|
'destination',
|
|
'message',
|
|
'statusCode',
|
|
'status',
|
|
'created',
|
|
],
|
|
include: {
|
|
relation: 'sender',
|
|
scope: {
|
|
fields: ['name'],
|
|
},
|
|
},
|
|
},
|
|
},
|
|
...{ where: $props.where },
|
|
};
|
|
});
|
|
|
|
function formatNumber(number) {
|
|
if (number.length <= 10) return number;
|
|
return number.slice(0, 4) + ' ' + number.slice(4);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="column items-center">
|
|
<div class="list">
|
|
<VnPaginate
|
|
:data-key="$props.url"
|
|
:url="$props.url"
|
|
:filter="filter"
|
|
order="smsFk DESC"
|
|
:offset="100"
|
|
:limit="5"
|
|
auto-load
|
|
>
|
|
<template #body="{ rows }">
|
|
<QCard
|
|
flat
|
|
bordered
|
|
class="card q-pa-md q-mb-sm smsCard"
|
|
v-for="row of rows"
|
|
:key="row.smsFk"
|
|
>
|
|
<QItem>
|
|
<QItemSection side top>
|
|
<VnUserLink :worker-id="row.sms?.senderFk">
|
|
<template #link>
|
|
<VnAvatar
|
|
:worker-id="row.sms?.senderFk"
|
|
class="cursor-pointer"
|
|
:title="row.sms?.sender?.name"
|
|
/>
|
|
</template>
|
|
</VnUserLink>
|
|
</QItemSection>
|
|
<QSeparator />
|
|
<QItemSection>
|
|
<QItemLabel caption>{{
|
|
formatNumber(row.sms.destination)
|
|
}}</QItemLabel>
|
|
<QItemLabel>{{ row.sms.message }}</QItemLabel>
|
|
</QItemSection>
|
|
<QItemSection side>
|
|
<QItemLabel caption>{{
|
|
date.formatDate(
|
|
row.sms.created,
|
|
'YYYY-MM-DD HH:mm:ss'
|
|
)
|
|
}}</QItemLabel>
|
|
<QItemLabel class="row center">
|
|
<QChip
|
|
:color="
|
|
row.sms.status == 'OK'
|
|
? 'positive'
|
|
: 'negative'
|
|
"
|
|
>
|
|
{{ row.sms.status }}
|
|
</QChip>
|
|
</QItemLabel>
|
|
</QItemSection>
|
|
</QItem>
|
|
</QCard>
|
|
</template>
|
|
</VnPaginate>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
.q-item__section--side {
|
|
align-items: center;
|
|
}
|
|
</style>
|