kitchen-simulator 5.0.0-test.17 → 5.0.0-test.19

package/src/components/myprojects/index.jsx

@@ -0,0 +1,445 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import * as S from './styles';
+import {
+  API_SERVER_URL,
+  BG_COLOR_1,
+  BG_COLOR_HOVER,
+  DEFAULT_FONT_FAMILY,
+  SECONDARY_PURPLE_COLOR,
+  TEXT_COLOR_NEUTRAL_1,
+  TEXT_COLOR_NEUTRAL_4
+} from '../../constants';
+import axios from 'axios';
+import history from '../../@history';
+import moment from 'moment';
+
+const sortData = ['date', 'name'];
+
+const thumbnail = '/assets/img/project_img.png';
+
+export default class MyProjects extends Component {
+  constructor(props, context) {
+    super(props);
+
+    this.state = {
+      sortType: 'date',
+      searchValue: '',
+      viewType: 1, //1: detail, 2: tile
+      myProjects: []
+    };
+  }
+
+  getProjects() {
+    const user_email = sessionStorage.getItem('email');
+    const clientName = sessionStorage.getItem('visualizerName');
+
+    axios
+      .post(`${API_SERVER_URL}/api/project/getmyprojects`, {
+        email: user_email,
+        clientName
+      })
+      .then(res => {
+        if (res.data.success === true) {
+          this.setState({ myProjects: res.data.projects });
+        }
+      });
+  }
+  componentDidMount() {
+    this.getProjects();
+  }
+
+  openProject(role, token, pid, urmParam) {
+    const visualizerName = sessionStorage.getItem('visualizerName');
+    history.push({
+      pathname: `/${visualizerName}/project/${role}/${token}/${pid}?${urmParam}`
+    });
+    axios
+      .post(`${API_SERVER_URL}/api/project/loadPidProject`, {
+        pid: pid,
+        visualizerName: visualizerName
+      })
+      .then(async response => {
+        const { projectElement } = response.data;
+        if (projectElement.length === 0) return;
+        sessionStorage.setItem('projectTitle', projectElement[0].title);
+        this.context.projectActions.rename(projectElement[0].title);
+        sessionStorage.setItem('projectId', projectElement[0].id);
+        sessionStorage.setItem('email', projectElement[0].email);
+        sessionStorage.setItem('firstName', projectElement[0].firstName);
+        sessionStorage.setItem('lastName', projectElement[0].lastName);
+        sessionStorage.setItem('phone', projectElement[0].phone);
+        let jsonData;
+        if (projectElement[0].project_data) {
+          jsonData = JSON.parse(projectElement[0].project_data);
+        } else {
+          try {
+            jsonData = await axios.post(
+              `${constants.API_SERVER_URL}/api/project/loadPidData`,
+              { pid: match.params.pid }
+            ).data.data;
+          } catch (err) {
+            this.setState({
+              isSnackBarOpen: true,
+              snackBarMessage: err
+            });
+          }
+        }
+        jsonData.isLoadingCabinet = false;
+        this.context.projectActions.loadProject(
+          jsonData,
+          this.props.categoryData
+        );
+        this.props.setMyProjectsOpen(false);
+      });
+  }
+
+  getDateArray(date) {
+    let array = date.split(' ');
+    let date_array = [];
+    array[0].split('-').forEach(element => date_array.push(parseInt(element)));
+    array[1].split(':').forEach(element => date_array.push(parseInt(element)));
+    return date_array;
+  }
+
+  getDiffDate(date) {
+    const now_date = moment(new Date()).format('YYYY-MM-DD HH:mm:ss');
+    const saved_date = moment(date).format('YYYY-MM-DD HH:mm:ss');
+    let diffDate = '';
+    let now_date_array = this.getDateArray(now_date);
+    let saved_date_array = this.getDateArray(saved_date);
+    now_date_array.forEach((item, index) => {
+      if (item !== saved_date_array[index] && diffDate === '') {
+        diffDate = diffDate + (item - saved_date_array[index]);
+        switch (index) {
+          case 0:
+            diffDate = diffDate + ' year';
+            break;
+          case 1:
+            diffDate = diffDate + ' month';
+            break;
+          case 2:
+            diffDate = diffDate + ' day';
+            break;
+          case 3:
+            diffDate = diffDate + ' hour';
+            break;
+          case 4:
+            diffDate = diffDate + ' minute';
+            break;
+          case 5:
+            diffDate = diffDate + ' second';
+            break;
+          default:
+            break;
+        }
+        if (item - saved_date_array[index] !== 1) {
+          diffDate = diffDate + 's';
+        }
+      }
+    });
+    return diffDate;
+  }
+
+  sort(a, b) {}
+
+  render() {
+    const { sortType, searchValue, viewType, myProjects } = this.state;
+    const { token, role } = this.props.match.params;
+
+    return (
+      <S.DialogWrapper>
+        <S.Dialog>
+          <div
+            style={{ cursor: 'pointer', width: '100%', userSelect: 'none' }}
+            onClick={() => this.props.setMyProjectsOpen(false)}
+          >
+            <img
+              style={{ float: 'right', height: 25, transform: 'rotate(45deg)' }}
+              src="/assets/img/svg/bottombar/arrow-plus.svg"
+            />
+          </div>
+          <S.DialogTitle>Retrieve a saved projects</S.DialogTitle>
+          <S.DialogContent>
+            Select from the list below what file do you want to recover.
+          </S.DialogContent>
+          <S.DialogContentSelection>
+            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+              <div style={{ display: 'flex' }}>
+                <S.DialogContents style={{ fontSize: 13 }}>
+                  Sort by:
+                </S.DialogContents>
+                <S.SelectWrapper>
+                  <S.Select
+                    id="sort_select"
+                    onClick={() => {
+                      document.getElementById('arrow').style.transform =
+                        document.getElementById('arrow').style.transform ===
+                        'rotate(180deg)'
+                          ? 'unset'
+                          : 'rotate(180deg)';
+                      document.getElementById('sort_option').style.display =
+                        document.getElementById('sort_option').style.display ===
+                        'none'
+                          ? 'flex'
+                          : 'none';
+                      document.getElementById(
+                        'sort_select'
+                      ).style.borderBottomColor = SECONDARY_PURPLE_COLOR;
+                    }}
+                  >
+                    {sortType.charAt(0).toUpperCase() + sortType.substr(1)}
+                  </S.Select>
+                  <S.ArrowIcon
+                    id="arrow"
+                    maskImage="/assets/img/svg/bottombar/arrow-down.svg"
+                  />
+                  <div
+                    id="sort_option"
+                    style={{
+                      position: 'absolute',
+                      display: 'none',
+                      flexDirection: 'column',
+                      top: 30,
+                      zIndex: 100,
+                      width: 150,
+                      borderRadius: 5,
+                      backgroundColor: BG_COLOR_1,
+                      boxShadow:
+                        '0px 3px 5px -1px rgba(156, 154, 154, 0.2), 0px 6px 10px 0px rgba(156, 154, 154, 0.39), 0px 1px 18px 0px rgba(156, 154, 154, 0.12)'
+                    }}
+                  >
+                    {sortData.map(item => {
+                      return (
+                        <S.SelectOption
+                          onClick={() => {
+                            document.getElementById('arrow').style.transform =
+                              'unset';
+                            document.getElementById(
+                              'sort_option'
+                            ).style.display = 'none';
+                            document.getElementById(
+                              'sort_select'
+                            ).style.borderBottomColor = TEXT_COLOR_NEUTRAL_1;
+                            this.setState({ sortType: item });
+                          }}
+                          style={{
+                            backgroundColor:
+                              sortType === item && TEXT_COLOR_NEUTRAL_4
+                          }}
+                        >
+                          {item.charAt(0).toUpperCase() + item.substr(1)}
+                        </S.SelectOption>
+                      );
+                    })}
+                  </div>
+                </S.SelectWrapper>
+              </div>
+              <div style={{ position: 'relative' }}>
+                <img
+                  src="/assets/img/svg/lefttoolbar/search.svg"
+                  style={{
+                    position: 'absolute',
+                    left: 0,
+                    width: 35,
+                    height: 35,
+                    padding: 10
+                  }}
+                />
+                <S.SearchInput
+                  value={searchValue}
+                  onChange={e => this.setState({ searchValue: e.target.value })}
+                  placeholder="Search file names"
+                />
+              </div>
+              <div style={{ display: 'flex' }}>
+                <S.ActionButton
+                  onClick={() => this.setState({ viewType: 1 })}
+                  style={{ backgroundColor: viewType === 1 && BG_COLOR_HOVER }}
+                >
+                  <img src="/assets/img/svg/wizardstep/detail_view.svg" />
+                </S.ActionButton>
+                <S.ActionButton
+                  onClick={() => this.setState({ viewType: 2 })}
+                  style={{
+                    backgroundColor: viewType === 2 && BG_COLOR_HOVER,
+                    marginLeft: 10
+                  }}
+                >
+                  <img src="/assets/img/svg/wizardstep/tile_view.svg" />
+                </S.ActionButton>
+              </div>
+            </div>
+            <div
+              style={{
+                height: 400,
+                width: '100%',
+                scrollY: 'overflow',
+                marginTop: 10,
+                padding: 5
+              }}
+            >
+              {viewType === 1 ? (
+                <S.MyProjectsTable>
+                  <S.MyProjectsThead>
+                    <S.MyProjectsTh style={{ width: '40%' }}>
+                      Name
+                    </S.MyProjectsTh>
+                    <S.MyProjectsTh style={{ width: '60%' }}>
+                      Date
+                    </S.MyProjectsTh>
+                  </S.MyProjectsThead>
+                  {myProjects
+                    .sort((a, b) => {
+                      let value0, value1;
+                      switch (sortType) {
+                        case 'name':
+                          value0 = a.project_title;
+                          value1 = b.project_title;
+                          break;
+                        case 'date':
+                          value0 = b.create_date;
+                          value1 = a.create_date;
+                          break;
+                        default:
+                          break;
+                      }
+                      return value0 !== value1 ? (value0 < value1 ? -1 : 1) : 0;
+                    })
+                    .filter(
+                      it =>
+                        searchValue === '' ||
+                        it.project_title.search(searchValue) !== -1 ||
+                        it.project_title
+                          .toLowerCase()
+                          .search(searchValue.toLowerCase()) !== -1
+                    )
+                    .map(item => {
+                      const date = this.getDiffDate(item.create_date);
+                      return (
+                        <S.MyProjectsThead
+                          style={{
+                            backgroundColor: BG_COLOR_1,
+                            borderBottom: '2px solid #FAFAFF'
+                          }}
+                        >
+                          <S.MyProjectsTh
+                            style={{
+                              width: '40%',
+                              display: 'flex',
+                              alignItems: 'center'
+                            }}
+                          >
+                            <img src={thumbnail} style={{ width: 60 }} />
+                            <span style={{ marginLeft: 10 }}>
+                              {item.project_title.charAt(0).toUpperCase() +
+                                item.project_title.substr(1)}
+                            </span>
+                          </S.MyProjectsTh>
+                          <S.MyProjectsTh
+                            style={{
+                              width: '60%',
+                              display: 'flex',
+                              justifyContent: 'space-between',
+                              alignItems: 'center'
+                            }}
+                          >
+                            {date + ' ago'}
+                            <S.ActionButton
+                              onClick={() =>
+                                this.openProject(
+                                  role,
+                                  token,
+                                  item.id,
+                                  item.urmParam
+                                )
+                              }
+                              style={{ width: 'max-content' }}
+                            >
+                              Open
+                            </S.ActionButton>
+                          </S.MyProjectsTh>
+                        </S.MyProjectsThead>
+                      );
+                    })}
+                </S.MyProjectsTable>
+              ) : (
+                <div style={{ flexWrap: 'wrap', display: 'flex' }}>
+                  {myProjects
+                    .sort((a, b) => {
+                      let value0, value1;
+                      switch (sortType) {
+                        case 'name':
+                          value0 = a.project_title;
+                          value1 = b.project_title;
+                          break;
+                        case 'date':
+                          value0 = b.create_date;
+                          value1 = a.create_date;
+                          break;
+                        default:
+                          break;
+                      }
+                      return value0 !== value1 ? (value0 < value1 ? -1 : 1) : 0;
+                    })
+                    .filter(
+                      it =>
+                        searchValue === '' ||
+                        it.project_title.search(searchValue) !== -1 ||
+                        it.project_title
+                          .toLowerCase()
+                          .search(searchValue.toLowerCase()) !== -1
+                    )
+                    .map(item => {
+                      const date = this.getDiffDate(item.create_date);
+                      return (
+                        <S.TileItem
+                          onClick={() =>
+                            this.openProject(
+                              role,
+                              token,
+                              item.id,
+                              item.urmParam
+                            )
+                          }
+                        >
+                          <img src={thumbnail} style={{ width: '100%' }} />
+                          <span style={{ marginTop: 10 }}>
+                            {item.project_title.charAt(0).toUpperCase() +
+                              item.project_title.substr(1)}
+                          </span>
+                          <span
+                            style={{
+                              fontSize: 13,
+                              fontWeight: 100,
+                              marginTop: 5
+                            }}
+                          >
+                            {date + ' ago'}
+                          </span>
+                        </S.TileItem>
+                      );
+                    })}
+                </div>
+              )}
+            </div>
+          </S.DialogContentSelection>
+        </S.Dialog>
+      </S.DialogWrapper>
+    );
+  }
+}
+
+MyProjects.propTypes = {
+  state: PropTypes.object.isRequired,
+  content: PropTypes.number.isRequired
+};
+
+MyProjects.contextTypes = {
+  projectActions: PropTypes.object.isRequired,
+  viewer2DActions: PropTypes.object.isRequired,
+  viewer3DActions: PropTypes.object.isRequired,
+  linesActions: PropTypes.object.isRequired,
+  itemsActions: PropTypes.object.isRequired,
+  catalog: PropTypes.object.isRequired
+};

