Skip to content

Commit b14297f

Browse files
ryanmitchellryanmitchell
committed
Update field types, switch to vite
1 parent 8ebad49 commit b14297f

File tree

12 files changed

+122
-111
lines changed

12 files changed

+122
-111
lines changed

‎composer.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
"require": {
1414
"pixelfear/composer-dist-plugin": "^0.1",
1515
"shopify/shopify-api": "^5.1",
16-
"statamic/cms": "^5.0 || ^6.0"
16+
"statamic/cms": "dev-master"
1717
},
1818
"require-dev": {
1919
"jasonmccreary/laravel-test-assertions": "^2.0",

‎mix-manifest.json‎

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

‎package.json‎

Lines changed: 13 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,15 @@
11
{
2-
"private": true,
3-
"scripts": {
4-
"dev": "npm run development",
5-
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
6-
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
7-
"watch-poll": "npm run watch -- --watch-poll",
8-
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
9-
"prod": "npm run production",
10-
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
11-
},
12-
"devDependencies": {
13-
"cross-env": "^5.1",
14-
"laravel-mix": "^5.0.0",
15-
"vue": "^2.6.0",
16-
"vue-template-compiler": "^2.6.14"
17-
},
18-
"dependencies": {
19-
"@shopify/storefront-api-client": "^1.0.2",
20-
"axios": "^0.21.1"
21-
}
2+
"scripts": {
3+
"dev": "vite build --watch",
4+
"build": "vite build"
5+
},
6+
"dependencies": {
7+
"@statamic/cms": "file:./vendor/statamic/cms/resources/js/package",
8+
"@shopify/storefront-api-client": "^1.0.2",
9+
"axios": "^1.11.0"
10+
},
11+
"devDependencies": {
12+
"laravel-vite-plugin": "^1.2.0",
13+
"vite": "^6.3.4"
14+
}
2215
}

‎resources/js/components/ImportButton.vue‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div class="flex items-center">
3-
<button type="button" class="btn-primary" @click="fetch()">Import All</button>
4-
<p class="ml-2 text-sm" :class="messageColor" v-if="message">{{ message }}</p>
3+
<ui-button type="button" @click="fetch()" :disabled="processing">{{ processing ? 'Please wait' : 'Run import' }}</ui-button>
4+
<ui-error-message class="ml-2" v-if="message">{{ message }}</ui-error-message>
55
</div>
66
</template>
77

@@ -16,29 +16,27 @@ export default {
1616
data() {
1717
return {
1818
message: null,
19-
messageColor: 'text-black'
19+
processing: false,
2020
}
2121
},
2222
2323
methods: {
2424
fetch() {
25-
this.message = 'working....'
26-
this.messageColor = 'text-black'
25+
this.message = '';
26+
this.processing = true;
2727
2828
axios.get(this.url)
2929
.then(res => {
30-
console.log(res)
3130
this.message = res.data.message
32-
this.messageColor = 'text-green'
3331
3432
setTimeout(() => this.message = null, 3000)
3533
})
3634
.catch(err => {
3735
this.message = 'Something went wrong. Please try again.'
38-
this.messageColor = 'text-red'
3936
4037
setTimeout(() => this.message = null, 5000)
4138
})
39+
.finally(() => this.processing = false)
4240
}
4341
}
4442
}

‎resources/js/components/ImportProductButton.vue‎

Lines changed: 21 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,21 @@
1-
<template>
1+
<template>
22
<form @submit.prevent="fetchProduct()" >
3-
<p class="mb-1 max-w-sm"><v-select
4-
placeholder="Select a product"
5-
:options="products"
6-
:get-option-key="(option) => option.product_id"
7-
:get-option-label="(option) => option.title"
8-
:searchable="true"
9-
@input="input"
10-
/></p>
3+
<div class="mb-1 max-w-sm">
4+
<ui-combobox
5+
class="w-full"
6+
clearable="true"
7+
:label="__('Select a product')"
8+
v-model="selectedProduct"
9+
optionLabel="title"
10+
:options="products"
11+
optionValue="product_id"
12+
searchable="true"
13+
/>
14+
</div>
1115

1216
<div class="flex items-center">
13-
<button type="submit" class="btn-primary" >Import Product</button>
14-
<p class="ml-2 text-sm" :class="messageColor" v-if="message">{{ message }}</p>
17+
<ui-button type="button" @click="fetch()" :disabled="processing">{{ processing ? 'Please wait' : 'Import product' }}</ui-button>
18+
<ui-error-message class="ml-2" v-if="message">{{ message }}</ui-error-message>
1519
</div>
1620
</form>
1721
</template>
@@ -28,10 +32,10 @@ export default {
2832
2933
data() {
3034
return {
31-
products: [],
3235
message: null,
33-
messageColor: 'text-black',
34-
selectedProduct: null
36+
selectedProduct: null,
37+
processing: false,
38+
products: [],
3539
}
3640
},
3741
@@ -47,25 +51,20 @@ export default {
4751
})
4852
},
4953
50-
input(value) {
51-
this.selectedProduct = value
52-
},
53-
5454
fetchProduct() {
55-
this.message = 'working....'
56-
this.messageColor = 'text-black'
55+
this.message = '';
56+
this.processing = true;
5757
5858
axios.get(`${this.url}?product=${this.selectedProduct.product_id}`)
5959
.then(res => {
6060
this.message = res.data.message
61-
this.messageColor = 'text-green'
6261
6362
setTimeout(() => this.message = null, 3000)
6463
}).catch(err => {
6564
this.message = 'Something went wrong. Please try again.'
66-
this.messageColor = 'text-red'
6765
setTimeout(() => this.message = null, 5000)
6866
})
67+
.finally(() => this.processing = false)
6968
}
7069
}
7170
}

