@saooti/octopus-sdk 32.0.16 → 32.0.17

package/README.md

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

package/index.ts

@@ -27,31 +27,26 @@ 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 CategorySearchFilter from "./src/components/display/filter/CategorySearchFilter.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 +117,12 @@ const components = {
     ClassicSelect,
     Error403Page,
     Paginate,
-    ListPaginate
+    ListPaginate,
+    CategorySearchFilter,
+    RubriqueFilter,
+    DateFilter,
+    SearchOrder
 }
-
 export default components;
 
 export {
@@ -180,5 +178,9 @@ export {
     ClassicSelect,
     Error403Page,
     Paginate,
-    ListPaginate
+    ListPaginate,
+    CategorySearchFilter,
+    RubriqueFilter,
+    DateFilter,
+    SearchOrder
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "32.0.16",
+  "version": "32.0.17",
   "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,130 @@
+<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},
+  },
+
+  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);
+    },
+  },
+  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/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>