Login screen

frontend/babel.config.js

@@ -1,5 +1,3 @@
 module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset',
-  ],
+  presets: ["@vue/cli-plugin-babel/preset"]
 };

frontend/package.json

@@ -4,27 +4,35 @@
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build"
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
   },
   "dependencies": {
     "axios": "^0.19.2",
     "core-js": "^3.6.4",
+    "material-design-icons-iconfont": "^5.0.1",
+    "moment": "^2.24.0",
+    "node-sass": "^4.13.1",
+    "register-service-worker": "^1.6.2",
     "vue": "^2.6.11",
     "vue-router": "^3.1.5",
     "vuetify": "^2.2.11",
     "vuex": "^3.1.2"
   },
   "devDependencies": {
+    "@mdi/font": "^5.0.45",
     "@vue/cli-plugin-babel": "~4.2.0",
+    "@vue/cli-plugin-eslint": "~4.2.0",
+    "@vue/cli-plugin-pwa": "~4.2.0",
     "@vue/cli-plugin-router": "~4.2.0",
     "@vue/cli-plugin-vuex": "~4.2.0",
     "@vue/cli-service": "~4.2.0",
-    "@vue/eslint-config-airbnb": "^5.0.2",
+    "@vue/eslint-config-prettier": "^6.0.0",
     "babel-eslint": "^10.0.3",
     "eslint": "^6.7.2",
-    "eslint-plugin-import": "^2.20.1",
+    "eslint-plugin-prettier": "^3.1.1",
     "eslint-plugin-vue": "^6.1.2",
-    "lint-staged": "^9.5.0",
+    "prettier": "^1.19.1",
     "sass": "^1.19.0",
     "sass-loader": "^8.0.0",
     "vue-cli-plugin-vuetify": "~2.0.5",

frontend/src/App.vue

@@ -1,43 +1,29 @@
 <template>
-  <v-app>
-    <div id="app">
-      <v-toolbar app>
-        <span class="hidden-sm-and-up">
-          <v-toolbar-side-icon @click="sidebar = !sidebar"></v-toolbar-side-icon>
-        </span>
-        <v-toolbar-title>Biggies</v-toolbar-title>
-        <v-spacer></v-spacer>
-        <v-toolbar-items class="hidden-xs-only">
-          <v-btn flat v-for="item in menuItems" :key="item.title" :to="item.path">{{ item.title }}</v-btn>
-        </v-toolbar-items>
-      </v-toolbar>
-
-      <router-view />
-    </div>
-
-    <v-content>
-      <HelloWorld />
-    </v-content>
-  </v-app>
+  <div id="app">
+    <div id="nav"></div>
+    <router-view />
+  </div>
 </template>
 
-<script>
-import HelloWorld from "./components/HelloWorld";
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
 
-export default {
-  name: "App",
+#nav {
+  padding: 30px;
+}
 
-  components: {
-    HelloWorld
-  },
+#nav a {
+  font-weight: bold;
+  color: #2c3e50;
+}
 
-  data: () => ({
-    sidebar: false,
-    menuItems: [
-      { title: "Home", path: "/" },
-      { title: "About", path: "/about" },
-      { title: "Categories", path: "/categories" }
-    ]
-  })
-};
-</script>
+#nav a.router-link-exact-active {
+  color: #42b983;
+}
+</style>

frontend/src/components/Categories.vue → frontend/src/components/EntriesGrid.vue

@@ -70,6 +70,10 @@
         <td class="text-xs-right">{{ props.item.entity }}</td>
         <td class="text-xs-right">{{ props.item.description }}</td>
         <td class="text-xs-right">{{ props.item.price }}</td>
+        <!-- <td class="text-xs-right"><v-icon small>test</v-icon></td> -->
+      </template>
+      <template>
+        <v-icon small>mdi-delete</v-icon>
       </template>
     </v-data-table>
     <v-row class="text-center"></v-row>
@@ -78,7 +82,8 @@
 <script>
 import axios from "axios";
 export default {
-  name: "Categories",
+  name: "EntriesGrid",
+  components: {},
   methods: {
     catgeorySelection(data) {
       this.cashOutRecord = {};
@@ -152,7 +157,8 @@ export default {
           align: "center",
           sortable: false
         },
-        { text: "Amount", value: "price", align: "center", sortable: false }
+        { text: "Amount", value: "price", align: "center", sortable: false },
+        { text: "Action", vlaue: "action", align: "center", sortable: false }
       ],
       cashOutRecord: {},
       cashOutRecords: []
@@ -165,8 +171,8 @@ export default {
         this.categoryOptions = response.data;
       })
       .catch(error => {
-        console.log("error while fetching entry-category");
+        console.log("error while fetching entry-category", error);
       });
   }
 };
-</script>
+</script>

frontend/src/components/SaleSummary.vue

