Revert "Merge branch 'ticket/supplementary-comments-on-motive' into 'master'"

This reverts merge request !855

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

@@ -1,115 +1,113 @@
 <template>
-  <ul class="nav nav-tabs">
-    <li v-if="allowedTypes.includes('person')" class="nav-item">
-      <a class="nav-link" :class="{ active: isActive('person') }">
-        <label for="person">
-          <input
-            type="radio"
-            name="person"
-            id="person"
-            v-model="radioType"
-            value="person"
-          />
-          {{ trans(ONTHEFLY_CREATE_PERSON) }}
-        </label>
-      </a>
-    </li>
-    <li v-if="allowedTypes.includes('thirdparty')" class="nav-item">
-      <a class="nav-link" :class="{ active: isActive('thirdparty') }">
-        <label for="thirdparty">
-          <input
-            type="radio"
-            name="thirdparty"
-            id="thirdparty"
-            v-model="radioType"
-            value="thirdparty"
-          />
-          {{ trans(ONTHEFLY_CREATE_THIRDPARTY) }}
-        </label>
-      </a>
-    </li>
-  </ul>
+    <ul class="nav nav-tabs">
+        <li v-if="allowedTypes.includes('person')" class="nav-item">
+            <a class="nav-link" :class="{ active: isActive('person') }">
+                <label for="person">
+                    <input
+                        type="radio"
+                        name="person"
+                        id="person"
+                        v-model="radioType"
+                        value="person"
+                    />
+                    {{ $t("onthefly.create.person") }}
+                </label>
+            </a>
+        </li>
+        <li v-if="allowedTypes.includes('thirdparty')" class="nav-item">
+            <a class="nav-link" :class="{ active: isActive('thirdparty') }">
+                <label for="thirdparty">
+                    <input
+                        type="radio"
+                        name="thirdparty"
+                        id="thirdparty"
+                        v-model="radioType"
+                        value="thirdparty"
+                    />
+                    {{ $t("onthefly.create.thirdparty") }}
+                </label>
+            </a>
+        </li>
+    </ul>
 
-  <div class="my-4">
-    <on-the-fly-person
-      v-if="type === 'person'"
-      :action="action"
-      :query="query"
-      ref="castPerson"
-    />
+    <div class="my-4">
+        <on-the-fly-person
+            v-if="type === 'person'"
+            :action="action"
+            :query="query"
+            ref="castPerson"
+        />
 
-    <on-the-fly-thirdparty
-      v-if="type === 'thirdparty'"
-      :action="action"
-      :query="query"
-      ref="castThirdparty"
-    />
-  </div>
+        <on-the-fly-thirdparty
+            v-if="type === 'thirdparty'"
+            :action="action"
+            :query="query"
+            ref="castThirdparty"
+        />
+    </div>
 </template>
-<script setup>
-import { ref, computed, onMounted } from "vue";
+
+<script>
 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";
 
-const props = defineProps({
-  action: String,
-  allowedTypes: Array,
-  query: String,
-});
+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 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,
-});
+                    return data;
+                default:
+                    throw Error("Invalid type of entity");
+            }
+        },
+    },
+};
 </script>
 
 <style lang="css" scoped>
 label {
-  cursor: pointer;
+    cursor: pointer;
 }
 </style>