Skip to content

Commit 59cd21d

Browse files
duncanmccleanduncanmcclean
authored
Move listings into page components (#65)
1 parent a83c4aa commit 59cd21d

File tree

10 files changed

+142
-216
lines changed

10 files changed

+142
-216
lines changed

‎resources/css/listings.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
========================================================================== */
33

44
/* Basically .title-index-field without the min/max width */
5-
.order-number-index-field {
6-
@apply line-clamp-2 flex items-center gap-2 text-sm font-medium hover:text-black dark:hover:text-white;
5+
.title-index-field {
6+
@apply text-sm line-clamp-2 inline-flex items-center gap-2 hover:text-black dark:hover:text-white;
77
}
88

99
.discount-status-index-field {

‎resources/js/components/discounts/Listing.vue‎

Lines changed: 0 additions & 54 deletions
This file was deleted.

‎resources/js/components/orders/Listing.vue‎

Lines changed: 0 additions & 48 deletions
This file was deleted.

‎resources/js/components/tax-classes/Listing.vue‎

Lines changed: 0 additions & 38 deletions
This file was deleted.

‎resources/js/components/tax-zones/Listing.vue‎

Lines changed: 0 additions & 38 deletions
This file was deleted.

‎resources/js/pages/discounts/Index.vue‎

Lines changed: 40 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<script setup>
2-
import { Head } from '@statamic/cms/inertia';
3-
import { Header, Button, DocsCallout } from '@statamic/cms/ui';
4-
import DiscountsListing from '../../components/discounts/Listing.vue';
2+
import { Head, Link } from '@statamic/cms/inertia';
3+
import { Header, Button, Listing, DropdownItem, DocsCallout } from '@statamic/cms/ui';
4+
import DiscountStatusIndicator from '../../components/discounts/DiscountStatusIndicator.vue';
5+
import { ref } from 'vue';
56
67
defineProps({
78
blueprint: Object,
@@ -10,6 +11,16 @@ defineProps({
1011
createUrl: String,
1112
actionUrl: String,
1213
});
14+
15+
const items = ref(null);
16+
const page = ref(null);
17+
const perPage = ref(null);
18+
19+
function requestComplete({ items: newItems, parameters }) {
20+
items.value = newItems;
21+
page.value = parameters.page;
22+
perPage.value = parameters.perPage;
23+
}
1324
</script>
1425

1526
<template>
@@ -27,5 +38,31 @@ defineProps({
2738
:action-url
2839
/>
2940

41+
<Listing
42+
ref="listing"
43+
:url="cp_url(`discounts`)"
44+
:columns
45+
:action-url
46+
sort-column="title"
47+
sort-direction="asc"
48+
preferences-prefix="cargo.discounts"
49+
:filters
50+
push-query
51+
@request-completed="requestComplete"
52+
>
53+
<template #cell-title="{ row: discount, isColumnVisible }">
54+
<Link class="title-index-field" :href="discount.edit_url">
55+
<DiscountStatusIndicator v-if="!isColumnVisible('status')" :status="discount.status" />
56+
<span v-text="discount.title" />
57+
</Link>
58+
</template>
59+
<template #cell-status="{ row: discount }">
60+
<DiscountStatusIndicator :status="discount.status" show-label :show-dot="false" />
61+
</template>
62+
<template #prepended-row-actions="{ row: discount }">
63+
<DropdownItem :text="__('Edit')" :href="discount.edit_url" icon="edit" v-if="discount.editable" />
64+
</template>
65+
</Listing>
66+
3067
<DocsCallout :topic="__('Discounts')" url="https://builtwithcargo.dev/docs/discounts" />
3168
</template>

‎resources/js/pages/orders/Edit.vue‎

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -20,19 +20,17 @@ defineProps({
2020
<template>
2121
<Head :title />
2222

23-
<div class="max-w-3xl mx-auto">
24-
<OrderPublishForm
25-
:blueprint
26-
:reference
27-
:initial-title="title"
28-
:initial-values="values"
29-
:initial-extra-values="extraValues"
30-
:initial-meta="meta"
31-
:initial-read-only="readOnly"
32-
:actions
33-
:item-actions
34-
:item-action-url
35-
:can-edit-blueprint
36-
/>
37-
</div>
23+
<OrderPublishForm
24+
:blueprint
25+
:reference
26+
:initial-title="title"
27+
:initial-values="values"
28+
:initial-extra-values="extraValues"
29+
:initial-meta="meta"
30+
:initial-read-only="readOnly"
31+
:actions
32+
:item-actions
33+
:item-action-url
34+
:can-edit-blueprint
35+
/>
3836
</template>

‎resources/js/pages/orders/Index.vue‎

Lines changed: 31 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script setup>
2-
import { Head } from '@statamic/cms/inertia';
3-
import { Header, Dropdown, DropdownMenu, DropdownItem, DocsCallout } from '@statamic/cms/ui';
4-
import OrdersListing from '../../components/orders/Listing.vue';
2+
import { Head, Link } from '@statamic/cms/inertia';
3+
import { Header, Dropdown, DropdownMenu, DropdownItem, Listing, DocsCallout } from '@statamic/cms/ui';
4+
import { ref } from 'vue';
55
66
defineProps({
77
blueprint: Object,
@@ -11,6 +11,16 @@ defineProps({
1111
editBlueprintUrl: String,
1212
canEditBlueprint: Boolean,
1313
});
14+
15+
const items = ref(null);
16+
const page = ref(null);
17+
const perPage = ref(null);
18+
19+
function requestComplete({ items: newItems, parameters }) {
20+
items.value = newItems;
21+
page.value = parameters.page;
22+
perPage.value = parameters.perPage;
23+
}
1424
</script>
1525

1626
<template>
@@ -29,13 +39,26 @@ defineProps({
2939
</Dropdown>
3040
</Header>
3141

32-
<OrdersListing
42+
<Listing
43+
:url="cp_url('orders')"
44+
:columns
45+
:action-url
3346
sort-column="order_number"
3447
sort-direction="desc"
35-
:columns="columns"
36-
:filters="filters"
37-
:action-url="actionUrl"
38-
/>
48+
preferences-prefix="cargo.orders"
49+
:filters
50+
push-query
51+
@request-completed="requestComplete"
52+
>
53+
<template #cell-order_number="{ row: order }">
54+
<Link class="order-number-index-field" :href="order.edit_url">
55+
<span v-text="`#${order.order_number}`" />
56+
</Link>
57+
</template>
58+
<template #prepended-row-actions="{ row: order }">
59+
<DropdownItem :text="__('Edit')" :href="order.edit_url" icon="edit" v-if="order.editable" />
60+
</template>
61+
</Listing>
3962

4063
<DocsCallout :topic="__('Orders')" url="https://builtwithcargo.dev/docs/orders" />
4164
</div>

0 commit comments

Comments
 (0)