<repo_name>RupeshSeth/jobproject<file_sep>/README.md
# Test Project TASK INTRODUCTION

```
In this application its displays the orders received and its status - (Order Received,
Preparing , Ready to serve).

All the Orders are display in list view with order Id, Customer Name, No. of Items
ordered, Total Amount of the Order, Status of the Order and a clickable Change Status
button, that changes status of the order to the next state automatically on click.

```
## How to Install the Test Project TASK
```
Download the Test ProjectTask in your system using git clone command or download zip file provided in this repo 
(https://github.com/RupeshSeth/jobproject)
```
## Project setup
```
npm install
```
#### Compiles and hot-reloads for development
```
npm run serve
```


```
user email-Id - <EMAIL>

```

## Dependencies
- VuetifyJS (CSS and javascript framework for vuejs)
- node-snackbar (to display the error and success message)

## LIVE Demo 
(https://vigilant-hodgkin-6e9e13.netlify.app) 
<file_sep>/src/router/index.ts
import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'
import auth$AuthLayout from '@/layout/AuthLayout.vue';
import auth$Login from '../views/Login.vue';
import testproject$Home from '../views/Home.vue';
import testproject$RootLayout from '@/layout/RootLayout.vue';
import testproject$Header from '@/views/nav/Header.vue';
import testproject$LeftNav from '@/views/nav/LeftNav.vue';
import testproject$Footer from '@/views/nav/Footer.vue';


Vue.use(VueRouter)

const routes: Array<RouteConfig> = [


  { path: '/auth', meta : {},   components : { default : auth$AuthLayout},
	children : [
		{ path: '', redirect: { name : 'Auth.Login'}}, 
		{ path: 'login', meta : {},  name: 'Auth.Login', components : { default : auth$Login}  }
] },


  {path: '/', meta : {},   components : { default : testproject$RootLayout},
		children : [
			 { path: '/', redirect: { name : 'Auth.Login'}}, 
       { path: 'home', meta : {},  name: 'Root.Home', components : { header : testproject$Header, leftnav : testproject$LeftNav, footer : testproject$Footer, default : testproject$Home}}
    ]
  }


  
]

const router = new VueRouter({
  routes
})

export default router
<file_sep>/src/custom-filter.ts
import { Vue } from 'vue-property-decorator';


export default class CustomFilters {
	public static setup() {
		this.withBase();
		this.toCurrency();
	}

	private static withBase() {
		Vue.filter('withBase', (value: string) => {
			// console.log('I am in custom filter: withBase : ');
			// console.log(process.env.BASE_URL);
			return process.env.BASE_URL + value;
		});
	}
	
	private static toCurrency() {
		Vue.filter('toCurrency', (value: number) => {
			if (typeof value !== 'number') {
				return value;
			}
			const formatter = new Intl.NumberFormat('en-US', {
				style: 'currency',
				currency: 'INR',
				minimumFractionDigits: 0
			});
			return formatter.format(value);
		});
	}



	
    
}
<file_sep>/src/plugins/vuetify.ts
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import 'material-design-icons-iconfont/dist/material-design-icons.css'
Vue.use(Vuetify);

export default new Vuetify({
    
});
<file_sep>/src/main.ts
import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify';
import CustomFilters from './custom-filter'; 

// for message Bar to display the success, error message.
import 'node-snackbar/dist/snackbar.min.css';
import 'node-snackbar/dist/snackbar.min.js';

Vue.config.productionTip = false

CustomFilters.setup();

new Vue({
  router,
  store,
  vuetify,
  render: h => h(App)
}).$mount('#app')
