From 6a1483895a84fb47a75a6694c269c4225ebc8364 Mon Sep 17 00:00:00 2001
From: Krushi Raj Tula <krushiraj123@gmail.com>
Date: Wed, 11 Sep 2019 19:33:55 +0530
Subject: [PATCH 1/7] WIP - Inital commit for #9

---
 src/components/DataDetails.vue       | 10 ++++++++++
 src/components/DataFilter.vue        | 10 ++++++++++
 src/components/DataListContainer.vue | 10 ++++++++++
 3 files changed, 30 insertions(+)
 create mode 100644 src/components/DataDetails.vue
 create mode 100644 src/components/DataFilter.vue
 create mode 100644 src/components/DataListContainer.vue

diff --git a/src/components/DataDetails.vue b/src/components/DataDetails.vue
new file mode 100644
index 0000000..dd9f19d
--- /dev/null
+++ b/src/components/DataDetails.vue
@@ -0,0 +1,10 @@
+<template></template>
+
+<script>
+export default {
+  name: "DataDetails"
+};
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/src/components/DataFilter.vue b/src/components/DataFilter.vue
new file mode 100644
index 0000000..924af94
--- /dev/null
+++ b/src/components/DataFilter.vue
@@ -0,0 +1,10 @@
+<template></template>
+
+<script>
+export default {
+  name: "DataFilter"
+};
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/src/components/DataListContainer.vue b/src/components/DataListContainer.vue
new file mode 100644
index 0000000..bdffdd1
--- /dev/null
+++ b/src/components/DataListContainer.vue
@@ -0,0 +1,10 @@
+<template></template>
+
+<script>
+export default {
+  name: "DataListContainer"
+};
+</script>
+
+<style>
+</style>
\ No newline at end of file

From a91079ee4849459bf5a5249803ea76038be2a334 Mon Sep 17 00:00:00 2001
From: Krushi Raj Tula <krushiraj123@gmail.com>
Date: Thu, 12 Sep 2019 01:58:27 +0530
Subject: [PATCH 2/7] DataListContainer added

* DataListContainer:
  --A generic container that accepts the list of items and iterates over it to render a list. It also provides pagination options.
  --childComponent prop will accept a component class that will be rendered if  the items in the list doesn't contain any property called `child`, which holds the component class.
  --Added QuestionListItem component to test.

TODO: DataFilter which passes filtered data to the above component. DataDetails which will show the detailed view of the list item selected.
---
 src/components/DataDetails.vue       |  25 ++++++-
 src/components/DataFilter.vue        |  25 ++++++-
 src/components/DataListContainer.vue | 108 ++++++++++++++++++++++++++-
 src/components/QuestionListItem.vue  |  57 ++++++++++++++
 src/components/index.js              |   1 +
 src/router/index.js                  |   6 ++
 src/views/Dashboard.vue              |  23 ++++++
 src/views/index.js                   |   1 +
 8 files changed, 234 insertions(+), 12 deletions(-)
 create mode 100644 src/components/QuestionListItem.vue
 create mode 100644 src/views/Dashboard.vue

diff --git a/src/components/DataDetails.vue b/src/components/DataDetails.vue
index dd9f19d..68815be 100644
--- a/src/components/DataDetails.vue
+++ b/src/components/DataDetails.vue
@@ -1,10 +1,27 @@
-<template></template>
+<template>
+  <v-card
+    :loading="false"
+    class="mx-auto my-12"
+  >
+    <v-card-title>
+      <slot name="title"></slot>
+    </v-card-title>
+    <v-card-text>
+      <slot></slot>
+    </v-card-text>
+    <v-divider class="mx-4"></v-divider>
+    <v-card-actions>
+      <slot name="actions"></slot>
+    </v-card-actions>
+  </v-card>
+</template>
 
 <script>
 export default {
-  name: "DataDetails"
+  name: 'Card',
 };
 </script>
 
-<style>
-</style>
\ No newline at end of file
+<style scoped>
+
+</style>
diff --git a/src/components/DataFilter.vue b/src/components/DataFilter.vue
index 924af94..68815be 100644
--- a/src/components/DataFilter.vue
+++ b/src/components/DataFilter.vue
@@ -1,10 +1,27 @@
-<template></template>
+<template>
+  <v-card
+    :loading="false"
+    class="mx-auto my-12"
+  >
+    <v-card-title>
+      <slot name="title"></slot>
+    </v-card-title>
+    <v-card-text>
+      <slot></slot>
+    </v-card-text>
+    <v-divider class="mx-4"></v-divider>
+    <v-card-actions>
+      <slot name="actions"></slot>
+    </v-card-actions>
+  </v-card>
+</template>
 
 <script>
 export default {
-  name: "DataFilter"
+  name: 'Card',
 };
 </script>
 
-<style>
-</style>
\ No newline at end of file
+<style scoped>
+
+</style>
diff --git a/src/components/DataListContainer.vue b/src/components/DataListContainer.vue
index bdffdd1..30a1079 100644
--- a/src/components/DataListContainer.vue
+++ b/src/components/DataListContainer.vue
@@ -1,10 +1,110 @@
-<template></template>
+<template>
+  <v-container fluid>
+    <v-data-iterator
+      :items="items"
+      :items-per-page.sync="itemsPerPage"
+      :footer-props="{ itemsPerPageOptions }"
+    >
+      <template v-slot:default="props">
+        <template v-for="(item, index) in props.items">
+          <component
+            :is="getChildComponent(item.child)"
+            v-bind="item.props"
+            :key="index">
+          </component>
+        </template>
+      </template>
+    </v-data-iterator>
+  </v-container>
+</template>
 
 <script>
+import QuestionListItem from './QuestionListItem';
+
+const dummyData = [
+  {
+    props: {
+      title: 'Frozen Yogurt',
+      category: 'Coding',
+      tags: ['some', 'random', 'tag'],
+    },
+  },
+  {
+    props: {
+      title: 'Frozen Yogurt',
+      category: 'Coding',
+      tags: ['some', 'random', 'tag'],
+    },
+  },
+  {
+    props: {
+      title: 'Frozen Yogurt',
+      category: 'Coding',
+      tags: ['some', 'random', 'tag'],
+      subCategory: 'Some categ',
+    },
+  },
+  {
+
+    props: {
+      title: 'Frozen Yogurt',
+      category: 'Coding',
+      tags: ['some', 'random', 'tag'],
+    },
+  },
+  {
+
+    props: {
+      title: 'Frozen Yogurt',
+      category: 'Coding',
+      tags: ['some', 'random', 'tag'],
+      subCategory: 'Some categ',
+    },
+  },
+  {
+
+    props: {
+      title: 'Frozen Yogurt',
+      category: 'Coding',
+      tags: ['some', 'random', 'tag'],
+      subCategory: 'Some categ',
+    },
+  },
+  {
+
+    props: {
+      title: 'Frozen Yogurt',
+      category: 'Coding',
+      tags: ['some', 'random', 'tag'],
+    },
+  },
+  {
+
+    props: {
+      title: 'Frozen Yogurt',
+      category: 'Coding',
+      tags: ['some', 'random', 'tag'],
+      subCategory: 'Some categ',
+    },
+  },
+];
+
 export default {
-  name: "DataListContainer"
+  name: 'DataListContainer',
+  data: () => ({
+    childComponent: QuestionListItem,
+    itemsPerPageOptions: [4, 8, 12],
+    itemsPerPage: 4,
+    items: dummyData,
+  }),
+  methods: {
+    getChildComponent(child) {
+      return child || this.childComponent;
+    },
+  },
 };
 </script>
 
