@saooti/octopus-sdk 1.0.0 → 29.0.2

package/src/components/pages/Playlist.vue

@@ -1,60 +1,72 @@
 <template>
   <div>
-    <div class="page-box" v-if="loaded && !error">
+    <div
+      v-if="loaded && !error"
+      class="page-box"
+    >
       <h1>{{ $t('Playlist') }}</h1>
       <div class="d-flex">
         <div class="d-flex flex-column flex-grow">
           <EditBox
-            :playlist="playlist"
-            :isReady="isReady"
             v-if="editRight && isEditBox"
-          ></EditBox>
+            :playlist="playlist"
+            :is-ready="isReady"
+          />
           <div class="module-box">
             <h2>{{ name }}</h2>
             <div class="mb-5 mt-3 descriptionText">
               <img
                 :src="imageUrl"
                 :alt="$t('Playlist name image', { name: name })"
-                class="img-box shadow-element float-left mr-3 mb-3"
+                class="img-box shadow-element float-start me-3 mb-3"
+              >
+              <p
+                class="html-wysiwyg-content"
+                v-html="urlify(description)"
               />
-              <p class="html-wysiwyg-content" v-html="urlify(description)"></p>
             </div>
           </div>
         </div>
         <div class="d-flex flex-column share-container">
           <SharePlayer
-            :playlist="playlist"
-            :organisationId="organisationId"
-            :isEducation="isEducation"
             v-if="isSharePlayer && authenticated"
-          >
-          </SharePlayer>
-          <ShareButtons v-if="isShareButtons"></ShareButtons>
+            :playlist="playlist"
+            :organisation-id="organisationId"
+            :is-education="isEducation"
+          />
+          <ShareButtons v-if="isShareButtons" />
         </div>
       </div>
       <PodcastList :playlist="playlist" />
     </div>
-    <div class="d-flex justify-content-center" v-if="!loaded">
-      <div class="spinner-border mr-3"></div>
-      <h3 class="mt-2">{{ $t('Loading content ...') }}</h3>
+    <div
+      v-if="!loaded"
+      class="d-flex justify-content-center"
+    >
+      <div class="spinner-border me-3" />
+      <h3 class="mt-2">
+        {{ $t('Loading content ...') }}
+      </h3>
     </div>
-    <div class="text-center" v-if="error">
+    <div
+      v-if="error"
+      class="text-center"
+    >
       <h3>{{ $t("Playlist doesn't exist") }}</h3>
     </div>
   </div>
 </template>
-<style lang="scss"></style>
+
 <script lang="ts">
-// @ is an alias to /src
-import EditBox from '@/components/display/edit/EditBox.vue';
-import ShareButtons from '../display/sharing/ShareButtons.vue';
-import SharePlayer from '../display/sharing/SharePlayer.vue';
 import PodcastList from '../display/playlist/PodcastList.vue';
 const octopusApi = require('@saooti/octopus-api');
 import { state } from '../../store/paramStore';
 import { displayMethods } from '../mixins/functions';