package/src/components/myprojects/styles.js

@@ -0,0 +1,241 @@
+import {
+  BG_COLOR_0,
+  BG_COLOR_HOVER,
+  DEFAULT_FONT_FAMILY,
+  SECONDARY_PURPLE_COLOR,
+  TEXT_COLOR_NEUTRAL_0,
+  TEXT_COLOR_NEUTRAL_1,
+  TEXT_COLOR_NEUTRAL_2,
+  TEXT_COLOR_NEUTRAL_3
+} from '../../constants';
+import styled from 'styled-components';
+import MyProjects from './index';
+
+export const DialogWrapper = styled.div`
+  position: absolute;
+  left: 0;
+  top: 60px;
+  width: 100%;
+  height: calc(100% - 60px);
+  display: flex;
+`;
+
+export const Dialog = styled.div`
+  position: relative;
+  margin: auto;
+  width: 600px;
+  display: flex;
+  flex-direction: column;
+  padding: 30px;
+  user-select: none;
+  text-align: center;
+  border-radius: 10px;
+  z-index: 10;
+  background-color: rgb(255, 255, 255);
+  box-shadow: 0px 3px 5px -1px rgba(156, 154, 154, 0.2),
+    0px 6px 10px 0px rgba(156, 154, 154, 0.39),
+    0px 1px 18px 0px rgba(156, 154, 154, 0.12);
+`;
+
+export const DialogTitle = styled.span`
+  color: ${TEXT_COLOR_NEUTRAL_1};
+  font-family: ${DEFAULT_FONT_FAMILY};
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 30px;
+  text-align: left;
+`;
+
+export const DialogContent = styled.span`
+  font-family: ${DEFAULT_FONT_FAMILY};
+  color: ${TEXT_COLOR_NEUTRAL_1};
+  padding: 10px 0px;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 18px;
+  text-align: left;
+  width: 100%;
+`;
+
+export const DialogContentSelection = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 10px 0px;
+  max-height: calc(100vh - 300px);
+  overflow-y: scroll;
+`;
+
+export const DialogContents = styled.span`
+  font-family: ${DEFAULT_FONT_FAMILY};
+  color: ${TEXT_COLOR_NEUTRAL_1};
+  padding: 10px 0px;
+
+  @media screen and (min-width: 1024) {
+    font-size: 11px;
+  }
+  @media screen and (max-width: 1024) {
+    font-size: 11px;
+  }
+  @media screen and (min-width: 1366) {
+    font-size: 13px;
+  }
+  @media screen and (max-width: 1366) {
+    font-size: 13px;
+  }
+  @media screen and (min-width: 1440) {
+    font-size: 16px;
+  }
+  @media screen and (max-width: 1440) {
+    font-size: 16px;
+  }
+  font-weight: 400;
+  line-height: 18px;
+  text-align: left;
+`;
+
+export const SelectWrapper = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  margin-left: 10px;
+`;
+
+export const Select = styled.div`
+  border-bottom: 2px solid ${TEXT_COLOR_NEUTRAL_1};
+  width: 150px;
+  text-align: left;
+  font-family: ${DEFAULT_FONT_FAMILY};
+  color: ${TEXT_COLOR_NEUTRAL_1};
+  cursor: pointer;
+  :hover {
+    border-bottom-color: ${SECONDARY_PURPLE_COLOR};
+  }
+`;
+
+export const ArrowIcon = styled.img`
+  position: absolute;
+  width: 15px;
+  height: 9px;
+  background-color: ${TEXT_COLOR_NEUTRAL_3};
+  top: 10px;
+  right: 10px;
+  -webkit-mask-image: url(${props => props.maskImage});
+  -webkit-mask-size: 100% 100%;
+  -webkit-mask-repeat: no-repeat;
+`;
+
+export const SelectOption = styled.span`
+  font-size: 13px;
+  padding: 12px 20px;
+  font-family: ${DEFAULT_FONT_FAMILY};
+  color: ${TEXT_COLOR_NEUTRAL_0};
+  font-weight: 600;
+  text-align: left;
+  cursor: pointer;
+  :hover {
+    background-color: ${BG_COLOR_HOVER};
+  }
+`;
+
+export const SearchInput = styled.input`
+  outline: 0;
+  border: 2px solid ${TEXT_COLOR_NEUTRAL_3};
+  height: 35px;
+  padding: 5px;
+  padding-left: 35px;
+  border-radius: 7px;
+`;
+
+export const MyProjectsTable = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const MyProjectsThead = styled.div`
+  background-color: ${BG_COLOR_0};
+  display: flex;
+  align-items: center;
+  background-color: #fafaff;
+`;
+
+export const MyProjectsTh = styled.div`
+  font-family: ${DEFAULT_FONT_FAMILY};
+
+  @media screen and (min-width: 1024) {
+    font-size: 11px;
+  }
+  @media screen and (max-width: 1024) {
+    font-size: 11px;
+  }
+  @media screen and (min-width: 1366) {
+    font-size: 13px;
+  }
+  @media screen and (max-width: 1366) {
+    font-size: 13px;
+  }
+  @media screen and (min-width: 1440) {
+    font-size: 16px;
+  }
+  @media screen and (max-width: 1440) {
+    font-size: 16px;
+  }
+  line-height: 13px;
+  text-align: left;
+  font-weight: 600;
+  margin: 5px;
+  line-height: normal;
+  color: ${TEXT_COLOR_NEUTRAL_2};
+`;
+
+export const ActionButton = styled.div`
+  border-radius: 5px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  color: ${SECONDARY_PURPLE_COLOR};
+  width: 35px;
+  height: 35px;
+  padding: 10px;
+  :hover {
+    background-color: ${BG_COLOR_HOVER};
+  }
+`;
+
+export const TileItem = styled.div`
+  width: 150px;
+  display: flex;
+  flex-direction: column;
+  font-family: ${DEFAULT_FONT_FAMILY};
+
+  @media screen and (min-width: 1024) {
+    font-size: 11px;
+  }
+  @media screen and (max-width: 1024) {
+    font-size: 11px;
+  }
+  @media screen and (min-width: 1366) {
+    font-size: 13px;
+  }
+  @media screen and (max-width: 1366) {
+    font-size: 13px;
+  }
+  @media screen and (min-width: 1440) {
+    font-size: 16px;
+  }
+  @media screen and (max-width: 1440) {
+    font-size: 16px;
+  }
+  line-height: 13px;
+  text-align: left;
+  font-weight: 600;
+  line-height: normal;
+  color: ${TEXT_COLOR_NEUTRAL_2};
+  border-radius: 10px;
+  border: 2px solid #fafaff;
+  padding: 15px;
+  cursor: pointer;
+  margin: 10px;
+  :hover {
+    background-color: #fafaff;
+  }
+`;