-<style>
-</style>
\ No newline at end of file
+<style scoped>
+
+</style>
diff --git a/src/components/QuestionListItem.vue b/src/components/QuestionListItem.vue
new file mode 100644
index 0000000..c759aae
--- /dev/null
+++ b/src/components/QuestionListItem.vue
@@ -0,0 +1,57 @@
+<template>
+  <v-card
+      class="mx-auto"
+      :flat="isFlat"
+      :outlined="isOutlined"
+      :width="width"
+      :height="height"
+    >
+      <v-card-title>{{title}}</v-card-title>
+      <v-card-text>Category: {{category}}</v-card-text>
+      <span class="ml-4">
+        <v-icon left>mdi-label</v-icon>
+        <v-chip
+          v-for="(tag, index) in tags"
+          :key="index"
+          class="ma-2"
+          label
+        >
+          {{tag}}
+        </v-chip>
+      </span>
+      <br/>
+      <v-chip class="ml-4 mb-2" v-if="subCategory">{{subCategory}}</v-chip>
+  </v-card>
+</template>
+
+<script>
+export default {
+  name: 'QuestionListItem',
+  props: {
+    title: String,
+    category: String,
+    tags: Array,
+    subCategory: String,
+    isFlat: {
+      type: Boolean,
+      default: true,
+    },
+    isOutlined: {
+      type: Boolean,
+      default: true,
+    },
+    width: {
+      value: [Number, String],
+      default: '100%',
+    },
+    height: {
+      value: [Number, String],
+      default: 'auto',
+    },
+  },
+};
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/index.js b/src/components/index.js
index 35990f2..b7575c8 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -4,3 +4,4 @@ export { default as FormAlerts } from './FormAlerts';
 export { default as FormFields } from './FormFields';
 export { default as FormButtons } from './FormButtons';
 export { default as CustomForm } from './CustomForm';
+export { default as DataListContainer } from './DataListContainer';
diff --git a/src/router/index.js b/src/router/index.js
index 09c0baa..9e9e95d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -6,6 +6,7 @@ import {
   Register,
   Login,
   Profile,
+  Dashboard,
 } from '../views';
 
 Vue.use(Router);
@@ -39,5 +40,10 @@ export default new Router({
       name: 'profile',
       component: Profile,
     },
+    {
+      path: '/dashboard',
+      name: 'dashboard',
+      component: Dashboard,
+    },
   ],
 });
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
new file mode 100644
index 0000000..df86117
--- /dev/null
+++ b/src/views/Dashboard.vue
@@ -0,0 +1,23 @@
+<template>
+  <v-row>
+    <v-col cols="3">
+
+    </v-col>
+    <v-col cols="6">
+      <DataListContainer />
+    </v-col>
+    <v-col cols="3">
+
+    </v-col>
+  </v-row>
+</template>
+
+<script>
+import { DataListContainer } from '../components';
+
+export default {
+  components: {
+    DataListContainer,
+  },
+};
+</script>
diff --git a/src/views/index.js b/src/views/index.js
index c514584..b26da58 100644
--- a/src/views/index.js
+++ b/src/views/index.js
@@ -3,3 +3,4 @@ export { default as About } from './About';
 export { default as Login } from './Login';
 export { default as Register } from './Register';
 export { default as Profile } from './Profile';
+export { default as Dashboard } from './Dashboard';

From ac21f6b5c3a4fa7a817b064cf3ef6ab6efee49ad Mon Sep 17 00:00:00 2001
From: Krushi Raj Tula <krushiraj123@gmail.com>
Date: Thu, 12 Sep 2019 02:18:41 +0530
Subject: [PATCH 3/7] Update DataDetails.vue

Changed name, previous bane was not interfere for this. A left over work from copy paste
---
 src/components/DataDetails.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/DataDetails.vue b/src/components/DataDetails.vue
index 68815be..9ef03cb 100644
--- a/src/components/DataDetails.vue
+++ b/src/components/DataDetails.vue
@@ -18,7 +18,7 @@
 
 <script>
 export default {
-  name: 'Card',
+  name: 'DataDetails',
 };
 </script>
 

From a52ea0ff2bd99cf9c25b955f1d544c964fd28bd7 Mon Sep 17 00:00:00 2001
From: Krushi Raj Tula <krushiraj123@gmail.com>
Date: Thu, 12 Sep 2019 02:19:09 +0530
Subject: [PATCH 4/7] Update DataFilter.vue

Changed name, previous bane was not interfere for this. A left over work from copy paste
---
 src/components/DataFilter.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/DataFilter.vue b/src/components/DataFilter.vue
index 68815be..a88f84a 100644
--- a/src/components/DataFilter.vue
+++ b/src/components/DataFilter.vue
@@ -18,7 +18,7 @@
 
 <script>
 export default {
-  name: 'Card',
+  name: 'DataFilter',
 };
 </script>
 

From db51f229025dbffe3446feb4f6f24d3fcc914e90 Mon Sep 17 00:00:00 2001
From: Krushi Raj Tula <krushiraj123@gmail.com>
Date: Fri, 13 Sep 2019 19:28:12 +0530
Subject: [PATCH 5/7] update 2

Worked on data filter to be as generic as possible.

Added a search bar for data items container.
---
 public/index.html                             |   2 +
 src/components/DataDetails.vue                |  19 ++-
 src/components/DataFilter.vue                 |  61 +++++++--
 src/components/DataListContainer.vue          | 115 ++++++-----------
 src/components/ORFilterSection.vue            |  53 ++++++++
 src/components/ORFilterSectionItems.vue       | 122 ++++++++++++++++++
 .../common/ThreeSectionContainer.vue          |  47 +++++++
 src/components/common/index.js                |   3 +
 src/components/index.js                       |   5 +
 src/views/Dashboard.vue                       | 110 ++++++++++++++--
 10 files changed, 436 insertions(+), 101 deletions(-)
 create mode 100644 src/components/ORFilterSection.vue
 create mode 100644 src/components/ORFilterSectionItems.vue
 create mode 100644 src/components/common/ThreeSectionContainer.vue
 create mode 100644 src/components/common/index.js

diff --git a/public/index.html b/public/index.html
index 12856fa..79a121e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,6 +5,8 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material Icons'
+    rel="stylesheet" type="text/css">
     <title>openrank-frontend</title>
   </head>
   <body>
diff --git a/src/components/DataDetails.vue b/src/components/DataDetails.vue
index 9ef03cb..45ff9ec 100644
--- a/src/components/DataDetails.vue
+++ b/src/components/DataDetails.vue
@@ -1,24 +1,35 @@
 <template>
   <v-card
     :loading="false"
-    class="mx-auto my-12"
+    class="mx-auto my-0"
   >
     <v-card-title>
-      <slot name="title"></slot>
+      <slot name="title">
+      This is Detailed View
+      </slot>
     </v-card-title>
     <v-card-text>
-      <slot></slot>
+      <slot>
+      Here we can show some more information about the selected data item from the middle container.
+      </slot>
     </v-card-text>
     <v-divider class="mx-4"></v-divider>
     <v-card-actions>
-      <slot name="actions"></slot>
+      <slot name="actions">
+      Here we can have some actions related to the item.
+      </slot>
     </v-card-actions>
   </v-card>
 </template>
 
 <script>
+import { Card } from './'
+
 export default {
   name: 'DataDetails',
+  components: {
+    Card,
+  },
 };
 </script>
 
diff --git a/src/components/DataFilter.vue b/src/components/DataFilter.vue
index a88f84a..1317c18 100644
--- a/src/components/DataFilter.vue
+++ b/src/components/DataFilter.vue
@@ -1,24 +1,61 @@
 <template>
   <v-card
-    :loading="false"
-    class="mx-auto my-12"
+      class="mx-auto"
   >
-    <v-card-title>
-      <slot name="title"></slot>
-    </v-card-title>
-    <v-card-text>
-      <slot></slot>
-    </v-card-text>
-    <v-divider class="mx-4"></v-divider>
-    <v-card-actions>
-      <slot name="actions"></slot>
-    </v-card-actions>
+    <v-list>
+      <v-list-item class="ma-auto">
+        <v-list-item-title>Filter</v-list-item-title>
+        <v-btn class="ma-2" large tile icon>
+          <v-icon>mdi-filter</v-icon>
+        </v-btn>
+      </v-list-item>
+      <ORFilterSection
+        v-for="(section, key) in dataSections"
+        :key="key"
+        v-bind="section"
+      />
+    </v-list>
   </v-card>
 </template>
 
 <script>
