catarse/catarse.js

import m from 'mithril';
import prop from 'mithril/stream';
import _ from 'underscore';
import h from '../h';
import projectGoalsVM from '../vms/project-goals-vm';

const projectGoalEditCard = {
    oninit: function(vnode) {
        const goal = vnode.attrs.goal(),
            project = vnode.attrs.project,
            descriptionError = prop(false),
            titleError = prop(false),
            valueError = prop(false),
            validate = () => {
                vnode.attrs.error(false);
                descriptionError(false);
                valueError(false);
                if (_.isEmpty(goal.title())) {
                    vnode.attrs.error(true);
                    titleError(true);
                }
                if (_.isEmpty(goal.description())) {
                    vnode.attrs.error(true);
                    descriptionError(true);
                }
                if (!goal.value() || parseInt(goal.value()) < 10) {
                    vnode.attrs.error(true);
                    valueError(true);
                }
            };
        const destroyed = prop(false);

        const acceptNumeric = (e) => {
            goal.value(e.target.value.replace(/[^0-9]/g, ''));
            return true;
        };
        const confirmDelete = () => {
            const r = confirm('Você tem certeza?');
            if (r) {
                if (!goal.id()) {
                    destroyed(true);
                    return false;
                }
                return m.request({
                    method: 'DELETE',
                    url: `/projects/${goal.project_id()}/goals/${goal.id()}`,
                    config: h.setCsrfToken
                }).then(() => {
                    destroyed(true);
                    h.redraw();
                }).catch(() =>
                    alert('Erro ao deletar meta.')
                );
            }
            return false;
        };
        const saveGoal = () => {
            validate();
            if (vnode.attrs.error()) {
                return false;
            }
            const data = {
                id: goal.id(),
                project_id: goal.project_id(),
                value: goal.value(),
                title: goal.title(),
                description: goal.description()
            };

            if (goal.id()) {
                projectGoalsVM.updateGoal(goal.project_id(), goal.id(), data).then(() => {
                    vnode.attrs.showSuccess(true);
                    goal.editing.toggle();
                    h.redraw();
                });
            } else {
                projectGoalsVM.createGoal(goal.project_id(), data).then((r) => {
                    goal.id(r.goal_id);
                    vnode.attrs.showSuccess(true);
                    goal.editing.toggle();
                    h.redraw();
                });
            }
            return false;
        };
        vnode.state = {
            confirmDelete,
            descriptionError,
            titleError,
            valueError,
            acceptNumeric,
            destroyed,
            saveGoal
        };
    },
    view: function({state, attrs}) {
        const goal = attrs.goal(),
            inlineError = message => m('.fontsize-smaller.text-error.u-marginbottom-20.fa.fa-exclamation-triangle',
                m('span',
                    message
                )
            );

        return state.destroyed() ? m('div', '') :
            m('.card.u-marginbottom-30', [
                m('.w-row', [
                    m('.w-col.w-col-6',
                        m('.fontsize-small',
                            'Meta:'
                        )
                    ),
                    m('.w-col.w-col-6',
                        m('.w-row', [
                            m('.prefix.text-field.w-col.w-col-4.w-col-small-6.w-col-tiny-6',
                                m('.fontcolor-secondary.fontsize-base.lineheight-tightest.u-text-center',
                                    'R$'
                                )
                            ),
                            m('.w-col.w-col-8.w-col-small-6.w-col-tiny-6',
                                m("input.positive.postfix.text-field.w-input[type='text']", {
                                    class: state.valueError() ? 'error' : false,
                                    value: goal.value(),
                                    oninput: e => state.acceptNumeric(e),
                                    onchange: m.withAttr('value', goal.value)
                                })
                            )
                        ])
                    )
                ]),

                state.valueError() ? inlineError('A meta deve ser igual ou superior a R$10') : '',
                m('.w-row', [
                    m('.w-col.w-col-6',
                        m('.fontsize-small',
                            'Título:'
                        )
                    ),
                    m('.w-col.w-col-6',
                        m("input.positive.text-field.w-input[type='text']", {
                            value: goal.title(),
                            class: state.descriptionError() ? 'error' : false,
                            onchange: m.withAttr('value', goal.title)
                        })
                    )
                ]),
                state.titleError() ? inlineError('Título não pode ficar em branco.') : '',
                m('.w-row', [
                    m('.w-col.w-col-6',
                        m('.fontsize-small',
                            'Descrição da meta:'
                        )
                    ),
                    m('.w-col.w-col-6',
                        m("textarea.height-medium.positive.text-field.w-input[placeholder='O que você vai fazer se atingir essa meta?']", {
                            value: goal.description(),
                            class: state.descriptionError() ? 'error' : false,
                            onchange: m.withAttr('value', goal.description)
                        })
                    )
                ]),
                state.descriptionError() ? inlineError('Descrição não pode ficar em branco.') : '',
                m('.u-margintop-30.w-row', [
                    m('.w-sub-col.w-col.w-col-5',
                        m('button.btn.btn-small.w-button', {
                            onclick: state.saveGoal
                        }, 'Salvar')
                    ),
                    (attrs.goal().id() ?
                        m('.w-sub-col.w-col.w-col-6',
                            m('button.btn.btn-small.btn-terciary.w-button', {
                                onclick: () => {
                                    attrs.goal().editing.toggle();
                                }
                            }, 'Cancelar')
                        ) : ''),
                    m('.w-col.w-col-1',
                        m('button.btn.btn-inline.btn-no-border.btn-small.btn-terciary.fa.fa-lg.fa-trash', {
                            onclick: state.confirmDelete
                        })
                    )
                ])
            ]);
    }
};

export default projectGoalEditCard;