@saooti/octopus-sdk 1.0.0 → 29.0.2

package/src/components/misc/modal/NewsletterModal.vue

@@ -1,142 +1,146 @@
 <template>
   <div>
-    <b-modal
+    <div
       id="newsletter-modal"
-      @close="closePopup"
-      @hide="closePopup"
-      @cancel="closePopup"
-      :title="$t('Share newsletter')"
+      class="modal"
     >
-      <template v-slot:default>
-        <div class="d-flex justify-content-between">
-          <div v-html="newsletterHtml"></div>
-          <div class="d-flex flex-column flex-grow ml-4">
-            <h4 class="mb-3">{{ $t('Configuration') }}</h4>
-            <div class="checkbox-saooti">
-              <input
-                type="checkbox"
-                class="custom-control-input"
-                id="display-emission-name"
-                v-model="displayEmissionName"
-              />
-              <label class="custom-control-label" for="display-emission-name">{{
-                $t('Display emission name')
-              }}</label>
-            </div>
-            <div class="checkbox-saooti">
-              <input
-                type="checkbox"
-                class="custom-control-input"
-                id="display-participants-names"
-                v-model="displayParticipantsNames"
-              />
-              <label
-                class="custom-control-label"
-                for="display-participants-names"
-                >{{ $t('Display participants list') }}</label
-              >
-            </div>
-            <div class="d-flex align-items-center mt-2">
-              <swatches
-                v-model="color"
-                class="c-hand input-no-outline mr-2 mt-2"
-                show-fallback
-                colors="text-advanced"
-                popover-to="right"
-                :data-color="color"
-              ></swatches>
-              <div>{{ $t('Choose main color') }}</div>
+      <div class="modal-backdrop" />
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">
+              {{ $t('Share newsletter') }}
+            </h5>
+          </div>
+          <div class="modal-body">
+            <div class="d-flex justify-content-between">
+              <div v-html="newsletterHtml" />
+              <div class="d-flex flex-column flex-grow ms-4">
+                <h4 class="mb-3">
+                  {{ $t('Configuration') }}
+                </h4>
+                <div>
+                  <input
+                    id="display-emission-name"
+                    v-model="displayEmissionName"
+                    type="checkbox"
+                    class="form-check-input"
+                  >
+                  <label
+                    class="form-check-label"
+                    for="display-emission-name"
+                  >{{
+                    $t('Display emission name')
+                  }}</label>
+                </div>
+                <div>
+                  <input
+                    id="display-participants-names"
+                    v-model="displayParticipantsNames"
+                    type="checkbox"
+                    class="form-check-input"
+                  >
+                  <label
+                    class="form-check-label"
+                    for="display-participants-names"
+                  >{{ $t('Display participants list') }}</label>
+                </div>
+                <div class="d-flex align-items-center mt-2">
+                  <VSwatches
+                    v-model="color"
+                    class="c-hand input-no-outline me-2 mt-2"
+                    show-fallback
+                    colors="text-advanced"
+                    popover-to="right"
+                    :data-color="color"
+                  />
+                  <div>{{ $t('Choose main color') }}</div>
+                </div>
+                <div
+                  class=" d-flex justify-content-between align-items-center mt-3 mb-2"
+                >
+                  <h4 class="mb-0">
+                    {{ $t('HTML Code') }}
+                  </h4>
+                  <input
+                    type="button"
+                    :value="$t('Copy')"
+                    class="btn btn-primary"
+                    :aria-label="$t('Copy')"
+                    @click="onCopyCode(newsletterHtml, afterCopy)"
+                  >
+                </div>
+                <textarea
+                  id="newsletter_code_textarea"
+                  v-model="newsletterHtml"
+                  readonly
+                  @click="selectAll"
+                />
+                <label
+                  for="newsletter_code_textarea"
+                  :aria-label="$t('HTML Code')"
+                />
+              </div>
             </div>
-            <div
-              class=" d-flex justify-content-between align-items-center mt-3 mb-2"
+          </div>
+          <div class="modal-footer">
+            <button
+              class="btn btn-primary m-1"
+              @click="closePopup"
             >
-              <h4 class="mb-0">{{ $t('HTML Code') }}</h4>
-              <input
-                type="button"
-                :value="$t('Copy')"
-                class="btn btn-primary"
-                @click="onCopyCode(newsletterHtml, afterCopy)"
-                :aria-label="$t('Copy')"
-              />
-            </div>
-            <textarea
-              id="newsletter_code_textarea"
-              v-model="newsletterHtml"
-              @click="selectAll"
-              readonly
-            ></textarea>
-            <label
-              for="newsletter_code_textarea"
-              :aria-label="$t('HTML Code')"
-            ></label>
+              {{ $t('Close') }}
+            </button>
           </div>
         </div>
