@saooti/octopus-sdk 30.0.4 → 30.0.8

package/src/components/display/sharing/SubscribeButtons.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="module-box flex-no-grow">
+  <div class="module-box flex-grow-0">
     <div class="d-flex align-items-center mb-3">
       <h3 class="mb-0 share-button-title">
         {{ $t('Subscribe emission') }}
@@ -123,7 +123,7 @@
 </template>
 
 <script lang="ts">
-import { Emission } from '@/store/class/emission';
+import { Emission } from '@/store/class/general/emission';
 import { defineComponent } from 'vue'
 export default defineComponent({
   props: {

package/src/components/form/ClassicCheckbox.vue

@@ -0,0 +1,61 @@
+<template>
+  <div
+    class="form-check"
+    :class="isSwitch?'form-switch':''"
+  >
+    <input
+      :id="idCheckbox"
+      v-model="textValue"
+      type="checkbox"
+      class="form-check-input"
+      :disabled="isDisabled"
+      @click="emitClickAction"
+    >
+    <label
+      class="form-check-label"
+      :for="idCheckbox"
+    >{{ label }}</label>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+export default defineComponent({
+  name: 'ClassicCheckbox',
+
+  props: {
+    idCheckbox: { default: '', type: String },
+    label: { default: '', type: String },
+    isDisabled: { default: false, type: Boolean },
+    textInit: { default: false, type: Boolean },
+    isSwitch:{default:false, type:Boolean}
+  },
+  emits: ['update:textInit', 'clickAction'],
+
+  data() {
+    return {
+      textValue: false as boolean,
+    };
+  },
+  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;
+	},
+  methods:{
+    emitClickAction():void{
+      this.$emit('clickAction');
+    }
+  }
+});
+</script>

package/src/components/form/ClassicLoading.vue

@@ -0,0 +1,28 @@
+<template>
+  <div
+    v-if="loadingText"
+    class="d-flex justify-content-center"
+  >
+    <div class="spinner-border me-3" />
+    <h3 class="mt-2">
+      {{ loadingText }}
+    </h3>
+  </div>
+  <div
+    v-else-if="errorText"
+    class="text-center"
+  >
+    <h3>{{ errorText }}</h3>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+export default defineComponent({
+  name: "ClassicLoading",
+  props: {
+    loadingText: { default: undefined, type: String},
+    errorText: { default: undefined, type: String},
+  }
+})
+</script>

package/src/components/form/ClassicRadio.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="d-flex flex-column">
+    <div
+      v-for="option in options"
+      :key="option.title"
+      class="form-check"
+    >
+      <input
+        :id="idRadio + option.value"
+        v-model="textValue"
+        class="form-check-input"
+        type="radio"
+        :name="idRadio"
+        :value="option.value"
+        :disabled="isDisabled"
+      >
+      <label
+        class="form-check-label"
+        :for="idRadio + option.value"
+      >{{
+        option.title
+      }}</label>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+export default defineComponent({
+  name: 'ClassicRadio',
+
+  props: {
+    idRadio: { default: '', type: String },
+    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>

package/src/components/form/ClassicSearch.vue

@@ -0,0 +1,82 @@
+<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 input-no-outline"
+      :placeholder="label"
+      :autofocus="autofocus"
+    >
+    <label
+      :for="idSearch"
+      :aria-label="label"
+    />
+    <div
+      v-if="!textValue"
+      class="saooti-search-bounty search-icon-container"
+    />
+    <div
+      v-else
+      class="saooti-cross 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(){
+			if(this.textInit !== this.textValue){
+				this.textValue =this.textInit;
+			}
+		}
+  },
+  mounted(){
+		this.textValue = this.textInit;
+	}
+});
+</script>
+<style lang="scss" scoped>
+.champs-searchPage input {
+  border: 2px solid #dee2e6;
+  border-radius: 10px;
+  margin: 0 !important;
+}
+.saooti-search-bounty,
+.saooti-cross {
+  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/misc/ErrorMessage.vue

@@ -4,7 +4,7 @@
     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"

package/src/components/misc/Footer.vue

@@ -2,9 +2,9 @@
   <div class="bg-dark">
     <div
       id="footer"
-      class="d-flex p-3 secondary-bg border-top footer-display-phone"
+      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="{
@@ -13,7 +13,7 @@
                        iabId: $store.state.filter.iab ? $store.state.filter.iab.id : undefined,
                        rubriquesId: rubriqueQueryParam },
             }"
-            class="linkHover"
+            class="link-hover"
           >
             {{ $t('Home') }}
           </router-link>
