Separate task list and user table from dashboard page into components
This commit is contained in:
cristij
parent
8c7286f9ed
commit
f607586e0e
57
src/components/BaseCheckbox.vue
Normal file
57
src/components/BaseCheckbox.vue
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
<template>
|
||||||
|
<div class="form-check"
|
||||||
|
:class="[{disabled: disabled}, inlineClass]">
|
||||||
|
<label :for="cbId" class="form-check-label">
|
||||||
|
<input :id="cbId"
|
||||||
|
class="form-check-input"
|
||||||
|
type="checkbox"
|
||||||
|
:disabled="disabled"
|
||||||
|
v-model="model"/>
|
||||||
|
<span class="form-check-sign"></span>
|
||||||
|
<slot>
|
||||||
|
<span v-if="inline"> </span>
|
||||||
|
</slot>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'base-checkbox',
|
||||||
|
model: {
|
||||||
|
prop: 'checked'
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
checked: [Array, Boolean],
|
||||||
|
disabled: Boolean,
|
||||||
|
inline: Boolean,
|
||||||
|
hasError: Boolean
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
cbId: '',
|
||||||
|
touched: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
model: {
|
||||||
|
get() {
|
||||||
|
return this.checked
|
||||||
|
},
|
||||||
|
set(check) {
|
||||||
|
if (!this.touched) {
|
||||||
|
this.touched = true
|
||||||
|
}
|
||||||
|
this.$emit('input', check)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
inlineClass() {
|
||||||
|
if (this.inline) {
|
||||||
|
return `form-check-inline`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.cbId = Math.random().toString(16).slice(2)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@ -1,5 +1,6 @@
|
|||||||
import FormGroupInput from "./Inputs/formGroupInput.vue";
|
import FormGroupInput from "./Inputs/formGroupInput.vue";
|
||||||
|
|
||||||
|
import BaseCheckbox from "./BaseCheckbox.vue";
|
||||||
import BaseDropdown from "./BaseDropdown.vue";
|
import BaseDropdown from "./BaseDropdown.vue";
|
||||||
import BaseTable from "./BaseTable.vue";
|
import BaseTable from "./BaseTable.vue";
|
||||||
import BaseButton from "./BaseButton";
|
import BaseButton from "./BaseButton";
|
||||||
@ -15,6 +16,7 @@ export {
|
|||||||
Card,
|
Card,
|
||||||
StatsCard,
|
StatsCard,
|
||||||
BaseTable,
|
BaseTable,
|
||||||
|
BaseCheckbox,
|
||||||
BaseDropdown,
|
BaseDropdown,
|
||||||
BaseButton,
|
BaseButton,
|
||||||
BaseAlert,
|
BaseAlert,
|
||||||
|
|||||||
@ -62,11 +62,11 @@
|
|||||||
<h3 class="card-title"><i class="tim-icons icon-delivery-fast text-info "></i> 3,500€</h3>
|
<h3 class="card-title"><i class="tim-icons icon-delivery-fast text-info "></i> 3,500€</h3>
|
||||||
</template>
|
</template>
|
||||||
<div class="chart-area">
|
<div class="chart-area">
|
||||||
<bar-chart style="height: 100%"
|
<bar-chart style="height: 100%"
|
||||||
:chart-data="blueBarChart.chartData"
|
:chart-data="blueBarChart.chartData"
|
||||||
:gradient-color="blueBarChart.gradientColors"
|
:gradient-color="blueBarChart.gradientColors"
|
||||||
:gradient-stops="blueBarChart.gradientStops"
|
:gradient-stops="blueBarChart.gradientStops"
|
||||||
:extra-options="blueBarChart.extraOptions">
|
:extra-options="blueBarChart.extraOptions">
|
||||||
</bar-chart>
|
</bar-chart>
|
||||||
</div>
|
</div>
|
||||||
</card>
|
</card>
|
||||||
@ -90,8 +90,8 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-lg-6 col-md-12">
|
<div class="col-lg-6 col-md-12">
|
||||||
<div class="card card-tasks">
|
<card type="tasks">
|
||||||
<div class="card-header ">
|
<template slot="header">
|
||||||
<h6 class="title d-inline">Tasks(5)</h6>
|
<h6 class="title d-inline">Tasks(5)</h6>
|
||||||
<p class="card-category d-inline">today</p>
|
<p class="card-category d-inline">today</p>
|
||||||
<div class="dropdown">
|
<div class="dropdown">
|
||||||
@ -104,145 +104,11 @@
|
|||||||
<a class="dropdown-item" href="#pablo">Something else</a>
|
<a class="dropdown-item" href="#pablo">Something else</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</template>
|
||||||
|
<div class="table-full-width table-responsive">
|
||||||
|
<task-list></task-list>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body ">
|
</card>
|
||||||
<div class="table-full-width table-responsive">
|
|
||||||
<table class="table">
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<div class="form-check">
|
|
||||||
<label class="form-check-label">
|
|
||||||
<input class="form-check-input" type="checkbox" value="">
|
|
||||||
<span class="form-check-sign">
|
|
||||||
<span class="check"></span>
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<p class="title">Update the Documentation</p>
|
|
||||||
<p class="text-muted">Dwuamish Head, Seattle, WA 8:47 AM</p>
|
|
||||||
</td>
|
|
||||||
<td class="td-actions text-right">
|
|
||||||
<button type="button" rel="tooltip" title="" class="btn btn-link" data-original-title="Edit Task">
|
|
||||||
<i class="tim-icons icon-pencil"></i>
|
|
||||||
</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<div class="form-check">
|
|
||||||
<label class="form-check-label">
|
|
||||||
<input class="form-check-input" type="checkbox" value="" checked="">
|
|
||||||
<span class="form-check-sign">
|
|
||||||
<span class="check"></span>
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<p class="title">GDPR Compliance</p>
|
|
||||||
<p class="text-muted">The GDPR is a regulation that requires businesses to protect the personal data
|
|
||||||
and privacy of Europe citizens for transactions that occur within EU member states.</p>
|
|
||||||
</td>
|
|
||||||
<td class="td-actions text-right">
|
|
||||||
<button type="button" rel="tooltip" title="" class="btn btn-link" data-original-title="Edit Task">
|
|
||||||
<i class="tim-icons icon-pencil"></i>
|
|
||||||
</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<div class="form-check">
|
|
||||||
<label class="form-check-label">
|
|
||||||
<input class="form-check-input" type="checkbox" value="">
|
|
||||||
<span class="form-check-sign">
|
|
||||||
<span class="check"></span>
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<p class="title">Solve the issues</p>
|
|
||||||
<p class="text-muted">Fifty percent of all respondents said they would be more likely to shop at a
|
|
||||||
company </p>
|
|
||||||
</td>
|
|
||||||
<td class="td-actions text-right">
|
|
||||||
<button type="button" rel="tooltip" title="" class="btn btn-link" data-original-title="Edit Task">
|
|
||||||
<i class="tim-icons icon-pencil"></i>
|
|
||||||
</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<div class="form-check">
|
|
||||||
<label class="form-check-label">
|
|
||||||
<input class="form-check-input" type="checkbox" value="">
|
|
||||||
<span class="form-check-sign">
|
|
||||||
<span class="check"></span>
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<p class="title">Release v2.0.0</p>
|
|
||||||
<p class="text-muted">Ra Ave SW, Seattle, WA 98116, SUA 11:19 AM</p>
|
|
||||||
</td>
|
|
||||||
<td class="td-actions text-right">
|
|
||||||
<button type="button" rel="tooltip" title="" class="btn btn-link" data-original-title="Edit Task">
|
|
||||||
<i class="tim-icons icon-pencil"></i>
|
|
||||||
</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<div class="form-check">
|
|
||||||
<label class="form-check-label">
|
|
||||||
<input class="form-check-input" type="checkbox" value="">
|
|
||||||
<span class="form-check-sign">
|
|
||||||
<span class="check"></span>
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<p class="title">Export the processed files</p>
|
|
||||||
<p class="text-muted">The report also shows that consumers will not easily forgive a company once a
|
|
||||||
breach exposing their personal data occurs. </p>
|
|
||||||
</td>
|
|
||||||
<td class="td-actions text-right">
|
|
||||||
<button type="button" rel="tooltip" title="" class="btn btn-link" data-original-title="Edit Task">
|
|
||||||
<i class="tim-icons icon-pencil"></i>
|
|
||||||
</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<div class="form-check">
|
|
||||||
<label class="form-check-label">
|
|
||||||
<input class="form-check-input" type="checkbox" value="">
|
|
||||||
<span class="form-check-sign">
|
|
||||||
<span class="check"></span>
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<p class="title">Arival at export process</p>
|
|
||||||
<p class="text-muted">Capitol Hill, Seattle, WA 12:34 AM</p>
|
|
||||||
</td>
|
|
||||||
<td class="td-actions text-right">
|
|
||||||
<button type="button" rel="tooltip" title="" class="btn btn-link" data-original-title="Edit Task">
|
|
||||||
<i class="tim-icons icon-pencil"></i>
|
|
||||||
</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-lg-6 col-md-12">
|
<div class="col-lg-6 col-md-12">
|
||||||
<div class="card ">
|
<div class="card ">
|
||||||
@ -251,122 +117,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<div class="table-responsive">
|
<div class="table-responsive">
|
||||||
<table class="table tablesorter " id="">
|
<user-table></user-table>
|
||||||
<thead class=" text-primary">
|
|
||||||
<th>
|
|
||||||
Name
|
|
||||||
</th>
|
|
||||||
<th>
|
|
||||||
Country
|
|
||||||
</th>
|
|
||||||
<th>
|
|
||||||
City
|
|
||||||
</th>
|
|
||||||
<th class="text-center">
|
|
||||||
Salary
|
|
||||||
</th>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
Dakota Rice
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
Niger
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
Oud-Turnhout
|
|
||||||
</td>
|
|
||||||
<td class="text-center">
|
|
||||||
$36,738
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
Minerva Hooper
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
Curaçao
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
Sinaai-Waas
|
|
||||||
</td>
|
|
||||||
<td class="text-center">
|
|
||||||
$23,789
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
Sage Rodriguez
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
Netherlands
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
Baileux
|
|
||||||
</td>
|
|
||||||
<td class="text-center">
|
|
||||||
$56,142
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
Philip Chaney
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
Korea, South
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
Overland Park
|
|
||||||
</td>
|
|
||||||
<td class="text-center">
|
|
||||||
$38,735
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
Doris Greene
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
Malawi
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
Feldkirchen in Kärnten
|
|
||||||
</td>
|
|
||||||
<td class="text-center">
|
|
||||||
$63,542
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
Mason Porter
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
Chile
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
Gloucester
|
|
||||||
</td>
|
|
||||||
<td class="text-center">
|
|
||||||
$78,615
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
Jon Porter
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
Portugal
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
Gloucester
|
|
||||||
</td>
|
|
||||||
<td class="text-center">
|
|
||||||
$98,615
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -378,11 +129,15 @@
|
|||||||
import LineChart from '@/components/Charts/LineChart';
|
import LineChart from '@/components/Charts/LineChart';
|
||||||
import BarChart from '@/components/Charts/BarChart';
|
import BarChart from '@/components/Charts/BarChart';
|
||||||
import * as chartConfigs from '@/components/Charts/config';
|
import * as chartConfigs from '@/components/Charts/config';
|
||||||
|
import TaskList from './Dashboard/TaskList';
|
||||||
|
import UserTable from './Dashboard/UserTable';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
LineChart,
|
LineChart,
|
||||||
BarChart
|
BarChart,
|
||||||
|
TaskList,
|
||||||
|
UserTable
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|||||||
66
src/pages/Dashboard/TaskList.vue
Normal file
66
src/pages/Dashboard/TaskList.vue
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
<template>
|
||||||
|
<base-table :data="tableData"
|
||||||
|
thead-classes="text-primary">
|
||||||
|
<template slot-scope="{row}">
|
||||||
|
<td>
|
||||||
|
<base-checkbox v-model="row.done">
|
||||||
|
</base-checkbox>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<p class="title">{{row.title}}</p>
|
||||||
|
<p class="text-muted">{{row.description}}</p>
|
||||||
|
</td>
|
||||||
|
<td class="td-actions text-right">
|
||||||
|
<base-button type="link">
|
||||||
|
<i class="tim-icons icon-pencil"></i>
|
||||||
|
</base-button>
|
||||||
|
</td>
|
||||||
|
</template>
|
||||||
|
</base-table>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import {BaseTable} from '@/components'
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
BaseTable
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tableData: [
|
||||||
|
{
|
||||||
|
title: 'Update the Documentation',
|
||||||
|
description: 'Dwuamish Head, Seattle, WA 8:47 AM',
|
||||||
|
done: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'GDPR Compliance',
|
||||||
|
description: 'The GDPR is a regulation that requires businesses to protect the personal data and privacy of Europe citizens for transactions that occur within EU member states.',
|
||||||
|
done: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Solve the issues',
|
||||||
|
description: 'Fifty percent of all respondents said they would be more likely to shop at a company',
|
||||||
|
done: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Release v2.0.0',
|
||||||
|
description: 'Ra Ave SW, Seattle, WA 98116, SUA 11:19 AM',
|
||||||
|
done: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Export the processed files',
|
||||||
|
description: 'The report also shows that consumers will not easily forgive a company once a breach exposing their personal data occurs.',
|
||||||
|
done: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Arival at export process',
|
||||||
|
description: 'Capitol Hill, Seattle, WA 12:34 AM',
|
||||||
|
done: false
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
77
src/pages/Dashboard/UserTable.vue
Normal file
77
src/pages/Dashboard/UserTable.vue
Normal file
@ -0,0 +1,77 @@
|
|||||||
|
<template>
|
||||||
|
<base-table :data="table.data"
|
||||||
|
:columns="table.columns"
|
||||||
|
thead-classes="text-primary">
|
||||||
|
</base-table>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { BaseTable } from "@/components";
|
||||||
|
const tableColumns = ["Name", "Country", "City", "Salary"];
|
||||||
|
let tableData = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: "Dakota Rice",
|
||||||
|
salary: "$36.738",
|
||||||
|
country: "Niger",
|
||||||
|
city: "Oud-Turnhout",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: "Minerva Hooper",
|
||||||
|
salary: "$23,789",
|
||||||
|
country: "Curaçao",
|
||||||
|
city: "Sinaai-Waas"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
name: "Sage Rodriguez",
|
||||||
|
salary: "$56,142",
|
||||||
|
country: "Netherlands",
|
||||||
|
city: "Baileux"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
name: "Philip Chaney",
|
||||||
|
salary: "$38,735",
|
||||||
|
country: "Korea, South",
|
||||||
|
city: "Overland Park"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
name: "Doris Greene",
|
||||||
|
salary: "$63,542",
|
||||||
|
country: "Malawi",
|
||||||
|
city: "Feldkirchen in Kärnten"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
name: 'Mason Porter',
|
||||||
|
salary: '$98,615',
|
||||||
|
country: 'Chile',
|
||||||
|
city: 'Gloucester'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
name: 'Jon Porter',
|
||||||
|
salary: '$78,615',
|
||||||
|
country: 'Portugal',
|
||||||
|
city: 'Gloucester'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
BaseTable
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
table: {
|
||||||
|
title: "Simple Table",
|
||||||
|
columns: [...tableColumns],
|
||||||
|
data: [...tableData]
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
@ -1,4 +1,4 @@
|
|||||||
import { FormGroupInput, Card, BaseDropdown, BaseButton } from "../components/index";
|
import { FormGroupInput, Card, BaseDropdown, BaseButton, BaseCheckbox } from "../components/index";
|
||||||
/**
|
/**
|
||||||
* You can register global components here and use them as a plugin in your main Vue instance
|
* You can register global components here and use them as a plugin in your main Vue instance
|
||||||
*/
|
*/
|
||||||
@ -9,6 +9,7 @@ const GlobalComponents = {
|
|||||||
Vue.component(Card.name, Card);
|
Vue.component(Card.name, Card);
|
||||||
Vue.component(BaseDropdown.name, BaseDropdown);
|
Vue.component(BaseDropdown.name, BaseDropdown);
|
||||||
Vue.component(BaseButton.name, BaseButton);
|
Vue.component(BaseButton.name, BaseButton);
|
||||||
|
Vue.component(BaseCheckbox.name, BaseCheckbox);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user