@saooti/octopus-sdk 31.0.1 → 31.0.2

package/src/components/display/live/LiveList.vue

@@ -37,11 +37,13 @@
 <script lang="ts">
 import ClassicLoading from '../../form/ClassicLoading.vue';
 import LiveItem from './LiveItem.vue';
+import { handle403 } from '../../mixins/handle403';
 import octopusApi from '@saooti/octopus-api';
 import moment from 'moment';
 import { state } from '../../../store/paramStore';
 import { Conference } from '@/store/class/conference/conference';
 import { defineComponent } from 'vue'
+import { AxiosError } from 'axios';
 export default defineComponent({
   name: 'LiveList',
   components: {
@@ -49,6 +51,8 @@ export default defineComponent({
     ClassicLoading
   },
 
+  mixins: [handle403],
+
   props: {
     conferenceWatched: { default: () => [], type: Array as ()=>Array<Conference>},
     organisationId: { default: undefined, type: String},
@@ -153,51 +157,55 @@ export default defineComponent({
       }
     },
     async fetchContent(): Promise<void> {
-      this.initArrays();
-      if (!this.filterOrgaUsed) {
-        this.loading = false;
-        this.loaded = true;
-        return;
-      }
-      this.loading = true;
-      this.loaded = false;
-      let indexPast = 0;
-      let dataLivesToBe: Array<Conference> = [];
-      for (let i = 0, len = this.livesArray.length; i < len; i++) {
-        if (!this.organisationRight && 
-        ("DEBRIEFING"===this.livesArray[i].status ||"ERROR"===this.livesArray[i].status ||"PUBLISHING"===this.livesArray[i].status)) {
-          continue;
+      try {
+        this.initArrays();
+        if (!this.filterOrgaUsed) {
+          this.loading = false;
+          this.loaded = true;
+          return;
         }
-        const dataLives = await octopusApi.listConferences(
-          this.filterOrgaUsed,
-          true,
-          this.livesArray[i].status
-        );
-        if("PLANNED"!==this.livesArray[i].status && "PENDING"!==this.livesArray[i].status){
-          this.livesArray[i].lives = dataLives.filter((p: Conference | null) => {
-            return null !== p;
-          });
-        }else if("PENDING"===this.livesArray[i].status){
-          dataLivesToBe = dataLives;
-          for (let index = 0, len = dataLives.length; index < len; index++) {
-            if (moment(dataLives[index].date).isBefore(moment())) {
-              this.livesArray[i].lives.push(dataLives[index]);
-              indexPast = index + 1;
-            } else {break;}
+        this.loading = true;
+        this.loaded = false;
+        let indexPast = 0;
+        let dataLivesToBe: Array<Conference> = [];
+        for (let i = 0, len = this.livesArray.length; i < len; i++) {
+          if (!this.organisationRight && 
+          ("DEBRIEFING"===this.livesArray[i].status ||"ERROR"===this.livesArray[i].status ||"PUBLISHING"===this.livesArray[i].status)) {
+            continue;
+          }
+          const dataLives = await octopusApi.listConferences(
+            this.filterOrgaUsed,
+            true,
+            this.livesArray[i].status
+          );
+          if("PLANNED"!==this.livesArray[i].status && "PENDING"!==this.livesArray[i].status){
+            this.livesArray[i].lives = dataLives.filter((p: Conference | null) => {
+              return null !== p;
+            });
+          }else if("PENDING"===this.livesArray[i].status){
+            dataLivesToBe = dataLives;
+            for (let index = 0, len = dataLives.length; index < len; index++) {
+              if (moment(dataLives[index].date).isBefore(moment())) {
+                this.livesArray[i].lives.push(dataLives[index]);
+                indexPast = index + 1;
+              } else {break;}
+            }
+          }else{
+            this.livesArray[i].lives = dataLivesToBe
+            .slice(indexPast)
+            .concat(dataLives)
+            .filter((p: Conference | null) => {
+              return null !== p;
+            });
           }
-        }else{
-          this.livesArray[i].lives = dataLivesToBe
-          .slice(indexPast)
-          .concat(dataLives)
-          .filter((p: Conference | null) => {
-            return null !== p;
-          });
         }
+        const listIds = this.livesArray[0].lives
+          .concat(this.livesArray[1].lives)
+          .concat(this.livesArray[2].lives);
+        this.$emit('initConferenceIds', listIds);
+      } catch (error) {
+        this.handle403((error as AxiosError));
       }
-      const listIds = this.livesArray[0].lives
-        .concat(this.livesArray[1].lives)
-        .concat(this.livesArray[2].lives);
-      this.$emit('initConferenceIds', listIds);
       this.loading = false;
       this.loaded = true;
     },
@@ -238,9 +246,11 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+.octopus-app{
 .live-list-category {
   align-self: flex-start;
   text-transform: uppercase;
   font-weight: bold;
 }
+}
 </style>

package/src/components/display/organisation/OrganisationChooser.vue

@@ -14,7 +14,7 @@
       ref="multiselectRef"
       v-model="organisation"
       label="name"
-      track-by="organisationId"
+      track-by="id"
       :placeholder="$t('Type string to filter by organisation')"
       :options="organisations"
       :multiple="false"

package/src/components/display/organisation/OrganisationChooserLight.vue

@@ -4,30 +4,35 @@
     class="default-multiselect-width organisation-chooser-light"
     :style="{ width: width }"
   >
-    <select
-      :id="'organisation_chooser_light' + page"
-      v-model="actual"
-      class="mb-0 c-hand border-0"
-      @change="onOrganisationSelected"
-    >
-      <option :value="organisation.id">
-        {{ organisation.name }}
-      </option>
-      <option :value="-1">
-        {{ $t('No organisation filter') }}
-      </option>
-    </select>
-    <label
-      :for="'organisation_chooser_light' + page"
-      class="d-inline"
-      :title="$t('select productor')"
-    />
+    <template v-if="!privateOrganisation">
+      <select
+        :id="'organisation_chooser_light' + page"
+        v-model="actual"
+        class="mb-0 c-hand border-0"
+        @change="onOrganisationSelected"
+      >
+        <option :value="organisation.id">
+          {{ organisation.name }}
+        </option>
+        <option :value="-1">
+          {{ $t('No organisation filter') }}
+        </option>
+      </select>
+      <label
+        :for="'organisation_chooser_light' + page"
+        class="d-inline"
+        :title="$t('select productor')"
+      />
+    </template>
+    <template v-else>
+      {{ organisation.name }}
+    </template>
   </div>
 </template>
 
 <script lang="ts">
-import octopusApi from '@saooti/octopus-api';
 import { Organisation } from '@/store/class/general/organisation';
+import octopusApi from '@saooti/octopus-api';
 import { defineComponent } from 'vue'
 export default defineComponent({
   props: {
@@ -43,6 +48,7 @@ export default defineComponent({
       actual: -1 as number|string,
       organisation: undefined as Organisation|undefined,
       init: false as boolean,
+      privateOrganisation: false as boolean
     };
   },
 
@@ -76,6 +82,7 @@ export default defineComponent({
       const data = await octopusApi.fetchOrganisation(this.value);
       this.organisation = data;
       this.actual = data.id;
+      this.privateOrganisation = data.private??false;
       this.init = true;
     },
   },
@@ -83,9 +90,11 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+.octopus-app{
 .organisation-chooser-light select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
+}
 </style>

package/src/components/display/participant/ParticipantItem.vue

@@ -134,6 +134,7 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
+.octopus-app{
 .participant-item-container {
   list-style: none;
   border-radius: 2rem;
@@ -184,4 +185,5 @@ export default defineComponent({
     margin: 1rem 0 0;
   }
 }
+}
 </style>

package/src/components/display/participant/ParticipantList.vue

@@ -23,7 +23,7 @@
       </ul>
       <button
         v-show="!allFetched"
-        class="btn btn-more saooti-plus"
+        class="btn btn-more saooti-more"
         :title="$t('See more')"
         :disabled="loading"
         @click="fetchContent(false)"
@@ -33,11 +33,13 @@
 </template>
 
 <script lang="ts">
+import { handle403 } from '../../mixins/handle403';
 import octopusApi from '@saooti/octopus-api';
 import ParticipantItem from './ParticipantItem.vue';
 import ClassicLoading from '../../form/ClassicLoading.vue';
 import { Participant } from '@/store/class/general/participant';
 import { defineComponent } from 'vue'
+import { AxiosError } from 'axios';
 export default defineComponent({
   name: 'ParticipantList',
 
@@ -45,6 +47,9 @@ export default defineComponent({
     ParticipantItem,
     ClassicLoading
   },
+
+  mixins: [handle403],
+
   props: {
     first: { default: 0, type: Number },
     size: { default: 12, type: Number },
@@ -99,25 +104,29 @@ export default defineComponent({
       if (reset) {
         this.dfirst = 0;
       }
-      const data = await octopusApi.fetchParticipants({
-        first: this.dfirst,
-        size: this.dsize,
-        query: this.query,
-        organisationId: this.organisation,
-      });
-      if (reset) {
-        this.participants.length = 0;
-        this.dfirst = 0;
-      }
-      this.displayCount = data.count;
-      this.participants = this.participants.concat(data.result).filter((p: Participant | null) => {
-        if (null === p) {
-          this.displayCount--;
+      try {
+        const data = await octopusApi.fetchParticipants({
+          first: this.dfirst,
+          size: this.dsize,
+          query: this.query,
+          organisationId: this.organisation,
+        });
+        if (reset) {
+          this.participants.length = 0;
+          this.dfirst = 0;
         }
-        return null !== p;
-      });
-      this.dfirst += this.dsize;
-      this.totalCount = data.count;
+        this.displayCount = data.count;
+        this.participants = this.participants.concat(data.result).filter((p: Participant | null) => {
+          if (null === p) {
+            this.displayCount--;
+          }
+          return null !== p;
+        });
+        this.dfirst += this.dsize;
+        this.totalCount = data.count;
+      } catch (error) {
+        this.handle403((error as AxiosError));
+      }
       this.loading = false;
     },
   },
@@ -125,6 +134,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+.octopus-app{
 .participant-list {
   align-self: stretch;
   flex-grow: 1;
@@ -147,4 +157,5 @@ export default defineComponent({
     grid-gap: 0;
   }
 }
+}
 </style>

package/src/components/display/playlist/PlaylistList.vue

@@ -29,19 +29,21 @@
       </template>
       <div
         :class="buttonPlus?'ms-1':''"
-        class="saooti-plus"
+        class="saooti-more"
       />
     </button>
   </div>
 </template>
 
 <script lang="ts">
+import { handle403 } from '../../mixins/handle403';
 import octopusApi from '@saooti/octopus-api';
 import PlaylistItem from './PlaylistItem.vue';
 import { state } from '../../../store/paramStore';
 import ClassicLoading from '../../form/ClassicLoading.vue';
 import { Playlist } from '@/store/class/general/playlist';
 import { defineComponent } from 'vue'
+import { AxiosError } from 'axios';
 export default defineComponent({
   name: 'PlaylistList',
 
@@ -49,6 +51,9 @@ export default defineComponent({
     PlaylistItem,
     ClassicLoading
   },
+
+  mixins: [handle403],
+
   props: {
     first: { default: 0, type: Number },
     size: { default: 12, type: Number },
@@ -117,8 +122,12 @@ export default defineComponent({
         organisationId: this.organisation,
         sort: this.sort,
       };
-      const data = await octopusApi.fetchPlaylists(param);
-      this.afterFetching(reset, data);
+      try {
+        const data = await octopusApi.fetchPlaylists(param);
+        this.afterFetching(reset, data);
+      } catch (error) {
+        this.handle403((error as AxiosError));
+      }
     },
     afterFetching(reset: boolean, data: {count: number, result: Array<Playlist>, sort: string}): void {
       if (reset) {

package/src/components/display/playlist/PodcastList.vue

@@ -49,13 +49,14 @@
       </template>
       <div
         :class="buttonPlus?'ms-1':''"
-        class="saooti-plus"
+        class="saooti-more"
       />
     </button>
   </div>
 </template>
 
 <script lang="ts">
+import { handle403 } from '../../mixins/handle403';
 import octopusApi from '@saooti/octopus-api';
 import PodcastItem from '../podcasts/PodcastItem.vue';
 import { state } from '../../../store/paramStore';
@@ -64,6 +65,7 @@ import ClassicLoading from '../../form/ClassicLoading.vue';
 import { Podcast } from '@/store/class/general/podcast';
 import { Playlist } from '@/store/class/general/playlist';
 import { defineComponent } from 'vue'
+import { AxiosError } from 'axios';
 export default defineComponent({
   name: 'PodcastList',
 
@@ -73,6 +75,8 @@ export default defineComponent({
     ClassicLoading
   },
 
+  mixins: [handle403],
+
   props: {
     playlist: { default: ()=>({}), type: Object as ()=>Playlist},
   },
@@ -144,22 +148,26 @@ export default defineComponent({
       this.podcasts.length = 0;
       this.loading = true;
       this.loaded = false;
-      const content = await octopusApi.fetchPlaylistContent(
-        this.playlist.playlistId.toString()
-      );
-      for (let index = 0, len = content.length; index < len; index++) {
-        content[index].order = this.playlist.podcasts[content[index].podcastId];
-      }
-      this.podcasts = content;
-      if (!this.editRight) {
-        this.podcasts = this.podcasts.filter((p: Podcast|null) => {
-          return (
-            null !== p &&
-            (!p.availability || true === p.availability.visibility)
-          );
-        });
+      try {
+        const content = await octopusApi.fetchPlaylistContent(
+          this.playlist.playlistId.toString()
+        );
+        for (let index = 0, len = content.length; index < len; index++) {
+          content[index].order = this.playlist.podcasts[content[index].podcastId];
+        }
+        this.podcasts = content;
+        if (!this.editRight) {
+          this.podcasts = this.podcasts.filter((p: Podcast|null) => {
+            return (
+              null !== p &&
+              (!p.availability || true === p.availability.visibility)
+            );
+          });
+        }
+        this.podcastsQuery = this.podcasts;
+      } catch (error) {
+        this.handle403((error as AxiosError));
       }
-      this.podcastsQuery = this.podcasts;
       this.loading = false;
       this.loaded = true;
     },
@@ -173,10 +181,12 @@ export default defineComponent({
 
 
 <style lang="scss">
+.octopus-app{
 .width-600 {
   width: 600px;
   @media (max-width: 600px) {
     width: 100%;
   }
 }
+}
 </style>

package/src/components/display/playlist/PodcastPlaylistInlineList.vue

@@ -0,0 +1,204 @@
+<template>
+  <div
+    v-if="loading || (!loading && 0 !== allPodcasts.length)"
+    class="d-flex flex-column p-3 playlist-inline-podcast"
+  >
+    <h2>{{ title }}</h2>
+    <div
+      v-if="!overflowScroll"
+      class="d-flex justify-content-end hide-phone"
+    >
+      <button
+        class="btn admin-button m-1"
+        :class="{ disabled: !previousAvailable }"
+        :title="$t('Display previous')"
+        @click="displayPrevious()"
+      >
+        <div class="saooti-left fw-bold" />
+      </button>
+      <button
+        class="btn admin-button m-1"
+        :class="{ disabled: !nextAvailable }"
+        :title="$t('Display next')"
+        @click="displayNext()"
+      >
+        <div class="saooti-right fw-bold" />
+      </button>
+    </div>
+    <ClassicLoading
+      :loading-text="loading?$t('Loading podcasts ...'):undefined"
+    />
+    <transition-group
+      :name="transitionName"
+      class="element-list-inline"
+      tag="ul"
+      :class="[
+        alignLeft ? 'justify-content-start' : '',
+        overflowScroll ? 'overflowScroll' : '',
+      ]"
+      :css="isInlineAnimation"
+    >
+      <PodcastItem
+        v-for="p in podcasts"
+        :key="p.podcastId"
+        class="flex-shrink-0 item-phone-margin"
+        :podcast="p"
+        :class="[alignLeft ? 'me-3' : '']"
+      />
+    </transition-group>
+    <router-link
+      class="btn btn-link align-self-center width-fit-content m-4"
+      :to="{
+          name: 'playlist',
+          params: { playlistId: playlistId.toString() },
+        }"
+    >
+      {{ $t('See more') }}
+      <div
+        class="ms-1 saooti-more"
+      />
+    </router-link>
+  </div>
+</template>
+
+<script lang="ts">
+import octopusApi from '@saooti/octopus-api';
+import domHelper from '../../../helper/dom';
+import PodcastItem from '../podcasts/PodcastItem.vue';
+import ClassicLoading from '../../form/ClassicLoading.vue';
+const PHONE_WIDTH = 960;
+import { state } from '../../../store/paramStore';
+import { Podcast } from '@/store/class/general/podcast';
+import { defineComponent } from 'vue'
+import { Playlist } from '@saooti/octopus-api/class/playlist';
+export default defineComponent({
+  name: 'PodcastPlaylistInlineList',
+  
+  components: {
+    PodcastItem,
+    ClassicLoading
+  },
+
+  props: {
+    playlistId: { default: undefined, type: Number},
+  },
+
+  data() {
+    return {
+      loading: true as boolean,
+      index: 0 as number,
+      first: 0 as number,
+      size: 5 as number,
+      totalCount: 0 as number,
+      playlist: undefined as Playlist|undefined,
+      allPodcasts: [] as Array<Podcast>,
+      direction: 1 as number,
+      alignLeft: false as boolean,
+    };
+  },
+  computed: {
+    title(): string{
+      if(this.playlist){
+        return this.playlist.title;
+      }
+      return "";
+    },
+    podcasts(): Array<Podcast> {
+      return this.allPodcasts.slice(this.index, this.index + this.size);
+    },
+    sizeItem(): number {
+      return state.generalParameters.podcastItem ? (state.generalParameters.podcastItem as number): 13;
+    },
+    overflowScroll(): boolean {
+      return (state.emissionPage.overflowScroll as boolean);
+    },
+    isInlineAnimation(): boolean {
+      return (state.generalParameters.isInlineAnimation as boolean);
+    },
+    previousAvailable(): boolean {
+      return this.index > 0;
+    },
+    nextAvailable(): boolean {
+      return this.index + this.size < this.totalCount;
+    },
+    transitionName(): string {
+      return this.direction > 0 ? 'out-left' : 'out-right';
+    },
+  },
+  watch: {
+    playlistId(): void {
+      this.reset();
+      this.fetchContent();
+    },
+  },
+  
+  created() {
+    window.addEventListener('resize', this.handleResize);
+  },
+
+  unmounted() {
+    window.removeEventListener('resize', this.handleResize);
+  },
+
+  mounted() {
+    this.handleResize();
+    this.fetchContent();
+  },
+  methods: {
+    async fetchContent(): Promise<void> {
+      this.allPodcasts.length = 0;
+      this.loading = true;
+      this.playlist = await octopusApi.fetchPlaylist(this.playlistId ? this.playlistId.toString(): "");
+      this.allPodcasts = await octopusApi.fetchPlaylistContent(
+        this.playlist.playlistId.toString()
+      );
+      if (!((state.generalParameters.authenticated && state.generalParameters.organisationId === this.playlist.organisation.id) ||
+        state.generalParameters.isAdmin)) {
+        this.allPodcasts = this.allPodcasts.filter((p: Podcast|null) => {
+          return (
+            null !== p &&
+            (!p.availability || true === p.availability.visibility)
+          );
+        });
+      }
+      if (this.allPodcasts.length <= 3) {
+        this.alignLeft = true;
+      } else {
+        this.alignLeft = false;
+      }
+      this.loading = false;
+    },
+    displayPrevious(): void {
+      this.direction = -1;
+      if (this.previousAvailable) {
+        this.index -= 1;
+      }
+    },
+    displayNext(): void {
+      this.direction = 1;
+      if (!this.nextAvailable) return;
+      this.index += 1;
+    },
+    handleResize(): void {
+      if (!this.$el) return;
+      if (this.overflowScroll) {
+        this.size = 20;
+        return;
+      }
+      if (window.innerWidth <= PHONE_WIDTH) {
+        this.size = 10;
+        return;
+      }
+      const width = (this.$el as HTMLElement).offsetWidth;
+      const sixteen = domHelper.convertRemToPixels(this.sizeItem + 0.7);
+      this.size = Math.floor(width / sixteen);
+    },
+    reset(): void {
+      this.index = 0;
+      this.first = 0;
+      this.totalCount = 0;
+      this.allPodcasts.length = 0;
+    },
+  },
+})
+</script>

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

@@ -48,6 +48,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+.octopus-app{
 .podcast-item-animator {
   display: flex;
   align-items: flex-start;
@@ -58,4 +59,5 @@ export default defineComponent({
   text-transform: capitalize;
   margin: 00.25rem 0.5rem 0;
 }
+}
 </style>