cleaning up layout, removed a bunch of unneeded stuff
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user