+import ORFilterSection from './ORFilterSection';
+
 export default {
   name: 'DataFilter',
+  components: {
+    ORFilterSection,
+  },
+  data() {
+    return { dataSections: this.sections };
+  },
+  props: {
+    sections: {
+      type: Array,
+      default: () => [
+        {
+          name: 'Section 1',
+          items: [['Management', 'management'],
+          ['Settings', 'settings']],
+          search: '',
+          model: [],
+        },
+        {
+          name: 'Section 2',
+          items: [['Management', 'management'],
+          ['Settings', 'settings']],
+          search: '',
+          model: [],
+        },
+        {
+          name: 'Section 3',
+          items: [['Management', 'management'],
+          ['Settings', 'settings']],
+          model: [],
+        },
+      ],
+    },
+  },
 };
 </script>
 
diff --git a/src/components/DataListContainer.vue b/src/components/DataListContainer.vue
index 30a1079..af62076 100644
--- a/src/components/DataListContainer.vue
+++ b/src/components/DataListContainer.vue
@@ -1,10 +1,32 @@
 <template>
-  <v-container fluid>
+  <v-container>
     <v-data-iterator
       :items="items"
       :items-per-page.sync="itemsPerPage"
       :footer-props="{ itemsPerPageOptions }"
+      :search="search"
     >
+      <!-- Search bar to search from filtered items -->
+      <template v-slot:header>
+        <v-toolbar
+          dark
+          color="blue darken-3"
+          class="mb-1"
+        >
+          <v-text-field
+            class="mx-4"
+            v-model="search"
+            clearable
+            flat
+            solo-inverted
+            hide-details
+            prepend-inner-icon="search"
+            label="Search"
+          ></v-text-field>
+        </v-toolbar>
+      </template>
+
+      <!-- Filtered rows/items -->
       <template v-slot:default="props">
         <template v-for="(item, index) in props.items">
           <component
@@ -19,84 +41,31 @@
 </template>
 
 <script>
