@saooti/octopus-sdk 0.28.16 → 1.1.1

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

@@ -1,94 +1,82 @@
 <template>
-   <div class="comma" v-if="participants.length">
-      {{ title }}
-      <span
-        class="saooti-help m-0"
-        :id="idPopover"
-        :aria-label="$t('Help')"
-      ></span>
-      <span class="mx-1">:</span>
-      <b-popover
-        :target="idPopover"
-        triggers="hover"
-        custom-class="participant-help"
-      >
-        <div class="text-center font-weight-bold">{{title}}</div>
-        <div class="horizontal-separator my-1"></div>
-        <div 
-        class="d-flex flex-column align-items-center"
-        v-for="participant in participants"
-        v-bind:key="'desc-'+participant.participantId">
-          <b><i>{{getName(participant) }}</i></b>
-          <div
-            class="h6 participant-desc html-wysiwyg-content"
-            v-if="participant.description"
-            v-html="participant.description"
-          ></div>
-          <div class="horizontal-separator my-1"></div>
-        </div>
-      </b-popover>
-      <router-link
-        :aria-label="$t('Participant')"
-        class="link-info"
+  <div
+    v-if="participants.length"
+    class="comma"
+  >
+    {{ title }}
+    <span
+      :id="idPopover"
+      role="button"
+      tabindex="0"
+      class="saooti-help m-0"
+      :title="title"
+    />
+    <span class="mx-1">:</span>
+    <Popover
+      :target="idPopover"
+    >
+      <div 
         v-for="participant in participants"
-        v-bind:key="participant.participantId"
-        :to="{
-          name: 'participant',
-          params: { participantId: participant.participantId },
-          query: {
-            productor: $store.state.filter.organisationId,
-          },
-        }"
-        >{{ getName(participant) }}</router-link
+        :key="'desc-'+participant.participantId"
+        class="d-flex flex-column align-items-center"
       >
-    </div>
+        <b><i>{{ getName(participant) }}</i></b>
+        <!-- eslint-disable vue/no-v-html -->
+        <div
+          v-if="participant.description"
+          class="h6 participant-desc html-wysiwyg-content"
+          v-html="participant.description"
+        />
+        <!-- eslint-enable -->
+        <hr>
+      </div>
+    </Popover>
+    <router-link
+      v-for="participant in participants"
+      :key="participant.participantId"
+      :title="$t('Participant')"
+      class="fw-bold"
+      :to="{
+        name: 'participant',
+        params: { participantId: participant.participantId },
+        query: {
+          productor: $store.state.filter.organisationId,
+        },
+      }"
+    >
+      {{ getName(participant) }}
+    </router-link>
+  </div>
 </template>
 
-<style lang="scss">
-.participant-help{
-  .horizontal-separator {
-    border-top: 1px solid #cccccc;
-    width: 100%;
-  }
-} 
-</style>
-
 <script lang="ts">
