initial commit
This commit is contained in:
@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<DynamicForm
|
||||
class="space-y-2 p-6 bg-white shadow-lg rounded-lg max-w-md"
|
||||
:formInputs="updatedFormInputs"
|
||||
:formTitle="formTitleComputed"
|
||||
submit-label="Submit"
|
||||
@send="handleSubmit"
|
||||
:customClasses="{
|
||||
label: 'text-lg text-purple-700',
|
||||
input: {
|
||||
text: 'bg-gray-100 border-purple-500',
|
||||
select: 'bg-white text-purple-600',
|
||||
'multi-input': 'border-dashed'
|
||||
},
|
||||
button: 'bg-purple-600 hover:bg-purple-800',
|
||||
description: 'text-sm italic'
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { DynamicForm } from '@masonitestudios/dynamic-vue';
|
||||
import { PeachService } from '@/generated';
|
||||
|
||||
// For update forms, we allow passing in initial values.
|
||||
// These values will be mapped onto the defaultValue field of each form input.
|
||||
const props = defineProps<{
|
||||
formTitle?: string,
|
||||
// Pass in an object with initial field values for update requests.
|
||||
initialValues?: Record<string, any>
|
||||
}>();
|
||||
|
||||
const emit = defineEmits(['send']);
|
||||
|
||||
const formTitleComputed = computed(() => props.formTitle || 'peachCreateProductRequest');
|
||||
|
||||
// The formInputs array was generated from our Go code.
|
||||
const formInputs = [
|
||||
{
|
||||
id: 'description',
|
||||
label: 'Description',
|
||||
type: 'text',
|
||||
placeholder: '',
|
||||
required: false,
|
||||
defaultValue: '',
|
||||
},
|
||||
{
|
||||
id: 'price',
|
||||
label: 'Price',
|
||||
type: 'number',
|
||||
placeholder: '',
|
||||
required: false,
|
||||
defaultValue: '',
|
||||
},
|
||||
{
|
||||
id: 'name',
|
||||
label: 'Name',
|
||||
type: 'text',
|
||||
placeholder: '',
|
||||
required: false,
|
||||
defaultValue: '',
|
||||
},
|
||||
];
|
||||
|
||||
// Create a computed property that maps initialValues onto each form input's defaultValue.
|
||||
const updatedFormInputs = computed(() => {
|
||||
return formInputs.map(input => {
|
||||
// If props.initialValues is passed in and contains a value for input.id, use it.
|
||||
// Otherwise, fall back to the defaultValue generated (or an empty string).
|
||||
return {
|
||||
...input,
|
||||
defaultValue: (props.initialValues && props.initialValues[input.id]) ?? input.defaultValue ?? ''
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function handleSubmit(payload: any) {
|
||||
// Wrap the form values into a "payload" key.
|
||||
const requestData = { payload: payload };
|
||||
PeachService.peachCreateProduct(requestData)
|
||||
.then(response => {
|
||||
// Emit an event with the payload after a successful call.
|
||||
emit('send', requestData.payload);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Service error:', error);
|
||||
});
|
||||
}
|
||||
</script>
|
@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<DynamicForm
|
||||
class="space-y-2 p-6 bg-white shadow-lg rounded-lg max-w-md"
|
||||
:formInputs="updatedFormInputs"
|
||||
:formTitle="formTitleComputed"
|
||||
submit-label="Submit"
|
||||
@send="handleSubmit"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { DynamicForm } from '@masonitestudios/dynamic-vue';
|
||||
import { PeachService } from '@/generated';
|
||||
|
||||
// For update forms, we allow passing in initial values.
|
||||
// These values will be mapped onto the defaultValue field of each form input.
|
||||
const props = defineProps<{
|
||||
formTitle?: string,
|
||||
// Pass in an object with initial field values for update requests.
|
||||
initialValues?: Record<string, any>
|
||||
}>();
|
||||
|
||||
const emit = defineEmits(['send']);
|
||||
|
||||
const formTitleComputed = computed(() => props.formTitle || 'peachCreateUserRequest');
|
||||
|
||||
// The formInputs array was generated from our Go code.
|
||||
const formInputs = [
|
||||
{
|
||||
id: 'username',
|
||||
label: 'Username',
|
||||
type: 'text',
|
||||
placeholder: '',
|
||||
required: false,
|
||||
defaultValue: '',
|
||||
},
|
||||
{
|
||||
id: 'bio',
|
||||
label: 'Bio',
|
||||
type: 'text',
|
||||
placeholder: '',
|
||||
required: false,
|
||||
defaultValue: '',
|
||||
},
|
||||
];
|
||||
|
||||
// Create a computed property that maps initialValues onto each form input's defaultValue.
|
||||
const updatedFormInputs = computed(() => {
|
||||
return formInputs.map(input => {
|
||||
// If props.initialValues is passed in and contains a value for input.id, use it.
|
||||
// Otherwise, fall back to the defaultValue generated (or an empty string).
|
||||
return {
|
||||
...input,
|
||||
defaultValue: (props.initialValues && props.initialValues[input.id]) ?? input.defaultValue ?? ''
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function handleSubmit(payload: any) {
|
||||
// Wrap the form values into a "payload" key.
|
||||
const requestData = { payload: payload };
|
||||
PeachService.peachCreateUser(requestData)
|
||||
.then(response => {
|
||||
// Emit an event with the payload after a successful call.
|
||||
emit('send', requestData.payload);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Service error:', error);
|
||||
});
|
||||
}
|
||||
</script>
|
@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<DynamicForm
|
||||
class="space-y-2 p-6 bg-white shadow-lg rounded-lg max-w-md"
|
||||
:formInputs="updatedFormInputs"
|
||||
:formTitle="formTitleComputed"
|
||||
submit-label="Submit"
|
||||
@send="handleSubmit"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { DynamicForm } from '@masonitestudios/dynamic-vue';
|
||||
import { PeachService } from '@/generated';
|
||||
|
||||
// For update forms, we allow passing in initial values.
|
||||
// These values will be mapped onto the defaultValue field of each form input.
|
||||
const props = defineProps<{
|
||||
formTitle?: string,
|
||||
// Pass in an object with initial field values for update requests.
|
||||
initialValues?: Record<string, any>
|
||||
}>();
|
||||
|
||||
const emit = defineEmits(['send']);
|
||||
|
||||
const formTitleComputed = computed(() => props.formTitle || 'peachUpdateProductRequest');
|
||||
|
||||
// The formInputs array was generated from our Go code.
|
||||
const formInputs = [
|
||||
{
|
||||
id: 'description',
|
||||
label: 'Description',
|
||||
type: 'text',
|
||||
placeholder: '',
|
||||
required: false,
|
||||
defaultValue: '',
|
||||
},
|
||||
{
|
||||
id: 'price',
|
||||
label: 'Price',
|
||||
type: 'number',
|
||||
placeholder: '',
|
||||
required: false,
|
||||
defaultValue: '',
|
||||
},
|
||||
{
|
||||
id: 'id',
|
||||
label: 'Id',
|
||||
type: 'text',
|
||||
placeholder: '',
|
||||
required: false,
|
||||
defaultValue: '',
|
||||
},
|
||||
{
|
||||
id: 'name',
|
||||
label: 'Name',
|
||||
type: 'text',
|
||||
placeholder: '',
|
||||
required: false,
|
||||
defaultValue: '',
|
||||
},
|
||||
];
|
||||
|
||||
// Create a computed property that maps initialValues onto each form input's defaultValue.
|
||||
const updatedFormInputs = computed(() => {
|
||||
return formInputs.map(input => {
|
||||
// If props.initialValues is passed in and contains a value for input.id, use it.
|
||||
// Otherwise, fall back to the defaultValue generated (or an empty string).
|
||||
return {
|
||||
...input,
|
||||
defaultValue: (props.initialValues && props.initialValues[input.id]) ?? input.defaultValue ?? ''
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function handleSubmit(payload: any) {
|
||||
// Wrap the form values into a "payload" key.
|
||||
const requestData = { payload: payload };
|
||||
PeachService.peachUpdateProduct(requestData)
|
||||
.then(response => {
|
||||
// Emit an event with the payload after a successful call.
|
||||
emit('send', requestData.payload);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Service error:', error);
|
||||
});
|
||||
}
|
||||
</script>
|
@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<DynamicForm
|
||||
class="space-y-2 p-6 bg-white shadow-lg rounded-lg max-w-md"
|
||||
:formInputs="updatedFormInputs"
|
||||
:formTitle="formTitleComputed"
|
||||
submit-label="Submit"
|
||||
@send="handleSubmit"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { DynamicForm } from '@masonitestudios/dynamic-vue';
|
||||
import { PeachService } from '@/generated';
|
||||
|
||||
// For update forms, we allow passing in initial values.
|
||||
// These values will be mapped onto the defaultValue field of each form input.
|
||||
const props = defineProps<{
|
||||
formTitle?: string,
|
||||
// Pass in an object with initial field values for update requests.
|
||||
initialValues?: Record<string, any>
|
||||
}>();
|
||||
|
||||
const emit = defineEmits(['send']);
|
||||
|
||||
const formTitleComputed = computed(() => props.formTitle || 'peachUpdateUserRequest');
|
||||
|
||||
// The formInputs array was generated from our Go code.
|
||||
const formInputs = [
|
||||
{
|
||||
id: 'id',
|
||||
label: 'Id',
|
||||
type: 'text',
|
||||
placeholder: '',
|
||||
required: false,
|
||||
defaultValue: '',
|
||||
},
|
||||
{
|
||||
id: 'username',
|
||||
label: 'Username',
|
||||
type: 'text',
|
||||
placeholder: '',
|
||||
required: false,
|
||||
defaultValue: '',
|
||||
},
|
||||
{
|
||||
id: 'bio',
|
||||
label: 'Bio',
|
||||
type: 'text',
|
||||
placeholder: '',
|
||||
required: false,
|
||||
defaultValue: '',
|
||||
},
|
||||
];
|
||||
|
||||
// Create a computed property that maps initialValues onto each form input's defaultValue.
|
||||
const updatedFormInputs = computed(() => {
|
||||
return formInputs.map(input => {
|
||||
// If props.initialValues is passed in and contains a value for input.id, use it.
|
||||
// Otherwise, fall back to the defaultValue generated (or an empty string).
|
||||
return {
|
||||
...input,
|
||||
defaultValue: (props.initialValues && props.initialValues[input.id]) ?? input.defaultValue ?? ''
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function handleSubmit(payload: any) {
|
||||
// Wrap the form values into a "payload" key.
|
||||
const requestData = { payload: payload };
|
||||
PeachService.peachUpdateUser(requestData)
|
||||
.then(response => {
|
||||
// Emit an event with the payload after a successful call.
|
||||
emit('send', requestData.payload);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Service error:', error);
|
||||
});
|
||||
}
|
||||
</script>
|
Reference in New Issue
Block a user