From 7edd644963b96f10141cedac766393177557af0d Mon Sep 17 00:00:00 2001
From: Julie Lenaerts <julielenaerts@gmail.com>
Date: Wed, 25 Sep 2024 10:13:04 +0200
Subject: [PATCH] wip: use script setup and new translator within vue
 components main bundle

---
 .../public/vuejs/_components/BadgeEntity.vue  |  2 +-
 .../public/vuejs/_components/Confidential.vue |  2 +-
 .../_components/Entity/AddressRenderBox.vue   | 73 ++++++++--------
 .../_components/Entity/UserRenderBoxBadge.vue |  7 +-
 .../EntityWorkflowVueSubscriber.vue           | 86 +++++--------------
 .../EntityWorkflow/ListWorkflow.vue           |  2 +-
 .../public/vuejs/_components/Modal.vue        |  2 +-
 .../Notification/NotificationReadToggle.vue   |  6 +-
 .../public/vuejs/_components/OpenWopiLink.vue |  8 +-
 9 files changed, 68 insertions(+), 120 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/BadgeEntity.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/BadgeEntity.vue
index c15f44564..633b142f8 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/BadgeEntity.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/BadgeEntity.vue
@@ -31,7 +31,7 @@
 
 </template>
 
-<script setup lang="ts">
+<script setup>
 import {
     trans,
     HOUSEHOLD,
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Confidential.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Confidential.vue
index 6afded7b5..78e627f79 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Confidential.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Confidential.vue
@@ -9,7 +9,7 @@
     </div>
 </template>
 
-<script setup lang="ts">
+<script setup>
 import { ref } from 'vue';
 
 const isBlurred = ref(true);
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/AddressRenderBox.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/AddressRenderBox.vue
index 00fb2b996..fac79fc8c 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/AddressRenderBox.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/AddressRenderBox.vue
@@ -51,12 +51,12 @@
       <div v-if="useDatePane === true" class="address-more">
          <div v-if="address.validFrom">
             <span class="validFrom">
-               <b>{{ $t('validFrom') }}</b>: {{ $d(address.validFrom.date) }}
+               <b>{{ trans(ADDRESS_VALID_FROM) }}</b>: {{ $d(address.validFrom.date) }}
             </span>
          </div>
          <div v-if="address.validTo">
             <span class="validTo">
-               <b>{{ $t('validTo') }}</b>: {{ $d(address.validTo.date) }}
+               <b>{{ trans(ADDRESS_VALID_TO) }}</b>: {{ $d(address.validTo.date) }}
             </span>
          </div>
       </div>
@@ -64,48 +64,47 @@
    </component>
 </template>
 
-<script>
-
+<script setup>
+import { computed } from 'vue';
 import Confidential from 'ChillMainAssets/vuejs/_components/Confidential.vue';
 import AddressDetailsButton from "ChillMainAssets/vuejs/_components/AddressDetails/AddressDetailsButton.vue";
+import { trans, ADDRESS_VALID_FROM, ADDRESS_VALID_TO } from '../../../../../../../../../../../assets/translator'
 
-export default {
-   name: 'AddressRenderBox',
-   components: {
-      Confidential,
-      AddressDetailsButton,
-   },
-   props: {
-      address: {
-         type: Object
-      },
-      isMultiline: {
-         default: true,
-         type: Boolean
-      },
-      useDatePane: {
-         default: false,
-         type: Boolean
-      },
-      showButtonDetails: {
+// Props
+const props = defineProps({
+    address: {
+        type: Object,
+    },
+    isMultiline: {
         default: true,
-        type: Boolean
-      }
-   },
-   computed: {
-      component() {
-         return this.isMultiline === true ? "div" : "span";
-      },
-      multiline() {
-         return this.isMultiline === true ? "multiline" : "";
-      },
-      isConfidential() {
-         return this.address.confidential;
-      }
-   }
+        type: Boolean,
+    },
+    useDatePane: {
+        default: false,
+        type: Boolean,
+    },
+    showButtonDetails: {
+        default: true,
+        type: Boolean,
+    },
+});
+
+// Components
+const components = {
+    Confidential,
+    AddressDetailsButton,
 };
+
+// Computed
+const component = computed(() => (props.isMultiline ? 'div' : 'span'));
+
+const multiline = computed(() => (props.isMultiline ? 'multiline' : ''));
+
+const isConfidential = computed(() => props.address?.confidential);
+
 </script>
 
+
 <style lang="scss" scoped>
 p {
    &:after {
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/UserRenderBoxBadge.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/UserRenderBoxBadge.vue
index a9c2db9b4..5b193194d 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/UserRenderBoxBadge.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/UserRenderBoxBadge.vue
@@ -5,9 +5,6 @@
 </span>
 </template>
 
-<script>
-export default {
-    name: "UserRenderBoxBadge",
-    props: ['user'],
-}
+<script setup>
+    const props = defineProps(['user'])
 </script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/EntityWorkflowVueSubscriber.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/EntityWorkflowVueSubscriber.vue
index 895345b63..5e0aed917 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/EntityWorkflowVueSubscriber.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/EntityWorkflowVueSubscriber.vue
@@ -2,39 +2,30 @@
     <div class="d-grid gap-2 my-3">
         <button class="btn btn-misc" type="button" v-if="!subscriberFinal" @click="subscribeTo('subscribe', 'final')">
             <i class="fa fa-check fa-fw"></i>
-            {{ $t('subscribe_final') }}
+            {{ trans(WORKFLOW_SUBSCRIBE_FINAL) }}
         </button>
         <button class="btn btn-misc" type="button" v-if="subscriberFinal" @click="subscribeTo('unsubscribe', 'final')">
             <i class="fa fa-times fa-fw"></i>
-            {{ $t('unsubscribe_final') }}
+            {{ trans(WORKFLOW_UNSUBSCRIBE_FINAL) }}
         </button>
         <button class="btn btn-misc" type="button" v-if="!subscriberStep" @click="subscribeTo('subscribe', 'step')">
             <i class="fa fa-check fa-fw"></i>
-            {{ $t('subscribe_all_steps') }}
+            {{ trans(WORKFLOW_SUBSCRIBE_ALL_STEPS) }}
         </button>
         <button class="btn btn-misc" type="button" v-if="subscriberStep" @click="subscribeTo('unsubscribe', 'step')">
             <i class="fa fa-times fa-fw"></i>
-            {{ $t('unsubscribe_all_steps') }}
+            {{ trans(WORKFLOW_UNSUBSCRIBE_ALL_STEPS) }}
         </button>
     </div>
 </template>
 
-<script>
-import {makeFetch} from 'ChillMainAssets/lib/api/apiMethods.ts';
+<script setup>
+import { makeFetch } from 'ChillMainAssets/lib/api/apiMethods.ts';
+import { defineProps, defineEmits } from 'vue';
+import { trans, WORKFLOW_SUBSCRIBE_FINAL, WORKFLOW_UNSUBSCRIBE_FINAL, WORKFLOW_SUBSCRIBE_ALL_STEPS, WORKFLOW_UNSUBSCRIBE_ALL_STEPS } from '../../../../../../../../../../../assets/translator'
 
-export default {
-    name: "EntityWorkflowVueSubscriber",
-    i18n: {
-       messages: {
-          fr: {
-             subscribe_final: "Recevoir une notification à l'étape finale",
-             unsubscribe_final: "Ne plus recevoir de notification à l'étape finale",
-             subscribe_all_steps: "Recevoir une notification à chaque étape du suivi",
-             unsubscribe_all_steps: "Ne plus recevoir de notification à chaque étape du suivi",
-          }
-       }
-    },
-    props: {
+    // props
+    const props = defineProps({
         entityWorkflowId: {
             type: Number,
             required: true,
@@ -47,55 +38,22 @@ export default {
             type: Boolean,
             required: true,
         },
-    },
-    emits: ['subscriptionUpdated'],
-    methods: {
-        subscribeTo(step, to) {
-            let params = new URLSearchParams();
-            params.set('subscribe', to);
+    })
 
-            const url = `/api/1.0/main/workflow/${this.entityWorkflowId}/${step}?` + params.toString();
+    //methods
+    const subscribeTo = (step, to) => {
+        let params = new URLSearchParams();
+        params.set('subscribe', to);
 
-            makeFetch('POST', url).then(response => {
-                this.$emit('subscriptionUpdated', response);
-            });
-        }
-    },
-}
-/*
-*   ALTERNATIVES
-*
-    <div class="form-check form-switch">
-        <input class="form-check-input" type="checkbox" role="switch" id="laststep">
-        <label class="form-check-label" for="laststep">{{ $t('subscribe_final') }}</label>
-    </div>
-    <div class="form-check form-switch">
-        <input class="form-check-input" type="checkbox" role="switch" id="allsteps">
-        <label class="form-check-label" for="allsteps">{{ $t('subscribe_all_steps') }}</label>
-    </div>
+        const url = `/api/1.0/main/workflow/${props.entityWorkflowId}/${step}?` + params.toString();
 
-    <div class="list-group my-3">
-        <label class="list-group-item">
-            <input class="form-check-input me-1" type="checkbox" value="">
-            {{ $t('subscribe_final') }}
-        </label>
-        <label class="list-group-item">
-            <input class="form-check-input me-1" type="checkbox" value="">
-            {{ $t('subscribe_all_steps') }}
-        </label>
-    </div>
+        makeFetch('POST', url).then(response => {
+            emit('subscriptionUpdated', response);
+        });
+    }
 
-    <div class="btn-group-vertical my-3" role="group">
-        <button type="button" class="btn btn-outline-primary">
-            <i class="fa fa-check fa-fw"></i>
-            {{ $t('subscribe_final') }}
-        </button>
-        <button type="button" class="btn btn-outline-primary">
-            <i class="fa fa-check fa-fw"></i>
-            {{ $t('subscribe_all_steps') }}
-        </button>
-    </div>
-*/
+    // emit
+    const emit = defineEmits(['subscriptionUpdated'])
 </script>
 
 <style scoped></style>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/ListWorkflow.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/ListWorkflow.vue
index d321f8e0d..c7f56887b 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/ListWorkflow.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/ListWorkflow.vue
@@ -64,7 +64,7 @@
    </div>
 </template>
 
-<script setup lang="ts">
+<script setup>
 import Popover from 'bootstrap/js/src/popover';
 import { onMounted } from 'vue';
 import { trans, SEE, BY_USER, WORKFLOW_AT, WORKFLOW_YOU_SUBSCRIBED_TO_ALL_STEPS, WORKFLOW_YOU_SUBSCRIBED_TO_FINAL_STEP } from '../../../../../../../../../../../assets/translator'
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Modal.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Modal.vue
index e2589cfcb..d484bfb79 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Modal.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Modal.vue
@@ -28,7 +28,7 @@
    </transition>
 </template>
 
-<script setup lang="ts">
+<script setup>
 /*
  *    This Modal component is a mix between Vue3 modal implementation
  *    [+] with 'v-if:showModal' directive:parameter, html scope is added/removed not just shown/hidden
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Notification/NotificationReadToggle.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Notification/NotificationReadToggle.vue
index 2bd906d7d..dc8c6c8f6 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Notification/NotificationReadToggle.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Notification/NotificationReadToggle.vue
@@ -32,7 +32,7 @@
             type="button"
             class="btn btn-outline-primary"
             :href="showUrl"
-            :title="$t('action.show')"
+            :title="trans(SEE)"
             >
             <i class="fa fa-sm fa-comment-o"></i>
         </a>
@@ -40,10 +40,10 @@
     </div>
 </template>
 
-<script setup lang="ts">
+<script setup>
 import { ref, computed } from 'vue';
 import { makeFetch } from 'ChillMainAssets/lib/api/apiMethods.ts';
-import { trans, NOTIFICATION_MARK_AS_READ, NOTIFICATION_MARK_AS_UNREAD } from '../../../../../../../../../../../assets/translator'
+import { trans, NOTIFICATION_MARK_AS_READ, NOTIFICATION_MARK_AS_UNREAD, SEE } from '../../../../../../../../../../../assets/translator'
 
 // Props
 const props = defineProps({
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OpenWopiLink.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OpenWopiLink.vue
index fa6bddab4..2b34d6071 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OpenWopiLink.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OpenWopiLink.vue
@@ -24,12 +24,6 @@
                   <span class="ms-auto me-3">
                      <span v-if="options.title">{{ options.title }}</span>
                   </span>
-                  <!--
-                  <a class="btn btn-outline-light">
-                     <i class="fa fa-save fa-fw"></i>
-                     {{ $t('save_and_quit') }}
-                  </a>
-                  -->
             </template>
 
             <template v-slot:body>
@@ -61,7 +55,7 @@
    </teleport>
 </template>
 
-<script setup lang="ts">
+<script setup>
 import { ref, computed } from 'vue';
 import Modal from 'ChillMainAssets/vuejs/_components/Modal';
 import logo from 'ChillMainAssets/chill/img/logo-chill-sans-slogan_white.png';