@saooti/octopus-sdk 1.0.0 → 29.0.2

package/src/components/pages/Home.vue

@@ -1,40 +1,94 @@
 <template>
   <div class="page-box">
-    <PodcastInlineList
-      v-for="c in categories"
-      :key="c.id"
-      :iabId="c.id"
-      :title="c.name"
-      :buttonText="$t('All podcast button', { name: c.name })"
-    />
+    <template v-if="0 === rubriquageFilter.length">
+      <PodcastInlineList
+        v-for="c in categories"
+        :key="c.id"
+        :iab-id="c.id"
+        :title="c.name"
+        :button-text="$t('All podcast button', { name: c.name })"
+      />
+    </template>
+    <template v-else>
+      <PodcastInlineList
+        v-for="r in rubriqueDisplay"
+        :key="r.rubriqueId"
+        :rubrique-id="rubriqueId.concat(r.rubriqueId)"
+        :title="r.name"
+        :button-text="$t('All podcast button', { name: r.name })"
+      />
+    </template>
   </div>
 </template>
-<style lang="scss"></style>
 
 <script lang="ts">
 import PodcastInlineList from '../display/podcasts/PodcastInlineList.vue';
 import { state } from '../../store/paramStore';
 
+import { RubriquageFilter } from '@/store/class/rubriquageFilter';
+import { Rubriquage } from '@/store/class/rubriquage';
+import { Rubrique } from '@/store/class/rubrique';
 import { defineComponent } from 'vue'
 export default defineComponent({
-  name: 'home',
+  name: 'Home',
 
   components: {
     PodcastInlineList,
   },
-
-  mounted() {},
-
+  data() {
+    return {
+      rubriqueId: [] as Array<number>,
+    };
+  },
   computed: {
-    isPodcastmaker() {
+    rubriqueDisplay(): Array<Rubrique>{
+      return this.$store.state.filter.rubriqueDisplay;
+    },
+    rubriquageFilter(): Array<Rubriquage>{
+      if(this.$store.state.filter.organisationId){
+        return this.$store.state.filter.rubriquageArray;
+      }
+      return [];
+    },
+    rubriqueFilter(): Array<RubriquageFilter>{
+      return this.$store.state.filter.rubriqueFilter;
+    },
+    isPodcastmaker(): boolean {
       return state.generalParameters.podcastmaker;
     },
-    categories() {
-      return state.generalParameters.allCategories.filter((c:any) => {
+    categories(): any {
+      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 c.podcastCount;
       });
     },
   },
-});
+  watch:{
+    rubriqueFilter(){
+      this.updateRubriquageFilter();
+    }
+  },
+  created(){
+    if(this.rubriqueFilter.length){
+      this.updateRubriquageFilter();
+    }
+  },
+  methods:{
+    updateRubriquageFilter(){
+      const length = this.rubriqueFilter.length;
+      const rubriqueId: Array<number>= [];
+      for (let index = 0; index < length; index++) {
+        if(0 < this.rubriqueFilter[index].rubriqueId){
+          rubriqueId.push(this.rubriqueFilter[index].rubriqueId);
+        }
+      }
+      this.rubriqueId = rubriqueId;
+    },
+  }
+})
 </script>
+
+<style lang="scss"></style>

package/src/components/pages/Lives.vue

@@ -2,86 +2,94 @@
   <div class="page-box">
     <div class="d-flex flex-column align-items-center mb-3">
       <h1>{{ $t('In live') }}</h1>
-      <router-link to="/main/priv/edit/live" v-if="liveRight && filterOrga">
-        <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">
-          {{ $t('Please chose a productor') }}
-        </div>
-        <OrganisationChooser
-          :defaultanswer="$t('Please chose a productor')"
-          :all="true"
-          @selected="onOrganisationSelected"
-        />
+      <template v-if="!isPodcastmaker">
+        <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 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 LiveList from '../display/live/LiveList.vue';
-import OrganisationChooser from '../display/organisation/OrganisationChooser.vue';
 
