@saooti/octopus-sdk 1.0.0 → 29.0.2

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

@@ -1,90 +1,76 @@
 <template>
   <div
-    class="d-flex flex-column mt-3 module-box comment-item-container"
     v-if="isComments"
+    class="d-flex flex-column mt-3 module-box comment-item-container"
   >
     <div class="d-flex align-items-center">
-      <h2 class="mb-0 mr-2">
+      <h2
+        class="mb-0 me-2"
+        data-selenium="episode-comment-counter"
+      >
         {{ $t("Podcast's comments") }}
-        <template v-if="loaded && totalCount > 0">{{
-          $t('()', { nb: totalCount })
-        }}</template>
+        <template v-if="loaded && totalCount > 0">
+          {{
+            $t('()', { nb: totalCount })
+          }}
+        </template>
       </h2>
       <button
+        v-if="!isLive"
+        :aria-label="$t('Refresh')"
         class="saooti-refresh-stud btn btn-reload primary-color"
         @click="reloadComments"
-        v-if="!isLive"
-      ></button>
+      />
     </div>
     <CommentInput
-      :podcast="podcast"
       v-model:knownIdentity="knownIdentity"
-      :fetchConference="fetchConference"
+      :podcast="podcast"
+      :fetch-conference="fetchConference"
       @newComment="newComment"
     />
     <CommentList
       ref="commentList"
       :podcast="podcast"
       :reload="reload"
-      :isFlat="isLive"
-      :fetchConference="fetchConference"
+      :is-flat="isLive"
+      :fetch-conference="fetchConference"
       @fetch="updateFetch"
     />
   </div>
 </template>
 
-<style lang="scss">
-@import '../../../sass/_variables.scss';
-.btn-reload {
-  width: 40px;
-  height: 40px;
-  padding: 0;
-  font-size: 1rem;
-  font-weight: bold;
-}
-</style>
-
 <script lang="ts">
 import CommentList from './CommentList.vue';
 import CommentInput from './CommentInput.vue';
 import { cookies } from '../../mixins/functions';
+import { Podcast } from '@/store/class/podcast';
+import { Conference } from '@/store/class/conference';
 
-import { defineComponent, ref } from 'vue'
+import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'CommentSection',
 
-  props: {
-    podcast: { default: undefined as any },
-    fetchConference: { default: undefined as any },
-  },
-
-  mixins: [cookies],
-
   components: {
     CommentList,
     CommentInput,
   },
-  setup() {
-    const commentList : any = ref(null);
-    return {
-      commentList,
-    };
-  },
+  mixins:[cookies],
 
