@saooti/octopus-sdk 30.0.18 → 30.0.22

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/emission/EmissionList.vue

@@ -41,7 +41,7 @@
       <button
         v-show="!allFetched"
         class="btn"
-        :class="buttonPlus ? 'btn-link-plus' : 'btn-more'"
+        :class="buttonPlus ? 'btn-link' : 'btn-more'"
         :disabled="loading"
         :title="$t('See more')"
         @click="fetchContent(false)"
@@ -49,7 +49,10 @@
         <template v-if="buttonPlus">
           {{ $t('See more') }}
         </template>
-        <div class="saooti-plus" />
+        <div
+          :class="buttonPlus?'ms-1':''"
+          class="saooti-plus"
+        />
       </button>
     </template>
   </div>

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

@@ -116,7 +116,7 @@
         </div>
         <ClassicRadio
           v-model:textInit="sort"
-          idRadio="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/LiveHorizontalList.vue

@@ -16,7 +16,7 @@
     <button
       v-show="!allFetched"
       class="btn"
-      :class="buttonPlus ? 'btn-link-plus mt-3' : 'btn-more'"
+      :class="buttonPlus ? 'btn-link mt-3' : 'btn-more'"
       :disabled="inFetching"
       :title="$t('See more')"
       @click="displayMore"
@@ -24,7 +24,10 @@
       <template v-if="buttonPlus">
         {{ $t('See more') }}
       </template>
-      <div class="saooti-plus" />
+      <div
+        :class="buttonPlus?'ms-1':''"
+        class="saooti-plus"
+      />
     </button>
   </div>
 </template>

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/playlist/PlaylistList.vue

@@ -19,7 +19,7 @@
     <button
       v-show="!allFetched && loaded"
       class="btn"
-      :class="buttonPlus ? 'btn-link-plus':'btn-more'"
+      :class="buttonPlus ? 'btn-link':'btn-more'"
       :disabled="inFetching"
       :title="$t('See more')"
       @click="displayMore"
@@ -27,7 +27,10 @@
       <template v-if="buttonPlus">
         {{ $t('See more') }}
       </template>
-      <div class="saooti-plus" />
+      <div
+        :class="buttonPlus?'ms-1':''"
+        class="saooti-plus"
+      />
     </button>
   </div>
 </template>

package/src/components/display/playlist/PodcastList.vue

@@ -40,14 +40,17 @@
     <button
       v-show="size < podcasts.length && loaded"
       class="btn"
-      :class="buttonPlus ? 'btn-link-plus':'btn-more'"
+      :class="buttonPlus ? 'btn-link':'btn-more'"
       :title="$t('See more')"
       @click="displayMore"
     >
       <template v-if="buttonPlus">
         {{ $t('See more') }}
       </template>
-      <div class="saooti-plus" />
+      <div
+        :class="buttonPlus?'ms-1':''"
+        class="saooti-plus"
+      />
     </button>
   </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/display/podcasts/PodcastInlineList.vue

@@ -63,13 +63,13 @@
     </transition-group>
     <router-link
       class="btn btn-link"
-      :class="buttonPlus ? 'btn-link-plus' : ''"
+      :class="buttonPlus ? 'btn-link' : ''"
       :to="refTo"
     >
       {{ buttonText }}
       <div
         v-if="buttonPlus"
-        class="saooti-plus"
+        class="ms-1 saooti-plus"
       />
     </router-link>
   </div>

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

@@ -23,7 +23,7 @@
     <button
       v-show="!allFetched && loaded"
       class="btn"
-      :class="buttonPlus ? 'btn-link-plus' : 'btn-more'"
+      :class="buttonPlus ? 'btn-link' : 'btn-more'"
       :disabled="inFetching"
       :title="$t('See more')"
       @click="displayMore"
@@ -31,7 +31,10 @@
       <template v-if="buttonPlus">
         {{ $t('See more') }}
       </template>
-      <div class="saooti-plus" />
+      <div
+        :class="buttonPlus?'ms-1':''"
+        class="saooti-plus"
+      />
     </button>
   </div>
 </template>