-import { defineComponent } from 'vue'
+import { Organisation } from '@/store/class/organisation';
+import { defineComponent, defineAsyncComponent } from 'vue';
+const LiveList = defineAsyncComponent(() => import('../display/live/LiveList.vue'));
+const OrganisationChooser = defineAsyncComponent(() => import('../display/organisation/OrganisationChooser.vue'));
 export default defineComponent({
   components: {
     LiveList,
     OrganisationChooser,
   },
   props: {
-    conferenceWatched: { default: [] },
-    organisationId: { default: undefined as any },
+    conferenceWatched: { default: () => [], type: Array as ()=>Array<any>},
+    organisationId: { default: undefined, type: String },
+    productor:{default:undefined, type: String}
   },
   emits: ['update:organisationId', 'initConferenceIds'],
-
-  created() {
-    if (this.$route.query.productor) {
-      this.$emit('update:organisationId',this.$route.query.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;
-    }
-  },
-
   data() {
     return {
-      live: true,
+      live: true as boolean,
     };
   },
-
+  
   computed: {
-    liveRight() {
+    liveRight(): boolean {
       if (this.isRoleLive && this.live) return true;
       return false;
     },
-    isRoleLive() {
+    isRoleLive(): boolean {
       return state.generalParameters.isRoleLive;
     },
-    filterOrga():any {
+    filterOrga(): string {
       return this.$store.state.filter.organisationId;
     },
+    isPodcastmaker(): boolean {
+      return state.generalParameters.podcastmaker;
+    },
+  },
+  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;
+    }
   },
-
   methods: {
-    initConferenceIds(listIds: any) {
+    initConferenceIds(listIds: any): void {
       this.$emit('initConferenceIds', listIds);
     },
-    onOrganisationSelected(organisation: any) {
+    onOrganisationSelected(organisation: Organisation|undefined): void {
       if (organisation && organisation.id) {
         this.$emit('update:organisationId', organisation.id);
       } else {
@@ -89,5 +97,7 @@ export default defineComponent({
       }
     },
   },
-});
+})
 </script>
+
+<style lang="scss"></style>

package/src/components/pages/Participant.vue

@@ -1,7 +1,15 @@
 <template>
   <div>
-    <div class="page-box" v-if="loaded && !error">
-      <h1 v-if="!lightStyle">{{ $t('Animator') }}</h1>
+    <div
+      v-if="loaded && !error"
+      class="page-box intervenant-page"
+    >
+      <h1 v-if="undefined === titlePage ||!lightStyle">
+        {{ $t('Animator') }}
+      </h1>
+      <h1 v-else>
+        {{ titlePage }}
+      </h1>
       <div
         class="d-flex w-100 flex-column align-items-center justify-content-center"
       >
@@ -10,81 +18,86 @@
           :style="{
             'background-image': 'url(\'' + participant.imageUrl + '\')',
           }"
-        ></div>
-        <h2 class="text-capitalize">{{ name }}</h2>
+        />
+        <h2 class="text-capitalize">
+          {{ name }}
+        </h2>
         <div
           class="h6 participant-desc html-wysiwyg-content"
           v-html="urlify(description)"
-        ></div>
-        <div class="d-flex justify-content-center" v-if="isRssButton">
+        />
+        <div
+          v-if="isRssButton"
+          class="d-flex justify-content-center"
+        >
           <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>
+            <div class="saooti-rss-bounty" />
           </a>
         </div>
         <div class="d-flex">
           <EditBox
-            :participant="participant"
             v-if="editRight && isEditBox"
-            @participantUpdate="updateParticipant"
+            :participant="participant"
             class="flex-grow-1"
-          ></EditBox>
+            @participantUpdate="updateParticipant"
+          />
           <ShareButtons
-            :participantId="participantId"
             v-if="isShareButtons"
-          ></ShareButtons>
+            :participant-id="participantId"
+          />
         </div>
       </div>
       <PodcastFilterList
-        :participantId="participantId"
+        v-if="!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
+      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("Animator doesn't exist") }}</h3>
     </div>
   </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 { state } from '../../store/paramStore';
 import { displayMethods } from '../mixins/functions';
+import { Participant } from '@/store/class/participant';
 
-import { defineComponent } from 'vue'
+import { defineComponent, defineAsyncComponent } from 'vue';
+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,
@@ -92,68 +105,60 @@ export default defineComponent({
     EditBox,
     PodcastList,
   },
-
   mixins: [displayMethods],
-
-  mounted() {
-    this.getParticipantDetails();
+  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() {
+    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;
     },
-    lightStyle() {
+    lightStyle(): boolean {
       return state.intervenantPage.lightStyle;
     },
-    isRssButton() {
+    isRssButton(): boolean {
       return state.intervenantPage.rssButton;
     },
-    rssUrl():any {
+    titlePage(): string|undefined {
+      return state.intervenantPage.titlePage;
+    },
+    rssUrl(): string {
       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;
+    description(): string {
+      if(!this.participant){return '';}
+      return this.participant.description || '';
     },
-
-    name():string {
-      const fullName = (
+    name(): string {
+      if(!this.participant){return '';}
+      return (
         (this.participant.firstName || '') +
         ' ' +
         (this.participant.lastName || '')
       ).trim();
-      if (state.generalParameters.isIE11)
-        return fullName.substring(0, 50) + '...';
-      return fullName;
     },
-    editRight() {
+    editRight(): boolean {
+      if(!this.participant || !this.participant.orga ){return false;}
       if (
         (this.authenticated &&
           this.organisationId === this.participant.orga.id) ||
@@ -163,9 +168,16 @@ export default defineComponent({
       return false;
     },
   },
-
+  watch: {
+    participant(): void {
+      this.reload = !this.reload;
+    },
+  },
+  mounted() {
+    this.getParticipantDetails();
+  },
   methods: {
-    async getParticipantDetails() {
+    async getParticipantDetails(): Promise<void> {
       this.loaded = false;
       try {
         const data = await octopusApi.fetchParticipant(this.participantId);
@@ -177,15 +189,19 @@ export default defineComponent({
         this.loaded = true;
       }
     },
-    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">
+@media (min-width: 950px) {
+  .participant-desc {
+    max-width: 50%;
+    line-height: 1.5em;
+  }
+}
+</style>

package/src/components/pages/Participants.vue

@@ -1,69 +1,82 @@
 <template>
   <div class="page-box">
-    <h1>{{ $t('All participants') }}</h1>
+    <h1 v-if="undefined === titlePage">
+      {{ $t('All participants') }}
+    </h1>
+    <h1 v-else>
+      {{ titlePage }}
+    </h1>
     <ProductorSearch
-      :organisationId="organisationId"
-      :searchPattern="searchPattern"
+      :organisation-id="organisationId"
+      :search-pattern="searchPattern"
       type="participant"
       @updateOrganisationId="updateOrganisationId"
       @updateSearchPattern="updateSearchPattern"
     />
     <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 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;
-    }
+  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,
+      first: 0 as number,
+      size: 12 as number,
       searchPattern: '',
-      organisationId: undefined as any,
+      organisationId: undefined as string | undefined,
     };
   },
 
+  computed: {
+    titlePage(): string|undefined {
+      return state.intervenantsPage.titlePage;
+    },
+  },
+
+  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>