@saooti/octopus-sdk 1.0.0 → 1.1.1

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

@@ -1,144 +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 CategoryChooser from '../categories/CategoryChooser.vue';
+import ClassicSearch from '../../form/ClassicSearch.vue';
 import PodcastList from './PodcastList.vue';
-
-import { defineComponent } from 'vue'
+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,
     PodcastList,
+    ClassicSearch
   },
-
-  created() {
-    if (this.$route.query.first) {
-      this.first = this.$route.query.first;
-    } else {
-      this.first = 0;
-    }
-    if (this.$route.query.size) {
-      this.size = this.$route.query.size;
-    } else {
-      this.size = 12;
-    }
+  props: {
+    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},
   },
-
-  props: [
-    'participantId',
-    'name',
-    'emissionId',
-    'categoryFilter',
-    'productorId',
-    'reload',
-    'editRight',
-  ],
   emits: ['fetch'],
 
   data() {
     return {
-      first: undefined as any,
-      size: undefined as any,
-      searchPattern: '',
-      iabId: undefined as any,
-      reloadList: false,
+      first: 0 as number,
+      size: 30 as number,
+      searchPattern: '' as string,
+      iabId: undefined as number | undefined,
+      reloadList: false as boolean,
     };
   },
 
   computed: {
-    query():string {
-      if (this.searchPattern.length >= 3) return this.searchPattern;
-      return '';
-    },
-  },
-
-  methods: {
-    onCategorySelected(category:any) {
-      if (category && category.id) {
-        this.iabId = category.id;
-      } else {
-        this.iabId = undefined;
-      }
+    titleFilter():string{
+      return this.name ? this.$t('All podcast button', { name: this.name }) : this.$t('All podcast emission button');
     },
-    fetch(podcasts:any) {
-      this.$emit('fetch', podcasts);
+    query(): string {
+      return this.searchPattern.length >= 3 ? this.searchPattern : '' ;
     },
   },
-
   watch: {
-    reload() {
+    reload(): void {
       this.reloadList = !this.reloadList;
     },
   },
-});
-</script>
+  methods: {
+    onCategorySelected(category: Category|undefined): void {
+      this.iabId = category?.id ? category.id : undefined;
+    },
+    fetch(podcasts: Array<Podcast>): void {
+      this.$emit('fetch', podcasts);
+    },
+  },
+})
+</script>