From f4407668834ea82b087fc58cb181a208298dd5c2 Mon Sep 17 00:00:00 2001
From: Vimlesh Patel <vimlesh@jombay.com>
Date: Wed, 14 Nov 2018 23:54:29 +0530
Subject: [PATCH 01/10] slider bootstrap

---
 src/app/mixins/mixin/location.ts              |  3 +-
 src/app/mixins/vuex/getters.ts                | 15 ++++++++
 src/app/sample/components/SampleComponent.vue | 35 +++++++++++++++++++
 3 files changed, 52 insertions(+), 1 deletion(-)

diff --git a/src/app/mixins/mixin/location.ts b/src/app/mixins/mixin/location.ts
index cee144b..628de9b 100644
--- a/src/app/mixins/mixin/location.ts
+++ b/src/app/mixins/mixin/location.ts
@@ -8,7 +8,8 @@ export class Location extends Vue {
   @State('mixins') private location!: LocationState;
   @Action('locationData', {namespace: 'mixins'}) private locationData: any;
   @Getter('list', {namespace: 'mixins'}) private list: any;
-
+  @Getter('sliderList', {namespace: 'mixins'}) private sliderList: any;
+  
   private created() {
     this.locationData();
   }
diff --git a/src/app/mixins/vuex/getters.ts b/src/app/mixins/vuex/getters.ts
index 37e143f..80dcc05 100644
--- a/src/app/mixins/vuex/getters.ts
+++ b/src/app/mixins/vuex/getters.ts
@@ -8,4 +8,19 @@ export const getters: GetterTree<LocationState, RootState> = {
       return { name: l.name, capital: l.capital, population: l.population, region: l.region };
     });
   },
+  sliderList(state): any {
+    return state && state.list.map((l: any) => {
+      return {
+        name: l.name,
+        flag: l.flag,
+        info: {
+          capital: l.capital,
+          population: l.population,
+          region: l.region,
+          languages: l.languages.map((l: any) => l.name).join(', '),
+          nativeName: l.nativeName,
+        },
+      };
+    });
+  }
 };
diff --git a/src/app/sample/components/SampleComponent.vue b/src/app/sample/components/SampleComponent.vue
index 72f9ddd..a8c82aa 100644
--- a/src/app/sample/components/SampleComponent.vue
+++ b/src/app/sample/components/SampleComponent.vue
@@ -8,6 +8,24 @@
       </p>
       <b-button href="/user-login" variant="primary">Second Module</b-button>
     </b-card>
+    <b-card tag="article" style="max-width: 100%" class="mb-2">
+      <b-carousel id="carousel1"
+        background="#ababab"
+        :interval="0"
+        v-model="slide"
+        controls
+        @sliding-start="onSlideStart"
+        @sliding-end="onSlideEnd"
+      >
+        <b-carousel-slide v-for="country in sliderList"
+          :key="country.name"
+          :caption="country.name"
+          img-blank :img-alt="country.name"
+        >
+          <b-table stacked :items="[country.info]"></b-table>
+        </b-carousel-slide>
+      </b-carousel>
+    </b-card>
     <b-card tag="article" style="max-width: 100%" class="mb-2">
       <b-table stacked :items="list" caption-top>
         <template slot="table-caption">
@@ -32,8 +50,25 @@
     @State('sample') private sample!: SampleState;
     @Getter('message', {namespace}) private message!: string;
 
+    private data() {
+      return {
+        slide: 0,
+      };
+    }
     private mounted() {
       this.sampleData();
     }
+    onSlideStart (slide: any) {
+      console.log('Slide Start: '+slide);
+    }
+    onSlideEnd (slide: any) {
+      console.log('Slide End: '+slide);
+    }
   }
 </script>
+
+<style lang="scss">
+  caption {
+    text-align: center !important;
+  }
+</style>

From 181a2aaa4e51d82dd673fafecc82a02cd376cb0c Mon Sep 17 00:00:00 2001
From: Vimlesh Patel <vimlesh@jombay.com>
Date: Wed, 14 Nov 2018 23:59:12 +0530
Subject: [PATCH 02/10] spell check

---
 src/app/mixins/mixin/location.ts              | 2 +-
 src/app/mixins/vuex/getters.ts                | 4 ++--
 src/app/sample/components/SampleComponent.vue | 8 ++++----
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/app/mixins/mixin/location.ts b/src/app/mixins/mixin/location.ts
index 628de9b..e29dcf4 100644
--- a/src/app/mixins/mixin/location.ts
+++ b/src/app/mixins/mixin/location.ts
@@ -9,7 +9,7 @@ export class Location extends Vue {
   @Action('locationData', {namespace: 'mixins'}) private locationData: any;
   @Getter('list', {namespace: 'mixins'}) private list: any;
   @Getter('sliderList', {namespace: 'mixins'}) private sliderList: any;
-  
+
   private created() {
     this.locationData();
   }
diff --git a/src/app/mixins/vuex/getters.ts b/src/app/mixins/vuex/getters.ts
index 80dcc05..0ae036b 100644
--- a/src/app/mixins/vuex/getters.ts
+++ b/src/app/mixins/vuex/getters.ts
@@ -17,10 +17,10 @@ export const getters: GetterTree<LocationState, RootState> = {
           capital: l.capital,
           population: l.population,
           region: l.region,
-          languages: l.languages.map((l: any) => l.name).join(', '),
+          languages: l.languages.map((lang: any) => lang.name).join(', '),
           nativeName: l.nativeName,
         },
       };
     });
-  }
+  },
 };
diff --git a/src/app/sample/components/SampleComponent.vue b/src/app/sample/components/SampleComponent.vue
index a8c82aa..c53da08 100644
--- a/src/app/sample/components/SampleComponent.vue
+++ b/src/app/sample/components/SampleComponent.vue
@@ -58,11 +58,11 @@
     private mounted() {
       this.sampleData();
     }
-    onSlideStart (slide: any) {
-      console.log('Slide Start: '+slide);
+    private onSlideStart(slide: any) {
+      console.log('Slide Start: ' + slide);
     }
-    onSlideEnd (slide: any) {
-      console.log('Slide End: '+slide);
+    private onSlideEnd(slide: any) {
+      console.log('Slide End: ' + slide);
     }
   }
 </script>

From d1ea2f0cf4612e91089605c43e41d558d52f13b5 Mon Sep 17 00:00:00 2001
From: Vimlesh Patel <vimlesh@jombay.com>
Date: Thu, 15 Nov 2018 13:13:08 +0530
Subject: [PATCH 03/10] config changes and author info in package.json

---
 package.json  | 10 ++++++++--
 vue.config.js | 11 +++++++++++
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 8683756..4fd48c9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,12 @@
 {
-  "name": "sample",
-  "version": "0.1.0",
+  "name": "sample-vue-typescript",
+  "version": "1.0.0",
+  "description": "Sample project using typescript and bootstrap with vue",
+  "author": {
+    "name": "Vimlesh Patel",
+    "email": "vimlesh.0401@gmail.com",
+    "url": "https://github.com/vimlesh-0401/sample-vue-typescript"
+  },
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
diff --git a/vue.config.js b/vue.config.js
index b359cf2..c089d2b 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -13,6 +13,17 @@ module.exports = {
     },
     devServer: {
       // open: true,
+      setup: (app, server) => {
+        //Write custom handler.
+      },
+      before: (app, server) => {
+        // app.get('/api/status', (request, response) => {
+        // })
+      },
+      overlay: {
+        warnings: true,
+        errors: true,
+      },
     }
   }
 }
\ No newline at end of file

From 04f6b262c2d1611db609379e71f93bea2c0537bb Mon Sep 17 00:00:00 2001
From: Vimlesh Patel <vimlesh@jombay.com>
Date: Thu, 15 Nov 2018 21:30:33 +0530
Subject: [PATCH 04/10] more config changed

---
 src/app/login/api.ts |  6 +-----
 src/http.ts          | 12 +++++-------
 vue.config.js        |  9 +++++++--
 3 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/app/login/api.ts b/src/app/login/api.ts
index ff8caf3..27d1dbd 100644
--- a/src/app/login/api.ts
+++ b/src/app/login/api.ts
@@ -1,11 +1,7 @@
-import { HTTP, CLIENT } from '../../http';
+import { HTTP } from '../../http';
 
 export const api = {
   getServerStatus(params: any) {
-    params.client_id = CLIENT.client_id;
-    params.client_secret = CLIENT.client_secret;
-    params.scope = CLIENT.scope;
-
     return HTTP.get('https://randomuser.me/api/', {responseType: 'json'});
   },
 };
diff --git a/src/http.ts b/src/http.ts
index 9893337..76d3403 100644
--- a/src/http.ts
+++ b/src/http.ts
@@ -1,14 +1,12 @@
 import axios from 'axios';
-/**
- * Move these configurations to evn specific files.
- */
+
 const config = {
   NODE_ENV: process.env.NODE_ENV,
-  BASE_URL: process.env.baseURL,
+  BASE_URL: process.env.VUE_APP_BASE_URL,
   CLIENT: {
-    scope: '"user"',
-    client_id: process.env.client_id,
-    client_secret: process.env.client_secret,
+    SCOPE: process.env.VUE_APP_SCOPE,
+    CLIENT_ID: process.env.VUE_APP_CLIENT_ID,
+    CLIENT_SECRET: process.env.VUE_APP_CLIENT_SECRET,
   },
 };
 
diff --git a/vue.config.js b/vue.config.js
index c089d2b..cb06b1c 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -8,13 +8,18 @@ module.exports = {
       alias: {
         '@': `${projectRoot}/src`,
         '~': `${projectRoot}/src/assets`,
-        'HTTP': `${projectRoot}/src`,
       }
     },
     devServer: {
       // open: true,
       setup: (app, server) => {
-        //Write custom handler.
+        const CONFIG_CHECKS = ['VUE_APP_CLIENT_ID', 'VUE_APP_CLIENT_SECRET', 'VUE_APP_BASE_URL', 'VUE_APP_SCOPE' ];
+
+        for (const key of CONFIG_CHECKS) {
+          if (process.env[key] === undefined) {
+            throw new Error(`value for ${key} is not defined.. Please setup .env variables.`);
+          }
+        }
       },
       before: (app, server) => {
         // app.get('/api/status', (request, response) => {

From 77b025b7b3140e6c2da933040b94df1f8891ef92 Mon Sep 17 00:00:00 2001
From: Vimlesh Patel <vimlesh@jombay.com>
Date: Thu, 15 Nov 2018 23:32:58 +0530
Subject: [PATCH 05/10] create mixing with collections and group of data

---
 src/app/login/components/LoginBaseCard.vue    |  5 ++++-
 src/app/mixins/api.ts                         |  4 ++++
 src/app/mixins/index.ts                       |  2 ++
 src/app/mixins/mixin/feed_card.ts             | 10 ++++++++++
 src/app/mixins/vuex/actions.ts                | 10 ++++++++--
 src/app/mixins/vuex/getters.ts                | 10 ++++++----
 src/app/mixins/vuex/index.ts                  | 12 +++++++-----
 src/app/mixins/vuex/mutations.ts              | 12 ++++++------
 src/app/mixins/vuex/types.ts                  | 12 ++++++++++++
 src/app/sample/components/SampleComponent.vue |  4 ++--
 10 files changed, 61 insertions(+), 20 deletions(-)
 create mode 100644 src/app/mixins/mixin/feed_card.ts

diff --git a/src/app/login/components/LoginBaseCard.vue b/src/app/login/components/LoginBaseCard.vue
index f790211..7080180 100644
--- a/src/app/login/components/LoginBaseCard.vue
+++ b/src/app/login/components/LoginBaseCard.vue
@@ -26,10 +26,13 @@
   import Vue from 'vue';
   import { State, Action, Getter } from 'vuex-class';
   import { LoginState, User} from '../vuex/types';
+  import { FeedCardMixin } from '@/app/mixins';
+  import { Mixins } from 'vue-mixin-decorator';
+
   const namespace: string = 'login';
 
   @Component
-  export default class LoginBaseCard extends Vue {
+  export default class LoginBaseCard extends Mixins<FeedCardMixin>(FeedCardMixin) {
     @State('login') private login!: LoginState;
     @Action('fetchData', {namespace}) private fetchData: any;
     @Getter('name', {namespace}) private name!: string;
diff --git a/src/app/mixins/api.ts b/src/app/mixins/api.ts
index ea8c32a..21fad1a 100644
--- a/src/app/mixins/api.ts
+++ b/src/app/mixins/api.ts
@@ -4,4 +4,8 @@ export const api = {
   getLocation(params: any) {
     return HTTP.get('https://restcountries.eu/rest/v2/regionalbloc/SAARC', {responseType: 'json'});
   },
+
+  getFeeds() {
+    return HTTP.get('http://www.flickr.com/services/feeds/photos_public.gne?tags=soccer', { responseType: 'json'});
+  },
 };
diff --git a/src/app/mixins/index.ts b/src/app/mixins/index.ts
index f710cf5..de95ffc 100644
--- a/src/app/mixins/index.ts
+++ b/src/app/mixins/index.ts
@@ -1 +1,3 @@
 export { location as vuex } from './vuex';
+export { Location as LocationMixin } from './mixin/location';
+export { FeedCard as FeedCardMixin } from './mixin/feed_card';
diff --git a/src/app/mixins/mixin/feed_card.ts b/src/app/mixins/mixin/feed_card.ts
new file mode 100644
index 0000000..e41656c
--- /dev/null
+++ b/src/app/mixins/mixin/feed_card.ts
@@ -0,0 +1,10 @@
+import { Mixin } from 'vue-mixin-decorator';
+import Vue from 'vue';
+
+@Mixin
+export class FeedCard extends Vue {
+
+  public created() {
+    console.log('created feed mixin');
+  }
+}
diff --git a/src/app/mixins/vuex/actions.ts b/src/app/mixins/vuex/actions.ts
index ef1d69f..7774ecc 100644
--- a/src/app/mixins/vuex/actions.ts
+++ b/src/app/mixins/vuex/actions.ts
@@ -1,11 +1,17 @@
 import { ActionTree } from 'vuex';
-import { LocationState } from './types';
+import { MixinState } from './types';
 import { RootState } from '@/app/types';
 import { api } from '../api';
-export const actions: ActionTree<LocationState, RootState> = {
+export const actions: ActionTree<MixinState, RootState> = {
   locationData({commit}): any {
     api.getLocation({}).then((response: any) => {
       commit('sampleLocationLoaded', response.data);
     });
   },
+
+  feedData({commit}): any {
+    api.getFeeds().then((response: any) => {
+      console.log(response);
+    });
+  },
 };
diff --git a/src/app/mixins/vuex/getters.ts b/src/app/mixins/vuex/getters.ts
index 0ae036b..311d529 100644
--- a/src/app/mixins/vuex/getters.ts
+++ b/src/app/mixins/vuex/getters.ts
@@ -1,15 +1,17 @@
 import { GetterTree } from 'vuex';
-import { LocationState } from './types';
+import { MixinState } from './types';
 import { RootState } from '../../types';
 
-export const getters: GetterTree<LocationState, RootState> = {
+export const getters: GetterTree<MixinState, RootState> = {
   list(state): any {
-    return state && state.list.map((l: any) => {
+    const { location } = state;
+    return location && location.list.map((l: any) => {
       return { name: l.name, capital: l.capital, population: l.population, region: l.region };
     });
   },
   sliderList(state): any {
-    return state && state.list.map((l: any) => {
+    const {location} = state;
+    return location && location.list.map((l: any) => {
       return {
         name: l.name,
         flag: l.flag,
diff --git a/src/app/mixins/vuex/index.ts b/src/app/mixins/vuex/index.ts
index bafc89e..bcf75ba 100644
--- a/src/app/mixins/vuex/index.ts
+++ b/src/app/mixins/vuex/index.ts
@@ -4,16 +4,18 @@ import { actions } from './actions';
 import { mutations  } from './mutations';
 
 import { RootState } from '../../types';
-import { LocationState } from './types';
+import { MixinState } from './types';
 
-export const state: LocationState = {
-  list: [],
-  error: false,
+export const state: MixinState = {
+  location: undefined,
+  feed: undefined,
+  locations: [],
+  feeds: [],
 };
 
 const namespaced: boolean = true;
 
-export const location: Module<LocationState, RootState> = {
+export const location: Module<MixinState, RootState> = {
   namespaced,
   state,
   getters,
diff --git a/src/app/mixins/vuex/mutations.ts b/src/app/mixins/vuex/mutations.ts
index 8523428..a5f4771 100644
--- a/src/app/mixins/vuex/mutations.ts
+++ b/src/app/mixins/vuex/mutations.ts
@@ -1,14 +1,14 @@
 import { MutationTree } from 'vuex';
-import { LocationState } from './types';
+import { MixinState, LocationState } from './types';
 
-export const mutations: MutationTree<LocationState> = {
+export const mutations: MutationTree<MixinState> = {
   sampleLocationLoaded(state, payload: any) {
-    state.list = payload;
-    state.error = false;
+    const location: LocationState = {list: payload, error: false};
+    state.location = location;
   },
 
   locationError(state) {
-    state.error = true;
-    state.list = [];
+    const location: LocationState = {list: [], error: true};
+    state.location = location;
   },
 };
diff --git a/src/app/mixins/vuex/types.ts b/src/app/mixins/vuex/types.ts
index 7014e36..997dd54 100644
--- a/src/app/mixins/vuex/types.ts
+++ b/src/app/mixins/vuex/types.ts
@@ -2,3 +2,15 @@ export interface LocationState {
   list: any;
   error: boolean;
 }
+
+export interface FeedState {
+  error: boolean;
+  feed: any;
+}
+
+export interface MixinState {
+  location?: LocationState;
+  locations: LocationState[];
+  feed?: FeedState;
+  feeds: FeedState[];
+}
diff --git a/src/app/sample/components/SampleComponent.vue b/src/app/sample/components/SampleComponent.vue
index c53da08..d5a58ac 100644
--- a/src/app/sample/components/SampleComponent.vue
+++ b/src/app/sample/components/SampleComponent.vue
@@ -40,12 +40,12 @@
   import Component from 'vue-class-component';
   import { State, Action, Getter } from 'vuex-class';
   import { SampleState } from '../vuex/types';
-  import { Location } from '@/app/mixins/mixin/location';
+  import { LocationMixin } from '@/app/mixins';
   import { Mixins } from 'vue-mixin-decorator';
   const namespace: string = 'sample';
 
   @Component
-  export default class SampleComponent extends Mixins<Location>(Location) {
+  export default class SampleComponent extends Mixins<LocationMixin>(LocationMixin) {
     @Action('sampleData', {namespace}) private sampleData: any;
     @State('sample') private sample!: SampleState;
     @Getter('message', {namespace}) private message!: string;

From b134dcc1925ca5d13c20906d3b1a5a1483890315 Mon Sep 17 00:00:00 2001
From: Vimlesh Patel <vimlesh@jombay.com>
Date: Thu, 22 Nov 2018 12:53:43 +0530
Subject: [PATCH 06/10] modification in state and collections

---
 src/app/login/components/LoginBaseCard.vue    |  5 +++
 src/app/mixins/api.ts                         |  9 ++++-
 src/app/mixins/mixin/feed_card.ts             | 11 +++++--
 src/app/mixins/mixin/location.ts              |  2 --
 src/app/mixins/vuex/actions.ts                |  9 +++--
 src/app/mixins/vuex/getters.ts                | 20 ++++++-----
 src/app/mixins/vuex/index.ts                  |  5 +--
 src/app/mixins/vuex/mutations.ts              | 33 ++++++++++++++++---
 src/app/mixins/vuex/types.ts                  | 28 ++++++++++++----
 src/app/sample/components/SampleComponent.vue |  5 ++-
 vue.config.js                                 |  2 +-
 11 files changed, 98 insertions(+), 31 deletions(-)

diff --git a/src/app/login/components/LoginBaseCard.vue b/src/app/login/components/LoginBaseCard.vue
index 7080180..c633f45 100644
--- a/src/app/login/components/LoginBaseCard.vue
+++ b/src/app/login/components/LoginBaseCard.vue
@@ -18,6 +18,11 @@
         </b-row>
       </b-form>
     </b-card>
+    <b-card :title="quote.author" :sub-title="quote.category">
+      <p class="card-text">
+        {{quote.quote}}
+      </p>
+    </b-card>
   </div>
 </template>
 
diff --git a/src/app/mixins/api.ts b/src/app/mixins/api.ts
index 21fad1a..5d141c2 100644
--- a/src/app/mixins/api.ts
+++ b/src/app/mixins/api.ts
@@ -6,6 +6,13 @@ export const api = {
   },
 
   getFeeds() {
-    return HTTP.get('http://www.flickr.com/services/feeds/photos_public.gne?tags=soccer', { responseType: 'json'});
+    return HTTP.get(
+      'http://quotesondesign.com//wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1',
+    );
+  },
+  getQuote() {
+    return HTTP.get(
+      'https://talaikis.com/api/quotes/random/',
+    );
   },
 };
diff --git a/src/app/mixins/mixin/feed_card.ts b/src/app/mixins/mixin/feed_card.ts
index e41656c..584e778 100644
--- a/src/app/mixins/mixin/feed_card.ts
+++ b/src/app/mixins/mixin/feed_card.ts
@@ -1,10 +1,17 @@
 import { Mixin } from 'vue-mixin-decorator';
 import Vue from 'vue';
+import { Action, State, Getter } from 'vuex-class';
+import { MixinState, QuoteState } from '../vuex/types';
 
 @Mixin
 export class FeedCard extends Vue {
-
+  @State('mixins') private mixin!: MixinState;
+  @Action('feedData', {namespace: 'mixins'}) private feedData: any;
+  @Action('quoteData', {namespace: 'mixins'}) private quoteData: any;
+  @Getter('getQuoteState', {namespace: 'mixins'}) private quote!: QuoteState;
   public created() {
-    console.log('created feed mixin');
+    this.feedData().then(() => {
+      this.quoteData();
+    });
   }
 }
diff --git a/src/app/mixins/mixin/location.ts b/src/app/mixins/mixin/location.ts
index e29dcf4..4fde7f6 100644
--- a/src/app/mixins/mixin/location.ts
+++ b/src/app/mixins/mixin/location.ts
@@ -1,11 +1,9 @@
 import { Mixin } from 'vue-mixin-decorator';
 import Vue from 'vue';
 import { State, Getter, Action } from 'vuex-class';
-import { LocationState } from '../vuex/types';
 
 @Mixin
 export class Location extends Vue {
-  @State('mixins') private location!: LocationState;
   @Action('locationData', {namespace: 'mixins'}) private locationData: any;
   @Getter('list', {namespace: 'mixins'}) private list: any;
   @Getter('sliderList', {namespace: 'mixins'}) private sliderList: any;
diff --git a/src/app/mixins/vuex/actions.ts b/src/app/mixins/vuex/actions.ts
index 7774ecc..0e8b1d2 100644
--- a/src/app/mixins/vuex/actions.ts
+++ b/src/app/mixins/vuex/actions.ts
@@ -10,8 +10,13 @@ export const actions: ActionTree<MixinState, RootState> = {
   },
 
   feedData({commit}): any {
-    api.getFeeds().then((response: any) => {
-      console.log(response);
+    return api.getFeeds().then((response: any) => {
+      commit('sampleFeedsLoaded', response.data);
+    });
+  },
+  quoteData({commit}): any {
+    return api.getQuote().then((response) => {
+      commit('sampleQuoteLoaded', response.data);
     });
   },
 };
diff --git a/src/app/mixins/vuex/getters.ts b/src/app/mixins/vuex/getters.ts
index 311d529..3e93276 100644
--- a/src/app/mixins/vuex/getters.ts
+++ b/src/app/mixins/vuex/getters.ts
@@ -1,17 +1,15 @@
 import { GetterTree } from 'vuex';
-import { MixinState } from './types';
+import { MixinState, QuoteState, CountryState } from './types';
 import { RootState } from '../../types';
 
 export const getters: GetterTree<MixinState, RootState> = {
   list(state): any {
-    const { location } = state;
-    return location && location.list.map((l: any) => {
-      return { name: l.name, capital: l.capital, population: l.population, region: l.region };
-    });
+    const { countries } = state;
+    return countries.map((c) => c);
   },
   sliderList(state): any {
-    const {location} = state;
-    return location && location.list.map((l: any) => {
+    const {countries} = state;
+    return countries && countries.map((l: CountryState) => {
       return {
         name: l.name,
         flag: l.flag,
@@ -19,10 +17,16 @@ export const getters: GetterTree<MixinState, RootState> = {
           capital: l.capital,
           population: l.population,
           region: l.region,
-          languages: l.languages.map((lang: any) => lang.name).join(', '),
+          languages: l.languages.join(', '),
           nativeName: l.nativeName,
+          area: l.area,
         },
       };
     });
   },
+
+  getQuoteState(state): QuoteState {
+    const {quote} = state;
+    return quote ? quote : {author: '', quote: '', category: ''};
+  },
 };
diff --git a/src/app/mixins/vuex/index.ts b/src/app/mixins/vuex/index.ts
index bcf75ba..a6ce383 100644
--- a/src/app/mixins/vuex/index.ts
+++ b/src/app/mixins/vuex/index.ts
@@ -7,9 +7,10 @@ import { RootState } from '../../types';
 import { MixinState } from './types';
 
 export const state: MixinState = {
-  location: undefined,
   feed: undefined,
-  locations: [],
+  quote: undefined,
+  country: undefined,
+  countries: [],
   feeds: [],
 };
 
diff --git a/src/app/mixins/vuex/mutations.ts b/src/app/mixins/vuex/mutations.ts
index a5f4771..9a2c143 100644
--- a/src/app/mixins/vuex/mutations.ts
+++ b/src/app/mixins/vuex/mutations.ts
@@ -1,14 +1,37 @@
 import { MutationTree } from 'vuex';
-import { MixinState, LocationState } from './types';
+import { MixinState, QuoteState, FeedState, CountryState } from './types';
 
 export const mutations: MutationTree<MixinState> = {
   sampleLocationLoaded(state, payload: any) {
-    const location: LocationState = {list: payload, error: false};
-    state.location = location;
+    console.log(payload);
+    for (const c of payload) {
+      const country: CountryState = {
+        name: c.name,
+        flag: c.flag,
+        capital: c.capital,
+        population: c.population,
+        region: c.region,
+        languages: c.languages.map((lang: any) => lang.name),
+        nativeName: c.nativeName,
+        area: c.area,
+      };
+      state.countries.push(country);
+    }
   },
 
   locationError(state) {
-    const location: LocationState = {list: [], error: true};
-    state.location = location;
+    state.country = undefined;
+  },
+
+  sampleQuoteLoaded(state, payload: any) {
+    const quote: QuoteState = { author: payload.author, category: payload.cat, quote: payload.quote };
+    state.quote = quote;
+  },
+
+  sampleFeedsLoaded(state, payload: any) {
+    for (const f of payload) {
+      const feed: FeedState = {id: f.ID, content: f.content, title: f.title};
+      state.feeds.push(feed);
+    }
   },
 };
diff --git a/src/app/mixins/vuex/types.ts b/src/app/mixins/vuex/types.ts
index 997dd54..334d7d1 100644
--- a/src/app/mixins/vuex/types.ts
+++ b/src/app/mixins/vuex/types.ts
@@ -1,16 +1,30 @@
-export interface LocationState {
-  list: any;
-  error: boolean;
+export interface CountryState {
+  name: string;
+  flag: string;
+  capital: string;
+  population: string;
+  region: string;
+  languages: string[];
+  nativeName: string;
+  area: number;
 }
 
 export interface FeedState {
-  error: boolean;
-  feed: any;
+  id: number;
+  title: string;
+  content: string;
+}
+
+export interface QuoteState {
+  author: string;
+  category: string;
+  quote: string;
 }
 
 export interface MixinState {
-  location?: LocationState;
-  locations: LocationState[];
+  country?: CountryState;
+  countries: CountryState[];
   feed?: FeedState;
   feeds: FeedState[];
+  quote?: QuoteState;
 }
diff --git a/src/app/sample/components/SampleComponent.vue b/src/app/sample/components/SampleComponent.vue
index d5a58ac..00e5562 100644
--- a/src/app/sample/components/SampleComponent.vue
+++ b/src/app/sample/components/SampleComponent.vue
@@ -18,7 +18,7 @@
         @sliding-end="onSlideEnd"
       >
         <b-carousel-slide v-for="country in sliderList"
-          :key="country.name"
+          :key="country.area"
           :caption="country.name"
           img-blank :img-alt="country.name"
         >
@@ -31,6 +31,9 @@
         <template slot="table-caption">
           Countries list
         </template>
+        <template slot="flag" slot-scope="row">
+          <img height="30px" :src="row.value"/>
+        </template>
       </b-table>
     </b-card>
   </div>
diff --git a/vue.config.js b/vue.config.js
index cb06b1c..72f2dd1 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -11,7 +11,7 @@ module.exports = {
       }
     },
     devServer: {
-      // open: true,
+      open: true,
       setup: (app, server) => {
         const CONFIG_CHECKS = ['VUE_APP_CLIENT_ID', 'VUE_APP_CLIENT_SECRET', 'VUE_APP_BASE_URL', 'VUE_APP_SCOPE' ];
 

From 3ea11b0f1b4aafe32e3fc04ad2b78de5b9cdf21c Mon Sep 17 00:00:00 2001
From: Vimlesh Patel <vimlesh@jombay.com>
Date: Thu, 22 Nov 2018 17:39:59 +0530
Subject: [PATCH 07/10] implementing named router views

---
 src/app/baluster/api.ts                       |  7 ++++++
 .../components/BalusterMasterCard.vue         | 19 ++++++++++++++++
 src/app/baluster/components/DefaultCard.vue   | 17 ++++++++++++++
 src/app/baluster/components/ParamountCard.vue | 17 ++++++++++++++
 .../baluster/components/PronouncementCard.vue | 17 ++++++++++++++
 src/app/baluster/components/index.ts          |  4 ++++
 src/app/baluster/index.ts                     |  2 ++
 src/app/baluster/routes.ts                    | 19 ++++++++++++++++
 src/app/baluster/vuex/actions.ts              | 11 ++++++++++
 src/app/baluster/vuex/getters.ts              | 10 +++++++++
 src/app/baluster/vuex/index.ts                | 22 +++++++++++++++++++
 src/app/baluster/vuex/mutations.ts            | 14 ++++++++++++
 src/app/baluster/vuex/types.ts                |  4 ++++
 src/app/mixins/vuex/mutations.ts              |  1 -
 src/app/routes.ts                             |  2 ++
 src/app/vuex.ts                               |  3 +++
 src/router.ts                                 |  2 +-
 17 files changed, 169 insertions(+), 2 deletions(-)
 create mode 100644 src/app/baluster/api.ts
 create mode 100644 src/app/baluster/components/BalusterMasterCard.vue
 create mode 100644 src/app/baluster/components/DefaultCard.vue
 create mode 100644 src/app/baluster/components/ParamountCard.vue
 create mode 100644 src/app/baluster/components/PronouncementCard.vue
 create mode 100644 src/app/baluster/components/index.ts
 create mode 100644 src/app/baluster/index.ts
 create mode 100644 src/app/baluster/routes.ts
 create mode 100644 src/app/baluster/vuex/actions.ts
 create mode 100644 src/app/baluster/vuex/getters.ts
 create mode 100644 src/app/baluster/vuex/index.ts
 create mode 100644 src/app/baluster/vuex/mutations.ts
 create mode 100644 src/app/baluster/vuex/types.ts

diff --git a/src/app/baluster/api.ts b/src/app/baluster/api.ts
new file mode 100644
index 0000000..963dda9
--- /dev/null
+++ b/src/app/baluster/api.ts
@@ -0,0 +1,7 @@
+import { HTTP, CLIENT } from '../../http';
+
+export const api = {
+  fetchPickets(params: any) {
+    return HTTP.get('https://api.adviceslip.com/advice', {responseType: 'json'});
+  },
+};
diff --git a/src/app/baluster/components/BalusterMasterCard.vue b/src/app/baluster/components/BalusterMasterCard.vue
new file mode 100644
index 0000000..4af2868
--- /dev/null
+++ b/src/app/baluster/components/BalusterMasterCard.vue
@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <router-view></router-view>
+    <router-view name="paramount"></router-view>
+    <router-view name="pronouncement"></router-view>
+  </div>
+</template>
+
+<script lang="ts">
+  import Component from 'vue-class-component';
+  import Vue from 'vue';
+
+  @Component
+  export default class BalusterMasterCard extends Vue {
+    public created() {
+      console.log('creating....');
+    }
+  }
+</script>
diff --git a/src/app/baluster/components/DefaultCard.vue b/src/app/baluster/components/DefaultCard.vue
new file mode 100644
index 0000000..754eef8
--- /dev/null
+++ b/src/app/baluster/components/DefaultCard.vue
@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <h4> <b>Default:</b> Default Card</h4>
+  </div>
+</template>
+
+<script lang="ts">
+  import Component from 'vue-class-component';
+  import Vue from 'vue';
+  
+  @Component
+  export default class DefaultCard extends Vue {
+    public created() {
+      console.log('default created.');
+    }
+  }
+</script>
diff --git a/src/app/baluster/components/ParamountCard.vue b/src/app/baluster/components/ParamountCard.vue
new file mode 100644
index 0000000..a056b51
--- /dev/null
+++ b/src/app/baluster/components/ParamountCard.vue
@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <h4> <b>Paramount: </b> a long, sturdy piece of timber or metal set upright in the ground and used as a support or marker.</h4>
+  </div>
+</template>
+
+<script lang="ts">
+  import Component from 'vue-class-component';
+  import Vue from 'vue';
+  
+  @Component
+  export default class ParamountCard extends Vue {
+    public created() {
+      console.log('paramount created.');
+    }
+  }
+</script>
diff --git a/src/app/baluster/components/PronouncementCard.vue b/src/app/baluster/components/PronouncementCard.vue
new file mode 100644
index 0000000..76eca1d
--- /dev/null
+++ b/src/app/baluster/components/PronouncementCard.vue
@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <h3><b>Pronouncement: </b> formal or authoritative announcement or declaration.</h3>
+  </div>
+</template>
+
+<script lang="ts">
+  import Component from 'vue-class-component';
+  import Vue from 'vue';
+
+  @Component
+  export default class PronouncementCard extends Vue {
+    public created() {
+      console.log('pronounced created.');
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/src/app/baluster/components/index.ts b/src/app/baluster/components/index.ts
new file mode 100644
index 0000000..c02008d
--- /dev/null
+++ b/src/app/baluster/components/index.ts
@@ -0,0 +1,4 @@
+export { default as BalusterMasterCard } from './BalusterMasterCard.vue';
+export { default as ParamountCard } from './ParamountCard.vue';
+export { default as PronouncementCard } from './PronouncementCard.vue';
+export { default as DefaultCard } from './DefaultCard.vue';
diff --git a/src/app/baluster/index.ts b/src/app/baluster/index.ts
new file mode 100644
index 0000000..1646055
--- /dev/null
+++ b/src/app/baluster/index.ts
@@ -0,0 +1,2 @@
+export { default as routes } from './routes';
+export { jamb as vuex } from './vuex';
diff --git a/src/app/baluster/routes.ts b/src/app/baluster/routes.ts
new file mode 100644
index 0000000..e8de7b9
--- /dev/null
+++ b/src/app/baluster/routes.ts
@@ -0,0 +1,19 @@
+import { DefaultCard, BalusterMasterCard, ParamountCard, PronouncementCard } from './components';
+
+export default [
+  {
+    path: '/baluster',
+    component: BalusterMasterCard,
+    name: 'baluster',
+    children: [
+      {
+        path: '/',
+        components: {
+          default: DefaultCard,
+          paramount: ParamountCard,
+          pronouncement: PronouncementCard,
+        },
+      },
+    ],
+  },
+];
diff --git a/src/app/baluster/vuex/actions.ts b/src/app/baluster/vuex/actions.ts
new file mode 100644
index 0000000..e2f72ba
--- /dev/null
+++ b/src/app/baluster/vuex/actions.ts
@@ -0,0 +1,11 @@
+import { ActionTree } from 'vuex';
+import { JambState } from './types';
+import { RootState } from '@/app/types';
+import { api } from '../api';
+export const actions: ActionTree<JambState, RootState> = {
+  pickets({commit}): any {
+    api.fetchPickets({}).then((response: any) => {
+      console.log(response);
+    });
+  },
+};
diff --git a/src/app/baluster/vuex/getters.ts b/src/app/baluster/vuex/getters.ts
new file mode 100644
index 0000000..67a8527
--- /dev/null
+++ b/src/app/baluster/vuex/getters.ts
@@ -0,0 +1,10 @@
+import { GetterTree } from 'vuex';
+import { JambState } from './types';
+import { RootState } from '../../types';
+
+export const getters: GetterTree<JambState, RootState> = {
+  columns(state): string {
+    const {message} = state;
+    return message;
+  },
+};
diff --git a/src/app/baluster/vuex/index.ts b/src/app/baluster/vuex/index.ts
new file mode 100644
index 0000000..e991815
--- /dev/null
+++ b/src/app/baluster/vuex/index.ts
@@ -0,0 +1,22 @@
+import { Module } from 'vuex';
+import { getters } from './getters';
+import { actions } from './actions';
+import { mutations  } from './mutations';
+
+import { RootState } from '../../types';
+import { JambState } from './types';
+
+export const state: JambState = {
+  message: '',
+  error: false,
+};
+
+const namespaced: boolean = true;
+
+export const jamb: Module<JambState, RootState> = {
+  namespaced,
+  state,
+  getters,
+  actions,
+  mutations,
+};
diff --git a/src/app/baluster/vuex/mutations.ts b/src/app/baluster/vuex/mutations.ts
new file mode 100644
index 0000000..153e481
--- /dev/null
+++ b/src/app/baluster/vuex/mutations.ts
@@ -0,0 +1,14 @@
+import { MutationTree } from 'vuex';
+import { JambState } from './types';
+
+export const mutations: MutationTree<JambState> = {
+  sampleDataLoaded(state, payload: string) {
+    state.message = payload;
+    state.error = false;
+  },
+
+  sampleError(state) {
+    state.error = true;
+    state.message = '';
+  },
+};
diff --git a/src/app/baluster/vuex/types.ts b/src/app/baluster/vuex/types.ts
new file mode 100644
index 0000000..3fe9f90
--- /dev/null
+++ b/src/app/baluster/vuex/types.ts
@@ -0,0 +1,4 @@
+export interface JambState {
+  message: string;
+  error: boolean;
+}
diff --git a/src/app/mixins/vuex/mutations.ts b/src/app/mixins/vuex/mutations.ts
index 9a2c143..1faf5c8 100644
--- a/src/app/mixins/vuex/mutations.ts
+++ b/src/app/mixins/vuex/mutations.ts
@@ -3,7 +3,6 @@ import { MixinState, QuoteState, FeedState, CountryState } from './types';
 
 export const mutations: MutationTree<MixinState> = {
   sampleLocationLoaded(state, payload: any) {
-    console.log(payload);
     for (const c of payload) {
       const country: CountryState = {
         name: c.name,
diff --git a/src/app/routes.ts b/src/app/routes.ts
index 9b49756..3739afc 100644
--- a/src/app/routes.ts
+++ b/src/app/routes.ts
@@ -1,7 +1,9 @@
 import { routes as login } from './login';
 import { routes as sample } from './sample';
+import { routes as jamb } from './baluster';
 
 export default [
   ...login,
   ...sample,
+  ...jamb,
 ];
diff --git a/src/app/vuex.ts b/src/app/vuex.ts
index 3ccc6b6..9a96679 100644
--- a/src/app/vuex.ts
+++ b/src/app/vuex.ts
@@ -1,8 +1,11 @@
 import { vuex as login } from './login';
 import { vuex as sample } from './sample';
 import { vuex as mixins } from './mixins';
+import { vuex as jamb } from './baluster';
+
 export default {
   login,
   sample,
   mixins,
+  jamb,
 };
diff --git a/src/router.ts b/src/router.ts
index 067df4d..d910724 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -14,7 +14,7 @@ const router = new Router({
  * Configure pre request checks and router validations.
  * Access control.
  */
-router.beforeEach((to, from, next) => {
+router.beforeEach((to: any, from: any, next: any) => {
   next();
 });
 

From 0e9975786821b4562e7bf207e0c64ab3806415bf Mon Sep 17 00:00:00 2001
From: Vimlesh Patel <vimlesh@jombay.com>
Date: Thu, 22 Nov 2018 17:43:00 +0530
Subject: [PATCH 08/10] name of named routes

---
 src/app/baluster/routes.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/baluster/routes.ts b/src/app/baluster/routes.ts
index e8de7b9..e0e723a 100644
--- a/src/app/baluster/routes.ts
+++ b/src/app/baluster/routes.ts
@@ -4,7 +4,6 @@ export default [
   {
     path: '/baluster',
     component: BalusterMasterCard,
-    name: 'baluster',
     children: [
       {
         path: '/',
@@ -13,6 +12,7 @@ export default [
           paramount: ParamountCard,
           pronouncement: PronouncementCard,
         },
+        name: 'baluster',
       },
     ],
   },

From b2f0bed66803b8b9ee3a120940fa9664f8d04933 Mon Sep 17 00:00:00 2001
From: Vimlesh Patel <vimlesh@jombay.com>
Date: Thu, 22 Nov 2018 18:30:42 +0530
Subject: [PATCH 09/10] router guard update

---
 src/router.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/router.ts b/src/router.ts
index d910724..952042b 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import Router from 'vue-router';
+import Router, { Route } from 'vue-router';
 import { routes } from './app';
 
 Vue.use(Router);
@@ -14,7 +14,7 @@ const router = new Router({
  * Configure pre request checks and router validations.
  * Access control.
  */
-router.beforeEach((to: any, from: any, next: any) => {
+router.beforeEach((to: Route, from: Route, next) => {
   next();
 });
 

From d1516083c0ac5a662ff11c5ecba5c959eb1a0475 Mon Sep 17 00:00:00 2001
From: Vimlesh Patel <vimlesh@jombay.com>
Date: Thu, 22 Nov 2018 22:12:41 +0530
Subject: [PATCH 10/10] exploring more on router callbacks

---
 src/App.vue                                   |  4 ++--
 src/app/sample/components/SampleComponent.vue | 12 ++++++++++--
 src/app/sample/routes.ts                      |  5 +++++
 src/router.ts                                 | 10 +++++++++-
 4 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 74df185..43146ee 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,8 +5,8 @@
       <b-navbar-brand href="#">Sample App</b-navbar-brand>
       <b-collapse is-nav id="nav_collapse">
         <b-navbar-nav>
-          <b-nav-item href="/sample-component">First Module</b-nav-item>
-          <b-nav-item href="/user-login">Second Module</b-nav-item>
+          <b-nav-item href="/sample-component">Sample Component</b-nav-item>
+          <b-nav-item href="/user-login">Login Component</b-nav-item>
         </b-navbar-nav>
       </b-collapse>
     </b-navbar>
diff --git a/src/app/sample/components/SampleComponent.vue b/src/app/sample/components/SampleComponent.vue
index 00e5562..36efeb9 100644
--- a/src/app/sample/components/SampleComponent.vue
+++ b/src/app/sample/components/SampleComponent.vue
@@ -6,7 +6,7 @@
       <p class="card-text">
         {{message}}
       </p>
-      <b-button href="/user-login" variant="primary">Second Module</b-button>
+      <b-button href="/user-login" variant="primary">Login Component</b-button>
     </b-card>
     <b-card tag="article" style="max-width: 100%" class="mb-2">
       <b-carousel id="carousel1"
@@ -47,7 +47,15 @@
   import { Mixins } from 'vue-mixin-decorator';
   const namespace: string = 'sample';
 
-  @Component
+  /**
+   * router callback wont be called if you define them inside component class.
+   * You need to register them before component resolve.
+   */
+  @Component({
+    beforeRouteEnter: (to, from , next) => {
+      next();
+    },
+  })
   export default class SampleComponent extends Mixins<LocationMixin>(LocationMixin) {
     @Action('sampleData', {namespace}) private sampleData: any;
     @State('sample') private sample!: SampleState;
diff --git a/src/app/sample/routes.ts b/src/app/sample/routes.ts
index 18d0e14..ec35c1d 100644
--- a/src/app/sample/routes.ts
+++ b/src/app/sample/routes.ts
@@ -1,9 +1,14 @@
 import { SampleComponent } from './components';
+import { Route } from 'vue-router';
 
 export default [
   {
     path: '/sample-component',
     component: SampleComponent,
+    name: 'sample.component',
+    beforeEnter: (to: Route, from: Route, next: any) => {
+      next();
+    },
   },
   {
     path: '',
diff --git a/src/router.ts b/src/router.ts
index 952042b..4306db4 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -14,8 +14,16 @@ const router = new Router({
  * Configure pre request checks and router validations.
  * Access control.
  */
-router.beforeEach((to: Route, from: Route, next) => {
+router.beforeEach((to: Route, from: Route, next: any) => {
   next();
 });
 
+router.beforeResolve((to: Route, from: Route, next: any) => {
+  next();
+});
+
+router.afterEach((to: Route, from: Route) => {
+  // Here do something after everything is ready.
+});
+
 export default router;