@saooti/octopus-sdk 32.0.16 → 32.0.19

package/README.md

@@ -659,4 +659,7 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
  * 32.0.13 Test Vite au lieu de Webpack
  * 32.0.14 Mise en place Vite au lieu de Webpack
  * 32.0.15 Pb lié refactor
- * 32.0.16 Pb lié refactor
+ * 32.0.16 Pb lié refactor
+ * 32.0.17 AdvancedSearch components
+ * 32.0.18 AdvancedSearch components
+ * 32.0.19 Playlist publique

package/index.ts

@@ -27,31 +27,25 @@ import Popover from "./src/components/misc/Popover.vue";
 import CategoryChooser from "./src/components/display/categories/CategoryChooser.vue";
 import CategoryList from "./src/components/display/categories/CategoryList.vue";
 import CategoryFilter from "./src/components/display/categories/CategoryFilter.vue";
-/*import EditBox from "./src/components/display/edit/EditBox.vue"; */
 import EmissionChooser from "./src/components/display/emission/EmissionChooser.vue";
-/* import EmissionItem from "./src/components/display/emission/EmissionItem.vue"; */
 import EmissionList from "./src/components/display/emission/EmissionList.vue";
-/*import MonetizableFilter from "./src/components/display/filter/MonetizableFilter.vue";
-import ProductorSearch from "./src/components/display/filter/ProductorSearch.vue";*/
-import AdvancedSearch from "./src/components/display/filter/AdvancedSearch.vue";
 import OrganisationChooser from "./src/components/display/organisation/OrganisationChooser.vue";
-/*import ParticipantItem from "./src/components/display/participant/ParticipantItem.vue";
-import ParticipantList from "./src/components/display/participant/ParticipantList.vue";
-import AnimatorsItem from "./src/components/display/podcasts/AnimatorsItem.vue";*/
 import PodcastFilterList from "./src/components/display/podcasts/PodcastFilterList.vue";
-/*import PodcastImage from "./src/components/display/podcasts/PodcastImage.vue";*/
 import PodcastInlineList from "./src/components/display/podcasts/PodcastInlineList.vue";
-/*import PodcastItem from "./src/components/display/podcasts/PodcastItem.vue";*/
 import PodcastList from "./src/components/display/podcasts/PodcastList.vue";
 import ShareButtons from "./src/components/display/sharing/ShareButtons.vue";
-/*import ShareDistribution from "./src/components/display/sharing/ShareDistribution.vue";
-import SharePlayer from "./src/components/display/sharing/SharePlayer.vue"; */
 import EmissionInlineList from "./src/components/display/emission/EmissionInlineList.vue";
 import RubriqueChooser from "./src/components/display/rubriques/RubriqueChooser.vue";
 import CommentList from "./src/components/display/comments/CommentList.vue";
 import CommentInput from "./src/components/display/comments/CommentInput.vue";
 import PodcastPlaylistInlineList from "./src/components/display/playlist/PodcastPlaylistInlineList.vue";
 
+//AdvancedSearch
+import AdvancedSearch from "./src/components/display/filter/AdvancedSearch.vue";
+import RubriqueFilter from "./src/components/display/filter/RubriqueFilter.vue";
+import DateFilter from "./src/components/display/filter/DateFilter.vue";
+import SearchOrder from "./src/components/display/filter/SearchOrder.vue";
+
 //form
 import ClassicSearch from "./src/components/form/ClassicSearch.vue";
 import ClassicCheckbox from "./src/components/form/ClassicCheckbox.vue";
@@ -122,9 +116,11 @@ const components = {
     ClassicSelect,
     Error403Page,
     Paginate,
-    ListPaginate
+    ListPaginate,
+    RubriqueFilter,
+    DateFilter,
+    SearchOrder
 }