‎resources/js/components/VariantForm.vue‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
1-
<template>
2-
<stack name="Form Stack" :narrow="narrow" @closed="close">
3-
<div class="h-full overflow-auto p-6 bg-gray-300">
1+
<template>
2+
<stack name="variant-form-stack" :narrow="narrow" @closed="close">
3+
<div class="h-full overflow-auto p-6 bg-white">
44
<header class="-mt-2 mb-3 flex justify-end">
55
<button type="button" class="btn-close" @click="close">×</button>
66
</header>
7-
<publish-form
8-
name="Form Stack publish form"
7+
<ui-publish-form
8+
name="variant-publish-form"
99
:title="title"
10-
:action="action"
11-
:method="method"
10+
:submit-url="action"
11+
:submit-method="method"
1212
:blueprint="blueprint"
13-
:meta="meta"
14-
:values="values"
13+
:initial-meta="meta"
14+
:initial-values="values"
1515
@saved="saved"
1616
class="max-w-3xl mx-auto"
1717
>
18-
</publish-form>
18+
</ui-publish-form>
1919
</div>
2020
</stack>
2121
</template>

‎resources/js/cp.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import Variants from './fieldtypes/Variants.vue'
22
import DisabledText from './fieldtypes/DisabledText.vue'
3-
import ImportProductButton from './components/ImportProductButton'
4-
import ImportButton from './components/ImportButton'
3+
import ImportProductButton from './components/ImportProductButton.vue'
4+
import ImportButton from './components/ImportButton.vue'
55

66
Statamic.booting(() => {
77
Statamic.$components.register('variants-fieldtype', Variants)
@@ -10,4 +10,4 @@ Statamic.booting(() => {
1010
// Dashboard Stuff
1111
Statamic.$components.register('shopify-import-product-button', ImportProductButton)
1212
Statamic.$components.register('shopify-import-button', ImportButton)
13-
})
13+
});

‎resources/js/fieldtypes/DisabledText.vue‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
<template>
22
<div>
3-
<input type="text" :value="value" class="input-text" disabled />
3+
<ui-input
4+
:value="value"
5+
disabled
6+
/>
47
</div>
58
</template>
69

710
<script>
11+
import { FieldtypeMixin as Fieldtype } from '@statamic/cms';
12+
813
export default {
914
mixins: [Fieldtype],
1015
};

