mirror of
https://github.com/IT4Change/gradido.git
synced 2025-12-13 07:45:54 +00:00
Merge pull request #116 from gradido/delete-unused-files
Delete unused files
This commit is contained in:
Alexander Friedland
GitHub
commit
855d1180c1
@ -1,6 +1,5 @@
|
||||
import DashboardLayout from '@/views/Layout/DashboardLayout.vue'
|
||||
import DashboardLayout from '@/views/Layout/DashboardLayout_gdd.vue'
|
||||
import AuthLayoutGDD from '@/views/Layout/AuthLayout_gdd.vue'
|
||||
import AuthLayout from '@/views/Layout/AuthLayout.vue'
|
||||
|
||||
import NotFound from '@/views/NotFoundPage.vue'
|
||||
|
||||
@ -31,11 +30,6 @@ const routes = [
|
||||
name: 'Explorer',
|
||||
component: () => import('../views/Pages/Explorer.vue'),
|
||||
},
|
||||
{
|
||||
path: '/icons',
|
||||
name: 'Icons',
|
||||
component: () => import('../views/Icons.vue'),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
@ -68,21 +62,6 @@ const routes = [
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '/admin',
|
||||
redirect: 'admin',
|
||||
component: AuthLayout,
|
||||
children: [
|
||||
{
|
||||
path: '/AdminOverview',
|
||||
name: 'Adminübersicht',
|
||||
component: () => import('../views/AdminOverview.vue'),
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{ path: '*', component: NotFound },
|
||||
]
|
||||
|
||||
|
||||
@ -1,399 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<base-header class="pb-6 pb-8 pt-5 pt-md-8">
|
||||
<b-row>
|
||||
<b-col xl="3" md="6">
|
||||
<stats-card
|
||||
:title="$t('admin.site.overview.creation')"
|
||||
type="gradient-red"
|
||||
sub-title="350,897"
|
||||
icon="ni ni-active-40"
|
||||
class="mb-4"
|
||||
>
|
||||
<template slot="footer">
|
||||
<span class="text-success mr-2">3.48%</span>
|
||||
<span class="text-nowrap">
|
||||
{{ $t('site.overview.since_last_month') }}
|
||||
</span>
|
||||
</template>
|
||||
</stats-card>
|
||||
</b-col>
|
||||
<b-col xl="3" md="6">
|
||||
<stats-card
|
||||
:title="$t('admin.site.overview.transience')"
|
||||
type="gradient-orange"
|
||||
sub-title="2,356"
|
||||
icon="ni ni-chart-pie-35"
|
||||
class="mb-4"
|
||||
>
|
||||
<template slot="footer">
|
||||
<span class="text-success mr-2">12.18%</span>
|
||||
<span class="text-nowrap">
|
||||
{{ $t('site.overview.since_last_month') }}
|
||||
</span>
|
||||
</template>
|
||||
</stats-card>
|
||||
</b-col>
|
||||
<b-col xl="3" md="6">
|
||||
<stats-card
|
||||
:title="$t('admin.site.overview.exchanged')"
|
||||
type="gradient-green"
|
||||
sub-title="924"
|
||||
icon="ni ni-money-coins"
|
||||
class="mb-4"
|
||||
>
|
||||
<template slot="footer">
|
||||
<span class="text-danger mr-2">5.72%</span>
|
||||
<span class="text-nowrap">
|
||||
{{ $t('site.overview.since_last_month') }}
|
||||
</span>
|
||||
</template>
|
||||
</stats-card>
|
||||
</b-col>
|
||||
<b-col xl="3" md="6">
|
||||
<stats-card
|
||||
:title="$t('admin.site.overview.members')"
|
||||
type="gradient-info"
|
||||
sub-title="49,65%"
|
||||
icon="ni ni-chart-bar-32"
|
||||
class="mb-4"
|
||||
>
|
||||
<template slot="footer">
|
||||
<span class="text-success mr-2">54.8%</span>
|
||||
<span class="text-nowrap">
|
||||
{{ $t('site.overview.since_last_month') }}
|
||||
</span>
|
||||
</template>
|
||||
</stats-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</base-header>
|
||||
|
||||
<!--Charts-->
|
||||
<b-container fluid class="mt--7">
|
||||
<b-row>
|
||||
<b-col xl="8" class="mb-5 mb-xl-0">
|
||||
<card type="default" header-classes="bg-transparent">
|
||||
<b-row align-v="center" slot="header">
|
||||
<b-col>
|
||||
<h6 class="text-light text-uppercase ls-1 mb-1">Charts</h6>
|
||||
<h5 class="h3 mb-0">Geschöpft</h5>
|
||||
</b-col>
|
||||
<b-col>
|
||||
<b-nav class="nav-pills justify-content-end">
|
||||
<b-nav-item
|
||||
class="mr-2 mr-md-0"
|
||||
:active="bigLineChart.activeIndex === 0"
|
||||
link-classes="py-2 px-1"
|
||||
@click.prevent="initBigChart(0)"
|
||||
>
|
||||
<span class="d-none d-md-block">geschöpft</span>
|
||||
<span class="d-md-none">M</span>
|
||||
</b-nav-item>
|
||||
<b-nav-item
|
||||
link-classes="py-2 px-1"
|
||||
:active="bigLineChart.activeIndex === 1"
|
||||
@click.prevent="initBigChart(1)"
|
||||
>
|
||||
<span class="d-none d-md-block">geteilt</span>
|
||||
<span class="d-md-none">W</span>
|
||||
</b-nav-item>
|
||||
<b-nav-item
|
||||
link-classes="py-2 px-1"
|
||||
:active="bigLineChart.activeIndex === 2"
|
||||
@click.prevent="initBigChart(2)"
|
||||
>
|
||||
<span class="d-none d-md-block">vergangen</span>
|
||||
<span class="d-md-none">W</span>
|
||||
</b-nav-item>
|
||||
<b-nav-item
|
||||
link-classes="py-2 px-1"
|
||||
:active="bigLineChart.activeIndex === 3"
|
||||
@click.prevent="initBigChart(3)"
|
||||
>
|
||||
<span class="d-none d-md-block">mitglieder</span>
|
||||
<span class="d-md-none">W</span>
|
||||
</b-nav-item>
|
||||
</b-nav>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<line-chart
|
||||
:height="350"
|
||||
ref="bigChart"
|
||||
:chart-data="bigLineChart.chartData"
|
||||
:extra-options="bigLineChart.extraOptions"
|
||||
></line-chart>
|
||||
</card>
|
||||
</b-col>
|
||||
|
||||
<b-col xl="4" class="mb-5 mb-xl-0">
|
||||
<card header-classes="bg-transparent">
|
||||
<b-row align-v="center" slot="header">
|
||||
<b-col>
|
||||
<h6 class="text-uppercase text-muted ls-1 mb-1">Community</h6>
|
||||
<h5 class="h3 mb-0">Neue Einträge</h5>
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
<bar-chart :height="350" ref="barChart" :chart-data="redBarChart.chartData"></bar-chart>
|
||||
</card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<!-- End charts-->
|
||||
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<!--Tables User Search && New User-->
|
||||
<admin-user-search />
|
||||
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<admin-user-creation />
|
||||
|
||||
<br />
|
||||
|
||||
<b-card-header>
|
||||
<hr />
|
||||
<h3>Admin Participation List</h3>
|
||||
<small>/public/json-example/admin_card_statistic.json</small>
|
||||
<p>
|
||||
{{ cardstatistic }}
|
||||
</p>
|
||||
</b-card-header>
|
||||
<b-card-header>
|
||||
<hr />
|
||||
<h3>Admin Charts Statistic</h3>
|
||||
<small>/public/json-example/admin_charts_statistic.json</small>
|
||||
<p>
|
||||
{{ chartsstatistic }}
|
||||
</p>
|
||||
</b-card-header>
|
||||
<b-card-header>
|
||||
<hr />
|
||||
<h3>Admin Community Statistic</h3>
|
||||
<small>/public/json-example/admin_community_statistic.json</small>
|
||||
<p>
|
||||
{{ communitystatistic }}
|
||||
</p>
|
||||
</b-card-header>
|
||||
<b-card-header>
|
||||
<hr />
|
||||
<h3>Admin User List</h3>
|
||||
<small>/public/json-example/admin_userlist.json</small>
|
||||
<p>
|
||||
{{ userlist }}
|
||||
</p>
|
||||
</b-card-header>
|
||||
<b-card-header>
|
||||
<hr />
|
||||
<h3>Admin Transaction List</h3>
|
||||
<small>/public/json-example/admin_transaction_list.json</small>
|
||||
<p>
|
||||
{{ transactionlist }}
|
||||
</p>
|
||||
|
||||
<hr />
|
||||
</b-card-header>
|
||||
<b-card-header>
|
||||
<h3>Admin Transience List</h3>
|
||||
<small>/public/json-example/admin_transience_list.json</small>
|
||||
<p>
|
||||
{{ transiencelist }}
|
||||
</p>
|
||||
</b-card-header>
|
||||
<!--End tables-->
|
||||
</b-container>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// Charts
|
||||
import * as chartConfigs from '@/components/Charts/config'
|
||||
import LineChart from '@/components/Charts/LineChart'
|
||||
import BarChart from '@/components/Charts/BarChart'
|
||||
|
||||
// Components
|
||||
import BaseProgress from '@/components/BaseProgress'
|
||||
import StatsCard from '@/components/Cards/StatsCard'
|
||||
import SearchUser from '@/components/SearchUser'
|
||||
|
||||
// Tables
|
||||
|
||||
import PageVisitsTable from './Dashboard/PageVisitsTable'
|
||||
import AdminUserSearch from './AdminOverview/AdminUserSearch'
|
||||
import AdminUserCreation from './AdminOverview/AdminUserCreation'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
LineChart,
|
||||
BarChart,
|
||||
//BaseProgress,
|
||||
StatsCard,
|
||||
//PageVisitsTable,
|
||||
AdminUserSearch,
|
||||
AdminUserCreation,
|
||||
//SearchUser
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
statisticdata: [],
|
||||
cardstatistic: [],
|
||||
chartsstatistic: [],
|
||||
communitystatistic: [],
|
||||
userlist: [],
|
||||
transactionlist: [],
|
||||
transiencelist: [],
|
||||
filter: '',
|
||||
items: [
|
||||
{ id: 1, first_name: 'Mikkel', last_name: 'Hansen', age: 54 },
|
||||
{ id: 2, first_name: 'Kasper', last_name: 'Hvidt', age: 42 },
|
||||
{ id: 3, first_name: 'Lasse', last_name: 'Boesen', age: 39 },
|
||||
{ id: 4, first_name: 'Kasper', last_name: 'Hansen', age: 62 },
|
||||
{ id: 5, first_name: 'Mads', last_name: 'Mikkelsen', age: 31 },
|
||||
],
|
||||
bigLineChart: {
|
||||
allData: [
|
||||
[0, 20, 10, 30, 15, 40, 20, 60, 60],
|
||||
[0, 20, 5, 25, 10, 30, 35, 60, 40],
|
||||
[0, 2, 5, 7, 10, 30, 15, 9, 10],
|
||||
[0, 2, 5, 7, 10, 14, 29, 78, 120],
|
||||
],
|
||||
activeIndex: 0,
|
||||
chartData: {
|
||||
datasets: [
|
||||
{
|
||||
label: 'Performance',
|
||||
data: [0, 20, 10, 30, 15, 40, 20, 60, 60],
|
||||
},
|
||||
],
|
||||
labels: ['May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
},
|
||||
extraOptions: chartConfigs.blueChartOptions,
|
||||
},
|
||||
redBarChart: {
|
||||
chartData: {
|
||||
labels: ['Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Sales',
|
||||
data: [25, 20, 30, 22, 17, 29],
|
||||
},
|
||||
],
|
||||
},
|
||||
extraOptions: chartConfigs.blueChartOptions,
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
TransienceList() {
|
||||
axios.get('/json-example/admin_transience_list.json').then(
|
||||
(d) => {
|
||||
//console.log(d);
|
||||
this.transiencelist = d.data
|
||||
},
|
||||
(error) => {
|
||||
//console.log(error)
|
||||
},
|
||||
)
|
||||
},
|
||||
TransactionList() {
|
||||
axios.get('/json-example/admin_transaction_list.json').then(
|
||||
(d) => {
|
||||
//console.log(d);
|
||||
this.transactionlist = d.data
|
||||
},
|
||||
(error) => {
|
||||
//console.log(error)
|
||||
},
|
||||
)
|
||||
},
|
||||
UserList() {
|
||||
axios.get('/json-example/admin_userlist.json').then(
|
||||
(d) => {
|
||||
//console.log(d);
|
||||
this.userlist = d.data
|
||||
},
|
||||
(error) => {
|
||||
//console.log(error)
|
||||
},
|
||||
)
|
||||
},
|
||||
CommunityStatistic() {
|
||||
axios.get('/json-example/admin_community_statistic.json').then(
|
||||
(d) => {
|
||||
//console.log(d);
|
||||
this.communitystatistic = d.data
|
||||
},
|
||||
(error) => {
|
||||
//console.log(error)
|
||||
},
|
||||
)
|
||||
},
|
||||
ChartsStatistic() {
|
||||
axios.get('/json-example/admin_charts_statistic.json').then(
|
||||
(d) => {
|
||||
//console.log(d);
|
||||
this.chartsstatistic = d.data
|
||||
},
|
||||
(error) => {
|
||||
//console.log(error)
|
||||
},
|
||||
)
|
||||
},
|
||||
CardStatistic() {
|
||||
axios.get('/json-example/admin_card_statistic.json').then(
|
||||
(d) => {
|
||||
//console.log(d);
|
||||
this.cardstatistic = d.data
|
||||
},
|
||||
(error) => {
|
||||
//console.log(error)
|
||||
},
|
||||
)
|
||||
},
|
||||
StatisticDatas() {
|
||||
axios.get('/json-example/admin_statisticdatas.json').then(
|
||||
(d) => {
|
||||
//console.log(d);
|
||||
this.userdata = d.data
|
||||
},
|
||||
(error) => {
|
||||
//console.log(error)
|
||||
},
|
||||
)
|
||||
},
|
||||
initBigChart(index) {
|
||||
let chartData = {
|
||||
datasets: [
|
||||
{
|
||||
label: 'Performance',
|
||||
data: this.bigLineChart.allData[index],
|
||||
},
|
||||
],
|
||||
labels: ['May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
}
|
||||
this.bigLineChart.chartData = chartData
|
||||
this.bigLineChart.activeIndex = index
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.initBigChart(0)
|
||||
this.TransienceList()
|
||||
this.TransactionList()
|
||||
this.UserList()
|
||||
this.CommunityStatistic()
|
||||
this.ChartsStatistic()
|
||||
this.CardStatistic()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.el-table .cell {
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
</style>
|
||||
@ -1,347 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<b-card-header>Gradido Schüpfung</b-card-header>
|
||||
<!--Tables-->
|
||||
<b-row class="mt-5">
|
||||
<b-col xl="8" class="mb-5 mb-xl-0">
|
||||
<vue-good-table
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
max-height="370px"
|
||||
:fixed-header="true"
|
||||
:line-numbers="false"
|
||||
styleClass="vgt-table"
|
||||
theme="nocturnal"
|
||||
@on-row-click="onRowClick"
|
||||
@on-search="onSearch"
|
||||
:search-options="{
|
||||
enabled: true,
|
||||
|
||||
skipDiacritics: true,
|
||||
searchFn: mySearchFn,
|
||||
placeholder: 'durchsuche die tabelle',
|
||||
}"
|
||||
:pagination-options="{
|
||||
enabled: true,
|
||||
mode: 'pages',
|
||||
}"
|
||||
>
|
||||
<div slot="table-actions">Einträge suchen .</div>
|
||||
</vue-good-table>
|
||||
</b-col>
|
||||
<b-col xl="4" class="mb-5 mb-xl-0">
|
||||
<b-card body-class="p-0" header-class="border-0">
|
||||
<template v-slot:header>
|
||||
<b-row align-v="center">
|
||||
<b-col>
|
||||
<h3 class="mb-0"></h3>
|
||||
</b-col>
|
||||
<b-col class="text-right">
|
||||
<a href="#!" class="btn btn-sm btn-primary">speichern</a>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</template>
|
||||
<b-card-body>
|
||||
<p>{{ creation.createdAt }}</p>
|
||||
<p>{{ creation.group }}</p>
|
||||
<p>{{ creation.id }}</p>
|
||||
<p>{{ creation.name }}</p>
|
||||
<p>{{ creation.originalIndex }}</p>
|
||||
<p>{{ creation.text }}</p>
|
||||
<p>{{ creation.vgt_id }}</p>
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<!--End tables-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'admin-user-creation',
|
||||
data() {
|
||||
return {
|
||||
creation: {
|
||||
createdAt: '',
|
||||
group: '',
|
||||
id: '',
|
||||
name: '',
|
||||
originalIndex: '',
|
||||
text: '',
|
||||
vgt_id: '',
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
label: 'Name',
|
||||
field: 'name',
|
||||
},
|
||||
{
|
||||
label: 'Gruppe',
|
||||
field: 'group',
|
||||
type: 'group',
|
||||
},
|
||||
{
|
||||
label: 'eingereicht',
|
||||
field: 'createdAt',
|
||||
type: 'date',
|
||||
dateInputFormat: 'yyyy-MM-dd',
|
||||
dateOutputFormat: 'dd.MM.yyyy',
|
||||
},
|
||||
{
|
||||
label: 'Text',
|
||||
field: 'text',
|
||||
type: 'text',
|
||||
},
|
||||
],
|
||||
rows: [
|
||||
{
|
||||
id: 1,
|
||||
createdAt: '2021-01-25',
|
||||
name: 'Sellora',
|
||||
group: 'gruppe1',
|
||||
text: 'aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
createdAt: '2021-01-31',
|
||||
name: 'Jane',
|
||||
group: 'gruppe14',
|
||||
text: 'WQadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
createdAt: '2021-01-30',
|
||||
name: 'Susan',
|
||||
group: 'gruppe31',
|
||||
text: 'IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
createdAt: '2020-01-11',
|
||||
name: 'Chris',
|
||||
group: 'gruppe12',
|
||||
text: 'TZadhhCYXCda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
createdAt: '2020-12-21',
|
||||
name: 'Dan',
|
||||
group: 'gruppe11',
|
||||
text: 'Wad3323hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
createdAt: '2020-12-31',
|
||||
name: 'zBohn',
|
||||
group: 'gruppe71',
|
||||
text: 'Tadh hD da hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
createdAt: '2020-12-31',
|
||||
name: 'xyTellohn',
|
||||
group: 'gruppe31',
|
||||
text: 'Fad AD31 hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
createdAt: '2021-01-25',
|
||||
name: 'uSellora',
|
||||
group: 'gruppe1',
|
||||
text: 'aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
createdAt: '2021-01-31',
|
||||
name: 'yJane',
|
||||
group: 'gruppe14',
|
||||
text: '55 55 55 WQadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
createdAt: '2021-01-20',
|
||||
name: 'kSusan',
|
||||
group: 'gruppe31',
|
||||
text: 'IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
createdAt: '2021-01-25',
|
||||
name: 'qSellora',
|
||||
group: 'gruppe12',
|
||||
text: 'aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
createdAt: '2021-01-31',
|
||||
name: 'fJane',
|
||||
group: 'gruppe15',
|
||||
text: 'WQadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
createdAt: '2021-01-38',
|
||||
name: 'aSusan',
|
||||
group: 'gruppe1',
|
||||
text: 'asssss IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
createdAt: '2020-01-11',
|
||||
name: 'uChris',
|
||||
group: 'gruppe12',
|
||||
text: 'TZadhhCYXCda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
||||
},
|
||||
{
|
||||
id: 15,
|
||||
createdAt: '2020-12-21',
|
||||
name: 'tzDan',
|
||||
group: 'gruppe11',
|
||||
text: 'Wad33 23hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
||||
},
|
||||
{
|
||||
id: 16,
|
||||
createdAt: '2020-12-31',
|
||||
name: 'fBohn',
|
||||
group: 'gruppe71',
|
||||
text: '3f Tadh hD da hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
||||
},
|
||||
{
|
||||
id: 17,
|
||||
createdAt: '2020-12-31',
|
||||
name: 'aEsau',
|
||||
group: 'gruppe15',
|
||||
text: '2324 adhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
||||
},
|
||||
{
|
||||
id: 18,
|
||||
createdAt: '2021-01-25',
|
||||
name: 'gSellora',
|
||||
group: 'gruppe1',
|
||||
text: '5h aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
||||
},
|
||||
{
|
||||
id: 19,
|
||||
createdAt: '2021-01-31',
|
||||
name: 'sJane',
|
||||
group: 'gruppe14',
|
||||
text: 'as sdsd WQadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
||||
},
|
||||
{
|
||||
id: 20,
|
||||
createdAt: '2021-01-30',
|
||||
name: 'oSusan',
|
||||
group: 'gruppe31',
|
||||
text: 'sd IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
||||
},
|
||||
{
|
||||
id: 21,
|
||||
createdAt: '2021-01-25',
|
||||
name: 'Sellora',
|
||||
group: 'gruppe1',
|
||||
text: '3 aASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
||||
},
|
||||
{
|
||||
id: 22,
|
||||
createdAt: '2021-01-13',
|
||||
name: 'rtJane',
|
||||
group: 'gruppe14',
|
||||
text: 'q WQadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
||||
},
|
||||
{
|
||||
id: 23,
|
||||
createdAt: '2021-01-16',
|
||||
name: 'rSusan',
|
||||
group: 'gruppe31',
|
||||
text: 'Iare YXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
||||
},
|
||||
{
|
||||
id: 24,
|
||||
createdAt: '2020-01-15',
|
||||
name: 'sChris',
|
||||
group: 'gruppe12',
|
||||
text: '43 TZad hhCYXCda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
||||
},
|
||||
{
|
||||
id: 25,
|
||||
createdAt: '2020-12-14',
|
||||
name: 'dDan',
|
||||
group: 'gruppe11',
|
||||
text: 'aas aWad3323hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
||||
},
|
||||
{
|
||||
id: 26,
|
||||
createdAt: '2020-12-13',
|
||||
name: 'fBohn',
|
||||
group: 'gruppe71',
|
||||
text: 'Ta adh hD da hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
||||
},
|
||||
{
|
||||
id: 27,
|
||||
createdAt: '2020-12-12',
|
||||
name: 'gTellohn',
|
||||
group: 'gruppe31',
|
||||
text: '55 Fad AD31 hhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
||||
},
|
||||
{
|
||||
id: 28,
|
||||
createdAt: '2021-01-12',
|
||||
name: 'zSellora',
|
||||
group: 'gruppe1',
|
||||
text: 'e q raASDASdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
||||
},
|
||||
{
|
||||
id: 29,
|
||||
createdAt: '2021-01-12',
|
||||
name: 'uJane',
|
||||
group: 'gruppe14',
|
||||
text: 'erW QadCXhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
||||
},
|
||||
{
|
||||
id: 30,
|
||||
createdAt: '2021-01-11',
|
||||
name: 'iSusan',
|
||||
group: 'gruppe31',
|
||||
text: '3IaYXCYdhhda hkahkh hakdh kaks hkadhk kdhkasdh kdhkhka dka dhakhdk',
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onRowClick(params) {
|
||||
/*
|
||||
console.log('onRowClick', params.row.createdAt)
|
||||
console.log('onRowClick', params.row.group)
|
||||
console.log('onRowClick', params.row.id)
|
||||
console.log('onRowClick', params.row.name)
|
||||
console.log('onRowClick', params.row.originalIndex)
|
||||
console.log('onRowClick', params.row.text)
|
||||
console.log('onRowClick', params.row.vgt_id)
|
||||
*/
|
||||
|
||||
this.creation.createdAt = params.row.createdAt
|
||||
this.creation.group = params.row.group
|
||||
this.creation.id = params.row.id
|
||||
this.creation.name = params.row.name
|
||||
this.creation.originalIndex = params.row.originalIndex
|
||||
this.creation.text = params.row.text
|
||||
this.creation.vgt_id = params.row.vgt_id
|
||||
|
||||
// params.row - row object
|
||||
// params.pageIndex - index of this row on the current page.
|
||||
// params.selected - if selection is enabled this argument
|
||||
// indicates selected or not
|
||||
// params.event - click event
|
||||
},
|
||||
onSearch(params) {
|
||||
//console.log('onSearch', params)
|
||||
// params.searchTerm - term being searched for
|
||||
// params.rowCount - number of rows that match search
|
||||
},
|
||||
mySearchFn(params) {
|
||||
//console.log("mySearchFn", params)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -1,261 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<b-card-header>User</b-card-header>
|
||||
<!--Tables-->
|
||||
<b-row class="mt-5">
|
||||
<b-col xl="8" class="mb-5 mb-xl-0">
|
||||
<vue-good-table
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
max-height="470px"
|
||||
:fixed-header="true"
|
||||
:line-numbers="false"
|
||||
styleClass="vgt-table striped condensed"
|
||||
theme="nocturnal"
|
||||
@on-row-click="onRowClick"
|
||||
@on-search="onSearch"
|
||||
:search-options="{
|
||||
enabled: true,
|
||||
skipDiacritics: true,
|
||||
searchFn: mySearchFn,
|
||||
placeholder: 'durchsuche die tabelle',
|
||||
}"
|
||||
:pagination-options="{
|
||||
enabled: true,
|
||||
mode: 'pages',
|
||||
}"
|
||||
>
|
||||
<div slot="table-actions">Mitglieder suchen .</div>
|
||||
</vue-good-table>
|
||||
</b-col>
|
||||
<b-col xl="4" class="mb-5 mb-xl-0">
|
||||
<!-- card neues mitglied -->
|
||||
<b-card v-if="showNewUser" body-class="p-0" header-class="border-0">
|
||||
<template v-slot:header>
|
||||
<b-row align-v="center">
|
||||
<b-col>
|
||||
<h3 class="mb-0">Neues Mitglied anlegen</h3>
|
||||
</b-col>
|
||||
<b-col class="text-right">
|
||||
<a href="#!" class="btn btn-sm btn-primary">speichern</a>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</template>
|
||||
<b-card-body>
|
||||
<form>
|
||||
<b-row class="">
|
||||
<label class="col-md-3 col-form-label form-control-label">Name</label>
|
||||
<b-col md="10">
|
||||
<base-input placeholder="Jon Snow"></base-input>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row class="">
|
||||
<label for="example-email-input" class="col-md-3 col-form-label form-control-label">
|
||||
Email
|
||||
</label>
|
||||
<b-col md="10">
|
||||
<base-input
|
||||
type="email"
|
||||
placeholder="gradido@example.com"
|
||||
id="example-email-input0"
|
||||
/>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row class="">
|
||||
<label class="col-md-3 col-form-label form-control-label">Gruppe</label>
|
||||
<b-col md="10">
|
||||
<base-input placeholder="Gruppe"></base-input>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</form>
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
|
||||
<!-- card mitglied bearbeiten -->
|
||||
<b-card v-else body-class="p-0" header-class="border-0">
|
||||
<template v-slot:header>
|
||||
<b-row align-v="center">
|
||||
<b-col>
|
||||
<h3 class="mb-0">Mitglied Daten</h3>
|
||||
</b-col>
|
||||
<b-col class="text-right">
|
||||
<a href="#!" @click="showNewUser = true" class="btn btn-sm btn-warning">
|
||||
schliesen
|
||||
</a>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</template>
|
||||
<b-card-body>
|
||||
<img
|
||||
style="width: 147px"
|
||||
src="https://demos.creative-tim.com/argon-dashboard-pro/assets/img/theme/team-4.jpg"
|
||||
/>
|
||||
|
||||
<form>
|
||||
<b-row class="">
|
||||
<label class="col-md-3 col-form-label form-control-label">Name</label>
|
||||
<b-col md="10">
|
||||
<base-input placeholder="name"></base-input>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row class="">
|
||||
<label for="example-email-input" class="col-md-3 col-form-label form-control-label">
|
||||
Email
|
||||
</label>
|
||||
<b-col md="10">
|
||||
<base-input
|
||||
type="email"
|
||||
autocomplete="username email"
|
||||
placeholder="agradido@example.com"
|
||||
id="example-email-input1"
|
||||
/>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row class="">
|
||||
<label class="col-md-3 col-form-label form-control-label">Gruppe</label>
|
||||
<b-col md="10">
|
||||
<base-input placeholder="Gruppe"></base-input>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</form>
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'admin-user-search',
|
||||
data() {
|
||||
return {
|
||||
showNewUser: true,
|
||||
formSetUser: {
|
||||
name: '',
|
||||
email: '',
|
||||
group: '',
|
||||
},
|
||||
formGetUser: {
|
||||
name: '',
|
||||
email: '',
|
||||
group: '',
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
label: 'Name',
|
||||
field: 'name',
|
||||
},
|
||||
{
|
||||
label: 'E-Mail',
|
||||
field: 'email',
|
||||
type: 'email',
|
||||
},
|
||||
{
|
||||
label: 'Mitglied seid',
|
||||
field: 'createdAt',
|
||||
type: 'date',
|
||||
dateInputFormat: 'yyyy-MM-dd',
|
||||
dateOutputFormat: 'dd.MM.yyyy',
|
||||
},
|
||||
{
|
||||
label: 'Gruppe',
|
||||
field: 'group',
|
||||
type: 'group',
|
||||
},
|
||||
],
|
||||
rows: [
|
||||
{
|
||||
id: 1,
|
||||
name: 'John',
|
||||
email: 'temail@tutanota.com',
|
||||
createdAt: '1976-10-25',
|
||||
group: 'gruppe1',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Jane',
|
||||
email: 'temail@tutanota.com',
|
||||
createdAt: '2011-10-31',
|
||||
group: 'gruppe2',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'Susan',
|
||||
email: 'temail@tutanota.com',
|
||||
createdAt: '2011-10-30',
|
||||
group: 'gruppe4',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: 'Chris',
|
||||
email: 'temail@tutanota.com',
|
||||
createdAt: '2011-10-11',
|
||||
group: 'gruppe3',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: 'Dan',
|
||||
email: 'temail@tutanota.com',
|
||||
createdAt: '2011-10-21',
|
||||
group: 'gruppe1',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: 'Bohn',
|
||||
email: 'temail@tutanota.com',
|
||||
createdAt: '2011-10-31',
|
||||
group: 'gruppe2',
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: 'Tellohn',
|
||||
email: 'temail@tutanota.com',
|
||||
createdAt: '2009-10-31',
|
||||
group: 'gruppe2',
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: 'Tellohn',
|
||||
email: 'temail@tutanota.com',
|
||||
createdAt: '2009-10-31',
|
||||
group: 'gruppe5',
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onRowClick(params) {
|
||||
//console.log(params.row)
|
||||
this.showNewUser = false
|
||||
// params.row - row object
|
||||
// params.pageIndex - index of this row on the current page.
|
||||
// params.selected - if selection is enabled this argument
|
||||
// indicates selected or not
|
||||
// params.event - click event
|
||||
},
|
||||
onSearch(params) {
|
||||
//console.log(params)
|
||||
// params.searchTerm - term being searched for
|
||||
// params.rowCount - number of rows that match search
|
||||
},
|
||||
mySearchFn(params) {
|
||||
//console.log(params)
|
||||
},
|
||||
validateEmail(value) {
|
||||
if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(value)) {
|
||||
this.msg['email'] = ''
|
||||
} else {
|
||||
this.msg['email'] = 'Invalid Email Address'
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
mail(value) {
|
||||
// binding this to the data value in the email input
|
||||
this.email = value
|
||||
this.validateEmail(value)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -1,14 +0,0 @@
|
||||
<template>
|
||||
<div>default</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'default',
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {},
|
||||
watch: {},
|
||||
}
|
||||
</script>
|
||||
@ -1,215 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<base-header class="pb-6 pb-8 pt-5 pt-md-8">
|
||||
<!-- Card stats -->
|
||||
<b-row>
|
||||
<b-col xl="3" md="6">
|
||||
<stats-card
|
||||
title="Total traffic"
|
||||
type="gradient-red"
|
||||
sub-title="350,897"
|
||||
icon="ni ni-active-40"
|
||||
class="mb-4"
|
||||
>
|
||||
<template slot="footer">
|
||||
<span class="text-success mr-2">3.48%</span>
|
||||
<span class="text-nowrap">Since last month</span>
|
||||
</template>
|
||||
</stats-card>
|
||||
</b-col>
|
||||
<b-col xl="3" md="6">
|
||||
<stats-card
|
||||
title="Total traffic"
|
||||
type="gradient-orange"
|
||||
sub-title="2,356"
|
||||
icon="ni ni-chart-pie-35"
|
||||
class="mb-4"
|
||||
>
|
||||
<template slot="footer">
|
||||
<span class="text-success mr-2">12.18%</span>
|
||||
<span class="text-nowrap">Since last month</span>
|
||||
</template>
|
||||
</stats-card>
|
||||
</b-col>
|
||||
<b-col xl="3" md="6">
|
||||
<stats-card
|
||||
title="Sales"
|
||||
type="gradient-green"
|
||||
sub-title="924"
|
||||
icon="ni ni-money-coins"
|
||||
class="mb-4"
|
||||
>
|
||||
<template slot="footer">
|
||||
<span class="text-danger mr-2">5.72%</span>
|
||||
<span class="text-nowrap">Since last month</span>
|
||||
</template>
|
||||
</stats-card>
|
||||
</b-col>
|
||||
<b-col xl="3" md="6">
|
||||
<stats-card
|
||||
title="Performance"
|
||||
type="gradient-info"
|
||||
sub-title="49,65%"
|
||||
icon="ni ni-chart-bar-32"
|
||||
class="mb-4"
|
||||
>
|
||||
<template slot="footer">
|
||||
<span class="text-success mr-2">54.8%</span>
|
||||
<span class="text-nowrap">Since last month</span>
|
||||
</template>
|
||||
</stats-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</base-header>
|
||||
|
||||
<!--Charts-->
|
||||
<b-container fluid class="mt--7">
|
||||
<b-row>
|
||||
<b-col xl="8" class="mb-5 mb-xl-0">
|
||||
<card type="default" header-classes="bg-transparent">
|
||||
<b-row align-v="center" slot="header">
|
||||
<b-col>
|
||||
<h6 class="text-light text-uppercase ls-1 mb-1">Overview</h6>
|
||||
<h5 class="h3 mb-0">Sales value</h5>
|
||||
</b-col>
|
||||
<b-col>
|
||||
<b-nav class="nav-pills justify-content-end">
|
||||
<b-nav-item
|
||||
class="mr-2 mr-md-0"
|
||||
:active="bigLineChart.activeIndex === 0"
|
||||
link-classes="py-2 px-3"
|
||||
@click.prevent="initBigChart(0)"
|
||||
>
|
||||
<span class="d-none d-md-block">Month</span>
|
||||
<span class="d-md-none">M</span>
|
||||
</b-nav-item>
|
||||
<b-nav-item
|
||||
link-classes="py-2 px-3"
|
||||
:active="bigLineChart.activeIndex === 1"
|
||||
@click.prevent="initBigChart(1)"
|
||||
>
|
||||
<span class="d-none d-md-block">Week</span>
|
||||
<span class="d-md-none">W</span>
|
||||
</b-nav-item>
|
||||
</b-nav>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<line-chart
|
||||
:height="350"
|
||||
ref="bigChart"
|
||||
:chart-data="bigLineChart.chartData"
|
||||
:extra-options="bigLineChart.extraOptions"
|
||||
></line-chart>
|
||||
</card>
|
||||
</b-col>
|
||||
|
||||
<b-col xl="4" class="mb-5 mb-xl-0">
|
||||
<card header-classes="bg-transparent">
|
||||
<b-row align-v="center" slot="header">
|
||||
<b-col>
|
||||
<h6 class="text-uppercase text-muted ls-1 mb-1">Performance</h6>
|
||||
<h5 class="h3 mb-0">Total orders</h5>
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
<bar-chart :height="350" ref="barChart" :chart-data="redBarChart.chartData"></bar-chart>
|
||||
</card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<!-- End charts-->
|
||||
|
||||
<!--Tables-->
|
||||
<b-row class="mt-5">
|
||||
<b-col xl="8" class="mb-5 mb-xl-0">
|
||||
<page-visits-table></page-visits-table>
|
||||
</b-col>
|
||||
<b-col xl="4" class="mb-5 mb-xl-0">
|
||||
<social-traffic-table></social-traffic-table>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<!--End tables-->
|
||||
</b-container>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// Charts
|
||||
import * as chartConfigs from '@/components/Charts/config'
|
||||
import LineChart from '@/components/Charts/LineChart'
|
||||
import BarChart from '@/components/Charts/BarChart'
|
||||
|
||||
// Components
|
||||
import BaseProgress from '@/components/BaseProgress'
|
||||
import StatsCard from '@/components/Cards/StatsCard'
|
||||
|
||||
// Tables
|
||||
import SocialTrafficTable from './Dashboard/SocialTrafficTable'
|
||||
import PageVisitsTable from './Dashboard/PageVisitsTable'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
LineChart,
|
||||
BarChart,
|
||||
//BaseProgress,
|
||||
StatsCard,
|
||||
PageVisitsTable,
|
||||
SocialTrafficTable,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
bigLineChart: {
|
||||
allData: [
|
||||
[0, 20, 10, 30, 15, 40, 20, 60, 60],
|
||||
[0, 20, 5, 25, 10, 30, 15, 40, 40],
|
||||
],
|
||||
activeIndex: 0,
|
||||
chartData: {
|
||||
datasets: [
|
||||
{
|
||||
label: 'Performance',
|
||||
data: [0, 20, 10, 30, 15, 40, 20, 60, 60],
|
||||
},
|
||||
],
|
||||
labels: ['May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
},
|
||||
extraOptions: chartConfigs.blueChartOptions,
|
||||
},
|
||||
redBarChart: {
|
||||
chartData: {
|
||||
labels: ['Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Sales',
|
||||
data: [25, 20, 30, 22, 17, 29],
|
||||
},
|
||||
],
|
||||
},
|
||||
extraOptions: chartConfigs.blueChartOptions,
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initBigChart(index) {
|
||||
let chartData = {
|
||||
datasets: [
|
||||
{
|
||||
label: 'Performance',
|
||||
data: this.bigLineChart.allData[index],
|
||||
},
|
||||
],
|
||||
labels: ['May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
}
|
||||
this.bigLineChart.chartData = chartData
|
||||
this.bigLineChart.activeIndex = index
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.initBigChart(0)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.el-table .cell {
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
</style>
|
||||
@ -1,150 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--Tables-->
|
||||
<b-row class="mt-5">
|
||||
<b-col xl="8" class="mb-5 mb-xl-0">
|
||||
<vue-good-table
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
max-height="370px"
|
||||
:fixed-header="true"
|
||||
:line-numbers="true"
|
||||
@on-row-click="onRowClick"
|
||||
@on-search="onSearch"
|
||||
:search-options="{
|
||||
enabled: true,
|
||||
|
||||
skipDiacritics: true,
|
||||
searchFn: mySearchFn,
|
||||
placeholder: 'durchsuche die tabelle',
|
||||
externalQuery: searchQuery,
|
||||
}"
|
||||
:pagination-options="{
|
||||
enabled: true,
|
||||
mode: 'pages',
|
||||
}"
|
||||
>
|
||||
<div slot="table-actions">Mitglieder suchen .</div>
|
||||
</vue-good-table>
|
||||
</b-col>
|
||||
<b-col xl="4" class="mb-5 mb-xl-0">
|
||||
<social-traffic-table></social-traffic-table>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<!--End tables-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SocialTrafficTable from './SocialTrafficTable'
|
||||
|
||||
export default {
|
||||
name: 'my-component',
|
||||
components: {
|
||||
SocialTrafficTable,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
label: 'Name',
|
||||
field: 'name',
|
||||
},
|
||||
{
|
||||
label: 'Alter',
|
||||
field: 'age',
|
||||
type: 'number',
|
||||
},
|
||||
{
|
||||
label: 'Mitglied seid',
|
||||
field: 'createdAt',
|
||||
type: 'date',
|
||||
dateInputFormat: 'yyyy-MM-dd',
|
||||
dateOutputFormat: 'dd.MM.yyyy',
|
||||
},
|
||||
{
|
||||
label: 'Prozent',
|
||||
field: 'score',
|
||||
type: 'percentage',
|
||||
},
|
||||
],
|
||||
rows: [
|
||||
{
|
||||
id: 1,
|
||||
name: 'John',
|
||||
age: 20,
|
||||
createdAt: '1976-10-25',
|
||||
score: 0.03343,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Jane',
|
||||
age: 24,
|
||||
createdAt: '2011-10-31',
|
||||
score: 0.03343,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'Susan',
|
||||
age: 16,
|
||||
createdAt: '2011-10-30',
|
||||
score: 0.03343,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: 'Chris',
|
||||
age: 55,
|
||||
createdAt: '2011-10-11',
|
||||
score: 0.03343,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: 'Dan',
|
||||
age: 40,
|
||||
createdAt: '2011-10-21',
|
||||
score: 0.03343,
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: 'Bohn',
|
||||
age: 70,
|
||||
createdAt: '2011-10-31',
|
||||
score: 0.03343,
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: 'Tellohn',
|
||||
age: 56,
|
||||
createdAt: '2009-10-31',
|
||||
score: 0.13343,
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: 'Tellohn',
|
||||
age: 56,
|
||||
createdAt: '2009-10-31',
|
||||
score: 0.03343,
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onRowClick(params) {
|
||||
//console.log(params)
|
||||
// params.row - row object
|
||||
// params.pageIndex - index of this row on the current page.
|
||||
// params.selected - if selection is enabled this argument
|
||||
// indicates selected or not
|
||||
// params.event - click event
|
||||
},
|
||||
onSearch(params) {
|
||||
//console.log(params)
|
||||
// params.searchTerm - term being searched for
|
||||
// params.rowCount - number of rows that match search
|
||||
},
|
||||
mySearchFn(params) {
|
||||
//console.log(params)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -1,80 +0,0 @@
|
||||
<template>
|
||||
<b-card body-class="p-0" header-class="border-0">
|
||||
<template v-slot:header>
|
||||
<b-row align-v="center">
|
||||
<b-col>
|
||||
<h3 class="mb-0">Page visits</h3>
|
||||
</b-col>
|
||||
<b-col class="text-right">
|
||||
<a href="#!" class="btn btn-sm btn-primary">See all</a>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</template>
|
||||
|
||||
<el-table class="table-responsive table" :data="tableData" header-row-class-name="thead-light">
|
||||
<el-table-column label="Page name" min-width="130px" prop="page">
|
||||
<template v-slot="{ row }">
|
||||
<div class="font-weight-600">{{ row.page }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Visitors" min-width="70px" prop="visitors"></el-table-column>
|
||||
<el-table-column label="Unique users" min-width="90px" prop="unique"></el-table-column>
|
||||
|
||||
<el-table-column label="Bounce rate" min-width="90px" prop="bounceRate">
|
||||
<template v-slot="{ row }">
|
||||
{{ row.bounceRate }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</b-card>
|
||||
</template>
|
||||
<script>
|
||||
import { Table, TableColumn, DropdownMenu, DropdownItem, Dropdown } from 'element-ui'
|
||||
export default {
|
||||
name: 'page-visits-table',
|
||||
components: {
|
||||
[Table.name]: Table,
|
||||
[TableColumn.name]: TableColumn,
|
||||
[Dropdown.name]: Dropdown,
|
||||
[DropdownItem.name]: DropdownItem,
|
||||
[DropdownMenu.name]: DropdownMenu,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [
|
||||
{
|
||||
page: '/argon/',
|
||||
visitors: '4,569',
|
||||
unique: '340',
|
||||
bounceRate: '46,53%',
|
||||
},
|
||||
{
|
||||
page: '/argon/index.html',
|
||||
visitors: '3,985',
|
||||
unique: '319',
|
||||
bounceRate: '46,53%',
|
||||
},
|
||||
{
|
||||
page: '/argon/charts.html',
|
||||
visitors: '3,513',
|
||||
unique: '294',
|
||||
bounceRate: '36,49%',
|
||||
},
|
||||
{
|
||||
page: '/argon/tables.html',
|
||||
visitors: '2,050',
|
||||
unique: '147',
|
||||
bounceRate: '50,87%',
|
||||
},
|
||||
{
|
||||
page: '/argon/profile.html',
|
||||
visitors: '1,795',
|
||||
unique: '190',
|
||||
bounceRate: '46,53%',
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style></style>
|
||||
@ -1,85 +0,0 @@
|
||||
<template>
|
||||
<b-card body-class="p-0" header-class="border-0">
|
||||
<template v-slot:header>
|
||||
<b-row align-v="center">
|
||||
<b-col>
|
||||
<h3 class="mb-0">Social traffic</h3>
|
||||
</b-col>
|
||||
<b-col class="text-right">
|
||||
<base-button size="sm" type="primary">See all</base-button>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</template>
|
||||
|
||||
<el-table class="table-responsive table" :data="tableData" header-row-class-name="thead-light">
|
||||
<el-table-column label="Referral" min-width="115px" prop="name">
|
||||
<template v-slot="{ row }">
|
||||
<div class="font-weight-600">{{ row.name }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="Visitors" min-width="110px" prop="visitors"></el-table-column>
|
||||
|
||||
<el-table-column min-width="220px" prop="progress">
|
||||
<template v-slot="{ row }">
|
||||
<div class="d-flex align-items-center">
|
||||
<span class="mr-2">{{ row.progress }}%</span>
|
||||
<base-progress :type="row.progressType" :value="row.progress" />
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</b-card>
|
||||
</template>
|
||||
<script>
|
||||
import { BaseProgress } from '@/components'
|
||||
import { Table, TableColumn, DropdownMenu, DropdownItem, Dropdown } from 'element-ui'
|
||||
export default {
|
||||
name: 'social-traffic-table',
|
||||
components: {
|
||||
BaseProgress,
|
||||
[Table.name]: Table,
|
||||
[TableColumn.name]: TableColumn,
|
||||
[Dropdown.name]: Dropdown,
|
||||
[DropdownItem.name]: DropdownItem,
|
||||
[DropdownMenu.name]: DropdownMenu,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [
|
||||
{
|
||||
name: 'Facebook',
|
||||
visitors: '1,480',
|
||||
progress: 60,
|
||||
progressType: 'gradient-danger',
|
||||
},
|
||||
{
|
||||
name: 'LinkedIn',
|
||||
visitors: '5,480',
|
||||
progress: 70,
|
||||
progressType: 'gradient-success',
|
||||
},
|
||||
{
|
||||
name: 'Google',
|
||||
visitors: '4,807',
|
||||
progress: 80,
|
||||
progressType: 'gradient-primary',
|
||||
},
|
||||
{
|
||||
name: 'Instagram',
|
||||
visitors: '3,678',
|
||||
progress: 75,
|
||||
progressType: 'gradient-info',
|
||||
},
|
||||
{
|
||||
name: 'Twitter',
|
||||
visitors: '2,645',
|
||||
progress: 30,
|
||||
progressType: 'gradient-warning',
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style></style>
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,14 +0,0 @@
|
||||
<template>
|
||||
<div>default</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'default',
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {},
|
||||
watch: {},
|
||||
}
|
||||
</script>
|
||||
@ -1,114 +0,0 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<notifications></notifications>
|
||||
<side-bar>
|
||||
<template slot="links">
|
||||
<sidebar-item
|
||||
:link="{
|
||||
name: 'Kontoübersicht',
|
||||
path: '/overview',
|
||||
icon: 'ni ni-tv-2 text-primary',
|
||||
}"
|
||||
></sidebar-item>
|
||||
<sidebar-item
|
||||
:link="{
|
||||
name: 'User Profile',
|
||||
path: '/profile',
|
||||
icon: 'ni ni-single-02 text-yellow',
|
||||
}"
|
||||
></sidebar-item>
|
||||
<sidebar-item
|
||||
:link="{
|
||||
name: 'Login',
|
||||
path: '/login',
|
||||
icon: 'ni ni-key-25 text-info',
|
||||
}"
|
||||
></sidebar-item>
|
||||
<sidebar-item
|
||||
:link="{
|
||||
name: 'Register',
|
||||
path: '/register',
|
||||
icon: 'ni ni-circle-08 text-pink',
|
||||
}"
|
||||
></sidebar-item>
|
||||
</template>
|
||||
|
||||
<template slot="links-after">
|
||||
<hr class="my-3" />
|
||||
<h6 class="navbar-heading p-0 text-muted">Community</h6>
|
||||
|
||||
<b-nav class="navbar-nav mb-md-3">
|
||||
<b-nav-item href="https://gradido.net/de/" target="_blank">
|
||||
<i class="ni ni-spaceship"></i>
|
||||
<b-nav-text class="p-0">GRADIDO.net</b-nav-text>
|
||||
</b-nav-item>
|
||||
<b-nav-item href="https://elopage.com/s/gradido/sign_in">
|
||||
<i class="ni ni-palette"></i>
|
||||
<b-nav-text class="p-0">Mitgliederbereich</b-nav-text>
|
||||
</b-nav-item>
|
||||
<b-nav-item href="https://gradido.net/de/memberships/">
|
||||
<i class="ni ni-ui-04"></i>
|
||||
<b-nav-text class="p-0">Mitgliedschaft</b-nav-text>
|
||||
</b-nav-item>
|
||||
</b-nav>
|
||||
</template>
|
||||
</side-bar>
|
||||
<div class="main-content">
|
||||
<dashboard-navbar :type="$route.meta.navbarType"></dashboard-navbar>
|
||||
|
||||
<div @click="$sidebar.displaySidebar(false)">
|
||||
<fade-transition :duration="200" origin="center top" mode="out-in">
|
||||
<!-- your content here -->
|
||||
<router-view></router-view>
|
||||
</fade-transition>
|
||||
</div>
|
||||
<content-footer v-if="!$route.meta.hideFooter"></content-footer>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
/* eslint-disable no-new */
|
||||
import PerfectScrollbar from 'perfect-scrollbar'
|
||||
import 'perfect-scrollbar/css/perfect-scrollbar.css'
|
||||
|
||||
function hasElement(className) {
|
||||
return document.getElementsByClassName(className).length > 0
|
||||
}
|
||||
|
||||
function initScrollbar(className) {
|
||||
if (hasElement(className)) {
|
||||
new PerfectScrollbar(`.${className}`)
|
||||
} else {
|
||||
// try to init it later in case this component is loaded async
|
||||
setTimeout(() => {
|
||||
initScrollbar(className)
|
||||
}, 100)
|
||||
}
|
||||
}
|
||||
|
||||
import DashboardNavbar from './DashboardNavbar.vue'
|
||||
import ContentFooter from './ContentFooter.vue'
|
||||
import DashboardContent from './Content.vue'
|
||||
import { FadeTransition } from 'vue2-transitions'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
DashboardNavbar,
|
||||
ContentFooter,
|
||||
//DashboardContent,
|
||||
FadeTransition,
|
||||
},
|
||||
methods: {
|
||||
initScrollbar() {
|
||||
let isWindows = navigator.platform.startsWith('Win')
|
||||
if (isWindows) {
|
||||
initScrollbar('sidenav')
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.initScrollbar()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss"></style>
|
||||
@ -1,173 +0,0 @@
|
||||
<template>
|
||||
<div class="main-content bg-default">
|
||||
<base-nav
|
||||
v-model="showMenu"
|
||||
:transparent="true"
|
||||
menu-classes="justify-content-end"
|
||||
class="navbar-horizontal navbar-main navbar-top navbar-dark"
|
||||
expand="lg"
|
||||
>
|
||||
<div slot="brand" class="navbar-wrapper">
|
||||
<b-navbar-brand to="/overview">
|
||||
<img src="img/brand/white.png" />
|
||||
</b-navbar-brand>
|
||||
</div>
|
||||
|
||||
<template>
|
||||
<div class="navbar-collapse-header">
|
||||
<b-row>
|
||||
<b-col cols="6" class="collapse-brand">
|
||||
<router-link to="/overview">
|
||||
<img src="img/brand/green.png" />
|
||||
</router-link>
|
||||
</b-col>
|
||||
<b-col cols="6" class="collapse-close">
|
||||
<button type="button" class="navbar-toggler" @click="showMenu = false">
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
</template>
|
||||
</base-nav>
|
||||
|
||||
<div class="main-content">
|
||||
<zoom-center-transition :duration="pageTransitionDuration" mode="out-in">
|
||||
<router-view></router-view>
|
||||
</zoom-center-transition>
|
||||
</div>
|
||||
|
||||
<footer class="py-5" id="footer-main">
|
||||
<b-container>
|
||||
<b-row align-v="center" class="justify-content-xl-between">
|
||||
<b-col xl="6">
|
||||
<div class="copyright text-center text-xl-left text-muted">
|
||||
© {{ year }}
|
||||
<a href="https://gradido.net/" class="font-weight-bold ml-1" target="_blank">
|
||||
Gradido-Akademie
|
||||
</a>
|
||||
</div>
|
||||
</b-col>
|
||||
<b-col xl="6" class="col-xl-6">
|
||||
<b-nav class="nav-footer justify-content-center justify-content-lg-end">
|
||||
<b-nav-item ref="https://www.creative-tim.com" target="_blank">Gradido</b-nav-item>
|
||||
<b-nav-item href="https://www.creative-tim.com/presentation" target="_blank">
|
||||
Impressum
|
||||
</b-nav-item>
|
||||
<b-nav-item href="http://blog.creative-tim.com" target="_blank">
|
||||
Datenschutzerklärung
|
||||
</b-nav-item>
|
||||
</b-nav>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-container>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { BaseNav } from '@/components'
|
||||
import { ZoomCenterTransition } from 'vue2-transitions'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
BaseNav,
|
||||
ZoomCenterTransition,
|
||||
},
|
||||
props: {
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: 'black',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showMenu: false,
|
||||
menuTransitionDuration: 250,
|
||||
pageTransitionDuration: 200,
|
||||
year: new Date().getFullYear(),
|
||||
pageClass: 'login-page',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
title() {
|
||||
return `${this.$route.name} Page`
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
toggleNavbar() {
|
||||
document.body.classList.toggle('nav-open')
|
||||
this.showMenu = !this.showMenu
|
||||
},
|
||||
closeMenu() {
|
||||
document.body.classList.remove('nav-open')
|
||||
this.showMenu = false
|
||||
},
|
||||
setBackgroundColor() {
|
||||
document.body.classList.add('bg-default')
|
||||
},
|
||||
removeBackgroundColor() {
|
||||
document.body.classList.remove('bg-default')
|
||||
},
|
||||
updateBackground() {
|
||||
if (!this.$route.meta.noBodyBackground) {
|
||||
this.setBackgroundColor()
|
||||
} else {
|
||||
this.removeBackgroundColor()
|
||||
}
|
||||
},
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.removeBackgroundColor()
|
||||
},
|
||||
beforeRouteUpdate(to, from, next) {
|
||||
// Close the mobile menu first then transition to next page
|
||||
if (this.showMenu) {
|
||||
this.closeMenu()
|
||||
setTimeout(() => {
|
||||
next()
|
||||
}, this.menuTransitionDuration)
|
||||
} else {
|
||||
next()
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$route: {
|
||||
immediate: true,
|
||||
handler: function () {
|
||||
this.updateBackground()
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
$scaleSize: 0.8;
|
||||
@keyframes zoomIn8 {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale3d($scaleSize, $scaleSize, $scaleSize);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.main-content .zoomIn {
|
||||
animation-name: zoomIn8;
|
||||
}
|
||||
|
||||
@keyframes zoomOut8 {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scale3d($scaleSize, $scaleSize, $scaleSize);
|
||||
}
|
||||
}
|
||||
|
||||
.main-content .zoomOut {
|
||||
animation-name: zoomOut8;
|
||||
}
|
||||
</style>
|
||||
@ -1 +0,0 @@
|
||||
export const API_KEY = 'YOUR_API_KEY'
|
||||
@ -1,105 +0,0 @@
|
||||
<template>
|
||||
<b-card no-body class="bg-default shadow">
|
||||
<b-card-header class="bg-transparent border-0">
|
||||
<h3 class="mb-0 text-white">Dark table</h3>
|
||||
</b-card-header>
|
||||
|
||||
<el-table
|
||||
class="table-responsive table table-dark"
|
||||
header-row-class-name="thead-dark"
|
||||
:data="projects"
|
||||
>
|
||||
<el-table-column label="Project" min-width="310px" prop="name">
|
||||
<template v-slot="{ row }">
|
||||
<b-media no-body class="align-items-center">
|
||||
<a href="#" class="mr-3">
|
||||
<b-img class="avatar" rounded="circle" alt="Image placeholder" :src="row.img" />
|
||||
</a>
|
||||
<b-media-body>
|
||||
<span class="font-weight-600 name mb-0 text-sm">
|
||||
{{ row.title }}
|
||||
</span>
|
||||
</b-media-body>
|
||||
</b-media>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Budget" prop="budget" min-width="140px"></el-table-column>
|
||||
|
||||
<el-table-column label="Status" min-width="170px" prop="status">
|
||||
<template v-slot="{ row }">
|
||||
<badge class="badge-dot mr-4">
|
||||
<i :class="`bg-${row.statusType}`"></i>
|
||||
<span class="status" :class="`text-${row.statusType}`">
|
||||
{{ row.status }}
|
||||
</span>
|
||||
</badge>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="Users" min-width="190px">
|
||||
<div class="avatar-group">
|
||||
<a
|
||||
href="#"
|
||||
class="avatar avatar-sm rounded-circle"
|
||||
data-toggle="tooltip"
|
||||
data-original-title="Ryan Tompson"
|
||||
>
|
||||
<img alt="Image placeholder" src="img/theme/team-1.jpg" />
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="avatar avatar-sm rounded-circle"
|
||||
data-toggle="tooltip"
|
||||
data-original-title="Romina Hadid"
|
||||
>
|
||||
<img alt="Image placeholder" src="img/theme/team-2.jpg" />
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="avatar avatar-sm rounded-circle"
|
||||
data-toggle="tooltip"
|
||||
data-original-title="Alexander Smith"
|
||||
>
|
||||
<img alt="Image placeholder" src="img/theme/team-3.jpg" />
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="avatar avatar-sm rounded-circle"
|
||||
data-toggle="tooltip"
|
||||
data-original-title="Jessica Doe"
|
||||
>
|
||||
<img alt="Image placeholder" src="img/theme/team-4.jpg" />
|
||||
</a>
|
||||
</div>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="Completion" prop="completion" min-width="240px">
|
||||
<template v-slot="{ row }">
|
||||
<div class="d-flex align-items-center">
|
||||
<span class="completion mr-2">{{ row.completion }}%</span>
|
||||
<div>
|
||||
<base-progress :type="row.statusType" :value="row.completion" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</b-card>
|
||||
</template>
|
||||
<script>
|
||||
import projects from './../projects'
|
||||
import { Table, TableColumn } from 'element-ui'
|
||||
export default {
|
||||
name: 'light-table',
|
||||
components: {
|
||||
[Table.name]: Table,
|
||||
[TableColumn.name]: TableColumn,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
projects,
|
||||
currentPage: 1,
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -1,105 +0,0 @@
|
||||
<template>
|
||||
<b-card no-body>
|
||||
<b-card-header class="border-0">
|
||||
<h3 class="mb-0">Light table</h3>
|
||||
</b-card-header>
|
||||
|
||||
<el-table class="table-responsive table" header-row-class-name="thead-light" :data="projects">
|
||||
<el-table-column label="Project" min-width="310px" prop="name">
|
||||
<template v-slot="{ row }">
|
||||
<b-media no-body class="align-items-center">
|
||||
<a href="#" class="avatar rounded-circle mr-3">
|
||||
<img alt="Image placeholder" :src="row.img" />
|
||||
</a>
|
||||
<b-media-body>
|
||||
<span class="font-weight-600 name mb-0 text-sm">
|
||||
{{ row.title }}
|
||||
</span>
|
||||
</b-media-body>
|
||||
</b-media>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Budget" prop="budget" min-width="140px"></el-table-column>
|
||||
|
||||
<el-table-column label="Status" min-width="170px" prop="status">
|
||||
<template v-slot="{ row }">
|
||||
<badge class="badge-dot mr-4" type="">
|
||||
<i :class="`bg-${row.statusType}`"></i>
|
||||
<span class="status" :class="`text-${row.statusType}`">
|
||||
{{ row.status }}
|
||||
</span>
|
||||
</badge>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="Users" min-width="190px">
|
||||
<div class="avatar-group">
|
||||
<a
|
||||
href="#"
|
||||
class="avatar avatar-sm rounded-circle"
|
||||
data-toggle="tooltip"
|
||||
data-original-title="Ryan Tompson"
|
||||
>
|
||||
<img alt="Image placeholder" src="img/theme/team-1.jpg" />
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="avatar avatar-sm rounded-circle"
|
||||
data-toggle="tooltip"
|
||||
data-original-title="Romina Hadid"
|
||||
>
|
||||
<img alt="Image placeholder" src="img/theme/team-2.jpg" />
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="avatar avatar-sm rounded-circle"
|
||||
data-toggle="tooltip"
|
||||
data-original-title="Alexander Smith"
|
||||
>
|
||||
<img alt="Image placeholder" src="img/theme/team-3.jpg" />
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="avatar avatar-sm rounded-circle"
|
||||
data-toggle="tooltip"
|
||||
data-original-title="Jessica Doe"
|
||||
>
|
||||
<img alt="Image placeholder" src="img/theme/team-4.jpg" />
|
||||
</a>
|
||||
</div>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="Completion" prop="completion" min-width="240px">
|
||||
<template v-slot="{ row }">
|
||||
<div class="d-flex align-items-center">
|
||||
<span class="completion mr-2">{{ row.completion }}%</span>
|
||||
<div>
|
||||
<base-progress :type="row.statusType" :value="row.completion" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<b-card-footer class="py-4 d-flex justify-content-end">
|
||||
<base-pagination v-model="currentPage" :per-page="10" :total="50"></base-pagination>
|
||||
</b-card-footer>
|
||||
</b-card>
|
||||
</template>
|
||||
<script>
|
||||
import projects from './../projects'
|
||||
import { Table, TableColumn } from 'element-ui'
|
||||
export default {
|
||||
name: 'light-table',
|
||||
components: {
|
||||
[Table.name]: Table,
|
||||
[TableColumn.name]: TableColumn,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
projects,
|
||||
currentPage: 1,
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -1,74 +0,0 @@
|
||||
export default [
|
||||
{
|
||||
img: 'img/theme/bootstrap.jpg',
|
||||
title: 'Argon Design System',
|
||||
budget: '$2500 USD',
|
||||
status: 'pending',
|
||||
statusType: 'warning',
|
||||
completion: 60,
|
||||
},
|
||||
{
|
||||
img: 'img/theme/angular.jpg',
|
||||
title: 'Angular Now UI Kit PRO',
|
||||
budget: '$1800 USD',
|
||||
status: 'completed',
|
||||
statusType: 'success',
|
||||
completion: 100,
|
||||
},
|
||||
{
|
||||
img: 'img/theme/sketch.jpg',
|
||||
title: 'Black Dashboard',
|
||||
budget: '$3150 USD',
|
||||
status: 'delayed',
|
||||
statusType: 'danger',
|
||||
completion: 72,
|
||||
},
|
||||
{
|
||||
img: 'img/theme/react.jpg',
|
||||
title: 'React Material Dashboard',
|
||||
budget: '$4400 USD',
|
||||
status: 'on schedule',
|
||||
statusType: 'info',
|
||||
completion: 90,
|
||||
},
|
||||
{
|
||||
img: 'img/theme/vue.jpg',
|
||||
title: 'Vue Paper UI Kit PRO',
|
||||
budget: '$2200 USD',
|
||||
status: 'completed',
|
||||
statusType: 'success',
|
||||
completion: 100,
|
||||
},
|
||||
{
|
||||
img: 'img/theme/bootstrap.jpg',
|
||||
title: 'Argon Design System',
|
||||
budget: '$2500 USD',
|
||||
status: 'pending',
|
||||
statusType: 'warning',
|
||||
completion: 60,
|
||||
},
|
||||
{
|
||||
img: 'img/theme/angular.jpg',
|
||||
title: 'Angular Now UI Kit PRO',
|
||||
budget: '$1800 USD',
|
||||
status: 'completed',
|
||||
statusType: 'success',
|
||||
completion: 100,
|
||||
},
|
||||
{
|
||||
img: 'img/theme/sketch.jpg',
|
||||
title: 'Black Dashboard',
|
||||
budget: '$3150 USD',
|
||||
status: 'delayed',
|
||||
statusType: 'danger',
|
||||
completion: 72,
|
||||
},
|
||||
{
|
||||
img: 'img/theme/vue.jpg',
|
||||
title: 'Vue Paper UI Kit PRO',
|
||||
budget: '$2200 USD',
|
||||
status: 'completed',
|
||||
statusType: 'success',
|
||||
completion: 100,
|
||||
},
|
||||
]
|
||||
@ -1,42 +0,0 @@
|
||||
export default [
|
||||
{
|
||||
id: 1,
|
||||
name: 'John Michael',
|
||||
image: 'img/theme/team-1.jpg',
|
||||
createdAt: '10/09/2018',
|
||||
product: 'Argon Dashboard PRO',
|
||||
active: true,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Alexandra Smith',
|
||||
image: 'img/theme/team-2.jpg',
|
||||
createdAt: '08/09/2018',
|
||||
product: 'Argon Design System',
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'Samantha Ivy',
|
||||
image: 'img/theme/team-3.jpg',
|
||||
createdAt: '30/08/2018',
|
||||
product: 'Black Dashboard',
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: 'John Michael',
|
||||
image: 'img/theme/team-1.jpg',
|
||||
createdAt: '10/09/2018',
|
||||
product: 'Argon Dashboard PRO',
|
||||
active: true,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: 'Alexandra Smith',
|
||||
image: 'img/theme/team-2.jpg',
|
||||
createdAt: '30/09/2018',
|
||||
product: 'Vue Argon Dashboard',
|
||||
active: true,
|
||||
},
|
||||
]
|
||||
@ -1,14 +0,0 @@
|
||||
<template>
|
||||
<div>default</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'default',
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {},
|
||||
watch: {},
|
||||
}
|
||||
</script>
|
||||
Loading…
x
Reference in New Issue
Block a user