1277 refacto use symfony translation

src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/Create.vue

@@ -10,7 +10,7 @@
                         v-model="radioType"
                         value="person"
                     />
-                    {{ $t("onthefly.create.person") }}
+                    {{ trans(ONTHEFLY_CREATE_PERSON) }}
                 </label>
             </a>
         </li>
@@ -24,7 +24,7 @@
                         v-model="radioType"
                         value="thirdparty"
                     />
-                    {{ $t("onthefly.create.thirdparty") }}
+                    {{ trans(ONTHEFLY_CREATE_THIRDPARTY) }}
                 </label>
             </a>
         </li>
@@ -46,64 +46,67 @@
         />
     </div>
 </template>
-
-<script>
+<script setup>
+import { ref, computed, onMounted } from "vue";
 import OnTheFlyPerson from "ChillPersonAssets/vuejs/_components/OnTheFly/Person.vue";
 import OnTheFlyThirdparty from "ChillThirdPartyAssets/vuejs/_components/OnTheFly/ThirdParty.vue";
+import {
+    trans,
+    ONTHEFLY_CREATE_PERSON,
+    ONTHEFLY_CREATE_THIRDPARTY,
+} from "translator";
 
-export default {
-    name: "OnTheFlyCreate",
-    props: ["action", "allowedTypes", "query"],
-    components: {
-        OnTheFlyPerson,
-        OnTheFlyThirdparty,
-    },
-    data() {
-        return {
-            type: null,
-        };
-    },
-    computed: {
-        radioType: {
-            set(type) {
-                this.type = type;
-                console.log("## type:", type, ", action:", this.action);
-            },
-            get() {
-                return this.type;
-            },
-        },
-    },
-    mounted() {
-        this.type =
-            this.allowedTypes.length === 1 &&
-            this.allowedTypes.includes("thirdparty")
-                ? "thirdparty"
-                : "person";
-    },
-    methods: {
-        isActive(tab) {
-            return this.type === tab ? true : false;
-        },
-        castDataByType() {
-            switch (this.radioType) {
-                case "person":
-                    return this.$refs.castPerson.$data.person;
-                case "thirdparty":
-                    let data = this.$refs.castThirdparty.$data.thirdparty;
-                    if (data.address !== undefined && data.address !== null) {
-                        data.address = { id: data.address.address_id };
-                    } else {
-                        data.address = null;
-                    }
+const props = defineProps({
+    action: String,
+    allowedTypes: Array,
+    query: String,
+});
 
-                    return data;
-                default:
-                    throw Error("Invalid type of entity");
+const type = ref(null);
+
+const radioType = computed({
+    get: () => type.value,
+    set: (val) => {
+        type.value = val;
+        console.log("## type:", val, ", action:", props.action);
+    },
+});
+
+const castPerson = ref(null);
+const castThirdparty = ref(null);
+
+onMounted(() => {
+    type.value =
+        props.allowedTypes.length === 1 &&
+        props.allowedTypes.includes("thirdparty")
+            ? "thirdparty"
+            : "person";
+});
+
+function isActive(tab) {
+    return type.value === tab;
+}
+
+function castDataByType() {
+    switch (radioType.value) {
+        case "person":
+            return castPerson.value.$data.person;
+        case "thirdparty":
+            let data = castThirdparty.value.$data.thirdparty;
+            if (data.address !== undefined && data.address !== null) {
+                data.address = { id: data.address.address_id };
+            } else {
+                data.address = null;
             }
-        },
-    },
-};
+            return data;
+        default:
+            throw Error("Invalid type of entity");
+    }
+}
+
+defineExpose({
+    castDataByType,
+});
 </script>
 
 <style lang="css" scoped>