-
 export default components;
 
 export {
@@ -180,5 +176,8 @@ export {
     ClassicSelect,
     Error403Page,
     Paginate,
-    ListPaginate
+    ListPaginate,
+    RubriqueFilter,
+    DateFilter,
+    SearchOrder
 };

package/package.json

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

package/src/components/display/filter/AdvancedSearch.vue

@@ -23,68 +23,17 @@
           :is-emission="isEmission"
           @updateMonetization="updateMonetization"
         />
-        <CategoryFilter @updateCategory="updateCategory" />
+        <CategorySearchFilter @updateCategory="updateCategory" />
         <RubriqueFilter 
           :reset-rubriquage="resetRubriquage"
           :organisation-id="organisationId"
           @updateRubriquageFilter="updateRubriquageFilter"
         />
-        <div class="d-flex mt-3 align-items-center flex-wrap">
-          <div
-            v-if="isEmission"
-            class="me-2"
-          >
-            {{ $t('Emission with episode published :') }}
-          </div>
-          <div class="d-flex align-items-center">
-            <ClassicCheckbox
-              v-model:textInit="isFrom"
-              class="flex-shrink-0"
-              id-checkbox="search-from-checkbox"
-              :label="$t('From the :')"
-            />
-            <DatePicker
-              v-model="fromDate"
-              class="ps-3 pe-3"
-              mode="dateTime"
-              color="green"
-              is24hr
-              @update:modelValue="updateFromDate()"
-            >
-              <template #default="{ inputValue, inputEvents }">
-                <input
-                  class="px-2 py-1 border rounded focus:border-blue-300"
-                  :value="inputValue"
-                  v-on="inputEvents"
-                >
-              </template>
-            </DatePicker>
-          </div>
-          <div class="d-flex align-items-center">
-            <ClassicCheckbox
-              v-model:textInit="isTo"
-              class="flex-shrink-0"
-              id-checkbox="search-to-checkbox"
-              :label="$t('To the :')"
-            />
-            <DatePicker
-              v-model="toDate"
-              class="ps-3"
-              mode="dateTime"
-              color="green"
-              is24hr
-              @update:modelValue="updateToDate()"
-            >
-              <template #default="{ inputValue, inputEvents }">
-                <input
-                  class="px-2 py-1 border rounded focus:border-blue-300"
-                  :value="inputValue"
-                  v-on="inputEvents"
-                >
-              </template>
-            </DatePicker>
-          </div>
-        </div>
+        <DateFilter
+          :isEmission="isEmission"
+          @updateToDate="updateToDate"
+          @updateFromDate="updateFromDate"
+        />
         <div
           v-if="organisation && organisationRight && !isPodcastmaker"
           class="d-flex flex-column mt-3"
@@ -113,14 +62,11 @@
         <div class="primary-darker mb-2">
           {{ $t('Sort') }}
         </div>
-        <ClassicRadio
-          v-model:textInit="sort"
-          id-radio="sort-radio"
-          :options="isSearchBar? [{title:$t('Sort score'), value:'SCORE'},
-                                  {title:$t('Sort last'), value:isEmission?'LAST_PODCAST_DESC':'DATE'},
-                                  {title:$t('Sort name'), value:'NAME'}]:
-            [{title:$t('Sort last'), value:isEmission?'LAST_PODCAST_DESC':'DATE'},
-             {title:$t('Sort name'), value:'NAME'}]"
+        <SearchOrder
+          :isEmission="isEmission"
+          :isSearchBar="isSearchBar"
+          :sortCriteria="sortCriteria"
+          @updateSortCriteria="updateSortCriteria"
         />
       </div>
     </div>
@@ -130,23 +76,24 @@
 <script lang="ts">
 import { state } from '../../../store/paramStore';
 import { orgaComputed } from '../../mixins/orgaComputed';
-import moment from 'moment';
-import CategoryFilter from './CategoryFilter.vue';
+import CategorySearchFilter from './CategorySearchFilter.vue';
+import DateFilter from './DateFilter.vue';
+import SearchOrder from './SearchOrder.vue';
 import RubriqueFilter from './RubriqueFilter.vue';
 import ClassicCheckbox from '../../form/ClassicCheckbox.vue';
 import ClassicRadio from '../../form/ClassicRadio.vue';
 import { RubriquageFilter } from '@/store/class/rubrique/rubriquageFilter';
