search

mufasubhai / situo

Asana clone for full stack project
4 stars 1 forks source link

readme

situo

Situo is a clone of the popular team project management and productivity suite, Asana. Users can add projects, add tasks. Update projects and tasks and mark tasks as complete. Other features are in development! Live Site

Technologies

Design Docs

Task Completion

Task Gif

Task Update Functionality

Tasks update and disappear from relevant pages on click through a combination of filtering, status updating and style changes. These changes are set up on component pages. 

updateStatus() {
    (this.state.status === 'not-started') ? this.setState({ status: 'started' }, () => this.props.updateTask(this.state)) :
      (this.state.status === 'started') ? this.setState({ status: 'complete' }, () => this.props.updateTask(this.state)) : this.setState({ status: 'not-started' }, () => this.props.updateTask(this.state))
  }
  updateStatusField() {
    this.updateStatus();
  }
  render () {
    return (
    <li className="task_index_item">
        <button className="check_mark_button col_1" onClick={this.updateStatusField}>

          {
            ((this.props.task.status === 'not-started')) ?
              <svg className="check_mark_small not-started" focusable="false" viewBox="0 0 32 32">
              </svg>
              : ((this.props.task.status === 'started')) ?
                <svg className="check_mark_small started" focusable="false" viewBox="0 0 32 32">
                </svg>
                :
                <svg className="check_mark_small complete" focusable="false" viewBox="0 0 32 32">
                </svg>

          }
        </button>
class TaskIndex extends React.Component {
    constructor(props) {
        super(props)
    }
    componentDidMount() {
        this.props.fetchTasks(); 
    }
    render() {   
        const userTasks = this.props.tasks.filter(task => (task.owner_id === this.props.id ));
        const incompleteTasks = userTasks.filter(task => (task.status !== 'complete'));
        const { tasks, deleteTask, updateTask} = this.props;
        return ( 
                <ul className='home_task_list'>
                    {
                        incompleteTasks.map(task => (
                            <TaskIndexItem
                            task={task}
                            deleteTask={deleteTask}
                            updateTask={updateTask}
                            key={task.id}
                            />
                            ))                    
                        }
                </ul>
        )
    }
}
export default TaskIndex;

Project Creation & Modal Updating

Project creation and modal updating, with style! Project Gif

Shuffle Color!

Never look at the same page twice. Home icons shuffle colors to create a fun interface!

class ProjectIndexItem extends React.Component {
  constructor(props) {

    super(props)
  }
  render () {
    var arr = ['tile_card blue_card', 'tile_card purple_card', 'tile_card red_card', 'tile_card pink_card'];
    var idx = Math.floor(Math.random() * arr.length);
    const color = arr[idx]
    return ( 
      <Link to={`/tasklist/project/${this.props.project.id}`} >
      <div className="tile_container">  
      <div className="tile_structure">
        <div className={color}>

            <svg viewBox="-14 -14 50 50"className="multi_color_icon"   title="board" services="[object Object]"></svg>
              <div id="lui_87" className="icon_button" tabIndex="0" role="button" aria-disabled="false" aria-pressed="false"></div></div>
      </div>
        <div className="tile_title">{this.props.project.project_name}</div>
      </div>
    </Link >
    )
  }
}

export default ProjectIndexItem;

Roadmap