Add save/cancel button to lesson hours expansion panel

Author: xnerhu

3-panel/src/imports/materialdesign/components/TimePicker/index.js

@@ -85,7 +85,6 @@ export default class TimePicker extends Component {
 
     if (hoursTickIndex < 0) console.log('cant find hour tick index')
     if (minutesTickIndex < 0) console.log('cant find minutes tick index')
-    console.log(hoursTickIndex, minutesTickIndex)
 
     const hoursTick = hoursClock.ticks[hoursTickIndex]
     const minutesTick = minutesClock.ticks[minutesTickIndex]

3-panel/src/views/Pages/LessonsPlan/components/AddLessonDialog/index.js

@@ -59,9 +59,10 @@ export default class AddLessonDialog extends Component {
       const error = DialogManager.checkForErrors(this)
 
       if (!error) {
-        lessonsPlanPage.lessonsPlan[index].subjects.push(this.textField.getValue())
+        lessonsPlanPage.lessonsPlan.plan[index].subjects.push(this.textField.getValue())
         this.day.addSubjects()
-        this.day.toggleActionButtons(true)
+        this.day.isEdited = true
+        lessonsPlanPage.toggleActionButtons(true, this.day.actionButtons)
 
         dialog.toggle(false)
       }

3-panel/src/views/Pages/LessonsPlan/components/Day/components/Subject/index.js

@@ -71,6 +71,16 @@ export default class Subject extends Component {
     this.touched = true
   }
 
+  setTime () {
+    const day = this.props.getDay()
+    const lessonsPlanPage = day.props.getLessonsPlanPage()
+
+    const indexInSubjects = day.subjects.indexOf(this)
+    const index = (indexInSubjects < 0) ? day.subjects.length : indexInSubjects
+
+    this.elements.hour.innerHTML = lessonsPlanPage.lessonsPlan.start[index] + ' - ' + lessonsPlanPage.lessonsPlan.finish[index]
+  }
+
   render () {
     return (
       <div className='subject' ref='root' onMouseDown={this.onMouseDown} onMouseEnter={this.onMouseEnter}>
@@ -88,13 +98,10 @@ export default class Subject extends Component {
   afterRender () {
     const props = this.props
     const day = props.getDay()
-    const lessonsPlanPage = day.props.getLessonsPlanPage()
 
+    this.setTime()
     day.subjects.push(this)
 
-    const index = day.subjects.length - 1
-    this.elements.hour.innerHTML = lessonsPlanPage.lessonsStart[index] + ' - ' + lessonsPlanPage.lessonsFinish[index]
-
     if (props.menuIconRippleStyle == null) {
       props.menuIconRippleStyle = {
         backgroundColor: '#000',

3-panel/src/views/Pages/LessonsPlan/components/Day/index.js

@@ -16,6 +16,7 @@ export default class Day extends Component {
 
     this.lastEnteredSubject = null
 
+    this.isEdited = false
     this.isSaving = false
 
     this.materialButtonRippleStyle = {
@@ -77,23 +78,24 @@ export default class Day extends Component {
    * @param {Subject} moved subject
    */
   toggleMovingMode (flag, subject) {
+    const lessonsPlanPage = this.props.getLessonsPlanPage()
+
     if (flag) {
       this.isMovingMode = true
       this.movedSubject = subject
 
       window.addEventListener('mouseup', this.onWindowMouseUp)
 
-      this.toggleActionButtons(true)
+      this.isEdited = true
+      lessonsPlanPage.toggleActionButtons(true, this.actionButtons)
     } else {
       window.removeEventListener('mouseup', this.onWindowMouseUp)
 
       if (this.lastEnteredSubject != null) {
         const oldIndex = this.subjects.indexOf(this.movedSubject)
         const newIndex = this.subjects.indexOf(this.lastEnteredSubject)
 
-        const lessonsPlanPage = this.props.getLessonsPlanPage()
-
-        lessonsPlanPage.lessonsPlan[lessonsPlanPage.days.indexOf(this)].subjects = this.props.data.subjects.move(oldIndex, newIndex)
+        lessonsPlanPage.lessonsPlan.plan[lessonsPlanPage.days.indexOf(this)].subjects = this.props.data.subjects.move(oldIndex, newIndex)
 
         this.clearBorderFromLastEnterSubject()
         this.addSubjects()
@@ -133,11 +135,12 @@ export default class Day extends Component {
       const lessonsPlanPage = this.props.getLessonsPlanPage()
 
       const index = lessonsPlanPage.days.indexOf(this)
-      lessonsPlanPage.lessonsPlan[index].subjects = JSON.parse(JSON.stringify(lessonsPlanPage.lessonsPlanCopy[index])).subjects // Same weird problem. Can't clone object copy of lessons plan.
+      lessonsPlanPage.lessonsPlan.plan[index].subjects = JSON.parse(JSON.stringify(lessonsPlanPage.lessonsPlanCopy.plan[index])).subjects // Same weird problem. Can't clone object copy of lessons plan.
 
       this.addSubjects()
+      this.isEdited = false
 
-      this.toggleActionButtons(false)
+      lessonsPlanPage.toggleActionButtons(false, this.actionButtons)
     }
   }
 
@@ -149,32 +152,42 @@ export default class Day extends Component {
   onSaveButtonClick = (e) => {
     const self = this
 
-    const subjectsContainer = this.subjectsContainer
-    const buttonsContainer = this.buttonsContainer
-
     const lessonsPlanPage = this.props.getLessonsPlanPage()
-    const preloaderRoot = this.preloader.getRoot()
+    const lessonHours = lessonsPlanPage.elements.lessonHours
 
-    subjectsContainer.style.opacity = '0'
-    subjectsContainer.classList.add('disable-cursor-pointer')
-
-    buttonsContainer.style.height = '0px'
-    this.toggleActionButtons(false)
+    lessonsPlanPage.toggleSavingAnimation(true, this)
     this.isSaving = true
+    this.isEdited = false
 
-    preloaderRoot.style.display = 'block'
+    const edited = []
 
-    setTimeout(function () {
-      subjectsContainer.style.opacity = '1'
-      subjectsContainer.classList.remove('disable-cursor-pointer')
+    if (lessonHours.isEdited) {
+      edited.push(lessonHours)
+      lessonsPlanPage.toggleSavingAnimation(true, lessonHours)
+    }
 
-      buttonsContainer.style.height = buttonsContainer.scrollHeight + 'px'
+    for (var i = 0; i < lessonsPlanPage.days.length; i++) {
+      const day = lessonsPlanPage.days[i]
 
-      self.isSaving = false
+      if (day.isEdited) {
+        edited.push(day)
+        lessonsPlanPage.toggleSavingAnimation(true, day)
+      }
+    }
 
-      preloaderRoot.style.display = 'none'
+    setTimeout(function () {
+      self.isSaving = false
 
       lessonsPlanPage.lessonsPlanCopy = JSON.parse(JSON.stringify(lessonsPlanPage.lessonsPlan))
+      lessonsPlanPage.toggleActionButtons(false, lessonsPlanPage.elements.lessonHours.actionButtons)
+      lessonsPlanPage.toggleSavingAnimation(false, self)
+
+      for (var i = 0; i < edited.length; i++) {
+        edited[i].isEdited = false
+        lessonsPlanPage.toggleSavingAnimation(false, edited[i])
+      }
+
+      lessonHours.isEdited = false
     }, 1000)
   }
 
@@ -186,12 +199,15 @@ export default class Day extends Component {
 
     const length = this.props.data.subjects.length + 1
 
-    if (lessonsPlanPage.lessonsStart.length < length) {
-      error = 'Brakuje godziny rozpoczynającej lekcję (po ' + lessonsPlanPage.lessonsStart[lessonsPlanPage.lessonsStart.length - 1] + ')'
+    const lessonsPlanStart = lessonsPlanPage.lessonsPlan.start
+    const lessonsPlanFinish = lessonsPlanPage.lessonsPlan.finish
+
+    if (lessonsPlanStart.length < length) {
+      error = 'Brakuje godziny rozpoczynającej lekcję (po ' + lessonsPlanStart[lessonsPlanStart.length - 1] + ')'
     }
 
-    if (lessonsPlanPage.lessonsFinish.length < length) {
-      error = ((error) ? (error + '<br>') : '') + 'Brakuje godziny kończącej lekcję (' + lessonsPlanPage.lessonsFinish[lessonsPlanPage.lessonsFinish.length - 1] + ')'
+    if (lessonsPlanFinish.length < length) {
+      error = ((error) ? (error + '<br>') : '') + 'Brakuje godziny kończącej lekcję (' + lessonsPlanFinish[lessonsPlanFinish.length - 1] + ')'
     }
 
     if (!error) {
@@ -201,20 +217,6 @@ export default class Day extends Component {
     }
   }
 
-  /**
-   * Shows or hides action buttons container (save and cancel)
-   * @param {Boolean}
-   */
-  toggleActionButtons (flag) {
-    const actionButtons = this.actionButtons
-
-    actionButtons.style[(flag) ? 'display' : 'opacity'] = (flag) ? 'block' : '0'
-
-    setTimeout(function () {
-      actionButtons.style[(flag) ? 'opacity' : 'display'] = (flag) ? '1' : 'none'
-    }, (flag) ? 20 : 300)
-  }
-
   render () {
     return (
       <ExpansionPanel className='day-expansion-panel' ref='root'>
@@ -228,9 +230,10 @@ export default class Day extends Component {
             }} />
           </div>
           <MaterialButton className='add' text='DODAJ' onClick={this.onAddButtonClick} shadow={false} rippleStyle={this.materialButtonRippleStyle} />
-          <div className='clear-both' />
         </div>
-        <Preloader ref={(e) => { this.preloader = e }} />
+        <div className='preloader-container' ref={(e) => { this.preloaderContainer = e }}>
+          <Preloader ref={(e) => { this.preloader = e }} />
+        </div>
       </ExpansionPanel>
     )
   }

3-panel/src/views/Pages/LessonsPlan/components/Day/style.scss

@@ -1,8 +1,5 @@
 .day-expansion-panel {
   & .subjects-container {
-    opacity: 1;
-    transition: 0.3s opacity;
-
     & .subject {
       width: 100%;
       padding-top: 15px;
@@ -44,57 +41,5 @@
         border-bottom: $border;
       }
     }
-
-    &.disable-cursor-pointer .subject {
-      cursor: default;
-
-      & .menu-icon {
-        cursor: default;
-      }
-    }
-  }
-
-  & .buttons-container {
-    width: 100%;
-    height: 37px;
-    position: relative;
-    transition: 0.3s ease height;
-    margin-top: 8px;
-    margin-bottom: 8px;
-    overflow: hidden;
-
-    & .action-buttons {
-      width: 192px;
-      float: right;
-      display: none;
-      opacity: 0;
-      transition: 0.3s opacity;
-    }
-
-    & .material-button {
-      float: right;
-      margin-right: 8px;
-      background-color: transparent;
-      color: #3f51b5;
-      padding-left: 10px;
-      padding-right: 10px;
-
-      &.cancel {
-        color: #000;
-      }
-
-      &.add {
-        margin-left: 8px;
-        float: left;
-      }
-    }
-  }
-
-  & .material-preloader {
-    position: absolute;
-    @include center;
-    width: 54px;
-    height: 54px;
-    display: none;
   }
 }

3-panel/src/views/Pages/LessonsPlan/components/ExpansionPanel/style.scss

@@ -42,4 +42,8 @@
       }
     }
   }
+
+  & .content {
+    position: relative;
+  }
 }

3-panel/src/views/Pages/LessonsPlan/components/LessonHours/components/Item/index.js

@@ -9,11 +9,11 @@ export default class Item extends Component {
     return this.elements.root
   }
 
-  editStart = (e) => {
+  toggleEditing (time, isStart) {
     const app = window.app
+    const lessonsPlanPage = this.props.getLessonsPlanPage()
     const timePicker = app.elements.timePicker
 
-    const time = this.props.start
     const split = time.split('.')
     let hour = split[0]
     const minutes = split[1]
@@ -27,23 +27,30 @@ export default class Item extends Component {
 
     timePicker.setTime(hour, minutes)
     timePicker.toggle(true, false)
+
+    lessonsPlanPage.editedTime = {
+      time: time,
+      start: isStart,
+      item: this
+    }
+  }
+
+  setTime () {
+    this.elements.start.innerHTML = this.props.start
+    this.elements.finish.innerHTML = this.props.finish
   }
 
   render () {
     return (
       <div className='item'>
-        <div className='start' ref='start' onClick={this.editStart} />
-        <div className='finish' ref='finish' />
+        <div className='start' ref='start' onClick={() => { this.toggleEditing(this.props.start, true) }} />
+        <div className='finish' ref='finish' onClick={() => { this.toggleEditing(this.props.finish, false) }} />
       </div>
     )
   }
 
   afterRender () {
-    const props = this.props
-
-    props.getLessonHours().items.push(this)
-
-    this.elements.start.innerHTML = props.start
-    this.elements.finish.innerHTML = props.finish
+    this.setTime()
+    this.props.getLessonHours().items.push(this)
   }
 }