@appscode/ui-builder
Version:
## Motivation
720 lines (716 loc) • 19.9 kB
JavaScript
export default {
title: "Simple CV UI",
ui: {
type: "multi-step-form",
steps: [
{
title: "General Information",
form: {
type: "single-step-form",
elements: [
{
type: "input",
label: "Name",
schema: {
$ref: "schema#/properties/name",
},
},
{
type: "input",
label: "Age",
schema: {
$ref: "schema#/properties/age",
},
},
{
type: "select",
label: "Applying for Position",
schema: {
$ref: "schema#/properties/applyingForPosition",
},
options: [
{
value: "software-eng",
text: "Software Engineer",
},
{
value: "designer",
text: "Designer",
},
{
value: "fe-software-eng",
text: "Front-end Software Engineer",
},
],
},
{
type: "single-step-form",
title: "Information regarding selected position",
if: {
params: {
applyingForPosition: {
$ref: "model#/applyingForPosition",
},
},
expression: "applyingForPosition === 'software-eng'",
},
elements: [
{
type: "select",
label: "Pefered Language",
schema: {
$ref:
"schema#/properties/positionExperties/properties/preferedLanguage",
},
options: [
{
value: "go",
text: "Go",
},
{
value: "javascript",
text: "JavaScript",
},
{
value: "java",
text: "Java",
},
{
value: "python",
text: "Python",
},
],
},
],
},
{
type: "single-step-form",
title: "Information regarding selected position",
if: {
params: {
applyingForPosition: {
$ref: "model#/applyingForPosition",
},
},
expression: "applyingForPosition === 'designer'",
},
elements: [
{
type: "select",
label: "Pefered Tool",
schema: {
$ref:
"schema#/properties/positionExperties/properties/preferedTool",
},
options: [
{
value: "adobe",
text: "Adove XD",
},
{
value: "figma",
text: "Figma",
},
],
},
],
},
{
type: "single-step-form",
title: "Information regarding selected position",
if: {
params: {
applyingForPosition: {
$ref: "model#/applyingForPosition",
},
},
expression: "applyingForPosition === 'fe-software-eng'",
},
elements: [
{
type: "select",
label: "Pefered JavaScript Framework",
schema: {
$ref:
"schema#/properties/positionExperties/properties/preferedJsFramework",
},
options: [
{
value: "vue",
text: "Vue JS",
},
{
value: "angular",
text: "Angular JS",
},
{
value: "react",
text: "React JS",
},
],
},
],
},
{
type: "object-input-form",
label: "Skills",
values: {
type: "input",
label: "Skill Point",
},
schema: {
$ref: "schema#/properties/skills",
},
},
],
},
},
{
title: "Education",
form: {
type: "multi-step-form",
title: "Educational Infromations",
steps: [
{
title: "SSC",
form: {
type: "single-step-form",
elements: [
{
type: "input",
label: "School name",
schema: {
$ref:
"schema#/properties/education/properties/ssc/properties/school",
},
},
{
type: "input",
label: "Grade",
schema: {
$ref:
"schema#/properties/education/properties/ssc/properties/grade",
},
},
],
},
},
{
title: "HSC",
form: {
type: "single-step-form",
elements: [
{
type: "input",
label: "College name",
schema: {
$ref:
"schema#/properties/education/properties/hsc/properties/college",
},
},
{
type: "input",
label: "Grade",
schema: {
$ref:
"schema#/properties/education/properties/hsc/properties/grade",
},
},
],
},
},
{
title: "Honours",
form: {
type: "single-step-form",
elements: [
{
type: "input",
label: "University name",
schema: {
$ref:
"schema#/properties/education/properties/honours/properties/university",
},
},
{
type: "input",
label: "Degree",
schema: {
$ref:
"schema#/properties/education/properties/honours/properties/degree",
},
},
{
type: "select",
label: "Department",
schema: {
$ref:
"schema#/properties/education/properties/honours/properties/department",
},
options: [
{
value: "cse",
text: "Department of Computer Science & Engineering",
},
{
value: "ict",
text:
"Department of Information & Communication Technology",
},
],
},
{
type: "input",
label: "Grade",
schema: {
$ref:
"schema#/properties/education/properties/honours/properties/grade",
},
},
],
},
},
],
},
},
{
title: "Experience",
form: {
type: "single-step-form",
discriminator: {
activeTab: {
type: "string",
default: "current-job",
},
},
elements: [
{
type: "tabs",
label: "Job Status",
schema: {
$ref: "discriminator#/activeTab",
},
tabs: [
{
value: "current-job",
title: "Current Job",
},
{
value: "previous-jobs",
title: "Previous Jobs",
},
],
},
{
type: "single-step-form",
label: "Information regarding current job",
if: {
params: {
activeTab: {
$ref: "discriminator#/activeTab",
},
},
expression: "activeTab === 'current-job'",
},
elements: [
{
type: "input",
label: "Company Name",
schema: {
$ref:
"schema#/properties/experience/properties/currentJob/properties/companyName",
},
},
{
type: "input",
label: "Position",
schema: {
$ref:
"schema#/properties/experience/properties/currentJob/properties/position",
},
},
{
type: "input",
label: "Joined",
schema: {
$ref:
"schema#/properties/experience/properties/currentJob/properties/joined",
},
},
],
},
{
type: "array-input-form",
label: "Previous Jobs",
if: {
params: {
activeTab: {
$ref: "discriminator#/activeTab",
},
},
expression: "activeTab === 'previous-jobs'",
},
element: {
type: "single-step-form",
label: "Information regarding a previous job",
elements: [
{
type: "input",
label: "Company Name",
schema: {
$ref:
"schema#/properties/experience/properties/previousJobs/items/properties/companyName",
},
},
{
type: "input",
label: "Position",
schema: {
$ref:
"schema#/properties/experience/properties/previousJobs/items/properties/position",
},
},
{
type: "input",
label: "Joined",
schema: {
$ref:
"schema#/properties/experience/properties/previousJobs/items/properties/joined",
},
},
],
},
schema: {
$ref: "schema#/properties/experience/properties/previousJobs",
},
},
],
},
},
{
title: "Cloud Information",
form: {
type: "single-step-form",
elements: [
{
type: "select",
label: "Post",
schema: {
$ref: "schema#/properties/cloud/properties/post",
},
fetch: {
method: "get",
path: "https://jsonplaceholder.typicode.com/posts",
filters: [
{
value: {
$ref: "#/id",
},
text: {
$ref: "#/title",
},
},
],
},
},
{
type: "select",
label: "Top Story",
schema: {
$ref: "schema#/properties/cloud/properties/topStory",
},
fetch: {
method: "get",
path: "/topstories.json",
filters: [
{
value: {
$ref: "#/",
},
text: {
$ref: "#/",
},
},
],
},
},
{
type: "select",
label: "Comment",
schema: {
$ref: "schema#/properties/cloud/properties/comment",
},
fetch: {
method: "get",
params: {
storyId: {
$ref: "model#/cloud/topStory",
},
},
path: "/item/${storyId}.json",
filters: [
{
$ref: "#/kids",
},
{
text: {
$ref: "#/",
},
value: {
$ref: "#/",
},
},
],
},
},
{
type: "input",
label: "Comment Body",
schema: {
$ref: "schema#/properties/cloud/properties/commentBody",
},
fetch: {
method: "get",
params: {
commentId: {
$ref: "model#/cloud/comment",
},
},
path: "/item/${commentId}.json",
filters: [
{
$ref: "#/text",
},
],
},
},
],
},
},
],
},
schema: {
type: "object",
properties: {
name: {
type: "string",
},
age: {
type: "integer",
},
applyingForPosition: {
type: "string",
},
positionExperties: {
stype: "object",
properties: {
preferedJsFramework: {
type: "string",
},
preferedLanguage: {
type: "string",
},
preferedTool: {
type: "string",
},
},
},
skills: {
type: "object",
additionalProperties: {
type: "string",
},
},
education: {
type: "object",
properties: {
ssc: {
type: "object",
properties: {
school: {
type: "string",
},
grade: {
type: "number",
},
},
},
hsc: {
type: "object",
properties: {
college: {
type: "string",
},
grade: {
type: "number",
},
},
},
honours: {
type: "object",
properties: {
university: {
type: "string",
},
degree: {
type: "string",
},
department: {
type: "string",
enum: ["CSE", "ICT"],
},
grade: {
type: "number",
},
},
},
},
},
experience: {
type: "object",
properties: {
currentJob: {
type: "object",
properties: {
companyName: {
type: "string",
},
position: {
type: "string",
},
joined: {
type: "string",
format: "date",
},
},
},
previousJobs: {
type: "Array",
items: {
type: "object",
properties: {
companyName: {
type: "string",
},
postiton: {
type: "string",
},
joined: {
type: "string",
format: "date",
},
},
},
},
},
},
cloud: {
type: "object",
properties: {
post: {
type: "number",
},
topStory: {
type: "string",
},
comment: {
type: "string",
},
commentBody: {
type: "string",
},
},
},
},
required: ["name", "age", "applyingForPosition", "education", "experience"],
},
model: {
name: "Sakib",
age: 26,
applyingForPosition: "",
positionExperties: {
preferedJsFramework: "",
preferedLanguage: "",
preferedTool: "",
},
education: {
ssc: {
school: "",
grade: "",
},
hsc: {
college: "",
grade: "",
},
honours: {
university: "",
degree: "",
department: "",
grade: "",
},
},
experience: {
currentJob: {
companyName: "Appscode Ltd",
position: "Software Engineer",
joined: "2018-12-03",
},
previousJobs: [
{
companyName: "RankMyList Inc.",
position: "Intern",
joined: "2017-08-22",
},
{
companyName: "CUET",
position: "Teachers Assistant",
joined: "2014-04-13",
},
],
},
cloud: {
post: null,
topStory: "",
comment: "",
commentBody: "",
},
},
functionsString:
'function hello() {\n return "hello";\n}\n\nreturn {\n hello\n}',
language: {
en: {},
bn: {},
},
jsonSetter(store, ui, schema, model, functionsString, language) {
store.commit(
"wizard/ui$set",
JSON.parse(typeof ui !== "string" ? JSON.stringify(ui) : ui) || {}
);
store.commit(
"wizard/schema$set",
JSON.parse(
typeof schema !== "string" ? JSON.stringify(schema) : schema
) || {}
);
store.commit(
"wizard/model$init",
JSON.parse(typeof model !== "string" ? JSON.stringify(model) : model) ||
{}
);
store.commit(
"wizard/model$set",
JSON.parse(typeof model !== "string" ? JSON.stringify(model) : model) ||
{}
);
store.commit("functionsString$set", functionsString || "");
// declare evaluate the functionString to get the ffunctions Object
const evalFunc = new Function(functionsString);
store.commit("wizard/functions$set", evalFunc());
store.commit(
"wizard/language$set",
JSON.parse(
typeof language !== "string" ? JSON.stringify(language) : language
) || {}
);
},
};