AMP-2880

.eslintrc.js

@@ -17,13 +17,15 @@ module.exports = {
     },
     "plugins": [
         "vue",
-        "react"
+        // "react"
     ],
     "rules": {
       'no-console': 'off',
       'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
       "no-unused-vars": "off",
       "vue/no-unused-components": "off",
       "no-mixed-spaces-and-tabs": "off", 
+      'vue/multi-word-component-names': 'off',
+      "vue/no-mutating-props": 'off'
     }
 };

package.json

@@ -7,34 +7,29 @@
     "build": "vue-cli-service build",
     "test": "vue-cli-service test:unit",
     "lint": "vue-cli-service lint",
-    "postinstall": "cd node_modules/@bbc/react-transcript-editor && npm i && npm run build:component",
     "start": "vue-cli-service serve --open",
     "stop": "pkill --signal SIGINT amppd-ui"
   },
   "dependencies": {
-    "@bbc/react-transcript-editor": "https://github.com/AudiovisualMetadataPlatform/react-transcript-editor.git",
-    "@vue/cli": "^4.5.15",
+    "@vue/cli": "^5.0.8",
     "@vuejs-community/vue-filter-date-format": "^1.6.3",
-    "axios": "^0.27.2",
-    "bootstrap": "^4.6.1",
-    "bootstrap-vue": "^2.22.0",
-    "chart.js": "^3.9.1",
-    "core-js": "^3.22.5",
-    "eslint-config-standard": "^14.1.0",
-    "eslint-loader": "^3.0.2",
-    "eslint-plugin-react": "^7.29.4",
-    "mediaelement": "^5.0.5",
-    "moment": "^2.29.4",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
-    "sass-loader": "^8.0.2",
-    "underscore": "^1.13.3",
+    "axios": "^1.6.8",
+    "bootstrap": "^5.3.3",
+    "bootstrap-vue": "^2.23.1",
+    "chart.js": "^4.4.2",
+    "core-js": "^3.37.0",
+    "eslint-config-standard": "^17.1.0",
+    "eslint-webpack-plugin": "^4.1.0",
+    "mediaelement": "^7.0.3",
+    "moment": "^2.30.1",
+    "sass-loader": "^14.2.1",
+    "underscore": "^1.13.6",
     "vue": "^2.6.14",
-    "vue-axios": "^2.1.5",
+    "vue-axios": "^3.5.2",
     "vue-bootstrap-typeahead": "^0.2.6",
     "vue-click-outside": "^1.1.0",
     "vue-mediaelement": "^1.0.0",
-    "vue-router": "^3.5.3",
+    "vue-router": "^3.6.5",
     "vuejs-datatable": "^2.0.0-alpha.7",
     "vuejs-datepicker": "^1.6.2",
     "vuera": "^0.2.7",
@@ -43,21 +38,21 @@
     "vuex-persistedstate": "^4.1.0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.5.17",
-    "@vue/cli-plugin-eslint": "^4.5.17",
-    "@vue/cli-plugin-router": "^4.5.17",
-    "@vue/cli-plugin-unit-jest": "^4.5.15",
-    "@vue/cli-plugin-vuex": "^4.5.17",
-    "@vue/cli-service": "^4.5.17",
-    "@vue/eslint-config-prettier": "^5.1.0",
-    "@vue/test-utils": "^1.3.0",
+    "@vue/cli-plugin-babel": "^5.0.8",
+    "@vue/cli-plugin-eslint": "^5.0.8",
+    "@vue/cli-plugin-router": "^5.0.8",
+    "@vue/cli-plugin-unit-jest": "^5.0.8",
+    "@vue/cli-plugin-vuex": "^5.0.8",
+    "@vue/cli-service": "^5.0.8",
+    "@vue/eslint-config-prettier": "^9.0.0",
+    "@vue/test-utils": "^2.4.5",
     "babel-eslint": "^10.1.0",
-    "eslint": "^5.16.0",
-    "eslint-plugin-prettier": "^3.4.1",
-    "eslint-plugin-vue": "^5.0.0",
-    "node-sass": "^4.14.1",
-    "prettier": "^1.18.2",
-    "vue-template-compiler": "^2.6.14"
+    "eslint": "^8.0.1",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-vue": "^9.25.0",
+    "node-sass": "^9.0.0",
+    "prettier": "^3.2.5",
+    "vue-template-compiler": "^2.7.16"
   },
   "eslintConfig": {
     "root": true,

public/css/style.css

@@ -385,7 +385,9 @@ a:hover {
   fill: #F4871E; }
 
 .filter-btns .dropdown {
-  margin: 0.25rem 0.5rem; }
+  margin: 0.25rem 0.5rem; 
+  height: fit-content;
+}
 
 #myTable {
   font-size: .8em; }
@@ -714,6 +716,7 @@ svg.icon-user {
     border: 4px solid #F4871E;
     transition: all 0.5s ease;
     height:64px;
+    width: auto;
   }
   #help a:link {
     color: #153c4d;

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container col-12 dataTables_wrapper">
+  <div class="container-fluid dataTables_wrapper">
     <div class="row">
       <Sidebar />
 
@@ -59,3 +59,6 @@ export default {
   },
 };
 </script>
+<style lang="css">
+  @import './styles/style.css';
+</style>

src/components/account/ApproveUser.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="col-12">
-    <!-- <Header/> -->
+    <!-- <AmpHeader/> -->
     <main>
       <div class="container">
         <h1 class="text-center">Welcome to the Audiovisual Metadata Platform</h1>
@@ -46,12 +46,12 @@
 </template>  
 
 <script>
