wip: use script setup and new translator within vue components main bundle

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/BadgeEntity.vue

@@ -31,7 +31,7 @@
 
 </template>
 
-<script setup lang="ts">
+<script setup>
 import {
     trans,
     HOUSEHOLD,

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);

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 {
+// Props
-   name: 'AddressRenderBox',
+const props = defineProps({
-   components: {
+    address: {
-      Confidential,
+        type: Object,
-      AddressDetailsButton,
+    },
-   },
+    isMultiline: {
-   props: {
-      address: {
-         type: Object
-      },
-      isMultiline: {
-         default: true,
-         type: Boolean
-      },
-      useDatePane: {
-         default: false,
-         type: Boolean
-      },
-      showButtonDetails: {
         default: true,
-        type: Boolean
+        type: Boolean,
-      }
+    },
-   },
+    useDatePane: {
-   computed: {
+        default: false,
-      component() {
+        type: Boolean,
-         return this.isMultiline === true ? "div" : "span";
+    },
-      },
+    showButtonDetails: {
-      multiline() {
+        default: true,
-         return this.isMultiline === true ? "multiline" : "";
+        type: Boolean,
-      },
+    },
-      isConfidential() {
+});
-         return this.address.confidential;
+
-      }
+// 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 {

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/UserRenderBoxBadge.vue

@@ -5,9 +5,6 @@
 </span>
 </template>
 
-<script>
+<script setup>
-export default {
+    const props = defineProps(['user'])
-    name: "UserRenderBoxBadge",
-    props: ['user'],
-}
 </script>

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>
+<script setup>
-import {makeFetch} from 'ChillMainAssets/lib/api/apiMethods.ts';
+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 {
+    // props
-    name: "EntityWorkflowVueSubscriber",
+    const props = defineProps({
-    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: {
         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 => {
+        const url = `/api/1.0/main/workflow/${props.entityWorkflowId}/${step}?` + params.toString();
-                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>
 
-    <div class="list-group my-3">
+        makeFetch('POST', url).then(response => {
-        <label class="list-group-item">
+            emit('subscriptionUpdated', response);
-            <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>
 
-    <div class="btn-group-vertical my-3" role="group">
+    // emit
-        <button type="button" class="btn btn-outline-primary">
+    const emit = defineEmits(['subscriptionUpdated'])
-            <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>
-*/
 </script>
 
 <style scoped></style>

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'

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

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({

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';