@saooti/octopus-sdk 1.0.0 → 1.1.1

package/src/components/pages/Error403Page.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="page-box page-box-absolute bg-white justify-content-evenly">
+    <div class="not-auth-content d-flex-column justify-content-between">
+      <div class="d-flex flex-column justify-content-around">
+        <img
+          class="logo-octopus"
+          src="/img/logo_octopus_final.svg"
+          :alt="$t('Logo of main page')"
+        >
+        <h2>{{ $t('You do not have the right to access this page' ) }}</h2>
+      </div>
+      <img
+        class="stop-octopus-img"
+        src="/img/403.jpeg"
+        :alt="$t('You do not have the right to access this page')"
+      >
+    </div>
+    
+    <a
+      class="btn btn-primary"
+      :href="authenticated ?'/sso/logout':'/sso/login'"
+    >{{ authText }}</a>
+  </div>
+</template>
+
+<script lang="ts">
+import { state } from '../../store/paramStore';
+import { defineComponent } from 'vue';
+export default defineComponent({
+  name: 'Error403Page',
+  computed: {
+    authenticated(): boolean {
+      return (state.generalParameters.authenticated as boolean);
+    },
+    authText():string{
+      return this.authenticated ? this.$t('Logout') : this.$t('Login');
+    }
+  },
+  mounted() {
+    document.title = this.$store.state.general.metaTitle;
+  },
+});
+</script>
+<style lang="scss">
+.octopus-app .not-auth-content{
+  @media (max-width: 960px) {
+    align-items: center;
+  }
+  .stop-octopus-img{
+    width: 600px;
+    height: auto;
+    @media (max-width: 1400px) {
+      width: 400px;
+    }
+    @media (max-width: 450px) {
+      width: 80%;
+    }
+  }
+}
+</style>

package/src/components/pages/Home.vue

@@ -1,40 +1,93 @@
 <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 })"
+      />
+      <PodcastInlineList
+        v-if="rubriqueDisplay && rubriqueDisplay.length"
+        :no-rubriquage-id="[rubriqueDisplay[0].rubriquageId]"
+        :rubrique-id="rubriqueId"
+        :title="$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 { 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',
-
+  name: 'Home',
   components: {
     PodcastInlineList,
   },
-
-  mounted() {},
-
+  data() {
+    return {
+      rubriqueId: [] as Array<number>,
+    };
+  },
   computed: {
-    isPodcastmaker() {
-      return state.generalParameters.podcastmaker;
+    rubriqueDisplay(): Array<Rubrique>{
+      return this.$store.state.filter.rubriqueDisplay.filter((rubrique: Rubrique) => 0 !== rubrique.podcastCount );
     },
-    categories() {
-      return state.generalParameters.allCategories.filter((c:any) => {
-        if (this.isPodcastmaker) return c.podcastOrganisationCount;
+    rubriquageFilter(): Array<Rubriquage>{
+      return this.$store.state.filter.organisationId ? this.$store.state.filter.rubriquageArray :[];
+    },
+    rubriqueFilter(): Array<RubriquageFilter>{
+      return this.$store.state.filter.rubriqueFilter;
+    },
+    categories(): Array<Category> {
+      if(this.$store.state.filter.iab){
+        return [this.$store.state.filter.iab];
+      }
+      return this.$store.state.categories.filter((c: Category) => {
+        if (state.generalParameters.podcastmaker) return c.podcastOrganisationCount;
         return c.podcastCount;
       });
     },
   },
-});
-</script>
+  watch:{
+    rubriqueFilter:{
+      deep: true,
+      immediate: true,
+      handler(){
+        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>

package/src/components/pages/Lives.vue

@@ -2,92 +2,87 @@
   <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')"
+            @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/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,
     OrganisationChooser,
   },
   props: {
-    conferenceWatched: { default: [] },
-    organisationId: { default: undefined as any },
+    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'],
-
-  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() {
-      if (this.isRoleLive && this.live) return true;
-      return false;
-    },
-    isRoleLive() {
-      return state.generalParameters.isRoleLive;
+    liveRight(): boolean {
+      return (state.generalParameters.isRoleLive as boolean)&& this.live;
     },
-    filterOrga():any {
+    filterOrga(): string {
       return this.$store.state.filter.organisationId;
     },
+    isPodcastmaker(): boolean {
+      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) {
+    initConferenceIds(listIds: Array<Conference>): void {
       this.$emit('initConferenceIds', listIds);
     },
-    onOrganisationSelected(organisation: any) {
-      if (organisation && organisation.id) {
-        this.$emit('update:organisationId', organisation.id);
-      } else {
-        this.$emit('update:organisationId', undefined);
-      }
+    onOrganisationSelected(organisation: Organisation|undefined): void {
+      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>