‎resources/js/fieldtypes/Variants.vue‎

Lines changed: 40 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,53 @@
11
<template>
22
<div class="flex">
3-
<section class="flex-grow border rounded">
4-
<table class="data-table" v-if="variants">
5-
<thead>
6-
<tr>
7-
<th>Title</th>
8-
<th>SKU</th>
9-
<th>Price</th>
10-
<th>Stock</th>
11-
</tr>
12-
</thead>
13-
<tbody>
14-
<tr v-for="(variant, index) in variants" :key="index" class="cursor-pointer" @click="openEditVariantStack(variant)">
15-
<td class="text-base">
16-
{{ variant.title }}
17-
</td>
18-
<td class="text-sm">
19-
{{ variant.sku }}
20-
</td>
21-
<td class="text-sm">
22-
{{ currencyFormat(variant.price) }}
23-
</td>
24-
<td class="text-sm">
25-
{{ variant.inventory_quantity }}
26-
</td>
27-
</tr>
28-
</tbody>
29-
</table>
30-
<p v-else class="p-1 text-sm">To get started, add some variants to products in Shopify.</p>
31-
</section>
3+
<ui-table class="w-full" v-if="variants">
4+
<ui-table-columns>
5+
<ui-table-column>{{ __('Title') }}</ui-table-column>
6+
<ui-table-column>{{ __('SKU') }}</ui-table-column>
7+
<ui-table-column>{{ __('Price') }}</ui-table-column>
8+
<ui-table-column>{{ __('Stock') }}</ui-table-column>
9+
<ui-table-column></ui-table-column>
10+
</ui-table-columns>
11+
<ui-table-row v-for="(variant, index) in variants" :key="index">
12+
<ui-table-cell>
13+
{{ variant.title }}
14+
</ui-table-cell>
15+
<ui-table-cell>
16+
{{ variant.sku }}
17+
</ui-table-cell>
18+
<ui-table-cell>
19+
{{ currencyFormat(variant.price) }}
20+
</ui-table-cell>
21+
<ui-table-cell>
22+
{{ variant.inventory_quantity }}
23+
</ui-table-cell>
24+
<ui-table-cell>
25+
<ui-button @click="openEditVariantStack(variant)" size="sm">Edit</ui-button>
26+
</ui-table-cell>
27+
</ui-table-row>
28+
</ui-table>
29+
30+
<ui-description v-else>To get started, add some variants to products in Shopify.</ui-description>
3231

3332
<variant-form
34-
name="variant stack"
35-
v-if="showVariantStack"
36-
:action="stackAction"
37-
title="Edit Variant"
38-
:blueprint="variantBlueprint"
39-
:meta="variantMeta"
40-
:method="stackMethod"
41-
:values="stackValues"
42-
@closed="showVariantStack = false"
43-
@saved="closeVariantStack"
33+
name="variant stack"
34+
v-if="showVariantStack"
35+
:action="stackAction"
36+
title="Edit Variant"
37+
:blueprint="variantBlueprint"
38+
:meta="variantMeta"
39+
:method="stackMethod"
40+
:values="stackValues"
41+
@closed="showVariantStack = false"
42+
@saved="closeVariantStack"
4443
/>
4544
</div>
4645
</template>
4746

4847
<script>
4948
import axios from 'axios'
50-
import VariantForm from '../components/VariantForm'
49+
import { FieldtypeMixin as Fieldtype } from '@statamic/cms';
50+
import VariantForm from '../components/VariantForm.vue'
5151
5252
export default {
5353
mixins: [Fieldtype],

‎src/ServiceProvider.php‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,14 @@ class ServiceProvider extends AddonServiceProvider
4848
Tags\Shopify::class,
4949
];
5050

51+
protected $vite = [
52+
'publicDirectory' => 'dist',
53+
'hotFile' => 'vendor/shopify/hot',
54+
'input' => [
55+
'resources/js/cp.js',
56+
],
57+
];
58+
5159
public function boot()
5260
{
5361
parent::boot();

0 commit comments

Comments
 (0)