Newer
Older
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<el-row :gutter="20">
<el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col>
<el-col :span="12">
<el-card style="width: 100%">
<template #header>
<div class="card-header">
<span>Your Offer Information</span>
</div>
</template>
<el-form
ref="ruleFormRef"
:model="ruleForm"
:rules="rules"
label-width="180px"
:label-position="'right'"
class="demo-ruleForm"
:size="formSize"
status-icon
>
<el-form-item label="Located City" prop="_spaceLocateCity">
<el-col :span="8">
<el-input v-model="ruleForm._spaceLocateCity" />
</el-col>
</el-form-item>
<el-form-item label="Zip Code" prop="_zipCode">
<el-col :span="5">
<el-input v-model="ruleForm._zipCode" placeholder="24061.." />
</el-col>
</el-form-item>
<el-form-item label="Space Type" prop="_spaceType">
<el-select
v-model="ruleForm._spaceType"
placeholder="Please select your Space Type"
>
<el-option label="Apartment (No Roommates)" value="apt-single" />
<el-option
label="Apartment (Shared with Roommates)"
value="apt-share"
/>
<el-option label="Townhouse (No Roommates)" value="th-single" />
<el-option
label="Townhouse (Shared with Roommates)"
value="th-share"
/>
<el-option
label="Single Family House (No Roommates)"
value="sfh-single"
/>
<el-option
label="Single Family House (Shared with Roommates)"
value="sfh-share"
/>
<el-option label="Other" value="other" />
</el-select>
</el-form-item>
<el-form-item
label="Other Type"
v-if="ruleForm._spaceType === 'other'"
:required="ruleForm._spaceType === 'other'"
>
<el-col :span="8">
<el-input v-model="ruleForm._otherSpaceType" />
</el-col>
</el-form-item>
<el-form-item label="Space Available for Offering?">
<el-col :span="2">
<el-form-item prop="_offering">
<el-switch v-model="ruleForm._offering" />
</el-form-item>
</el-col>
</el-form-item>
<el-form-item></el-form-item>
<el-form-item
label="Time Window"
v-if="ruleForm._offering"
:required="ruleForm._offering"
>
<el-col :span="7">
<el-form-item prop="_availableTimeStart">
<el-date-picker
v-model="ruleForm._availableTimeStart"
type="date"
label="Pick a date"
placeholder="Pick a date"
style="width: 100%"
/>
</el-form-item>
</el-col>
<el-col class="text-center" :span="2">
<span class="text-gray-500"> To </span>
</el-col>
<el-col :span="7">
<el-form-item prop="_availableTimeEnd">
<el-date-picker
v-model="ruleForm._availableTimeEnd"
label="Pick a time"
placeholder="Pick a time"
style="width: 100%"
/>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item
label="Max Number of People"
:required="ruleForm._offering"
v-if="ruleForm._offering"
prop="_maxNumberOfPeople"
>
<el-col :span="4">
<el-input v-model="ruleForm._maxNumberOfPeople" />
</el-col>
</el-form-item>
<el-form-item></el-form-item>
<el-form-item label="Space Details:" prop="_spaceDetails">
<el-col :span="16"
><el-input v-model="ruleForm._spaceDetails" type="textarea"
/></el-col>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm(ruleFormRef)"
>Create</el-button
>
<el-button @click="resetForm(ruleFormRef)">Reset</el-button>
</el-form-item>
</el-form>
</el-card>
</el-col>
<el-col :span="4">
<el-card style="width: 100%"
><template #header>
<div class="card-header">
<span>Match Request</span>
</div>
</template>
</el-card></el-col
>
<el-col :span="4"></el-col>
</el-row>
</template>
<script lang="ts" setup>
import { reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { OfferFormModel } from "@/models/OfferFormModel";
const formSize = ref("default");
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive(new OfferFormModel());
const rules = reactive<FormRules>({
_spaceLocateCity: [
{
required: true,
message: "Please give your space location",
trigger: "blur",
{ min: 0, max: 20, message: "Length should be 0 to 20", trigger: "blur" },
message: "Please give your zip code of your space",
trigger: "blur",
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
trigger: "change",
},
],
});
const submitForm = async (formEl: FormInstance | undefined) => {
if (!formEl) return;
await formEl.validate((valid, fields) => {
if (valid) {
console.log("submit!");
} else {
console.log("error submit!", fields);
}
});
};
const resetForm = (formEl: FormInstance | undefined) => {
if (!formEl) return;
formEl.resetFields();
};
const options = Array.from({ length: 10000 }).map((_, idx) => ({
value: `${idx + 1}`,
label: `${idx + 1}`,
}));
</script>