@saooti/octopus-sdk 33.0.0 → 33.0.1

package/README.md

@@ -686,4 +686,5 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
  * 32.0.33 Pétouilles graphiques ou d'UX diverses
  * 32.0.34 Modale RSS
  * 32.0.35 Enlever Dummy param
- * 32.0.36 Select -> font family
+ * 32.0.36 Select -> font family
+ * 32.0.40 Problème majeur !!! 

package/docker-compose.sonar.yml

@@ -0,0 +1,8 @@
+version: '3' 
+services: 
+  sonarqube: 
+    container_name: sonarqube 
+    image: sonarqube:latest 
+    ports: 
+    - "9000:9000" 
+    - "9092:9092"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "33.0.0",
+  "version": "33.0.1",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",
@@ -11,21 +11,26 @@
     "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
     "build_bundle": "vue-cli-service build --target lib --name octopus ./index.js",
     "prettifile": "prettier --single-quote --trailing-comma es5 --write",
-    "prettify": "prettier --single-quote --trailing-comma es5 --write src/**/**/**/*.{js,vue}"
+    "prettify": "prettier --single-quote --trailing-comma es5 --write src/**/**/**/*.{js,vue}",
+    "sonar": "node sonarqube-scanner.js",
+    "test": "jest --coverage"
   },
   "dependencies": {
-    "@saooti/octopus-api": "^0.32.3",
+    "@saooti/octopus-api": "^0.33.0",
     "@vue/cli": "^5.0.8",
     "@vue/compat": "^3.2.37",
     "autoprefixer": "^10.4.8",
     "axios": "^0.24.0",
     "bootstrap": "5.2.0",
+    "express": "^4.18.2",
     "hls.js": "^1.1.5",
     "humanize-duration": "^3.27.2",
+    "jest": "^29.1.2",
     "jquery": "^3.5.14",
     "moment": "^2.29.4",
     "qrcode.vue": "^3.3.3",
     "sass": "^1.53.0",
+    "sonarqube-scanner": "^2.8.2",
     "swiper": "^8.3.1",
     "v-calendar": "^3.0.0-alpha.8",
     "vite": "^3.0.4",
@@ -94,5 +99,10 @@
   "repository": {
     "type": "git",
     "url": "git+https://github.com/saooti/octopus-sdk.git"
+  },
+  "jestSonar": {
+    "reportPath": "coverage",
+    "reportFile": "test-reporter.xml",
+    "indent": 4
   }
 }

package/public/css/fonts/icomoon.svg

