@saooti/octopus-sdk 31.0.7 → 31.0.8

package/README.md

@@ -579,6 +579,7 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
  * 31.0.5 Merge 30
  * 31.0.6 Erreur de Merge 30
  * 31.0.7 Sécurisation
+ * 31.0.8 Dropdown Lang + classicSelect
 
 
 

package/index.ts

@@ -56,6 +56,7 @@ import ClassicSearch from "./src/components/form/ClassicSearch.vue";
 import ClassicCheckbox from "./src/components/form/ClassicCheckbox.vue";
 import ClassicRadio from "./src/components/form/ClassicRadio.vue";
 import ClassicLoading from "./src/components/form/ClassicLoading.vue";
+import ClassicSelect from "./src/components/form/ClassicSelect.vue";
 
 //mixins
 import {selenium} from "./src/components/mixins/functions";
@@ -114,7 +115,8 @@ const components = {
     ClassicRadio,
     ClassicLoading,
     AdvancedSearch,
-    PodcastPlaylistInlineList
+    PodcastPlaylistInlineList,
+    ClassicSelect
 }
 
 export default components;
@@ -168,5 +170,6 @@ export {
     ClassicRadio,
     ClassicLoading,
     AdvancedSearch,
-    PodcastPlaylistInlineList
+    PodcastPlaylistInlineList,
+    ClassicSelect
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "31.0.7",
+  "version": "31.0.8",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",

package/src/components/form/ClassicSelect.vue

@@ -0,0 +1,68 @@
+<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(){
+			if(this.textInit !== this.textValue){
+				this.textValue =this.textInit;
+			}
+		}
+  },
+  mounted(){
+		this.textValue = this.textInit;
+	}
+});
+</script>
+<style lang="scss">
+.octopus-app{
+.classic-select select{
+  width: inherit;
+}
+}
+</style>

package/src/components/misc/Footer.vue

@@ -92,12 +92,18 @@
               $t('Used libraries')
             }}
           </router-link>
-          <a
-            class="link-hover c-hand"
-            @click="changeLanguage"
-          >{{
-            $t('Change locale')
-          }}</a>
+          <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="show-phone">
@@ -136,6 +142,7 @@
 </template>
 
 <script lang="ts">
+import ClassicSelect from '../form/ClassicSelect.vue';
 import Player from './Player.vue';
 import { state } from '../../store/paramStore';
 import octopusApi from '@saooti/octopus-api';
@@ -147,8 +154,16 @@ export default defineComponent({
   name: 'Footer',
   components: {
     Player,
+    ClassicSelect
+  },
+
+  data() {
+    return {
+      language: this.$i18n.locale as string,
+    };
   },
 
+
   computed: {
     isPodcastmaker(): boolean {
       return (state.generalParameters.podcastmaker as boolean);
@@ -167,6 +182,12 @@ export default defineComponent({
     },
   },
 
+  watch:{
+    language(){
+      this.changeLanguage();
+    }
+  },
+
   methods: {
     showBlackBorder(hide: boolean): void {
       const footerElement = document.getElementById('footer');
@@ -178,11 +199,7 @@ export default defineComponent({
       }
     },
     changeLanguage(): void{
-      if('fr'===this.$i18n.locale){
-        this.$i18n.locale= "en";
-      }else{
-        this.$i18n.locale= "fr";
-      }
+      this.$i18n.locale= this.language;
       moment.locale(this.$i18n.locale);
       octopusApi.fetchCategories({ lang: this.$i18n.locale }).then((data: Array<Category>) => {
         this.$store.commit('categoriesSet', data);

package/src/locale/de.ts

@@ -282,7 +282,7 @@ export default{
   'Display my podcasts to validate': "Meine noch nicht validierten Podcasts anzeigen",
   'Podcast not validated': "Nicht validierter Podcast",
   'Podcast to validate': "Podcast noch nicht validiert",
-  'Change locale': "Französisch",
+  'Change locale': "Ändere die Sprache",
   'Refresh': "Aktualisieren",
   'See associated article':"Artikel lesen",
   "Display associated article":"Zugehörigen Artikel anzeigen",

package/src/locale/en.ts

@@ -282,7 +282,7 @@ export default{
   'Display my podcasts to validate': 'Display my podcasts to validate',
   'Podcast not validated': "Podcast not validated",
   'Podcast to validate': 'Podcast to validate',
-  'Change locale': 'En français',
+  'Change locale': 'Change the language',
   'Refresh': 'Refresh',
   'See associated article':"Read the article",
   "Display associated article":"Display associated article",

package/src/locale/es.ts

@@ -282,7 +282,7 @@ export default{
   'Display my podcasts to validate': 'Mostrar mis pódcast pendientes de validación',
   'Podcast not validated': "Pódcast no validado",
   'Podcast to validate': 'Pódcast pendiente de validación',
-  'Change locale': 'En français',
+  'Change locale': 'Cambiar el idioma',
   'Refresh': 'Volver a cargar',
   'See associated article':"Leer el artículo",
   "Display associated article":"Mostrar el artículo asociado",

package/src/locale/fr.ts

@@ -282,7 +282,7 @@ export default{
   'Display my podcasts to validate': 'Afficher mes épisodes à valider',
   'Podcast not validated': "L'épisode n'est pas validé",
   'Podcast to validate': 'Épisode à valider',
-  'Change locale': 'In english',
+  'Change locale': 'Changer la langue',
   'Refresh': 'Rafraichir',
   'See associated article':"Lire l'article",
   "Display associated article":"Afficher l'article associé",

package/src/locale/it.ts

@@ -278,7 +278,7 @@ export default{
     'Display my podcasts to validate': 'Mostra i miei podcast da validare',
     'Podcast not validated': "Podcast non validato",
     'Podcast to validate': 'Podcast da validare',
-    'Change locale': 'In francese', 
+    'Change locale': 'Cambia la lingua', 
     'Refresh': 'Aggiorna', 
     'See associated article':"Leggi l'articolo", 
     "Display associated article":"Mostra articolo associato",

package/src/locale/sl.ts

@@ -282,7 +282,7 @@ export default{
   'Display my podcasts to validate': 'Prikaži moje podkaste za potrditev',
   'Podcast not validated': "Podkasti niso potrjeni",
   'Podcast to validate': 'Podkasti, ki jih je treba potrditi',
-  'Change locale': 'FR',
+  'Change locale': 'Spremenite jezik',
   'Refresh': 'Osveži',
   'See associated article':"Read the article",
   "Display associated article": "Prikaži povezan vir",

package/src/main.ts

@@ -19,12 +19,24 @@ const navigatorLang = navigator.language /* || navigator.userLanguage */;
 let language = 'fr';
 if(navigatorLang.includes('en')){
   language = 'en';
+}else if(navigatorLang.includes('it')){
+  language = 'it';
+}else if(navigatorLang.includes('sl')){
+  language = 'sl';
+}else if(navigatorLang.includes('es')){
+  language = 'es';
+}else if(navigatorLang.includes('de')){
+  language = 'de';
 }
 let messages: {[key: string]: LocaleMessage<VueMessageType>} = I18nResources;
 if (store.state.general.education) {
   messages = {
     fr: { ...I18nResources.fr, ...I18nResources.educationfr },
     en: { ...I18nResources.en, ...I18nResources.educationen },
+    it: I18nResources.it,
+    sl: I18nResources.it,
+    es: I18nResources.es,
+    de: I18nResources.de,
   };
 }
 const i18n = createI18n({