This commit is contained in:
@@ -1,90 +1,92 @@
|
||||
<template>
|
||||
<v-row align-center v-if="this.formState.ready">
|
||||
<v-col cols="12" mt-1 mb-2 v-if="formState.errorBoxMessage">
|
||||
<v-alert
|
||||
ref="errorbox"
|
||||
v-show="formState.errorBoxMessage"
|
||||
color="error"
|
||||
icon="fa-exclamation-circle "
|
||||
value="true"
|
||||
transition="scale-transition"
|
||||
class="multi-line"
|
||||
outlined
|
||||
>{{ formState.errorBoxMessage }}</v-alert
|
||||
>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<div v-if="this.formState.ready">
|
||||
<v-toolbar flat>
|
||||
<v-toolbar-title>
|
||||
<v-icon large color="primary">fa-splotch</v-icon>
|
||||
<span class="hidden-sm-and-down">{{ lt("WidgetList") }}</span>
|
||||
</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn v-if="this.rights.change" icon @click="newItem()">
|
||||
<v-icon>fa-plus-circle</v-icon>
|
||||
</v-btn>
|
||||
<v-btn icon @click="filterMe()">
|
||||
<v-icon>fa-filter</v-icon>
|
||||
</v-btn>
|
||||
<v-btn icon @click="getDataFromApi()">
|
||||
<v-icon>fa-sync</v-icon>
|
||||
</v-btn>
|
||||
<v-btn icon>
|
||||
<v-icon>fa-ellipsis-v</v-icon>
|
||||
</v-btn>
|
||||
</v-toolbar>
|
||||
<v-data-table
|
||||
v-model="selected"
|
||||
:headers="headers"
|
||||
:items="Items"
|
||||
item-key="id"
|
||||
:options.sync="localFormSettings.pagination"
|
||||
:server-items-length="totalItems"
|
||||
:loading="loading"
|
||||
show-select
|
||||
class="elevation-1"
|
||||
:footer-props="{
|
||||
itemsPerPageOptions: rowsPerPageItems,
|
||||
itemsPerPageText: lt('RowsPerPage')
|
||||
}"
|
||||
<v-container>
|
||||
<div v-if="this.formState.ready">
|
||||
<v-col cols="12" mt-1 mb-2 v-if="formState.errorBoxMessage">
|
||||
<v-alert
|
||||
ref="errorbox"
|
||||
v-show="formState.errorBoxMessage"
|
||||
color="error"
|
||||
icon="fa-exclamation-circle "
|
||||
value="true"
|
||||
transition="scale-transition"
|
||||
class="multi-line"
|
||||
outlined
|
||||
>{{ formState.errorBoxMessage }}</v-alert
|
||||
>
|
||||
<template slot="item" slot-scope="props">
|
||||
<tr>
|
||||
<td>
|
||||
<v-checkbox
|
||||
v-model="props.selected"
|
||||
primary
|
||||
hide-details
|
||||
></v-checkbox>
|
||||
</td>
|
||||
<td class="text-xs-left" @click="editItem(props.item)">
|
||||
{{ props.item.name | capitalize }}
|
||||
</td>
|
||||
<td class="text-xs-left" @click="editItem(props.item)">
|
||||
{{ props.item.serial }}
|
||||
</td>
|
||||
<td class="text-xs-left" @click="editItem(props.item)">
|
||||
{{ props.item.dollarAmount | currency }}
|
||||
</td>
|
||||
<td class="text-xs-left" @click="editItem(props.item)">
|
||||
{{ props.item.active | boolastext }}
|
||||
</td>
|
||||
<td class="text-xs-left" @click="editItem(props.item)">
|
||||
{{ props.item.roles }}
|
||||
</td>
|
||||
<td class="text-xs-left" @click="editItem(props.item)">
|
||||
{{ props.item.startDate | shortdate }}
|
||||
</td>
|
||||
<td class="text-xs-left" @click="editItem(props.item)">
|
||||
{{ props.item.endDate | shortdate }}
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<div class="elevation-5" v-if="this.formState.ready">
|
||||
<v-toolbar flat>
|
||||
<v-toolbar-title>
|
||||
<v-icon large color="primary">fa-splotch</v-icon>
|
||||
<span class="hidden-sm-and-down">{{ lt("WidgetList") }}</span>
|
||||
</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn v-if="this.rights.change" icon @click="newItem()">
|
||||
<v-icon>fa-plus-circle</v-icon>
|
||||
</v-btn>
|
||||
<v-btn icon @click="filterMe()">
|
||||
<v-icon>fa-filter</v-icon>
|
||||
</v-btn>
|
||||
<v-btn icon @click="getDataFromApi()">
|
||||
<v-icon>fa-sync</v-icon>
|
||||
</v-btn>
|
||||
<v-btn icon>
|
||||
<v-icon>fa-ellipsis-v</v-icon>
|
||||
</v-btn>
|
||||
</v-toolbar>
|
||||
<v-data-table
|
||||
v-model="selected"
|
||||
:headers="headers"
|
||||
:items="Items"
|
||||
item-key="id"
|
||||
:options.sync="localFormSettings.pagination"
|
||||
:server-items-length="totalItems"
|
||||
:loading="loading"
|
||||
show-select
|
||||
class="elevation-1"
|
||||
:footer-props="{
|
||||
itemsPerPageOptions: rowsPerPageItems,
|
||||
itemsPerPageText: lt('RowsPerPage')
|
||||
}"
|
||||
>
|
||||
<template slot="item" slot-scope="props">
|
||||
<tr>
|
||||
<td>
|
||||
<v-checkbox
|
||||
v-model="props.selected"
|
||||
primary
|
||||
hide-details
|
||||
></v-checkbox>
|
||||
</td>
|
||||
<td class="text-xs-left" @click="editItem(props.item)">
|
||||
{{ props.item.name | capitalize }}
|
||||
</td>
|
||||
<td class="text-xs-left" @click="editItem(props.item)">
|
||||
{{ props.item.serial }}
|
||||
</td>
|
||||
<td class="text-xs-left" @click="editItem(props.item)">
|
||||
{{ props.item.dollarAmount | currency }}
|
||||
</td>
|
||||
<td class="text-xs-left" @click="editItem(props.item)">
|
||||
{{ props.item.active | boolastext }}
|
||||
</td>
|
||||
<td class="text-xs-left" @click="editItem(props.item)">
|
||||
{{ props.item.roles }}
|
||||
</td>
|
||||
<td class="text-xs-left" @click="editItem(props.item)">
|
||||
{{ props.item.startDate | shortdate }}
|
||||
</td>
|
||||
<td class="text-xs-left" @click="editItem(props.item)">
|
||||
{{ props.item.endDate | shortdate }}
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</div>
|
||||
</v-col>
|
||||
</div>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
Reference in New Issue
Block a user