@@ -0,0 +1,17 @@
+<template>
+<v-app>
+  <div class="salesummary">
+    <h2>SaleSummary: comming soon</h2>
+  </div>
+</v-app>
+</template>
+
+<script>
+// @ is an alias to /src
+//import <other-comp> from "@/components/<other-comp>.vue";
+
+export default {
+  name: "SaleSummary",
+  components: {
+  }
+};

frontend/src/components/UserLogin.vue

@@ -0,0 +1,87 @@
+<template>
+  <v-content>
+    <v-container class="fill-height" fluid>
+      <v-row align="center" justify="center">
+        <v-col cols="12" sm="8" md="4">
+          <v-alert type="error" dismissible v-if="showError"
+            >Invalid User Details</v-alert
+          >
+          <v-card class="elevation-12">
+            <v-toolbar color="primary" dark flat>
+              <v-toolbar-title>User Login</v-toolbar-title>
+              <v-spacer />
+            </v-toolbar>
+            <v-card-text>
+              <v-form ref="form">
+                <v-autocomplete
+                  label="Select User"
+                  name="login"
+                  prepend-icon="person"
+                  :key="userName"
+                  v-model="userName"
+                  :items="userNames"
+                  :rules="[v => !!v || 'User Name is required']"
+                  v-on:change="userNameChange"
+                  @click.native="showError = false"
+                ></v-autocomplete>
+                <v-text-field
+                  :rules="[v => !!v || 'Password is required']"
+                  id="password"
+                  label="Password"
+                  name="password"
+                  prepend-icon="lock"
+                  type="password"
+                  v-model="password"
+                  clearable
+                  @click.native="showError = false"
+                />
+              </v-form>
+            </v-card-text>
+            <v-card-actions>
+              <v-spacer />
+              <v-btn color="primary" @click.native="login">Login</v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-content>
+</template>
+<script>
+import router from "../router";
+export default {
+  name: "UserLogin",
+  methods: {
+    login() {
+      this.invalidUser = true;
+      if (this.$refs.form.validate()) {
+        // validate login
+        if (this.password == "1234") {
+          this.invalidUser = false;
+        }
+        if (this.invalidUser) {
+          console.log("inside for invalid user", this.invalidUser);
+          // reset the form
+          // display error message
+          this.password = "";
+          this.showError = true;
+        } else {
+          router.push({ path: "home" });
+        }
+      }
+    },
+    userNameChange() {},
+    resetModel() {}
+  },
+  data() {
+    return {
+      valid: true,
+      showError: false,
+      invalidUser: false,
+      userName: "",
+      password: "",
+      userNames: ["Krishna", "Shiva", "Sandeep"]
+    };
+  }
+};
+</script>

frontend/src/main.js

@@ -1,14 +1,15 @@
-import Vue from 'vue';
-import App from './App.vue';
-import router from './router';
-import store from './store';
-import vuetify from './plugins/vuetify';
-import Vuetify from 'vuetify';
+import Vue from "vue";
+import App from "./App.vue";
+import "./registerServiceWorker";
+import router from "./router";
+import store from "./store";
+import vuetify from "@/plugins/vuetify";
+
 Vue.config.productionTip = false;
-Vue.use(Vuetify)
+
 new Vue({
   router,
   store,
   vuetify,
-  render: (h) => h(App)
-}).$mount('#app');
+  render: h => h(App)
+}).$mount("#app");

frontend/src/plugins/vuetify.js

@@ -1,7 +1,14 @@
-import Vue from 'vue';
-import Vuetify from 'vuetify/lib';
+import "material-design-icons-iconfont/dist/material-design-icons.css"; // Ensure you are using css-loader
+import Vue from "vue";
+import Vuetify from "vuetify";
+import "vuetify/dist/vuetify.min.css";
 
 Vue.use(Vuetify);
 
-export default new Vuetify({
-});
+const opts = {
+  icons: {
+    iconfont: "md" // 'mdi' || 'mdiSvg' || 'md' || 'fa' || 'fa4' || 'faSvg'
+  }
+};
+
+export default new Vuetify(opts);

frontend/src/registerServiceWorker.js

@@ -0,0 +1,34 @@
+/* eslint-disable no-console */
+
+import { register } from "register-service-worker";
+
+if (process.env.NODE_ENV === "production") {
+  register(`${process.env.BASE_URL}service-worker.js`, {
+    ready() {
+      console.log(
+        "App is being served from cache by a service worker.\n" +
+          "For more details, visit https://goo.gl/AFskqB"
+      );
+    },
+    registered() {
+      console.log("Service worker has been registered.");
+    },
+    cached() {
+      console.log("Content has been cached for offline use.");
+    },
+    updatefound() {
+      console.log("New content is downloading.");
+    },
+    updated() {
+      console.log("New content is available; please refresh.");
+    },
+    offline() {
+      console.log(
+        "No internet connection found. App is running in offline mode."
+      );
+    },
+    error(error) {
+      console.error("Error during service worker registration:", error);
+    }
+  });
+}