@saooti/octopus-sdk 1.0.0 → 1.1.1

package/src/components/form/ClassicSearch.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="position-relative champs-searchPage static-height">
+    <input
+      :id="idSearch"
+      ref="search"
+      v-model="textValue"
+      type="text"
+      class="search-input w-100 p-2 "
+      :placeholder="label"
+      :autofocus="autofocus"
+    >
+    <label
+      :for="idSearch"
+      :title="label"
+    />
+    <div
+      v-if="!textValue"
+      class="saooti-search search-icon-container"
+    />
+    <div
+      v-else
+      class="saooti-remove search-icon-container c-hand"
+      @click="textValue = ''"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+export default defineComponent({
+  name: 'ClassicSearch',
+ props: {
+    idSearch: { default: '', type: String },
+    label: { default: '', type: String },
+    textInit: { default: '', type: String },
+    autofocus: { default: false, type: Boolean },
+  },
+
+  emits: ['update:textInit'],
+
+  data() {
+    return {
+      textValue: '' as string,
+    };
+  },
+  watch: {
+    textValue(){
+			if(this.textInit !== this.textValue){
+				this.$emit('update:textInit', this.textValue)
+			}
+		},
+    textInit: {
+      immediate: true,
+      handler() {
+        if(this.textInit !== this.textValue){
+          this.textValue =this.textInit;
+          }
+      },
+    },
+  }
+});
+</script>
+<style lang="scss">
+.octopus-app{
+  .champs-searchPage{
+    input {
+      border: 2px solid #dee2e6;
+      border-radius: 10px;
+      margin: 0 !important;
+    }
+    .saooti-search,
+    .saooti-remove {
+      font-size: 1rem;
+    }
+    .search-icon-container {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      display: flex;
+      align-items: center;
+      margin: 1rem;
+    }
+  } 
+}
+</style>

package/src/components/form/ClassicSelect.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="classic-select">
+    <label
+      :for="idSelect"
+      class="form-label mt-2"
+      :class="displayLabel?'':'d-none'"
+    >{{ label }}</label>
+    <select
+      :id="idSelect"
+      v-model="textValue"
+      :disabled="isDisabled"
+      class="c-hand"
+    >
+      <option
+        v-for="option in options"
+        :key="option.title"
+        :value="option.value"
+      >
+        {{ option.title }}
+      </option>
+    </select>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue';
+export default defineComponent({
+  name: 'ClassicSelect',
+  props: {
+    idSelect: { default: '', type: String },
+    label: { default: '', type: String },
+    displayLabel:{default: true, type: Boolean},
+    isDisabled: { default: false, type: Boolean },
+    options: { default: ()=>[], type: Array as () => Array<{title: string, value: string|undefined}> },
+    textInit: { default: undefined, type: String },
+  },
+  emits: ['update:textInit'],
+  data() {
+    return {
+      textValue: undefined as string|undefined,
+    };
+  },
+  watch: {
+    textValue(){
+			if(this.textInit !== this.textValue){
+				this.$emit('update:textInit', this.textValue)
+			}
+		},
+    textInit: {
+      immediate: true,
+      handler() {
+        if(this.textInit !== this.textValue){
+          this.textValue =this.textInit;
+        }
+      },
+    },
+  }
+});
+</script>
+<style lang="scss">
+.octopus-app{
+  .classic-select select{
+    width: inherit;
+  }
+}
+</style>

package/src/components/misc/ErrorMessage.vue

@@ -1,29 +1,38 @@
 <template>
-  <div class="d-flex" v-if="message && message.length">
+  <div
+    v-if="message && message.length"
+    class="d-flex"
+  >
     <div
-      class="d-flex align-items-center bg-error-message p-2 rounded mt-1 mb-1"
+      class="d-flex align-items-center bg-error-message p-2 rounded my-1"
     >
-      <img src="/img/caution.png" class="icon-caution" />
-      <div class="alert-text">{{ message }}</div>
+      <img
+        src="/img/caution.png"
+        :alt="$t('Warning')"
+        class="icon-caution"
+      >
+      <div class="alert-text">
+        {{ message }}
+      </div>
     </div>
   </div>
 </template>
-<style lang="scss">
-.bg-error-message {
-  background-color: #ffd84a9c;
-}
-.icon-caution {
-  margin-right: 5px;
-  margin-bottom: 2px;
-  height: 25px;
-}
-</style>
-
 <script lang="ts">
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'ErrorMessage',
-
-  props: ['message'],
-});
+  props: {
+    message: { default: undefined, type: String},
+  },
+})
 </script>
+<style lang="scss">
+.octopus-app{
+  .bg-error-message {
+    background-color: #ffd84a9c;
+  }
+  .alert-text{
+    color: darkred;
+  }
+}
+</style>

package/src/components/misc/Footer.vue

@@ -2,167 +2,210 @@
   <div class="bg-dark">
     <div
       id="footer"
