@saooti/octopus-sdk 1.0.0 → 1.1.1

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

@@ -1,406 +1,245 @@
 <template>
-  <div>
-    <div
-      class="d-flex justify-content-center mb-3"
+  <div class="d-flex flex-column justify-content-center align-items-center">
+    <button
+      class="d-flex justify-content-center align-items-center mb-3 text-secondary btn-transparent"
       @click="showFilters = !showFilters"
     >
-      <div class="text-secondary c-hand">{{ $t('Advanced filters') }}</div>
-      <div
-        class="text-secondary c-hand align-self-center large-font-size"
+      <div>{{ $t('Advanced filters') }}</div>
+      <div 
+        class="saooti-down mx-1"
         :class="{ 'arrow-transform': showFilters }"
-      >
-        <div class="saooti-arrow_down saooti-arrow_down-margin"></div>
-      </div>
-    </div>
-    <div class="advanced-search-container" v-show="showFilters">
+      />
+    </button>
+    <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-darker mb-2">
+          {{ $t('Filter') }}
+        </div>
         <MonetizableFilter
+          v-if="sdkParameters.isMonetizableFilter && !isEducation"
+          :is-emission="isEmission"
           @updateMonetization="updateMonetization"
-          :isEducation="isEducation"
-          :isEmission="isEmission"
-          v-if="isMonetizableFilter"
         />
-        <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>
+        <CategoryFilter @updateCategory="updateCategory" />
+        <RubriqueFilter 
+          :reset-rubriquage="resetRubriquage"
+          :organisation-id="organisationId"
+          @updateRubriquageFilter="updateRubriquageFilter"
+        />
         <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">
-              <input
-                type="checkbox"
-                class="custom-control-input"
-                id="search-from-checkbox"
-                v-model="isFrom"
-              />
-              <label class="custom-control-label" for="search-from-checkbox">{{
-                $t('From the :')
-              }}</label>
-            </div>
-            <Datetime
-              type="datetime"
-              moment-locale="fr"
-              v-model="fromDate"
-              class="theme-saooti pl-3 pr-3"
-              @input="updateFromDate"
-              input-format="D/MM/YYYY [à] HH[h]mm"
-              :i18n="lang"
+            <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">
-            <div class="checkbox-saooti 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">{{
-                $t('To the :')
-              }}</label>
-            </div>
-            <Datetime
-              type="datetime"
-              moment-locale="fr"
-              v-model="toDate"
-              class="theme-saooti pl-3"
-              @input="updateToDate"
-              input-format="D/MM/YYYY [à] HH[h]mm"
-              :i18n="lang"
+            <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>
         <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">
-            <input
-              type="checkbox"
-              class="custom-control-input"
-              id="search-future-checkbox"
-              v-model="isNotVisible"
-              :disabled="isCheckboxNotValidate && isNotValidate"
-            />
-            <label class="custom-control-label" for="search-future-checkbox">{{
-              textNotVisible
-            }}</label>
-          </div>
+          <ClassicCheckbox
+            v-model:textInit="isNotVisible"
+            class="flex-shrink-0"
+            id-checkbox="search-future-checkbox"
+            :label="textNotVisible"
+            :is-disabled="isCheckboxNotValidate && isNotValidate"
+          />
         </div>
-        <div class="d-flex flex-column mt-3" v-if="isCheckboxNotValidate">
-          <div class="checkbox-saooti flex-shrink">
-            <input
-              type="checkbox"
-              class="custom-control-input"
-              id="search-not-validate-checkbox"
-              v-model="isNotValidate"
-            />
-            <label
-              class="custom-control-label"
-              for="search-not-validate-checkbox"
-              >{{ textNotValidate }}</label
-            >
-          </div>
+        <div
+          v-if="isCheckboxNotValidate"
+          class="d-flex flex-column mt-3"
+        >
+          <ClassicCheckbox
+            v-model:textInit="isNotValidate"
+            class="flex-shrink-0"
+            id-checkbox="search-not-validate-checkbox"
+            :label="textNotValidate"
+          />
         </div>
       </div>
       <div class="d-flex flex-column">
