@saooti/octopus-sdk 41.0.18 → 41.0.20

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

@@ -93,7 +93,6 @@ import DurationHelper from "../../../helper/durationHelper";
 import { state } from "../../../stores/ParamSdkStore";
 import { Podcast } from "@/stores/class/general/podcast";
 import { Conference } from "@/stores/class/conference/conference";
-import { useAuthStore } from "../../../stores/AuthStore";
 import { usePlayerStore } from "../../../stores/PlayerStore";
 import { computed, defineAsyncComponent, ref } from "vue";
 import dayjs from "dayjs";
@@ -110,8 +109,8 @@ const props = defineProps({
   hidePlay: { default: false, type: Boolean },
   fetchConference: { default: undefined, type: Object as () => Conference },
   justButtons: { default: false, type: Boolean },
-  /** Indicates that the podcast is displayed in a list */
-  inList: { default: false, type: Boolean }
+  /** Indicates that the processing status of the episode may be shown */
+  showProcessing: { default: false, type: Boolean }
 })
 
 
@@ -120,7 +119,6 @@ const hoverType = ref("");
 
 //Composables
 const { t } = useI18n();
-const authStore = useAuthStore();
 const playerStore = usePlayerStore();
 const router = useRouter();
 
@@ -174,7 +172,7 @@ const classicPodcastPlay = computed(() => {
 });
 
 const displayBanner = computed(() => {
-  return !classicPodcastPlay.value || ("PROCESSING" === props.podcast.processingStatus && !props.inList);
+  return !classicPodcastPlay.value || ("PROCESSING" === props.podcast.processingStatus && props.showProcessing);
 });
 
 const iconName = computed(() => {

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

@@ -12,7 +12,7 @@
       class="d-flex align-items-center border p-1 m-1 text-dark"
       :to="{
         name: 'tag',
-        params: { tag: tag},
+        params: { tag },
         query: organisationQuery
       }"
     >
@@ -82,7 +82,7 @@ const organisationQuery = computed(() => {
   if(filterStore.filterOrgaId){
     return undefined;
   }
-  return { o: props.orgaId};
+  return { o: props.orgaId };
 });
 /* const ouestFranceMainTag = computed(() => {
   if (props.podcastAnnotations?.["mainOfTag"]) {

package/src/components/form/ClassicInputText.vue

@@ -151,6 +151,7 @@ const props = defineProps({
   errorText: { default: "", type: String },
   isTextarea: { default: false, type: Boolean },
   isWysiwyg: { default: false, type: Boolean },
+  /** A regex checked against the input, if the input doesn't match mark it with error */
   regex: { default: undefined, type: RegExp },
   canBeNull: { default: false, type: Boolean },
   inputMaxLengthField: { default: undefined, type: Number },

package/src/components/form/ClassicMultiselect.vue

@@ -212,6 +212,7 @@ defineExpose({
   afterSearch
 });
 </script>
+
 <style lang="scss">
 @use "vue-select/dist/vue-select.css";
 /* stylelint-disable */

package/src/components/form/ClassicRadio.vue

@@ -1,3 +1,12 @@
+<!--
+  Simple component to display radio buttons.
+
+  Available slots:
+    `label-{option.value}`: Slot to replace the label of the current option.
+                            Binding: `option`: the current option
+    `after-{option.value}`: Slot after the radio button
+                            Binding: `option`: the current option
+-->
 <template>
   <div role="radiogroup" class="d-flex" :class="isColumn ? 'flex-column' : ''">
     <div
@@ -14,23 +23,30 @@
         :value="option.value"
         :disabled="isDisabled"
         @input="onChange($event.target.value)"
-      />
-      <label class="c-hand" :for="idRadio + option.value">{{
-        option.title
-      }}</label>
+      >
+      <label class="c-hand" :for="idRadio + option.value">
+        <slot :name="'label-' + option.value" v-bind="slotBindings(option)">{{ option.title }}</slot>
+      </label>
+
+      <slot :name="'after-' + option.value" v-bind="slotBindings(option)" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 
+interface Option {
+  title: string;
+  value: string | undefined
+};
+
 //Props 
-defineProps({
+const { textInit } = defineProps({
   idRadio: { default: "", type: String },
   isDisabled: { default: false, type: Boolean },
   options: {
     default: () => [],
-    type: Array as () => Array<{ title: string; value: string | undefined }>,
+    type: Array as () => Array<Option>,
   },
   textInit: { default: undefined, type: String },
   isColumn: { default: true, type: Boolean },
@@ -44,4 +60,11 @@ function onChange(value:string){
   emit('update:textInit', value)
 }
 
+function slotBindings(option: Option): { option: Option; selected: boolean } {
+  return {
+    option,
+    selected: textInit === option.value
+  }
+}
+
 </script>

package/src/components/form/ClassicTagInput.vue

@@ -0,0 +1,155 @@
+<template>
+    <div
+        class="d-flex flex-wrap border align-items-center rounded px-2"
+    >
+        <div
+            v-for="(tag, index) in tags"
+            :key="tag"
+            class="vs__selected p-0 my-0 mx-1"
+            :class="getClass(tag)"
+        >
+            <!--<button
+                v-if="index !== tagToEdit"-->
+            <button
+                :id="'display-input-tag-' + index"
+                class="btn-transparent d-flex align-items"
+                @click="startEditTag(index, tag)"
+            >
+                <!--<img
+                    v-if="isOuestFranceTag(tag)"
+                    width="20"
+                    height="20"
+                    class="ouest-france-logo"
+                    title="Ouest France Logo"
+                    aria-hidden="true"
+                    alt=""
+                    src="/img/ouest_france_logo.svg"
+                >-->
+                <span>{{ tag }}</span>
+            </button>
+            <!--<input
+                v-else
+                :id="'form-input-tag-' + index"
+                v-model="tagToEditTempValue"
+                :title="$t('Edit')"
+                @blur="finishEditTag(index)"
+                @keydown.enter="finishEditTag(index)"
+            >-->
+
+            <button class="btn-transparent" @click="removeTag(index)">
+                <CloseIcon />
+            </button>
+        </div>
+        <input
+            v-if="editing"
+            :id="'form-input-tag'"
+            v-model="tagToEditTempValue"
+            :title="$t('Edit')"
+            @blur="finishEditTag"
+            @keydown.enter="finishEditTag"
+        >
+        <button
+            class="btn btn-add-tag m-1"
+            :title="$t('Add a tag')"
+            @click="createNewTag"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import CloseIcon from "vue-material-design-icons/Close.vue";
+
+const { tags, tagClass } = defineProps<{
+    /** Currently selected tags */
+    tags: string[];
+    /** The class to apply to the tags */
+    tagClass?: string|string[]|((tag: string) => string|string[]);
+}>();
+
+const emit = defineEmits<{
+    /** Update tags */
+    (e: 'update:tags', tags: string[]): void
+}>();
+
+//const tagToEdit: Ref<number | undefined> = ref(undefined);
+const editing = ref(false);
+const tagToEditTempValue = ref("");
+
+function getClass(tag: string): string|string[]|undefined {
+    if (typeof tagClass === 'function') {
+        return tagClass(tag);
+    } else {
+        return tagClass;
+    }
+}
+
+function removeTag(index: number): void {
+    const newTags = [...tags];
+    newTags.splice(index, 1);
+    console.log(index, newTags);
+    emit('update:tags', newTags);
+}
+
+function startEditTag(index: number, tag: string): void {
+    //tagToEditTempValue.value = tags[index];
+    //tagToEdit.value = index;
+    // editing.value = true;
+    /*nextTick(() => {
+        document.getElementById("form-input-tag-" + index)?.focus();
+    });*/
+}
+
+function finishEditTag(/*index: number*/): void {
+    /*if (index !== tagToEdit.value) {
+        return;
+    }
+    tagToEdit.value = undefined;
+
+    if (tagToEditTempValue.value.length) {
+        const newTags = [...tags];
+        newTags.splice(
+            index,
+            1,
+            ...tagToEditTempValue.value.split(","),
+        );
+        emit('update:tags', newTags);
+    } else {
+        const newTags = [...tags];
+        newTags.splice(index, 1);
+        emit('update:tags', newTags);
+    }*/
+
+    if (tagToEditTempValue.value === '') {
+        return;
+    }
+
+    const newTags = [...tags, tagToEditTempValue.value];
+    tagToEditTempValue.value = '';
+    editing.value = false;
+    emit('update:tags', newTags);
+}
+
+function createNewTag(): void {
+    /*const newTags = [...tags, ''];
+    emit('update:tags', newTags);
+    startEditTag(tags.length - 1, '');*/
+    editing.value = true;
+}
+
+</script>
+
+<style scoped lang="scss">
+.btn-add-tag {
+    padding: 4px;
+    line-height: 1;
+
+    &::after {
+        content: "+";
+        color: var(--octopus-primary);
+        font-size: 14px;
+        font-weight: bold;
+    }
+}
+</style>

package/src/components/misc/ClassicPopover.vue

@@ -65,7 +65,7 @@ const popoverRef = useTemplateRef('popover');
 
 
 //Composables
-const router= useRouter();
+const router = useRouter();
 
 //Computed
 const popoverId = computed(() => "popover" + props.target);

package/src/components/pages/EmissionPage.vue

@@ -57,6 +57,15 @@
                 {{ t("Listen to the latest episode") }}
               </div>
             </div>
+
+            <!-- Tag list -->
+            <TagList
+              v-if="undefined !== emission.tags && 0 !== emission.tags.length"
+              :tag-list="emission.tags"
+              :orga-id="authOrgaId"
+              :emission-annotations="emission.annotations"
+            />
+
             <SubscribeButtons
               v-if="isPodcastmaker"
               class="mt-4"
@@ -160,6 +169,7 @@ const PodcastPlayButton = defineAsyncComponent(
 const PodcastmakerHeader = defineAsyncComponent(
   () => import("../display/podcastmaker/PodcastmakerHeader.vue"),
 );
+const TagList = defineAsyncComponent(() => import("../display/podcasts/TagList.vue"));
 
 
 //Props 

package/src/components/pages/EmissionsPage.vue

@@ -1,40 +1,42 @@
 <template>
-  <section v-if="isInit" class="page-box">
-    <slot name="new-emission" />
-    <ProductorSearch
-      v-model:organisation-id="organisationId"
-      v-model:search-pattern="searchPattern"
-      type="emission"
-    />
-    <AdvancedSearch
-      v-model:monetisable="monetisable"
-      v-model:iab-id="iabId"
-      v-model:sort="sort"
-      v-model:include-hidden="includeHidden"
-      v-model:from-date="fromDate"
-      v-model:to-date="toDate"
-      v-model:rubrique-filter="rubriqueFilter"
-      :search-pattern="searchPattern"
-      :is-emission="true"
-      :organisation-id="organisationId"
-    />
-    <EmissionList
-      :show-count="true"
-      :first="paginateFirst"
-      :size="ps"
-      :query="searchMinSize"
-      :organisation-id="organisationId"
-      :monetisable="monetisable"
-      :before="toDate"
-      :after="fromDate"
-      :sort="sort"
-      :include-hidden="includeHidden"
-      :iab-id="iabId"
-      :rubrique-id="rubriquesFilterArrayIds.rubriqueId"
-      :rubriquage-id="rubriquesFilterArrayIds.rubriquageId"
-      :no-rubriquage-id="rubriquesFilterArrayIds.noRubriquageId"
-    />
-  </section>
+    <section v-if="isInit" class="page-box">
+        <slot name="new-emission" />
+        <ProductorSearch
+            v-model:organisation-id="organisationId"
+            v-model:search-pattern="searchPattern"
+            type="emission"
+        />
+        <AdvancedSearch
+            v-model:monetisable="monetisable"
+            v-model:iab-id="iabId"
+            v-model:sort="sort"
+            v-model:include-hidden="includeHidden"
+            v-model:from-date="fromDate"
+            v-model:to-date="toDate"
+            v-model:rubrique-filter="rubriqueFilter"
+            v-model:beneficiaries="beneficiaries"
+            :search-pattern="searchPattern"
+            :is-emission="true"
+            :organisation-id="organisationId"
+        />
+        <EmissionList
+            :show-count="true"
+            :first="paginateFirst"
+            :size="ps"
+            :query="searchMinSize"
+            :organisation-id="organisationId"
+            :monetisable="monetisable"
+            :before="toDate"
+            :after="fromDate"
+            :sort="sort"
+            :include-hidden="includeHidden"
+            :iab-id="iabId"
+            :rubrique-id="rubriquesFilterArrayIds.rubriqueId"
+            :rubriquage-id="rubriquesFilterArrayIds.rubriquageId"
+            :no-rubriquage-id="rubriquesFilterArrayIds.noRubriquageId"
+            :beneficiaries="beneficiaries"
+        />
+    </section>
 </template>
 
 <script setup lang="ts">
@@ -43,38 +45,41 @@ import AdvancedSearch from "../display/filter/AdvancedSearch.vue";
 import {useAdvancedParamInit} from "../composable/route/useAdvancedParamInit";
 import { defineAsyncComponent } from "vue";
 const ProductorSearch = defineAsyncComponent(
-  () => import("../display/filter/ProductorSearch.vue"),
+    () => import("../display/filter/ProductorSearch.vue"),
 );
 
 //Props
 const props = defineProps({
-  pr: { default: 0, type: Number },
-  ps: { default: 30, type: Number },
-  routeQuery: { default: "", type: String },
-  routeMonetisable: { default: "UNDEFINED", type: String },
-  routeIab: { default: undefined, type: Number },
-  routeSort: { default: "LAST_PODCAST_DESC", type: String },
-  routeIncludeHidden: { default: "", type: String },
-  routeFrom: { default: undefined, type: String },
-  routeTo: { default: undefined, type: String },
-  routeOrga: { default: undefined, type: String },
-  routeRubriques: { default: "", type: String },
+    pr: { default: 0, type: Number },
+    ps: { default: 30, type: Number },
+    routeQuery: { default: "", type: String },
+    routeMonetisable: { default: "UNDEFINED", type: String },
+    routeIab: { default: undefined, type: Number },
+    routeSort: { default: "LAST_PODCAST_DESC", type: String },
+    routeIncludeHidden: { default: "", type: String },
+    routeFrom: { default: undefined, type: String },
+    routeTo: { default: undefined, type: String },
+    routeOrga: { default: undefined, type: String },
+    routeRubriques: { default: "", type: String },
+    /** The filter on beneficiaries defined on the route props */
+    routeBeneficiaries: { default: null, type: Array as () => Array<string> }
 });
 
 //Composables
 const {
-  organisationId,
-  searchPattern,
-  monetisable,
-  iabId,
-  sort,
-  includeHidden,
-  fromDate,
-  toDate,
-  rubriqueFilter,
-  searchMinSize,
-  paginateFirst,
-  rubriquesFilterArrayIds,
-  isInit
+    organisationId,
+    searchPattern,
+    monetisable,
+    iabId,
+    sort,
+    includeHidden,
+    fromDate,
+    toDate,
+    rubriqueFilter,
+    searchMinSize,
+    paginateFirst,
+    rubriquesFilterArrayIds,
+    isInit,
+    beneficiaries
 } = useAdvancedParamInit(props, true);
 </script>

package/src/components/pages/PodcastsPage.vue

@@ -1,42 +1,44 @@
 <template>
-  <section v-if="isInit" class="page-box">
-    <ProductorSearch
-      v-model:organisation-id="organisationId"
-      v-model:search-pattern="searchPattern"
-    />
-    <AdvancedSearch
-      v-model:only-video="onlyVideo"
-      v-model:monetisable="monetisable"
-      v-model:iab-id="iabId"
-      v-model:sort="sort"
-      v-model:include-hidden="includeHidden"
-      v-model:from-date="fromDate"
-      v-model:to-date="toDate"
-      v-model:validity="validity"
-      v-model:rubrique-filter="rubriqueFilter"
-      :search-pattern="searchPattern"
-      :is-emission="false"
-      :organisation-id="organisationId"
-    />
-    <PodcastList
-      :show-count="true"
-      :first="paginateFirst"
-      :size="ps"
-      :organisation-id="orgaArray"
-      :query="searchMinSize"
-      :monetisable="monetisable"
-      :before="toDate"
-      :after="fromDate"
-      :sort-criteria="sort"
-      :include-hidden="includeHidden"
-      :iab-id="iabId"
-      :rubrique-id="rubriquesFilterArrayIds.rubriqueId"
-      :rubriquage-id="rubriquesFilterArrayIds.rubriquageId"
-      :no-rubriquage-id="rubriquesFilterArrayIds.noRubriquageId"
-      :with-video="withVideo"
-      :validity="validity"
-    />
-  </section>
+    <section v-if="isInit" class="page-box">
+        <ProductorSearch
+            v-model:organisation-id="organisationId"
+            v-model:search-pattern="searchPattern"
+        />
+        <AdvancedSearch
+            v-model:only-video="onlyVideo"
+            v-model:monetisable="monetisable"
+            v-model:iab-id="iabId"
+            v-model:sort="sort"
+            v-model:include-hidden="includeHidden"
+            v-model:from-date="fromDate"
+            v-model:to-date="toDate"
+            v-model:validity="validity"
+            v-model:rubrique-filter="rubriqueFilter"
+            v-model:beneficiaries="beneficiaries"
+            :search-pattern="searchPattern"
+            :is-emission="false"
+            :organisation-id="organisationId"
+        />
+        <PodcastList
+            :show-count="true"
+            :first="paginateFirst"
+            :size="ps"
+            :organisation-id="orgaArray"
+            :query="searchMinSize"
+            :monetisable="monetisable"
+            :before="toDate"
+            :after="fromDate"
+            :sort-criteria="sort"
+            :include-hidden="includeHidden"
+            :iab-id="iabId"
+            :rubrique-id="rubriquesFilterArrayIds.rubriqueId"
+            :rubriquage-id="rubriquesFilterArrayIds.rubriquageId"
+            :no-rubriquage-id="rubriquesFilterArrayIds.noRubriquageId"
+            :beneficiaries="beneficiaries"
+            :with-video="withVideo"
+            :validity="validity"
+        />
+    </section>
 </template>
 
 <script setup lang="ts">
@@ -48,19 +50,21 @@ import { computed, ref, watch } from "vue";
 
 //Props 
 const props = defineProps({
-  pr: { default: 0, type: Number },
-  ps: { default: 30, type: Number },
-  routeQuery: { default: "", type: String },
-  routeMonetisable: { default: "UNDEFINED", type: String },
-  routeIab: { default: undefined, type: Number },
-  routeSort: { default: "DATE", type: String },
-  routeIncludeHidden: { default: "", type: String },
-  routeFrom: { default: undefined, type: String },
-  routeTo: { default: undefined, type: String },
-  routeValidity: { default: "", type: String },
-  routeOnlyVideo: { default: "", type: String },
-  routeOrga: { default: undefined, type: String },
-  routeRubriques: { default: "", type: String },
+    pr: { default: 0, type: Number },
+    ps: { default: 30, type: Number },
+    routeQuery: { default: "", type: String },
+    routeMonetisable: { default: "UNDEFINED", type: String },
+    routeIab: { default: undefined, type: Number },
+    routeSort: { default: "DATE", type: String },
+    routeIncludeHidden: { default: "", type: String },
+    routeFrom: { default: undefined, type: String },
+    routeTo: { default: undefined, type: String },
+    routeValidity: { default: "", type: String },
+    routeOnlyVideo: { default: "", type: String },
+    routeOrga: { default: undefined, type: String },
+    routeRubriques: { default: "", type: String },
+    /** The filter on beneficiaries defined on the route props */
+    routeBeneficiaries: { default: null, type: Array as () => Array<string> }
 });
 
 
@@ -70,20 +74,21 @@ const onlyVideo = ref(false);
 
 //Composables
 const {
-  organisationId,
-  searchPattern,
-  monetisable,
-  iabId,
-  sort,
-  includeHidden,
-  fromDate,
-  toDate,
-  rubriqueFilter,
-  searchMinSize,
-  paginateFirst,
-  validity,
-  rubriquesFilterArrayIds,
-  isInit
+    organisationId,
+    searchPattern,
+    monetisable,
+    iabId,
+    sort,
+    includeHidden,
+    fromDate,
+    toDate,
+    rubriqueFilter,
+    searchMinSize,
+    paginateFirst,
+    validity,
+    rubriquesFilterArrayIds,
+    isInit,
+    beneficiaries
 } = useAdvancedParamInit(props, false);
 
 //Computed
@@ -93,7 +98,7 @@ const withVideo = computed(() => false === onlyVideo.value ? undefined : true);
 
 //Watch
 watch(() => props.routeOnlyVideo, () =>{
-  onlyVideo.value = "true" === props.routeOnlyVideo;
+    onlyVideo.value = "true" === props.routeOnlyVideo;
 }, {immediate: true});
 
 </script>