-      </template>
-      <template v-slot:modal-footer>
-        <button class="btn btn-primary m-1" @click="closePopup">
-          {{ $t('Close') }}
-        </button>
-      </template>
-    </b-modal>
-    <Snackbar ref="snackbar" position="bottom-left"></Snackbar>
+      </div>
+    </div>
+    <Snackbar
+      ref="snackbar"
+      position="bottom-left"
+    />
   </div>
 </template>
 
-<style lang="scss">
-#newsletter-modal {
-  textarea {
-    border: 2px solid #eee;
-    height: 200px;
-    padding: 1em;
-    border-radius: 1em;
-    &:focus {
-      outline-width: 0;
-    }
-  }
-
-  .modal-dialog {
-    max-width: 60%;
-  }
-}
-</style>
 <script lang="ts">
 import Snackbar from '../../misc/Snackbar.vue';
 const moment = require('moment');
-//@ts-ignore
-import Swatches from 'vue-swatches';
+import VSwatches from 'vue3-swatches';
 const humanizeDuration = require('humanize-duration');
 import { displayMethods } from '../../mixins/functions';
+import { Participant } from '@/store/class/participant';
+import { Podcast } from '@/store/class/podcast';
+import { state } from '../../../store/paramStore';
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'NewsletterModal',
 
-  props: ['podcast'],
-  emits: ['close'],
-  mixins: [displayMethods],
-
   components: {
     Snackbar,
-    Swatches,
+    VSwatches,
   },
 