@@ -41,6 +41,7 @@
 <glyph unicode="&#xe91f;" glyph-name="disconnected" d="M953.728 673.082l-138.777-137.799-187.398 187.398 137.556 137.556c16.126 16.126 16.126 42.024 0 58.15s-42.024 16.126-58.15 0l-137.556-137.799-53.996 54.485c-16.126 16.126-42.024 16.126-58.15 0-62.791-62.791-97.242-146.35-97.242-235.042 0-61.081 16.37-119.963 47.155-171.028-41.536-49.109-53.263-90.401-63.77-127.293-10.751-38.116-20.28-70.855-64.746-115.566-44.711-44.711-77.452-53.996-115.566-64.746-42.757-12.216-91.378-26.144-150.993-85.758-16.126-16.126-16.126-42.024 0-58.15 8.062-8.062 18.569-11.971 29.075-11.971s21.013 3.91 29.075 11.971c44.711 44.711 77.452 53.996 115.566 64.746 42.757 12.216 91.378 26.144 150.993 85.758s73.542 108.236 85.758 151.237c8.062 28.342 15.393 53.996 37.137 83.803 62.547-61.326 145.13-95.286 232.841-95.286 88.69 0 172.249 34.695 235.042 97.242 7.818 7.818 11.971 18.080 11.971 29.075s-4.398 21.257-11.971 29.075l-54.24 54.24 138.533 137.556c16.126 15.882 16.126 42.024 0.244 58.15-16.126 15.882-42.268 15.882-58.393 0v0z" />
 <glyph unicode="&#xe920;" glyph-name="feed" d="M874.361 810.23c-16.177 16.177-40.981 16.177-57.157 0s-16.177-40.981 0-57.157c168.238-168.238 168.238-442.169 0-610.405-16.177-16.177-16.177-40.981 0-57.157 7.549-7.549 18.336-11.865 29.118-11.865s20.492 4.314 28.040 11.865c199.517 199.517 199.517 525.21 0 724.723zM740.632 677.576c-16.177 16.179-40.981 16.179-57.157 0s-16.177-40.981 0-57.157c46.374-46.374 71.178-106.769 71.178-172.55 0-64.707-24.806-126.176-71.178-171.472-16.177-16.177-16.177-40.981 0-57.157 7.549-7.549 18.336-11.865 29.118-11.865s20.492 4.314 28.040 11.865c61.473 60.395 95.982 142.356 94.904 228.633 0 86.277-33.431 168.238-94.904 229.711zM206.796 753.069c16.177 16.177 16.177 40.981 0 57.157s-40.981 16.177-57.157 0c-199.517-199.517-199.517-525.21 0-724.723 7.547-7.549 18.334-11.865 28.040-11.865 10.783 0 20.492 4.314 29.116 11.865 16.177 16.177 16.177 40.981 0 57.157-168.238 168.238-168.238 442.169 0 610.405zM339.447 619.337c16.179 16.179 16.179 40.981 0 57.157s-40.981 16.179-57.157 0c-126.176-126.179-126.176-331.086 1.078-458.346 7.549-7.549 18.334-11.865 29.116-11.865s20.492 4.314 28.040 11.865c16.179 16.177 16.179 40.981 0 57.157-94.904 94.904-95.982 249.125-1.078 344.029zM645.728 447.865c0-73.854-59.871-133.729-133.729-133.729s-133.729 59.871-133.729 133.729c0 73.856 59.871 133.729 133.729 133.729s133.729-59.871 133.729-133.729z" />
 <glyph unicode="&#xe921;" glyph-name="headphones" d="M921.597 437.765v61.443c0 225.278-184.32 409.598-409.598 409.598s-409.598-184.32-409.598-409.598v-61.443c-61.443-20.485-102.402-76.797-102.402-143.362v-153.604c0-87.040 66.565-153.604 153.604-153.604s153.604 66.565 153.604 153.604v153.604c0 66.565-40.958 122.877-102.402 143.362v61.443c0 168.957 138.24 307.195 307.195 307.195s307.195-138.24 307.195-307.195v-61.443c-61.443-20.485-102.402-76.797-102.402-143.362v-153.604c0-87.040 66.565-153.604 153.604-153.604s153.604 66.565 153.604 153.604v153.604c0 66.565-40.96 122.877-102.402 143.362z" />
