@saooti/octopus-sdk 1.0.0 → 29.0.2

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

@@ -4,157 +4,144 @@
       class="d-flex justify-content-center mb-3"
       @click="showFilters = !showFilters"
     >
-      <div class="text-secondary c-hand">{{ $t('Advanced filters') }}</div>
+      <div class="text-secondary c-hand">
+        {{ $t('Advanced filters') }}
+      </div>
       <div
         class="text-secondary c-hand align-self-center large-font-size"
         :class="{ 'arrow-transform': showFilters }"
       >
-        <div class="saooti-arrow_down saooti-arrow_down-margin"></div>
+        <div class="saooti-arrow_down saooti-arrow_down-margin" />
       </div>
     </div>
-    <div class="advanced-search-container" v-show="showFilters">
+    <div
+      v-show="showFilters"
+      class="advanced-search-container"
+    >
       <div class="d-flex flex-column">
-        <div class="primary-color mb-2">{{ $t('Filter') }}</div>
+        <div class="primary-color mb-2">
+          {{ $t('Filter') }}
+        </div>
         <MonetizableFilter
-          @updateMonetization="updateMonetization"
-          :isEducation="isEducation"
-          :isEmission="isEmission"
           v-if="isMonetizableFilter"
+          :is-education="isEducation"
+          :is-emission="isEmission"
+          @updateMonetization="updateMonetization"
+        />
+        <CategoryFilter @updateCategory="updateCategory" />
+        
+        <RubriqueFilter 
+          :reset-rubriquage="resetRubriquage"
+          :organisation-id="organisationId"
+          @updateRubriquageFilter="updateRubriquageFilter"
         />
-        <div
-          class="d-flex mt-3 align-items-center"
-          v-if="organisationId && rubriquageDisplay"
-        >
-          <div class="checkbox-saooti flex-shrink">
-            <input
-              type="checkbox"
-              class="custom-control-input"
-              id="search-rubriquage-checkbox"
-              v-model="isRubriquage"
-            />
-            <label
-              class="custom-control-label"
-              for="search-rubriquage-checkbox"
-              >{{ $t('By topic') }}</label
-            >
-          </div>
-          <template v-if="isRubriquage">
-            <label class="wrap">
-              <select
-                class="basic-select ml-2 mb-0 border c-hand"
-                v-model="rubriquageId"
-                @change="onRubriquageSelected"
-              >
-                <option :value="-1" class="primary-dark">{{
-                  $t('Without topic')
-                }}</option>
-                <option
-                  v-for="rubriquage in rubriquageData"
-                  v-show="0 !== rubriquage.rubriques.length"
-                  :key="rubriquage.rubriquageId"
-                  :value="rubriquage.rubriquageId"
-                  >{{ rubriquage.title }}</option
-                >
-              </select>
-              <div
-                class="saooti-arrow_down octopus-arrow-down-2 classic-select"
-              ></div>
-            </label>
-            <template v-if="rubriquageId && -1 !== rubriquageId">
-              <div class="ml-3 flex-shrink">{{ $t('By rubric') }}</div>
-              <RubriqueChooser
-                class="ml-2"
-                :multiple="false"
-                :rubriquageId="rubriquageId"
-                :allRubriques="getRubriques(rubriquageId)"
-                :defaultanswer="$t('No rubric filter')"
-                :reset="reset"
-                :withoutRubrique="true"
-                width="auto"
-                @selected="onRubriqueSelected"
-              />
-            </template>
-          </template>
-        </div>
         <div class="d-flex mt-3 align-items-center flex-wrap">
-          <div class="mr-2" v-if="isEmission">
+          <div
+            v-if="isEmission"
+            class="me-2"
+          >
             {{ $t('Emission with episode published :') }}
           </div>
           <div class="d-flex align-items-center">
-            <div class="checkbox-saooti flex-shrink">
+            <div class="flex-shrink">
               <input
-                type="checkbox"
-                class="custom-control-input"
                 id="search-from-checkbox"
                 v-model="isFrom"
