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地址)
 * branch:当前分支
 * 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",
      branch: "master",
      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
    }
  }
  changeAddress = (address) => {
    this.setState({
      address,
    });
  };

  componentDidMount = () => {
    this.Init();
  };

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

  Init = () => {
    let { search } = this.props.history.location;
    let branchName = undefined;
    if (search && search.indexOf("?branch=") > -1) {
      branchName = search.split("?branch=")[1];
      this.setState({
        branch: branchName,
      });
    }
    if (search && search.indexOf("?url=") > -1) {
      let url = search.split("?url=")[1];
      this.setState({
        filePath: url,
      });
      this.getFileDetail(url);
    } else {
      const { branch } = this.state;
      this.getProjectRoot(branchName || branch);
    }
  };

  // 页面地址返回到主目录
  returnMain = (branch) => {
    const { projectsId , owner } = this.props.match.params;
    this.setState({
      readOnly:true
    })
    this.props.history.push(`/projects/${owner}/${projectsId}`);
    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: undefined,
          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}?url=${arr.path}`);
    this.setState({
      readOnly: readOnly,
      chooseType:"file"
    });
  };

  renderUrl = (name, path, type) => {
    let list = [];
    const { filePath } = this.state;
    if (path.indexOf("/")) {
      const array = path.split("/");
      let str = "";
      array.map((i, k) => {
        str += "/" + i;
        return list.push({
          key: k,
          index: k,
          name: i,
          path: str.substr(1),
          type:
            filePath && filePath.length > 0
              ? filePath[k]
                ? filePath[k].type
                : type
              : type,
        });
      });
      const { projectsId , owner } = this.props.match.params;
      //点击直接跳转页面 加载一次路由
      this.props.history.push(
        `/projects/${owner}/${projectsId}?url=${str.substr(1)}`
      );
    } else {
      list.push({
        index: 0,
        name,
        path,
        type,
      });
    }
    this.setState({
      filePath: list,
    });
  };

  // 获取子目录
  getFileDetail = (path, ref) => {
    const { projectsId ,owner } = this.props.match.params;
    const { branch } = this.state;
    const url = `/${owner}/${projectsId}/sub_entries.json`;

    axios.get(url,{
      params:{
        filepath:path,
        ref:ref || branch
      }
    }).then((result)=>{
      let entries = result.data && result.data.entries;
      if( entries && entries.length > 0){
        let { chooseType } = this.state;
        // 当前返回的子目录只有一条数据，且这条数据返回的是文件类型
        if(entries.length === 1 && entries[0].type === "file" && chooseType ==="file"){
          this.setState({
            fileDetail:entries,
            rootList:undefined,
            isSpin:false,
            subFileType:false
          })
        }else{
          this.setState({
            fileDetail:undefined,
            rootList:entries,
            isSpin:false,
            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{
        console.log("均为undefined");
        this.setState({
          fileDetail:undefined,
          rootList:undefined,
          isSpin:false,
          subFileType:false
        })
      }
    })
    .catch((error) => {
      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 } = this.props.match.params;
    this.props.history.push(`/projects/${owner}/${projectsId}?url=${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) {
      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}
              />
            ) : (
              <span>暂无~</span>
            )}
          </div>
        </div>
      );
    }
  };

  // 选择分支
  changeBranch = (value) => {
    this.setState({
      branch: value,
      isSpin: true,
      readOnly:true
    });
    const { getTopCount } = this.props;
    getTopCount && getTopCount(value);

    let { search } = this.props.history.location;
    if (search && search.indexOf("?url=") > -1) {
      let url = search.split("?url=")[1];
      this.setState({
        filePath: url,
      });
      this.getFileDetail(url, value);
    } else {
      this.getProjectRoot(value);
    }
  }

  // 子目录路径返回链接
  returnUlr=(url)=>{
    this.setState({
      chooseType:"dir",
      readOnly:true
    })
    const { projectsId , owner } = this.props.match.params;
    this.props.history.push(`/projects/${owner}/${projectsId}?url=${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) => {
    console.log(branchLastCommit)
    if (branchLastCommit) {
      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>
          ) : (
            ""
          )}
          <span className="color-blue flex-1 hide-1">
            {branchLastCommit.message}
          </span>
          <span>{branchLastCommit.time_from_now}</span>
          <span className="commitKey">
            {truncateCommitId(branchLastCommit.sha)}
          </span>
        </div>
      );
    }else{
      return false;
    }
  }

  render(){
    const { branchLastCommit , lastCommitAuthor , rootList , branch ,filePath , fileDetail , subFileType , readMeContent, isSpin , zip_url , tar_url} = this.state;
    const { isManager , isDeveloper , projectDetail } = this.props;
    const { projectsId , owner } = this.props.match.params;
    const columns = [
      {
        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>
        ),
      },
      {
        dataIndex: "commit",
        width: "60%",
        render: (text, item) =>
          item.commit && item.commit.message ? 
            <span className="task-hide" style={{ display: "block", maxWidth: "670px" }} >
              {item.commit.message}
            </span>
          : ""
      },
      {
        dataIndex: "commit",
        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">
          <div className="f-wrap-between mb20">
            <div className="f-wrap-alignCenter">
              <SelectBranch
                repo_id={projectDetail && projectDetail.repo_id}
                projectsId={projectsId}
                branch={branch}
                changeBranch={this.changeBranch}
                owner={owner}
              ></SelectBranch>

              {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) && (
                <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 && (
            <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}
            ></CoderRootFileDetail>
          )}
          {
            !rootList && !fileDetail && <Nodata _html="暂未发现当前文件！"/>
          }
          {/* readme.txt (isManager || isDeveloper)*/}
          { rootList && this.renderReadMeContent(readMeContent, isManager || isDeveloper)}
        </div>
      </Spin>
    );
  }
}
export default CoderRootDirectory;