This commit is contained in:
2019-11-05 23:55:09 +00:00
parent c394fd35ba
commit 20cd32ed3f
6 changed files with 177 additions and 165 deletions

View File

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