-
-import { defineComponent } from 'vue'
+import { Playlist } from '@/store/class/playlist';
+import { defineComponent, defineAsyncComponent } from 'vue';
+const ShareButtons = defineAsyncComponent(() => import('../display/sharing/ShareButtons.vue'));
+const EditBox = defineAsyncComponent(() => import('@/components/display/edit/EditBox.vue'));
+const SharePlayer = defineAsyncComponent(() => import('../display/sharing/SharePlayer.vue'));
 export default defineComponent({
   components: {
     ShareButtons,
@@ -62,56 +74,51 @@ export default defineComponent({
     PodcastList,
     SharePlayer,
   },
-  mixins: [displayMethods],
-
-  mounted() {
-    this.getPlaylistDetails();
+  mixins:[displayMethods],
+  props: {
+    playlistId: { default: undefined, type: Number},
+    isEducation: { default: false, type: Boolean},
   },
-
-  props: ['playlistId', 'isEducation'],
   emits: ['playlistTitle'],
 
   data() {
     return {
-      loaded: false,
-      playlist: undefined as any,
-      error: false,
-      isReady: true,
+      loaded: false as boolean,
+      playlist: undefined as Playlist | undefined,
+      error: false as boolean,
+      isReady: true as boolean,
     };
   },
-
+  
   computed: {
-    organisationId() {
+    organisationId(): string {
       return state.generalParameters.organisationId;
     },
-    authenticated():boolean {
+    authenticated(): boolean {
       return state.generalParameters.authenticated;
     },
-    isEditBox() {
+    isEditBox(): boolean {
       return state.podcastPage.EditBox;
     },
-    isShareButtons() {
+    isShareButtons(): boolean {
       return state.podcastPage.ShareButtons;
     },
-    isSharePlayer() {
+    isSharePlayer(): boolean {
       return state.podcastPage.SharePlayer;
     },
-    name():string {
+    name(): string {
       return this.playlist ? this.playlist.title : '';
     },
-
-    imageUrl():string {
-      let dummy = new Date().getTime().toString();
+    imageUrl(): string {
+      const dummy = new Date().getTime().toString();
       return this.playlist ? this.playlist.imageUrl + '?dummy=' + dummy : '';
     },
-
-    description():string {
+    description(): string {
       return this.playlist ? this.playlist.description : '';
     },
-
-    editRight() {
+    editRight(): boolean {
       if (
-        (state.generalParameters.isPlaylist &&
+        (state.generalParameters.isPlaylist && this.playlist &&
           this.organisationId === this.playlist.organisation.id) ||
         state.generalParameters.isAdmin
       )
@@ -119,7 +126,6 @@ export default defineComponent({
       return false;
     },
   },
-
   watch: {
     playlistId() {
       this.loaded = false;
@@ -128,10 +134,13 @@ export default defineComponent({
     },
   },
 
+  mounted() {
+    this.getPlaylistDetails();
+  },
   methods: {
-    async getPlaylistDetails() {
+    async getPlaylistDetails(): Promise<void> {
       try {
-        const data = await octopusApi.fetchPlaylist(this.playlistId);
+        const data: Playlist = await octopusApi.fetchPlaylist(this.playlistId);
         this.playlist = data;
         this.$emit('playlistTitle', this.playlist.title);
         this.loaded = true;
@@ -141,5 +150,7 @@ export default defineComponent({
       }
     },
   },
-});
+})
 </script>
+
+<style lang="scss"></style>

package/src/components/pages/Playlists.vue

@@ -2,90 +2,92 @@
   <div class="page-box">
     <h1>{{ $t('All playlists') }}</h1>
     <router-link
-      to="/main/priv/edit/playlist"
       v-if="editRight && !isPodcastmaker"
+      to="/main/priv/edit/playlist"
       class="d-flex justify-content-center"
     >
-      <button class="btn btn-primary">{{ $t('Create playlist') }}</button>
+      <button class="btn btn-primary">
+        {{ $t('Create playlist') }}
+      </button>
     </router-link>
     <ProductorSearch
+      v-if="isProductorSearch"
       v-model:organisationId="organisationId"
-      :searchPattern="searchPattern"
+      :search-pattern="searchPattern"
       type="playlist"
       @updateOrganisationId="updateOrganisationId"
       @updateSearchPattern="updateSearchPattern"
-      v-if="isProductorSearch"
     />
     <PlaylistList
-      :showCount="true"
+      :show-count="true"
       :first="first"
       :size="size"
       :query="searchPattern"
-      :organisationId="organisationId"
+      :organisation-id="organisationId"
     />
   </div>
 </template>
-<style lang="scss"></style>
+
 <script lang="ts">
-// @ is an alias to /src
 import PlaylistList from '../display/playlist/PlaylistList.vue';
-import ProductorSearch from '../display/filter/ProductorSearch.vue';
 import { state } from '../../store/paramStore';
-
-import { defineComponent } from 'vue'
+import { defineComponent, defineAsyncComponent } from 'vue';
+const ProductorSearch = defineAsyncComponent(() => import('../display/filter/ProductorSearch.vue'));
 export default defineComponent({
   components: {
     ProductorSearch,
     PlaylistList,
   },
-
-  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;
-    }
-    if (this.$route.query.productor) {
-      this.organisationId = this.$route.query.productor;
-    } else if (this.$store.state.filter.organisationId) {
-      this.organisationId = this.$store.state.filter.organisationId;
-    }
+  props: {
+    firstRoute: { default: 0, type: Number},
+    sizeRoute: { default: 12, type: Number},
+    productor: { default: undefined, type: String},
   },
 
   data() {
     return {
-      first: undefined as any,
-      size: undefined as any,
-      searchPattern: '',
-      organisationId: undefined as any,
+      first: 0 as number,
+      size: 12 as number,
+      searchPattern: '' as string,
+      organisationId: undefined as string | undefined,
     };
   },
-
+  
   computed: {
-    isProductorSearch() {
+    isProductorSearch(): boolean {
       return state.podcastsPage.ProductorSearch;
     },
-    isPodcastmaker() {
+    isPodcastmaker(): boolean {
       return state.generalParameters.podcastmaker;
     },
-    editRight() {
+    editRight(): boolean {
       if (state.generalParameters.isPlaylist) return true;
       return false;
     },
   },
 
+  created() {
+    if (this.firstRoute) {
+      this.first = this.firstRoute;
+    }
+    if (this.sizeRoute) {
+      this.size = this.sizeRoute;
+    }
+    if (this.productor) {
+      this.organisationId = this.productor;
+    } else if (this.$store.state.filter.organisationId) {
+      this.organisationId = this.$store.state.filter.organisationId;
+    }
+  },
   methods: {
-    updateOrganisationId(value: any) {
+    updateOrganisationId(value: string): void {
       this.organisationId = value;
     },
-    updateSearchPattern(value: string) {
+    updateSearchPattern(value: string): void {
       this.searchPattern = value;
     },
   },
-});
+})
 </script>
+
+<style lang="scss"></style>