Skip to content

Commit 7be7708

Browse files
netervatinetervati
committed
Initial support for data generation
1 parent 675cde3 commit 7be7708

File tree

15 files changed

+398
-122
lines changed

15 files changed

+398
-122
lines changed

‎components/form/input.vue

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,18 @@
55
(e: 'change', value: string): void;
66
}>();
77
8-
const props = defineProps<{
8+
interface Props {
99
disabled: boolean;
1010
name: string;
1111
placeholder: string;
1212
rules?: FormRuleSchema;
13+
type?: 'text' | 'number';
1314
value?: string;
14-
}>();
15+
}
16+
17+
const props = withDefaults(defineProps<Props>(), {
18+
type: 'text',
19+
});
1520
1621
const validate = !props.rules ? () => true : runValidations(props.rules);
1722
const { value, errorMessage } = useField(() => props.name, validate);
@@ -29,6 +34,7 @@
2934
:disabled="props.disabled"
3035
:error="errorMessage !== undefined"
3136
:placeholder="props.placeholder"
37+
:type="props.type"
3238
@change="emit('change', value)"
3339
/>
3440
<p class="text-red-600">

‎components/input.vue

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,15 @@
1010
error?: boolean;
1111
modelValue: string;
1212
placeholder?: string;
13+
type?: 'text' | 'number';
1314
}
1415
1516
const props = withDefaults(defineProps<Props>(), {
1617
class: '',
1718
disabled: false,
1819
error: false,
1920
placeholder: '',
21+
type: 'text',
2022
});
2123
2224
const mergedClass = computed(() => {
@@ -41,7 +43,7 @@
4143
<input
4244
v-model="inputValue"
4345
class="input input-bordered w-full max-w-vs"
44-
type="text"
46+
:type="props.type"
4547
:class="mergedClass"
4648
:disabled="disabled"
4749
:placeholder="placeholder"

‎components/modal/createModelData.vue

Lines changed: 74 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script lang="ts" setup>
22
// TODO: Implement custom form logic.
3-
import useModel from '~~/stores/useModel';
3+
import { useModelDataType, useModel, useModelData } from '~/stores';
44
55
const emit = defineEmits<{
66
(e: 'close'): void;
@@ -14,14 +14,21 @@
1414
type SchemaRow = { name: string, type: string, immutable: boolean };
1515
1616
const model = useModel();
17+
const modelData = useModelData();
18+
const modelDataType = useModelDataType();
19+
1720
const defaultSchema = model.target?.schema?.map((sch) => ({
21+
max: undefined,
22+
min: undefined,
1823
name: sch.name,
1924
type: sch.type,
25+
option: '',
2026
immutable: sch.name === 'id'
2127
})) ?? [];
28+
2229
const form = useForm({
2330
initialValues: {
24-
name: '',
31+
increase: 0,
2532
schema: defaultSchema,
2633
}
2734
});
@@ -64,31 +71,91 @@
6471
);
6572
6673
const onSubmit = form.handleSubmit(async (values) => {
74+
await modelData.create(
75+
{
76+
increase: values.increase,
77+
schema: values.schema,
78+
},
79+
{
80+
onSuccess: () => {
81+
emit('success');
82+
handleClose();
83+
},
84+
}
85+
);
6786
});
6887
</script>
6988

7089
<template>
71-
<ModalBase :id="id" @close="handleClose">
90+
<ModalBase :id="id" @close="handleClose" size="lg">
7291
<form @submit="onSubmit">
7392
<h3 class="text-lg font-bold">Generate Model Data</h3>
93+
<div class="flex">
94+
<section class="form-control mt-2">
95+
<FormInput
96+
:disabled="isDisabled"
97+
:rules="{ required: 'Increase is required.' }"
98+
name="increase"
99+
placeholder="Enter increase"
100+
type="number"
101+
/>
102+
</section>
103+
</div>
74104
<div class="flex gap-x-2" v-for="(sch, idx) in fields" :key="idx">
75105
<section class="form-control mt-2">
76106
<FormInput
77-
:disabled="isDisabled || sch.value.immutable"
78-
:rules="{ required: 'Name is required.' }"
107+
:disabled="true"
79108
:name="`schema[${idx}].name`"
80109
placeholder="Enter name"
81110
/>
82111
</section>
83112
<section class="form-control mt-2">
84113
<FormSelect
85-
:disabled="isDisabled || sch.value.immutable"
114+
:disabled="true"
86115
:name="`schema[${idx}].type`"
87-
:rules="{ required: 'Data type is required.' }"
88116
:options="dropdownOptions"
89117
placeholder="Select the data type"
90118
/>
91119
</section>
120+
<!-- =========== NUMBER -->
121+
<!-- ================== -->
122+
<section
123+
v-show="sch.value.type === 'number'"
124+
class="form-control mt-2"
125+
>
126+
<FormInput
127+
:disabled="isDisabled"
128+
:name="`schema[${idx}].min`"
129+
placeholder="Enter min value"
130+
type="number"
131+
/>
132+
</section>
133+
<section
134+
v-show="sch.value.type === 'number'"
135+
class="form-control mt-2"
136+
>
137+
<FormInput
138+
:disabled="isDisabled"
139+
:name="`schema[${idx}].max`"
140+
placeholder="Enter max value"
141+
type="number"
142+
/>
143+
</section>
144+
<!-- ================== -->
145+
<!-- =========== STRING -->
146+
<!-- ================== -->
147+
<section
148+
v-show="sch.value.type === 'string'"
149+
class="form-control mt-2"
150+
>
151+
<FormSelect
152+
:disabled="isDisabled"
153+
:name="`schema[${idx}].option`"
154+
:options="modelDataType.list"
155+
placeholder="Select the data option"
156+
/>
157+
</section>
158+
<!-- ================== -->
92159
</div>
93160
<section class="mt-10">
94161
<Button :disabled="isDisabled" size="sm" @click="handleClose">

‎components/model/grid.vue

Lines changed: 5 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
import { Cog6ToothIcon } from '@heroicons/vue/24/outline';
33
import { NormalizedModel } from '~~/types/models';
44
import useModel from '~~/stores/useModel';
5-
import ModalCreateModelData from '~~/components/modal/createModelData.vue';
65
76
const model = useModel();
87
@@ -17,8 +16,6 @@
1716
const handleSelectModel = (md: NormalizedModel) => {
1817
model.setTarget(md);
1918
};
20-
21-
const createModelDataModal = useModal(ModalCreateModelData, { id: 'create-model-data' });
2219
</script>
2320

2421
<template>
@@ -35,9 +32,6 @@
3532
<Cog6ToothIcon class="h-4 w-4" />
3633
</template>
3734
<template #options>
38-
<DropdownOption @click="createModelDataModal.open()">
39-
Generate
40-
</DropdownOption>
4135
<DropdownOption>Edit</DropdownOption>
4236
<DropdownOption>Delete</DropdownOption>
4337
</template>
@@ -62,46 +56,10 @@
6256
</a>
6357
</div>
6458
</section>
65-
<div class="mt-4">
66-
<div class="overflow-y-scroll" style="height: 70vh">
67-
<table class="table w-full">
68-
<thead>
69-
<tr>
70-
<th />
71-
<th
72-
v-for="
73-
// @ts-ignore
74-
sch in model.target?.schema"
75-
class="font-normal normal-case text-base"
76-
>
77-
{{
78-
// @ts-ignore
79-
sch.name }}
80-
</th>
81-
</tr>
82-
</thead>
83-
<tbody>
84-
<TableLoader v-if="model.isLoading" :colspan="4" />
85-
<!-- <tr v-for="record in api.list" v-else :key="record.id">
86-
<td>
87-
<Button
88-
class="ml-1"
89-
color="error"
90-
size="xs"
91-
@click="dispatch('delete', record)"
92-
>
93-
Delete
94-
</Button>
95-
</td>
96-
<td>{{ record.url_path }}</td>
97-
<td>{{ record.resource_models.name }}</td>
98-
<td>{{ record.description }}</td>
99-
</tr> -->
100-
</tbody>
101-
</table>
102-
</div>
103-
<ClientOnly>
104-
<component :is="createModelDataModal.component" />
105-
</ClientOnly>
59+
<div v-if="model.target">
60+
<ModelTable
61+
:key="model.target.id"
62+
:schema="model.target?.schema ?? []"
63+
/>
10664
</div>
10765
</template>

‎components/model/table.vue

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<script lang="ts" setup>
2+
import useModelData from '~~/stores/useModelData';
3+
import ModalCreateModelData from '~~/components/modal/createModelData.vue';
4+
5+
defineProps<{
6+
schema: { name: string; type: string }[];
7+
}>();
8+
9+
const modelData = useModelData();
10+
const createModelDataModal = useModal(ModalCreateModelData, { id: 'create-model-data' });
11+
</script>
12+
13+
<template>
14+
<div class="mt-4">
15+
<div class="overflow-y-scroll" style="height: 70vh">
16+
<table class="table w-full">
17+
<thead>
18+
<tr>
19+
<th>
20+
<Button
21+
:disabled="modelData.isLoading"
22+
size="sm"
23+
@click="createModelDataModal.open()"
24+
>
25+
Generate
26+
</Button>
27+
</th>
28+
<th
29+
v-for="sch in schema"
30+
class="font-normal normal-case text-base"
31+
>
32+
{{ sch.name }}
33+
</th>
34+
</tr>
35+
</thead>
36+
<tbody>
37+
<TableLoader v-if="modelData.isLoading" :colspan="4" />
38+
<tr v-for="md in modelData.list" v-else :key="md.id">
39+
<td />
40+
<td
41+
v-for="sch in schema"
42+
class="font-normal normal-case text-base"
43+
>
44+
{{ md.schema[sch.name as any] }}
45+
</td>
46+
</tr>
47+
</tbody>
48+
</table>
49+
</div>
50+
<ClientOnly>
51+
<component :is="createModelDataModal.component" />
52+
</ClientOnly>
53+
</div>
54+
</template>

‎server/routes/model-data-types.get.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { FAKER_OPTIONS } from '../utils/generateModelData';
2+
3+
export default defineEventHandler(() => {
4+
return Object.values(FAKER_OPTIONS).map((obj) => ({
5+
text: obj.text,
6+
value: obj.value,
7+
}));
8+
});

‎server/routes/models/[id]/model-data.get.ts

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { ModelDataServices, ModelServices } from '../../../services';
2+
import extractAppKey from '~~/server/lib/extractAppKey';
3+
4+
type QueryParams = {
5+
apiKey: string;
6+
};
7+
8+
export default defineEventHandler(async (event) => {
9+
const query = getQuery(event) as QueryParams;
10+
11+
await extractAppKey(event, query.apiKey);
12+
13+
const resourceModel = await new ModelServices(event).find(
14+
event.context.params?.id ?? ''
15+
);
16+
17+
const list = await new ModelDataServices(event).list(resourceModel.id);
18+
19+
return list;
20+
});

‎server/routes/models/[id]/model-data.post.ts

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,17 @@ import { ModelServices, ModelDataServices } from '~~/server/services';
33
import extractAppKey from '~~/server/lib/extractAppKey';
44

55
type FakeSchema = {
6+
max?: number;
7+
min?: number;
68
name: string;
79
option: string;
10+
type: string;
811
};
912

1013
type BodyParams = {
1114
apiKey: string;
1215
increase: number;
13-
mockData: FakeSchema[];
16+
schema: FakeSchema[];
1417
};
1518

1619
export default defineEventHandler(async (event) => {
@@ -30,16 +33,10 @@ export default defineEventHandler(async (event) => {
3033
);
3134
}
3235

33-
// const data = [];
36+
const created = await new ModelDataServices(event).bulkCreate({
37+
data: generateModelData(body.schema, body.increase),
38+
modelId: model.id,
39+
});
3440

35-
// while (data.length < body.count) {
36-
// data.push(generateResourceData(resourceModel.structure));
37-
// }
38-
39-
// const created = await new ResourceDataServices(event).bulkCreate({
40-
// data,
41-
// resourceModelId: resourceModel.id,
42-
// });
43-
44-
// return created;
41+
return created;
4542
});

0 commit comments

Comments
 (0)