@saooti/octopus-sdk 1.0.0 → 1.1.1

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

@@ -0,0 +1,232 @@
+<template>
+  <div
+    v-if="organisationId && rubriquageData"
+    class="d-flex mt-3 align-items-center"
+  >
+    <ClassicCheckbox
+      v-model:textInit="isRubriquage"
+      class="flex-shrink-0"
+      id-checkbox="search-rubriquage-checkbox"
+      :label="$t('By topic')"
+    />
+    <div
+      v-if="isRubriquage"
+      class="d-flex flex-column mb-2"
+    >
+      <RubriqueChoice 
+        v-for="(filter, index) in arrayFilter"
+        :key="index"
+        :index="index"
+        class="mb-2"
+        :rubriquage-display="getRubriquage(index)"
+        :rubrique-id-selected="filter.rubriqueId"
+        :rubriquage-id-selected="filter.rubriquageId"
+        @updateRubrique="updateRubrique"
+        @updateRubriquage="updateRubriquage"
+        @deleteRubriqueChoice="deleteRubriqueChoice(index)"
+      />
+      <button
+        v-if="availableRubriquage.length"
+        class="btn mt-2"
+        @click="addFilter"
+      >
+        {{ $t('Add a sort criterion by topic') }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import octopusApi from '@saooti/octopus-api';
+import ClassicCheckbox from '../../form/ClassicCheckbox.vue';
+import { Rubriquage } from '@/store/class/rubrique/rubriquage';
+import { RubriquageFilter } from '@/store/class/rubrique/rubriquageFilter';
+import { defineComponent, defineAsyncComponent } from 'vue';
+const RubriqueChoice = defineAsyncComponent(() => import('./RubriqueChoice.vue'));
+export default defineComponent({
+  components: {
+    RubriqueChoice,
+    ClassicCheckbox
+  },
+  props: {
+    organisationId: { default: undefined, type: String},
+    resetRubriquage: { default: false, type:  Boolean},
+  },
+  emits: ['updateRubriquageFilter'],
+
+  data() {
+    return {
+      isRubriquage: false as boolean,
+      rubriquageId: [] as Array<number>,
+      rubriqueId: [] as Array<number>,
+      arrayFilter: [] as Array<RubriquageFilter>,
+      rubriquageData: [] as Array<Rubriquage>,
+      saveOrganisation: "" as string,
+      isInit: true as boolean,
+      isInternChanged: false as boolean,
+    };
+  },
+
+  computed: {
+    filterOrga(): string {
+      return this.$store.state.filter.organisationId;
+    },
+    organisation(): string|undefined {
+      return this.organisationId ?? this.filterOrga;
+    },
+    rubriqueFilter(): Array<RubriquageFilter>{
+      return this.$store.state.filter.rubriqueFilter;
+    },
+    availableRubriquage(): Array<Rubriquage>{
+      if(this.arrayFilter.length){
+        const rubriquageIdToNotShow = this.arrayFilter.map(a => a.rubriquageId);
+        return this.rubriquageData.filter((element)=>{
+          if(element.rubriquageId){
+            return !rubriquageIdToNotShow.includes(element.rubriquageId);
+          }
+        });
+      }
+      return this.rubriquageData;
+    }
+  },
+  watch: {
+    organisation(): void {
+      if(this.isRubriquage){
+        this.fetchTopics(true);
+      }
+    },
+    isRubriquage(): void {
+      if(this.isInternChanged ||this.isInit){
+        return;
+      }
+      this.isInternChanged = true;
+      if(0===this.arrayFilter.length && this.availableRubriquage[0].rubriquageId){
+        this.arrayFilter.push({rubriquageId: this.availableRubriquage[0].rubriquageId, rubriqueId: 0, nameRubriquage:this.rubriquageData[0].title, nameRubrique:""});
+      }
+      if(this.isRubriquage){
+        if(this.saveOrganisation !== this.organisation){
+          this.fetchTopics(true);
+        }
+        this.$emit('updateRubriquageFilter', this.arrayFilter);
+      }else{
+        this.$emit('updateRubriquageFilter', []);
+      }
+      this.resetRubriqueFilter();
+      this.$nextTick(() => {
+        this.isInternChanged = false;
+      });
+    },
+    arrayFilter:{
+      deep: true,
+      handler(){
+        if(this.isInternChanged ||this.isInit){
+          return;
+        }
+        this.isInternChanged = true;
+        this.resetRubriqueFilter();
+        if(this.isRubriquage){
+          this.$emit('updateRubriquageFilter', this.arrayFilter);
+        }
+        this.$nextTick(() => {
+          this.isInternChanged = false;
+        });
+      }
+    },
+    rubriqueFilter:{
+      deep: true,
+      async handler(){
+        if(this.isInternChanged){
+          return;
+        }
+        this.isInternChanged = true;
+        if(this.saveOrganisation !== this.filterOrga){
+          await this.fetchTopics(false);
+        }
+        if(this.rubriqueFilter.length){
+          this.arrayFilter = Array.from(this.rubriqueFilter);
+          this.isRubriquage = true;
+        }else if(this.rubriquageData[0].rubriquageId){
+          this.arrayFilter = [{rubriquageId: this.rubriquageData[0].rubriquageId, rubriqueId: 0, nameRubriquage:this.rubriquageData[0].title, nameRubrique:""}];
+          this.isRubriquage = false;
+        }
+        this.$emit('updateRubriquageFilter',this.isRubriquage? this.arrayFilter : []);
+        this.$nextTick(() => {
+          this.isInternChanged = false;
+        });
+      }
+    },
+    resetRubriquage(): void {
+      this.isRubriquage = false;
+    },
+  },
+
+  created() {
+    if(this.rubriqueFilter.length){
+      this.arrayFilter = Array.from(this.rubriqueFilter);
+      this.isRubriquage = true;
+    }
+    this.fetchTopics(false);
+    this.$nextTick(() => {
+      this.isInit = false;
+    });
+  },
+  methods: {
+    deleteRubriqueChoice(index: number): void{
+      this.arrayFilter.splice(index,1);
+    },
+    getRubriquage(index: number){
+      const elementToNotShow = Array.from(this.arrayFilter);
+      elementToNotShow.splice(index, 1);
+      if(elementToNotShow.length){
+        const rubriquageIdToNotShow = elementToNotShow.map(a => a.rubriquageId);
+        return this.rubriquageData.filter((element)=>{
+          if(element.rubriquageId){
+            return !rubriquageIdToNotShow.includes(element.rubriquageId);
+          }
+        });
+      }
+      return this.rubriquageData;
+    },
+    addFilter(): void{
+      if(this.availableRubriquage[0].rubriquageId){
+        this.arrayFilter.push({rubriquageId: this.availableRubriquage[0].rubriquageId, rubriqueId: 0,nameRubriquage:this.rubriquageData[0].title, nameRubrique:""});
+      }
+    },
+    updateRubrique(newValue: {rubriqueId: number; index: number}): void{
+      const item = this.arrayFilter[newValue.index];
+      item.rubriqueId = newValue.rubriqueId;
+      this.arrayFilter.splice(newValue.index, 1, item);
+    },
+    updateRubriquage(newValue: {rubriquageId: number; index: number}): void{
+      const item = this.arrayFilter[newValue.index];
+      item.rubriquageId = newValue.rubriquageId;
+      this.arrayFilter.splice(newValue.index, 1, item);
+    },
+    async fetchTopics(initArrayFilter: boolean): Promise<void> {
+      if(initArrayFilter){
+        this.arrayFilter.length = 0;
+      }
+      if (!this.organisation) return;
+      const data = await octopusApi.fetchDataWithParams<Array<Rubriquage>>(0, 'rubriquage/find/'+this.organisation,{}, true);
+      this.rubriquageData = data.filter((element: Rubriquage)=>{
+        return element.rubriques.length;
+      });
+      this.saveOrganisation = this.organisation;
+      if (0 === this.rubriquageData.length) return;
+      if(initArrayFilter && this.rubriquageData[0].rubriquageId){
+        this.arrayFilter.push({rubriquageId: this.rubriquageData[0].rubriquageId, rubriqueId: 0, nameRubriquage:this.rubriquageData[0].title, nameRubrique:""});
+      }
+    },
+    resetRubriqueFilter(): void{
+      if(0===this.rubriqueFilter.length || this.isInit){
+        return;
+      }
+      const queries = this.$route.query;
+      if (queries.rubriquesId) {
+        this.$router.replace({ query: {...queries, ...{rubriquesId: undefined} } });
+      }
+      this.$store.commit('filterRubrique', []);
+    }
+  },
+})
+</script>

package/src/components/display/list/ListPaginate.vue

@@ -0,0 +1,145 @@
+<template>
+  <div
+    :id="id"
+    class="d-flex flex-column align-items-center"
+  >
+    <ClassicLoading
+      :loading-text="loadingText"
+      :error-text="errorText"
+    />
+    <template v-if="!loading">
+      <div class="paginate-section mb-2 page-box">
+        <div class="text-secondary">
+          <template v-if="textCount && (windowWidth > 1300 || windowWidth<=960)">
+            {{ textCount }}
+          </template>
+        </div>
+        <Paginate 
+          v-if="!isPhone"
+          :first="first"
+          :rows-per-page="rowsPerPage"
+          :total-count="totalCount"
+          :range-size="rangeSize"
+          @update:first="changeFirst"
+          @update:rowsPerPage="changeSize"
+        />
+      </div>
+    </template>
+    <slot name="list" />
+    <button
+      v-show="((first+rowsPerPage) < totalCount) && isPhone"
+      :disabled="loading"
+      class="btn"
+      :class="buttonPlus ? 'btn-primary align-self-center width-fit-content m-4' : 'btn-more'"
+      :title="$t('See more')"
+      @click="fetchMore"
+    >
+      <template v-if="buttonPlus">
+        {{ $t('See more') }}
+      </template>
+      <div
+        :class="buttonPlus?'ms-1':''"
+        class="saooti-more"
+      />
+    </button>
+  </div>
+</template>
+
+<script lang="ts">
+import domHelper from '../../../helper/dom';
+import ClassicLoading from '../../form/ClassicLoading.vue';
+import { state } from '../../../store/paramStore';
+import Paginate from './Paginate.vue';
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'ListPaginate',
+  components: {
+    Paginate,
+    ClassicLoading
+  },
+  props: {
+    first: { default: 0, type: Number},
+    rowsPerPage: { default: 30, type: Number},
+    totalCount: { default: 0, type: Number},
+    textCount: { default: undefined, type: String},
+    id: {default: '', type: String},
+    loadingText:{ default: undefined, type: String},
+    errorText:{ default: undefined, type: String},
+    loading: { default: false, type:Boolean},
+    isMobile: { default: false, type: Boolean}
+  },
+
+  emits: ['update:first', 'update:rowsPerPage', 'update:isMobile'],
+  data() {
+    return {
+      windowWidth: window.innerWidth as number,
+		};
+  },
+  computed:{
+    buttonPlus(): boolean {
+      return (state.generalParameters.buttonPlus as boolean);
+    },
+    isPhone(){
+      return 960 >= this.windowWidth;
+    },
+    rangeSize(){
+      return this.windowWidth > 1600 ? 3 : this.windowWidth > 1530 ? 2 : 1;
+    },
+  },
+  watch:{
+    isPhone:{
+      immediate:true,
+      handler(){
+        this.$emit('update:isMobile', this.isPhone);
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      window.addEventListener('resize', this.onResize);
+    })
+  },
+  beforeUnmount() { 
+    window.removeEventListener('resize', this.onResize); 
+  },
+  methods:{
+    onResize() {
+      this.windowWidth = window.innerWidth;
+    },
+    fetchMore(){
+      this.$emit('update:first', this.first + this.rowsPerPage);
+    },
+    changeFirst(firstValue: number){
+      this.scrollToTop();
+      this.$emit('update:first', firstValue);
+    },
+    changeSize(sizeValue: number){
+      this.scrollToTop();
+      this.$emit('update:rowsPerPage', sizeValue)
+    },
+    scrollToTop(){
+      const element = document.getElementById(this.id);
+      if(!element || element.getBoundingClientRect().top > 0){return;}
+      const y = element.getBoundingClientRect().top + window.pageYOffset - domHelper.convertRemToPixels(3.5);
+      window.scrollTo({top: y, behavior: 'smooth'});
+    }
+	}
+})
+</script>
+<style lang="scss">
+.octopus-app .page-box.paginate-section{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 99vw;
+  position: sticky;
+  top: 3.5rem;
+  z-index: 9;
+  padding-bottom: 1rem;
+  padding-top: 1rem;
+  @media (max-width: 960px) {
+    position: initial;
+    justify-content:center;
+  }
+}
+</style>

