wanglian/workbase-server

View on GitHub
imports/profile/client/profile.js

Summary

Maintainability
A
2 hrs
Test Coverage
import './profile.html';

import loadImage from "blueimp-load-image";
import SimpleSchema from 'simpl-schema';
import Swal from 'sweetalert2';
import autosize from 'autosize';

Template.ProfilePanel.events({
  "click .user-panel"(e, t) {
    e.preventDefault();
    Modal.show('ProfileModal', null, {
      backdrop: 'static'
    });
  }
});

Template.ProfileModal.onCreated(function() {
  this.signature = new ReactiveVar(Meteor.user().signature());
});

Template.ProfileModal.onRendered(function() {
  autosize($('form textarea'));
});

Template.ProfileModal.helpers({
  formCollection() {
    return Users;
  },
  formSchema() {
    return new SimpleSchema({
      language: {
        type: String,
        max: 50,
        optional: true,
        autoform: {
          type: 'select',
          label: I18n.t("profile_language"),
          options: [
            {label: "English", value: "en-US"},
            {label: "简体中文", value: "zh-CN"}
          ]
        }
      },
      skin: {
        type: String,
        max: 20,
        optional: true,
        autoform: {
          type: 'select',
          label: I18n.t("profile_skin"),
          options: [
            {label: I18n.t("profile_skin_blue"), value: "blue"},
            {label: I18n.t("profile_skin_purple"), value: "purple"},
            {label: I18n.t("profile_skin_red"), value: "red"},
            {label: I18n.t("profile_skin_green"), value: "green"},
            {label: I18n.t("profile_skin_yellow"), value: "yellow"}
          ]
        }
      },
      message: {
        type: String,
        max: 100,
        optional: true,
        autoform: {
          type: 'text',
          label: I18n.t("profile_personal_message")
        }
      },
      signature: {
        type: String,
        max: 200,
        optional: true,
        autoform: {
          type: 'textarea',
          label: I18n.t("profile_signature")
        }
      }
    });
  },
  signature() {
    return Template.instance().signature.get();
  }
});

Template.ProfileModal.events({
  "keyup form textarea[name=signature]"(e, t) {
    t.signature.set($(e.target).val());
  },
  "change form select[name=language]"(e, t) {
    e.preventDefault();
    Meteor.call('updateProfile', {language: $(e.target).val()}, (err, res) => {
      if (err) {
        console.log(err);
      } else {
        document.location.reload(true);
      }
    });
  },
  "change form select[name=skin]"(e, t) {
    e.preventDefault();
    Meteor.call('updateProfile', {skin: $(e.target).val()}, (err, res) => {
      if (err) {
        console.log(err);
      } else {
        document.location.reload(true);
      }
    });
  },
  "click #btn-cancel"(e, t) {
    e.preventDefault();
    history.go(-1);
  },
  "click #btn-upload-avatar"(e, t) {
    e.preventDefault();
    $('#avatar-file').click();
  },
  "change #avatar-file"(e, t) {
    Modal.show('AvatarUploadModal', {
      file: e.target.files[0]
    }, {
      backdrop: 'static'
    });
    $(e.target).val(""); // reset file input
  },
  "click #btn-change-password"(e, t) {
    e.preventDefault();
    Modal.show("ChangePasswordModal", null, {
      backdrop: 'static'
    });
  },
  "click #btn-sign-out"(e, t) {
    e.preventDefault();
    Modal.hide("ProfileModal");
    Router.go('/');
    Meteor.logout();
  }
});

AutoForm.hooks({
  "profile-form": {
    onSubmit(insertDoc, updateDoc, currentDoc) {
      this.event.preventDefault();

      Meteor.call('updateProfile', insertDoc, (err, res) => {
        if (err) {
          Swal({
            title: err,
            type: "error"
          });
        } else {
          if (res) {
            Swal({
              title: I18n.t("Profile Saved"),
              type: "info"
            });
          }
        }
        $(".modal").modal('hide');
        this.done();
      });
    }
  },
  "change-password-form": {
    onSubmit(insertDoc, updateDoc, currentDoc) {
      this.event.preventDefault();

      if (insertDoc.password !== insertDoc.passwordConfirm) {
        Swal({
          title: I18n.t("profile_password_not_match"),
          type: "warning"
        });
        return this.done();
      }
      Accounts.changePassword(insertDoc.passwordCurrent, insertDoc.password, (err) => {
        if (err) {
          console.log(err);
          Swal({
            title: I18n.t(err.reason),
            type: "error"
          });
        } else {
          Swal({
            title: I18n.t("profile_password_saved"),
            type: "info"
          });
          Modal.hide("ChangePasswordModal");
        }
        this.done();
      });
    }
  }
});

Template.AvatarUploadModal.onCreated(function() {
  this.currentUpload = new ReactiveVar(false);
});

Template.AvatarUploadModal.onRendered(function() {
  loadImage(this.data.file, (img) => {
    $("#image-preview").html(img);
    $("#image-preview img").addClass("img-responsive center-block");
  }, {
    maxWidth:  "570",
    maxHeight: "350"
  });
});

Template.AvatarUploadModal.helpers({
  currentUpload() {
    return Template.instance().currentUpload.get();
  }
});

Template.AvatarUploadModal.events({
  "click #btn-send-image"(e, t) {
    e.preventDefault();

    $('#btn-send-image').attr("disabled", "disabled");
    const upload = AvatarFiles.insert({
      file: t.data.file,
      streams: 'dynamic',
      chunkSize: 'dynamic'
    }, false);

    upload.on('start', function() {
      t.currentUpload.set(this);
    });

    upload.on('end', function(error, fileObj) {
      if (error) {
        alert('Error during upload: ' + error);
        $('#btn-send-image').attr("disabled", false);
      } else {
        // alert('File "' + fileObj.name + '" successfully uploaded');
        Meteor.call('updateProfile', {
          avatar: AvatarFiles.link(fileObj, 'thumbnail')
        }, (err, res) => {
          Modal.hide('AvatarUploadModal');
        });
      }
      t.currentUpload.set(false);
    });

    upload.start();
  }
});

Template.ChangePasswordModal.helpers({
  formCollection() {
    return Users;
  },
  formSchema() {
    return new SimpleSchema({
      passwordCurrent: {
        type: String,
        max: 30,
        autoform: {
          type: 'password',
          label: I18n.t("profile_current_password")
        }
      },
      password: {
        type: String,
        max: 30,
        autoform: {
          type: 'password',
          label: I18n.t("profile_new_password")
        }
      },
      passwordConfirm: {
        type: String,
        max: 30,
        autoform: {
          type: 'password',
          label: I18n.t("profile_confirm_password")
        }
      }
    });
  }
});