generator-polymer-init-vaadin-elements-app
Version:
Progressive web application template with Polymer App Toolbox and Vaadin Elements
179 lines (158 loc) • 7.45 kB
HTML
<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="../bower_components/iron-form/iron-form.html">
<link rel="import" href="../bower_components/vaadin-button/vaadin-button.html">
<link rel="import" href="../bower_components/vaadin-dialog/vaadin-dialog.html">
<link rel="import" href="../bower_components/vaadin-checkbox/vaadin-checkbox.html">
<link rel="import" href="../bower_components/vaadin-form-layout/vaadin-form-layout.html">
<link rel="import" href="../bower_components/vaadin-form-layout/vaadin-form-item.html">
<link rel="import" href="../bower_components/vaadin-text-field/vaadin-text-area.html">
<link rel="import" href="../bower_components/vaadin-radio-button/vaadin-radio-group.html">
<link rel="import" href="../bower_components/vaadin-radio-button/vaadin-radio-button.html">
<link rel="import" href="../bower_components/vaadin-list-box/vaadin-list-box.html">
<link rel="import" href="../bower_components/vaadin-date-picker/vaadin-date-picker.html">
<link rel="import" href="../bower_components/vaadin-dropdown-menu/vaadin-dropdown-menu.html">
<link rel="import" href="../bower_components/vaadin-combo-box/vaadin-combo-box.html">
<link rel="import" href="../bower_components/vaadin-upload/vaadin-upload.html">
<link rel="import" href="../bower_components/vaadin-ordered-layout/vaadin-vertical-layout.html">
<link rel="import" href="../bower_components/vaadin-ordered-layout/vaadin-horizontal-layout.html">
<link rel="import" href="../bower_components/vaadin-notification/vaadin-notification.html">
<link rel="import" href="shared-styles.html">
<dom-module id="employee-new">
<template>
<style include="shared-styles">
:host {
display: block;
background: transparent;
}
</style>
<div class="card">
<iron-form id="form">
<form>
<vaadin-vertical-layout>
<h2>Register a new employee</h2>
<vaadin-form-layout>
<vaadin-form-item>
<label slot="label">Title</label>
<vaadin-dropdown-menu class="full-width">
<template>
<vaadin-list-box>
<vaadin-item>Mr</vaadin-item>
<vaadin-item>Mrs</vaadin-item>
<vaadin-item>Ms</vaadin-item>
<vaadin-item>Miss</vaadin-item>
<vaadin-item>Other</vaadin-item>
</vaadin-list-box>
</template>
</vaadin-dropdown-menu>
</vaadin-form-item>
<vaadin-form-item>
<label slot="label">First Name</label>
<vaadin-text-field required error-message="Please enter first name" class="full-width"></vaadin-text-field>
</vaadin-form-item>
<vaadin-form-item>
<label slot="label">Last Name</label>
<vaadin-text-field required error-message="Please enter last name" class="full-width"></vaadin-text-field>
</vaadin-form-item>
<vaadin-form-item>
<label slot="label">Email</label>
<vaadin-text-field required error-message="Please enter email" class="full-width"></vaadin-text-field>
</vaadin-form-item>
<vaadin-form-item>
<label slot="label">Birth date</label>
<vaadin-date-picker class="full-width"></vaadin-date-picker>
</vaadin-form-item>
<vaadin-form-item>
<label slot="label">Dietary Restrictions</label>
<vaadin-combo-box class="full-width" items="[[dietarys]]"></vaadin-combo-box>
</vaadin-form-item>
<vaadin-form-item>
<label slot="label">Add profile picture</label>
<vaadin-upload class="full-width" max-files="1"></vaadin-upload>
</vaadin-form-item>
<vaadin-form-item>
<label slot="label">Preferred language</label>
<vaadin-radio-group value="{{radioValue}}">
<vaadin-radio-button value="en">English</vaadin-radio-button>
<vaadin-radio-button value="fr">Français</vaadin-radio-button>
<vaadin-radio-button value="de">Deutsch</vaadin-radio-button>
</vaadin-radio-group>
</vaadin-form-item>
<vaadin-form-item colspan="2">
<label slot="label">Free word (allergies)</label>
<vaadin-text-area class="full-width"></vaadin-text-area>
</vaadin-form-item>
<vaadin-form-item colspan="2">
<vaadin-checkbox checked="{{_canSubmit}}">I have read the <a href on-click="toggleDialog">terms and conditions</a></vaadin-checkbox>
</vaadin-form-item>
<vaadin-form-item colspan="2">
<vaadin-button disabled$="[[!_canSubmit]]" on-click="_submitForm">Submit</vaadin-button>
</vaadin-form-item>
</vaadin-form-layout>
</vaadin-vertical-layout>
</form>
</iron-form>
</div>
<vaadin-notification opened="{{formSubmittedOpen}}" duration="4000">
<template>
<h3>Submitted</h3>
Your registration was successful
</template>
</vaadin-notification>
<vaadin-notification opened="{{formInvalidOpen}}" duration="4000">
<template>
<h3>Some fields invalid</h3>
Please fill all the required fields and try again
</template>
</vaadin-notification>
<vaadin-dialog id="dialog" no-close-on-esc no-close-on-outside-click opened="{{dialogOpen}}">
<template>
<vaadin-vertical-layout theme="spacing">
<div>
<h1>The content of dialog</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin maximus magna et orci lacinia maximus. Fusce ut tincidunt ex. Morbi sed vehicula metus. Phasellus vel leo a elit viverra congue. Donec finibus iaculis eros vel vestibulum. Cras vehicula neque enim, eget faucibus ligula tempus vel. Integer felis nisi, sollicitudin at lectus at, bibendum vulputate risus. In ut massa et massa scelerisque viverra.</p>
</div>
<vaadin-button on-click="toggleDialog">Ok</vaadin-button>
</vaadin-vertical-layout>
</template>
</vaadin-dialog>
</template>
<script>
class EmployeeNew extends Polymer.Element {
static get is() {
return 'employee-new';
}
static get properties() {
return {
dietarys: {
type: Array,
value: () =>
[
'Ovo-Vegetarian',
'Lacto-Vegetarian',
'Lacto-Ovo Vegetarians',
'Pescetarians',
'Other'
]
},
dialogOpen: Boolean,
formSubmittedOpen: Boolean,
formInvalidOpen: Boolean,
radioValue: String
};
}
toggleDialog(e) {
e.stopPropagation();
e.preventDefault();
this.dialogOpen = !this.dialogOpen;
}
_submitForm() {
if (this.$.form.validate()) {
this.formSubmittedOpen = true;
} else {
this.formInvalidOpen = true;
}
}
}
window.customElements.define(EmployeeNew.is, EmployeeNew);
</script>
</dom-module>