Minor fixes/cleanup for Studio Comments

.github/pull_request_template.md

@@ -15,13 +15,9 @@ Please review the [contributing guidelines](https://github.com/Catrobat/Catroweb
 - [ ] Stick to the project’s git workflow (rebase and squash your commits)
 - [ ] Verify that your changes do not have any conflicts with the base branch
 - [ ] Put your ticket into the `Code Review` section in [Jira](https://jira.catrob.at/)
-- [ ] Post a message in the _#catroweb_ [Slack channel](https://catrobat.slack.com) and ask for a code reviewer
+- [ ] Ask for a code reviewer
 - [ ] Check that your pull request has been successfully deployed to https://web-test-1.catrob.at/
 
 ### Additional Description
 
 `TODO: Add additional information that is not in your commit-message here`
-
-### Tests - additional information
-
-`TODO: add additional information about testruns here`

.gitignore

@@ -16,7 +16,6 @@ bin/
 !bin/checkCatroidRepositoryForNewBricks
 !bin/x_perm.sh
 !bin/x_reset.sh
-!bin/x_test.sh
 
 ### Sass ###
 .sass-cache/

assets/Layout/Base.js

@@ -11,7 +11,7 @@ import 'lazysizes'
 import 'material-icons/iconfont/material-icons.css'
 
 import textFillDefault from '../Components/TextFillDefault'
-import './TopBar.scss'
+import './TopBar'
 import './Sidebar'
 import { TokenExpirationHandler } from '../Security/TokenExpirationHandler'
 import { LogoutTokenHandler } from '../Security/LogoutTokenHandler'

assets/Studio/Studio.scss

@@ -2,17 +2,13 @@
 @import '../Layout/Variables';
 
 .studio-detail__header {
-  padding-top: 2.25rem;
-  padding-right: 1rem;
-  padding-left: 1rem;
-  margin-top: -2rem;
-  margin-right: calc(var(--bs-gutter-x, 0.75rem) * -1);
-  margin-left: calc(var(--bs-gutter-x, 0.75rem) * -1);
+  margin-top: -1.5rem;
   background-color: $gray-200;
 }
 
 .studio-detail__header__name {
   flex: 0 0 100%;
+  margin-top: 0.5em;
   margin-bottom: 0.5em;
 }
 
@@ -39,44 +35,48 @@
 
 .studio-detail__header__details__button--upload-image {
   position: absolute;
-  right: -20px;
-  bottom: 0;
+  right: 15px;
+  bottom: 15px;
+  width: 50px;
+  height: 50px;
+  background-color: rgba(255 255 255 / 75%);
+  border-radius: 5px;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 50px;
-  height: 50px;
-  background-color: rgba(0 0 0 / 40%);
-  border-radius: 50%;
+  box-shadow: 0 2px 5px rgba(0 0 0 / 30%);
+  z-index: 10;
+}
 
-  .button-show-ajax {
-    margin: 0 auto;
-  }
+.studio-detail__header__details__button--upload-image .material-icons {
+  font-size: 24px;
+  color: var(--primary);
+}
 
-  input {
-    position: absolute;
-    inset: 0;
-    cursor: pointer;
-    opacity: 0.001;
-  }
+.studio-detail__header__details__button--upload-image input[type='file'] {
+  position: absolute;
+  inset: 0;
+  cursor: pointer;
+  opacity: 0;
 }
 
 #studio-img-container {
+  position: relative;
+  width: 100%;
+  max-height: 17rem;
+  min-height: 10rem;
+  display: flex;
   justify-content: center;
-  width: auto;
-  max-height: 9rem;
-  overflow: hidden;
+  align-items: center;
+  overflow-y: hidden;
 }
 
-#studio-detail__header__details__button--upload-image {
-  position: absolute;
-  bottom: 0;
-  left: 45%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 30%;
-  background-color: #fff;
+#studio-img-container img {
+  max-width: 100%;
+  min-width: -webkit-fill-available;
+  min-height: 10rem;
+  height: auto;
+  object-fit: cover;
 }
 
 .tab-text {

assets/Studio/StudioCommentHandler.js

@@ -0,0 +1,127 @@
+import { showSnackbar } from '../Layout/Snackbar'
+
+export default class {
+  removeComment(studioID, element, commentID, isReply, parentID) {
+    const removeError = document.getElementById('comment-remove-error').value
+
+    fetch('../removeStudioComment/', {
+      method: 'DELETE',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ studioID, commentID, parentID, isReply }),
+    })
+      .then((response) => {
+        if (response.ok) {
+          this.hideComment(element)
+          this.updateCommentCount(-1)
+          this.increaseActivityCount()
+          if (isReply && parentID > 0) {
+            const pc = document.getElementById('info-' + parentID)
+            pc.textContent = (pc.textContent - 1).toString()
+          }
+        } else {
+          console.error(response.status)
+          showSnackbar('#share-snackbar', removeError)
+        }
+      })
+      .catch((e) => {
+        console.error(e)
+        showSnackbar('#share-snackbar', removeError)
+      })
+  }
+
+  // Function to post a comment
+  postComment(studioID, isReply) {
+    const comment = isReply
+      ? document.querySelector('#add-reply input').value
+      : document.querySelector('#add-comment textarea').value
+    const commentError = document.getElementById('comment-error').value
+    const parentID = isReply ? document.getElementById('cmtID').value : 0
+
+    if (comment.trim() === '') {
+      return
+    }
+
+    fetch('../postCommentToStudio/', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ studioID, comment, parentID }),
+    })
+      .then((response) => {
+        if (response.ok) {
+          if (isReply) {
+            // ToDo: create template just for comment, and make it injectable via js but use twig
+            // document.querySelector('#add-reply input').value = '';
+            // document.getElementById('info-' + parentID).textContent = response.replies_count;
+          } else {
+            // ToDo: create template just for comment, and make it injectable via js but use twig
+            window.location.reload()
+            document.querySelector('#add-comment textarea').value = ''
+            this.updateCommentCount(1)
+          }
+          this.increaseActivityCount()
+        } else {
+          console.error(response.status)
+          showSnackbar('#share-snackbar', commentError)
+        }
+      })
+      .catch((e) => {
+        console.error(e)
+        showSnackbar('#share-snackbar', commentError)
+      })
+  }
+
+  // Function to load replies
+  loadReplies(commentID) {
+    showSnackbar('#share-snackbar', 'Replies not yet supported')
+    // document.getElementById('modal-body').innerHTML = '';
+    // document.getElementById('cmtID').value = commentID;
+    //
+    // fetch('../loadCommentReplies/', {
+    //   method: 'GET',
+    //   headers: {
+    //     'Content-Type': 'application/json'
+    //   },
+    //   body: JSON.stringify({ commentID })
+    // })
+    //   .then(response => response.text())
+    //   .then(data => {
+    //     document.getElementById('comment-replies-body').innerHTML = data;
+    //   })
+    //   .catch(() => {
+    //     document.getElementById('comment-replies-body').innerHTML = '<h1>Failed to load replies</h1>';
+    //   });
+  }
+
+  showNoCommentsInfoMessage() {
+    document.getElementById('no-comments').style.display = 'block'
+  }
+
+  hideNoCommentsInfoMessage() {
+    document.getElementById('no-comments').style.display = 'none'
+  }
+
+  hideComment(element) {
+    element.closest('.studio-comment').style.display = 'none'
+    element.nextElementSibling.style.display = 'none'
+  }
+
+  updateCommentCount(byCount) {
+    const cc = document.getElementById('comments-count')
+    const newCount = parseInt(cc.textContent) + byCount
+    cc.textContent = newCount.toString()
+    if (newCount <= 0) {
+      this.showNoCommentsInfoMessage()
+    } else {
+      this.hideNoCommentsInfoMessage()
+    }
+  }
+
+  increaseActivityCount() {
+    const tc = document.getElementById('activity_count')
+    tc.textContent = (parseInt(tc.textContent) + 1).toString()
+  }
+}