tobi/vue-black-dash
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Separate task list and user table from dashboard page into components

Browse Source
This commit is contained in:
cristij 2018-08-24 08:43:51 +03:00
parent 8c7286f9ed
commit f607586e0e
6 changed files with 221 additions and 263 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/components/BaseCheckbox.vue Normal file
View 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">&nbsp;</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>

2
src/components/index.js
View File

@ -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,

267
src/pages/Dashboard.vue
View File

@ -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>
</div>
<div class="card-body ">
</template>
<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>
<task-list></task-list>
</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
View 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
View 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>

3
src/plugins/globalComponents.js
View File

@ -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);
}
};