108 lines
2.3 KiB
Vue
108 lines
2.3 KiB
Vue
<template>
|
|
<div class="flex h-full flex-col">
|
|
<div class="sticky top-0 z-10 shrink-0">
|
|
<Header>
|
|
<Breadcrumbs
|
|
:items="[{ label: object.list.title, route: object.list.route }]"
|
|
/>
|
|
</Header>
|
|
</div>
|
|
<div class="p-5">
|
|
<AlertUnpaidInvoices
|
|
class="mb-5"
|
|
v-if="hasUnpaidInvoices > 0"
|
|
:amount="hasUnpaidInvoices"
|
|
/>
|
|
<ObjectList :options="listOptions" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Header from '../components/Header.vue';
|
|
import ObjectList from '../components/ObjectList.vue';
|
|
import { Breadcrumbs, Button, Dropdown, TextInput } from 'jingrow-ui';
|
|
import { getObject } from '../objects';
|
|
import { defineAsyncComponent } from 'vue';
|
|
import dayjs from '../utils/dayjs';
|
|
import AlertBanner from '../components/AlertBanner.vue';
|
|
|
|
export default {
|
|
components: {
|
|
Header,
|
|
Breadcrumbs,
|
|
ObjectList,
|
|
Button,
|
|
Dropdown,
|
|
TextInput,
|
|
AlertBanner,
|
|
AlertUnpaidInvoices: defineAsyncComponent(() =>
|
|
import('../components/AlertUnpaidInvoices.vue')
|
|
)
|
|
},
|
|
props: {
|
|
objectType: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
},
|
|
methods: {
|
|
getRoute(row) {
|
|
return {
|
|
name: `${this.object.pagetype} Detail`,
|
|
params: {
|
|
name: row.name
|
|
}
|
|
};
|
|
}
|
|
},
|
|
computed: {
|
|
object() {
|
|
return getObject(this.objectType);
|
|
},
|
|
listOptions() {
|
|
return {
|
|
...this.object.list,
|
|
pagetype: this.object.pagetype,
|
|
route: this.object.detail ? this.getRoute : null
|
|
};
|
|
},
|
|
isCardExpired() {
|
|
if (this.$team.pg.payment_method?.expiry_year < dayjs().year()) {
|
|
return true;
|
|
} else if (
|
|
this.$team.pg.payment_method?.expiry_year == dayjs().year() &&
|
|
this.$team.pg.payment_method?.expiry_month < dayjs().month() + 1
|
|
) {
|
|
return true;
|
|
} else {
|
|
return false;
|
|
}
|
|
},
|
|
banner() {
|
|
return this.$resources.banner.pg;
|
|
},
|
|
isMandateNotSet() {
|
|
return !this.$team.pg?.payment_method?.stripe_mandate_id;
|
|
},
|
|
hasUnpaidInvoices() {
|
|
return this.$resources.getAmountDue.data;
|
|
}
|
|
},
|
|
resources: {
|
|
banner() {
|
|
return {
|
|
type: 'document',
|
|
pagetype: 'Dashboard Banner',
|
|
name: 'Dashboard Banner'
|
|
};
|
|
},
|
|
getAmountDue() {
|
|
return {
|
|
url: 'jcloud.api.billing.total_unpaid_amount',
|
|
auto: true
|
|
};
|
|
}
|
|
}
|
|
};
|
|
</script> |