+<glyph unicode="&#xe922;" glyph-name="text-to-speech" d="M906.77 926.296h-481.423c-64.672 0-117.229-52.558-117.229-117.229v-22.078h59.397v22.078c0 32.433 25.4 57.834 57.834 57.834h481.423c32.433 0 57.834-25.4 57.834-57.834v-722.134c0-32.433-25.4-57.834-57.834-57.834h-481.423c-32.433 0-57.834 25.4-57.834 57.834v13.677h-59.397v-13.677c0-64.672 52.558-117.229 117.229-117.229h481.423c64.672 0 117.229 52.558 117.229 117.229v722.134c0 64.672-52.558 117.229-117.229 117.229zM873.946 565.229h-282.718v-59.397h282.718c16.412 0 29.698 13.285 29.698 29.698s-13.285 29.698-29.698 29.698zM873.946 740.292h-404.833c-16.412 0-29.698-13.285-29.698-29.698s13.285-29.698 29.698-29.698h404.833c16.412 0 29.698 13.285 29.698 29.698s-13.285 29.698-29.698 29.698zM428.474 185.406c0-16.412 13.285-29.698 29.698-29.698h415.774c16.412 0 29.698 13.285 29.698 29.698s-13.285 29.698-29.698 29.698h-415.774c-16.412 0-29.698-13.285-29.698-29.698zM873.946 390.166h-282.718v-59.397h282.718c16.412 0 29.698 13.285 29.698 29.698s-13.285 29.698-29.698 29.698zM485.135 539.048v-181.901c0-16.607 13.677-30.284 30.284-30.284s30.284 13.482 30.284 30.284v181.901c0 16.607-13.482 30.284-30.284 30.284-16.607 0-30.284-13.677-30.284-30.284zM30.283 508.568c-16.803 0-30.284-13.482-30.284-30.284v-60.569c0-16.607 13.677-30.284 30.284-30.284s30.284 13.482 30.284 30.284v60.569c0 16.607-13.482 30.284-30.284 30.284v0zM121.333 569.332v-242.665c0-16.607 13.482-30.284 30.284-30.284 16.607 0 30.284 13.482 30.284 30.284v242.665c0 16.607-13.482 30.284-30.284 30.284s-30.284-13.677-30.284-30.284zM242.665 720.949v-545.899c0-16.607 13.482-30.284 30.284-30.284 16.607 0 30.284 13.482 30.284 30.284v545.899c0 16.607-13.482 30.284-30.284 30.284s-30.284-13.677-30.284-30.284zM394.282 660.185c-16.803 0-30.48-13.482-30.284-30.284v-363.998c0-16.607 13.482-30.284 30.284-30.284 16.607 0 30.284 13.482 30.284 30.284v363.998c0 16.607-13.482 30.284-30.284 30.284v0z" />
 <glyph unicode="&#xe923;" glyph-name="export" horiz-adv-x="820" d="M746.329 845.36c16.856 16.856 44.182 16.856 61.030 0 16.856-16.849 16.856-44.175 0-61.030l-388.425-388.425c-16.849-16.856-44.175-16.856-61.030 0s-16.856 44.182 0 61.030zM733.677 771.68h-172.632c-23.837 0-43.155 19.326-43.155 43.163s19.32 43.155 43.155 43.155h215.799c23.837 0 43.155-19.32 43.155-43.155v-215.799c0-23.837-19.32-43.155-43.155-43.155s-43.163 19.32-43.163 43.155zM647.374 404.841c0 23.837 19.32 43.155 43.155 43.155s43.155-19.32 43.155-43.155v-242.766c0-68.531-55.547-124.077-124.077-124.077h-485.532c-68.531 0-124.077 55.547-124.077 124.077v485.532c0 68.531 55.547 124.077 124.077 124.077h263.001c23.837 0 43.155-19.32 43.155-43.155s-19.32-43.155-43.155-43.155h-263.001c-20.859 0-37.767-16.906-37.767-37.767v-485.532c0-20.859 16.906-37.767 37.767-37.767h485.532c20.859 0 37.767 16.906 37.767 37.767z" />
 <glyph unicode="&#xe924;" glyph-name="send" horiz-adv-x="820" d="M425 422.657l-334.37-33.308-88.397-281.845c-7.687-23.062 5.126-47.402 28.184-55.087 10.249-3.843 21.778-2.562 32.029 2.562l734.080 354.87c20.499 10.251 29.465 34.587 19.218 56.37-3.843 8.968-10.251 15.373-19.218 19.216l-732.799 356.151c-21.778 10.251-47.4 1.281-58.93-20.499-5.126-10.249-6.405-21.778-2.56-32.027l88.397-281.843 334.37-32.029c14.094-1.279 25.622-14.094 23.062-29.465 0-12.811-10.249-21.778-23.062-23.062v0z" />
 <glyph unicode="&#xe925;" glyph-name="search" horiz-adv-x="820" d="M803.702 129.737l-132.279 132.279c47.436 63.527 73.349 142.309 73.349 223.599 0 99.052-38.451 192.253-108.247 262.677-70.214 70.841-164.042 109.71-264.14 109.71-98.634 0-191.836-38.869-262.677-109.71s-109.71-164.251-109.71-262.886c0-100.097 39.078-193.925 109.71-264.14 70.423-69.796 163.624-108.247 262.677-108.247 81.29 0 160.072 25.912 223.599 73.349l132.279-132.279c10.24-10.24 23.823-16.091 37.824-16.091s27.375 5.642 37.824 16.091 16.091 23.823 16.091 37.824c-0.418 14.001-6.060 27.375-16.3 37.824zM637.152 485.406c0-146.071-118.696-264.766-264.766-264.766s-264.766 118.696-264.766 264.766c0 143.563 121.203 264.766 264.766 264.766 145.862 0 264.766-118.696 264.766-264.766z" />

