@saooti/octopus-sdk 30.0.17 → 30.0.21

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

@@ -1,79 +1,41 @@
 <template>
   <div class="mt-2">
-    <div
-      v-if="loading"
-      class="d-flex"
-    >
-      <div class="spinner-border me-3" />
-      <div class="mt-2">
-        {{ $t('Loading content ...') }}
-      </div>
-    </div>
-    <div v-else>
-      <div class="d-flex small-text">
-        <b class="me-2">{{ comment.name }}</b>
-        <img
-          v-if="comment.certified"
-          class="icon-certified"
-          src="/img/certified.png"
-          :title="$t('Certified account')"
-        >
-        <div class="me-2">
-          {{ date }}
-        </div>
-      </div>
-      <div>{{ contentDisplay }}</div>
-      <a
-        v-if="comment.content.length > 300"
-        class="c-hand font-italic"
-        @click="summary = !summary"
-      >{{ readMore }}</a>
-    </div>
+    <ClassicLoading
+      :loading-text="loading?$t('Loading content ...'):undefined"
+    />
+    <CommentBasicView
+      v-if="!loading"
+      :comment="comment"
+      :edit-right="editRight"
+    />
   </div>
 </template>
 
 <script lang="ts">
 import octopusApi from '@saooti/octopus-api';
-import moment from 'moment';
+import CommentBasicView from './CommentBasicView.vue';
+import ClassicLoading from '../../form/ClassicLoading.vue';
 import { CommentPodcast } from '@/store/class/general/comment';
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'CommentParentInfo',
 
+  components:{
+    CommentBasicView,
+    ClassicLoading
+  },
+
   props: {
     comId: { default: undefined, type: Number },
+    editRight: { default: false, type: Boolean},
   },
 
   data() {
     return {
       loading: true as boolean,
-      summary: true as boolean,
       comment: undefined as CommentPodcast|undefined,
     };
   },