-  created() {
-    this.knownIdentity = this.getCookie('comment-octopus-name');
+  props: {
+    podcast: { default: undefined, type: Object as ()=>Podcast },
+    fetchConference: { default: undefined, type: Object as ()=>Conference },
   },
-
+  
   data() {
     return {
-      totalCount: 0,
-      loaded: false,
-      reload: false,
+      totalCount: 0 as number,
+      loaded: false as boolean,
+      reload: false as boolean,
     };
   },
 
   computed: {
-    isComments():boolean {
+    isComments(): boolean {
       if (!this.podcast) return true;
       let podcastComment = 'INHERIT';
       if (this.podcast.annotations && this.podcast.annotations.COMMENTS) {
@@ -106,55 +92,58 @@ export default defineComponent({
       );
     },
     knownIdentity: {
-      get():any {
+      get(): string|null {
         return this.$store.state.comments.knownIdentity;
       },
-      set(value: any) {
+      set(value: string|null) {
         this.$store.commit('setCommentIdentity', value);
       },
     },
-    isLive():boolean {
+    isLive(): boolean {
       return (
-        this.fetchConference &&
-        'null' !== this.fetchConference &&
+        undefined!==this.fetchConference &&
+        -1 !== this.fetchConference.conferenceId &&
         'PUBLISHING' !== this.fetchConference.status &&
         'DEBRIEFING' !== this.fetchConference.status
       );
     },
   },
 
+  created() {
+    this.knownIdentity = this.getCookie('comment-octopus-name');
+  },
   methods: {
-    updateFetch(value: { count: number; }) {
+    updateFetch(value: { count: number }): void {
       this.loaded = true;
       this.$store.commit('setCommentLoaded', {
         ...value,
-        podcastId: this.podcast.podcastId,
+        podcastId: this.podcast? this.podcast.podcastId: undefined,
       });
       this.totalCount = value.count;
     },
-    reloadComments() {
+    reloadComments(): void {
       this.reload = !this.reload;
     },
-    newComment(comment: any) {
-      this.commentList.addNewComment(comment, true);
+    newComment(comment: Comment): void {
+      (this.$refs.commentList as any).addNewComment(comment, true);
     },
-    receiveCommentEvent(event: { type: any; comment: { status: any; }; oldStatus: any; }) {
+    receiveCommentEvent(event: any): void {
       let statusUpdated = undefined;
       switch (event.type) {
         case 'Create':
-          this.commentList.addNewComment(event.comment);
+          (this.$refs.commentList as any).addNewComment(event.comment);
           break;
         case 'Update':
           if (event.comment.status !== event.oldStatus) {
             statusUpdated = event.comment.status;
           }
-          this.commentList.updateComment({
+          (this.$refs.commentList as any).updateComment({
             comment: event.comment,
             status: statusUpdated,
           });
           break;
         case 'Delete':
-          this.commentList.deleteComment(event.comment);
+          (this.$refs.commentList as any).deleteComment(event.comment);
           break;
         default:
           console.log('Event not handle');
@@ -162,5 +151,15 @@ export default defineComponent({
       }
     },
   },
-});
+})
 </script>
+
+<style lang="scss">
+.btn-reload {
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  font-size: 1rem;
+  font-weight: bold;
+}
+</style>

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

@@ -1,10 +1,10 @@
 <template>
-  <div></div>
+  <div />
 </template>
 
-<style lang="scss"></style>
-
 <script lang="ts">
 import { defineComponent } from 'vue'
-export default defineComponent({});
+export default defineComponent({})
 </script>
+
+<style lang="scss"></style>

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

@@ -1,67 +1,61 @@
 <template>
   <div class="d-flex">
     <button
-      class="btn btn-circle primary-color mr-1"
+      class="btn btn-circle primary-color me-1"
       aria-label="edit"
       @click="editComment"
     >
-      <span class="saooti-edit-bounty"></span>
+      <span class="saooti-edit-bounty" />
     </button>
     <button
-      class="btn btn-circle primary-color mr-1"
-      aria-label="valid"
       v-if="'Pending' === comment.status || 'Invalid' === comment.status"
+      class="btn btn-circle primary-color me-1"
+      aria-label="valid"
       @click="validComment"
     >
-      <span class="saooti-valid-stud"></span>
+      <span class="saooti-valid-stud" />
     </button>
     <button
-      class="btn btn-circle primary-color mr-1"
-      aria-label="invalid"
       v-if="'Pending' === comment.status || 'Valid' === comment.status"
+      class="btn btn-circle primary-color me-1"
+      aria-label="invalid"
       @click="invalidComment"
     >
-      <span class="saooti-cross"></span>
+      <span class="saooti-cross" />
     </button>
     <button
-      class="btn btn-circle primary-color mr-1"
+      class="btn btn-circle primary-color me-1"
       aria-label="delete"
       @click="deleteComment"
     >
-      <span class="saooti-bin"></span>
+      <span class="saooti-bin" />
     </button>
   </div>
 </template>
 
-<style lang="scss">
-@import '../../../sass/_variables.scss';
-.comment-item-container {
-  .btn-circle {
-    width: 32px;
-    height: 32px;
-    background: $octopus-secondary-color;
-    padding: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-}
-</style>
-
 <script lang="ts">
+import { CommentPodcast } from '@/store/class/comment';
 import { defineComponent } from 'vue'
 export default defineComponent({
-  props: ['comment'],
-
+  props: {
+    comment: { default: undefined, type: Object as ()=>CommentPodcast},
+  },
   emits: ['editComment'],
 
   methods: {
     editComment() {
       this.$emit('editComment');
     },
-    validComment() {},
-    invalidComment() {},
-    deleteComment() {},
+    validComment() {
+      console.log('valid');
+    },
+    invalidComment() {
+      console.log('invalid');
+    },
+    deleteComment() {
+      console.log('delete');
+    },
   },
-});
+})
 </script>
+<style lang="scss"></style>

package/src/components/display/emission/EmissionChooser.vue

@@ -8,14 +8,14 @@
       for="emissionChooser"
       class="d-inline"
       aria-label="select emission"
-    ></label>
-    <Multiselect
-      v-model="emission"
+    />
+    <VueMultiselect
       id="emissionChooser"
+      ref="multiselectRef"
+      v-model="emission"
       label="name"
       track-by="emissionId"
       :placeholder="$t('Type string to filter by emission')"
-      ref="multiselectRef"
       :options="emissions"
       :multiple="false"
       :searchable="true"
@@ -33,30 +33,31 @@
       @close="onClose"
       @select="onEmissionSelected"
     >
-      <template v-slot:clear="props" >
+      <template #clear="{ props }">
         <div
+          v-if="emission"
           class="multiselect__clear"
-          v-if="emission.length"
           @mousedown.prevent.stop="clearAll(props.search)"
-        ></div>
+        />
       </template>
-      <template v-slot:singleLabel="props" >
+      <template #singleLabel="{ option }">
         <div class="multiselect-octopus-proposition">
-          <span class="option__title">{{ props.option.name }}</span>
+          <span class="option__title">{{ option.name }}</span>
         </div>
       </template>
-      <template v-slot:option="props" >
+      <template #option="{ option }">
         <div class="multiselect-octopus-proposition">
-          <span class="option__title">{{ props.option.name }}</span>
+          <span class="option__title">{{ option.name }}</span>
         </div>
       </template>
-      <template v-slot:noResult>
-      <span>{{
-        $t('No elements found. Consider changing the search query.')
-      }}</span>
+      <template #noResult="">
+        <span>{{ $t('No elements found. Consider changing the search query.') }}</span>
       </template>
-      <template v-slot:afterList>
-        <div v-if="remainingElements" class="multiselect-remaining-elements">
+      <template #afterList="">
+        <div
+          v-if="remainingElements"
+          class="multiselect-remaining-elements"
+        >
           {{
             $t(
               'Count more elements matched your query, please make a more specific search.',
@@ -65,101 +66,106 @@
           }}
         </div>
       </template>
-      <template v-slot:noOptions>{{ $t('List is empty') }}</template>
-      <template v-slot:caret>
+      <template #noOptions="">
+        {{ $t('List is empty') }}
+      </template>
+      <template #caret="">
         <div class="position-relative">
           <span
             class="saooti-arrow_down octopus-arrow-down-2 octopus-arrow-down-top"
-          ></span>
+          />
         </div>
       </template>
-    </Multiselect>
+    </VueMultiselect>
   </div>
 </template>
 
-<style lang="scss">
-.default-multiselect-width {
-  width: 100%;
-}
-</style>
 <script lang="ts">
-import Multiselect from 'vue-multiselect';
+//@ts-ignore
+import VueMultiselect from 'vue-multiselect';
 const octopusApi = require('@saooti/octopus-api');
 
 const ELEMENTS_COUNT = 50;
 const DEFAULT_EMISSION_ID = 0;
 
-const getDefaultEmission = (defaultName: any) => {
+const getDefaultEmission = (defaultName: string) => {
+  if(''=== defaultName){
+    return undefined;
+  }
   return {
     name: defaultName,
-    id: DEFAULT_EMISSION_ID,
+    emissionId: DEFAULT_EMISSION_ID,
+    imageUrl:'',
+    description:'',
+    monetisable:'UNDEFINED',
+    orga :{ 
+      id:'',
+      imageUrl:'',
+      name:''
+    },
+    rubriqueIds:[],
   };
 };
 
-import { defineComponent, ref } from 'vue'
+import { Emission } from '@/store/class/emission';
+import { defineComponent } from 'vue'
 export default defineComponent({
   components: {
-    Multiselect,
+    VueMultiselect
   },
 
   props: {
-    width: { default: '100%' },
-    defaultanswer: { default: undefined as any },
-    organisationId: { default: undefined as any },
-    emissionChosen: { default: undefined as any },
-    displayArrow: { default: true },
-    distributedBy: { default: undefined as any },
-    organisationDistributedBy: { default: undefined as any },
-    reset: { default: false },
+    width: { default: '100%', type: String },
+    defaultanswer: { default: '', type: String },
+    organisationId: { default: undefined, type: String},
+    emissionChosen: { default: undefined, type: Object as ()=>Emission},
+    displayArrow: { default: true, type: Boolean },
+    distributedBy: { default: undefined, type: String},
+    organisationDistributedBy: { default: undefined, type: String},
+    reset: { default: false, type: Boolean },
   },
 
   emits: ['selected'],
 
   data() {
-    let _return:any = {
-      emission: '',
-      emissions: [] as any,
-      remainingElements: 0,
-      isLoading: false,
+    return{
+      emission: getDefaultEmission(this.defaultanswer) as Emission | undefined,
+      emissions: [] as Array<Emission>,
+      remainingElements: 0 as number,
+      isLoading: false as boolean,
     };
-    if (this.defaultanswer) {
-      _return['emission'] = getDefaultEmission(this.defaultanswer);
-    }
-    return _return;
   },
-
-  setup() {
-    const multiselectRef : any = ref(null);
-    return {
-      multiselectRef,
-    };
+  watch: {
+    emissionChosen(): void {
+      this.emission = this.emissionChosen;
+    },
+    reset(): void {
+      this.emission = getDefaultEmission(this.defaultanswer);
+    },
   },
 
-  methods: {
-    onOpen() {
-      this.multiselectRef.$refs.search.setAttribute(
+   methods: {
+    onOpen(): void {
+      (this.$refs.multiselectRef as any).$refs.search.setAttribute(
         'autocomplete',
         'off'
       );
       this.clearAll();
       this.onSearchEmission();
     },
-
-    onClose() {
+    onClose(): void {
       if (this.emission) return;
       this.emission = this.defaultanswer
         ? getDefaultEmission(this.defaultanswer)
-        : '';
+        : undefined;
       this.$emit('selected', this.emission);
     },
-
-    onEmissionSelected(emission: any) {
+    onEmissionSelected(emission: Emission): void {
       this.$emit('selected', emission);
     },
-
-    async onSearchEmission(query: undefined) {
+    async onSearchEmission(query?: string): Promise<void> {
       this.isLoading = true;
-      let standardParam:any = {
+      let standardParam: any = {
         query: query,
         first: 0,
         size: ELEMENTS_COUNT,
@@ -180,28 +186,24 @@ export default defineComponent({
       }
       const response = await octopusApi.fetchEmissions(standardParam);
       if (this.defaultanswer) {
-        this.emissions = [getDefaultEmission(this.defaultanswer)].concat(
-          response.result
-        );
+        const emissionDefault = getDefaultEmission(this.defaultanswer);
+        if(emissionDefault){
+          this.emissions = [emissionDefault].concat(
+            response.result
+          );
+        }
       } else {
         this.emissions = response.result.concat();
       }
       this.isLoading = false;
       this.remainingElements = Math.max(0, response.count - ELEMENTS_COUNT);
     },
-
-    clearAll() {
-      this.emission = '';
+    clearAll(): void {
+      this.emission = undefined;
       this.emissions.length = 0;
     },
   },
-  watch: {
-    emissionChosen(newVal) {
-      this.emission = getDefaultEmission(newVal);
-    },
-    reset() {
-      this.emission = getDefaultEmission(this.defaultanswer);
-    },
-  },
-});
+})
 </script>
+
+<style lang="scss"></style>