@saooti/octopus-sdk 1.0.0 → 29.0.2

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

@@ -1,11 +1,15 @@
 <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>
+    <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="d-flex align-items-center flex-grow categories-filter"
         v-if="categoryFilter"
+        class="d-flex align-items-center flex-grow categories-filter"
       >
         <CategoryChooser
           :defaultanswer="$t('No category filter')"
@@ -13,132 +17,127 @@
         />
       </div>
       <div class="d-flex position-relative small-flex-grow">
-        <label for="search" class="d-inline" :aria-label="$t('Search')"></label>
+        <label
+          for="search"
+          class="d-inline"
+          :aria-label="$t('Search')"
+        />
         <input
-          :placeholder="$t('Search')"
+          id="search"
           v-model="searchPattern"
+          :placeholder="$t('Search')"
           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>
     </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 PodcastList from './PodcastList.vue';
 
-import { defineComponent } from 'vue'
+import PodcastList from './PodcastList.vue';
+import { Category } from '@/store/class/category';
+import { defineComponent, defineAsyncComponent } from 'vue';
+const CategoryChooser = defineAsyncComponent(() => import('../categories/CategoryChooser.vue'));
 export default defineComponent({
   components: {
     CategoryChooser,
     PodcastList,
   },
-
-  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: 12 as number,
+      searchPattern: '' as string,
+      iabId: undefined as number | undefined,
+      reloadList: false as boolean,
     };
   },
-
   computed: {
-    query():string {
+    query(): string {
       if (this.searchPattern.length >= 3) return this.searchPattern;
       return '';
     },
   },
-
+  watch: {
+    reload(): void {
+      this.reloadList = !this.reloadList;
+    },
+  },
+  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);
+    }
+  },
   methods: {
-    onCategorySelected(category:any) {
+    onCategorySelected(category: Category|undefined): void {
       if (category && category.id) {
         this.iabId = category.id;
       } else {
         this.iabId = undefined;
       }
     },
-    fetch(podcasts:any) {
+    fetch(podcasts: any): void {
       this.$emit('fetch', podcasts);
     },
   },
-
-  watch: {
-    reload() {
-      this.reloadList = !this.reloadList;
-    },
-  },
-});
+})
 </script>
+
+<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>