@saooti/octopus-sdk 33.2.7 → 33.2.8

package/index.ts

@@ -61,6 +61,7 @@ export const getClassicCheckbox = () => import("./src/components/form/ClassicChe
 export const getClassicRadio = () => import("./src/components/form/ClassicRadio.vue");
 export const getClassicLoading = () => import("./src/components/form/ClassicLoading.vue");
 export const getClassicSelect = () => import("./src/components/form/ClassicSelect.vue");
+export const getClassicDatePicker = () => import("./src/components/form/ClassicDatePicker.vue");
 export const getPaginate = () => import("./src/components/display/list/Paginate.vue");
 export const getListPaginate = () => import("./src/components/display/list/ListPaginate.vue");
 

package/package.json

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

package/src/App.vue

@@ -16,12 +16,14 @@
     <CategoryFilter />
     <router-view />
     <Footer />
+    <Player />
   </div>
 </template>
 
 <script lang="ts">
 import TopBar from '@/components/misc/TopBar.vue';
 import Footer from '@/components/misc/Footer.vue';
+import Player from '@/components/misc/player/Player.vue';
 import CategoryFilter from '@/components/display/categories/CategoryFilter.vue';
 import { state } from './store/paramStore';
 import { Rubriquage } from './store/class/rubrique/rubriquage';
@@ -39,6 +41,7 @@ export default defineComponent({
     LeftMenu,
     CategoryFilter,
     Footer,
+    Player
   },
 
   mixins: [initSDK],

package/src/assets/form.scss

@@ -27,18 +27,4 @@
 		position: relative;
 		width: 100%;
 	}
-	.vc-select select{
-		padding: 0 !important;
-	}
-	.vc-date{
-		.vc-month,.vc-day,.vc-year{
-			color: $octopus-primary-color !important;
-		}
-	}
-	.vc-highlight{
-		background-color: $octopus-primary-color !important;
-	}
-	.vc-select select:focus{
-		border-color: $octopus-primary-color !important;
-	}
 }

package/src/assets/octopus-library.scss

@@ -17,5 +17,4 @@ $breadcrumb-border-radius:          2rem !default;
 @import './form.scss';
 @import './multiselect.scss';
 @import './transition.scss';
-@import './share.scss';
-@import 'v-calendar/dist/style.css';
+@import './share.scss';

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

@@ -13,22 +13,12 @@
         id-checkbox="search-from-checkbox"
         :label="$t('From the :')"
       />
-      <DatePicker
-        v-model="fromDate"
+      <ClassicDatePicker
         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>
+        :date="fromDate"
+        templateClass="px-2 py-1 border rounded focus:border-blue-300"
+        @updateDate="fromDate=$event;updateFromDate"
+      />
     </div>
     <div class="d-flex align-items-center">
       <ClassicCheckbox
@@ -37,22 +27,12 @@
         id-checkbox="search-to-checkbox"
         :label="$t('To the :')"
       />
-      <DatePicker
-        v-model="toDate"
+      <ClassicDatePicker
         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>
+        :date="toDate"
+        templateClass="px-2 py-1 border rounded focus:border-blue-300"
+        @updateDate="toDate=$event;updateToDate"
+      />
     </div>
   </div>
 </template>
@@ -60,17 +40,17 @@
 <script lang="ts">
 import moment from 'moment';
 import ClassicCheckbox from '../../form/ClassicCheckbox.vue';
