cleaning up layout, removed a bunch of unneeded stuff

This commit is contained in:
2020-01-31 21:07:45 +00:00
parent 2b4963bc9f
commit 1a7160bd6c
5 changed files with 226 additions and 167 deletions

View File

@@ -1,57 +1,97 @@
<template>
<div>
<v-data-table
:headers="headers"
:items="records"
v-model="selected"
:options.sync="dataTablePagingOptions"
:server-items-length="totalRecords"
:loading="loading"
:disable-sort="true"
:show-select="showSelect"
:single-select="singleSelect"
:hide-default-header="narrowFormat"
:footer-props="{
showCurrentPage: true,
showFirstLastPage: true,
itemsPerPageOptions: rowsPerPageItems,
itemsPerPageText: lt('RowsPerPage'),
pageText: lt('PageOfPageText')
}"
:loading-text="lt('Loading')"
:no-data-text="lt('NoData')"
class="elevation-1"
>
<!-- /*From server: UiDataTypes
NoType = 0,v-on:item-selected="handleSelect"
DateTime = 1,
Date = 2,
Time = 3,
Text = 4,
Integer = 5,
Bool = 6,
Decimal = 7,
Currency = 8,
Tags = 9,
Enum = 10,
EmailAddress = 11,
HTTP = 12
*/ -->
<template v-slot:body="{ items }">
<tbody>
<template v-if="!narrowFormat">
<tr v-for="item in items" :key="item.id">
<template v-if="showSelect">
<td>
<v-data-table
:headers="headers"
:items="records"
v-model="selected"
:options.sync="dataTablePagingOptions"
:server-items-length="totalRecords"
:loading="loading"
:disable-sort="true"
:show-select="showSelect"
:single-select="singleSelect"
:hide-default-header="narrowFormat"
:footer-props="{
showCurrentPage: true,
showFirstLastPage: true,
itemsPerPageOptions: rowsPerPageItems,
itemsPerPageText: lt('RowsPerPage'),
pageText: lt('PageOfPageText')
}"
:loading-text="lt('Loading')"
:no-data-text="lt('NoData')"
class="elevation-1"
>
<template v-slot:body="{ items }">
<tbody>
<template v-if="!narrowFormat">
<tr v-for="item in items" :key="item.id">
<template v-if="showSelect">
<td>
<v-checkbox
v-model="selected"
:value="item"
primary
hide-details
></v-checkbox>
</td>
</template>
<td v-for="c in item.columns" :key="c.key">
<!-- Handle all plain text types right up to and including enums -->
<!--TODO when get to coloured stuff will need to add that as a prop to column data but leaving out for now-->
<template v-if="c.t < 11">
<template v-if="c.i">
<!-- openable object with an ID -->
<v-btn depressed small @click="btnClick(c.key, c.i)">{{
c.v
}}</v-btn>
</template>
<template v-else>
{{ c.v }}
</template>
</template>
<template v-if="c.t == 11">
<a :href="'mailto:' + c.v">{{ c.v }}</a>
</template>
<template v-if="c.t == 12">
<!-- Expects full url with protocol etc in c.v so might need to add to record builder -->
<a :href="c.v" target="_blank">{{ c.v }}</a>
</template>
</td>
</tr>
</template>
<template v-else>
<!-- Narrow width template -->
<tr
class="v-data-table__mobile-table-row"
v-for="item in items"
:key="item.id"
>
<!-- HEADER TO THE LEFT -->
<!-- FIELD VALUE TO THE RIGHT -->
<template v-if="showSelect">
<td class="v-data-table__mobile-row">
<div class="v-data-table__mobile-row__header"></div>
<div class="v-data-table__mobile-row__cell">
<v-checkbox
v-model="selected"
:value="item"
primary
hide-details
></v-checkbox>
</td>
</template>
<td v-for="c in item.columns" :key="c.key">
</div>
</td>
</template>
<td
class="v-data-table__mobile-row"
v-for="c in item.columns"
:key="c.key"
>
<div class="v-data-table__mobile-row__header">
{{ getHeaderText(c.key) }}
</div>
<div class="v-data-table__mobile-row__cell">
<!-- Handle all plain text types right up to and including enums -->
<!--TODO when get to coloured stuff will need to add that as a prop to column data but leaving out for now-->
<template v-if="c.t < 11">
@@ -72,70 +112,14 @@
<!-- Expects full url with protocol etc in c.v so might need to add to record builder -->
<a :href="c.v" target="_blank">{{ c.v }}</a>
</template>
</td>
</tr>
</template>
<template v-else>
<!-- Narrow width template -->
<tr
class="v-data-table__mobile-table-row"
v-for="item in items"
:key="item.id"
>
<!-- HEADER TO THE LEFT -->
<!-- FIELD VALUE TO THE RIGHT -->
<template v-if="showSelect">
<td class="v-data-table__mobile-row">
<div class="v-data-table__mobile-row__header"></div>
<div class="v-data-table__mobile-row__cell">
<v-checkbox
v-model="selected"
:value="item"
primary
hide-details
></v-checkbox>
</div>
</td>
</template>
<td
class="v-data-table__mobile-row"
v-for="c in item.columns"
:key="c.key"
>
<div class="v-data-table__mobile-row__header">
{{ getHeaderText(c.key) }}
</div>
<div class="v-data-table__mobile-row__cell">
<!-- Handle all plain text types right up to and including enums -->
<!--TODO when get to coloured stuff will need to add that as a prop to column data but leaving out for now-->
<template v-if="c.t < 11">
<template v-if="c.i">
<!-- openable object with an ID -->
<v-btn depressed small @click="btnClick(c.key, c.i)">{{
c.v
}}</v-btn>
</template>
<template v-else>
{{ c.v }}
</template>
</template>
<template v-if="c.t == 11">
<a :href="'mailto:' + c.v">{{ c.v }}</a>
</template>
<template v-if="c.t == 12">
<!-- Expects full url with protocol etc in c.v so might need to add to record builder -->
<a :href="c.v" target="_blank">{{ c.v }}</a>
</template>
</div>
</td>
</tr>
</template>
</tbody>
</template>
</v-data-table>
<!-- <hr />
</div>
</td>
</tr>
</template>
</tbody>
</template>
</v-data-table>
<!-- <hr />
<div>Selected: {{ selected }}</div>
<div>Headers: {{ headers }}</div>
<div>Records: {{ records }}</div>
@@ -146,7 +130,6 @@
<div>dataListKey: {{ dataListKey }}</div>
<div>dataFilterId: {{ dataFilterId }}</div>
<div>viewPort is XS: {{ mini }}</div> -->
</div>
</template>
<script>