@saooti/octopus-sdk 0.28.16 → 1.1.1

package/src/components/pages/Home.vue

@@ -4,42 +4,40 @@
       <PodcastInlineList
         v-for="c in categories"
         :key="c.id"
-        :iabId="c.id"
+        :iab-id="c.id"
         :title="c.name"
-        :buttonText="$t('All podcast button', { name: c.name })"
+        :button-text="$t('All podcast button', { name: c.name })"
       />
     </template>
-     <template v-else>
+    <template v-else>
       <PodcastInlineList
         v-for="r in rubriqueDisplay"
         :key="r.rubriqueId"
-        :rubriqueId="rubriqueId.concat(r.rubriqueId)"
+        :rubrique-id="rubriqueId.concat(r.rubriqueId)"
         :title="r.name"
-        :buttonText="$t('All podcast button', { name: r.name })"
+        :button-text="$t('All podcast button', { name: r.name })"
       />
       <PodcastInlineList
         v-if="rubriqueDisplay && rubriqueDisplay.length"
-        :noRubriquageId="[rubriqueDisplay[0].rubriquageId]"
-        :rubriqueId="rubriqueId"
+        :no-rubriquage-id="[rubriqueDisplay[0].rubriquageId]"
+        :rubrique-id="rubriqueId"
         :title="$t('Without rubric')"
-        :buttonText="$t('All podcast button', { name: $t('Without rubric') })"
+        :button-text="$t('All podcast button', { name: $t('Without rubric') })"
       />
     </template>
   </div>
 </template>
-<style lang="scss"></style>
 
 <script lang="ts">
 import PodcastInlineList from '../display/podcasts/PodcastInlineList.vue';
 import { state } from '../../store/paramStore';
