MAth-Cloud-3.0.0/cro.ipsocloud.com/webapp_webpack/src/pages/investigators.f7.html

<template>
  <div class="page">
    <div class="page no-navbar">

      <div class="page-content">

        <div class="block-title">{{js "this.type=='reader'?'Readers':'Investigators'"}}</div>
        <div class="block block-strong">
          <form class="list inline-labels no-hairlines-md" id="form-user" style="margin:0;" autocomplete="off">
            <ul>
              <li class="item-content item-input" style="border-bottom: 1px solid lightgray">
                <div class="item-inner">
                  <div class="item-title" style="width: 150px;">Select action:</div>
                  <div class="item-input-wrap">
                    <select name="userIdx" @change="actionChange">
                      <option value="-1" data-ID="0">Create new investigator</option>
                      {{#each users}}
                        <option value="{{@index}}" data-ID="{{ID}}">Edit {{firstname}} {{lastname}}</option>
                      {{/each}}
                    </select>
                  </div>
                </div>
              </li>
              <div class="block-title" style="font-size: 16px; font-weight: 600;">Organization settings</div>
              <li class="item-content item-input" style="border-bottom: 1px solid lightgray">
                <div class="item-inner">
                  <div class="item-title" style="width: 150px;">Center <span style="color:red">*</span></div>
                  <div class="item-input-wrap">
                    <select name="centerID" required validate>
                      {{#each organizations}}
                        <option value="{{center_ID}}">{{org_name}} / {{probe_name}}</option>
                      {{/each}}
                    </select>
                  </div>
                </div>
              </li>
              <div class="block-title" style="font-size: 16px; font-weight: 600;">Investigator settings</div>
              <li class="item-content item-input">
                <div class="item-inner">
                  <div class="item-title" style="width: 150px;">E-mail <span style="color:red">*</span></div>
                  <div class="item-input-wrap">
                    <input type="email" name="email" placeholder="E-mail" value="">
                  </div>
                </div>
              </li>
              <li class="item-content item-input">
                <div class="item-inner">
                  <div class="item-title" style="width: 150px;">Firstname <span style="color:red">*</span></div>
                  <div class="item-input-wrap">
                    <input type="text" name="firstname" placeholder="Firstname" value="">
                  </div>
                </div>
              </li>
              <li class="item-content item-input">
                <div class="item-inner">
                  <div class="item-title" style="width: 150px;">Lastname <span style="color:red">*</span></div>
                  <div class="item-input-wrap">
                    <input type="text" name="lastname" placeholder="Lastname" value="">
                  </div>
                </div>
              </li>
              <li class="item-content item-input">
                <div class="item-inner">
                  <div class="item-title" style="width: 150px;">Phone <span style="color:red">*</span></div>
                  <div class="item-input-wrap">
                    <input type="tel" name="phone" placeholder="Phone number" value="">
                  </div>
                </div>
              </li>
              <li class="item-content item-input" style="border-bottom: 1px solid lightgray;">
                <div class="item-inner">
                  <div class="item-title" style="width: 150px;">Active</div>
                  <div class="item-input-wrap" style="display:flex; flex-shrink:1;">
                    <label class="toggle toggle-init">
                      <input name="active" type="checkbox" checked />
                      <span class="toggle-icon"></span>
                    </label>
                  </div>
                </div>
              </li>
            </ul>
          </form>
          <div class="row" style="justify-content: center; margin-top:16px;">
            <div>
              <button class="button button-fill" @click="add">Save</button>
            </div>
          </div>
        </div>

      </div>
              
    </div>
  </div>
</template>
<script>
  export default {
    on: {
      pageInit: function() {
      }
    },
    methods: {
      actionChange: function() {
        let idx = $$('select[name="userIdx"]').val();
        console.log(idx);
        console.log(this);
        if(idx==-1) {
          $$('#form-user')[0].reset();
          $$('input[name="active"]').prop('checked',true);
        }
        else {
          $$('select[name="centerID"]').val(this.users[idx].fk_center);
          $$('input[name="email"]').val(this.users[idx].email);
          $$('input[name="firstname"]').val(this.users[idx].firstname);
          $$('input[name="lastname"]').val(this.users[idx].lastname);
          $$('input[name="phone"]').val(this.users[idx].phone);
          $$('input[name="active"]').prop('checked',this.users[idx].active==1?true:false);
        }
      },
      add: function() {
        let p = app.form.convertToData('#form-user');
        if(p.email=='' || p.firstname=='' || p.lastname=='' || p.phone=='') {
          app.dialog.alert('Please fill the form.');
        }
        else if(!global.tools.validateEmail(p.email)) {
          app.dialog.alert('Invalid email.');
        }
        else {
          let idx = $$('select[name="userIdx"]').val();
          p.active = p.active.length?1:0;
          var postData = {
            apiKey: '',
            userID: idx==-1?0:this.users[idx].ID,
            user: p,
            type: 'investigator'
          };
          console.log(postData);

          app.preloader.show();
          app.request.post(app.data.config.apiBaseURL + '/ct_admin/users/?apiKey=', postData, function (data) {
            // Refresh token if needed
            app.methods.refreshToken(data);
            // Process response
            console.log("ct_admin/users", data);
            app.preloader.hide();
            if (data.result == 'ERROR') {
              switch (data.reason) {
                case 'denied':
                  app.methods.signout('Access revoked. Please signin again.');
                  break;
                case 'internal_error':
                  app.dialog.alert("Internal error.");
                  break;
              }
            }
            else {
              if(parseInt(postData.userID)==0) {
                var passwordLink = app.data.config.appBaseURL.replace('cro','www') + '/?password_token=' + data.password_token;
                console.log('passwordLink', passwordLink);          
                // Mail 
                let message = "Dear "+p.lastname+" "+p.firstname+",<br/><br/>Your INVESTIGATOR account has been created.<br>Please follow the link below in order to choose your password:<br/>##passwordLink<br/><br/>Thank you!";
                var data = {
                  to: p.email,
                  from: app.data.user.email,
                  subject: "Account validation",
                  message: message.replace('##passwordLink', passwordLink),
                  apiKey: '',
                }
                app.preloader.show();
                app.request.post(app.data.config.apiBaseURL + '/mailer/send/', data, function (data) {
                  console.log('mailer/send', data);
                  app.preloader.hide();
                  if (data.result == 'OK') {
                    app.dialog.alert("E-mail sent to the new investigator.");
                    app.views.workspaceView.router.navigate('/investigators/', { reloadCurrent: true, ignoreCache: true });
                  }
                  else {
                    app.dialog.alert("Mail error (" + data.message + ").");
                  }
                }, function (data) {
                  console.log('error', data);
                }, 'json');
              }
              else {
                app.views.workspaceView.router.navigate('/investigators/', { reloadCurrent: true, ignoreCache: true });
              }
            }
          }, function (data) {
            console.log('error', data);
            app.preloader.hide();
            app.dialog.alert("Server unavailable.");
          }, 'json');          
        }
      }
    }
  }
</script>