@@ -24,7 +24,7 @@
                        iabId: $store.state.filter.iab ? $store.state.filter.iab.id : undefined,
                        rubriquesId: rubriqueQueryParam},
             }"
-            class="linkHover"
+            class="link-hover"
           >
             {{ $t('Podcasts') }}
           </router-link>
@@ -34,7 +34,7 @@
               query: { productor: $store.state.filter.organisationId,
                        iabId: $store.state.filter.iab ? $store.state.filter.iab.id : undefined },
             }"
-            class="linkHover"
+            class="link-hover"
           >
             {{ $t('Emissions') }}
           </router-link>
@@ -44,7 +44,7 @@
               name: 'productors',
               query: { productor: $store.state.filter.organisationId },
             }"
-            class="linkHover"
+            class="link-hover"
           >
             {{ $t('Productors') }}
           </router-link>
@@ -53,23 +53,23 @@
               name: 'participants',
               query: { productor: $store.state.filter.organisationId },
             }"
-            class="linkHover"
+            class="link-hover"
           >
             {{ $t('Speakers') }}
           </router-link>
         </div>
       </div>
-      <hr class="divided-line show-phone">
+      <hr class="show-phone">
       <div
         v-if="!isPodcastmaker"
-        class="d-flex flex-grow align-items-center flex-column"
+        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"
+            class="link-hover"
             to="/main/pub/contact"
           >
             {{
@@ -77,7 +77,7 @@
             }}
           </router-link>
           <router-link
-            class="linkHover"
+            class="link-hover"
             to="/main/pub/cgu"
           >
             {{
@@ -85,7 +85,7 @@
             }}
           </router-link>
           <router-link
-            class="linkHover"
+            class="link-hover"
             to="/main/pub/libraries"
           >
             {{
@@ -93,15 +93,15 @@
             }}
           </router-link>
           <a
-            class="linkHover c-hand"
+            class="link-hover c-hand"
             @click="changeLanguage"
           >{{
             $t('Change locale')
           }}</a>
         </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"
@@ -118,12 +118,12 @@
       </div>
       <div
         v-if="isPodcastmaker && isContactLink"
-        class="d-flex flex-grow align-items-center flex-column"
+        class="d-flex flex-column flex-grow-1 align-items-center"
       >
         <div class="d-flex flex-column">
           <a
             id="footer-contact"
-            class="linkHover"
+            class="link-hover"
             :href="isContactLink"
             rel="noopener"
             target="_blank"
@@ -140,8 +140,8 @@ import Player from './Player.vue';
 import { state } from '../../store/paramStore';
 import octopusApi from '@saooti/octopus-api';
 import moment from 'moment';
-import { Category } from '@/store/class/category';
-import { RubriquageFilter } from '@/store/class/rubriquageFilter';
+import { Category } from '@/store/class/general/category';
+import { RubriquageFilter } from '@/store/class/rubrique/rubriquageFilter';
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'Footer',
@@ -201,33 +201,24 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-#footer {
+#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;
+  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;
     }
   }
-  .container {
-    font-size: 0.6rem;
-    .pages {
-      margin-right: 3rem;
-    }
-  }
 }
 </style>

package/src/components/misc/HomeDropdown.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="d-flex align-items-center justify-content-end flex-no-wrap top-bar-dropdown"
+    class="top-bar-dropdown"
   >
     <div
       v-if="authenticated"
@@ -17,46 +17,37 @@
         data-bs-toggle="dropdown"
         aria-expanded="false"
       />
-      <ul class="dropdown-menu dropdown-menu-right px-4">
-        <li>
-          <router-link
-            v-if="isContribution && !isPodcastmaker"
-            to="/main/priv/upload"
-            class="align-self-center w-100"
-          >
-            <button class="btn btn-primary w-100 mb-2">
-              {{ $t('Upload') }}
-            </button>
-          </router-link>
-        </li>
-        <li v-if="!isPodcastmaker">
+      <div class="dropdown-menu dropdown-menu-right px-4">
+        <router-link
+          v-if="isContribution && !isPodcastmaker"
+          class="btn btn-primary w-100"
+          to="/main/priv/upload"
+        >
+          {{ $t('Upload') }}
+        </router-link>
+        <template v-if="!isPodcastmaker">
           <router-link
             to="/main/priv/backoffice"
-            class="linkSpace dropdown-item"
+            class="show-phone dropdown-item"
           >
             {{ $t('My space') }}
           </router-link>
-        </li>
-        <li v-if="!isPodcastmaker">
           <router-link
             class="dropdown-item"
             to="/main/priv/edit/profile"
           >
             {{ $t('Edit my profile') }}
           </router-link>