package/src/components/display/list/Paginate.vue

@@ -0,0 +1,218 @@
+<template>
+  <div
+    v-if="totalCount > 0"
+    class="paginate"
+  >
+    <div class="d-flex align-items-center justify-content-center">
+      <label for="rows-per-page-select">{{ $t('Items per page :') }}</label>
+      <select
+        id="rows-per-page-select"
+        v-model="rowsPerPageIntern"
+        class="c-hand p-1 mx-2"
+      >
+        <option
+          v-for="option in optionsRowsPerPage"
+          :key="option"
+          :value="option"
+        >
+          {{ option }}
+        </option>
+      </select>
+      <div class="mx-2">
+        {{ $t('Showing items number', {page: (page+1), totalPage: totalPage}) }}
+      </div>
+      <div class="d-flex flex-nowrap">
+        <button
+          v-for="paginateButton in buttonsLeft"
+          :key="paginateButton.title"
+          class="btn"
+          :title="paginateButton.title"
+          :disabled="paginateButton.disabled"
+          @click="paginateButton.action"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            fill="currentColor"
+            viewBox="0 0 16 16"
+          >
+            <path
+              fill-rule="evenodd"
+              :d="paginateButton.path"
+            />
+          </svg>
+        </button>
+        <div
+          v-for="pageNumber in pagination"
+          :key="pageNumber"
+        >
+          <span
+            v-if="null === pageNumber"
+            class="btn"
+          >
+            ...
+          </span>
+          <button
+            v-else
+            class="btn"
+            :class="{ 'active': page === (pageNumber-1) }"
+            @click="changeFirst((pageNumber-1)*rowsPerPageIntern)"
+          >
+            {{ pageNumber }}
+          </button>
+        </div>
+        <button
+          v-for="paginateButton in buttonsRight"
+          :key="paginateButton.title"
+          class="btn"
+          :title="paginateButton.title"
+          :disabled="paginateButton.disabled"
+          @click="paginateButton.action"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            fill="currentColor"
+            viewBox="0 0 16 16"
+          >
+            <path
+              fill-rule="evenodd"
+              :d="paginateButton.path"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+export default defineComponent({
+  name: "Paginate",
+  components: {
+  },
+	props: {
+    totalCount: { default: 0, type: Number },
+    first: { default: 0, type: Number },
+		rowsPerPage:{ default:0, type:Number},
+    rangeSize:{default:1, type: Number}
+  },
+	emits:['update:first', 'update:rowsPerPage'],
+  data() {
+    return {
+			rowsPerPageIntern: 30 as number,
+			optionsRowsPerPage: [5, 10, 15, 20, 25 , 30, 50] as Array<number>,
+		};
+  },
+	computed:{
+    buttonsLeft(){
+      return [{
+        title: this.$t('Go to first page'), disabled: 0===this.first, action: ()=>{this.changeFirst(0)}, path:"M11.854 3.646a.5.5 0 0 1 0 .708L8.207 8l3.647 3.646a.5.5 0 0 1-.708.708l-4-4a.5.5 0 0 1 0-.708l4-4a.5.5 0 0 1 .708 0zM4.5 1a.5.5 0 0 0-.5.5v13a.5.5 0 0 0 1 0v-13a.5.5 0 0 0-.5-.5z"},
+        {title: this.$t('Go to previous page'), disabled: 0===this.first, action: ()=>{this.changeFirst(this.first - this.rowsPerPage)}, path:"M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"},]
+    },
+    buttonsRight(){
+      return [
+        {title: this.$t('Go to next page'), disabled: this.lastFirst===this.first, action: ()=>{this.changeFirst(this.first + this.rowsPerPage)}, path:"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"},
+        {title: this.$t('Go to last page'), disabled: this.lastFirst===this.first, action: ()=>{this.changeFirst(this.lastFirst)}, path:"M4.146 3.646a.5.5 0 0 0 0 .708L7.793 8l-3.647 3.646a.5.5 0 0 0 .708.708l4-4a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708 0zM11.5 1a.5.5 0 0 1 .5.5v13a.5.5 0 0 1-1 0v-13a.5.5 0 0 1 .5-.5z"}]
+    },
+    page(){
+      return Math.floor(this.first/this.rowsPerPage);
+    },
+    totalPage(){
+      return Math.ceil(this.totalCount/this.rowsPerPage);
+    },
+    pagination(): (number | null)[] {
+      if(-1===this.rangeSize){return[];}
+      const res = [];
+      const minPaginationElems = 5 + this.rangeSize * 2;
+      let rangeStart = this.totalPage <= minPaginationElems ? 1 : (this.page + 1) - this.rangeSize;
+      let rangeEnd =this.totalPage <= minPaginationElems ? this.totalPage : (this.page + 1)+ this.rangeSize;
+      rangeEnd = rangeEnd > this.totalPage ? this.totalPage : rangeEnd;
+      rangeStart = rangeStart < 1 ? 1 : rangeStart;
+      if (this.totalPage > minPaginationElems) {
+        const isStartBoundaryReached = rangeStart - 1 < 3;
+        const isEndBoundaryReached = this.totalPage - rangeEnd < 3;
+        if (isStartBoundaryReached) {
+          rangeEnd = minPaginationElems - 2;
+          for (let i = 1; i < rangeStart; i++) {
+            res.push(i);
+          }
+        } else {
+          res.push(1);
+          res.push(null);
+        }
+        if (isEndBoundaryReached) {
+          rangeStart = this.totalPage - (minPaginationElems - 3);
+          for (let i = rangeStart; i <= this.totalPage; i++) {
+            res.push(i);
+          }
+        } else {
+          for (let i = rangeStart; i <= rangeEnd; i++) {
+            res.push(i);
+          }
+          res.push(null);
+          res.push(this.totalPage);
+        }
+      } else {
+        for (let i = rangeStart; i <= rangeEnd; i++) {
+          res.push(i);
+        }
+      }
+      return res;
+    },
+		lastFirst(): number{
+			return (this.totalPage-1)*this.rowsPerPage;
+		}
+	},
+	watch: {
+    rowsPerPageIntern(){
+			if(this.rowsPerPage !== this.rowsPerPageIntern){
+				this.$emit('update:rowsPerPage', this.rowsPerPageIntern);
+			}
+		},
+		rowsPerPage(){
+			if(this.rowsPerPage !== this.rowsPerPageIntern){
+				this.rowsPerPageIntern =this.rowsPerPage;
+			}
+		}
+  },
+	created(){
+		this.initRowsPerPage();
+	},
+ 
+	methods:{
+    initRowsPerPage(){
+      if(!this.optionsRowsPerPage.includes(this.rowsPerPage)){
+        this.optionsRowsPerPage.push(this.rowsPerPage);
+        this.optionsRowsPerPage.sort((a,b)=>a-b);
+      }
+      this.rowsPerPageIntern = this.rowsPerPage;
+    },
+		changeFirst(newFirst: number){
+			this.$emit('update:first', newFirst);
+		},
+	}
+});
+</script>
+<style lang="scss">
+@import '../../../sass/_variables.scss';
+.octopus-app .paginate{
+	display: flex;
+	justify-content: flex-end;
+	select{
+		border-top: 0;
+		border-right: 0;
+		border-left: 0;
+		background: transparent !important;
+	}
+  .btn{
+    border-radius: 0;
+    &.active{
+      background: rgba($octopus-primary-color, 0.3) ;
+    }
+  }
+}
+</style>