-import QuestionListItem from './QuestionListItem';
-
-const dummyData = [
-  {
-    props: {
-      title: 'Frozen Yogurt',
-      category: 'Coding',
-      tags: ['some', 'random', 'tag'],
-    },
-  },
-  {
-    props: {
-      title: 'Frozen Yogurt',
-      category: 'Coding',
-      tags: ['some', 'random', 'tag'],
-    },
-  },
-  {
-    props: {
-      title: 'Frozen Yogurt',
-      category: 'Coding',
-      tags: ['some', 'random', 'tag'],
-      subCategory: 'Some categ',
-    },
-  },
-  {
-
-    props: {
-      title: 'Frozen Yogurt',
-      category: 'Coding',
-      tags: ['some', 'random', 'tag'],
-    },
+export default {
+  name: 'DataListContainer',
+  data() {
+    return {
+      search: '',
+    };
   },
-  {
-
-    props: {
-      title: 'Frozen Yogurt',
-      category: 'Coding',
-      tags: ['some', 'random', 'tag'],
-      subCategory: 'Some categ',
+  props: {
+    childComponent: {
+      type: Object,
+      default: () => ({}),
     },
-  },
-  {
-
-    props: {
-      title: 'Frozen Yogurt',
-      category: 'Coding',
-      tags: ['some', 'random', 'tag'],
-      subCategory: 'Some categ',
+    itemsPerPageOptions: {
+      type: Array,
+      default: () => [5, 10, 15, 20],
     },
-  },
-  {
-
-    props: {
-      title: 'Frozen Yogurt',
-      category: 'Coding',
-      tags: ['some', 'random', 'tag'],
+    itemsPerPage: {
+      type: Number,
+      default: 5,
     },
-  },
-  {
-
-    props: {
-      title: 'Frozen Yogurt',
-      category: 'Coding',
-      tags: ['some', 'random', 'tag'],
-      subCategory: 'Some categ',
+    items: {
+      type: Array,
+      default: () => [],
     },
   },
-];
-
-export default {
-  name: 'DataListContainer',
-  data: () => ({
-    childComponent: QuestionListItem,
-    itemsPerPageOptions: [4, 8, 12],
-    itemsPerPage: 4,
-    items: dummyData,
-  }),
   methods: {
     getChildComponent(child) {
       return child || this.childComponent;
diff --git a/src/components/ORFilterSection.vue b/src/components/ORFilterSection.vue
new file mode 100644
index 0000000..598bce0
--- /dev/null
+++ b/src/components/ORFilterSection.vue
@@ -0,0 +1,53 @@
+<template>
+  <v-list-group
+    sub-group
+    multiple
+  >
+    <!-- Section Name -->
+    <template v-slot:activator>
+      <v-list-item-content>
+        <v-list-item-title class="text-uppercase">{{name}}</v-list-item-title>
+      </v-list-item-content>
+    </template>
+    <!-- Section items -->
+    <ORFilterSectionItems v-bind="childProps" />
+  </v-list-group>
+</template>
+
+<script>
+import ORFilterSectionItems from './ORFilterSectionItems';
+
+export default {
+  name: 'ORFilterSection',
+  components: {
+    ORFilterSectionItems,
+  },
+  data() {
+    const { search, model, items, sortBy, sortDesc, customFilter } = this;
+    return {
+      childProps: {
+        search,
+        model,
+        items,
+        sortBy,
+        sortDesc,
+        customFilter
+      }
+    };
+  },
+  props: [
+    'name',
+    'search',
+    'model',
+    'items',
+    'sortBy',
+    'sortDesc',
+    'customFilter'
+  ]
+  ,
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/ORFilterSectionItems.vue b/src/components/ORFilterSectionItems.vue
new file mode 100644
index 0000000..0ef5037
--- /dev/null
+++ b/src/components/ORFilterSectionItems.vue
@@ -0,0 +1,122 @@
+<template>
+  <v-data-iterator
+    :items="dataItems"
+    :search="dataSearch || ''"
+    :sort-by="dataSortBy"
+    :custom-filter="dataCustomFilter"
+    :sort-desc="dataSortDesc"
+    hide-default-footer
+  >
+    <!-- Section Search bar -->
+    <template v-if="dataSearch !== undefined" v-slot:header>
+      <v-text-field
+        class="mr-2 ml-6"
+        v-model="dataSearch"
+        clearable
+        flat
+        solo-inverted
+        hide-details
+        prepend-inner-icon="search"
+        label="Search"
+      ></v-text-field>
+    </template>
+
+    <!-- Section Items -->
+    <template v-slot:default>
+      <v-list-item-group
+        class="mx-2 ml-6"
+        v-model="dataModel"
+        multiple
+        v-for="(item, i) in dataItems"
+        :key="i"
+        link
+      >
+        <v-list-item
+          :key="`item-${i}`"
+          :value="item"
+          active-class="deep-purple--text text--accent-4"
+        >
+          <template v-slot:default="{ active, toggle }">
+            <v-list-item-content>
+              <v-list-item-title v-text="item[0]"></v-list-item-title>
+            </v-list-item-content>
+            <v-list-item-action>
+              <v-checkbox
+                :input-value="active"
+                :true-value="item[1] || item[0].toLowerCase()"
+                color="deep-purple accent-4"
+                @click="toggle"
+              ></v-checkbox>
+            </v-list-item-action>
+          </template>
+        </v-list-item>
+      </v-list-item-group>
+    </template>
+  </v-data-iterator>
+</template>
+
+<script>
+export default {
+  name: 'ORFilterSectionItems',
+  data() {
+    const {
+      search,
+      model,
+      items,
+      sortBy,
+      customFilter,
+      sortDesc,
+    } = this;
+    return {
+      dataSearch: search,
+      dataModel: model,
+      dataItems: items,
+      dataSortBy: sortBy,
+      dataCustomFilter: customFilter,
+      dataSortDesc: sortDesc,
+    };
+  },
+  props: {
+    search: {
+      type: String,
+      default: undefined,
+    },
+    model: {
+      type: Array,
+      default: () => [],
+    },
+    items: {
+      type: Array,
+      default: () => [],
+    },
+    sortBy: {
+      type: Array | String,
+      default: () => [],
+    },
+    customFilter: {
+      type: Function,
+      default: (items, search) => {
+        return items.filter((item) => {
+          for(let item of items) {
+            if(
+              typeof item === 'string' &&
+              item.toLowerCase().match(search.toLowerCase()) !== null
+            ) {
+              return true;
+            }
+          }
+          return false;
+        })
+      }
+    },
+    sortDesc: {
+      type: Boolean,
+      default: false,
+    }
+  },
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/common/ThreeSectionContainer.vue b/src/components/common/ThreeSectionContainer.vue
new file mode 100644
index 0000000..de7afab
--- /dev/null
+++ b/src/components/common/ThreeSectionContainer.vue
@@ -0,0 +1,47 @@
+<template>
+  <v-row>
+    <v-col v-bind="leftProps">
+      <slot name="left" />
+    </v-col>
+    <v-col v-bind="middleProps">
+      <slot name="middle" />
+    </v-col>
+    <v-col v-bind="rightProps">
+      <slot name="right" />
+    </v-col>
+  </v-row>
+</template>
+
+<script>
+export default {
+  name: 'ThreeSectionContainer',
+  props: {
+    leftProps: {
+      type: Object,
+      default: () => ({
+        xs:12,
+        lg:3,
+      })
+    },
+    middleProps: {
+      type: Object,
+      default: () => ({
+        xs:12,
+        lg:6,
+        class: 'pa-0',
+      })
+    },
+    rightProps: {
+      type: Object,
+      default: () => ({
+        xs:12,
+        lg:3,
+      })
+    },
+  },
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/common/index.js b/src/components/common/index.js
new file mode 100644
index 0000000..eebb643
--- /dev/null
+++ b/src/components/common/index.js
@@ -0,0 +1,3 @@
+import ThreeSectionContainer from './ThreeSectionContainer';
+
+export default ThreeSectionContainer;
diff --git a/src/components/index.js b/src/components/index.js
index b7575c8..a5a6a5e 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -5,3 +5,8 @@ export { default as FormFields } from './FormFields';
 export { default as FormButtons } from './FormButtons';
 export { default as CustomForm } from './CustomForm';
 export { default as DataListContainer } from './DataListContainer';
+export { default as DataFilter } from './DataFilter';
+export { default as DataDetails } from './DataDetails';
+export { default as QuestionListItem } from './QuestionListItem';
+export { default as ORFilterSection } from './ORFilterSection';
+export { default as ORFilterSectionItems } from './ORFilterSectionItems';
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index df86117..2edd354 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -1,23 +1,109 @@
 <template>
-  <v-row>
-    <v-col cols="3">
-
-    </v-col>
-    <v-col cols="6">
-      <DataListContainer />
-    </v-col>
-    <v-col cols="3">
-
-    </v-col>
-  </v-row>
+  <ThreeSectionContainer>
+    <template v-slot:left>
+      <DataFilter />
+    </template>
+    <template v-slot:middle>
+      <DataListContainer v-bind="{childComponent: getChildComponent(), items: getDataItemsFromApi()}" />
+    </template>
+    <template v-slot:right>
+      <DataDetails />
+    </template>
+  </ThreeSectionContainer>
 </template>
 
 <script>
-import { DataListContainer } from '../components';
+import {
+  DataListContainer,
+  DataFilter,
+  DataDetails,
+  QuestionListItem,
+} from '../components';
+import ThreeSectionContainer from '../components/common';
 
 export default {
   components: {
+    ThreeSectionContainer,
     DataListContainer,
+    DataDetails,
+    DataFilter,
+  },
+  methods: {
+    getDataItemsFromApi() {
+      //TODO: Make API call and fetch data items from server
+      //Modify this function to achieve the same.
+      const dummyData = [
+        {
+          props: {
+            title: 'Frozen Yogurt',
+            category: 'Coding',
+            tags: ['some', 'random', 'tag'],
+          },
+        },
+        {
+          props: {
+            title: 'Frozen Yogurt',
+            category: 'Coding',
+            tags: ['some', 'random', 'tag'],
+          },
+        },
+        {
+          props: {
+            title: 'Frozen Yogurt',
+            category: 'Coding',
+            tags: ['some', 'random', 'tag'],
+            subCategory: 'Some categ',
+          },
+        },
+        {
+
+          props: {
+            title: 'Frozen Yogurt',
+            category: 'Coding',
+            tags: ['some', 'random', 'tag'],
+          },
+        },
+        {
+
+          props: {
+            title: 'Frozen Yogurt',
+            category: 'Coding',
+            tags: ['some', 'random', 'tag'],
+            subCategory: 'Some categ',
+          },
+        },
+        {
+
+          props: {
+            title: 'Frozen Yogurt',
+            category: 'Coding',
+            tags: ['some', 'random', 'tag'],
+            subCategory: 'Some categ',
+          },
+        },
+        {
+
+          props: {
+            title: 'Frozen Yogurt',
+            category: 'Coding',
+            tags: ['some', 'random', 'tag'],
+          },
+        },
+        {
+
+          props: {
+            title: 'Frozen Yogurt',
+            category: 'Coding',
+            tags: ['some', 'random', 'tag'],
+            subCategory: 'Some categ',
+          },
+        },
+      ];
+      return dummyData;
+    },
+    getChildComponent() {
+      return QuestionListItem;
+    },
   },
 };
 </script>

From 61ae15e7694365498d21b28137a5573b2f5884a1 Mon Sep 17 00:00:00 2001
From: Krushi Raj Tula <krushiraj123@gmail.com>
Date: Sat, 14 Sep 2019 22:14:34 +0530
Subject: [PATCH 6/7] Fixed for mobile view

- Made required changes to make it responsive.

TODOs
- Move dashboard to header of logged in view
- Move all data to vuex state
- Fetching data from API endpoint.
---
 src/components/DataFilter.vue                 |  5 +-
 src/components/DataListContainer.vue          | 19 +++++
 .../common/ThreeSectionContainer.vue          | 85 ++++++++++++++++---
 src/views/Dashboard.vue                       |  2 +-
 4 files changed, 94 insertions(+), 17 deletions(-)

diff --git a/src/components/DataFilter.vue b/src/components/DataFilter.vue
index 1317c18..cc98f8c 100644
--- a/src/components/DataFilter.vue
+++ b/src/components/DataFilter.vue
@@ -1,13 +1,10 @@
 <template>
   <v-card
-      class="mx-auto"
+    class="mx-auto"
   >
     <v-list>
       <v-list-item class="ma-auto">
         <v-list-item-title>Filter</v-list-item-title>
-        <v-btn class="ma-2" large tile icon>
-          <v-icon>mdi-filter</v-icon>
-        </v-btn>
       </v-list-item>
       <ORFilterSection
         v-for="(section, key) in dataSections"
diff --git a/src/components/DataListContainer.vue b/src/components/DataListContainer.vue
index af62076..bae602f 100644
--- a/src/components/DataListContainer.vue
+++ b/src/components/DataListContainer.vue
@@ -5,6 +5,7 @@
       :items-per-page.sync="itemsPerPage"
       :footer-props="{ itemsPerPageOptions }"
       :search="search"
+      :custom-filter="customFilter"
     >
       <!-- Search bar to search from filtered items -->
       <template v-slot:header>
@@ -46,6 +47,7 @@ export default {
   data() {
     return {
       search: '',
+      dataItems: this.items,
     };
   },
   props: {
@@ -65,6 +67,23 @@ export default {
       type: Array,
       default: () => [],
     },
+    customFilter: {
+      type: Function,
+      default: (items, search) => {
+        const res = items.filter(({ props }, index) => {
+          for(let key in props) {
+            let val = props[key];
+            if (
+              typeof val === 'string' &&
+              val.toLowerCase()
+              .match(search.toLowerCase()) !== null
+            ) return true;
+          }
+          return false;
+        });
+        return res;
+      }
+    }
   },
   methods: {
     getChildComponent(child) {
diff --git a/src/components/common/ThreeSectionContainer.vue b/src/components/common/ThreeSectionContainer.vue
index de7afab..99c634d 100644
--- a/src/components/common/ThreeSectionContainer.vue
+++ b/src/components/common/ThreeSectionContainer.vue
@@ -1,32 +1,77 @@
 <template>
   <v-row>
-    <v-col v-bind="leftProps">
-      <slot name="left" />
-    </v-col>
-    <v-col v-bind="middleProps">
-      <slot name="middle" />
-    </v-col>
-    <v-col v-bind="rightProps">
-      <slot name="right" />
+    <!-- Toolbar - will be displayed on mobiel or tablets -->
+    <v-col v-if="$vuetify.breakpoint.mdAndDown" cols="12">
+      <v-toolbar class="pa-0">
+        <v-btn class="ma-0" large tile elevation="0" @click="showFilter = !showFilter">
+          <v-icon v-if="!showFilter">mdi-filter</v-icon>
+          <v-icon v-if="showFilter">mdi-arrow-left</v-icon>
+          {{ showFilter ? "Back" : "Filter"}}
+        </v-btn>
+      </v-toolbar>
     </v-col>
+
+    <!-- Start: Three sections of the container -->
+
+    <!-- Left Section -->
+    <v-expand-transition>
+      <v-col
+        v-show="isFilterOpen()"
+        v-bind="leftProps"
+      >
+          <slot name="left" />
+      </v-col>
+    </v-expand-transition>
+
+    <!-- Middle Section -->
+    <v-expand-transition>
+      <v-col
+        v-show="!isFilterOpen()"
+        v-bind="middleProps"
+      >
+          <slot name="middle" />
+      </v-col>
+    </v-expand-transition>
+
+
+    <!-- Right Section -->
+    <v-expand-transition>
+      <v-col
+        v-show="$vuetify.breakpoint.lgAndUp"
+        v-bind="rightProps"
+      >
+          <slot name="right" />
+      </v-col>
+    </v-expand-transition>
+
+    <!-- End: Three sections of the container -->
   </v-row>
 </template>
 
 <script>
 export default {
   name: 'ThreeSectionContainer',
+  data() {
+    return {
+      showFilter: false,
+    }
+  },
   props: {
     leftProps: {
       type: Object,
       default: () => ({
-        xs:12,
-        lg:3,
+        xs: 12,
+        sm: 12,
+        md: 12,
+        lg: 3,
       })
     },
     middleProps: {
       type: Object,
       default: () => ({
         xs:12,
+        sm: 12,
+        md: 12,
         lg:6,
         class: 'pa-0',
       })
@@ -34,11 +79,27 @@ export default {
     rightProps: {
       type: Object,
       default: () => ({
-        xs:12,
-        lg:3,
+        xs: 12,
+        sm: 12,
+        md: 12,
+        lg: 3,
       })
     },
   },
+  methods: {
+    isFilterOpen() {
+      const {
+        mdAndDown,
+        lgAndUp
+      } = this.$vuetify.breakpoint
+      return (
+        (
+          mdAndDown &&
+          this.showFilter
+        ) || lgAndUp
+      )
+    }
+  }
 }
 </script>
 
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 2edd354..dbfa6cb 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -35,7 +35,7 @@ export default {
       const dummyData = [
         {
           props: {
-            title: 'Frozen Yogurt',
+            title: 'Other than Yogurt',
             category: 'Coding',
             tags: ['some', 'random', 'tag'],
           },

From 01c6b476dcafc9dc78589456a19008fc2b73d8f6 Mon Sep 17 00:00:00 2001
From: Krushi Raj Tula <krushiraj123@gmail.com>
Date: Tue, 17 Sep 2019 00:29:25 +0530
Subject: [PATCH 7/7] Added state to store

---
 src/components/DataDetails.vue                |   5 -
 src/components/DataFilter.vue                 |  42 +---
 src/components/DataListContainer.vue          |  52 ++---
 src/components/ORFilterSection.vue            | 155 +++++++++----
 src/components/ORFilterSectionItems.vue       | 122 ----------
 src/components/ORFilterSectionsContainer.vue  |  34 +++
 .../common/ThreeSectionContainer.vue          |  41 ++--
 src/components/index.js                       |   2 +-
 src/store/index.js                            |   2 +
 src/store/modules/data/dashboard.js           | 211 ++++++++++++++++++
 src/store/modules/data/filterSection.js       |  26 +++
 src/store/modules/data/index.js               |  17 ++
 src/views/Dashboard.vue                       | 125 +++++------
 13 files changed, 517 insertions(+), 317 deletions(-)
 delete mode 100644 src/components/ORFilterSectionItems.vue
 create mode 100644 src/components/ORFilterSectionsContainer.vue
 create mode 100644 src/store/modules/data/dashboard.js
 create mode 100644 src/store/modules/data/filterSection.js
 create mode 100644 src/store/modules/data/index.js

diff --git a/src/components/DataDetails.vue b/src/components/DataDetails.vue
index 45ff9ec..05e63c4 100644
--- a/src/components/DataDetails.vue
+++ b/src/components/DataDetails.vue
@@ -23,13 +23,8 @@
 </template>
 
 <script>
-import { Card } from './'
-
 export default {
   name: 'DataDetails',
-  components: {
-    Card,
-  },
 };
 </script>
 
diff --git a/src/components/DataFilter.vue b/src/components/DataFilter.vue
index cc98f8c..1d09f05 100644
--- a/src/components/DataFilter.vue
+++ b/src/components/DataFilter.vue
@@ -6,53 +6,27 @@
       <v-list-item class="ma-auto">
         <v-list-item-title>Filter</v-list-item-title>
       </v-list-item>
-      <ORFilterSection
-        v-for="(section, key) in dataSections"
-        :key="key"
-        v-bind="section"
+      <ORFilterSectionsContainer
+        v-for="(section, index) in sections"
+        :key="index"
+        v-bind="{...section, index }"
       />
     </v-list>
   </v-card>
 </template>
 
 <script>
-import ORFilterSection from './ORFilterSection';
+import ORFilterSectionsContainer from './ORFilterSectionsContainer';
 
 export default {
   name: 'DataFilter',
   components: {
-    ORFilterSection,
+    ORFilterSectionsContainer,
   },
   data() {
-    return { dataSections: this.sections };
-  },
-  props: {
-    sections: {
-      type: Array,
-      default: () => [
-        {
-          name: 'Section 1',
-          items: [['Management', 'management'],
-          ['Settings', 'settings']],
-          search: '',
-          model: [],
-        },
-        {
-          name: 'Section 2',
-          items: [['Management', 'management'],
-          ['Settings', 'settings']],
-          search: '',
-          model: [],
-        },
-        {
-          name: 'Section 3',
-          items: [['Management', 'management'],
-          ['Settings', 'settings']],
-          model: [],
-        },
-      ],
-    },
+    return {};
   },
+  props: ['sections'],
 };
 </script>
 
diff --git a/src/components/DataListContainer.vue b/src/components/DataListContainer.vue
index bae602f..c9c1c62 100644
--- a/src/components/DataListContainer.vue
+++ b/src/components/DataListContainer.vue
@@ -2,7 +2,6 @@
   <v-container>
     <v-data-iterator
       :items="items"
-      :items-per-page.sync="itemsPerPage"
       :footer-props="{ itemsPerPageOptions }"
       :search="search"
       :custom-filter="customFilter"
@@ -29,10 +28,10 @@
 
       <!-- Filtered rows/items -->
       <template v-slot:default="props">
-        <template v-for="(item, index) in props.items">
+        <template v-for="({ child, props }, index) in props.items">
           <component
-            :is="getChildComponent(item.child)"
-            v-bind="item.props"
+            :is="getChildComponent(child)"
+            v-bind="props"
             :key="index">
           </component>
         </template>
@@ -44,46 +43,43 @@
 <script>
 export default {
   name: 'DataListContainer',
-  data() {
-    return {
-      search: '',
-      dataItems: this.items,
-    };
-  },
   props: {
     childComponent: {
       type: Object,
-      default: () => ({}),
+      default: () => {},
     },
     itemsPerPageOptions: {
       type: Array,
       default: () => [5, 10, 15, 20],
     },
-    itemsPerPage: {
-      type: Number,
-      default: 5,
-    },
     items: {
       type: Array,
       default: () => [],
     },
     customFilter: {
       type: Function,
-      default: (items, search) => {
-        const res = items.filter(({ props }, index) => {
-          for(let key in props) {
-            let val = props[key];
-            if (
-              typeof val === 'string' &&
-              val.toLowerCase()
+      default: (items, search) => items.filter(({ props }) => {
+        for (const key in props) {
+          const val = props[key];
+          if (
+            typeof val === 'string' &&
+            val.toLowerCase()
               .match(search.toLowerCase()) !== null
-            ) return true;
-          }
-          return false;
-        });
-        return res;
+          ) return true;
+        }
+        return false;
+      }),
+    },
+  },
+  computed: {
+    search: {
+      get() {
+        return this.$store.getters['data/dashboard/getSearch'];
+      },
+      set(search) {
+        this.$store.commit('data/dashboard/setSearch', search);
       }
-    }
+    },
   },
   methods: {
     getChildComponent(child) {
diff --git a/src/components/ORFilterSection.vue b/src/components/ORFilterSection.vue
index 598bce0..d3fd648 100644
--- a/src/components/ORFilterSection.vue
+++ b/src/components/ORFilterSection.vue
@@ -1,53 +1,128 @@
 <template>
-  <v-list-group
-    sub-group
-    multiple
+  <v-data-iterator
+    :items="items"
+    :search="search"
+    :sort-by="sortBy"
+    :custom-filter="customFilter"
+    :sort-desc="sortDesc"
+    hide-default-footer
   >
-    <!-- Section Name -->
-    <template v-slot:activator>
-      <v-list-item-content>
-        <v-list-item-title class="text-uppercase">{{name}}</v-list-item-title>
-      </v-list-item-content>
+    <!-- Section Search bar -->
+    <template v-if="enableSearch" v-slot:header>
+      <v-text-field
+        class="mr-2 ml-6"
+        v-model="search"
+        clearable
+        flat
+        solo-inverted
+        hide-details
+        prepend-inner-icon="search"
+        label="Search"
+      ></v-text-field>
     </template>
-    <!-- Section items -->
-    <ORFilterSectionItems v-bind="childProps" />
-  </v-list-group>
+
+    <!-- Section Items -->
+    <template v-slot:default="props">
+      <v-list-item-group
+        class="mx-2 ml-6"
+        v-model="model"
+        multiple
+        v-for="(item, i) in props.items"
+        :key="i"
+        link
+      >
+        <v-list-item
+          :key="`item-${i}`"
+          :value="item"
+          active-class="deep-purple--text text--accent-4"
+        >
+          <template v-slot:default="{ active, toggle }">
+            <v-list-item-content>
+              <v-list-item-title v-text="item[0]"></v-list-item-title>
+            </v-list-item-content>
+            <v-list-item-action>
+              <v-checkbox
+                :input-value="active"
+                :true-value="item[1] || item[0].toLowerCase()"
+                color="deep-purple accent-4"
+                @click="toggle"
+              ></v-checkbox>
+            </v-list-item-action>
+          </template>
+        </v-list-item>
+      </v-list-item-group>
+    </template>
+  </v-data-iterator>
 </template>
 
 <script>
-import ORFilterSectionItems from './ORFilterSectionItems';
-
 export default {
   name: 'ORFilterSection',
-  components: {
-    ORFilterSectionItems,
-  },
-  data() {
-    const { search, model, items, sortBy, sortDesc, customFilter } = this;
-    return {
-      childProps: {
-        search,
-        model,
-        items,
-        sortBy,
-        sortDesc,
-        customFilter
-      }
-    };
+  // data() {
+  //   return {};
+  // },
+  props: {
+    name: {
+      type: String,
+      default: '',
+    },
+    index: {
+      type: Number,
+      default: -1,
+    },
+    enableSearch: {
+      type: Boolean,
+      default: false,
+    },
+    items: {
+      type: Array,
+      default: () => [],
+    },
+    sortBy: {
+      type: Array | String,
+      default: () => [],
+    },
+    customFilter: {
+      type: Function,
+      default: (items, search) => items.filter(item => {
+        for (const val of Object.values(item)) {
+          if (
+            typeof val === 'string' &&
+            val.toLowerCase().match(search.toLowerCase()) !== null
+          ) {
+            return true;
+          }
+        }
+        return false;
+      }),
+    },
+    sortDesc: {
+      type: Boolean,
+      default: false,
+    },
   },
-  props: [
-    'name',
-    'search',
-    'model',
-    'items',
-    'sortBy',
-    'sortDesc',
-    'customFilter'
-  ]
-  ,
-}
+  computed: {
+    search: {
+      get() {
+        return this.$store.getters[`filterSection-${this.name}/getSearch`];
+      },
+      set(search) {
+        this.$store.commit(`filterSection-${this.name}/setSearch`, search);
+      },
+    },
+    model: {
+      get() {
+        return this.$store.getters[`filterSection-${this.name}/getModel`];
+      },
+      set(model) {
+        this.$store.commit(`filterSection-${this.name}/setModel`, model);
+        this.$store.commit('data/dashboard/setFilters', { key: this.name, val: model });
+      },
+    },
+  }
+};
 </script>
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/ORFilterSectionItems.vue b/src/components/ORFilterSectionItems.vue
deleted file mode 100644
index 0ef5037..0000000
--- a/src/components/ORFilterSectionItems.vue
+++ /dev/null
@@ -1,122 +0,0 @@
-<template>
-  <v-data-iterator
-    :items="dataItems"
-    :search="dataSearch || ''"
-    :sort-by="dataSortBy"
-    :custom-filter="dataCustomFilter"
-    :sort-desc="dataSortDesc"
-    hide-default-footer
-  >
-    <!-- Section Search bar -->
-    <template v-if="dataSearch !== undefined" v-slot:header>
-      <v-text-field
-        class="mr-2 ml-6"
-        v-model="dataSearch"
-        clearable
-        flat
-        solo-inverted
-        hide-details
-        prepend-inner-icon="search"
-        label="Search"
-      ></v-text-field>
-    </template>
-
-    <!-- Section Items -->
-    <template v-slot:default>
-      <v-list-item-group
-        class="mx-2 ml-6"
-        v-model="dataModel"
-        multiple
-        v-for="(item, i) in dataItems"
-        :key="i"
-        link
-      >
-        <v-list-item
-          :key="`item-${i}`"
-          :value="item"
-          active-class="deep-purple--text text--accent-4"
-        >
-          <template v-slot:default="{ active, toggle }">
-            <v-list-item-content>
-              <v-list-item-title v-text="item[0]"></v-list-item-title>
-            </v-list-item-content>
-            <v-list-item-action>
-              <v-checkbox
-                :input-value="active"
-                :true-value="item[1] || item[0].toLowerCase()"
-                color="deep-purple accent-4"
-                @click="toggle"
-              ></v-checkbox>
-            </v-list-item-action>
-          </template>
-        </v-list-item>
-      </v-list-item-group>
-    </template>
-  </v-data-iterator>
-</template>
-
-<script>
-export default {
-  name: 'ORFilterSectionItems',
-  data() {
-    const {
-      search,
-      model,
-      items,
-      sortBy,
-      customFilter,
-      sortDesc,
-    } = this;
-    return {
-      dataSearch: search,
-      dataModel: model,
-      dataItems: items,
-      dataSortBy: sortBy,
-      dataCustomFilter: customFilter,
-      dataSortDesc: sortDesc,
-    };
-  },
-  props: {
-    search: {
-      type: String,
-      default: undefined,
-    },
-    model: {
-      type: Array,
-      default: () => [],
-    },
-    items: {
-      type: Array,
-      default: () => [],
-    },
-    sortBy: {
-      type: Array | String,
-      default: () => [],
-    },
-    customFilter: {
-      type: Function,
-      default: (items, search) => {
-        return items.filter((item) => {
-          for(let item of items) {
-            if(
-              typeof item === 'string' &&
-              item.toLowerCase().match(search.toLowerCase()) !== null
-            ) {
-              return true;
-            }
-          }
-          return false;
-        })
-      }
-    },
-    sortDesc: {
-      type: Boolean,
-      default: false,
-    }
-  },
-}
-</script>
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/src/components/ORFilterSectionsContainer.vue b/src/components/ORFilterSectionsContainer.vue
new file mode 100644
index 0000000..8ad402f
--- /dev/null
+++ b/src/components/ORFilterSectionsContainer.vue
@@ -0,0 +1,34 @@
+<template>
+  <v-list-group
+    sub-group
+    multiple
+  >
+    <!-- Section Name -->
+    <template v-slot:activator>
+      <v-list-item-content>
+        <v-list-item-title class="text-uppercase">{{name}}</v-list-item-title>
+      </v-list-item-content>
+    </template>
+    <!-- Section items -->
+    <ORFilterSection v-bind="{ items, name, index, enableSearch }" />
+  </v-list-group>
+</template>
+
+<script>
+import ORFilterSection from './ORFilterSection';
+
+export default {
+  name: 'ORFilterSectionsContainer',
+  components: {
+    ORFilterSection,
+  },
+  data() {
+    return {};
+  },
+  props: ['name', 'index', 'items', 'enableSearch'],
+};
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/common/ThreeSectionContainer.vue b/src/components/common/ThreeSectionContainer.vue
index 99c634d..73dc1f9 100644
--- a/src/components/common/ThreeSectionContainer.vue
+++ b/src/components/common/ThreeSectionContainer.vue
@@ -3,7 +3,7 @@
     <!-- Toolbar - will be displayed on mobiel or tablets -->
     <v-col v-if="$vuetify.breakpoint.mdAndDown" cols="12">
       <v-toolbar class="pa-0">
-        <v-btn class="ma-0" large tile elevation="0" @click="showFilter = !showFilter">
+        <v-btn class="ma-0" large tile elevation="0" @click="setShowFilter(!showFilter)">
           <v-icon v-if="!showFilter">mdi-filter</v-icon>
           <v-icon v-if="showFilter">mdi-arrow-left</v-icon>
           {{ showFilter ? "Back" : "Filter"}}
@@ -53,10 +53,17 @@ export default {
   name: 'ThreeSectionContainer',
   data() {
     return {
-      showFilter: false,
-    }
+    };
   },
   props: {
+    showFilter: {
+      type: Boolean,
+      default: false,
+    },
+    setShowFilter: {
+      type: Function,
+      default: () => {},
+    },
     leftProps: {
       type: Object,
       default: () => ({
@@ -64,17 +71,17 @@ export default {
         sm: 12,
         md: 12,
         lg: 3,
-      })
+      }),
     },
     middleProps: {
       type: Object,
       default: () => ({
-        xs:12,
+        xs: 12,
         sm: 12,
         md: 12,
-        lg:6,
+        lg: 6,
         class: 'pa-0',
-      })
+      }),
     },
     rightProps: {
       type: Object,
@@ -83,26 +90,26 @@ export default {
         sm: 12,
         md: 12,
         lg: 3,
-      })
+      }),
     },
   },
   methods: {
     isFilterOpen() {
       const {
         mdAndDown,
-        lgAndUp
-      } = this.$vuetify.breakpoint
+        lgAndUp,
+      } = this.$vuetify.breakpoint;
       return (
         (
-          mdAndDown &&
-          this.showFilter
+          mdAndDown
+          && this.showFilter
         ) || lgAndUp
-      )
-    }
-  }
-}
+      );
+    },
+  },
+};
 </script>
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/index.js b/src/components/index.js
index a5a6a5e..330e34d 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -8,5 +8,5 @@ export { default as DataListContainer } from './DataListContainer';
 export { default as DataFilter } from './DataFilter';
 export { default as DataDetails } from './DataDetails';
 export { default as QuestionListItem } from './QuestionListItem';
+export { default as ORFilterSectionsContainer } from './ORFilterSectionsContainer';
 export { default as ORFilterSection } from './ORFilterSection';
-export { default as ORFilterSectionItems } from './ORFilterSectionItems';
diff --git a/src/store/index.js b/src/store/index.js
index 849f684..7e64768 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,6 +4,7 @@ import Vue from 'vue';
 import Vuex from 'vuex';
 
 import authentication from './modules/authentication';
+import data from './modules/data';
 import { Loading } from './plugins';
 
 Vue.use(Vuex);
@@ -33,6 +34,7 @@ export default new Vuex.Store({
   },
   modules: {
     authentication,
+    data,
   },
   getters: {
     isLoading(state) {
diff --git a/src/store/modules/data/dashboard.js b/src/store/modules/data/dashboard.js
new file mode 100644
index 0000000..a5c13fd
--- /dev/null
+++ b/src/store/modules/data/dashboard.js
@@ -0,0 +1,211 @@
+import HTTP from '../../../http';
+import filterSection from './filterSection';
+import store from '../..';
+
+import {
+  QuestionListItem,
+} from '../../../components';
+
+export default {
+  namespaced: true,
+  strict: true,
+  state: {
+    entity: null,
+    childComponent: QuestionListItem,
+    items: [],
+    itemsPerPage: 5,
+    showFilter: false,
+    filters: {},
+    search: '',
+    sections: '',
+    successMsg: '',
+    errorMsg: null,
+  },
+  getters: {
+    getItemsPerPage({ itemsPerPage }) {
+      return itemsPerPage;
+    },
+    getSearch({ search }) {
+      return search;
+    }
+  },
+  mutations: {
+    setEntity(state, entity) {
+      state.entity = entity;
+    },
+    setItems(state, items) {
+      state.items = items;
+    },
+    setItemsPerPage(state, itemsPerPage) {
+      state.itemsPerPage = itemsPerPage;
+    },
+    setSearch(state, search) {
+      state.search = search;
+    },
+    setShowFilter(state, showFilter) {
+      state.showFilter = showFilter;
+    },
+    setSections(state, sections) {
+      state.sections = sections;
+    },
+    setFilters(state, { key, val }) {
+      state.filters[key] = val;
+    },
+    setSuccessMsg(state, message) {
+      state.successMsg = message;
+    },
+    setErrorMsg(state, message) {
+      state.errorMsg = message;
+    },
+  },
+  actions: {
+    async fetchFilteredData({
+      commit,
+      rootGetters,
+      state: {
+        entity,
+        search,
+        filters,
+      },
+    }) {
+      if (entity === null) {
+        return [];
+      }
+
+      await HTTP().get(`/${entity}`, {
+        search,
+        filters,
+      }).then((items) => {
+        commit('setItems', items);
+        setTimeout(() => commit('setSuccessMsg', null), 2000);
+      }).catch(({ response }) => {
+        commit('setErrorMsg', rootGetters.getErrorMessage(response));
+        setTimeout(() => commit('setErrorMsg', null), 2000);
+      });
+    },
+    async fetchDummyData({
+      commit,
+    }) {
+      const dummyData = [
+        {
+          props: {
+            title: 'Other than Yogurt',
+            category: 'Coding',
+            tags: ['some', 'random', 'tag'],
+          },
+        },
+        {
+          props: {
+            title: 'Other than Yogurt',
+            category: 'Coding',
+            tags: ['some', 'random', 'tag'],
+          },
+        },
+        {
+          props: {
+            title: 'Other than Yogurt',
+            category: 'Coding',
+            tags: ['some', 'random', 'tag'],
+          },
+        },
+        {
+          props: {
+            title: 'Other than Yogurt',
+            category: 'Coding',
+            tags: ['some', 'random', 'tag'],
+          },
+        },
+        {
+          props: {
+            title: 'Frozen Yogurt',
+            category: 'Coding',
+            tags: ['some', 'random', 'tag'],
+          },
+        },
+        {
+          props: {
+            title: 'Frozen Yogurt',
+            category: 'Coding',
+            tags: ['some', 'random', 'tag'],
+            subCategory: 'Some categ',
+          },
+        },
+        {
+
+          props: {
+            title: 'Frozen Yogurt',
+            category: 'Coding',
+            tags: ['some', 'random', 'tag'],
+          },
+        },
+        {
+
+          props: {
+            title: 'Frozen Yogurt',
+            category: 'Coding',
+            tags: ['some', 'random', 'tag'],
+            subCategory: 'Some categ',
+          },
+        },
+        {
+
+          props: {
+            title: 'Frozen Yogurt',
+            category: 'Coding',
+            tags: ['some', 'random', 'tag'],
+            subCategory: 'Some categ',
+          },
+        },
+        {
+
+          props: {
+            title: 'Frozen Yogurt',
+            category: 'Coding',
+            tags: ['some', 'random', 'tag'],
+          },
+        },
+        {
+
+          props: {
+            title: 'Frozen Yogurt',
+            category: 'Coding',
+            tags: ['some', 'random', 'tag'],
+            subCategory: 'Some categ',
+          },
+        },
+      ];
+      commit('setItems', dummyData);
+    },
+    async fetchSectionsData({ commit }) {
+      const dummySections = [
+        {
+          name: 'Section 1',
+          items: [['Management', 'management'],
+            ['Settings', 'settings']],
+          enableSearch: true,
+        },
+        {
+          name: 'Section 2',
+          items: [['Management', 'management'],
+            ['Settings', 'settings']],
+          enableSearch: true,
+        },
+        {
+          name: 'Section 3',
+          items: [['Management', 'management'],
+            ['Settings', 'settings']],
+        },
+      ];
+      commit('setSections', dummySections);
+      const { state: scopedState, getters, mutations } = filterSection;
+      dummySections.forEach(({ name }) => {
+        store.registerModule(`filterSection-${name}`, {
+          state: scopedState,
+          getters,
+          mutations,
+          namespaced: true,
+        });
+      });
+    },
+  },
+};
diff --git a/src/store/modules/data/filterSection.js b/src/store/modules/data/filterSection.js
new file mode 100644
index 0000000..fa7f9c5
--- /dev/null
+++ b/src/store/modules/data/filterSection.js
@@ -0,0 +1,26 @@
+const state = () => (
+  {
+    model: [],
+    search: '',
+  }
+);
+
+const getters = {
+  getSearch: state => state.search,
+  getModel: state => state.model,
+};
+
+const mutations = {
+  setSearch: (state, search) => {
+    state.search = search;
+  },
+  setModel: (state, model) => {
+    state.model = model;
+  },
+};
+
+export default {
+  state,
+  getters,
+  mutations,
+};
diff --git a/src/store/modules/data/index.js b/src/store/modules/data/index.js
new file mode 100644
index 0000000..6ed3a2f
--- /dev/null
+++ b/src/store/modules/data/index.js
@@ -0,0 +1,17 @@
+import dashboard from './dashboard';
+
+export default {
+  namespaced: true,
+  strict: true,
+  state: {
+  },
+  mutations: {
+  },
+  actions: {
+  },
+  getters: {
+  },
+  modules: {
+    dashboard,
+  },
+};
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index dbfa6cb..6e328b3 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -1,10 +1,13 @@
 <template>
-  <ThreeSectionContainer>
+  <ThreeSectionContainer :showFilter="showFilter" :setShowFilter="setShowFilter" >
     <template v-slot:left>
-      <DataFilter />
+      <DataFilter :sections="sections" />
     </template>
     <template v-slot:middle>
-      <DataListContainer v-bind="{childComponent: getChildComponent(), items: getDataItemsFromApi()}" />
+      <DataListContainer
+        :childComponent="childComponent"
+        :items="items"
+      />
     </template>
     <template v-slot:right>
       <DataDetails />
@@ -21,6 +24,11 @@ import {
 } from '../components';
 import ThreeSectionContainer from '../components/common';
 
+import { createNamespacedHelpers } from 'vuex';
+
+const { mapState, mapMutations, mapActions } = createNamespacedHelpers('data/dashboard');
+const { mapGetters } = createNamespacedHelpers('data/dashboard');
+
 export default {
   components: {
     ThreeSectionContainer,
@@ -28,78 +36,55 @@ export default {
     DataDetails,
     DataFilter,
   },
-  methods: {
-    getDataItemsFromApi() {
-      //TODO: Make API call and fetch data items from server
-      //Modify this function to achieve the same.
-      const dummyData = [
-        {
-          props: {
-            title: 'Other than Yogurt',
-            category: 'Coding',
-            tags: ['some', 'random', 'tag'],
-          },
-        },
-        {
-          props: {
-            title: 'Frozen Yogurt',
-            category: 'Coding',
-            tags: ['some', 'random', 'tag'],
-          },
-        },
-        {
-          props: {
-            title: 'Frozen Yogurt',
-            category: 'Coding',
-            tags: ['some', 'random', 'tag'],
-            subCategory: 'Some categ',
-          },
-        },
-        {
-
-          props: {
-            title: 'Frozen Yogurt',
-            category: 'Coding',
-            tags: ['some', 'random', 'tag'],
-          },
-        },
+  computed: {
+    ...mapGetters([
+      'isLoggedIn',
+    ]),
+    ...mapState([
+      'childComponent',
+      'items',
+      'sections',
+      'showFilter',
+      'successMsg',
+      'errorMsg',
+    ]),
+    alerts() {
+      return [
         {
-
-          props: {
-            title: 'Frozen Yogurt',
-            category: 'Coding',
-            tags: ['some', 'random', 'tag'],
-            subCategory: 'Some categ',
-          },
+          type: 'success',
+          message: this.successMsg,
         },
         {
-
-          props: {
-            title: 'Frozen Yogurt',
-            category: 'Coding',
-            tags: ['some', 'random', 'tag'],
-            subCategory: 'Some categ',
-          },
-        },
-        {
-
-          props: {
-            title: 'Frozen Yogurt',
-            category: 'Coding',
-            tags: ['some', 'random', 'tag'],
-          },
-        },
-        {
-
-          props: {
-            title: 'Frozen Yogurt',
-            category: 'Coding',
-            tags: ['some', 'random', 'tag'],
-            subCategory: 'Some categ',
-          },
+          type: 'error',
+          message: this.errorMsg,
         },
       ];
-      return dummyData;
+    },
+  },
+  mounted() {
+    if (process.env.NODE_ENV === 'production') {
+    if (!this.isLoggedIn) {
+      return this.$router.push('/login');
+    }
+    this.$store.dispatch('authentication/user/fetchUser');
+    } else {
+      this.$store.dispatch('data/dashboard/fetchDummyData');
+      this.$store.dispatch('data/dashboard/fetchSectionsData');
+    }
+  },
+  methods: {
+    ...mapMutations([
+      'setFilter',
+      'setDetails',
+      'setSearch',
+      'setShowFilter'
+    ]),
+    ...mapActions([
+      'fetchData',
+    ]),
+    getDataItemsFromApi() {
+      // TODO: Make API call and fetch data items from server
+      // Modify this function to achieve the same.
     },
     getChildComponent() {
       return QuestionListItem;