-        </li>
-        <li v-if="!isPodcastmaker && isOrganisation">
           <router-link
+            v-if="isOrganisation"
             class="dropdown-item"
             to="/main/priv/edit/organisation"
           >
             {{ $t('Edit my organisation') }}
           </router-link>
-        </li>
-        <li v-if="!isEducation">
+        </template>
+        <template v-if="!isEducation">
           <hr class="dropdown-divider">
-        </li>
-        <li v-if="!isEducation">
           <a
             href="https://help.octopus.saooti.com/Aide/"
             class="dropdown-item"
@@ -65,8 +56,6 @@
           >
             {{ $t('Help') }}
           </a>
-        </li>
-        <li v-if="!isEducation">
           <a
             href="https://help.octopus.saooti.com/"
             class="dropdown-item"
@@ -75,50 +64,41 @@
           >
             {{ $t('TutoMag') }}
           </a>
-        </li>
-        <li><hr class="dropdown-divider"></li>
-        <li v-if="!isEducation">
+          <hr class="dropdown-divider">
           <a
             class="dropdown-item"
             href="/sso/logout"
           >
             {{ $t('Logout') }}
           </a>
-        </li>
-      </ul>
+        </template>
+      </div>
     </div>
     <div
       v-else
       class="dropdown btn-group"
     >
       <button
-        class="btn dropdown-toggle btn-secondary text-decoration-none m-1 admin-button btn-rounded-icon dropdown-toggle-no-caret"
+        class="btn dropdown-toggle m-1 admin-button dropdown-toggle-no-caret saooti-user-octopus"
         data-bs-toggle="dropdown"
         aria-expanded="false"
-      >
-        <i class="saooti-user-octopus text-dark" />
-        <span class="visually-hidden">Profile</span>
-      </button>
-      <ul class="dropdown-menu dropdown-menu-right px-4">
-        <li>
-          <a
-            class="dropdown-item"
-            href="/sso/login"
-          >
-            {{ $t('Login') }}
-          </a>
-        </li>
-        <li v-if="!isPodcastmaker">
-          <router-link
-            class="dropdown-item"
-            to="/main/pub/create"
-          >
-            {{
-              $t('Create an account')
-            }}
-          </router-link>
-        </li>
-      </ul>
+        aria-label="Profile"
+      />
+      <div class="dropdown-menu dropdown-menu-right px-4">
+        <a
+          class="dropdown-item"
+          href="/sso/login"
+        >
+          {{ $t('Login') }}
+        </a>
+        <router-link
+          v-if="!isPodcastmaker"
+          class="dropdown-item"
+          to="/main/pub/create"
+        >
+          {{ $t('Create an account') }}
+        </router-link>
+      </div>
     </div>
   </div>
 </template>
@@ -133,12 +113,6 @@ export default defineComponent({
     isEducation: { default: false, type: Boolean},
   },
 
-  data() {
-    return {
-      showMenu: false as boolean
-    };
-  },
-
   computed: {
     isPodcastmaker(): boolean {
       return (state.generalParameters.podcastmaker as boolean);
@@ -154,7 +128,6 @@ export default defineComponent({
     },
   },
 
-
   methods: {
     goToUrl(url: string): void {
       if (this.authenticated) {
@@ -167,19 +140,24 @@ export default defineComponent({
 
 <style lang="scss">
 .top-bar-dropdown {
+  display: flex;
+  align-items: center;
+
   .main-button-dropdown {
     padding-bottom: 0.4rem;
     width: 140px;
     text-align: left;
     padding-left: 15px;
     margin-right: 30px;
+    @media (max-width: 650px) {
+      display: none;
+    }
   }
   .btn-group .dropdown-toggle-split {
     align-items: center;
-    border-radius: 50% !important;
-    width: 40px !important;
-    height: 40px !important;
-    display: flex;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
     justify-content: center;
     position: absolute;
     right: 5px;
@@ -190,32 +168,5 @@ export default defineComponent({
       right: auto;
     }
   }
-  .dropdown-header {
-    display: flex;
-    align-items: center;
-    font-weight: bold;
-  }
-  .linkSpace {
-    display: none;
-  }
-
-  /** PHONES*/
-  @media (max-width: 1200px) {
-    .linkSpace {
-      display: block;
-    }
-  }
-  @media (max-width: 650px) {
-    .dropdown {
-      .main-button-dropdown {
-        display: none;
-      }
-    }
-    .btn-group .dropdown-toggle-split {
-      height: 30px;
-      width: 30px;
-      border-radius: 50% !important;
-    }
-  }
 }
 </style>