-import { DatePicker } from 'v-calendar';
+import ClassicDatePicker from '../../form/ClassicDatePicker.vue';
 import { defineComponent } from 'vue';
 export default defineComponent({
   components: {
-    DatePicker,
+    ClassicDatePicker,
     ClassicCheckbox,
   },
   props: {
     isEmission: { default: false, type:  Boolean},
-    initToDate: { default: undefined, type:  String},
-    initFromDate: { default: undefined, type:  String},
+    initToDate: { default: undefined, type:  Date},
+    initFromDate: { default: undefined, type:  Date},
   },
 
   emits: ['updateToDate', 'updateFromDate'],
@@ -79,8 +59,8 @@ export default defineComponent({
     return {
       isFrom: false as boolean,
       isTo: false as boolean,
-      fromDate: moment().subtract(10, 'days').toISOString(),
-      toDate: moment().toISOString(),
+      fromDate: moment().subtract(10, 'days').toDate(),
+      toDate: moment().toDate(),
     };
   },
 
@@ -139,4 +119,4 @@ export default defineComponent({
     },
   },
 })
-</script>
+</script>

package/src/components/form/ClassicCheckbox.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="d-flex octopus-form-item">
+  <div class="d-flex align-items-center octopus-form-item">
     <div
       :class="isSwitch?'octopus-form-switch me-2':''"
     >

package/src/components/form/ClassicDatePicker.vue

@@ -0,0 +1,81 @@
+<template>
+  <DatePicker
+    ref="datePicker"
+    :modelValue="undefined!==range ? range : date"
+    :mode="mode"
+    color="green"
+    is24hr
+    :is-range="undefined!==range"
+    :max-date="isMaxDate ? now : undefined"
+    :min-date="isMinDate ? now : undefined"
+    :columns="columnNumber"
+    :is-inline="columnNumber>1"
+    :update-on-input="conditionEdit"
+    :masks="isMask ? masks : undefined"
+    @update:modelValue="$emit('updateDate', $event)"
+  >
+    <template v-if="templateClass" #default="{ inputValue, inputEvents }">
+      <input
+        :class="templateClass"
+        :value="inputValue"
+        v-on="inputEvents"
+      >
+    </template>
+  </DatePicker>
+</template>
+
+<script lang="ts">
+import moment from 'moment';
+import { DatePicker } from 'v-calendar';
+import { defineComponent } from 'vue';
+export default defineComponent({
+  components: {
+    DatePicker,
+  },
+  props: {
+    date: { default: undefined, type: Date},
+    range: {default: undefined, type: Object as ()=>{ start: Date; end: Date }},
+    isMaxDate:{ default: false, type:  Boolean},
+    isMinDate:{ default: false, type:  Boolean},
+    columnNumber:{default:1, type: Number},
+    templateClass:{default: undefined,  type: String},
+    mode:{default:"dateTime", type: String},
+    isMask:{default: false,  type: Boolean},
+    conditionEdit:{default: true,  type: Boolean},
+  },
+
+  emits: ['updateDate', 'update:date'],
+  data() {
+    return {
+      masks: {
+        input: 'YYYY-MM-DD',
+      },
+    };
+  },
+  computed: {
+    now(): Date {
+      return moment().add(1, 'days').toDate();
+    },
+  }
+})
+</script>
+<style lang="scss">
+@import '@scss/_variables.scss';
+@import 'v-calendar/dist/style.css';
+.octopus-app{
+	.vc-select select{
+		padding: 0 !important;
+	}
+	.vc-date{
+		.vc-month,.vc-day,.vc-year{
+			color: $octopus-primary-color !important;
+		}
+	}
+	.vc-highlight{
+		background-color: $octopus-primary-color !important;
+	}
+	.vc-select select:focus{
+		border-color: $octopus-primary-color !important;
+	}
+}
+</style>

package/src/components/misc/Footer.vue

@@ -1,9 +1,8 @@
 <template>
   <div
-    v-if="displayFooter"
     id="footer"
     ref="footer"
-    class="d-flex align-items-center justify-content-between border-top"
+    class="d-flex align-items-center justify-content-between border-top mt-auto"
   >
     <div class="d-flex align-items-center px-1" v-if="!isPodcastmaker">
       <div class="text-dark me-2">
@@ -53,13 +52,11 @@
       >
     </a>
   </div>
-  <Player @hide="showBlackBorder" />
 </template>
 
 <script lang="ts">
 import cookies from '../mixins/cookies';
 import ClassicSelect from '../form/ClassicSelect.vue';
-import Player from './player/Player.vue';
 import { state } from '../../store/paramStore';
 import {loadLocaleMessages} from '@/i18n';
 import octopusApi from '@saooti/octopus-api';
@@ -69,14 +66,10 @@ import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'Footer',
   components: {
-    Player,
     ClassicSelect
   },
 
   mixins:[cookies],
-  props: {
-    displayFooter: { default: true, type: Boolean},
-  },
   data() {
     return {
       language: this.$i18n.locale,
@@ -116,15 +109,6 @@ export default defineComponent({
                    iabId: this.$store.state.filter.iab?.id,
                    rubriquesId: this.rubriqueQueryParam}
     },
-    showBlackBorder(hide: boolean): void {
-      const footerElement = (this.$refs.footer as HTMLElement);
-      if(!footerElement){return;}
-      if (hide) {
-        footerElement.classList.remove('border-round');
-      } else {
-        footerElement.className += ' border-round';
-      }
-    },
     changeLanguage(): void{
       this.setCookie('octopus-language', this.language);
       loadLocaleMessages(this.$i18n, this.language, this.$store.state.general.isEducation);
@@ -159,16 +143,6 @@ export default defineComponent({
     a{
       color: #666;
     }
-    .border-round {
-      border-radius: 0 0 2rem 2rem;
-    }
-    /** PHONES*/
-    @media (max-width: 960px) {
-      .align-items-center,
-      .align-items-end {
-        align-items: flex-start !important;
-      }
-    }
   }
 }
 </style>