@saooti/octopus-sdk 1.0.0 → 1.1.1

package/src/components/pages/Participant.vue

@@ -1,191 +1,175 @@
 <template>
-  <div>
-    <div class="page-box" v-if="loaded && !error">
-      <h1 v-if="!lightStyle">{{ $t('Animator') }}</h1>
+  <div class="page-box">
+    <div
+      v-if="loaded && !error"
+    >
+      <h1 v-if="!pageParameters.lightStyle">
+        {{ titleDisplay }}
+      </h1>
       <div
-        class="d-flex w-100 flex-column align-items-center justify-content-center"
+        class="d-flex flex-column align-items-center mb-3"
       >
-        <div
+        <img
+          v-lazy="participant.imageUrl"
+          :title="$t('Animator image')"
+          :alt="$t('Animator image')"
           class="img-box-circle mb-3"
-          :style="{
-            'background-image': 'url(\'' + participant.imageUrl + '\')',
-          }"
-        ></div>
-        <h2 class="text-capitalize">{{ name }}</h2>
+        >
+        <h2 class="text-capitalize">
+          {{ name }}
+        </h2>
+        <!-- eslint-disable vue/no-v-html -->
         <div
-          class="h6 participant-desc html-wysiwyg-content"
+          class="participant-desc html-wysiwyg-content"
           v-html="urlify(description)"
-        ></div>
-        <div class="d-flex justify-content-center" v-if="isRssButton">
-          <a
-            class="btn btn-bigRound"
-            :title="$t('Subscribe to this participant')"
-            :aria-label="$t('Subscribe to this participant')"
-            :href="rssUrl"
-            target="_blank"
-          >
-            <div class="saooti-rss-bounty"></div>
-          </a>
-        </div>
-        <div class="d-flex">
+        />
+        <!-- eslint-enable -->
+        <div class="d-flex mt-3">
           <EditBox
+            v-if="editRight && pageParameters.isEditBox"
             :participant="participant"
-            v-if="editRight && isEditBox"
-            @participantUpdate="updateParticipant"
             class="flex-grow-1"
-          ></EditBox>
+            @participantUpdate="updateParticipant"
+          />
           <ShareButtons
-            :participantId="participantId"
-            v-if="isShareButtons"
-          ></ShareButtons>
+            v-if="pageParameters.isShareButtons"
+            :participant-id="participantId"
+            :organisation-id="participant.orga.id"
+          />
         </div>
       </div>
       <PodcastFilterList
-        :participantId="participantId"
+        v-if="!pageParameters.lightStyle"
+        :participant-id="participantId"
         :name="name"
-        :categoryFilter="true"
+        :category-filter="true"
         :reload="reload"
-        v-if="!lightStyle"
       />
       <PodcastList
+        v-else
         :first="0"
         :size="15"
-        :participantId="participantId"
+        :participant-id="participantId"
         :reload="reload"
-        v-else
       />
     </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>
-    <div class="text-center" v-if="error">
-      <h3>{{ $t("Animator doesn't exist") }}</h3>
-    </div>
+    <ClassicLoading
+      :loading-text="!loaded?$t('Loading content ...'):undefined"
+      :error-text="error?$t(`Animator doesn't exist`):undefined"
+    />
   </div>
 </template>
 
-<style lang="scss">
-@media (min-width: 950px) {
-  .participant-desc {
-    max-width: 50%;
-    line-height: 1.5em;
-  }
-}
-</style>
-
 <script lang="ts">
-// @ is an alias to /src
-import EditBox from '@/components/display/edit/EditBox.vue';
-import ShareButtons from '../display/sharing/ShareButtons.vue';
-const octopusApi = require('@saooti/octopus-api');
-import PodcastFilterList from '../display/podcasts/PodcastFilterList.vue';
-import PodcastList from '../display/podcasts/PodcastList.vue';
+import octopusApi from '@saooti/octopus-api';
 import { state } from '../../store/paramStore';
 import { displayMethods } from '../mixins/functions';
