Skip to content

Instantly share code, notes, and snippets.

@stivenson
Forked from fernandez14/account.js
Created May 12, 2017 16:07
Show Gist options
  • Save stivenson/187107552687bde6968eb6164fa3ad1b to your computer and use it in GitHub Desktop.
Save stivenson/187107552687bde6968eb6164fa3ad1b to your computer and use it in GitHub Desktop.
Mithril 1.x component example.
import m from 'mithril';
import stream from 'mithril/stream';
import {Button} from '../../ui';
import {Account} from '../../models';
export const FormAccountPublicPage = {
oninit(vnode) {
this.loading = true;
this.saving = false;
this.errors = false;
/**
* Calculates if internal state matches external
* @param form
* @param user
* @returns {boolean}
*/
this.hasChanged = (form, user) => {
return user != false && form != false &&
(user.get('username') != form.get('username') || user.getIn(['profile', 'location']) != form.getIn(['profile', 'location']) ||
user.getIn(['profile', 'bio']) != form.getIn(['profile', 'bio']));
};
/**
* Rollback keys
* @param user
*/
this.reset = () => {
return ['username', ['profile', 'location'], ['profile', 'bio']];
};
/**
*
* @param form
* @param user
* @param event
*/
this.onSubmit = (form, user, event) => {
event.preventDefault();
if (this.hasChanged(form, user) && !this.saving) {
this.saving = true;
this.errors = false;
return Account.update(form).then(u => {
this.saving = false;
}, errors => {
this.saving = false;
this.errors = errors;
});
}
};
},
view(vnode) {
let state = vnode.state,
user = Account.current,
errors = state.errors,
form = Account.form,
changed = state.hasChanged(form, user);
if (!user) {
return m('placeholder');
}
return m('.form-group', [
m('.row', [
m('.col-md-4.col-lg-4', [
m('h3', 'Tu página'),
m('p', 'Este es tu perfil público. Comparte tus recomendaciones, comentarios, gustos y un poco sobre ti.')
]),
m('.col-md-8.col-lg-5', [
errors == false ? null : m('.pt-callout.pt-intent-danger', [
m('h5', 'No se guardaron los cambios'),
m('ul..pt-list-unstyled', Object.keys(errors).map(key => {
return errors[key].map(err => m('li', err));
}))
]),
m('form', {onsubmit: state.onSubmit.bind(state, form, user)}, [
m('label.pt-label', [
'URL de tu perfil en Comparateca',
m('.pt-input-group', [
m('button[type=button].pt-button.pt-minimal.pt-intent-primary', 'https://comparateca.com/@'),
m('input[type=text].pt-input', {value: form.get('username'), oninput: m.withAttr('value', x => Account.form = form.set('username', x)), style: 'padding-left: 205px'})
])
]),
m('label.pt-label', [
'Ubicación',
m('br'),
m('small', 'En tu página se muestra tu ubicación.'),
m('input[type=text].pt-input.pt-fill', {value: form.getIn(['profile', 'location']), oninput: m.withAttr('value', x => Account.form = form.setIn(['profile', 'location'], x))})
]),
m('label.pt-label', [
'Biografia',
m('br'),
m('small', 'Algo breve acerca de ti.'),
m('textarea.pt-input.pt-fill', {value: form.getIn(['profile', 'bio']), oninput: m.withAttr('value', x => Account.form = form.setIn(['profile', 'bio'], x))})
]),
m(Button, {intent: !changed && !state.saving ? false : 'primary', disabled: !changed && !state.saving, loading: state.saving, type: 'submit'}, 'Guardar cambios'),
' ',
m('button[type=button].pt-button', {className: !changed ? 'hidden' : '', onclick: Account.rollback.bind(state, state.reset())}, 'Cancelar')
])
])
]),
m('hr')
]);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment