forgeplus-react/src/forge/Main/CoderRootDirectory.js

import React, { Component } from "react";
import { Menu, Spin } from "antd";
import { getImageUrl } from "educoder";
import { Link } from "react-router-dom";

import './list.css';
import SelectBranch from '../Branch/Select';
import CloneAddress from '../Branch/CloneAddress';
import RootTable from './RootTable';
import CoderRootFileDetail from './CoderRootFileDetail';
import { truncateCommitId } from '../common/util';
import RenderHtml from '../../components/render-html';
import Nodata from '../Nodata';

import axios from "axios";
/**
 * address:http和SSH，http_url(对应git地址)
 * filePath:点击目录时当前目录的路径
 * subfileType:保存当前点击目录的文件类型（显示目录列表时才显示新建文件，如果点击的是文件就不显示新建文件按钮）
 * readMeContent:根目录下面的readme文件内容
 */
function getPathUrl(array,index){
  if(array && array.length>0 && index){
    let str = "";
    for(let i=0;i<index;i++){
      str += `/${array[i]}`;
    }
    return str.substr(1);
  }
}
class CoderRootDirectory extends Component {
  constructor(props) {
    super(props);
    this.state = {
      address: "http",
      filePath: undefined,
      subFileType: undefined,
      readMeContent: undefined,
      readMeFile: undefined,

      isSpin: true,

      branchList: undefined,
      fileDetail: undefined,
      branchLastCommit: undefined,
      lastCommitAuthor: undefined,

      rootList: undefined,
      readOnly: true,
      zip_url:undefined,
      tar_url:undefined,
      chooseType:undefined,

      md:false,
      treeValue:undefined
    }
  }
  changeAddress = (address) => {
    this.setState({
      address,
    });
  };

  componentDidMount = () => {
    this.Init();
    this.getBranchs();
  };
  // 获取分支列表
  getBranchs=()=>{
    const { projectsId , owner } = this.props.match.params;
    axios.get(`/${owner}/${projectsId}/branches.json`).then(result=>{
      this.setState({
        branchList:result.data
      })
    }).catch((error)=>{})
  }

  componentDidUpdate = (prevState) => {
    const { location } = this.props;
    const prevlocation = prevState && prevState.location;
    if (location !== prevlocation) {
      this.setState({
        isSpin: true,
      });
      this.Init();
    }
  };

  Init = () => {
    let { pathname } = this.props.history.location;
    const { branchName , owner , projectsId } = this.props.match.params;
    const { defaultBranch } = this.props;
    let branch = branchName || defaultBranch;
    if (pathname && (pathname.indexOf(`/projects/${owner}/${projectsId}`) > -1 && pathname.indexOf(`/tree/${branchName}/`) > -1)) {
      let url = pathname.split(`/tree/${branchName}/`)[1];
      this.setState({treeValue:url})
      this.getFileDetail(decodeURI(url),branch);
    } else {
      this.getProjectRoot(branch);
    }
  };

  // 页面地址返回到主目录
  returnMain = (branch) => {
    const { projectsId , owner , branchName } = this.props.match.params;
    this.setState({
      readOnly:true,
      treeValue:undefined
    })
    this.props.history.push(`/projects/${owner}/${projectsId}${branchName?`/tree/${branchName}`:""}`);
    this.getProjectRoot(branch);
  };

  // 获取根目录
  getProjectRoot = (branch) => {
    const { projectsId , owner } = this.props.match.params;
    const url = `/${owner}/${projectsId}/entries.json`;
    axios.get(url, { params: { ref: branch } })
    .then((result) => {
      if (result) {
        let last_commit = result.data && result.data.last_commit;
        let entries = result.data && result.data.entries;
        this.setState({
          filePath: undefined,
          fileDetail: [],
          isSpin: false,
          branchLastCommit: last_commit && last_commit.commit,
          lastCommitAuthor:
            last_commit && (last_commit.author || (last_commit.commit && last_commit.commit.author)),
          zip_url: result.data.zip_url,
          tar_url: result.data.tar_url
        });
        if (entries && entries.length > 0) {
          this.renderData(entries);
        }
        this.setState({
          rootList: entries,
          subFileType: true,
        });
      }
    }).catch((error) => {});
  };

  ChangeFile = (arr, readOnly) => {
    const { projectsId , owner } = this.props.match.params;
    //点击直接跳转页面 加载一次路由
    this.props.history.push(`/projects/${owner}/${projectsId}/tree/${arr.path}`);
    this.setState({
      readOnly: readOnly,
      chooseType:"file"
    });
  };

  // 获取子目录
  getFileDetail = (path, ref) => {
    this.setState({
      filePath: decodeURI(path),
    });
    const { projectsId , owner , branchName } = this.props.match.params;
    const { chooseType } = this.state;
    const url = `/${owner}/${projectsId}/sub_entries.json`;
    axios.get(url,{
      params:{
        filepath:path,
        ref:ref || branchName,
        type:chooseType
      }
    }).then((result)=>{
      let entries = result.data && result.data.entries;
      this.setState({
        isSpin:false
      })
      if(result){
        if(entries){
          // 返回对象entries.type则是文件类型，否则是文件夹
          if(entries.type){
            this.setState({
              fileDetail:[entries],
              rootList:[],
              subFileType:false
            })
          }else{
            this.setState({
              fileDetail:[],
              rootList:entries,
              branchLastCommit:result.data.last_commit && result.data.last_commit.commit,
              lastCommitAuthor:result.data.last_commit && (result.data.last_commit.author || (result.data.last_commit.commit && result.data.last_commit.commit.author))
            })
            this.renderData(entries);
          }
        }else{
          this.setState({
            fileDetail:[],
            rootList:[],
            isSpin:false,
            subFileType:false
          })
        }
      }
    })
    .catch((error) => {
      this.setState({
        isSpin:false
      })
      console.log(error);
    });
  };

  renderData = (data) => {
    const rootList = [];
    const readMeContent = [];
    const readMeFile = [];
    data && data.map((item, key) => {
      rootList.push({
        key,
        message: item.commit && item.commit.message,
        ...item,
      });
      if (item.is_readme_file) {
        readMeContent.push({ ...item });
        readMeFile.push({ ...item });
      }
    });
    this.setState({
      rootList: rootList,
      readMeContent,
      readMeFile,
    });
  };

  // 点击跳转到子目录
  goToSubRoot=(path,type,filename)=>{
    this.setState({
      chooseType:type
    })
    const { projectsId, owner , branchName } = this.props.match.params;
    const { defaultBranch } = this.props;
    this.props.history.push(`/projects/${owner}/${projectsId}${`/tree/${branchName || defaultBranch}`}${path?`/${path}`:""}`);
    if(filename.substring(filename.length - 3) === ".md"){
      this.setState({
        md:true
      })
    }else{
      this.setState({
        md:false
      })
    }
  };

  // readme文件内容
  renderReadMeContent = (readMeContent, permission) => {
    const { fileDetail, readMeFile } = this.state;
    if (fileDetail && fileDetail.length !== 0) {
      return;
    }
    if (readMeContent && readMeContent.length > 0) {
      return (
        <div className="commonBox">
          <div className="commonBox-title">
            <span className="mr10">
              <i className="iconfont icon-wenjian1 font-16 color-grey-9 fl mt3"></i>
            </span>
            <span className="commonBox-title-read">
              {readMeContent[0].name}
            </span>
            {permission ?
              <a
                onClick={() => this.ChangeFile(readMeFile[0], false)}
                className="ml20 pull-right"
              >
                <i className="iconfont icon-bianji6 font-16 color-blue"></i>
              </a>
            :
              ""
            }
          </div>
          <div className="commonBox-info">
            {readMeContent[0].content ?
              <RenderHtml className="break_word_comments imageLayerParent" value={readMeContent[0].content} url={this.props.history.location}/>
            :
              <span>暂无~</span>
            }
          </div>
        </div>
      );
    }
  };

  // 选择分支
  changeBranch = (value) => {
    const { projectsId , owner } = this.props.match.params;
    const { treeValue } = this.state;
    let url = `/projects/${owner}/${projectsId}${value && `/tree/${value}`}${treeValue ? `/${treeValue}`:""}`;
    this.props.history.push(url);
  }

  // 子目录路径返回链接
  returnUlr=(url)=>{
    this.setState({
      chooseType:"dir",
      readOnly:true,
      treeValue:url
    })
    const { projectsId , owner , branchName } = this.props.match.params;
    this.props.history.push(`/projects/${owner}/${projectsId}/tree${branchName?`/${branchName}`:""}/${url}`);
  }

  onEdit=(readOnly)=>{
    this.setState({
      readOnly
    })
  }

  downloadUrl = (zip_url,tar_url) => {
    return(
      <Menu>
        {zip_url && (
          <Menu.Item>
            <a href={zip_url}>ZIP</a>
          </Menu.Item>
        )}
        {tar_url && (
          <Menu.Item>
            <a href={tar_url}>TAR.GZ</a>
          </Menu.Item>
        )}
      </Menu>
    )
  }

  title = (branchLastCommit,lastCommitAuthor) => {
    if (branchLastCommit) {
      const { projectsId , owner } = this.props.match.params;
      return (
        <div className="f-wrap-alignCenter">
          {lastCommitAuthor ? (
            <React.Fragment>
              {lastCommitAuthor.login ? (
                <Link
                  to={`/users/${lastCommitAuthor.login}/projects`}
                  className="show-user-link"
                >
                  <img
                    src={getImageUrl(`images/${lastCommitAuthor.image_url}`)}
                    className="radius mr10"
                    width="32"
                    height="32"
                    alt=""
                  />
                  <span className="mr15">{lastCommitAuthor.name}</span>
                </Link>
              ) : (
                <span className="mr15">{lastCommitAuthor.name}</span>
              )}
            </React.Fragment>
          ) : (
            ""
          )}
          <Link to={`/projects/${owner}/${projectsId}/commits/${truncateCommitId(`${branchLastCommit.sha}`)}`} className="color-blue flex-1 hide-1">
            {branchLastCommit.message}
          </Link>
          <span>{branchLastCommit.time_from_now}</span>
          <Link to={`/projects/${owner}/${projectsId}/commits/${truncateCommitId(`${branchLastCommit.sha}`)}`} className="commitKey">
            {truncateCommitId(branchLastCommit.sha)}
          </Link>
        </div>
      );
    }else{
      return false;
    }
  }

  
  render(){
    const { branchLastCommit , lastCommitAuthor , rootList ,filePath , fileDetail , subFileType , readMeContent, isSpin , zip_url , tar_url , branchList} = this.state;
    const { isManager , isDeveloper , projectDetail , platform , defaultBranch } = this.props;

    const { projectsId , owner , branchName } = this.props.match.params;
    let branch = branchName || defaultBranch;
    
    const columns = [
      {
        key:"name",
        dataIndex: 'name',
        width:"30%",
        render: (text,item) => (
          <a onClick={()=>this.goToSubRoot(item.path,item.type,text)} className="ml12 task-hide" style={{ display: "block", maxWidth: "345px" }}>
            <i className={ item.type === "file" ? "iconfont icon-wenjia font-15 color-green-file mr5" : "iconfont icon-wenjianjia1 color-green-file font-15 mr5"}></i>{text}
          </a>
        ),
      },
      {
        key:"message",
        dataIndex: "message",
        width: "60%",
        render: (text, item) =>
          item.commit && item.commit.message ? 
            <Link  to={`/projects/${owner}/${projectsId}/commits/${truncateCommitId(`${item.commit.sha}`)}`} title={item.commit.message} className="task-hide" style={{ display: "block", maxWidth: "670px" }} >
              {item.commit.message}
            </Link>
          : ""
      },
      {
        key:"time_from_now",
        dataIndex: "time_from_now",
        width: "10%",
        className: "edu-txt-right",
        render: (text, item) =>
          item.commit && item.commit.time_from_now ? 
            <a title={item.commit.created_at} className="mr12" style={{ cursor: "default", color: "#888" }} >
              {item.commit.time_from_now}
            </a>
          :""
      },
    ];
    const urlRoot = filePath === undefined ? "" : `/${filePath}`;
    let array = filePath && filePath.split("/");
    return (
      <Spin spinning={isSpin}>
        <div className="main" style={{minHeight:'400px'}}>
          <div className="f-wrap-between mb20">
            <div className="f-wrap-alignCenter">
              {
                platform ?
                <SelectBranch
                  repo_id={projectDetail && projectDetail.repo_id}
                  projectsId={projectsId}
                  branch={branch}
                  changeBranch={this.changeBranch}
                  owner={owner}
                  history={this.props.history}
                  branchList={branchList}
                ></SelectBranch>
                :
                <span>分支：<span className="color-grey-6">master</span></span>
              }

              {filePath && (
                <span className="ml20 font-16">
                  <a
                    onClick={() => this.returnMain(branch)}
                    className="color-blue"
                  >
                    {projectDetail && projectDetail.identifier}
                  </a>
                  {array &&
                    array.map((item, key) => {
                      return (
                        <React.Fragment>
                          {
                            key === array.length-1 ?
                              <span className="color-grey-6 subFileName" key={key}>{item}</span>
                              :
                              <a onClick={()=>this.returnUlr(`${getPathUrl(array,key+1)}`)} className="color-blue subFileName">{item}</a>
                          }
                        </React.Fragment>
                      );
                    })}
                </span>
              )}
            </div>
            <div className="f-wrap-alignCenter">
              {subFileType && (projectDetail && parseInt(projectDetail.type)) !== 2 && (isManager || isDeveloper) && platform && (
                <div>
                  <span>
                    <Link to={`/projects/${owner}/${projectsId}/${branch}/uploadfile${urlRoot}`} >
                      <span className="color-green mr30">上传文件</span>
                    </Link>
                  </span>
                  <span className="mr30">
                    <Link
                      to={`/projects/${owner}/${projectsId}/${branch}/newfile${urlRoot}`}
                    >
                      <span className="color-blue">新建文件</span>
                    </Link>
                  </span>
                </div>
              )}
              {projectDetail && projectDetail.clone_url && (
                <CloneAddress
                  http_url={projectDetail.clone_url}
                  downloadUrl={this.downloadUrl(zip_url,tar_url)}
                  showNotification={this.props.showNotification}
                ></CloneAddress>
              )}
            </div>
          </div>
          {/* 主目录列表 */}
          {rootList && rootList.length > 0 && (
            <RootTable
              columns={columns}
              data={rootList}
              title={() => this.title(branchLastCommit,lastCommitAuthor)}
            ></RootTable>
          )}
          {/* 子目录列表、文件 */}
          {fileDetail && fileDetail.length > 0 && (
            <CoderRootFileDetail
              detail={fileDetail[0]}
              {...this.props}
              {...this.state}
              readOnly={this.state.readOnly}
              onEdit={this.onEdit}
              currentBranch={branch}
            ></CoderRootFileDetail>
          )}
          {
            (rootList && rootList.length === 0) && (fileDetail && fileDetail.length === 0) && <Nodata _html="暂未发现文件！"/>
          }
          { rootList && this.renderReadMeContent(readMeContent, isManager || isDeveloper)}
      </div>
    </Spin>
    );
  }
}
export default CoderRootDirectory;