-  mounted() {
-    /* this.$bvModal.show('newsletter-modal'); */
+  mixins: [displayMethods],
+
+  props: {
+    podcast: { default: ()=>({}), type: Object as ()=> Podcast},
   },
 
+  emits: ['close'],
+
   data() {
     return {
-      displayParticipantsNames: true,
-      displayEmissionName: true,
-      color: '#40a372',
-      dummyParam: new Date().getTime().toString(),
+      displayParticipantsNames: true as boolean,
+      displayEmissionName: true as boolean,
+      color: '#40a372' as string,
+      dummyParam: new Date().getTime().toString() as string,
     };
   },
 
   computed: {
-    snackbarRef():any {
-      return this.$refs.snackbar;
+    resourcesUrl(): string{
+      return state.podcastPage.resourceUrl? state.podcastPage.resourceUrl : window.location.origin;
     },
-    emissionName():string {
+    emissionName(): string {
       if (this.displayEmissionName)
         return (
           `<tr><td colspan="2" style="font-size: 16px;line-height:24px;font-weight: bold;">` +
@@ -145,10 +149,28 @@ export default defineComponent({
         );
       return '';
     },
-    participantsName() {
+    articleHtml(): string{
+      if(this.podcast.article && 0 !== this.podcast.article.length){
+        return (`<a href="` +
+          this.podcast.article +
+          `" aria-label="` +
+          this.$t('See associated article') +
+          `">
+          <img width="44" height="44" style="display: inline-block;vertical-align: middle; margin-right:3px" src="` +
+          this.resourcesUrl + `/img/article.png">
+        </a>
+        <a style="color: #000;text-decoration: none;" href="` +
+          this.podcast.article +
+          `">` +
+          this.$t('See associated article') +
+          `</a>`);
+      }
+      return '';
+    },
+    participantsName(): string {
       if (!this.displayParticipantsNames || !this.podcast.animators) return '';
-      let text = [''];
-      this.podcast.animators.forEach((element:any) => {
+      const text = [''];
+      this.podcast.animators.forEach((element: any) => {
         text.push(
           `<table width='100%' style="width:100%;background: #f3f3f3;font-family: Arial, sans-serif;font-size: 12px;line-height: 20px;border-bottom-left-radius: 1.5em;border-bottom-right-radius: 1.5em;">
 					<tr>
@@ -179,8 +201,8 @@ export default defineComponent({
       });
       return text.join('');
     },
-    newsletterHtml():string {
-      let html = [
+    newsletterHtml(): string {
+      const html = [
         `<table width='100%' style="width:100%;background:#f3f3f3;font-family: Arial, sans-serif;font-size: 12px;line-height: 20px;border-top-left-radius: 1.5em;border-top-right-radius: 1.5em;">
 		<tr>
 				<td valign="top" rowspan="4" style="vertical-align: top; padding: 10px;">
@@ -223,71 +245,92 @@ export default defineComponent({
       }
       html.push(
         `
-		<tr>
-      <td colspan="2" style="vertical-align: middle;padding: 15px 10px;display: flex; align-items:center;">
+    </table>
+      <div style="font-family: Arial, sans-serif;font-size: 12px;line-height: 20px;background: #f3f3f3;vertical-align: middle;padding: 15px 10px;display: flex; align-items:center; flex-wrap:wrap">
         <a href="` +
           window.location.href +
           `" aria-label="` +
           this.$t('Listen this episode') +
           `">
           <img width="44" height="44" style="display: inline-block;vertical-align: middle" src="` +
-          window.location.origin +
+          this.resourcesUrl +
           `/img/play-podcast.png">
         </a>
-        <a style="color: #000;text-decoration: none;" href="` +
+        <a style="color: #000;text-decoration: none; margin-right:8px" href="` +
           window.location.href +
           `">` +
           this.$t('Listen this episode') +
-          `</a>
-      </td>
-		</tr>
-</table>
+          `</a>` + this.articleHtml + `
+      </div>
 		` +
           this.participantsName
       );
       return html.join('');
     },
-    date():string {
-      if (1970 !== moment(this.podcast.pubDate).year())
-        return moment(this.podcast.pubDate).format('D MMMM YYYY [à] HH[h]mm');
+    
+    date(): string {
+      if (1970 !== moment(this.podcast.pubDate).year()){
+        if('fr' === this.$i18n.locale){
+          return moment(this.podcast.pubDate).format('D MMMM YYYY [à] HH[h]mm');
+        }
+        return moment(this.podcast.pubDate).format('D MMMM YYYY [at] HH[h]mm');
+      }
       return '';
     },
-    duration():string {
+    duration(): string {
       if (this.podcast.duration <= 1) return '';
       if (this.podcast.duration > 600000) {
         return humanizeDuration(this.podcast.duration, {
-          language: 'fr',
+          language: this.$i18n.locale,
           largest: 1,
           round: true,
         });
       }
       return humanizeDuration(this.podcast.duration, {
-        language: 'fr',
+        language: this.$i18n.locale,
         largest: 2,
         round: true,
       });
     },
   },
-
   methods: {
-    closePopup(event: { preventDefault: () => void; }) {
+    closePopup(event: { preventDefault: () => void }): void {
       event.preventDefault();
       this.$emit('close');
     },
-
-    getName(person:any) {
+    getName(person: Participant): string {
       const first = person.firstName || '';
       const last = person.lastName || '';
       return (first + ' ' + last).trim();
     },
-
-    selectAll(element: any) {
-      element.target.focus();
-      element.target.select();
+    selectAll(element: Event): void {
+      const target = element.target;
+      if(null!==target){
+        (target as HTMLInputElement).focus();
+        (target as HTMLInputElement).select();
+      }
     },
-    afterCopy(){
-      this.snackbarRef.open(this.$t('Data in clipboard'));
+    afterCopy(): void{
+      (this.$refs.snackbar as any).open(this.$t('Data in clipboard'));
     }
   },
-});
+})
 </script>
+
+<style lang="scss">
+#newsletter-modal {
+  textarea {
+    border: 2px solid #eee;
+    height: 200px;
+    padding: 1em;
+    border-radius: 1em;
+    &:focus {
+      outline-width: 0;
+    }
+  }
+
+  .modal-dialog {
+    max-width: 60%;
+  }
+}
+</style>

package/src/components/misc/modal/QrCodeModal.vue

@@ -0,0 +1,83 @@
+<template>
+  <div
+    id="qrcode-modal"
+    class="modal"
+  >
+    <div class="modal-backdrop" />
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">
+            {{ $t('Share QR Code') }}
+          </h5>
+        </div>
+        <div class="modal-body">
+          <QrCode :url="urlPage" />
+        </div>
+        <div class="modal-footer">
+          <button
+            class="btn btn-primary m-1"
+            @click="closePopup"
+          >
+            {{ $t('Close') }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Podcast } from '@/store/class/podcast';
+import { Emission } from '@/store/class/emission';
+import QrCode from '../../display/sharing/QrCode.vue';
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'QrCodeModal',
+
+  components: {
+    QrCode
+  },
+
+  props: {
+    podcast: { default: undefined, type: Object as ()=> Podcast},
+    emission: { default: undefined, type: Object as ()=> Emission},
+  },
+
+  emits: ['close'],
+
+  data() {
+    return {
+    };
+  },
+ 
+  computed: {
+    urlPage(): string{
+      if(window.location.href.includes('?productor')){
+        return window.location.href;
+      }
+      if("" !== window.location.search){
+        return window.location.href + "&productor=" + this.productor;
+      }
+      return window.location.href + "?productor=" + this.productor;
+    },
+    productor(): string{
+      if(this.podcast){
+        return this.podcast.organisation.id;
+      }
+      if(this.emission){
+        return this.emission.orga.id;
+      }
+      return "";
+    },
+  },
+  methods:{
+    closePopup(event: { preventDefault: () => void }): void {
+      event.preventDefault();
+      this.$emit('close');
+    },
+  }
+})
+</script>
+
+<style lang="scss"></style>