refactor: upgrade to vue 3

src/components/GroupSearchInput.vue

@@ -33,9 +33,12 @@
     </template>
   </autocomplete>
 </template>
-<script>
+<script lang="ts">
+import { defineComponent, ref } from '@vue/composition-api';
 import { getQueryString } from '../utils/urls';
-export default {
+import useHttp from '@/use/useHttp';
+
+export default defineComponent({
   name: 'GroupSearchInput',
   props: {
     size: {
@@ -51,26 +54,25 @@ export default {
       default: false,
     },
   },
-  data() {
-    return {
-      groupResults: [],
-    };
-  },
-  methods: {
-    async onGroupSearch(value) {
-      this.$emit('input', value);
-
+  setup(props, { emit }) {
+    const { $http } = useHttp();
+    const groupResults = ref([]);
+    const onGroupSearch = async (value) => {
+      emit('input', value);
       const params = {
         fields: 'id,name',
         limit: '10',
         search: value,
       };
-
-      const results = await this.$http.get(
+      const results = await $http.get(
         `${process.env.VUE_APP_API_BASE_URL}/groups?${getQueryString(params)}`,
       );
-      this.groupResults = results.data.results;
-    },
+      groupResults.value = results.data.results;
+    };
+    return {
+      onGroupSearch,
+      groupResults,
+    };
   },
-};
+});
 </script>

src/components/IncidentList.vue

@@ -6,16 +6,17 @@
   </div>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api';
+export default defineComponent({
   name: 'IncidentList',
   props: {
     incidents: {
       type: Array,
       default: () => [],
     },
   },
-};
+});
 </script>
 
 <style scoped></style>

src/components/Incidents.vue

@@ -43,10 +43,11 @@
     </div>
   </div>
 </template>
-<script>
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api';
 import CaseDonutChart from '@/components/charts/CaseDonutChart.vue';
 
-export default {
+export default defineComponent({
   name: 'Incidents',
   components: { CaseDonutChart },
   props: {
@@ -55,5 +56,8 @@ export default {
       default: () => [],
     },
   },
-};
+  setup() {
+    return {};
+  },
+});
 </script>

src/components/ItemEditor.vue

@@ -14,42 +14,32 @@
   </div>
 </template>
 
-<script>
-const beautify = require('js-beautify').js; // import the styles somewhere
+<script lang="ts">
+// import the styles somewhere
+import { defineComponent, ref, onMounted } from '@vue/composition-api';
+const beautify = require('js-beautify').js;
 
-export default {
+export default defineComponent({
   name: 'ItemEditor',
-  mounted() {
-    this.currentObject = this.mergeObjects(this.item, this.initialObject);
-    Object.keys(this.currentObject).forEach((key) => {
-      this.updateProperty(key, this.currentObject[key]);
-    });
-    delete this.currentObject.children;
-  },
   props: {
     item: {
       type: Object,
       default: () => ({}),
     },
   },
-  data() {
-    return {
-      beautify,
-      currentObject: {},
-      initialObject: {
-        values: null,
-        is_required: false,
-        is_read_only: false,
-        list_order: 0,
-        field_key: '',
-        field_parent_key: null,
-        if_selected_then_work_type: null,
-        phase: 4,
-      },
-    };
-  },
-  methods: {
-    mergeObjects(obj1, obj2) {
+  setup(props, { emit }) {
+    const currentObject = ref();
+    const initialObject = ref({
+      values: null,
+      is_required: false,
+      is_read_only: false,
+      list_order: 0,
+      field_key: '',
+      field_parent_key: null,
+      if_selected_then_work_type: null,
+      phase: 4,
+    });
+    const mergeObjects = (obj1, obj2) => {
       const common = (a, b) => {
         const result = {};
 
@@ -61,22 +51,36 @@ export default {
       };
 
       return common(obj1, obj2);
-    },
-    updateProperty(prop, value) {
+    };
+    const updateProperty = (prop, value) => {
       try {
-        this.currentObject[prop] = JSON.parse(value);
-        this.$emit('update', {
-          field_key: this.item.field_key,
+        currentObject.value[prop] = JSON.parse(value);
+        emit('update', {
+          field_key: props.item.field_key,
           prop,
           value: JSON.parse(value),
         });
       } catch (e) {
-        const currentValue = this.currentObject[prop];
-        this.currentObject[prop] = currentValue;
+        const currentValue = currentObject.value[prop];
+        currentObject.value[prop] = currentValue;
       }
-    },
+    };
+    onMounted(() => {
+      currentObject.value = mergeObjects(props.item, initialObject.value);
+      Object.keys(currentObject.value).forEach((key) => {
+        updateProperty(key, currentObject.value[key]);
+      });
+      delete currentObject.value.children;
+    });
+    return {
+      beautify,
+      currentObject,
+      initialObject,
+      mergeObjects,
+      updateProperty,
+    };
   },
-};
+});
 </script>
 
 <style>

src/components/JsonWrapper.vue

@@ -4,16 +4,17 @@
   </div>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api';
+export default defineComponent({
   name: 'JsonWrapper',
   props: {
     jsonData: {
       type: Object,
       required: true,
     },
   },
-};
+});
 </script>
 
 <style scoped></style>

src/components/Loader.vue

@@ -33,16 +33,22 @@
   </div>
 </template>
 
-<script>
-import VueTypes from 'vue-types';
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api';
 
-export default {
+export default defineComponent({
   name: 'Loader',
   props: {
-    loading: VueTypes.bool.def(true),
-    overlay: VueTypes.bool.def(false),
+    loading: {
+      type: Boolean,
+      default: true,
+    },
+    overlay: {
+      type: Boolean,
+      default: false,
+    },
   },
-};
+});
 </script>
 
 <style lang="postcss">

src/components/LocationViewer.vue

@@ -3,17 +3,12 @@
 </template>
 
 <script>
+import { defineComponent, ref } from '@vue/composition-api';
 import * as L from 'leaflet';
 import { mapTileLayer } from '@/utils/map';
 
-export default {
+export default defineComponent({
   name: 'LocationViewer',
-  data() {
-    return {
-      map: null,
-      markerLayer: L.layerGroup(),
-    };
-  },
   props: {
     location: {
       type: Object,
@@ -63,7 +58,46 @@ export default {
       this.addMarkerToMap();
     });
   },
-};
+  setup(props, emit) {
+    const map = ref(null);
+    const markerLayer = L.layerGroup();
+    const createTileLayer = () => {
+      return L.tileLayer(mapTileLayer, {
+        // tileSize: 512,
+        // zoomOffset: -1,
+        minZoom: 15,
+        maxZoom: 15,
+      });
+    };
+    const addMarkerToMap = () => {
+      const markerLocation = props.location;
+
+      markerLayer.clearLayers();
+      const marker = new L.marker(
+        [markerLocation.coordinates[1], markerLocation.coordinates[0]],
+        { draggable: 'true' },
+      ).addTo(markerLayer);
+      marker.on('dragend', (event) => {
+        emit('updatedLocation', event.target.getLatLng());
+      });
+      map.value.setView(
+        [markerLocation.coordinates[1], markerLocation.coordinates[0]],
+        15,
+      );
+      marker
+        .bindTooltip(this.$t('casesVue.drag_pin_to_correct_location'), {
+          direction: 'top',
+        })
+        .openTooltip();
+    };
+    return {
+      map,
+      markerLayer,
+      createTileLayer,
+      addMarkerToMap,
+    };
+  },
+});
 </script>
 
 <style scoped></style>