coderplex-org · krushiraj · Sep 11, 2019 · Sep 11, 2019 · Sep 11, 2019 · Sep 11, 2019
diff --git 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
@@ -0,0 +1,33 @@
+<template>
+  <v-card
+    :loading="false"
+    class="mx-auto my-0"
+  >
+    <v-card-title>
+      <slot name="title">
+      This is Detailed View
+      </slot>
+    </v-card-title>
+    <v-card-text>
+      <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">
+      Here we can have some actions related to the item.
+      </slot>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script>
+export default {
+  name: 'DataDetails',
+};
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/DataFilter.vue b/src/components/DataFilter.vue
@@ -0,0 +1,35 @@
+<template>
+  <v-card
+    class="mx-auto"
+  >
+    <v-list>
+      <v-list-item class="ma-auto">
+        <v-list-item-title>Filter</v-list-item-title>
+      </v-list-item>
+      <ORFilterSectionsContainer
+        v-for="(section, index) in sections"
+        :key="index"
+        v-bind="{...section, index }"
+      />
+    </v-list>
+  </v-card>
+</template>
+
+<script>
+import ORFilterSectionsContainer from './ORFilterSectionsContainer';
+
+export default {
+  name: 'DataFilter',
+  components: {
+    ORFilterSectionsContainer,
+  },
+  data() {
+    return {};
+  },
+  props: ['sections'],
+};
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/DataListContainer.vue b/src/components/DataListContainer.vue
@@ -0,0 +1,94 @@
+<template>
+  <v-container>
+    <v-data-iterator
+      :items="items"
+      :footer-props="{ itemsPerPageOptions }"
+      :search="search"
+      :custom-filter="customFilter"
+    >
+      <!-- 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="({ child, props }, index) in props.items">
+          <component
+            :is="getChildComponent(child)"
+            v-bind="props"
+            :key="index">
+          </component>
+        </template>
+      </template>
+    </v-data-iterator>
+  </v-container>
+</template>
+
+<script>
+export default {
+  name: 'DataListContainer',
+  props: {
+    childComponent: {
+      type: Object,
+      default: () => {},
+    },
+    itemsPerPageOptions: {
+      type: Array,
+      default: () => [5, 10, 15, 20],
+    },
+    items: {
+      type: Array,
+      default: () => [],
+    },
+    customFilter: {
+      type: Function,
+      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;
+      }),
+    },
+  },
+  computed: {
+    search: {
+      get() {
+        return this.$store.getters['data/dashboard/getSearch'];
+      },
+      set(search) {
+        this.$store.commit('data/dashboard/setSearch', search);
+      }
+    },
+  },
+  methods: {
+    getChildComponent(child) {
+      return child || this.childComponent;
+    },
+  },
+};
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/ORFilterSection.vue b/src/components/ORFilterSection.vue
@@ -0,0 +1,128 @@
+<template>
+  <v-data-iterator
+    :items="items"
+    :search="search"
+    :sort-by="sortBy"
+    :custom-filter="customFilter"
+    :sort-desc="sortDesc"
+    hide-default-footer
+  >
+    <!-- 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 -->
+    <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>
+export default {
+  name: 'ORFilterSection',
+  // 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,
+    },
+  },
+  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>
diff --git a/src/components/ORFilterSectionsContainer.vue 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/QuestionListItem.vue 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>