-      class="d-flex p-3 secondary-bg border-top footer-display-phone"
+      ref="footer"
+      class="d-flex-column p-3 secondary-bg border-top"
     >
-      <div class="d-flex flex-grow align-items-end flex-column">
+      <div class="d-flex flex-column flex-grow-1 align-items-end">
         <div class="d-flex flex-column">
-          <router-link
-            :to="{
-              name: 'home',
-              query: { productor: this.$store.state.filter.organisationId },
-            }"
-            class="linkHover"
-            >{{ $t('Home') }}</router-link
-          >
-          <router-link
-            :to="{
-              name: 'podcasts',
-              query: { productor: this.$store.state.filter.organisationId },
-            }"
-            class="linkHover"
-            >{{ $t('Podcasts') }}</router-link
-          >
-          <router-link
-            :to="{
-              name: 'emissions',
-              query: { productor: this.$store.state.filter.organisationId },
-            }"
-            class="linkHover"
-            >{{ $t('Emissions') }}</router-link
-          >
-          <router-link
-            :to="{
-              name: 'productors',
-              query: { productor: this.$store.state.filter.organisationId },
-            }"
-            class="linkHover"
-            v-if="!isPodcastmaker"
-            >{{ $t('Productors') }}</router-link
-          >
-          <router-link
-            :to="{
-              name: 'participants',
-              query: { productor: this.$store.state.filter.organisationId },
-            }"
-            class="linkHover"
-            >{{ $t('Speakers') }}</router-link
+          <template
+            v-for="link in routerLinkArray"
+            :key="link.routeName"
           >
+            <router-link
+              v-if="link.condition"
+              class="link-hover"
+              :to="{
+                name: link.routeName,
+                query: getQueriesRouter(link.routeName),
+              }"
+            >
+              {{ link.title }}
+            </router-link>
+          </template>
         </div>
       </div>
-      <hr class="divided-line show-phone" />
+      <hr class="show-phone">
       <div
-        class="d-flex flex-grow align-items-center flex-column"
         v-if="!isPodcastmaker"
+        class="d-flex flex-grow-1 align-items-center flex-column"
       >
         <div class="d-flex flex-column">
-          <div class="text-dark">&copy; Saooti 2019</div>
-          <router-link class="linkHover" to="/main/pub/contact">{{
-            $t('Contact')
-          }}</router-link>
-          <router-link class="linkHover" to="/main/pub/cgu">{{
-            $t('Term of use')
-          }}</router-link>
-          <router-link class="linkHover" to="/main/pub/libraries">{{
-            $t('Used libraries')
-          }}</router-link>
+          <div class="text-dark">
+            &copy; Saooti 2019
+          </div>
+          <router-link
+            v-for="link in routerLinkSecondArray" 
+            :key="link.routeName"
+            class="link-hover"
+            :to="link.routeName"
+          >
+            {{ link.title }}
+          </router-link>
+          <ClassicSelect
+            v-model:textInit="language"
+            :display-label="false"
+            id-select="language-chooser-select"
+            :label="$t('Change locale')"
+            :options="[{title:'Deutsch', value:'de'},
+                       {title:'English', value:'en'},
+                       {title:'Español', value:'es'},
+                       {title:'Français', value:'fr'},
+                       {title:'Italiano', value:'it'},
+                       {title:'Slovenščina', value:'sl'}]"
+          />
         </div>
       </div>
-      <hr class="divided-line show-phone" />
-      <div class="flex-grow">
+      <hr class="show-phone">
+      <div class="flex-grow-1">
         <a
           href="https://www.acpm.fr/L-ACPM/Certifications-et-Labels/Les-Podcasts"
+          rel="noopener"
           target="_blank"
-          :aria-label="$t('Octopus is ACPM Podcast accredited')"
+          :title="$t('Octopus is ACPM Podcast accredited')"
         >
           <img
             class="acpm_image"
-            src="/img/ACPM.PNG"
+            src="/img/ACPM.png"
             :title="$t('Octopus is ACPM Podcast accredited')"
             :alt="$t('Octopus is ACPM Podcast accredited')"
-          />
+          >
         </a>
       </div>
       <div
-        class="d-flex flex-grow align-items-center flex-column"
         v-if="isPodcastmaker && isContactLink"
+        class="d-flex flex-column flex-grow-1 align-items-center"
       >
         <div class="d-flex flex-column">
           <a
-            class="linkHover"
             id="footer-contact"
+            class="link-hover"
             :href="isContactLink"
+            rel="noopener"
             target="_blank"
-            >{{ $t('Contact') }}</a
-          >
+          >{{ $t('Contact') }}</a>
         </div>
       </div>
     </div>
     <Player @hide="showBlackBorder" />
   </div>
 </template>