package/public/css/fonts/style.css

@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'icomoon';
-  src:  url('/css/fonts/icomoon.eot?8edpg2');
-  src:  url('/css/fonts/icomoon.eot?8edpg2#iefix') format('embedded-opentype'),
-    url('/css/fonts/icomoon.ttf?8edpg2') format('truetype'),
-    url('/css/fonts/icomoon.woff?8edpg2') format('woff'),
-    url('/css/fonts/icomoon.svg?8edpg2#icomoon') format('svg');
+  src:  url('/css/fonts/icomoon.eot?svfrvx');
+  src:  url('/css/fonts/icomoon.eot?svfrvx#iefix') format('embedded-opentype'),
+    url('/css/fonts/icomoon.ttf?svfrvx') format('truetype'),
+    url('/css/fonts/icomoon.woff?svfrvx') format('woff'),
+    url('/css/fonts/icomoon.svg?svfrvx#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -25,6 +25,9 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.saooti-text-to-speech:before {
+  content: "\e922";
+}
 .saooti-left:before {
   content: "\e900";
 }
@@ -220,87 +223,87 @@
 }
 .saooti-stitcher-logo .path2:before {
   content: "\e94b";
-  
+
   color: rgb(0, 0, 0);
 }
 .saooti-stitcher-logo .path3:before {
   content: "\e94c";
-  
+
   color: rgb(0, 0, 0);
 }
 .saooti-stitcher-logo .path4:before {
   content: "\e94d";
-  
+
   color: rgb(0, 0, 0);
 }
 .saooti-stitcher-logo .path5:before {
   content: "\e94e";
-  
+
   color: rgb(0, 0, 0);
 }
 .saooti-stitcher-logo .path6:before {
   content: "\e94f";
-  
+
   color: rgb(0, 0, 0);
 }
 .saooti-stitcher-logo .path7:before {
   content: "\e950";
-  
+
   color: rgb(0, 0, 0);
 }
 .saooti-stitcher-logo .path8:before {
   content: "\e951";
-  
+
   color: rgb(0, 0, 0);
 }
 .saooti-stitcher-logo .path9:before {
   content: "\e952";
-  
+
   color: rgb(53, 144, 197);
 }
 .saooti-stitcher-logo .path10:before {
   content: "\e953";
-  
+
   color: rgb(53, 144, 197);
 }
 .saooti-stitcher-logo .path11:before {
   content: "\e954";
-  
+
   color: rgb(197, 56, 39);
 }
 .saooti-stitcher-logo .path12:before {
   content: "\e955";
-  
+
   color: rgb(197, 56, 39);
 }
 .saooti-stitcher-logo .path13:before {
   content: "\e956";
-  
+
   color: rgb(236, 139, 36);
 }
 .saooti-stitcher-logo .path14:before {
   content: "\e957";
-  
+
   color: rgb(236, 139, 36);
 }
 .saooti-stitcher-logo .path15:before {
   content: "\e958";
-  
+
   color: rgb(251, 198, 24);
 }
 .saooti-stitcher-logo .path16:before {
   content: "\e959";
-  
+
   color: rgb(251, 198, 24);
 }
 .saooti-stitcher-logo .path17:before {
   content: "\e95a";
-  
+
   color: rgb(97, 34, 104);
 }
 .saooti-stitcher-logo .path18:before {
   content: "\e95b";
-  
+
   color: rgb(97, 34, 104);
 }
 .saooti-pocket-casts:before {
@@ -334,32 +337,32 @@
 }
 .saooti-google-podcasts .path2:before {
   content: "\e963";
-  
+
   color: rgb(66, 133, 244);
 }
 .saooti-google-podcasts .path3:before {
   content: "\e964";
-  
+
   color: rgb(234, 67, 53);
 }
 .saooti-google-podcasts .path4:before {
   content: "\e965";
-  
+
   color: rgb(52, 168, 83);
 }
 .saooti-google-podcasts .path5:before {
   content: "\e966";
-  
+
   color: rgb(250, 185, 8);
 }
 .saooti-google-podcasts .path6:before {
   content: "\e967";
-  
+
   color: rgb(52, 168, 83);
 }
 .saooti-google-podcasts .path7:before {
   content: "\e968";
-  
+
   color: rgb(250, 185, 8);
 }
 .saooti-amazon .path1:before {
@@ -368,12 +371,12 @@
 }
 .saooti-amazon .path2:before {
   content: "\e96a";
-  
+
   color: rgb(255, 153, 0);
 }
 .saooti-amazon .path3:before {
   content: "\e96b";
-  
+
   color: rgb(0, 0, 0);
 }
 .saooti-Whatsapp .path1:before {
@@ -382,12 +385,12 @@
 }
 .saooti-Whatsapp .path2:before {
   content: "\e96d";
-  
+
   color: rgb(255, 255, 255);
 }
 .saooti-Whatsapp .path3:before {
   content: "\e96e";
-  
+
   color: rgb(44, 183, 66);
 }
 .saooti-more:before {

package/sonarqube-scanner.js

@@ -0,0 +1,18 @@
+const scanner = require('sonarqube-scanner'); 
+scanner({ 
+    options:{
+        "sonar.exclusions":"**/*.test.tsx", 
+     "sonar.tests":"./src", 
+     "sonar.test.inclusions":"**/*.test.tsx,**/*.test.ts", 
+     "sonar.typescript.lcov.reportPaths": "coverage/lcov.info", 
+   "sonar.testExecutionReportPaths": "coverage/test-report.xml" 
+    },
+serverUrl:"http://localhost:9000", 
+login:"admin", 
+password:"admin", 
+options:{ 
+    "sonar.sources":"./src" 
+}, 
+}, 
+()=>process.exit() 
+);

package/src/assets/bootstrap-diff.scss

@@ -39,7 +39,6 @@
 					}
 					position: relative;
 					&:after {    
-						background: none repeat scroll 0 0 transparent;
 						bottom: 0;
 						content: "";
 						display: block;

package/src/assets/general.scss

@@ -20,9 +20,7 @@ body{
   a{
     word-break: break-word;
   }
-  h1{
-    margin-bottom: 2rem;
-  }
+
   h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
     &:not(.text-uppercase){
       letter-spacing: -0.03em;
@@ -37,6 +35,7 @@ body{
     font-size: 1.8rem;
     text-align: center;
     color: #666;
+    margin-bottom: 2rem;
     @media (max-width: 500px){
       font-size: 1.2rem;
       margin: 0.5rem 0 1rem;

package/src/assets/multiselect.scss

@@ -365,10 +365,6 @@
         border-top: 1px solid #e8e8e8;
     }
 
-    .multiselect__content::webkit-scrollbar {
-        display: none;
-    }
-
     .multiselect__element {
         display: block;
     }

package/src/assets/share.scss

@@ -46,10 +46,6 @@
       flex-grow: 1;
       margin: 1em 0 0;
       padding: 0;
-      /*For ie11 */
-      display: flex;
-      flex-wrap: wrap;
-      /* end */
       display: grid; /* 1 */
       grid-template-columns: repeat(auto-fill, 13rem); /* 2 */
       grid-gap: 1rem; /* 3 */
@@ -104,10 +100,6 @@
     flex-grow: 1;
     margin: 0;
     padding: 0;
-    /*For ie11 */
-    display: flex;
-    flex-wrap: wrap;
-    /* end */
     display: grid; /* 1 */
     grid-gap: 1rem; /* 3 */
     justify-content: space-between; /* 4 */

package/src/components/display/categories/CategoryList.vue

@@ -27,7 +27,7 @@
         aria-expanded="false"
         :title="$t('See more')"
       />
-      <ul class="dropdown-menu dropdown-menu-right px-4">
+      <div class="dropdown-menu dropdown-menu-right px-4">
         <div
           v-for="category in hidenCategories"
           :key="category.id"
@@ -36,7 +36,7 @@
         >
           {{ category.name }}
         </div>
-      </ul>
+      </div>
     </div>
   </div>
 </template>
@@ -185,7 +185,6 @@ export default defineComponent({
     font-size: 0.6rem;
     margin: 0.2rem;
     padding: 0.5rem;
-    display: block;
     height: 1.5rem;
     border-radius: 1.5rem;
     border: 0;

package/src/components/display/comments/AddCommentModal.vue

@@ -81,7 +81,10 @@ export default defineComponent({
   },
   computed: {
     errorText():string {
-      return this.isCaptchaTest ? this.$t('Recaptcha not active') : this.sendError? this.$t('Recaptcha error') : '';
+      if(this.isCaptchaTest){
+        return this.$t('Recaptcha not active');
+      }
+      return this.sendError? this.$t('Recaptcha error') : '';
     },
     validName(): boolean{
       return this.countName <= this.maxName;

package/src/components/display/comments/CommentBasicView.vue

@@ -1,11 +1,11 @@
 <template>
   <div>
     <div class="d-flex small-text">
-      <b
+      <strong
         v-if="recordingInLive && ('Live' === comment.phase || 'Prelive' === comment.phase)"
         class="recording-bg me-1 text-light p-1"
-      >{{ $t('Live') }}</b>
-      <b
+      >{{ $t('Live') }}</strong>
+      <strong
         :id="'popover-comment' + comment.comId"
         role="button"
         tabindex="-1"
@@ -13,7 +13,7 @@
         class="me-2"
       >{{
         comment.name
-      }}</b>
+      }}</strong>
       <Popover
         :disable="editRight || isValid"
         :target="'popover-comment' + comment.comId"

package/src/components/display/comments/CommentInput.vue

@@ -3,11 +3,11 @@
     v-if="isPresent"
     class="d-flex flex-column comment-input-container mt-3"
   >
-    <b
+    <strong
       v-if="knownIdentity && !editName"
       class="small-text mt-1 c-hand"
       @click="changeIdentity"
-    >{{ knownIdentity }}</b>
+    >{{ knownIdentity }}</strong>
     <div
       v-if="editName"
       class="d-flex"

package/src/components/display/comments/CommentItem.vue

@@ -68,11 +68,11 @@
         <span v-if="comment.relatedComments">
           <template v-if="!collapseVisible">
             {{ $t('Display answers', { nb: comment.relatedComments }) }}
-            <i v-if="editRight">{{
+            <em v-if="editRight">{{
               $t('(nb valid comment answers)', {
                 nb: comment.relatedValidComments,
               })
-            }}</i>
+            }}</em>
           </template>
           <template v-else>
             {{ $t('Hide answers') }}
@@ -264,41 +264,48 @@ export default defineComponent({
       }
       this.$emit('update:comment', updatedComment);
     },
+    receiveUpdateComment(event: {type: string; comment: CommentPodcast; oldStatus?:string }){
+      let updatedStatus = "";
+      if (event.comment.status && event.comment.status !== event.oldStatus) {
+        updatedStatus = event.comment.status;
+      }
+      const updatedComment = this.comment;
+      if(undefined !== updatedComment.relatedValidComments){
+        if ('Invalid' ===updatedStatus) {
+          updatedComment.relatedValidComments -= 1;
+        } else if ('Valid' === updatedStatus) {
+          updatedComment.relatedValidComments += 1;
+        }
+      }
+      this.$emit('update:comment', updatedComment);
+    },
+    receiveDeleteComment(event: {type: string; comment: CommentPodcast; oldStatus?:string }){
+      const deletedComment = this.comment;
+      if(undefined !== deletedComment.relatedComments){
+        deletedComment.relatedComments -= 1;
+      }
+      if (undefined !== deletedComment.relatedValidComments && 'Valid' === event.comment.status) {
+        deletedComment.relatedValidComments -= 1;
+      }
+      this.$emit('update:comment', deletedComment);
+    },
+
     receiveCommentEvent(event: {type: string; comment: CommentPodcast; oldStatus?:string }): void {
       switch (event.type) {
         case 'Create':this.newComment(event.comment, true);break;
         case 'Update':
           if (this.$refs.commentList) {
             (this.$refs.commentList as InstanceType<typeof CommentList>).updateComment(event);
-          } else {
-            const updatedComment = this.comment;
-            let updatedStatus = "";
-            if (event.comment.status && event.comment.status !== event.oldStatus) {
-              updatedStatus = event.comment.status;
-            }
-            if(undefined !== updatedComment.relatedValidComments){
-              if ('Invalid' ===updatedStatus) {
-                updatedComment.relatedValidComments -= 1;
-              } else if ('Valid' === updatedStatus) {
-                updatedComment.relatedValidComments += 1;
-              }
-            }
-            this.$emit('update:comment', updatedComment);
+            return;
           }
+          this.receiveUpdateComment(event);
           break;
         case 'Delete':
           if (this.$refs.commentList) {
             (this.$refs.commentList as InstanceType<typeof CommentList>).deleteComment(event.comment);
-          } else {
-            const deletedComment = this.comment;
-            if(undefined !== deletedComment.relatedComments){
-              deletedComment.relatedComments -= 1;
-            }
-            if (undefined !== deletedComment.relatedValidComments && 'Valid' === event.comment.status) {
-              deletedComment.relatedValidComments -= 1;
-            }
-            this.$emit('update:comment', deletedComment);
+            return;
           }
+          this.receiveDeleteComment(event);
           break;
         default:
           break;

package/src/components/display/comments/CommentList.vue

@@ -94,7 +94,14 @@ export default defineComponent({
     },
     watchVariable():string{
       return `${this.reload}|${this.status}`;
+    },
+    statusPost():Array<string>{
+      if(this.editRight && this.status){
+        return [this.status];
+      }
+      return this.editRight? ['Valid','Pending', 'Invalid']:['Valid'];
     }
+
   },
   watch: {
     watchVariable: {
@@ -126,7 +133,7 @@ export default defineComponent({
             first: this.first,
             size: this.size,
             podcastId: this.podcastId,
-            status:this.editRight && this.status?[this.status]: this.editRight? ['Valid','Pending', 'Invalid']:['Valid'],
+            status:this.statusPost,
             organisationId: undefined === this.podcastId? this.organisation: undefined,
           });
         }
@@ -148,11 +155,11 @@ export default defineComponent({
         (element: CommentPodcast) => element.comId === comId
       );
     },
-    commentIsNotInList(commentIdReferer:undefined|number):boolean{
+    commentInAnotherList(commentIdReferer:undefined|number):boolean{
       return !this.isFlat && undefined!==commentIdReferer && null!==commentIdReferer && this.comId !==commentIdReferer;
     },
     deleteComment(comment: CommentPodcast): void {
-      if (this.commentIsNotInList(comment.commentIdReferer)){
+      if (this.commentInAnotherList(comment.commentIdReferer)){
         const comItem = (this.$refs['comItem' + comment.commentIdReferer] as Array<InstanceType<typeof CommentItem>>)[0];
         comItem.receiveCommentEvent({ type: 'Delete', comment: comment });
         return;
@@ -165,33 +172,39 @@ export default defineComponent({
       }
       this.comments.splice(index, 1);
     },
+    updateExistingComment(comment: CommentPodcast, index: number){
+      if ((!this.editRight && 'Valid' !== comment.status) ||
+        (this.editRight && this.status && this.status !== comment.status)) {
+        this.comments.splice(index, 1);
+      } else {
+        this.comments.splice(index, 1, comment);
+      }
+    },
+    updateNotExistingComment(comment: CommentPodcast){
+      let indexNewComment = 0;
+      for (let i = 0, len = this.comments.length; i < len; i++) {
+        if (
+          moment(this.comments[i].date).isBefore(moment(comment.date))
+        ) {
+          indexNewComment = i;
+          break;
+        }
+      }
+      this.comments.splice(indexNewComment, 0, comment);
+    },
     updateComment(data: {type: string; comment: CommentPodcast; oldStatus?:string }): void {
-      if (this.commentIsNotInList(data.comment.commentIdReferer)){
+      if (this.commentInAnotherList(data.comment.commentIdReferer)){
         const comItem = (this.$refs['comItem' + data.comment.commentIdReferer] as Array<InstanceType<typeof CommentItem>>)[0];
         comItem.receiveCommentEvent(data);
         return;
       }
       const index = this.findCommentIndex(data.comment.comId);
       if (-1 !== index) {
-        if ((!this.editRight && 'Valid' !== data.comment.status) ||
-          (this.editRight && this.status && this.status !== data.comment.status)) {
-          this.comments.splice(index, 1);
-        } else {
-          this.comments.splice(index, 1, data.comment);
-        }
+        this.updateExistingComment(data.comment, index);
       }else if((!this.editRight && 'Valid' === data.comment.status) ||
               (this.editRight && !this.status) ||
               (this.editRight && this.status && this.status === data.comment.status)){
-        let indexNewComment = 0;
-        for (let i = 0, len = this.comments.length; i < len; i++) {
-          if (
-            moment(this.comments[i].date).isBefore(moment(data.comment.date))
-          ) {
-            indexNewComment = i;
-            break;
-          }
-        }
-        this.comments.splice(indexNewComment, 0, data.comment);
+        this.updateNotExistingComment(data.comment);
       }
       if (this.comId && data.oldStatus!==data.comment.status) {
         this.$emit('updateStatus', data.comment.status);
@@ -201,7 +214,7 @@ export default defineComponent({
       if (!myself && !this.editRight && 'Valid' !== comment.status) {
         return;
       }
-      if (this.commentIsNotInList(comment.commentIdReferer)){
+      if (this.commentInAnotherList(comment.commentIdReferer)){
         const comItem = (this.$refs['comItem' + comment.commentIdReferer] as Array<InstanceType<typeof CommentItem>>)[0];
         comItem.receiveCommentEvent({ type: 'Create', comment: comment });
         return;

package/src/components/display/comments/CommentSection.vue

@@ -42,7 +42,6 @@ import { Podcast } from '@/store/class/general/podcast';
 import { Conference } from '@/store/class/conference/conference';
 
 import { defineComponent } from 'vue'
-import CommentListVue from './CommentList.vue';
 import { CommentPodcast } from '@/store/class/general/comment';
 export default defineComponent({
   name: 'CommentSection',
@@ -119,10 +118,10 @@ export default defineComponent({
       this.totalCount = value.count;
     },
     newComment(comment: CommentPodcast): void {
-      (this.$refs.commentList as InstanceType<typeof CommentListVue>).addNewComment(comment, true);
+      (this.$refs.commentList as InstanceType<typeof CommentList>).addNewComment(comment, true);
     },
     receiveCommentEvent(event: {type: string; comment: CommentPodcast; oldStatus?:string }): void {
-      const commentList = (this.$refs.commentList as InstanceType<typeof CommentListVue>);
+      const commentList = (this.$refs.commentList as InstanceType<typeof CommentList>);
       switch (event.type) {
         case 'Create':commentList.addNewComment(event.comment);break;
         case 'Update':commentList.updateComment(event);break;