-
-  
-  computed: {
-    date(): string {
-      if (this.comment && this.comment.date)
-        return moment(this.comment.date).format('D MMMM YYYY HH[h]mm');
-      return '';
-    },
-    limitContent(): string {
-      if (!this.comment || !this.comment.content) return '';
-      if (this.comment.content.length <= 300) return this.comment.content;
-      return this.comment.content.substring(0, 300) + '...';
-    },
-    readMore(): string {
-      if (this.summary) return this.$t('Read more').toString();
-      return this.$t('Read less').toString();
-    },
-    contentDisplay(): string {
-      if (this.summary) return this.limitContent;
-      return this.comment && this.comment.content? this.comment.content : '';
-    },
-  },
-
   async created() {
     if(this.comId){
       this.comment = await octopusApi.fetchComment(this.comId);
@@ -81,6 +43,4 @@ export default defineComponent({
     this.loading = false;
   },
 })
-</script>
-
-<style lang="scss"></style>
+</script>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="comment-player-container comment-item-container">
+  <div class="comment-player-container">
     <div
       v-for="c in comments"
       :key="c.comId"
@@ -20,7 +20,7 @@
     </div>
     <div
       v-if="displayContent"
-      class="comment-content"
+      class="small-text mt-auto"
     >
       <div class="primary-color flex-shrink-0">
         {{ displayContent.name }}
@@ -95,10 +95,5 @@ export default defineComponent({
     margin-top: 20px;
     position: absolute;
   }
-  .comment-content {
-    margin-top: auto;
-    font-size: 0.7rem;
-    display: flex;
-  }
 }
 </style>

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

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="isComments"
-    class="d-flex flex-column mt-3 module-box comment-item-container"
+    class="module-box"
   >
     <div class="d-flex align-items-center">
       <h2
@@ -18,7 +18,7 @@
       <button
         v-if="!isLive"
         :title="$t('Refresh')"
-        class="saooti-refresh-stud btn btn-reload primary-color"
+        class="btn admin-button primary-color saooti-refresh-stud"
         @click="reloadComments"
       />
     </div>
@@ -115,7 +115,7 @@ export default defineComponent({
     this.knownIdentity = this.getCookie('comment-octopus-name');
   },
   methods: {
-    updateFetch(value: { count: number }): void {
+    updateFetch(value: { count: number, comments: Array<CommentPodcast> }): void {
       this.loaded = true;
       this.$store.commit('setCommentLoaded', {
         ...value,
@@ -130,38 +130,23 @@ export default defineComponent({
       (this.$refs.commentList as InstanceType<typeof CommentListVue>).addNewComment(comment, true);
     },
     receiveCommentEvent(event: {type?: string; comment: CommentPodcast; status?: string; oldStatus?:string }): void {
+      const commentList = (this.$refs.commentList as InstanceType<typeof CommentListVue>);
       let statusUpdated = undefined;
       switch (event.type) {
-        case 'Create':
-          (this.$refs.commentList as InstanceType<typeof CommentListVue>).addNewComment(event.comment);
-          break;
+        case 'Create':commentList.addNewComment(event.comment);break;
         case 'Update':
           if (event.comment.status !== event.oldStatus) {
             statusUpdated = event.comment.status;
           }
-          (this.$refs.commentList as InstanceType<typeof CommentListVue>).updateComment({
+          commentList.updateComment({
             comment: event.comment,
             status: statusUpdated,
           });
           break;
-        case 'Delete':
-          (this.$refs.commentList as InstanceType<typeof CommentListVue>).deleteComment(event.comment);
-          break;
-        default:
-          console.log('Event not handle');
-          break;
+        case 'Delete':commentList.deleteComment(event.comment);break;
+        default:break;
       }
     },
   },
 })
-</script>
-
-<style lang="scss">
-.btn-reload {
-  width: 40px;
-  height: 40px;
-  padding: 0;
-  font-size: 1rem;
-  font-weight: bold;
-}
-</style>
+</script>

package/src/components/display/edit/EditCommentBox.vue

@@ -1,53 +1,153 @@
 <template>
   <div class="d-flex">
     <button
-      class="btn btn-comment-edit saooti-edit-bounty"
+      class="btn admin-button primary-color me-1"
       title="edit"
       @click="editComment"
-    />
+    >
+      <span
+        class="saooti-edit-bounty"
+        :data-selenium="'Edit-Comment-' + seleniumFormat(comment.name)"
+      />
+    </button>
     <button
       v-if="'Pending' === comment.status || 'Invalid' === comment.status"
-      class="btn btn-comment-edit saooti-valid-stud"
+      class="btn admin-button primary-color me-1"
       title="valid"
-      @click="validComment"
-    />
+      @click="commentModal('Valid')"
+    >
+      <span
+        class="saooti-valid-stud"
+        :data-selenium="'Validate-Comment-' + seleniumFormat(comment.name)"
+      />
+    </button>
     <button
       v-if="'Pending' === comment.status || 'Valid' === comment.status"
-      class="btn btn-comment-edit saooti-cross"
+      class="btn admin-button primary-color me-1"
       title="invalid"
-      @click="invalidComment"
-    />
+      @click="commentModal('Invalid')"
+    >
+      <span
+        class="saooti-cross"
+        :data-selenium="'Invalidate-Comment-' + seleniumFormat(comment.name)"
+      />
+    </button>
+    <button
+      v-if="organisation"
+      class="btn admin-button primary-color me-1"
+      :title="$t('See more')"
+      @click="seeMore = true"
+    >
+      <span
+        class="saooti-more_vert"
+        :data-selenium="'More-Info-Comment-' + seleniumFormat(comment.name)"
+      />
+    </button>
     <button
-      class="btn btn-comment-edit saooti-bin"
+      class="btn admin-button primary-color me-1"
       title="delete"
-      @click="deleteComment"
+      @click="commentModal('Delete')"
+    >
+      <span
+        class="saooti-bin"
+        :data-selenium="'Trash-Comment-' + seleniumFormat(comment.name)"
+      />
+    </button>
+    <MessageModal
+      v-if="displayModal"
+      :validatetext="validateText"
+      :canceltext="canceltext"
+      :closable="false"
+      :title="modalTitle"
+      :message="modalMessage"
+      @cancel="displayModal = false"
+      @validate="deleteComment"
+      @close="displayModal = false"
     />
   </div>
 </template>
 
 <script lang="ts">
+import { selenium } from '../../mixins/functions';
 import { CommentPodcast } from '@/store/class/general/comment';
-import { defineComponent } from 'vue'
+import { defineComponent, defineAsyncComponent } from 'vue';
+const MessageModal = defineAsyncComponent(
+  () => import('@/components/misc/modal/MessageModal.vue')
+);
 export default defineComponent({
+  components: {
+    MessageModal,
+  },
+  mixins: [selenium],
+
   props: {
-    comment: { default: undefined, type: Object as ()=>CommentPodcast},
+    comment: { default: () => ({}), type: Object as () => CommentPodcast },
+    organisation: { default: undefined, type: String },
+  },
+  emits: ['editComment', 'updateComment', 'deleteComment'],
+
+  data() {
+    return {
+      displayModal: false as boolean,
+      isDeleting: false as boolean,
+      type: 'update' as string,
+      seeMore: false as boolean,
+    };
+  },
+
+  computed: {
+    validateText(): string | undefined {
+      if ('Error' === this.type || 'Error403' === this.type)
+        return this.$t('Close').toString();
+      if (this.isDeleting) return undefined;
+      return this.$t('Yes').toString();
+    },
+    canceltext(): string | undefined {
+      if ('Error' === this.type || 'Error403' === this.type) return undefined;
+      return this.$t('No').toString();
+    },
+    modalMessage(): string {
+      switch (this.type) {
+        case 'Delete':
+          if (this.isDeleting)
+            return this.$t('Deleting in progress ...').toString();
+          return this.$t('Confirm comment deletion text', {
+            name: this.comment.name,
+          }).toString();
+        case 'Error':
+          return this.$t('Error occurs while updating your comment').toString();
+        case 'Error403':
+          return this.$t('403 error forbidden').toString();
+        default:
+          return '';
+      }
+    },
+    modalTitle(): string {
+      switch (this.type) {
+        case 'Delete':
+          return this.$t('Delete comment').toString();
+        case 'Error403':
+        case 'Error':
+          return this.$t('Error').toString();
+        default:
+          return this.$t('Update comment').toString();
+      }
+    },
   },
-  emits: ['editComment'],
 
   methods: {
-    editComment() {
+    editComment(): void {
       this.$emit('editComment');
     },
-    validComment() {
-      console.log('valid');
+    commentModal(type: string): void {
+      console.log('commentModal'+ type);
     },
-    invalidComment() {
-      console.log('invalid');
+    async updateComment(newComment?: CommentPodcast | undefined): Promise<void> {
+      console.log('updateComment' + newComment);
     },
-    deleteComment() {
-      console.log('delete');
+    async deleteComment(): Promise<void> {
+      console.log('deleteComment');
     },
   },
-})
-</script>
-<style lang="scss"></style>
+});
+</script>

package/src/components/display/filter/AdvancedSearch.vue

@@ -116,7 +116,7 @@
         </div>
         <ClassicRadio
           v-model:textInit="sort"
-          id-select="sort-radio"
+          id-radio="sort-radio"
           :options="isSearchBar? [{title:$t('Sort score'), value:'SCORE'},
                                   {title:$t('Sort last'), value:isEmission?'LAST_PODCAST_DESC':'DATE'},
                                   {title:$t('Sort name'), value:'NAME'}]:

package/src/components/display/live/LiveList.vue

@@ -12,12 +12,12 @@
         {{ displayNextLiveMessage }}
       </h3>
     </div>
-    <div
+    <template
       v-for="(live, indexLive) in livesArray"
       :key="live.status"
     >
       <template v-if="live.lives.length">
-        <hr>
+        <hr class="w-100">
         <p class="live-list-category">
           {{ live.title }}
         </p>
@@ -30,7 +30,7 @@
           @deleteItem="deleteLive(indexLive, $event)"
         />
       </template>
-    </div>
+    </template>
   </div>
 </template>
 

package/src/components/display/podcasts/PodcastImage.vue

@@ -13,7 +13,7 @@
       v-if="fetchConference"
       class="live-image-status"
       :class="
-        fetchConference && 'null' !== fetchConference
+        fetchConference && 'null' !== fetchConference && fetchConference.status
           ? fetchConference.status.toLowerCase() + '-bg'
           : ''
       "

package/src/components/misc/HomeDropdown.vue

@@ -1,105 +1,97 @@
 <template>
   <div
-    class="top-bar-dropdown"
+    class="d-flex align-items-center"
   >
-    <div
+    <button
       v-if="authenticated"
-      class="dropdown split-dropdown btn-group"
+      class="btn btn-primary m-1"
+      @click="goToUrl('/main/priv/backoffice')"
+    >
+      {{ $t('My space') }}
+    </button>
+    <div
+      class="dropdown btn-group"
     >
       <button
-        class="btn btn-primary main-button-dropdown"
-        @click="goToUrl('/main/priv/backoffice')"
-      >
-        {{ $t('My space') }}
-      </button>
-      <button
-        class="btn dropdown-toggle btn-primary data-selenium-dropdown-topbar dropdown-toggle-split"
+        class="btn dropdown-toggle m-1 admin-button dropdown-toggle-no-caret saooti-user-octopus"
         data-bs-toggle="dropdown"
         aria-expanded="false"
+        :title="$t('User menu')"
       />
       <div class="dropdown-menu dropdown-menu-right px-4">
-        <router-link
-          v-if="isContribution && !isPodcastmaker"
-          class="btn btn-primary w-100"
-          to="/main/priv/upload"
-        >
-          {{ $t('Upload') }}
-        </router-link>
-        <template v-if="!isPodcastmaker">
-          <router-link
-            to="/main/priv/backoffice"
-            class="show-phone dropdown-item"
-          >
-            {{ $t('My space') }}
-          </router-link>
-          <router-link
+        <template v-if="!authenticated">
+          <a
             class="dropdown-item"
-            to="/main/priv/edit/profile"
+            href="/sso/login"
           >
-            {{ $t('Edit my profile') }}
-          </router-link>
+            {{ $t('Login') }}
+          </a>
           <router-link
-            v-if="isOrganisation"
+            v-if="!isPodcastmaker"
             class="dropdown-item"
-            to="/main/priv/edit/organisation"
+            to="/main/pub/create"
           >
-            {{ $t('Edit my organisation') }}
+            {{ $t('Create an account') }}
           </router-link>
         </template>
-        <template v-if="!isEducation">
-          <hr class="dropdown-divider">
-          <a
-            href="https://help.octopus.saooti.com/Aide/"
-            class="dropdown-item"
-            rel="noopener"
-            target="_blank"
-          >
-            {{ $t('Help') }}
-          </a>
-          <a
-            href="https://help.octopus.saooti.com/"
-            class="dropdown-item"
-            rel="noopener"
-            target="_blank"
-          >
-            {{ $t('TutoMag') }}
-          </a>
-          <hr class="dropdown-divider">
-          <a
-            class="dropdown-item"
-            href="/sso/logout"
+        <template v-else>
+          <router-link
+            v-if="isContribution && !isPodcastmaker"
+            class="btn btn-primary w-100"
+            to="/main/priv/upload"
           >
-            {{ $t('Logout') }}
-          </a>
+            {{ $t('Upload') }}
+          </router-link>
+          <template v-if="!isPodcastmaker">
+            <router-link
+              to="/main/priv/backoffice"
+              class="show-phone dropdown-item"
+            >
+              {{ $t('My space') }}
+            </router-link>
+            <router-link
+              class="dropdown-item"
+              to="/main/priv/edit/profile"
+            >
+              {{ $t('Edit my profile') }}
+            </router-link>
+            <router-link
+              v-if="isOrganisation"
+              class="dropdown-item"
+              to="/main/priv/edit/organisation"
+            >
+              {{ $t('Edit my organisation') }}
+            </router-link>
+          </template>
+          <template v-if="!isEducation">
+            <hr class="dropdown-divider">
+            <a
+              href="https://help.octopus.saooti.com/Aide/"
+              class="dropdown-item"
+              rel="noopener"
+              target="_blank"
+            >
+              {{ $t('Help') }}
+            </a>
+            <a
+              href="https://help.octopus.saooti.com/"
+              class="dropdown-item"
+              rel="noopener"
+              target="_blank"
+            >
+              {{ $t('TutoMag') }}
+            </a>
+            <hr class="dropdown-divider">
+            <a
+              class="dropdown-item"
+              href="/sso/logout"
+            >
+              {{ $t('Logout') }}
+            </a>
+          </template>
         </template>
       </div>
     </div>
-    <div
-      v-else
-      class="dropdown btn-group"
-    >
-      <button
-        class="btn dropdown-toggle m-1 admin-button dropdown-toggle-no-caret saooti-user-octopus"
-        data-bs-toggle="dropdown"
-        aria-expanded="false"
-        title="Profile"
-      />
-      <div class="dropdown-menu dropdown-menu-right px-4">
-        <a
-          class="dropdown-item"
-          href="/sso/login"
-        >
-          {{ $t('Login') }}
-        </a>
-        <router-link
-          v-if="!isPodcastmaker"
-          class="dropdown-item"
-          to="/main/pub/create"
-        >
-          {{ $t('Create an account') }}
-        </router-link>
-      </div>
-    </div>
   </div>
 </template>
 
@@ -136,37 +128,4 @@ export default defineComponent({
     },
   },
 })
-</script>
-
-<style lang="scss">
-.top-bar-dropdown {
-  display: flex;
-  align-items: center;
-
-  .main-button-dropdown {
-    padding-bottom: 0.4rem;
-    width: 140px;
-    text-align: left;
-    padding-left: 15px;
-    margin-right: 30px;
-    @media (max-width: 650px) {
-      display: none;
-    }
-  }
-  .btn-group .dropdown-toggle-split {
-    align-items: center;
-    border-radius: 50%;
-    width: 40px !important;
-    height: 40px !important;
-    justify-content: center;
-    position: absolute;
-    right: 5px;
-    border: 4px solid white !important;
-    z-index: 2;
-    @media (max-width: 650px) {
-      position: relative;
-      right: auto;
-    }
-  }
-}
-</style>
+</script>

package/src/components/misc/PlayerButtons.vue

@@ -23,7 +23,7 @@
     />
   </div>
   <div
-    v-if="(isPlaying || isPaused) && (media || isStop)"
+    v-if="isPlaying || isPaused"
     class="play-button-box primary-bg text-light"
     @click="stopPlayer"
   >
@@ -61,9 +61,6 @@ export default defineComponent({
       if (this.$store.state.player.podcast) return this.$store.state.player.podcast.imageUrl;
       return '';
     },
-    isStop(): boolean{
-      return this.$store.state.player.stop;
-    },
     media(): undefined|Media{
       return this.$store.state.player.media;
     },

package/src/components/misc/TopBar.vue

@@ -34,7 +34,7 @@
       :reset="reset"
       @selected="onOrganisationSelected"
     />
-    <div class="d-flex justify-content-center flex-grow-1">
+    <div class="d-flex justify-content-end flex-grow-1">
       <router-link
         v-if="
           isLiveTab &&

package/src/components/pages/Emission.vue

@@ -233,12 +233,8 @@ export default defineComponent({
         this.$emit('emissionTitle', this.name);
         this.loaded = true;
         if (!this.emission.annotations) return;
-        if (this.emission.annotations.RSS) {
-          this.rssEmission = true;
-        }
-        if (this.emission.annotations.FTP) {
-          this.ftpEmission = true;
-        }
+        this.rssEmission = this.emission.annotations.RSS? true: false;
+        this.ftpEmission = this.emission.annotations.FTP? true: false;
         if (this.emission.annotations.exclusive) {
           this.exclusive =
             'true' === this.emission.annotations.exclusive ? true : false;