chore: upgrade all libraries, remove unnecessary libraries, fix error…

…s during migration
moja-global · Jun 3, 2022 · 1818ebc · 1818ebc
1 parent 7554888
commit 1818ebc
Show file tree

Hide file tree

Showing 18 changed files with 382 additions and 623 deletions.
diff --git a/flint.ui/package.json b/flint.ui/package.json
@@ -16,38 +16,32 @@
     "storybook": "start-storybook -p 6006 -s public"
   },
   "dependencies": {
+    "@ant-design/icons-vue": "^6.1.0",
     "@fortawesome/fontawesome-free": "5.15.4",
     "@popperjs/core": "2.9.3",
-    "@revolist/revogrid": "^3.1.5",
-    "@revolist/vue-datagrid": "^3.0.97",
     "@stencil/core": "^2.15.0",
     "@tailwindcss/forms": "0.3.3",
     "@vue/cli-plugin-eslint": "^4.5.13",
-    "@vue/compat": "^3.1.0",
     "@vue/eslint-config-prettier": "^6.0.0",
-    "@vueform/slider": "^2.0.4",
-    "ant-design-vue": "^2.2",
-    "apexcharts": "^3.27.3",
+    "ant-design-vue": "^3.2.5",
+    "apexcharts": "^3.35.3",
     "axios": "^0.21.1",
     "babel-eslint": "^10.1.0",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "core-js": "^3.16.0",
     "data-forge": "^1.8.17",
+    "dayjs": "^1.11.2",
     "fs": "0.0.1-security",
-    "moment": "^2.29.1",
-    "ol": "^6.6.1",
+    "ol": "^6.14.1",
     "vue": "^3.1.0",
-    "vue-apexcharts": "^1.6.2",
-    "vue-chartjs": "^3.5.1",
     "vue-clickaway": "2.2.2",
     "vue-github-buttons": "3.1.0",
-    "vue-material": "^1.0.0-beta-15",
     "vue-router": "^4.0.15",
-    "vue-slider-component": "^3.2.14",
     "vue-toastification": "^2.0.0-rc.5",
-    "vue-tour": "^2.0.0",
     "vue2-dropzone": "^3.6.0",
-    "vuelayers": "^0.11.36",
+    "vue3-apexcharts": "^1.4.1",
+    "vue3-openlayers": "^0.1.67",
+    "vue3-tour": "^0.2.0",
     "vuex": "^4.0.2"
   },
   "devDependencies": {

diff --git a/flint.ui/src/components/Datepicker/Datepicker.vue b/flint.ui/src/components/Datepicker/Datepicker.vue
@@ -6,21 +6,20 @@
       :default-value="selectedDate"
       v-bind="$attrs"
       @change="onChange"
-      v-on="$listeners"
     />
   </div>
 </template>
 
 <script>
 import { DatePicker } from 'ant-design-vue'
-import moment from 'moment'
-
+import dayjs from 'dayjs'
+console.log(dayjs)
 export default {
   components: {
     'a-date-picker': DatePicker
   },
   props: {
-    value: { type: String, default: moment('2022-01-31').toString() }
+    // value: { type: String, default: dayjs('2022-01-31').toString() }
   },
   data() {
     return { selectedDate: this.value }
@@ -31,7 +30,7 @@ export default {
         return this.selectedDate
       },
       set(val) {
-        this.$emit('input', moment(val).toString())
+        // this.$emit('input', dayjs(val).toString())
         this.selectedDate = val
       }
     }

diff --git a/flint.ui/src/components/Datepicker/DatepickerPoint.vue b/flint.ui/src/components/Datepicker/DatepickerPoint.vue
@@ -11,7 +11,6 @@
           :default-value="selectedStartDate"
           v-bind="$attrs"
           @change="onStartChange"
-          v-on="$listeners"
         />
       </div>
 
@@ -25,7 +24,6 @@
           :default-value="selectedEndDate"
           v-bind="$attrs"
           @change="onEndChange"
-          v-on="$listeners"
         />
       </div>
     </div>
@@ -37,15 +35,11 @@
 </template>
 
 <script>
-import { DatePicker } from 'ant-design-vue'
-import moment from 'moment'
+import dayjs from 'dayjs'
 
 export default {
-  components: {
-    'a-date-picker': DatePicker
-  },
   props: {
-    value: { type: String, default: moment('2022-01-01').toString() }
+    value: { type: dayjs.Dayjs, default: dayjs('2022-01-01') }
   },
   setup() {
     const dateFormatList = ['DD/MM/YYYY', 'DD/MM/YY']
@@ -59,9 +53,9 @@ export default {
   },
   computed: {
     date_diff() {
-      var start_date_value = new Date(moment(this.selectedStartDate).format('YYYY-MM-DD'))
+      var start_date_value = new Date(dayjs(this.selectedStartDate).format('YYYY-MM-DD'))
 
-      var end_date_value = new Date(moment(this.selectedEndDate).format('YYYY-MM-DD'))
+      var end_date_value = new Date(dayjs(this.selectedEndDate).format('YYYY-MM-DD'))
 
       console.log(start_date_value, end_date_value)
 
@@ -74,7 +68,7 @@ export default {
         return this.selectedStartDate
       },
       set(val) {
-        this.$emit('input', moment(val).toString())
+        this.$emit('input', dayjs(val).toString())
         this.selectedStartDate = val
         console.log(this.selectedStartDate)
 
@@ -91,7 +85,7 @@ export default {
         return this.selectedEndDate
       },
       set(val) {
-        this.$emit('input', moment(val).toString())
+        this.$emit('input', dayjs(val).toString())
         this.selectedEndDate = val
         console.log(this.selectedEndDate)
 

diff --git a/flint.ui/src/components/Datepicker/DatepickerRothC.vue b/flint.ui/src/components/Datepicker/DatepickerRothC.vue
@@ -11,7 +11,6 @@
           :default-value="selectedStartDate"
           v-bind="$attrs"
           @change="onStartChange"
-          v-on="$listeners"
         />
       </div>
 
@@ -25,7 +24,6 @@
           :default-value="selectedEndDate"
           v-bind="$attrs"
           @change="onEndChange"
-          v-on="$listeners"
         />
       </div>
     </div>
@@ -37,15 +35,11 @@
 </template>
 
 <script>
-import { DatePicker } from 'ant-design-vue'
-import moment from 'moment'
+import dayjs from 'dayjs'
 
 export default {
-  components: {
-    'a-date-picker': DatePicker
-  },
   props: {
-    value: { type: String, default: moment('2022-01-01').toString() }
+    value: { type: dayjs.Dayjs, default: dayjs('2022-01-01') }
   },
   setup() {
     const dateFormatList = ['DD/MM/YYYY', 'DD/MM/YY']
@@ -59,9 +53,9 @@ export default {
   },
   computed: {
     date_diff() {
-      var start_date_value = new Date(moment(this.selectedStartDate).format('YYYY-MM-DD'))
+      var start_date_value = new Date(dayjs(this.selectedStartDate).format('YYYY-MM-DD'))
 
-      var end_date_value = new Date(moment(this.selectedEndDate).format('YYYY-MM-DD'))
+      var end_date_value = new Date(dayjs(this.selectedEndDate).format('YYYY-MM-DD'))
 
       console.log(start_date_value, end_date_value)
 
@@ -74,7 +68,7 @@ export default {
         return this.selectedStartDate
       },
       set(val) {
-        this.$emit('input', moment(val).toString())
+        this.$emit('input', dayjs(val).toString())
         this.selectedStartDate = val
         console.log(this.selectedStartDate)
 
@@ -91,7 +85,7 @@ export default {
         return this.selectedEndDate
       },
       set(val) {
-        this.$emit('input', moment(val).toString())
+        this.$emit('input', dayjs(val).toString())
         this.selectedEndDate = val
         console.log(this.selectedEndDate)
 

diff --git a/flint.ui/src/components/Navbars/LandingPageNavbar.vue b/flint.ui/src/components/Navbars/LandingPageNavbar.vue
@@ -2,9 +2,11 @@
   <div>
     <a-layout>
       <a-row class="navbar" type="flex" align="middle">
-        <a-col :flex="5" class="logo"
-          ><img src="/moja_global_logo.png" alt="moja global logo" height="40" width="57"
-        /></a-col>
+        <a-col :flex="5" class="logo">
+          <a href="/">
+            <img src="/moja_global_logo.png" alt="moja global logo" height="40" width="57" />
+          </a>
+        </a-col>
         <a-col :flex="3" align="middle">
           <a-row :gutter="40" justify="center" type="flex">
             <a-col>
@@ -26,13 +28,13 @@
               ><img src="/moja_global_logo.png" alt="moja global logo" height="40" width="57"
             /></a-col>
             <a-col>
-              <a-icon v-if="!showMenu" type="menu" @click="toggleNavbar()" />
-              <a-icon v-if="showMenu" type="close" @click="toggleNavbar()" />
+              <MenuOutlined v-if="!showMenu" type="menu" @click="toggleNavbar()" />
+              <CloseOutlined v-if="showMenu" type="close" @click="toggleNavbar()" />
             </a-col>
           </a-row>
         </a-col>
         <a-col v-if="showMenu">
-          <a-row class="menu-mobile">
+          <a-row type="flex" justify="space-between" class="menu-mobile">
             <a-col>
               <a href="https://docs.moja.global/projects/flint-ui/en/latest/" target="_blank" rel="noreferrer noopener"
                 >Documentation
@@ -50,8 +52,13 @@
 </template>
 
 <script>
+import { MenuOutlined, CloseOutlined } from '@ant-design/icons-vue'
 export default {
   name: 'LandingPageNavbar',
+  components: {
+    MenuOutlined,
+    CloseOutlined
+  },
   data() {
     return {
       showMenu: false
@@ -77,6 +84,10 @@ export default {
   border-bottom: solid 2px #475447;
 }
 
+.navbar a {
+  color: #475447;
+}
+
 .logo {
   margin-left: 4rem;
 }

diff --git a/flint.ui/src/components/Sliders/Slider.vue → flint.ui/src/components/Slider/Slider.vue b/flint.ui/src/components/Sliders/Slider.vue → flint.ui/src/components/Slider/Slider.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <a-slider v-model="inputVal" :value="sliderValue" v-bind="$attrs" @change="onChange" v-on="$listeners" />
+    <a-slider v-model:value="inputVal" v-bind="$attrs" />
   </div>
 </template>
 
@@ -10,6 +10,7 @@ export default {
   components: {
     'a-slider': Slider
   },
+  emits: ['changeVal'],
   props: {
     value: { type: Number, default: 100 }
   },
@@ -22,15 +23,10 @@ export default {
         return this.sliderValue
       },
       set(val) {
-        this.$emit('input', val)
+        this.$emit('changeVal', val)
         this.sliderValue = val
       }
     }
-  },
-  methods: {
-    onChange(val) {
-      this.sliderValue = val
-    }
   }
 }
 </script>

diff --git a/flint.ui/src/components/Sliders/Toggle.vue → flint.ui/src/components/Slider/Toggle.vue b/flint.ui/src/components/Sliders/Toggle.vue → flint.ui/src/components/Slider/Toggle.vue
diff --git a/flint.ui/src/components/Sliders/ConfigSliders.vue b/flint.ui/src/components/Sliders/ConfigSliders.vue