-        <div class="primary-color mb-2 padding-left-custom-radio">
+        <div class="primary-darker mb-2">
           {{ $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>
+        <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'}]"
+        />
       </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 { orgaComputed } from '../../mixins/orgaComputed';
+import moment from 'moment';
+import CategoryFilter from './CategoryFilter.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,
-    RubriqueChooser,
-    Datetime,
-  },
-
-  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;
-    }
+    DatePicker,
+    CategoryFilter,
+    RubriqueFilter,
+    ClassicCheckbox,
+    ClassicRadio
   },
-
-  mounted() {
-    this.sort = this.sortCriteria;
+  mixins: [orgaComputed],
+  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,
-      lang: {
-        ok: this.$t('Validate'),
-        cancel: this.$t('Cancel'),
-      },
-      fromDate: moment()
-        .subtract(10, 'days')
-        .toISOString(),
-      toDate: moment().toISOString(),
-      isNotVisible: false,
-      isNotValidate: false,
-      showFilters: false,
-      reset: false,
-      sort: '',
+      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,
     };
   },
 
   computed: {
-    isMonetizableFilter() {
-      return state.podcastsPage.MonetizableFilter;
+    isPodcastmaker(): boolean {
+      return (state.generalParameters.podcastmaker as boolean);
     },
-    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;
-        }
+    sdkParameters(){
+      return {
+        isMonetizableFilter : (state.podcastsPage.MonetizableFilter as boolean),
+        isProduction : (state.generalParameters.isProduction as boolean),
+        isContribution : (state.generalParameters.isContribution as boolean)
       }
-      return found;
-    },
-    myOrganisationId() {
-      return state.generalParameters.organisationId;
-    },
-    authenticated():boolean {
-      return state.generalParameters.authenticated;
-    },
-    isProduction() {
-      return state.generalParameters.isProduction;
-    },
-    isContribution() {
-      return state.generalParameters.isContribution;
-    },
-    organisationRight() {
-      if (
-        (this.authenticated && this.myOrganisationId === this.organisationId) ||
-        state.generalParameters.isAdmin
-      )
-        return true;
-      return false;
     },
-    isPodcastmaker() {
-      return state.generalParameters.podcastmaker;
+    organisationRight(): boolean {
+      return (true===this.authenticated && this.myOrganisationId === this.organisationId) ||
+        true === state.generalParameters.isAdmin;
     },
-    filterOrga():any {
-      return this.$store.state.filter.organisationId;
+    organisation(): string|undefined {
+      return this.organisationId??this.filterOrga;
     },
-    organisation():any {
-      if (this.organisationId) return this.organisationId;
-      if (this.filterOrga) return this.filterOrga;
-      return undefined;
+    textNotVisible(): string {
+      return this.isEmission? this.$t('Consider podcasts no visible') : this.$t('See podcasts no visible');
     },
-    textNotVisible():string {
-      if (this.isEmission) return this.$t('Consider podcasts no visible');
-      return this.$t('See podcasts no visible');
-    },
-    isCheckboxNotValidate():boolean {
+    isCheckboxNotValidate(): boolean {
       return (
-        this.organisation &&
+        undefined!==this.organisation &&
         this.organisationRight &&
-        this.isContribution &&
+        this.sdkParameters.isContribution &&
         !this.isPodcastmaker &&
         !this.isEmission &&
         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 {
+      return this.sdkParameters.isProduction? this.$t('Display all podcasts to validate') : this.$t('Display my podcasts to validate');
+    },
+  },
+  watch: {
+    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() {
+    updateFromDate(): void {
       if (
         moment(this.fromDate)
           .startOf('minute')
@@ -411,14 +250,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 +266,56 @@ 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;
-        }
-      }
-    },
-  },
-  watch: {
-    organisation() {
-      if (this.organisation && this.organisationRight && !this.isEmission) {
-        this.isNotVisible = true;
-      } else {
-        this.isNotVisible = false;
-      }
-      this.fetchTopics();
+    updateCategory(value: number){
+      this.$emit('updateCategory', 0!==value ? value : undefined);
     },
-    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">
+.octopus-app{
+.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;
+    padding: 1rem;
+    .vdatetime, label {
+      padding: 0.5rem 0 !important;
+      width: 100%;
+      input {
+        width: 100%;
+      }
+    }
+  }
+  select {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    padding-right: 40px;
+  }
+}
+}
+</style>