HoshinoKoji/js-exform
1
0
Fork 0
Code Issues Pull Requests Wiki Activity

Refactor App.vue to improve item validation, enhance UI layout with Element Plus, and update button functionality

Browse Source
This commit is contained in:
HoshinoKoji 2025-03-03 13:38:47 +08:00
parent 0d7e7c105e
commit 10e6944532
1 changed files with 202 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

136
src/App.vue
View File

@ -1,18 +1,18 @@
<script> <script>
/* /*
* Specification of item data structure: * Specification of item data structure:
* { * {
* type: string, // 'text', 'radio', 'checkbox', 'scale' * type: string, // 'text', 'radio', 'checkbox', 'scale'
* title: string, * title: string,
* optTexts: string[], // only for 'radio', 'checkbox', 'scale' * optTexts: string[], // only for 'radio', 'checkbox', 'scale'
* optValues: string[], // only for 'radio', 'checkbox', 'scale' * optValues: string[], // only for 'radio', 'checkbox', 'scale'
* required: boolean, // optional, whether the user must answer the question, default is true * required: boolean, // optional, whether the user must answer the question, default is true
* answer: string, // user's answer, appended after user submits * answer: string, // user's answer, appended after user submits
* refilled: boolean, // whether the user refilled the answer, appended after user submits * refilled: boolean, // whether the user refilled the answer, appended after user submits
* } * }
*/ */
const ITEM_TYPES = ['text', 'radio', 'checkbox', 'scale']; const ITEM_TYPES = ['text', 'radio', 'checkbox', 'scale'];
function isValidItem({type, title, optTexts, optValues = null}) { function isValidItem({ type, title, optTexts, optValues = null }) {
if (!title || !ITEM_TYPES.includes(type)) { if (!title || !ITEM_TYPES.includes(type)) {
return false; return false;
} }
@ -23,12 +23,13 @@
return false; return false;
} }
return true; return true;
} }
export default { export default {
data() { data() {
return { return {
title: undefined, title: undefined,
started: undefined,
items: [], items: [],
currentTitle: undefined, currentTitle: undefined,
currentIdx: undefined, currentIdx: undefined,
@ -60,6 +61,7 @@
this.currentIdx = 0; this.currentIdx = 0;
this.updateItem(); this.updateItem();
this.started = new Date().getTime();
} }
}); });
}, },
@ -96,8 +98,8 @@
}, },
iterOptions() { iterOptions() {
return this.currentItem.optTexts.map((optText, index) => [ return this.currentItem.optTexts.map((optText, index) => [
index,
optText, optText,
this.currentItem.optValues ? this.currentItem.optValues[index] : optText,
]); ]);
}, },
clickNext() { clickNext() {
@ -132,64 +134,96 @@
refilled: item.refilled, refilled: item.refilled,
responseTime: item.responseTime, responseTime: item.responseTime,
})); }));
window.parent.postMessage({ type: 'response', results }, window.origin); window.parent.postMessage({
type: 'response',
started: this.started,
ended: new Date().getTime(),
results
}, window.origin);
const elem = document.createElement('a'); const elem = document.createElement('a');
elem.href = 'data:text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(results)); elem.href = 'data:text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(results));
elem.download = 'results.json'; elem.download = 'results.json';
elem.click(); elem.click();
} }
} }
} }
</script> </script>
<template> <template>
<div v-if="!isReady">Loading...</div> <div v-if="!isReady">Loading...</div>
<div id="container" v-if="isReady"> <el-container id="main" v-if="isReady">
<span id="display-title">{{ currentTitle }}</span> <el-header height=22pt id="display-title">{{ currentTitle }}</el-header>
<div id="display-content"> <el-container id="display-desc" v-if="true">
<el-text class="mx-1" size="large">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.</el-text>
</el-container>
<el-main id="display-content">
<template v-if="currentItem.type === 'text'"> <template v-if="currentItem.type === 'text'">
<el-input v-model="currentAnswer" style="width: 240px" placeholder="Please input" /> <el-input v-model="currentAnswer" autosize placeholder="Please input" />
</template> </template>
<template v-else-if="currentItem.type === 'radio'"> <template v-else-if="currentItem.type === 'radio'">
<div> <el-radio-group v-model="currentAnswer" v-for="[index, optText] in iterOptions()" :key="index"
<el-radio-group @change="autoNext">
v-model="currentAnswer" <el-radio-button :label="optText" :value="index" />
v-for="[optText, optValue] in iterOptions()"
:key="optValue"
@change="autoNext"
>
<el-radio-button :label="optText" :value="optValue" />
</el-radio-group> </el-radio-group>
</div>
</template> </template>
</div> </el-main>
<div id="display-buttons"> <el-footer id="display-buttons">
<el-button-group> <el-button-group>
<el-button type="primary" round :disabled="uiStatus.backButtonDisabled" @click="clickBack"> <el-button type="info" round :disabled="uiStatus.backButtonDisabled" @click="clickBack">
<el-icon class="el-icon--left"><ArrowLeft /></el-icon>Back <el-icon class="el-icon--left">
<ArrowLeft />
</el-icon>Back
</el-button> </el-button>
<el-button :type="uiStatus.nextButtonStatus" round @click="clickNext"> <el-button :type="uiStatus.nextButtonStatus" round @click="clickNext">
{{ uiStatus.nextButtonText }}<el-icon class="el-icon--right"><ArrowRight /></el-icon> {{ uiStatus.nextButtonText }}<el-icon class="el-icon--right">
<ArrowRight />
</el-icon>
</el-button> </el-button>
</el-button-group> </el-button-group>
</div> </el-footer>
</div> </el-container>
</template> </template>
<style scoped> <style scoped>
#container { #main {
width: 50%;
background-color: #FAFCFF;
margin: 10% 25%;
padding-top: 4ex;
padding-left: 2ex;
padding-right: 2ex;
border-radius: var(--el-border-radius-round);
box-shadow: var(--el-box-shadow-dark);
font-family: var(--el-font-family);
}
#display-title {
text-align: left; text-align: left;
width: 100%; font-size: 18pt;
}
#display-title {
font-size: 20px;
font-weight: bold; font-weight: bold;
} color: rgb(51.2, 126.4, 204);
#display-content { }
margin-top: 1ex;
margin-bottom: 2ex; #display-desc {
} width: 90%;
#display-buttons { margin: 1ex auto;
}
#display-buttons {
text-align: center; text-align: center;
} }
#display-content {
padding-top: 1ex;
}
#display-content el-input {
width: 100%;
font-size: 16pt;
}
</style> </style>