joywok-material-components/components/shareJoychat/index.js

<h1 align="center"> Joywok Material Components </h1>

import React from 'react';

import {Dialog, DialogTitle, DialogActions, DialogContent, Typography, IconButton, InputBase, Button} from '@material-ui/core';
// import moment from 'joywok-material-components/node_modules/moment';
import Avatar from '@material-ui/core/Avatar';

import CheckIcon from '@material-ui/icons/CheckCircleRounded';
import RadioIcon from '@material-ui/icons/RadioButtonUncheckedRounded';
import SearchIcon from '@material-ui/icons/Search';

import CloseIcon from '@material-ui/icons/Close';
import CacelIcon from '@material-ui/icons/CancelSharp';

import {CombineShareModal} from '../sharescope/CombineShareModal';

import request from '../utils/request';

require('./styles/index.css');


class ShareJoychat extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      localUsers: [],
      tmpUsers: [],
      selectedUsers: [],
      selectedUsersKeys: {},
      show: true,
      searchKey: ''
    }
    this.fetchUsers();
  }
  fetchUsers(){
    let ros = localStorage.getItem('roster' + selfinfo.id);
    if( ros===null || ros===undefined || null === '') ros = '{}';
    ros = JSON.parse( ros );
    ros = _.filter(ros, function(item){
      return item.type==='user' || item.type==='jw_n_user';
    });
    ros = _.pluck(ros, 'jid');
    ros = _.map(ros, (item)=>{
      return 'ids[]=' + item.replace('@joywok.com', '');
    });
    let that = this;
    $.ajax({
      type:'POST',
      url: '/openfile/usersinfo',
      data: ros.join('&'),
      success: function(d){
        let data = d.data || [];
        that.setState({localUsers: data, tmpUsers: data});
      }
    });
  }
  onClose = ()=>{
    this.setState({show: false});
    this.props.onClose();
  }
  onOk = ()=>{
    this.saveToLocal();
    this.sendFile();
    this.onClose();
  }
  saveToLocal(){
    let ros = {};
    _.each(this.state.localUsers, item=>{
      let jid = item.id + '@joywok.com';
      if( _.isEmpty( ros[jid] ) ){
        ros[jid] = {
          avatar: item.avatar,
          datatime: moment().format('X') * 1,
          jid: jid,
          last_str: i18n('label.n_file'),
          name: item.name,
          pinyin: item.pinyin,
          type: 'user',
          sub_id: '',
          unreadnum: 0
        }
      }
    });
    localStorage.setItem('roster' + selfinfo.id, JSON.stringify( ros ));
  }
  sendFile(){
    request('/api/files/sharefilestojoychat', {
      method: 'POST',
      body: JSON.stringify({
        users: this.state.selectedUsers,
        files: this.props.files
      })
    }).then(resp=>{
      console.log('xxxxx', resp);
    });
  }
  addUser = ()=>{
    let self = this;
    let params = {
      title: i18n('label.joychat-new-chat'),
      objTypes: 'onlyUser',
      searchInput: true,
      select: this.state.selectedUsers,
      // maxSelect: '1'
    }
    let a = CombineShareModal(params);
    a.events.on('save', function (objs) {
      let users = self.state.localUsers;
      let selUsers = self.state.selectedUsers;
      let selUsersKeys = self.state.selectedUsersKeys;
      users = users.concat( objs );
      users = _.uniq(users, i=>{
        return i.id
      });
      selUsers = selUsers.concat(objs);
      selUsers = _.uniq(selUsers, i=>{
        return i.id
      });
      _.each(objs, i=>{
        selUsersKeys[i.id] = true;
      });
      let d = { localUsers: users, selectedUsers: selUsers, selectedUsersKeys: selUsersKeys };
      if( _.isEmpty( $.trim(self.state.searchKey) ) ) d.tmpUsers = users;
      console.log(d, 'ddd')
      self.setState(d);
    });
    a.events.on('cancel', function (objs) {

    });
  }
  searchList = (e)=>{
    let key = e.target.value;
    let tmp = [];
    if( $.trim(key) === '' ){
      tmp = this.state.localUsers;
    }else{
      tmp = _.filter(this.state.localUsers, (item)=>{
        return item.name.indexOf(key)!==-1 || item.pinyin.indexOf(key)!==-1;
      });
    }
    this.setState({tmpUsers: tmp});
  }
  searchInput = ()=>{
    return <div className="jcs-mui-search">
      <SearchIcon />
      <InputBase onInput={this.searchList} className="jcs-mui-input" placeholder={i18n('placeholder.search')} />
    </div>;
  }
  render(){
    const mtitle = <DialogTitle className="jcs-mui-title">
        <Typography variant="subtitle1">{i18n('btn.share-to-chat')}</Typography>
        <IconButton aria-label="close" onClick={this.onClose} className="jcs-mui-close"><CloseIcon /></IconButton>
      </DialogTitle>;

    const content = <DialogContent dividers={true} className="jcs-mui-items">{this.tmpList()}{this.selectedList()}</DialogContent>;

    const btns = <DialogActions className="jcs-mui-btns">
      <Button variant="outlined" onClick={()=>this.onClose()} disableElevation={true}>{i18n('btn.cancel')}</Button>
      <Button color="secondary" disabled={this.state.selectedUsers.length<=0} variant="contained" onClick={()=>this.onOk()} disableElevation={true}>{i18n('btn.send')}</Button>
    </DialogActions>;
    return <Dialog open={this.state.show} className="jcs-mui-dialog" onClose={this.onClose} scroll="paper" fullWidth={true} maxWidth="md">
      {mtitle}
      {content}
      {btns}
    </Dialog>
  }
  tmpList = () => {
    // 'label.objs-been-selected'
    return <div className="jcs-mui-items-l">
      {
        this.searchInput()
      }
      <Button color="primary" className="jcs-mui-addbtn" variant="contained" onClick={()=>this.addUser()} disableElevation={true}>{i18n('label.joychat-new-chat')}</Button>
      <div className="jcs-mui-tip1">{i18n('label.joychat-lately')}</div>
      {
        this.state.tmpUsers.map(item=>{
          return <div>
            <Avatar alt={item.name} src={item.avatar.avatar_s} />
            <b>{item.name}</b>
            {
              this.state.selectedUsersKeys[item.id]===true?<IconButton aria-label="close" onClick={()=>{ this.selectItem({target:{checked: false, value: item.id}}, item); }} className="jcs-mui-check"><CheckIcon color="primary" /></IconButton>:
              <IconButton aria-label="close" onClick={()=>{ this.selectItem({target:{checked: true, value: item.id}}, item); }} className="jcs-mui-check"><RadioIcon /></IconButton>
            }
            </div>
        })
      }
    </div>
  }
  selectedList = ()=>{
    return <div className="jcs-mui-items-r">{
      this.state.selectedUsers.map(item=>{
        return <div>
          <Avatar alt={item.name} src={item.avatar.avatar_s} />
          <b>{item.name}</b>
          <IconButton aria-label="close" onClick={()=>{ this.selectItem({target:{checked: false, value: item.id}}, item); }} className="jcs-mui-cancel"><CacelIcon /></IconButton>
          </div>
      })
    }</div>
  }
  selectItem = (e, item)=>{
    let vv = this.state.selectedUsersKeys;
    let users = this.state.selectedUsers;
    if(e.target.checked===false){
      delete vv[e.target.value];
      users = _.filter(users, i=>{
        return i.id !== item.id;
      });
    }else{
      vv[e.target.value] = true;
      users.push(item);
    }
    this.setState({selectedUsersKeys: vv, selectedUsers: users});
  }
}


export default ShareJoychat;