Fix adding and editing post

Author: xnerhu

3-panel/src/views/Pages/Gallery/style.scss

@@ -25,13 +25,20 @@
 
 @media (max-width: 455px) {
   .page-gallery-container {
-    max-width: 216px;
+    max-width: 100%;
+    margin: 0;
+
+    & .page-gallery-category {
+      width: calc(100% - 16px);
+      padding-top: calc(100% - 16px);
+      height: auto;
+    }
   }
 }
 
 @media (max-width: 670px) {
   .page-gallery-container {
-    width: 100%;
+    //width: 100%;
     box-shadow: none;
     background-color: transparent;
   }

3-panel/src/views/Pages/Posts/components/List/index.js

@@ -23,6 +23,10 @@ export default class List extends Component {
    * @param {Object} posts.
    */
   setCells (posts) {
+    this.items = []
+    this.cells = []
+    this.getRoot().innerHTML = ''
+
     for (var i = 0; i < posts.length; i++) {
       this.addPost(posts[i])
     }
@@ -37,7 +41,7 @@ export default class List extends Component {
       const root = this.getRoot()
 
       const cell = (
-        <Item data={data} getMobileTable={this.getMobileTable} getItem={() => { return this }} />
+        <Item data={data} getMobileTable={() => { return this }} getItem={() => { return this }} />
       )
 
       this.renderComponents(cell, root)

3-panel/src/views/Pages/Posts/components/PostDialog/components/FileInput/index.js

@@ -22,9 +22,7 @@ export default class FileInput extends Component {
    * @param {Event}
    */
   onButtonClick = (e) => {
-    const input = this.elements.upload
-
-    input.click()
+    this.elements.upload.click()
   }
 
   /**
@@ -33,9 +31,7 @@ export default class FileInput extends Component {
    * @param {Event}
    */
   onButtonMouseEnter = (e) => {
-    const tooltip = window.app.elements.tooltipUploadButton
-
-    tooltip.toggle(true, this.elements.button.getRoot())
+    window.app.elements.uploadButtonTooltip.toggle(true, this.elements.button.getRoot())
   }
 
   /**
@@ -44,9 +40,7 @@ export default class FileInput extends Component {
    * @param {Event}
    */
   onButtonMouseLeave = (e) => {
-    const tooltip = window.app.elements.tooltipUploadButton
-
-    tooltip.toggle(false)
+    window.app.elements.uploadButtonTooltip.toggle(false)
   }
 
   /**

3-panel/src/views/Pages/Posts/components/PostDialog/index.js

@@ -14,7 +14,7 @@ export default class PostDialog extends Component {
 
     this.previewToggled = false
 
-    this.toggledEditMode = false
+    this.isEditMode = false
   }
 
   /**
@@ -54,7 +54,7 @@ export default class PostDialog extends Component {
       }, 150)
 
       if (edit) {
-        this.toggledEditMode = edit
+        this.isEditMode = edit
 
         saveButtonRoot.innerHTML = 'ZAPISZ'
 
@@ -67,8 +67,8 @@ export default class PostDialog extends Component {
         saveButtonRoot.innerHTML = 'DODAJ'
       }
 
-      if (!edit && this.toggledEditMode) {
-        this.toggledEditMode = false
+      if (!edit && this.isEditMode) {
+        this.isEditMode = false
 
         this.clearForm()
       }
@@ -310,59 +310,89 @@ export default class PostDialog extends Component {
 
     const app = window.app
     const postsPage = app.getPostsPage()
-    const snackbar = app.elements.addedPostSnackbar
+    const snackbar = app.elements.addPostSnackbar
     const snackbarText = snackbar.elements.text
 
     if (this.verifyData()) {
       this.toggle(false)
 
-      snackbarText.innerHTML = (!this.toggledEditMode) ? 'Pomyślnie dodano post' : 'Pomyślnie zapisano post'
+      snackbarText.innerHTML = (!this.isEditMode) ? 'Pomyślnie dodano post' : 'Pomyślnie zapisano post'
       snackbar.toggle(true)
 
       const post = postsPage.clickedPost
 
       const title = this.elements.titleTextField.getValue()
       const content = this.elements.contentTextField.getValue()
 
-      const index = postsPage.postsData.indexOf(post.props.data)
-      const media = (previewMedia.style.display !== 'none') ? previewMedia.src : null
+      if (this.isEditMode) {
+        const index = postsPage.postsData.indexOf(post.props.data)
+        const media = (previewMedia.style.display !== 'none') ? previewMedia.src : null
 
-      if (postsPage.listLoaded) {
-        const postInList = postsPage.elements.list.items[index]
+        function updatePost (post, titleElement, contentElement, imgElement, title, content, media) {
+          titleElement.innerHTML = title
+          contentElement.innerHTML = content
 
-        postInList.elements.title.elements.text.innerHTML = title
-        postInList.elements.content.elements.text.innerHTML = content
+          if (imgElement != null) {
+            imgElement.style.display = (media == null) ? 'none' : 'inline-block'
 
-        const img = postInList.elements.picture.elements.text.getElementsByTagName('img')[0]
+            if (media != null) imgElement.src = media
+          }
+        }
 
-        if (img != null) {
-          img.style.display = (media == null) ? 'none' : 'inline-block'
+        if (postsPage.listLoaded) {
+          const postInList = postsPage.elements.list.items[index]
+          const titleElement = postInList.elements.title.elements.text
+          const contentElement = postInList.elements.content.elements.text
+          const imgElement = post.elements.picture.elements.text.getElementsByTagName('img')[0]
 
-          if (media != null) img.src = media
+          updatePost(postInList, titleElement, contentElement, imgElement, title, content, media)
         }
-      }
 
-      if (postsPage.tableLoaded) {
-        const postInTable = postsPage.elements.table.cells[index]
+        if (postsPage.tableLoaded) {
+          const postInTable = postsPage.elements.table.cells[index]
+          const titleElement = postInTable.elements.title
+          const contentElement = postInTable.elements.content
+          const imgElement = postInTable.elements.picture.getElementsByTagName('img')[0]
+
+          updatePost(postInTable, titleElement, contentElement, imgElement, title, content, media)
+        }
 
-        postInTable.elements.title.innerHTML = title
-        postInTable.elements.content.innerHTML = content
+        post.elements.title.innerHTML = title
+        post.elements.content.innerHTML = content
 
-        const img = postInTable.elements.picture.getElementsByTagName('img')[0]
+        postsPage.postsData[index].title = title
+        postsPage.postsData[index].content = content
+        postsPage.postsData[index].media = media
+      } else {
+        const postData = {
+          id: 9,
+          media: 'http://img11.deviantart.net/a66d/i/2015/109/3/b/forest_wallpaper_16_9_by_iorgudesign-d8qa67w.jpg',
+          title: 'Test',
+          author: 'Mikołaj Palkiewicz',
+          content: 'Card with picture test',
+          date: '14.04.2017 10:38',
+          avatar: 'https://scontent-waw1-1.xx.fbcdn.net/v/t1.0-9/14581320_549947718524540_5437545186607783553_n.jpg?oh=1d709d8978f80d6887041c3e9583f27f&oe=59994281',
+          likes: [],
+          comments: []
+        }
 
-        if (img != null) {
-          img.style.display = (media == null) ? 'none' : 'inline-block'
+        const _postsData = []
+        _postsData.push(postData)
 
-          if (media != null) img.src = media
+        for (var i = 0; i < postsPage.postsData.length; i++) {
+          _postsData.push(postsPage.postsData[i])
         }
-      }
 
-      post.elements.title.innerHTML = title
-      post.elements.content.innerHTML = content
+        postsPage.postsData = _postsData
+
+        if (postsPage.tableLoaded) {
+          postsPage.elements.table.setCells(postsPage.postsData)
+        }
 
-      postsPage.postsData[index].title = title
-      postsPage.postsData[index].content = content
-      postsPage.postsData[index].media = media
+        if (postsPage.listLoaded) {
+          postsPage.elements.list.setCells(postsPage.postsData)
+        }
+      }
 
       setTimeout(function () {
         self.clearForm()

3-panel/src/views/Pages/Posts/components/Table/index.js

@@ -22,6 +22,9 @@ export default class Table extends Component {
    * @param {Object} posts data
    */
   setCells (posts) {
+    this.cells = []
+    this.elements.tbody.innerHTML = ''
+
     for (var i = 0; i < posts.length; i++) {
       this.addPost(posts[i])
     }

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

@@ -493,7 +493,7 @@ export default class PostsPage extends Component {
    * @param {Event}
    */
   onViewClick = (e) => {
-    const tooltip = window.app.elements.tooltipView
+    const tooltip = window.app.elements.viewTooltip
 
     if (this.isTable) {
       this.switchToList()
@@ -510,7 +510,7 @@ export default class PostsPage extends Component {
    * @param {Event}
    */
   onViewMouseEnter = (e) => {
-    const tooltip = window.app.elements.tooltipView
+    const tooltip = window.app.elements.viewTooltip
 
     const text = (this.isTable) ? 'Przełącz na listę' : 'Przełącz na tabelę'
 
@@ -524,7 +524,7 @@ export default class PostsPage extends Component {
    * @param {Event}
    */
   onViewMouseLeave = (e) => {
-    window.app.elements.tooltipView.toggle(false)
+    window.app.elements.viewTooltip.toggle(false)
   }
 
   /**
@@ -537,7 +537,7 @@ export default class PostsPage extends Component {
 
     const toolbar = app.getToolbar()
     const showPicturesIcon = toolbar.elements.showPicturesIcon
-    const tooltip = app.elements.tooltipShowPictures
+    const tooltip = app.elements.showPicturesTooltip
 
     const table = this.elements.table
     const list = this.elements.list
@@ -561,7 +561,7 @@ export default class PostsPage extends Component {
    * @param {Event}
    */
   onShowPicturesMouseEnter = (e) => {
-    const tooltip = window.app.elements.tooltipShowPictures
+    const tooltip = window.app.elements.showPicturesTooltip
 
     const text = (!this.toggledPictures) ? 'Pokaż zdjęcia' : 'Ukryj zdjęcia'
 
@@ -575,7 +575,7 @@ export default class PostsPage extends Component {
    * @param {Event}
    */
   onShowPicturesMouseLeave = (e) => {
-    window.app.elements.tooltipShowPictures.toggle(false)
+    window.app.elements.showPicturesTooltip.toggle(false)
   }
 
   /**