-
-import { defineComponent } from 'vue'
+import { orgaComputed } from '../mixins/orgaComputed';
+import { handle403 } from '../mixins/handle403';
+import { Participant } from '@/store/class/general/participant';
+import ClassicLoading from '../form/ClassicLoading.vue';
+import { defineComponent, defineAsyncComponent } from 'vue';
+import { AxiosError } from 'axios';
+const ShareButtons = defineAsyncComponent(() => import('../display/sharing/ShareButtons.vue'));
+const PodcastFilterList = defineAsyncComponent(() => import('../display/podcasts/PodcastFilterList.vue'));
+const EditBox = defineAsyncComponent(() => import('@/components/display/edit/EditBox.vue'));
+const PodcastList = defineAsyncComponent(() => import('../display/podcasts/PodcastList.vue'));
 export default defineComponent({
   components: {
     ShareButtons,
     PodcastFilterList,
     EditBox,
     PodcastList,
+    ClassicLoading
   },
-
-  mixins: [displayMethods],
-
-  mounted() {
-    this.getParticipantDetails();
+  mixins: [displayMethods, handle403, orgaComputed],
+  props: {
+    participantId: { default: undefined, type: Number},
   },
-
-  props: ['participantId'],
   emits: ['participantTitle'],
-
   data() {
     return {
-      loaded: false,
-      participant: undefined as any,
-      error: false,
-      reload: false,
+      loaded: false as boolean,
+      participant: undefined as Participant|undefined,
+      error: false as boolean,
+      reload: false as boolean,
     };
   },
-
   computed: {
-    organisationId() {
-      return state.generalParameters.organisationId;
+    titleDisplay(): string{
+      return state.intervenantPage.titlePage??this.$t('Animator');
     },
-    authenticated():boolean {
-      return state.generalParameters.authenticated;
+    pageParameters(){
+      return {
+        isEditBox : (state.podcastPage.EditBox as boolean),
+        isShareButtons: (state.podcastPage.ShareButtons as boolean),
+        lightStyle:(state.intervenantPage.lightStyle as boolean),
+      };
     },
-    isEditBox() {
-      return state.podcastPage.EditBox;
+    rssUrl(): string {
+      return `${state.generalParameters.ApiUri}rss/participant/${this.participantId}`;
     },
-    isShareButtons() {
-      return state.podcastPage.ShareButtons;
+    description(): string {
+      return this.participant?.description ?? '';
     },
-    lightStyle() {
-      return state.intervenantPage.lightStyle;
+    name(): string {
+      return (`${this.participant?.firstName??''} ${this.participant?.lastName??''}`).trim();
     },
-    isRssButton() {
-      return state.intervenantPage.rssButton;
+    editRight(): boolean {
+      return (true===this.authenticated &&
+          this.myOrganisationId === this.participant?.orga?.id) ||
+        true===state.generalParameters.isAdmin
     },
-    rssUrl():any {
-      return (
-        state.generalParameters.ApiUri + 'rss/participant/' + this.participantId
-      );
-    },
-    description():string {
-      let description;
-      description = this.participant.description || '';
-      if (state.generalParameters.isIE11)
-        return description.substring(0, 50) + '...';
-      return description;
-    },
-
-    name():string {
-      const fullName = (
-        (this.participant.firstName || '') +
-        ' ' +
-        (this.participant.lastName || '')
-      ).trim();
-      if (state.generalParameters.isIE11)
-        return fullName.substring(0, 50) + '...';
-      return fullName;
+  },
+  watch: {
+    participant: {
+      deep: true,
+      handler(){
+      this.reload = !this.reload;
+      }
     },
-    editRight() {
-      if (
-        (this.authenticated &&
-          this.organisationId === this.participant.orga.id) ||
-        state.generalParameters.isAdmin
-      )
-        return true;
-      return false;
+    participantId: {
+      immediate: true,
+      handler() {
+        this.getParticipantDetails();
+      },
     },
   },
-
   methods: {
-    async getParticipantDetails() {
+    initError():void{
+      this.error = true;
+      this.loaded = true;
+    },
+    async getParticipantDetails(): Promise<void> {
       this.loaded = false;
       try {
-        const data = await octopusApi.fetchParticipant(this.participantId);
-        this.participant = data;
-        this.$emit('participantTitle', this.name);
-        this.loaded = true;
-      } catch {
-        this.error = true;
+        const data = await octopusApi.fetchData<Participant>(0, 'participant/'+this.participantId);
+        if("PUBLIC"!==data?.orga?.privacy && this.filterOrga!==data?.orga?.id){
+          this.initError();
+          return;
+        }
+        this.updateParticipant(data);
         this.loaded = true;
+      } catch(error) {
+        this.handle403((error as AxiosError));
+        this.initError();
       }
     },
-    updateParticipant(participant:any) {
+    updateParticipant(participant: Participant): void {
       this.participant = participant;
       this.$emit('participantTitle', this.name);
     },
   },
-  watch: {
-    participant() {
-      this.reload = !this.reload;
-    },
-  },
-});
+})
 </script>
+
+<style lang="scss">
+.octopus-app{
+  @media (min-width: 950px) {
+    .participant-desc {
+      max-width: 50%;
+      line-height: 1.5em;
+    }
+  }
+}
+</style>

package/src/components/pages/Participants.vue

@@ -1,69 +1,53 @@
 <template>
   <div class="page-box">
-    <h1>{{ $t('All participants') }}</h1>
+    <h1>{{ titleDisplay }}</h1>
     <ProductorSearch
-      :organisationId="organisationId"
-      :searchPattern="searchPattern"
+      :organisation-id="organisationId"
+      :search-pattern="searchPattern"
       type="participant"
-      @updateOrganisationId="updateOrganisationId"
-      @updateSearchPattern="updateSearchPattern"
+      @updateOrganisationId="organisationId = $event"
+      @updateSearchPattern="searchPattern = $event"
     />
     <ParticipantList
-      :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 { orgaComputed } from '../mixins/orgaComputed';
 import ParticipantList from '../display/participant/ParticipantList.vue';
 import ProductorSearch from '../display/filter/ProductorSearch.vue';
-
+import { state } from '../../store/paramStore';
 import { defineComponent } from 'vue'
 export default defineComponent({
   components: {
     ProductorSearch,
     ParticipantList,
   },
-
-  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;
-    }
+  mixins: [orgaComputed],
+  props: {
+    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: 30 as number,
+      searchPattern: '' as string,
+      organisationId: undefined as string | undefined,
     };
   },
-
-  methods: {
-    updateOrganisationId(value: any) {
-      this.organisationId = value;
-    },
-    updateSearchPattern(value: string) {
-      this.searchPattern = value;
+  computed: {
+    titleDisplay(): string{
+      return state.intervenantsPage.titlePage ?? this.$t('All participants');
     },
   },
-});
-</script>
+  created() {
+    this.organisationId = this.productor??this.filterOrga;
+  },
+})
+</script>

package/src/components/pages/Playlist.vue

@@ -1,145 +1,145 @@
 <template>
-  <div>
-    <div class="page-box" v-if="loaded && !error">
+  <div class="page-box">
+    <div
+      v-if="loaded && !error"
+    >
       <h1>{{ $t('Playlist') }}</h1>
       <div class="d-flex">
-        <div class="d-flex flex-column flex-grow">
+        <div class="d-flex flex-column flex-grow-1">
           <EditBox
+            v-if="editRight && pageParameters.isEditBox"
             :playlist="playlist"
-            :isReady="isReady"
-            v-if="editRight && isEditBox"
-          ></EditBox>
+          />
           <div class="module-box">
             <h2>{{ name }}</h2>
             <div class="mb-5 mt-3 descriptionText">
               <img
-                :src="imageUrl"
+                v-lazy="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"
+              >
+              <!-- eslint-disable vue/no-v-html -->
+              <p
+                class="html-wysiwyg-content"
+                v-html="urlify(description)"
               />
-              <p class="html-wysiwyg-content" v-html="urlify(description)"></p>
+              <!-- eslint-enable -->
             </div>
           </div>
         </div>
-        <div class="d-flex flex-column share-container">
+        <div class="d-flex flex-column flex-grow-mobile">
           <SharePlayer
+            v-if="pageParameters.isSharePlayer && authenticated"
             :playlist="playlist"
-            :organisationId="organisationId"
-            :isEducation="isEducation"
-            v-if="isSharePlayer && authenticated"
-          >
-          </SharePlayer>
-          <ShareButtons v-if="isShareButtons"></ShareButtons>
+            :organisation-id="myOrganisationId"
+            :is-education="isEducation"
+          />
+          <ShareButtons
+            v-if="pageParameters.isShareButtons"
+            :playlist="playlist"
+          />
         </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>
-    <div class="text-center" v-if="error">
-      <h3>{{ $t("Playlist doesn't exist") }}</h3>
-    </div>
+    <ClassicLoading
+      :loading-text="!loaded?$t('Loading content ...'):undefined"
+      :error-text="error?$t(`Playlist doesn't exist`):undefined"
+    />
   </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 { orgaComputed } from '../mixins/orgaComputed';
+import ClassicLoading from '../form/ClassicLoading.vue';
 import PodcastList from '../display/playlist/PodcastList.vue';
-const octopusApi = require('@saooti/octopus-api');
+import octopusApi from '@saooti/octopus-api';
 import { state } from '../../store/paramStore';
 import { displayMethods } from '../mixins/functions';
-
-import { defineComponent } from 'vue'
+import { handle403 } from '../mixins/handle403';
+import { Playlist } from '@/store/class/general/playlist';
+import { defineComponent, defineAsyncComponent } from 'vue';
+import { AxiosError } from 'axios';
+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,
     EditBox,
     PodcastList,
     SharePlayer,
+    ClassicLoading
   },
-  mixins: [displayMethods],
+  mixins:[displayMethods, handle403, orgaComputed],
 
-  mounted() {
-    this.getPlaylistDetails();
+  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,
     };
   },
-
   computed: {
-    organisationId() {
-      return state.generalParameters.organisationId;
-    },
-    authenticated():boolean {
-      return state.generalParameters.authenticated;
+    pageParameters(){
+      return {
+        isEditBox : (state.podcastPage.EditBox as boolean),
+        isShareButtons: (state.podcastPage.ShareButtons as boolean),
+        isSharePlayer: (state.podcastPage.SharePlayer as boolean),
+      };
     },
-    isEditBox() {
-      return state.podcastPage.EditBox;
+    name(): string {
+      return this.playlist?.title ??'';
     },
-    isShareButtons() {
-      return state.podcastPage.ShareButtons;
-    },
-    isSharePlayer() {
-      return state.podcastPage.SharePlayer;
-    },
-    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 {
-      return this.playlist ? this.playlist.description : '';
+    description(): string {
+      return this.playlist?.description ??'';
     },
-
-    editRight() {
-      if (
-        (state.generalParameters.isPlaylist &&
-          this.organisationId === this.playlist.organisation.id) ||
-        state.generalParameters.isAdmin
-      )
-        return true;
-      return false;
+    editRight(): boolean {
+      return (true===state.generalParameters.isPlaylist &&
+        this.myOrganisationId === this.playlist?.organisation?.id) ||
+        true ===state.generalParameters.isAdmin
     },
   },
-
   watch: {
-    playlistId() {
-      this.loaded = false;
-      this.error = false;
-      this.getPlaylistDetails();
+    playlistId: {
+      immediate: true,
+      handler() {
+        this.getPlaylistDetails();
+      },
     },
   },
 
   methods: {
-    async getPlaylistDetails() {
+    initError():void{
+      this.error = true;
+      this.loaded = true;
+    },
+    async getPlaylistDetails(): Promise<void> {
       try {
-        const data = await octopusApi.fetchPlaylist(this.playlistId);
-        this.playlist = data;
+        this.loaded = false;
+        this.error = false;
+        this.playlist = await octopusApi.fetchData<Playlist>(0, 'playlist/'+this.playlistId);
+        if("PUBLIC"!==this.playlist.organisation?.privacy && this.filterOrga!==this.playlist.organisation?.id){
+          this.initError();
+          return;
+        }
         this.$emit('playlistTitle', this.playlist.title);
-        this.loaded = true;
-      } catch {
-        this.error = true;
-        this.loaded = true;
+      } catch(error) {
+        this.handle403((error as AxiosError));
+        this.initError();
       }
+      this.loaded = true;
     },
   },
-});
-</script>
+})
+</script>