package/src/components/display/live/CountDown.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="d-flex flex-column align-items-center text-danger">
     <h3>{{ $t('This live will start') }}</h3>
-    <h3 ref="countdown" v-if="countdownTimer">
+    <h3
+      v-if="countdownTimer"
+    >
       {{
         $t('In days hours minutes seconds', {
           days: pad(days),
@@ -11,59 +13,58 @@
         })
       }}
     </h3>
-    <h3 v-else>{{ $t('In a moment') }}</h3>
+    <h3 v-else>
+      {{ $t('In a moment') }}
+    </h3>
   </div>
 </template>
-<style lang="scss"></style>
+
 <script lang="ts">
 import { defineComponent } from 'vue'
 export default defineComponent({
-  components: {},
-
+  props: {
+    timeRemaining: { default: undefined, type: Number},
+  },
+  data() {
+    return {
+      seconds: 0 as number,
+      countdownTimer: undefined as  ReturnType<typeof setTimeout>|undefined,
+      days: 0 as number,
+      hours: 0 as number,
+      minutes: 0 as number,
+      remainingSeconds: 0 as number,
+    };
+  },
+  computed: {},
   mounted() {
     if (!this.timeRemaining || this.timeRemaining <= 0) return;
-
     this.seconds = this.timeRemaining;
     this.countdownTimer = setInterval(() => {
       this.timer();
     }, 1000);
   },
-
-  props: ['timeRemaining'],
-
-  data() {
-    return {
-      seconds: undefined as any,
-      countdownTimer: undefined as any,
-      days: 0,
-      hours: 0,
-      minutes: 0,
-      remainingSeconds: 0,
-    };
+  unmounted() {
+    clearInterval((this.countdownTimer as unknown as number));
   },
 
-  computed: {},
-
   methods: {
-    timer() {
+    timer(): void {
       this.days = Math.floor(this.seconds / 24 / 60 / 60);
-      var hoursLeft = Math.floor(this.seconds - this.days * 86400);
+      const hoursLeft = Math.floor(this.seconds - this.days * 86400);
       this.hours = Math.floor(hoursLeft / 3600);
-      var minutesLeft = Math.floor(hoursLeft - this.hours * 3600);
+      const minutesLeft = Math.floor(hoursLeft - this.hours * 3600);
       this.minutes = Math.floor(minutesLeft / 60);
       this.remainingSeconds = this.seconds % 60;
-
-      /* this.$refs.countdown.innerHTML = this.pad(days) + ":" + this.pad(hours) + ":" + this.pad(minutes) + ":" + this.pad(remainingSeconds); */
       if (0 === this.seconds) {
-        clearInterval(this.countdownTimer);
+        clearInterval((this.countdownTimer as unknown as number));
         this.countdownTimer = undefined;
       } else {
         this.seconds--;
       }
     },
-    pad(n: string|number) {
-      return n < 10 ? '0' + n : n;
+    pad(n: number): string {
+      return n < 10 ? '0' + n : n.toString();
     },
   },
-});
-</script>
+})
+</script>