WIP - Dev work for #9

src/components/DataDetails.vue

@@ -0,0 +1,27 @@
+<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: 'Card',
+};
+</script>
+
+<style scoped>
+
+</style>

src/components/DataFilter.vue

@@ -0,0 +1,27 @@
+<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: 'Card',
+};
+</script>
+
+<style scoped>
+
+</style>

src/components/DataListContainer.vue

@@ -0,0 +1,110 @@
+<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',
+  data: () => ({
+    childComponent: QuestionListItem,
+    itemsPerPageOptions: [4, 8, 12],
+    itemsPerPage: 4,
+    items: dummyData,
+  }),
+  methods: {
+    getChildComponent(child) {
+      return child || this.childComponent;
+    },
+  },
+};
+</script>
+
+<style scoped>
+
+</style>

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>

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

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

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>

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