Add delete lesson dialog

Author: xnerhu

3-panel/src/helpers/MenuManager/index.js

@@ -122,7 +122,6 @@ export default class MenuManager {
   static setMenuItems () {
     const app = window.app
     const menu = app.getMenu()
-
     const postDialog = app.elements.postDialog
     const postsPage = app.getPostsPage()
 
@@ -147,7 +146,6 @@ export default class MenuManager {
    */
   static setPostMenuItems () {
     const app = window.app
-
     const menu = app.elements.postItemMenu
     const dialog = app.elements.deletePostDialog
 
@@ -174,9 +172,7 @@ export default class MenuManager {
    */
   static setCategoryMenuItems () {
     const app = window.app
-
     const menu = app.elements.categoryMenu
-
     const gallery = app.getGalleryPage()
 
     const items = [
@@ -209,7 +205,6 @@ export default class MenuManager {
 
   static setPicturesMenuItems () {
     const app = window.app
-
     const menu = app.elements.picturesMenu
 
     const items = [
@@ -223,4 +218,20 @@ export default class MenuManager {
 
     menu.setItems(items)
   }
+
+  static setLessonsPlanSubjectMenu () {
+    const app = window.app
+    const menu = app.elements.lessonsPlanSubjectMenu
+
+    const items = [
+      {
+        text: 'Usuń',
+        onClick: function () {
+          app.elements.deleteLessonDialog.elements.dialog.toggle(true)
+        }
+      }
+    ]
+
+    menu.setItems(items)
+  }
 }

3-panel/src/views/App/index.js

@@ -15,6 +15,7 @@ import DeleteCategoryDialog from '../Pages/Gallery/components/DeleteCategoryDial
 import DeletePicturesDialog from '../Pages/Gallery/components/DeletePicturesDialog'
 
 import AddLessonDialog from '../Pages/LessonsPlan/components/AddLessonDialog'
+import DeleteLessonDialog from '../Pages/LessonsPlan/components/DeleteLessonDialog'
 
 import NavigationDrawer from './components/NavigationDrawer/index'
 import Toolbar from './components/Toolbar'
@@ -416,6 +417,7 @@ export default class App extends Component {
         <Menu ref='postItemMenu' className='toolbar-menu' mobile='true' />
         <Menu ref='categoryMenu' className='toolbar-menu' mobile='true' />
         <Menu ref='picturesMenu' className='toolbar-menu' mobile='true' />
+        <Menu ref='lessonsPlanSubjectMenu' className='toolbar-menu' mobile='true' />
         <Dialog ref='deletePostsDialog' title='Jesteś pewny(a)?'>
           Nie będzie można ich odzyskać.
         </Dialog>
@@ -427,6 +429,7 @@ export default class App extends Component {
         <DeleteCategoryDialog ref='deleteCategoryDialog' />
         <DeletePicturesDialog ref='deletePicturesDialog' />
         <AddLessonDialog ref='addLessonDialog' />
+        <DeleteLessonDialog ref='deleteLessonDialog' />
         <ErrorDialog ref='errorDialog' />
         <TimePicker ref='timePicker' onConfirm={(hour, minutes, isAM) => { this.getLessonsPlanPage().onTimePickerConfirm(hour, minutes, isAM) }} />
         <Snackbar ref='deletePostsSnackbar' text='Pomyślnie usunięto posty' />
@@ -437,6 +440,7 @@ export default class App extends Component {
         <Snackbar ref='deleteCategorySnackbar' text='Pomyślnie usunięto kategorię' />
         <Snackbar ref='addPicturesSnackbar' text='Pomyślnie dodano zdjęcia' />
         <Snackbar ref='deletePicturesSnackbar' text='Pomyślnie usunięto zdjęcia' />
+        <Snackbar ref='deleteLessonSnackbar' text='Pomyślnie usunięto lekcję' />
         <Tooltip ref='viewTooltip' text='Przełącz na liste' />
         <Tooltip ref='showPicturesTooltip' text='Pokaż zdjęcia' />
         <Tooltip ref='uploadButtonTooltip' text='Najlepiej w proporcjach 16:9' />
@@ -453,6 +457,7 @@ export default class App extends Component {
     MenuManager.setPostMenuItems()
     MenuManager.setCategoryMenuItems()
     MenuManager.setPicturesMenuItems()
+    MenuManager.setLessonsPlanSubjectMenu()
     DialogManager.setDeletePostsDialogItems()
     DialogManager.setDeletePostDialogItems()
 
@@ -483,7 +488,8 @@ export default class App extends Component {
       this.elements.menu,
       this.elements.postItemMenu,
       this.elements.categoryMenu,
-      this.elements.picturesMenu
+      this.elements.picturesMenu,
+      this.elements.lessonsPlanSubjectMenu
     ]
 
     for (var i = 0; i < menus.length; i++) {

3-panel/src/views/App/styles.scss

@@ -116,6 +116,10 @@ a {
       min-height: 205px;
     }
 
+    &.delete-lesson-dialog .material-dialog {
+      min-height: 183px;
+    }
+
     & .material-preloader {
       display: block
     }

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

@@ -1,4 +1,5 @@
 import Component from '../../../../../../../helpers/Component'
+import MenuManager from '../../../../../../../helpers/MenuManager'
 
 export default class Subject extends Component {
   beforeRender () {
@@ -47,6 +48,16 @@ export default class Subject extends Component {
     }
   }
 
+  onMenuIconClick = (e) => {
+    const app = window.app
+    const menu = app.elements.lessonsPlanSubjectMenu
+    const lessonsPlanPage = this.props.getLessonsPlanPage()
+
+    document.removeEventListener('click', app.onClick)
+    MenuManager.toggle(true, menu, e.target, false)
+    lessonsPlanPage.clickedLesson = this
+  }
+
   /**
    * On menu icon mouse down.
    * Makes ripple.
@@ -90,7 +101,7 @@ export default class Subject extends Component {
             this.props.name
           }
         </div>
-        <div className='menu-icon ripple-icon' ref='menuIcon' onMouseDown={this.onMenuIconMouseDown} onTouchStart={this.onMenuIconTouchStart} />
+        <div className='menu-icon ripple-icon' ref='menuIcon' onClick={this.onMenuIconClick} onMouseDown={this.onMenuIconMouseDown} onTouchStart={this.onMenuIconTouchStart} />
       </div>
     )
   }

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

@@ -51,7 +51,7 @@ export default class Day extends Component {
    */
   addSubject (name) {
     const subject = (
-      <Subject name={name} getDay={() => { return this }} />
+      <Subject name={name} getDay={() => { return this }} getLessonsPlanPage={() => { return this.props.getLessonsPlanPage() }} />
     )
 
     this.renderComponents(subject, this.subjectsContainer)

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

@@ -0,0 +1,94 @@
+import Component from '../../../../../helpers/Component'
+import DialogManager from '../../../../../helpers/DialogManager'
+
+import Dialog from '../../../../../imports/materialdesign/components/Dialog'
+
+import Preloader from '../../../../../imports/materialdesign/components/Preloader'
+
+export default class DeleteLessonDialog extends Component {
+  beforeRender () {
+    this.day = null
+  }
+
+  /**
+   * Gets root.
+   * @return {DOMElement} root
+   */
+  getRoot () {
+    return this.elements.root
+  }
+
+  /**
+   * Sets dialog action buttons.
+   */
+  setDialogItems () {
+    const dialog = this.elements.dialog
+
+    const items = [
+      {
+        text: 'USUŃ',
+        onClick: this.onDeleteButtonClick
+      },
+      {
+        text: 'ANULUJ',
+        onClick: function () {
+          dialog.toggle(false)
+        }
+      }
+    ]
+
+    dialog.setItems(items)
+  }
+
+  onDeleteButtonClick = (e) => {
+    const app = window.app
+
+    const root = this.getRoot()
+    const dialog = this.elements.dialog
+    const lessonsPlanPage = app.getLessonsPlanPage()
+
+    const clickedLesson = lessonsPlanPage.clickedLesson
+    const day = clickedLesson.props.getDay()
+    const dayIndex = lessonsPlanPage.days.indexOf(day)
+    const lessonIndex = day.subjects.indexOf(clickedLesson)
+
+    if (lessonIndex < 0) {
+      console.log('Index is less than 0')
+    }
+
+    root.classList.add('enabled-preloader')
+
+    setTimeout(function () {
+      root.classList.remove('enabled-preloader')
+
+      lessonsPlanPage.lessonsPlan.plan[dayIndex].subjects.splice(lessonIndex, 1)
+      lessonsPlanPage.lessonsPlanCopy = JSON.parse(JSON.stringify(lessonsPlanPage.lessonsPlan))
+
+      for (var i = 0; i < lessonsPlanPage.days.length; i++) {
+        lessonsPlanPage.toggleActionButtons(false, lessonsPlanPage.days[i].actionButtons)
+      }
+
+      day.addSubjects()
+      app.elements.deleteLessonSnackbar.toggle(true)
+      dialog.toggle(false)
+    }, 1000)
+  }
+
+  render () {
+    return (
+      <div className='input-dialog delete-lesson-dialog' ref='root'>
+        <Dialog title='Czy napewno chcesz usunąć tą lekcję?' ref='dialog'>
+          <div className='text'>
+            Nie będzie można tego cofnąć.
+            <br />Zapisze to również jakie kolwiek zmiany w planie.
+          </div>
+          <Preloader />
+        </Dialog>
+      </div>
+    )
+  }
+
+  afterRender () {
+    this.setDialogItems()
+  }
+}

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

@@ -25,8 +25,8 @@ export default class LessonsPlanPage extends Component {
     ]
 
     this.days = []
-
     this.editedTime = null
+    this.clickedLesson = null
   }
 
   /**