-
-import Vue from 'vue';
-import { RubriquageFilter } from '@/store/class/rubriquageFilter';
-import { Rubriquage } from '@/store/class/rubriquage';
-import { Rubrique } from '@/store/class/rubrique';
-export default Vue.extend({
-  name: 'home',
-
+import { RubriquageFilter } from '@/store/class/rubrique/rubriquageFilter';
+import { Rubriquage } from '@/store/class/rubrique/rubriquage';
+import { Rubrique } from '@/store/class/rubrique/rubrique';
+import { defineComponent } from 'vue'
+import { Category } from '@/store/class/general/category';
+export default defineComponent({
+  name: 'Home',
   components: {
     PodcastInlineList,
   },
@@ -48,37 +46,37 @@ export default Vue.extend({
       rubriqueId: [] as Array<number>,
     };
   },
-  created(){
-    if(this.rubriqueFilter.length){
-      this.updateRubriquageFilter();
-    }
-  },
   computed: {
     rubriqueDisplay(): Array<Rubrique>{
       return this.$store.state.filter.rubriqueDisplay.filter((rubrique: Rubrique) => 0 !== rubrique.podcastCount );
     },
     rubriquageFilter(): Array<Rubriquage>{
-      if(this.$store.state.filter.organisationId){
-        return this.$store.state.filter.rubriquageArray;
-      }
-      return [];
+      return this.$store.state.filter.organisationId ? this.$store.state.filter.rubriquageArray :[];
     },
     rubriqueFilter(): Array<RubriquageFilter>{
       return this.$store.state.filter.rubriqueFilter;
     },
-    isPodcastmaker(): boolean {
-      return state.generalParameters.podcastmaker;
-    },
-    categories(): any {
+    categories(): Array<Category> {
       if(this.$store.state.filter.iab){
         return [this.$store.state.filter.iab];
       }
-      return this.$store.state.categories.filter((c: any) => {
-        if (this.isPodcastmaker) return c.podcastOrganisationCount;
+      return this.$store.state.categories.filter((c: Category) => {
+        if (state.generalParameters.podcastmaker) return c.podcastOrganisationCount;
         return c.podcastCount;
       });
     },
   },
+  watch:{
+    rubriqueFilter:{
+      deep: true,
+      immediate: true,
+      handler(){
+        if(this.rubriqueFilter.length){
+          this.updateRubriquageFilter();
+        }
+      }
+    }
+  },
   methods:{
     updateRubriquageFilter(){
       const length = this.rubriqueFilter.length;
@@ -90,11 +88,6 @@ export default Vue.extend({
       }
       this.rubriqueId = rubriqueId;
     },
-  },
-  watch:{
-    rubriqueFilter(){
-      this.updateRubriquageFilter();
-    }
   }
-});
-</script>
+})
+</script>

package/src/components/pages/Lives.vue

@@ -3,92 +3,86 @@
     <div class="d-flex flex-column align-items-center mb-3">
       <h1>{{ $t('In live') }}</h1>
       <template v-if="!isPodcastmaker">
-        <router-link to="/main/priv/edit/live" v-if="liveRight && filterOrga">
-          <button class="btn btn-primary">{{ $t('Launch a new live') }}</button>
+        <router-link
+          v-if="liveRight && filterOrga"
+          to="/main/priv/edit/live"
+        >
+          <button class="btn btn-primary">
+            {{ $t('Launch a new live') }}
+          </button>
         </router-link>
         <template v-else>
-          <div class="align-self-start font-weight-bold mb-2">
+          <div class="align-self-start fw-bold mb-2">
             {{ $t('Please chose a productor') }}
           </div>
           <OrganisationChooser
             :defaultanswer="$t('Please chose a productor')"
-            :all="true"
             @selected="onOrganisationSelected"
           />
         </template>
       </template>
     </div>
     <LiveList
-      @initConferenceIds="initConferenceIds"
-      :conferenceWatched="conferenceWatched"
-      :organisationId="organisationId"
       v-if="filterOrga || organisationId"
+      :conference-watched="conferenceWatched"
+      :organisation-id="organisationId"
+      @initConferenceIds="initConferenceIds"
     />
   </div>
 </template>
-<style lang="scss"></style>
+
 <script lang="ts">
-// @ is an alias to /src
 import { state } from '../../store/paramStore';
-
-import Vue from 'vue';
-import { Organisation } from '@/store/class/organisation';
-export default Vue.extend({
+import { Organisation } from '@/store/class/general/organisation';
+import { defineComponent, defineAsyncComponent } from 'vue';
+import { Conference } from '@/store/class/conference/conference';
+const LiveList = defineAsyncComponent(() => import('../display/live/LiveList.vue'));
+const OrganisationChooser = defineAsyncComponent(() => import('../display/organisation/OrganisationChooser.vue'));
+export default defineComponent({
   components: {
-    LiveList: () => import('../display/live/LiveList.vue'),
-    OrganisationChooser: () => import('../display/organisation/OrganisationChooser.vue'),
+    LiveList,
+    OrganisationChooser,
   },
   props: {
-    conferenceWatched: { default: () => ([])  },
-    organisationId: { default: undefined as any },
-    productor:{default:undefined as string|undefined}
+    conferenceWatched: { default: () => [], type: Array as ()=>Array<{conferenceId:number,interval:ReturnType<typeof setTimeout>|undefined, status:string}>},
+    organisationId: { default: undefined, type: String },
+    productor:{default:undefined, type: String}
   },
+  emits: ['update:organisationId', 'initConferenceIds'],
   data() {
     return {
       live: true as boolean,
     };
   },
-  created() {
-    if (this.productor) {
-      this.$emit('update:organisationId',this.productor);
-    } else if (this.$store.state.filter.organisationId) {
-      this.$emit('update:organisationId',this.$store.state.filter.organisationId);
-    }
-    if (
-      this.$store.state.organisation &&
-      this.$store.state.organisation.attributes &&
-      !this.$store.state.organisation.attributes['live.active']
-    ) {
-      this.live = false;
-    }
-  },
   
   computed: {
     liveRight(): boolean {
-      if (this.isRoleLive && this.live) return true;
-      return false;
-    },
-    isRoleLive(): boolean {
-      return state.generalParameters.isRoleLive;
+      return (state.generalParameters.isRoleLive as boolean)&& this.live;
     },
     filterOrga(): string {
       return this.$store.state.filter.organisationId;
     },
     isPodcastmaker(): boolean {
-      return state.generalParameters.podcastmaker;
+      return (state.generalParameters.podcastmaker as boolean);
     },
   },
+  created() {
+    if (this.productor) {
+      this.$emit('update:organisationId',this.productor);
+    } else if (this.$store.state.filter.organisationId) {
+      this.$emit('update:organisationId',this.$store.state.filter.organisationId);
+    }
+    if (!this.$store.state.organisation?.attributes?.['live.active']) {
+      this.live = false;
+    }
+  },
   methods: {
-    initConferenceIds(listIds: any): void {
+    initConferenceIds(listIds: Array<Conference>): void {
       this.$emit('initConferenceIds', listIds);
     },
     onOrganisationSelected(organisation: Organisation|undefined): void {
-      if (organisation && organisation.id) {
-        this.$emit('update:organisationId', organisation.id);
-      } else {
-        this.$emit('update:organisationId', undefined);
-      }
+      this.$emit('update:organisationId', organisation?.id);
     },
   },
-});
-</script>
+})
+</script>

package/src/components/pages/PageNotFound.vue

@@ -0,0 +1,55 @@
+<template>
+  <div
+    class="page-box page-box-absolute page-not-found"
+    :style="backgroundStyle"
+  >
+    <div class="position-absolute module-box">
+      <h1>{{ $t('Oops') }}</h1>
+      <h2>{{ $t('The page you are looking for cannot be found') }}</h2>
+      <router-link
+        class="btn btn-primary"
+        :to="{
+          name: 'home',
+          query: { productor: $store.state.filter.organisationId,
+                   iabId:$store.state.filter.iab?.id,
+                   rubriquesId: rubriqueQueryParam},
+        }"
+      >
+        {{ $t('Back to home') }}
+      </router-link>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { RubriquageFilter } from '@/store/class/rubrique/rubriquageFilter';
+import { defineComponent } from 'vue';
+export default defineComponent({
+  name: 'PageNotFound',
+  computed:{
+    rubriqueQueryParam(): string|undefined{
+      if(this.$store.state.filter?.rubriqueFilter?.length){
+        return this.$store.state.filter.rubriqueFilter.map((value: RubriquageFilter) =>  value.rubriquageId+':'+value.rubriqueId).join();
+      }
+      return undefined;
+    },
+    backgroundStyle():string{
+      return "background-image: url('/img/404.svg');";
+    },
+  },
+  mounted() {
+    document.title = this.$store.state.general.metaTitle;
+  },
+});
+</script>
+<style lang="scss">
+.octopus-app .page-not-found{
+  background-size: cover;
+  background-position: center;
+  background-color: #ebebeb; 
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0;
+}
+</style>

package/src/components/pages/Participant.vue

@@ -1,98 +1,92 @@
 <template>
-  <div>
-    <div class="page-box intervenant-page" v-if="loaded && !error">
-      <h1 v-if="undefined === titlePage ||!lightStyle">{{ $t('Animator') }}</h1>
-      <h1 v-else>{{ titlePage }}</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"
-            rel="noopener"
-            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
-const octopusApi = require('@saooti/octopus-api');
+import octopusApi from '@saooti/octopus-api';
 import { state } from '../../store/paramStore';
 import { displayMethods } from '../mixins/functions';
-import { Participant } from '@/store/class/participant';
-
-export default displayMethods.extend({
+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: () => import('../display/sharing/ShareButtons.vue'),
-    PodcastFilterList: () => import('../display/podcasts/PodcastFilterList.vue'),
-    EditBox: () => import('@/components/display/edit/EditBox.vue'),
-    PodcastList: () => import('../display/podcasts/PodcastList.vue'),
+    ShareButtons,
+    PodcastFilterList,
+    EditBox,
+    PodcastList,
+    ClassicLoading
   },
+  mixins: [displayMethods, handle403, orgaComputed],
   props: {
-    participantId: { default: undefined as number|undefined},
+    participantId: { default: undefined, type: Number},
   },
+  emits: ['participantTitle'],
   data() {
     return {
       loaded: false as boolean,
@@ -101,67 +95,64 @@ export default displayMethods.extend({
       reload: false as boolean,
     };
   },
-  mounted() {
-    this.getParticipantDetails();
-  },
   computed: {
-    organisationId(): string {
-      return state.generalParameters.organisationId;
-    },
-    authenticated(): boolean {
-      return state.generalParameters.authenticated;
-    },
-    isEditBox(): boolean {
-      return state.podcastPage.EditBox;
-    },
-    isShareButtons(): boolean {
-      return state.podcastPage.ShareButtons;
-    },
-    lightStyle(): boolean {
-      return state.intervenantPage.lightStyle;
+    titleDisplay(): string{
+      return state.intervenantPage.titlePage??this.$t('Animator');
     },
-    isRssButton(): boolean {
-      return state.intervenantPage.rssButton;
-    },
-    titlePage(): string|undefined {
-      return state.intervenantPage.titlePage;
+    pageParameters(){
+      return {
+        isEditBox : (state.podcastPage.EditBox as boolean),
+        isShareButtons: (state.podcastPage.ShareButtons as boolean),
+        lightStyle:(state.intervenantPage.lightStyle as boolean),
+      };
     },
     rssUrl(): string {
-      return (
-        state.generalParameters.ApiUri + 'rss/participant/' + this.participantId
-      );
+      return `${state.generalParameters.ApiUri}rss/participant/${this.participantId}`;
     },
     description(): string {
-      return this.participant!.description || '';
+      return this.participant?.description ?? '';
     },
     name(): string {
-      return (
-        (this.participant!.firstName || '') +
-        ' ' +
-        (this.participant!.lastName || '')
-      ).trim();
+      return (`${this.participant?.firstName??''} ${this.participant?.lastName??''}`).trim();
     },
     editRight(): boolean {
-      if (
-        (this.authenticated &&
-          this.organisationId === this.participant!.orga!.id!) ||
-        state.generalParameters.isAdmin
-      )
-        return true;
-      return false;
+      return (true===this.authenticated &&
+          this.myOrganisationId === this.participant?.orga?.id) ||
+        true===state.generalParameters.isAdmin
+    },
+  },
+  watch: {
+    participant: {
+      deep: true,
+      handler(){
+      this.reload = !this.reload;
+      }
+    },
+    participantId: {
+      immediate: true,
+      handler() {
+        this.getParticipantDetails();
+      },
     },
   },
   methods: {
+    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: Participant): void {
@@ -169,10 +160,16 @@ export default displayMethods.extend({
       this.$emit('participantTitle', this.name);
     },
   },
-  watch: {
-    participant(): void {
-      this.reload = !this.reload;
-    },
-  },
-});
+})
 </script>
+
+<style lang="scss">
+.octopus-app{
+  @media (min-width: 950px) {
+    .participant-desc {
+      max-width: 50%;
+      line-height: 1.5em;
+    }
+  }
+}
+</style>