This commit is contained in:
@@ -1,265 +1,288 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<!-- WIDE TABLE VIEW -->
|
<v-card>
|
||||||
<template v-if="!narrowFormat">
|
<v-card-title>
|
||||||
<v-data-table
|
<v-select
|
||||||
:headers="headers"
|
:items="[
|
||||||
:items="records"
|
{ name: 'one', id: 1 },
|
||||||
v-model="selected"
|
{ name: 'two', id: 2 }
|
||||||
:options.sync="dataTablePagingOptions"
|
]"
|
||||||
:server-items-length="totalRecords"
|
item-text="name"
|
||||||
:loading="loading"
|
item-value="id"
|
||||||
:disable-sort="true"
|
:label="lt('DataListView')"
|
||||||
:show-select="showSelect"
|
>
|
||||||
:single-select="singleSelect"
|
</v-select>
|
||||||
:hide-default-header="narrowFormat"
|
<v-spacer></v-spacer
|
||||||
:footer-props="{
|
><v-btn>
|
||||||
showCurrentPage: true,
|
<v-icon>fa-filter</v-icon>
|
||||||
showFirstLastPage: true,
|
</v-btn>
|
||||||
itemsPerPageOptions: rowsPerPageItems,
|
</v-card-title>
|
||||||
itemsPerPageText: lt('RowsPerPage'),
|
|
||||||
pageText: lt('PageOfPageText')
|
|
||||||
}"
|
|
||||||
:loading-text="lt('Loading')"
|
|
||||||
:no-data-text="lt('NoData')"
|
|
||||||
class="elevation-1"
|
|
||||||
>
|
|
||||||
<template v-slot:body="{ items }">
|
|
||||||
<tbody>
|
|
||||||
<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">
|
|
||||||
<template v-if="c.t == 1">
|
|
||||||
<!-- DATETIME -->
|
|
||||||
{{ c.v }}
|
|
||||||
</template>
|
|
||||||
<template v-else-if="c.t == 2">
|
|
||||||
<!-- DATE -->
|
|
||||||
{{ c.v }}
|
|
||||||
</template>
|
|
||||||
<template v-else-if="c.t == 3">
|
|
||||||
<!-- TIME -->
|
|
||||||
{{ c.v }}
|
|
||||||
</template>
|
|
||||||
<template v-else-if="c.t == 4">
|
|
||||||
<!-- TEXT (also maybe openable)-->
|
|
||||||
<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-else-if="c.t == 5">
|
|
||||||
<!-- INTEGER -->
|
|
||||||
{{ c.v }}
|
|
||||||
</template>
|
|
||||||
<template v-else-if="c.t == 6">
|
|
||||||
<!-- BOOL -->
|
|
||||||
<div class="text-center">
|
|
||||||
<v-icon v-if="c.v === false" small>far fa-square</v-icon>
|
|
||||||
<v-icon v-else-if="c.v === true" small
|
|
||||||
>far fa-check-square</v-icon
|
|
||||||
>
|
|
||||||
<v-icon v-else small>far fa-minus-square</v-icon>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<template v-else-if="c.t == 7">
|
|
||||||
<!-- DECIMAL -->
|
|
||||||
{{ c.v }}
|
|
||||||
</template>
|
|
||||||
<template v-else-if="c.t == 8">
|
|
||||||
<!-- CURRENCY -->
|
|
||||||
<div class="text-right">{{ c.v }}</div>
|
|
||||||
</template>
|
|
||||||
<template v-else-if="c.t == 9">
|
|
||||||
<!-- TAGS -->
|
|
||||||
{{ c.v }}
|
|
||||||
</template>
|
|
||||||
<template v-else-if="c.t == 10">
|
|
||||||
<!-- ENUM (translated to text on getdata) -->
|
|
||||||
{{ c.v }}
|
|
||||||
</template>
|
|
||||||
<template v-else-if="c.t == 11">
|
|
||||||
<!-- EMAIL -->
|
|
||||||
<a :href="'mailto:' + c.v">{{ c.v }}</a>
|
|
||||||
</template>
|
|
||||||
<template v-else-if="c.t == 12">
|
|
||||||
<!-- URL / HTTP -->
|
|
||||||
<!-- 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>
|
|
||||||
<template v-else>
|
|
||||||
<!-- UNKNOWN -->
|
|
||||||
{{ c.v }}
|
|
||||||
</template>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</template>
|
|
||||||
</v-data-table>
|
|
||||||
</template>
|
|
||||||
<!-- MOBILE TABLE VIEW -->
|
|
||||||
<template v-else>
|
|
||||||
<v-data-iterator
|
|
||||||
: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:header="props">
|
|
||||||
<!-- Mimic the full width data table select all toggle -->
|
|
||||||
<div
|
|
||||||
@click="props.toggleSelectAll(!props.everyItem)"
|
|
||||||
class="pl-2 pt-2"
|
|
||||||
>
|
|
||||||
<v-icon v-if="!props.someItems" large>far fa-square</v-icon>
|
|
||||||
<v-icon v-if="props.someItems && !props.everyItem" large
|
|
||||||
>far fa-minus-square</v-icon
|
|
||||||
>
|
|
||||||
<v-icon v-if="props.everyItem" large>far fa-check-square</v-icon>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-slot:default="{ items }">
|
<!-- WIDE TABLE VIEW -->
|
||||||
<v-row>
|
<template v-if="!narrowFormat">
|
||||||
<v-col
|
<v-data-table
|
||||||
v-for="item in items"
|
:headers="headers"
|
||||||
:key="item.id"
|
:items="records"
|
||||||
cols="12"
|
v-model="selected"
|
||||||
sm="6"
|
:options.sync="dataTablePagingOptions"
|
||||||
md="4"
|
:server-items-length="totalRecords"
|
||||||
lg="3"
|
:loading="loading"
|
||||||
>
|
:disable-sort="true"
|
||||||
<v-card elevation="4" tile>
|
: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>
|
||||||
|
<tr v-for="item in items" :key="item.id">
|
||||||
<template v-if="showSelect">
|
<template v-if="showSelect">
|
||||||
<v-card-title class="subheading font-weight-bold">
|
<td>
|
||||||
<v-checkbox
|
<v-checkbox
|
||||||
v-model="selected"
|
v-model="selected"
|
||||||
:value="item"
|
:value="item"
|
||||||
primary
|
primary
|
||||||
hide-details
|
hide-details
|
||||||
></v-checkbox>
|
></v-checkbox>
|
||||||
</v-card-title>
|
</td>
|
||||||
<v-divider></v-divider>
|
|
||||||
</template>
|
</template>
|
||||||
<v-list dense>
|
<td v-for="c in item.columns" :key="c.key">
|
||||||
<v-list-item two-line v-for="c in item.columns" :key="c.key">
|
<template v-if="c.t == 1">
|
||||||
<v-list-item-content>
|
<!-- DATETIME -->
|
||||||
<v-list-item-title>
|
{{ c.v }}
|
||||||
{{ getHeaderText(c.key) }}</v-list-item-title
|
</template>
|
||||||
|
<template v-else-if="c.t == 2">
|
||||||
|
<!-- DATE -->
|
||||||
|
{{ c.v }}
|
||||||
|
</template>
|
||||||
|
<template v-else-if="c.t == 3">
|
||||||
|
<!-- TIME -->
|
||||||
|
{{ c.v }}
|
||||||
|
</template>
|
||||||
|
<template v-else-if="c.t == 4">
|
||||||
|
<!-- TEXT (also maybe openable)-->
|
||||||
|
<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-else-if="c.t == 5">
|
||||||
|
<!-- INTEGER -->
|
||||||
|
{{ c.v }}
|
||||||
|
</template>
|
||||||
|
<template v-else-if="c.t == 6">
|
||||||
|
<!-- BOOL -->
|
||||||
|
<div class="text-center">
|
||||||
|
<v-icon v-if="c.v === false" small>far fa-square</v-icon>
|
||||||
|
<v-icon v-else-if="c.v === true" small
|
||||||
|
>far fa-check-square</v-icon
|
||||||
>
|
>
|
||||||
<v-list-item-subtitle>
|
<v-icon v-else small>far fa-minus-square</v-icon>
|
||||||
<template v-if="c.t == 1">
|
</div>
|
||||||
<!-- DATETIME -->
|
</template>
|
||||||
{{ c.v }}
|
<template v-else-if="c.t == 7">
|
||||||
</template>
|
<!-- DECIMAL -->
|
||||||
<template v-else-if="c.t == 2">
|
{{ c.v }}
|
||||||
<!-- DATE -->
|
</template>
|
||||||
{{ c.v }}
|
<template v-else-if="c.t == 8">
|
||||||
</template>
|
<!-- CURRENCY -->
|
||||||
<template v-else-if="c.t == 3">
|
<div class="text-right">{{ c.v }}</div>
|
||||||
<!-- TIME -->
|
</template>
|
||||||
{{ c.v }}
|
<template v-else-if="c.t == 9">
|
||||||
</template>
|
<!-- TAGS -->
|
||||||
<template v-else-if="c.t == 4">
|
{{ c.v }}
|
||||||
<!-- TEXT (also maybe openable)-->
|
</template>
|
||||||
<template v-if="c.i">
|
<template v-else-if="c.t == 10">
|
||||||
<!-- openable object with an ID -->
|
<!-- ENUM (translated to text on getdata) -->
|
||||||
<span
|
{{ c.v }}
|
||||||
@click="btnClick(c.key, c.i)"
|
</template>
|
||||||
class="primary--text subtitle-1 font-weight-bold"
|
<template v-else-if="c.t == 11">
|
||||||
style="cursor:pointer"
|
<!-- EMAIL -->
|
||||||
>{{ c.v }}
|
<a :href="'mailto:' + c.v">{{ c.v }}</a>
|
||||||
</span>
|
</template>
|
||||||
</template>
|
<template v-else-if="c.t == 12">
|
||||||
<template v-else>
|
<!-- URL / HTTP -->
|
||||||
|
<!-- 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>
|
||||||
|
<template v-else>
|
||||||
|
<!-- UNKNOWN -->
|
||||||
|
{{ c.v }}
|
||||||
|
</template>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</template>
|
||||||
|
</v-data-table>
|
||||||
|
</template>
|
||||||
|
<!-- MOBILE TABLE VIEW -->
|
||||||
|
<template v-else>
|
||||||
|
<v-data-iterator
|
||||||
|
: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:header="props">
|
||||||
|
<!-- Mimic the full width data table select all toggle -->
|
||||||
|
<div
|
||||||
|
@click="props.toggleSelectAll(!props.everyItem)"
|
||||||
|
class="pl-2 pt-2"
|
||||||
|
>
|
||||||
|
<v-icon v-if="!props.someItems" large>far fa-square</v-icon>
|
||||||
|
<v-icon v-if="props.someItems && !props.everyItem" large
|
||||||
|
>far fa-minus-square</v-icon
|
||||||
|
>
|
||||||
|
<v-icon v-if="props.everyItem" large>far fa-check-square</v-icon>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:default="{ items }">
|
||||||
|
<v-row>
|
||||||
|
<v-col
|
||||||
|
v-for="item in items"
|
||||||
|
:key="item.id"
|
||||||
|
cols="12"
|
||||||
|
sm="6"
|
||||||
|
md="4"
|
||||||
|
lg="3"
|
||||||
|
>
|
||||||
|
<v-card elevation="4" tile>
|
||||||
|
<template v-if="showSelect">
|
||||||
|
<v-card-title class="subheading font-weight-bold">
|
||||||
|
<v-checkbox
|
||||||
|
v-model="selected"
|
||||||
|
:value="item"
|
||||||
|
primary
|
||||||
|
hide-details
|
||||||
|
></v-checkbox>
|
||||||
|
</v-card-title>
|
||||||
|
<v-divider></v-divider>
|
||||||
|
</template>
|
||||||
|
<v-list dense>
|
||||||
|
<v-list-item
|
||||||
|
two-line
|
||||||
|
v-for="c in item.columns"
|
||||||
|
:key="c.key"
|
||||||
|
>
|
||||||
|
<v-list-item-content>
|
||||||
|
<v-list-item-title>
|
||||||
|
{{ getHeaderText(c.key) }}</v-list-item-title
|
||||||
|
>
|
||||||
|
<v-list-item-subtitle>
|
||||||
|
<template v-if="c.t == 1">
|
||||||
|
<!-- DATETIME -->
|
||||||
{{ c.v }}
|
{{ c.v }}
|
||||||
</template>
|
</template>
|
||||||
</template>
|
<template v-else-if="c.t == 2">
|
||||||
<template v-else-if="c.t == 5">
|
<!-- DATE -->
|
||||||
<!-- INTEGER -->
|
{{ c.v }}
|
||||||
{{ c.v }}
|
</template>
|
||||||
</template>
|
<template v-else-if="c.t == 3">
|
||||||
<template v-else-if="c.t == 6">
|
<!-- TIME -->
|
||||||
<!-- BOOL -->
|
{{ c.v }}
|
||||||
<div>
|
</template>
|
||||||
<v-icon v-if="c.v === false" small
|
<template v-else-if="c.t == 4">
|
||||||
>far fa-square</v-icon
|
<!-- TEXT (also maybe openable)-->
|
||||||
>
|
<template v-if="c.i">
|
||||||
<v-icon v-else-if="c.v === true" small
|
<!-- openable object with an ID -->
|
||||||
>far fa-check-square</v-icon
|
<span
|
||||||
>
|
@click="btnClick(c.key, c.i)"
|
||||||
<v-icon v-else small>far fa-minus-square</v-icon>
|
class="primary--text subtitle-1 font-weight-bold"
|
||||||
</div>
|
style="cursor:pointer"
|
||||||
</template>
|
>{{ c.v }}
|
||||||
<template v-else-if="c.t == 7">
|
</span>
|
||||||
<!-- DECIMAL -->
|
</template>
|
||||||
{{ c.v }}
|
<template v-else>
|
||||||
</template>
|
{{ c.v }}
|
||||||
<template v-else-if="c.t == 8">
|
</template>
|
||||||
<!-- CURRENCY -->
|
</template>
|
||||||
<div>{{ c.v }}</div>
|
<template v-else-if="c.t == 5">
|
||||||
</template>
|
<!-- INTEGER -->
|
||||||
<template v-else-if="c.t == 9">
|
{{ c.v }}
|
||||||
<!-- TAGS -->
|
</template>
|
||||||
{{ c.v }}
|
<template v-else-if="c.t == 6">
|
||||||
</template>
|
<!-- BOOL -->
|
||||||
<template v-else-if="c.t == 10">
|
<div>
|
||||||
<!-- ENUM (translated to text on getdata) -->
|
<v-icon v-if="c.v === false" small
|
||||||
{{ c.v }}
|
>far fa-square</v-icon
|
||||||
</template>
|
>
|
||||||
<template v-else-if="c.t == 11">
|
<v-icon v-else-if="c.v === true" small
|
||||||
<!-- EMAIL -->
|
>far fa-check-square</v-icon
|
||||||
<a :href="'mailto:' + c.v">{{ c.v }}</a>
|
>
|
||||||
</template>
|
<v-icon v-else small>far fa-minus-square</v-icon>
|
||||||
<template v-else-if="c.t == 12">
|
</div>
|
||||||
<!-- URL / HTTP -->
|
</template>
|
||||||
<!-- Expects full url with protocol etc in c.v so might need to add to record builder -->
|
<template v-else-if="c.t == 7">
|
||||||
<a :href="c.v" target="_blank">{{ c.v }}</a>
|
<!-- DECIMAL -->
|
||||||
</template>
|
{{ c.v }}
|
||||||
<template v-else>
|
</template>
|
||||||
<!-- UNKNOWN -->
|
<template v-else-if="c.t == 8">
|
||||||
{{ c.v }}
|
<!-- CURRENCY -->
|
||||||
</template>
|
<div>{{ c.v }}</div>
|
||||||
</v-list-item-subtitle>
|
</template>
|
||||||
</v-list-item-content>
|
<template v-else-if="c.t == 9">
|
||||||
</v-list-item>
|
<!-- TAGS -->
|
||||||
</v-list>
|
{{ c.v }}
|
||||||
</v-card>
|
</template>
|
||||||
</v-col>
|
<template v-else-if="c.t == 10">
|
||||||
</v-row>
|
<!-- ENUM (translated to text on getdata) -->
|
||||||
</template>
|
{{ c.v }}
|
||||||
</v-data-iterator>
|
</template>
|
||||||
</template>
|
<template v-else-if="c.t == 11">
|
||||||
|
<!-- EMAIL -->
|
||||||
|
<a :href="'mailto:' + c.v">{{ c.v }}</a>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="c.t == 12">
|
||||||
|
<!-- URL / HTTP -->
|
||||||
|
<!-- 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>
|
||||||
|
<template v-else>
|
||||||
|
<!-- UNKNOWN -->
|
||||||
|
{{ c.v }}
|
||||||
|
</template>
|
||||||
|
</v-list-item-subtitle>
|
||||||
|
</v-list-item-content>
|
||||||
|
</v-list-item>
|
||||||
|
</v-list>
|
||||||
|
</v-card>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</template>
|
||||||
|
</v-data-iterator>
|
||||||
|
</template>
|
||||||
|
</v-card>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user