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 BaseCheckbox from "./BaseCheckbox.vue";
|
||||
import BaseDropdown from "./BaseDropdown.vue";
|
||||
import BaseTable from "./BaseTable.vue";
|
||||
import BaseButton from "./BaseButton";
|
||||
@ -15,6 +16,7 @@ export {
|
||||
Card,
|
||||
StatsCard,
|
||||
BaseTable,
|
||||
BaseCheckbox,
|
||||
BaseDropdown,
|
||||
BaseButton,
|
||||
BaseAlert,
|
||||
|
||||
@ -62,11 +62,11 @@
|
||||
<h3 class="card-title"><i class="tim-icons icon-delivery-fast text-info "></i> 3,500€</h3>
|
||||
</template>
|
||||
<div class="chart-area">
|
||||
<bar-chart style="height: 100%"
|
||||
:chart-data="blueBarChart.chartData"
|
||||
:gradient-color="blueBarChart.gradientColors"
|
||||
:gradient-stops="blueBarChart.gradientStops"
|
||||
:extra-options="blueBarChart.extraOptions">
|
||||
<bar-chart style="height: 100%"
|
||||
:chart-data="blueBarChart.chartData"
|
||||
:gradient-color="blueBarChart.gradientColors"
|
||||
:gradient-stops="blueBarChart.gradientStops"
|
||||
:extra-options="blueBarChart.extraOptions">
|
||||
</bar-chart>
|
||||
</div>
|
||||
</card>
|
||||
@ -90,8 +90,8 @@
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<div class="card card-tasks">
|
||||
<div class="card-header ">
|
||||
<card type="tasks">
|
||||
<template slot="header">
|
||||
<h6 class="title d-inline">Tasks(5)</h6>
|
||||
<p class="card-category d-inline">today</p>
|
||||
<div class="dropdown">
|
||||
@ -104,145 +104,11 @@
|
||||
<a class="dropdown-item" href="#pablo">Something else</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="table-full-width table-responsive">
|
||||
<task-list></task-list>
|
||||
</div>
|
||||
<div class="card-body ">
|
||||
<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>
|
||||
</card>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<div class="card ">
|
||||
@ -251,122 +117,7 @@
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table tablesorter " id="">
|
||||
<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>
|
||||
<user-table></user-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -378,11 +129,15 @@
|
||||
import LineChart from '@/components/Charts/LineChart';
|
||||
import BarChart from '@/components/Charts/BarChart';
|
||||
import * as chartConfigs from '@/components/Charts/config';
|
||||
import TaskList from './Dashboard/TaskList';
|
||||
import UserTable from './Dashboard/UserTable';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
LineChart,
|
||||
BarChart
|
||||
BarChart,
|
||||
TaskList,
|
||||
UserTable
|
||||
},
|
||||
data() {
|
||||
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
|
||||
*/
|
||||
@ -9,6 +9,7 @@ const GlobalComponents = {
|
||||
Vue.component(Card.name, Card);
|
||||
Vue.component(BaseDropdown.name, BaseDropdown);
|
||||
Vue.component(BaseButton.name, BaseButton);
|
||||
Vue.component(BaseCheckbox.name, BaseCheckbox);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user