-<style lang="scss">
-#footer {
-  font-size: 0.7rem;
-  a {
-    color: #666;
-  }
-  .acpm_image {
-    width: 70px;
-    height: 70px;
-  }
-}
-.border-round {
-  border-radius: 0 0 2rem 2rem;
-}
-/** PHONES*/
-@media (max-width: 960px) {
-  .footer-display-phone {
-    flex-direction: column;
-    .align-items-center,
-    .align-items-end {
-      align-items: flex-start !important;
-    }
-  }
-  .container {
-    font-size: 0.6rem;
-    .pages {
-      margin-right: 3rem;
-    }
-  }
-}
-</style>
 
 <script lang="ts">
-import Player from './Player.vue';
+import { cookies } from '../mixins/functions';
+import ClassicSelect from '../form/ClassicSelect.vue';
+import Player from './player/Player.vue';
 import { state } from '../../store/paramStore';
-
+import {loadLocaleMessages} from '@/i18n';
+import octopusApi from '@saooti/octopus-api';
+import moment from 'moment';
+import { Category } from '@/store/class/general/category';
+import { RubriquageFilter } from '@/store/class/rubrique/rubriquageFilter';
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'Footer',
   components: {
     Player,
+    ClassicSelect
+  },
+  mixins:[cookies],
+  data() {
+    return {
+      language: this.$i18n.locale as string,
+    };
   },
-
   computed: {
-    isPodcastmaker() {
-      return state.generalParameters.podcastmaker;
+    routerLinkArray(){
+      return [
+        {title : this.$t('Home'), routeName: 'home', condition : true},
+        {title : this.$t('Podcasts'), routeName: 'podcasts', condition : true},
+        {title : this.$t('Emissions'), routeName: 'emissions', condition : true},
+        {title : this.$t('Productors'), routeName: 'productors', condition : !this.isPodcastmaker && !this.$store.state.filter.organisationId},
+        {title : this.$t('Playlists'), routeName: 'playlists', condition : true},
+        {title : this.$t('Speakers'), routeName: 'participants', condition : true},]
+    },
+    routerLinkSecondArray(){
+      return [
+        {title : this.$t('Contact'), routeName: '/main/pub/contact'},
+        {title : this.$t('Term of use'), routeName: '/main/pub/cgu'},
+        {title : this.$t('Used libraries'), routeName: "/main/pub/libraries"}]
     },
-    isBarTop() {
-      return state.player.barTop;
+    isPodcastmaker(): boolean {
+      return (state.generalParameters.podcastmaker as boolean);
     },
-    isContactLink() {
+    isContactLink(): string|undefined {
       return state.footer.contactLink;
     },
+    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;
+    },
+  },
+  watch:{
+    language(){
+      this.changeLanguage();
+    }
   },
-
   methods: {
-    showBlackBorder(hide:any) {
+    getQueriesRouter(routeName: string){
+      if('podcasts' !== routeName && 'emissions' !== routeName && 'home' !== routeName){
+        return { productor: this.$store.state.filter.organisationId};
+      }
+      return { productor: this.$store.state.filter.organisationId,
+                   iabId: this.$store.state.filter.iab?.id,
+                   rubriquesId: this.rubriqueQueryParam}
+    },
+    showBlackBorder(hide: boolean): void {
+      const footerElement = (this.$refs.footer as HTMLElement);
+      if(null===footerElement){return;}
       if (hide) {
-        document.getElementById('footer')!.classList.remove('border-round');
-      } else if (!this.isBarTop) {
-        document.getElementById('footer')!.className += ' border-round';
+        footerElement.classList.remove('border-round');
+      } else {
+        footerElement.className += ' border-round';
       }
     },
+    changeLanguage(): void{
+      this.setCookie('octopus-language', this.language);
+      loadLocaleMessages(this.$i18n, this.language, this.$store.state.general.isEducation);
+      moment.locale(this.$i18n.locale);
+      octopusApi.fetchDataWithParams<Array<Category>>(0, `iab/list${state.octopusApi.organisationId? '/'+state.octopusApi.organisationId : ''}`, { lang: this.$i18n.locale }).then((data: Array<Category>) => {
+        this.$store.commit('categoriesSet', data);
+        if(this.$store.state.filter.iab){
+          const category = this.$store.state.categories.filter((c: Category) => {
+            return c.id === this.$store.state.filter.iab.id;
+          });
+          if(category.length){
+            this.$store.commit('filterIab', category[0]);
+          }
+        }
+      });
+    }
   },
-});
+})
 </script>
+
+<style lang="scss">
+.octopus-app{
+  #footer{
+    font-size: 0.7rem;
+    .acpm_image {
+      width: 70px;
+      height: 70px;
+    }
+    a{
+      color: #666;
+    }
+    .border-round {
+      border-radius: 0 0 2rem 2rem;
+    }
+    /** PHONES*/
+    @media (max-width: 960px) {
+      .align-items-center,
+      .align-items-end {
+        align-items: flex-start !important;
+      }
+    }
+  }
+}
+</style>