-import { DatePicker } from 'v-calendar';
 import { defineComponent, defineAsyncComponent } from 'vue';
 const MonetizableFilter = defineAsyncComponent(() => import('./MonetizableFilter.vue'));
 export default defineComponent({
   components: {
     MonetizableFilter,
-    DatePicker,
-    CategoryFilter,
+    CategorySearchFilter,
     RubriqueFilter,
     ClassicCheckbox,
-    ClassicRadio
+    ClassicRadio,
+    DateFilter,
+    SearchOrder
   },
   mixins: [orgaComputed],
   props: {
@@ -169,14 +116,9 @@ export default defineComponent({
           'updateRubriquageFilter'],
   data() {
     return {
-      isFrom: false as boolean,
-      isTo: false as boolean,
-      fromDate: moment().subtract(10, 'days').toISOString() as string,
-      toDate: moment().toISOString() as string,
       isNotVisible: this.includeHidden as boolean,
       isNotValidate: false as boolean,
       showFilters: false as boolean,
-      sort: this.sortCriteria as string,
     };
   },
 
@@ -219,58 +161,19 @@ export default defineComponent({
     organisation(): void {
       this.isNotVisible = undefined!==this.organisation && this.organisationRight && !this.isEmission;
     },
-    isFrom(): void {
-      this.$emit('updateFromDate', this.isFrom ? moment(this.fromDate).toISOString(true) : undefined);
-    },
-    isTo(): void {
-      this.$emit('updateToDate', this.isTo ? moment(this.toDate).toISOString(true) : undefined);
-    },
-    sort(): void {
-      this.$emit('updateSortCriteria', this.sort);
-    },
     isNotVisible(): void{
       this.$emit('includeHidden', this.isNotVisible);
     },
     isNotValidate(): void {
       this.$emit('notValid', this.isNotValidate);
     },
-    sortCriteria(): void {
-      this.sort = this.sortCriteria;
-    },
   },
   methods: {
-    updateFromDate(): void {
-      if (
-        moment(this.fromDate)
-          .startOf('minute')
-          .toISOString() ===
-        moment()
-          .subtract(10, 'days')
-          .startOf('minute')
-          .toISOString()
-      )
-        return;
-      if (this.isFrom) {
-        this.$emit('updateFromDate', moment(this.fromDate).toISOString(true));
-      } else {
-        this.isFrom = true;
-      }
+    updateFromDate(value: string): void {
+      this.$emit('updateFromDate', value);
     },
-    updateToDate(): void {
-      if (
-        moment(this.toDate)
-          .startOf('minute')
-          .toISOString() ===
-        moment()
-          .startOf('minute')
-          .toISOString()
-      )
-        return;
-      if (this.isTo) {
-        this.$emit('updateToDate', moment(this.toDate).toISOString(true));
-      } else {
-        this.isTo = true;
-      }
+    updateToDate(value: string): void {
+      this.$emit('updateToDate', value);
     },
     updateMonetization(value: string): void {
       this.$emit('updateMonetization', value);
@@ -281,6 +184,9 @@ export default defineComponent({
     updateRubriquageFilter(value: Array<RubriquageFilter>){
       this.$emit('updateRubriquageFilter', value);
     },
+    updateSortCriteria(value: string){
+      this.$emit('updateSortCriteria', value);
+    }
   },
 })
 </script>

package/src/components/display/filter/DateFilter.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="d-flex mt-3 align-items-center flex-wrap">
+    <div
+      v-if="isEmission"
+      class="me-2"
+    >
+      {{ $t('Emission with episode published :') }}
+    </div>
+    <div class="d-flex align-items-center">
+      <ClassicCheckbox
+        v-model:textInit="isFrom"
+        class="flex-shrink-0"
+        id-checkbox="search-from-checkbox"
+        :label="$t('From the :')"
+      />
+      <DatePicker
+        v-model="fromDate"
+        class="ps-3 pe-3"
+        mode="dateTime"
+        color="green"
+        is24hr
+        @update:modelValue="updateFromDate()"
+      >
+        <template #default="{ inputValue, inputEvents }">
+          <input
+            class="px-2 py-1 border rounded focus:border-blue-300"
+            :value="inputValue"
+            v-on="inputEvents"
+          >
+        </template>
+      </DatePicker>
+    </div>
+    <div class="d-flex align-items-center">
+      <ClassicCheckbox
+        v-model:textInit="isTo"
+        class="flex-shrink-0"
+        id-checkbox="search-to-checkbox"
+        :label="$t('To the :')"
+      />
+      <DatePicker
+        v-model="toDate"
+        class="ps-3"
+        mode="dateTime"
+        color="green"
+        is24hr
+        @update:modelValue="updateToDate()"
+      >
+        <template #default="{ inputValue, inputEvents }">
+          <input
+            class="px-2 py-1 border rounded focus:border-blue-300"
+            :value="inputValue"
+            v-on="inputEvents"
+          >
+        </template>
+      </DatePicker>
+    </div>
+  </div>
+      
+</template>
+
+<script lang="ts">
+import moment from 'moment';
+import ClassicCheckbox from '../../form/ClassicCheckbox.vue';
+import { DatePicker } from 'v-calendar';
+import { defineComponent } from 'vue';
+export default defineComponent({
+  components: {
+    DatePicker,
+    ClassicCheckbox,
+  },
+  props: {
+    isEmission: { default: false, type:  Boolean},
+    initToDate: { default: undefined, type:  String},
+    initFromDate: { default: undefined, type:  String},
+  },
+
+  emits: ['updateToDate', 'updateFromDate'],
+
+  data() {
+    return {
+      isFrom: false as boolean,
+      isTo: false as boolean,
+      fromDate: moment().subtract(10, 'days').toISOString() as string,
+      toDate: moment().toISOString() as string,
+    };
+  },
+
+  watch: {
+    isFrom(): void {
+      this.$emit('updateFromDate', this.isFrom ? moment(this.fromDate).toISOString(true) : undefined);
+    },
+    isTo(): void {
+      this.$emit('updateToDate', this.isTo ? moment(this.toDate).toISOString(true) : undefined);
+    },
+  },
+
+  created(){
+    if(this.initToDate){
+      this.toDate = this.initToDate;
+      this.isTo = true;
+    }
+    if(this.initFromDate){
+      this.fromDate = this.initFromDate;
+      this.isFrom = true;
+    }
+  },
+  methods: {
+    updateFromDate(): void {
+      if (
+        moment(this.fromDate)
+          .startOf('minute')
+          .toISOString() ===
+        moment()
+          .subtract(10, 'days')
+          .startOf('minute')
+          .toISOString()
+      )
+        return;
+      if (this.isFrom) {
+        this.$emit('updateFromDate', moment(this.fromDate).toISOString(true));
+      } else {
+        this.isFrom = true;
+      }
+    },
+    updateToDate(): void {
+      if (
+        moment(this.toDate)
+          .startOf('minute')
+          .toISOString() ===
+        moment()
+          .startOf('minute')
+          .toISOString()
+      )
+        return;
+      if (this.isTo) {
+        this.$emit('updateToDate', moment(this.toDate).toISOString(true));
+      } else {
+        this.isTo = true;
+      }
+    },
+  },
+})
+</script>

package/src/components/display/filter/RubriqueChoice.vue

@@ -25,7 +25,7 @@
         class="ms-2"
         :multiple="false"
         :rubriquage-id="rubriquageId"
-        :rubrique-selected="0 < rubriqueIdSelected? rubriqueIdSelected : undefined"
+        :rubrique-selected="0 !== rubriqueIdSelected? rubriqueIdSelected : undefined"
         :all-rubriques="getRubriques(rubriquageId)"
         :defaultanswer="$t('No rubric filter')"
         :reset="reset"
@@ -67,12 +67,23 @@ export default defineComponent({
       reset: false as boolean,
     };
   },
+  watch:{
+    rubriquageIdSelected(){
+      this.initRubriquage();
+    },
+    rubriqueIdSelected(){
+      this.initRubriquage();
+    }
+  },
 
   created(){
-    this.rubriquageId = this.rubriquageIdSelected;
+    this.initRubriquage();
   },
 
   methods: {
+    initRubriquage(){
+      this.rubriquageId = this.rubriquageIdSelected;
+    },
     deleteRubriquage(){
       this.$emit('deleteRubriqueChoice');
     },

package/src/components/display/filter/RubriqueFilter.vue

@@ -51,6 +51,8 @@ export default defineComponent({
   props: {
     organisationId: { default: undefined, type: String},
     resetRubriquage: { default: false, type:  Boolean},
+    modifyFilter:{ default: true, type:  Boolean},
+    initRubriqueFilter:{ default: undefined, type: Array as ()=> Array<RubriquageFilter>},
   },
   emits: ['updateRubriquageFilter'],
 
@@ -111,7 +113,9 @@ export default defineComponent({
       }else{
         this.$emit('updateRubriquageFilter', []);
       }
-      this.resetRubriqueFilter();
+      if(this.modifyFilter){
+        this.resetRubriqueFilter();
+      }
       this.$nextTick(() => {
         this.isInternChanged = false;
       });
@@ -123,7 +127,9 @@ export default defineComponent({
           return;
         }
         this.isInternChanged = true;
-        this.resetRubriqueFilter();
+        if(this.modifyFilter){
+          this.resetRubriqueFilter();
+        }
         if(this.isRubriquage){
           this.$emit('updateRubriquageFilter', this.arrayFilter);
         }
@@ -135,7 +141,7 @@ export default defineComponent({
     rubriqueFilter:{
       deep: true,
       async handler(){
-        if(this.isInternChanged){
+        if(this.isInternChanged || !this.modifyFilter){
           return;
         }
         this.isInternChanged = true;
@@ -161,7 +167,12 @@ export default defineComponent({
   },
 
   created() {
-    if(this.rubriqueFilter.length){
+    if(!this.modifyFilter){
+      if(this.initRubriqueFilter){
+        this.arrayFilter = Array.from(this.initRubriqueFilter);
+        this.isRubriquage = true;
+      }
+    }else if(this.rubriqueFilter.length){
       this.arrayFilter = Array.from(this.rubriqueFilter);
       this.isRubriquage = true;
     }
@@ -218,7 +229,7 @@ export default defineComponent({
       }
     },
     resetRubriqueFilter(): void{
-      if(0===this.rubriqueFilter.length || this.isInit){
+      if(0===this.rubriqueFilter.length || this.isInit || !this.modifyFilter){
         return;
       }
       const queries = this.$route.query;

package/src/components/display/filter/SearchOrder.vue

@@ -0,0 +1,41 @@
+<template>
+  <ClassicRadio
+    v-model:textInit="sort"
+    id-radio="sort-radio"
+    :options="isSearchBar? [{title:$t('Sort score'), value:'SCORE'},
+                            {title:$t('Sort last'), value:isEmission?'LAST_PODCAST_DESC':'DATE'},
+                            {title:$t('Sort name'), value:'NAME'}]:
+      [{title:$t('Sort last'), value:isEmission?'LAST_PODCAST_DESC':'DATE'},
+        {title:$t('Sort name'), value:'NAME'}]"
+  />
+</template>
+
+<script lang="ts">
+import ClassicRadio from '../../form/ClassicRadio.vue';
+import { defineComponent } from 'vue';
+export default defineComponent({
+  components: {
+    ClassicRadio,
+  },
+  props: {
+    isEmission: { default: false, type:  Boolean},
+    isSearchBar: { default: false, type:  Boolean},
+    sortCriteria: { default: 'DATE', type: String},
+  },
+
+  emits: ['updateSortCriteria'],
+  data() {
+    return {
+      sort: this.sortCriteria as string,
+    };
+  },
+  watch: {
+    sort(): void {
+      this.$emit('updateSortCriteria', this.sort);
+    },
+    sortCriteria(): void {
+      this.sort = this.sortCriteria;
+    },
+  },
+})
+</script>

package/src/components/display/playlist/PlaylistItem.vue

@@ -100,7 +100,7 @@ export default defineComponent({
         true == state.generalParameters.isAdmin;
     },
     activePlaylist(): boolean {
-      return 0 !== Object.keys(this.playlist.podcasts).length;
+      return 0 !== Object.keys(this.playlist.samplingViews??[]).length;
     },
   },
   mounted() {

package/src/components/display/playlist/PodcastList.vue

@@ -85,7 +85,7 @@ export default defineComponent({
       return this.notEmptyPlaylist ? this.$t('Podcasts in the playlist') : this.$t('No podcasts in the playlist');
     },
     notEmptyPlaylist(): boolean {
-      return 0 !== Object.keys(this.playlist.podcasts).length;
+      return 0 !== Object.keys(this.playlist.samplingViews??[]).length;
     },
     podcastsDisplay(): Array<Podcast>{
       if(this.isMobile){
@@ -122,11 +122,7 @@ export default defineComponent({
         this.podcasts.length = 0;
         this.loading = true;
         try {
-          const content = await octopusApi.fetchData<Array<Podcast>>(0, 'playlist/'+this.playlist.playlistId+'/content');
-          for (let index = 0, len = content.length; index < len; index++) {
-            content[index].order = this.playlist.podcasts[content[index].podcastId];
-          }
-          this.podcasts = content;
+          this.podcasts = await octopusApi.fetchData<Array<Podcast>>(0, 'playlist/'+this.playlist.playlistId+'/content');
           if (!this.editRight) {
             this.podcasts = this.podcasts.filter((p: Podcast|null) => {
               return (

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

@@ -38,7 +38,6 @@
       :pub-date="podcast.pubDate"
       :podcast-organisation-id="podcast.organisation.id"
       :podcast-organisation-name="podcast.organisation.name"
-      :podcast-order="podcast.order"
       :duration="podcast.duration"
       :animators="podcast.animators"
       @mouseenter="showDescription"

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

@@ -45,10 +45,6 @@
       >
         <div>{{ '© ' + podcastOrganisationName }}</div>
       </router-link>
-      <span
-        v-if="editRight && podcastOrder && podcastOrder > 1"
-        class="saooti-pin text-danger pe-2"
-      />
     </div>
   </div>
 </template>
@@ -79,7 +75,6 @@ export default defineComponent({
     pubDate: { default: "", type: String},
     podcastOrganisationId: { default: "", type: String},
     podcastOrganisationName: { default: "", type: String},
-    podcastOrder: { default: undefined, type: Number},
     duration: { default: 0, type: Number},
     animators: { default: undefined, type: Object as ()=> Array<Participant>},
   },

package/src/store/class/general/playlist.ts

@@ -1,13 +1,33 @@
 import { Organisation } from '../general/organisation';
 import { Person } from '../user/person';
+import { FetchParam } from './fetchParam';
+
 
 export interface Playlist {
   imageUrl?: string;
   description: string;
   organisation?: Organisation;
   playlistId: number;
-  podcasts: Array<number | undefined>;
+  podcasts?: Array<number | undefined>;
   score: number;
   title: string;
+  type: string;
+  samplingViews?: Array<PlaylistRule>;
   publisher?: Person;
 }
+
+export interface PlaylistRule {
+  maxSize: number,
+  podcastId?: number,
+  query?: FetchParam,
+  type?:string,
+  title?: string,
+}
+
+export function emptyPlaylistRule(): PlaylistRule{
+  return {
+    maxSize: 1,
+    query: {},
+    title: undefined,
+  }
+}