Syncing master with develop

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",

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>

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'});
+  },
+};

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>

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>

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>

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>

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';

src/app/baluster/index.ts

@@ -0,0 +1,2 @@
+export { default as routes } from './routes';
+export { jamb as vuex } from './vuex';

src/app/baluster/routes.ts

@@ -0,0 +1,19 @@
+import { DefaultCard, BalusterMasterCard, ParamountCard, PronouncementCard } from './components';
+
+export default [
+  {
+    path: '/baluster',
+    component: BalusterMasterCard,
+    children: [
+      {
+        path: '/',
+        components: {
+          default: DefaultCard,
+          paramount: ParamountCard,
+          pronouncement: PronouncementCard,
+        },
+        name: 'baluster',
+      },
+    ],
+  },
+];

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);
+    });
+  },
+};

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;
+  },
+};

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,
+};

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 = '';
+  },
+};

src/app/baluster/vuex/types.ts

@@ -0,0 +1,4 @@
+export interface JambState {
+  message: string;
+  error: boolean;
+}

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'});
   },
 };

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>
 
@@ -26,10 +31,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;

src/app/mixins/api.ts

@@ -4,4 +4,15 @@ export const api = {
   getLocation(params: any) {
     return HTTP.get('https://restcountries.eu/rest/v2/regionalbloc/SAARC', {responseType: 'json'});
   },
+
+  getFeeds() {
+    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/',
+    );
+  },
 };

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';

src/app/mixins/mixin/feed_card.ts

@@ -0,0 +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() {
+    this.feedData().then(() => {
+      this.quoteData();
+    });
+  }
+}

src/app/mixins/mixin/location.ts

@@ -1,13 +1,12 @@
 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;
 
   private created() {
     this.locationData();

src/app/mixins/vuex/actions.ts

@@ -1,11 +1,22 @@
 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 {
+    return api.getFeeds().then((response: any) => {
+      commit('sampleFeedsLoaded', response.data);
+    });
+  },
+  quoteData({commit}): any {
+    return api.getQuote().then((response) => {
+      commit('sampleQuoteLoaded', response.data);
+    });
+  },
 };

src/app/mixins/vuex/getters.ts

@@ -1,11 +1,32 @@
 import { GetterTree } from 'vuex';
-import { LocationState } from './types';
+import { MixinState, QuoteState, CountryState } 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) => {
-      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 {countries} = state;
+    return countries && countries.map((l: CountryState) => {
+      return {
+        name: l.name,
+        flag: l.flag,
+        info: {
+          capital: l.capital,
+          population: l.population,
+          region: l.region,
+          languages: l.languages.join(', '),
+          nativeName: l.nativeName,
+          area: l.area,
+        },
+      };
     });
   },
+
+  getQuoteState(state): QuoteState {
+    const {quote} = state;
+    return quote ? quote : {author: '', quote: '', category: ''};
+  },
 };

src/app/mixins/vuex/index.ts

@@ -4,16 +4,19 @@ 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 = {
+  feed: undefined,
+  quote: undefined,
+  country: undefined,
+  countries: [],
+  feeds: [],
 };
 
 const namespaced: boolean = true;
 
-export const location: Module<LocationState, RootState> = {
+export const location: Module<MixinState, RootState> = {
   namespaced,
   state,
   getters,