-              />
-              <label class="custom-control-label" for="search-from-checkbox">{{
+                type="checkbox"
+                class="form-check-input"
+              >
+              <label
+                class="form-check-label"
+                for="search-from-checkbox"
+              >{{
                 $t('From the :')
               }}</label>
             </div>
-            <Datetime
-              type="datetime"
-              moment-locale="fr"
+            <DatePicker
               v-model="fromDate"
-              class="theme-saooti pl-3 pr-3"
-              @input="updateFromDate"
-              input-format="D/MM/YYYY [à] HH[h]mm"
-              :i18n="lang"
-            />
+              class="ps-3 pe-3"
+              mode="dateTime"
+              color="green"
+              is24hr
+              @input="updateFromDate()"
+            >
+              <template #default="{ inputValue, inputEvents }">
+                <input
+                  class="px-2 py-1 border rounded focus:outline-none focus:border-blue-300"
+                  :value="inputValue"
+                  v-on="inputEvents"
+                >
+              </template>
+            </DatePicker>
           </div>
           <div class="d-flex align-items-center">
-            <div class="checkbox-saooti flex-shrink">
+            <div class="flex-shrink">
               <input
-                type="checkbox"
-                class="custom-control-input"
                 id="search-to-checkbox"
                 v-model="isTo"
-              />
-              <label class="custom-control-label" for="search-to-checkbox">{{
+                type="checkbox"
+                class="form-check-input"
+              >
+              <label
+                class="form-check-label"
+                for="search-to-checkbox"
+              >{{
                 $t('To the :')
               }}</label>
             </div>
-            <Datetime
-              type="datetime"
-              moment-locale="fr"
+            <DatePicker
               v-model="toDate"
-              class="theme-saooti pl-3"
-              @input="updateToDate"
-              input-format="D/MM/YYYY [à] HH[h]mm"
-              :i18n="lang"
-            />
+              class="ps-3"
+              mode="dateTime"
+              color="green"
+              is24hr
+              @input="updateToDate()"
+            >
+              <template #default="{ inputValue, inputEvents }">
+                <input
+                  class="px-2 py-1 border rounded focus:outline-none focus:border-blue-300"
+                  :value="inputValue"
+                  v-on="inputEvents"
+                >
+              </template>
+            </DatePicker>
           </div>
         </div>
         <div
-          class="d-flex flex-column mt-3"
           v-if="organisation && organisationRight && !isPodcastmaker"
+          class="d-flex flex-column mt-3"
         >
-          <div class="checkbox-saooti flex-shrink">
+          <div class="flex-shrink">
             <input
-              type="checkbox"
-              class="custom-control-input"
               id="search-future-checkbox"
               v-model="isNotVisible"
+              type="checkbox"
+              class="form-check-input"
               :disabled="isCheckboxNotValidate && isNotValidate"
-            />
-            <label class="custom-control-label" for="search-future-checkbox">{{
+            >
+            <label
+              class="form-check-label"
+              for="search-future-checkbox"
+            >{{
               textNotVisible
             }}</label>
           </div>
         </div>
-        <div class="d-flex flex-column mt-3" v-if="isCheckboxNotValidate">
-          <div class="checkbox-saooti flex-shrink">
+        <div
+          v-if="isCheckboxNotValidate"
+          class="d-flex flex-column mt-3"
+        >
+          <div class="flex-shrink">
             <input
-              type="checkbox"
-              class="custom-control-input"
               id="search-not-validate-checkbox"
               v-model="isNotValidate"
-            />
+              type="checkbox"
+              class="form-check-input"
+            >
             <label
-              class="custom-control-label"
+              class="form-check-label"
               for="search-not-validate-checkbox"
-              >{{ textNotValidate }}</label
-            >
+            >{{ textNotValidate }}</label>
           </div>
         </div>
       </div>
@@ -162,205 +149,124 @@
         <div class="primary-color mb-2 padding-left-custom-radio">
           {{ $t('Sort') }}
         </div>
-        <b-form-group>
-          <b-form-radio-group v-model="sort" class="d-flex flex-column">
-            <b-form-radio value="SCORE" v-if="isSearchBar">{{
-              $t('Sort score')
-            }}</b-form-radio>
-            <b-form-radio value="LAST_PODCAST_DESC" v-if="isEmission">{{
-              $t('Sort last')
-            }}</b-form-radio>
-            <b-form-radio value="DATE" v-else>{{
-              $t('Sort last')
-            }}</b-form-radio>
-            <b-form-radio value="NAME">{{ $t('Sort name') }}</b-form-radio>
-          </b-form-radio-group>
-        </b-form-group>
+        <div
+          v-if="isSearchBar"
+          class="form-check"
+        >
+          <input
+            id="radio_score"
+            v-model="sort"
+            class="form-check-input"
+            type="radio"
+            name="sortRadio"
+            value="SCORE"
+          >
+          <label
+            class="form-check-label"
+            for="radio_score"
+          >{{ $t('Sort score') }}</label>
+        </div>
+        <div class="form-check">
+          <input
+            id="radio_podcast"
+            v-model="sort"
+            class="form-check-input"
+            type="radio"
+            name="sortRadio"
+            :value="isEmission?'LAST_PODCAST_DESC':'DATE'"
+          >
+          <label
+            class="form-check-label"
+            for="radio_podcast"
+          >{{ $t('Sort last') }}</label>
+        </div>
+        <div class="form-check">
+          <input
+            id="radio_name"
+            v-model="sort"
+            class="form-check-input"
+            type="radio"
+            name="sortRadio"
+            value="NAME"
+          >
+          <label
+            class="form-check-label"
+            for="radio_name"
+          >{{ $t('Sort name') }}</label>
+        </div>
       </div>
     </div>
   </div>
 </template>
-<style lang="scss">
-/* input {
-    border: 0.1rem solid #dee2e6;
-    border-radius: 0.3rem;
-    padding: 0.5rem;
-} */
-.saooti-arrow_down-margin {
-  margin: 3px 0 0;
-}
-.padding-left-custom-radio {
-  padding-left: 1.5rem;
-  @media (max-width: 720px) {
-    padding-left: 0;
-    margin-top: 1rem;
-  }
-}
-.large-font-size {
-  font-size: 1.3rem;
-}
-.arrow-transform {
-  transform: rotate(180deg);
-}
-.advanced-search-container {
-  background: #fff;
-  border-radius: 0.8rem;
-  display: flex;
-  width: 100%;
-  padding: 1rem 2rem;
-  margin-bottom: 1rem;
-  justify-content: space-around;
-  @media (max-width: 720px) {
-    flex-wrap: wrap;
-    justify-content: flex-start;
-  }
-  .checkbox-saooti .custom-control-label::after {
-    top: 0.22rem;
-  }
-  .checkbox-saooti .custom-control-label::before {
-    top: 0.22rem;
-  }
-
-  @media (max-width: 450px) {
-    flex-direction: column;
-    .vdatetime {
-      padding: 0.5em 0 !important;
-      width: 100%;
-      input {
-        width: 100%;
-      }
-    }
-
-    .checkbox-saooti {
-      margin-left: 0rem !important;
-    }
-    padding: 1rem;
-    .basic-select {
-      width: 100%;
-      margin: 0 !important;
-    }
-
-    label.wrap {
-      width: 100%;
-      margin: 0.5em 0;
-      position: relative;
-    }
-  }
 
-  @media (min-width: 401px) {
-    label.wrap {
-      position: relative;
-      margin: 0;
-    }
-  }
-  input:not([id*='rubriqueChooser']) {
-    border: 1px solid #ddd;
-    border-radius: 5px;
-    padding: 0.2em 0.5em;
-  }
-  select {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-  }
-}
-</style>
 <script lang="ts">
-// @ is an alias to /src
-
-import MonetizableFilter from './MonetizableFilter.vue';
-import RubriqueChooser from '../rubriques/RubriqueChooser.vue';
-import Datetime from 'vue-datetime';
 import { state } from '../../../store/paramStore';
-const octopusApi = require('@saooti/octopus-api');
 const moment = require('moment');
-
-import { defineComponent } from 'vue';
+import CategoryFilter from './CategoryFilter.vue';
+import RubriqueFilter from './RubriqueFilter.vue';
+import { RubriquageFilter } from '@/store/class/rubriquageFilter';
+import { DatePicker } from 'v-calendar';
+import { defineComponent, defineAsyncComponent } from 'vue';
+const MonetizableFilter = defineAsyncComponent(() => import('./MonetizableFilter.vue'));
 export default defineComponent({
   components: {
     MonetizableFilter,
-    RubriqueChooser,
-    Datetime,
+    DatePicker,
+    CategoryFilter,
+    RubriqueFilter
   },
-
-  props: [
-    'organisationId',
-    'isEmission',
-    'resetRubriquage',
-    'isSearchBar',
-    'sortCriteria',
-    'isEducation',
-    'includeHidden',
-  ],
-  emits: ['updateFromDate', 'updateToDate', 'updateRubrique', 'updateRubriquage', 'updateMonetization', 'updateSortCriteria', 'includeHidden', 'notValid'],
-
-  created() {
-    this.fetchTopics();
-    if (!this.isEmission) {
-      this.isNotVisible = this.includeHidden;
-    }
-  },
-
-  mounted() {
-    this.sort = this.sortCriteria;
+  props: {
+    organisationId: { default: undefined, type: String},
+    isEmission: { default: false, type:  Boolean},
+    resetRubriquage: { default: false, type:  Boolean},
+    isSearchBar: { default: false, type:  Boolean},
+    isEducation: { default: false, type:  Boolean},
+    includeHidden: { default: false, type:  Boolean},
+    sortCriteria: { default: 'DATE', type: String},
   },
 
+  emits: ['updateToDate', 
+          'updateFromDate',
+          'updateMonetization',
+          'updateCategory',
+          'updateSortCriteria',
+          'includeHidden',
+          'notValid',
+          'updateRubriquageFilter'],
   data() {
     return {
-      isRubriquage: false,
-      rubriquageId: undefined as any,
-      rubriqueId: undefined as any,
-      rubriquageData: [] as any,
-      isFrom: false,
-      isTo: false,
+      isFrom: false as boolean,
+      isTo: false as boolean,
       lang: {
-        ok: this.$t('Validate'),
-        cancel: this.$t('Cancel'),
+        ok: this.$t('Validate') as string,
+        cancel: this.$t('Cancel') as string,
       },
-      fromDate: moment()
-        .subtract(10, 'days')
-        .toISOString(),
-      toDate: moment().toISOString(),
-      isNotVisible: false,
-      isNotValidate: false,
-      showFilters: false,
-      reset: false,
-      sort: '',
+      fromDate: moment().subtract(10, 'days').toISOString() as string,
+      toDate: moment().toISOString() as string,
+      isNotVisible: false as boolean,
+      isNotValidate: false as boolean,
+      showFilters: false as boolean,
+      sort: '' as string,
     };
   },
 
   computed: {
-    isMonetizableFilter() {
+    isMonetizableFilter(): boolean {
       return state.podcastsPage.MonetizableFilter;
     },
-    rubriquageDisplay() {
-      if (0 === this.rubriquageData.length) return false;
-      let found = false;
-      for (
-        let index = 0, len = this.rubriquageData.length;
-        index < len;
-        index++
-      ) {
-        if (0 !== this.rubriquageData[index].rubriques.length) {
-          found = true;
-          break;
-        }
-      }
-      return found;
-    },
-    myOrganisationId() {
+    myOrganisationId(): string {
       return state.generalParameters.organisationId;
     },
-    authenticated():boolean {
+    authenticated(): boolean {
       return state.generalParameters.authenticated;
     },
-    isProduction() {
+    isProduction(): boolean {
       return state.generalParameters.isProduction;
     },
-    isContribution() {
+    isContribution(): boolean {
       return state.generalParameters.isContribution;
     },
-    organisationRight() {
+    organisationRight(): boolean {
       if (
         (this.authenticated && this.myOrganisationId === this.organisationId) ||
         state.generalParameters.isAdmin
@@ -368,24 +274,24 @@ export default defineComponent({
         return true;
       return false;
     },
-    isPodcastmaker() {
+    isPodcastmaker(): boolean {
       return state.generalParameters.podcastmaker;
     },
-    filterOrga():any {
+    filterOrga(): string {
       return this.$store.state.filter.organisationId;
     },
-    organisation():any {
+    organisation(): string|undefined {
       if (this.organisationId) return this.organisationId;
       if (this.filterOrga) return this.filterOrga;
       return undefined;
     },
-    textNotVisible():string {
-      if (this.isEmission) return this.$t('Consider podcasts no visible');
-      return this.$t('See podcasts no visible');
+    textNotVisible(): string {
+      if (this.isEmission) return this.$t('Consider podcasts no visible').toString();
+      return this.$t('See podcasts no visible').toString();
     },
-    isCheckboxNotValidate():boolean {
+    isCheckboxNotValidate(): boolean {
       return (
-        this.organisation &&
+        undefined!==this.organisation &&
         this.organisationRight &&
         this.isContribution &&
         !this.isPodcastmaker &&
@@ -393,14 +299,58 @@ export default defineComponent({
         this.isNotVisible
       );
     },
-    textNotValidate():string {
-      if (this.isProduction) return this.$t('Display all podcasts to validate');
-      return this.$t('Display my podcasts to validate');
+    textNotValidate(): string {
+      if (this.isProduction) return this.$t('Display all podcasts to validate').toString();
+      return this.$t('Display my podcasts to validate').toString();
+    },
+  },
+  watch: {
+    organisation(): void {
+      if (this.organisation && this.organisationRight && !this.isEmission) {
+        this.isNotVisible = true;
+      } else {
+        this.isNotVisible = false;
+      }
+    },
+    isFrom(): void {
+      if (this.isFrom) {
+        this.$emit('updateFromDate', moment(this.fromDate).toISOString(true));
+      } else {
+        this.$emit('updateFromDate', undefined);
+      }
+    },
+    isTo(): void {
+      if (this.isTo) {
+        this.$emit('updateToDate', moment(this.toDate).toISOString(true));
+      } else {
+        this.$emit('updateToDate', 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;
     },
   },
 
+  created() {
+    if (!this.isEmission) {
+      this.isNotVisible = this.includeHidden;
+    }
+  },
+
+  mounted() {
+    this.sort = this.sortCriteria;
+  },
   methods: {
-    updateFromDate() {
+    updateFromDate(): void {
       if (
         moment(this.fromDate)
           .startOf('minute')
@@ -411,14 +361,13 @@ export default defineComponent({
           .toISOString()
       )
         return;
-
       if (this.isFrom) {
-        this.$emit('updateFromDate', this.fromDate);
+        this.$emit('updateFromDate', moment(this.fromDate).toISOString(true));
       } else {
         this.isFrom = true;
       }
     },
-    updateToDate() {
+    updateToDate(): void {
       if (
         moment(this.toDate)
           .startOf('minute')
@@ -428,102 +377,87 @@ export default defineComponent({
           .toISOString()
       )
         return;
-
       if (this.isTo) {
-        this.$emit('updateToDate', this.toDate);
+        this.$emit('updateToDate', moment(this.toDate).toISOString(true));
       } else {
         this.isTo = true;
       }
     },
-    getRubriques(rubriquageId: any) {
-      let topicIndex = this.rubriquageData.findIndex(
-        (        element: any) => element.rubriquageId === rubriquageId
-      );
-      return this.rubriquageData[topicIndex].rubriques;
-    },
-    onRubriqueSelected(rubrique: any) {
-      if (rubrique.rubriqueId === this.rubriqueId) return;
-      this.rubriqueId = rubrique.rubriqueId;
-      if (0 === this.rubriqueId) {
-        this.$emit('updateRubrique', undefined);
-      } else {
-        this.$emit('updateRubrique', rubrique.rubriqueId);
-      }
-    },
-    onRubriquageSelected() {
-      this.reset = !this.reset;
-      this.rubriqueId = 0;
-      if (this.isRubriquage) {
-        this.$emit('updateRubriquage', this.rubriquageId);
-      }
-    },
-    updateMonetization(value: any) {
+    updateMonetization(value: string): void {
       this.$emit('updateMonetization', value);
     },
-    async fetchTopics() {
-      if (!this.organisation) return;
-      const data = await octopusApi.fetchTopics(this.organisation);
-      this.rubriquageData = data;
-      if (0 === data.length) return;
-
-      for (
-        let index = 0, len = this.rubriquageData.length;
-        index < len;
-        index++
-      ) {
-        if (0 !== this.rubriquageData[index].rubriques.length) {
-          this.rubriquageId = this.rubriquageData[index].rubriquageId;
-          break;
-        }
+    updateCategory(value: number){
+      if(0!==value){
+        this.$emit('updateCategory', value);
+      }else{
+        this.$emit('updateCategory', undefined);
       }
     },
-  },
-  watch: {
-    organisation() {
-      if (this.organisation && this.organisationRight && !this.isEmission) {
-        this.isNotVisible = true;
-      } else {
-        this.isNotVisible = false;
-      }
-      this.fetchTopics();
-    },
-    isFrom(newVal) {
-      if (newVal) {
-        this.$emit('updateFromDate', this.fromDate);
-      } else {
-        this.$emit('updateFromDate', undefined);
-      }
-    },
-    isTo(newVal) {
-      if (newVal) {
-        this.$emit('updateToDate', this.toDate);
-      } else {
-        this.$emit('updateToDate', undefined);
-      }
-    },
-    isRubriquage(newVal) {
-      if (newVal) {
-        this.$emit('updateRubriquage', this.rubriquageId);
-      } else {
-        this.$emit('updateRubriquage', undefined);
-        this.$emit('updateRubrique', undefined);
-      }
-    },
-    sort(newVal) {
-      this.$emit('updateSortCriteria', newVal);
-    },
-    resetRubriquage() {
-      this.isRubriquage = false;
-    },
-    isNotVisible(newVal) {
-      this.$emit('includeHidden', newVal);
-    },
-    isNotValidate(newVal) {
-      this.$emit('notValid', newVal);
-    },
-    sortCriteria() {
-      this.sort = this.sortCriteria;
+    updateRubriquageFilter(value: Array<RubriquageFilter>){
+      this.$emit('updateRubriquageFilter', value);
     },
   },
-});
+})
 </script>
+
+<style lang="scss">
+
+.padding-left-custom-radio {
+  padding-left: 1.5rem;
+  @media (max-width: 720px) {
+    padding-left: 0;
+    margin-top: 1rem;
+  }
+}
+.large-font-size {
+  font-size: 1.3rem;
+}
+
+.advanced-search-container {
+  background: #fff;
+  border-radius: 0.8rem;
+  display: flex;
+  width: 100%;
+  padding: 1rem 2rem;
+  margin-bottom: 1rem;
+  justify-content: space-around;
+  @media (max-width: 720px) {
+    flex-wrap: wrap;
+    justify-content: flex-start;
+  }
+
+  @media (max-width: 450px) {
+    flex-direction: column;
+    .vdatetime {
+      padding: 0.5em 0 !important;
+      width: 100%;
+      input {
+        width: 100%;
+      }
+    }
+    padding: 1rem;
+    .basic-select {
+      width: 100%;
+      margin: 0 !important;
+    }
+
+    label.wrap {
+      width: 100%;
+      margin: 0.5em 0;
+      position: relative;
+    }
+  }
+
+  @media (min-width: 401px) {
+    label.wrap {
+      position: relative;
+      margin: 0;
+    }
+  }
+  select {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+  }
+}
+</style>