-import Header from "@/components/shared/Header.vue";
+import AmpHeader from "@/components/shared/AmpHeader.vue";
 import { accountService } from "@/service/account-service";
 export default {
   name: "ApproveUser",
   components: {
-    Header,
+    AmpHeader,
   },
   data: function () {
     return {
@@ -138,7 +138,7 @@ export default {
 </script>
 
 <style lang="css">
-@import "/amppd-ui/src/styles/style.css";
+@import "../../styles/style.css";
 .form-errors {
   color: red;
   margin: 0% !important;

src/components/account/ForgotPassword.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="col-12">
-    <!-- <Header/> -->
+    <!-- <AmpHeader/> -->
     <main>
       <div class="container">
         <h1 class="text-center">
@@ -59,12 +59,12 @@
 </template>
 
 <script>
-import Header from "@/components/shared/Header.vue";
+import AmpHeader from "@/components/shared/AmpHeader.vue";
 import { accountService } from "@/service/account-service";
 export default {
   name: "ForgotPassword",
   components: {
-    Header,
+    AmpHeader,
   },
   data() {
     return {
@@ -135,7 +135,7 @@ export default {
 </script>
 
 <style lang="css">
-@import "/amppd-ui/src/styles/style.css";
+@import "../../styles/style.css";
 .form-errors {
   color: red;
   margin: 0% !important;

src/components/account/Login.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="col-12">
-    <!-- <Header/> -->
+    <!-- <AmpHeader/> -->
     <main>
       <div class="container">
         <h1 class="text-center">
@@ -75,7 +75,7 @@
 </template>
 
 <script>
-import Header from "@/components/shared/Header.vue";
+import AmpHeader from "@/components/shared/AmpHeader.vue";
 import { accountService } from "@/service/account-service";
 import { sync } from "vuex-pathify";
 import AccessControlService from "@/service/access-control-service";
@@ -84,7 +84,7 @@ import SharedService from "@/service/shared-service";
 export default {
   name: "LoginComponent",
   components: {
-    Header,
+    AmpHeader,
   },
   data() {
     return {
@@ -190,7 +190,7 @@ export default {
 </script>
 
 <style lang="css">
-@import "/amppd-ui/src/styles/style.css";
+@import "../../styles/style.css";
 .form-errors {
   color: red;
   margin: 0% !important;

src/components/account/Register.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="col-12">
-    <!-- <Header/> -->
+    <!-- <AmpHeader/> -->
     <main>
       <div class="container">
         <h1 class="text-center">
@@ -107,12 +107,12 @@
 </template>
 
 <script>
-import Header from "@/components/shared/Header.vue";
+import AmpHeader from "@/components/shared/AmpHeader.vue";
 import { accountService } from "@/service/account-service";
 export default {
   name: "RegisterComponent",
   components: {
-    Header,
+    AmpHeader,
   },
   data: function() {
     return {
@@ -222,7 +222,7 @@ export default {
 </script>
 
 <style lang="css">
-@import "/amppd-ui/src/styles/style.css";
+@import "../../styles/style.css";
 .form-errors {
   color: red;
   margin: 0% !important;

src/components/account/ResetPassword.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="col-12">
-    <!-- <Header/> -->
+    <!-- <AmpHeader/> -->
     <main>
       <div class="container">
         <h1 class="text-center">
@@ -78,12 +78,12 @@
 </template>
 
 <script>
-import Header from "@/components/shared/Header.vue";
+import AmpHeader from "@/components/shared/AmpHeader.vue";
 import { accountService } from "@/service/account-service";
 export default {
   name: "ResetPasswordForm",
   components: {
-    Header,
+    AmpHeader,
   },
   data() {
     return {
@@ -179,7 +179,7 @@ export default {
 </script>
 
 <style lang="css">
-@import "/amppd-ui/src/styles/style.css";
+@import "../../styles/style.css";
 .form-errors {
   color: red;
   margin: 0% !important;

src/components/batch/BatchIngest.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="batch-ingest w-100">
     <loader :show="inProgress" />
-    <div class="container col-12">
+    <div class="container-fluid">
       <div class="row expand-h">
         <!-- <Sidebar/>     -->
         <div class="col-12 bg-light-gray-1">
@@ -307,7 +307,7 @@ export default {
 </script>
 
 <style lang="css">
-@import "/amppd-ui/src/styles/style.css";
+@import "../../styles/style.css";
 .main-margin-min {
   margin: 0.5em !important;
 }

src/components/collections/CollectionDetails.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="collection">
-    <div class="container col-12">
+    <div class="container-fluid">
       <div class="row expand-h">
         <Sidebar />
         <div class="col-10 bg-light-gray-1">
@@ -128,5 +128,5 @@ export default {
 };
 </script>
 <style scoped>
-@import "/amppd-ui/src/styles/style.css";
+@import "../../styles/style.css";
 </style>

src/components/collections/CollectionDetailsItemCard.vue

@@ -188,5 +188,5 @@ export default {
 };
 </script>
 <style scoped>
-@import "/amppd-ui/src/styles/style.css";
+@import "../../styles/style.css";
 </style>

src/components/collections/Collections.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="collection dataTables_wrapper">
-    <div class="container col-12">
+    <div class="container-fluid">
       <div class="row expand-h">
         <Sidebar />
         <div class="col-10 bg-light-gray-1">
@@ -151,5 +151,5 @@ export default {
 </script>
 
 <style scoped>
-@import "/amppd-ui/src/styles/style.css";
+@import "../../styles/style.css";
 </style>