-import { Participant } from '@/store/class/participant';
-import Vue from 'vue';
-export default Vue.extend({
+import Popover from '../../misc/Popover.vue';
+import { Participant } from '@/store/class/general/participant';
+import { defineComponent } from 'vue'
+export default defineComponent({
   name: 'ParticipantDescription',
 
-  props: {
-    participants: { default: () => ([]) as Array<Participant>},
-    isGuest: { default: false as boolean},
+  components:{
+    Popover
   },
 
-  data() {
-    return {
-    };
+  props: {
+    participants: { default: () => [], type: Array as ()=> Array<Participant>},
+    isGuest: { default: false, type:  Boolean},
   },
+
   computed:{
     idPopover(): string{
-      if(this.isGuest){
-        return "popover-guests-help";
-      }
-      return "popover-animators-help";
+      return this.isGuest ? "popover-guests-help" : "popover-animators-help";
     },
     title(): string{
-      if(this.isGuest){
-        return this.$t('Guests').toString();
-      }
-      return this.$t('Animated by').toString();
+      return this.isGuest ? this.$t('Guests') : this.$t('Animated by');
     }
   },
-
   methods: {
-    getName(person: any): string {
-      const first = person.firstName || '';
-      const last = person.lastName || '';
-      return (first + ' ' + last).trim();
+    getName(person: Participant): string {
+      return (`${person.firstName??''} ${person.lastName??''}`).trim();
     },
   },
-});
-</script>
+})
+</script>

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

@@ -1,133 +1,91 @@
 <template>
-  <div class="p-3 list-episodes">
-    <h2 v-if="name">{{ $t('All podcast button', { name: name }) }}</h2>
-    <h2 v-else>{{ $t('All podcast emission button') }}</h2>
-    <div class="d-flex align-items-center flex-wrap">
+  <div class="p-3">
+    <h2>{{ titleFilter }}</h2>
+    <div class="d-flex align-items-center flex-wrap mb-2">
       <div
-        class="d-flex align-items-center flex-grow categories-filter"
-        v-if="categoryFilter"
+        class="d-flex align-items-center flex-grow-1 me-3"
       >
         <CategoryChooser
           :defaultanswer="$t('No category filter')"
           @selected="onCategorySelected"
         />
       </div>
-      <div class="d-flex position-relative small-flex-grow">
-        <label for="search" class="d-inline" :aria-label="$t('Search')"></label>
-        <input
-          :placeholder="$t('Search')"
-          v-model="searchPattern"
-          class="filter-search-input input-no-outline flex-grow"
-          id="search"
-        />
-        <div
-          class="saooti-search-bounty filter-list-search-icon search-icon-container"
-        ></div>
-      </div>
+      <ClassicSearch
+        v-model:textInit="searchPattern"
+        class="flex-small-grow"
+        id-checkbox="podcast-filter-search"
+        :label="$t('Search')"
+      />
     </div>
     <PodcastList
       :first="first"
       :size="size"
-      :iabId="iabId"
+      :iab-id="iabId"
       :query="query"
-      :participantId="participantId"
-      :emissionId="emissionId"
-      :organisationId="productorId"
+      :participant-id="participantId"
+      :emission-id="emissionId"
+      :organisation-id="productorId"
       :reload="reloadList"
-      :includeHidden="editRight"
+      :include-hidden="editRight"
       @fetch="fetch"
     />
   </div>
 </template>
 
-<style lang="scss">
-.categories-filter {
-  .multiselect {
-    width: 75%;
-    @media (max-width: 600px) {
-      width: 100%;
-    }
-  }
-}
-.list-episodes {
-  padding: 2rem 0.5rem 1rem !important;
-  margin: 0 0.5rem;
-
-  @media (max-width: 450px) {
-    padding: 0.5rem 0rem 1rem !important;
-  }
-  h2 {
-    margin-bottom: 0.5rem;
-  }
-}
-.filter-list-search-icon {
-  right: 1.6rem !important;
-  font-weight: bold;
-}
-.small-flex-grow {
-  flex-grow: 0.3;
-}
-</style>
-
 <script lang="ts">
-// @ is an alias to /src
+import ClassicSearch from '../../form/ClassicSearch.vue';
 import PodcastList from './PodcastList.vue';
-import { Category } from '@/store/class/category';
-import Vue from 'vue';
-export default Vue.extend({
+import { Category } from '@/store/class/general/category';
+import { defineComponent, defineAsyncComponent } from 'vue';
+import { Podcast } from '@/store/class/general/podcast';
+const CategoryChooser = defineAsyncComponent(() => import('../categories/CategoryChooser.vue'));
+export default defineComponent({
   components: {
-    CategoryChooser: () => import('../categories/CategoryChooser.vue'),
+    CategoryChooser,
     PodcastList,
+    ClassicSearch
   },
   props: {
-    participantId: { default: undefined as number|undefined},
-    name: { default: undefined as string|undefined},
-    emissionId: { default: undefined as number|undefined},
-    categoryFilter: { default: false as boolean},
-    reload: { default: false as boolean},
-    editRight: { default: false as boolean},
-    productorId: { default: undefined as string|undefined},
+    participantId: { default: undefined, type: Number},
+    name: { default: undefined, type: String},
+    emissionId: { default: undefined, type: Number},
+    categoryFilter: { default: false, type:  Boolean},
+    reload: { default: false, type:  Boolean},
+    editRight: { default: false, type:  Boolean},
+    productorId: { default: undefined, type: String},
   },
+  emits: ['fetch'],
 
-   data() {
+  data() {
     return {
       first: 0 as number,
-      size: 12 as number,
+      size: 30 as number,
       searchPattern: '' as string,
       iabId: undefined as number | undefined,
       reloadList: false as boolean,
     };
   },
-  created() {
-    if (this.$route.query.first && 'string' === typeof this.$route.query.first) {
-      this.first = parseInt(this.$route.query.first);
-    }
-    if (this.$route.query.size && 'string' === typeof this.$route.query.size) {
-      this.size = parseInt(this.$route.query.size);
-    }
-  },
+
   computed: {
+    titleFilter():string{
+      return this.name ? this.$t('All podcast button', { name: this.name }) : this.$t('All podcast emission button');
+    },
     query(): string {
-      if (this.searchPattern.length >= 3) return this.searchPattern;
-      return '';
+      return this.searchPattern.length >= 3 ? this.searchPattern : '' ;
+    },
+  },
+  watch: {
+    reload(): void {
+      this.reloadList = !this.reloadList;
     },
   },
   methods: {
     onCategorySelected(category: Category|undefined): void {
-      if (category && category.id) {
-        this.iabId = category.id;
-      } else {
-        this.iabId = undefined;
-      }
+      this.iabId = category?.id ? category.id : undefined;
     },
-    fetch(podcasts: any): void {
+    fetch(podcasts: Array<Podcast>): void {
       this.$emit('fetch', podcasts);
     },
   },
-  watch: {
-    reload(): void {
-      this.reloadList = !this.reloadList;
-    },
-  },
-});
-</script>
+})
+</script>