admin/raven-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Browse Source
This commit is contained in:
John Cardinal
2020-02-04 20:21:10 +00:00
parent b61e03abad
commit befde88539
1 changed files with 62 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

189
ayanova/src/components/gz-data-table.vue
View File

@@ -1,140 +1,75 @@
<template> <template>
<v-data-table <div>
:headers="headers" <template v-if="!narrowFormat">
:items="records" <v-data-table
v-model="selected" :headers="headers"
:options.sync="dataTablePagingOptions" :items="records"
:server-items-length="totalRecords" v-model="selected"
:loading="loading" :options.sync="dataTablePagingOptions"
:disable-sort="true" :server-items-length="totalRecords"
:show-select="showSelect" :loading="loading"
:single-select="singleSelect" :disable-sort="true"
:hide-default-header="narrowFormat" :show-select="showSelect"
:footer-props="{ :single-select="singleSelect"
showCurrentPage: true, :hide-default-header="narrowFormat"
showFirstLastPage: true, :footer-props="{
itemsPerPageOptions: rowsPerPageItems, showCurrentPage: true,
itemsPerPageText: lt('RowsPerPage'), showFirstLastPage: true,
pageText: lt('PageOfPageText') itemsPerPageOptions: rowsPerPageItems,
}" itemsPerPageText: lt('RowsPerPage'),
:loading-text="lt('Loading')" pageText: lt('PageOfPageText')
:no-data-text="lt('NoData')" }"
class="elevation-1" :loading-text="lt('Loading')"
> :no-data-text="lt('NoData')"
<template v-slot:body="{ items }"> class="elevation-1"
<tbody> >
<template v-if="!narrowFormat"> <template v-slot:body="{ items }">
<tr v-for="item in items" :key="item.id"> <tbody>
<template v-if="showSelect"> <tr v-for="item in items" :key="item.id">
<td> <template v-if="showSelect">
<v-checkbox <td>
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"
>
<div class="mt-6" />
<!-- HEADER TO THE LEFT -->
<!-- FIELD VALUE TO THE RIGHT -->
<template v-if="showSelect">
<td class="v-data-table__mobile-row pl-2">
<div class="v-data-table__mobile-row__header"></div>
<div class="v-data-table__mobile-row__cell">
<v-checkbox <v-checkbox
v-model="selected" v-model="selected"
:value="item" :value="item"
primary primary
hide-details hide-details
></v-checkbox> ></v-checkbox>
</div> </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> </td>
</template> </tr>
<!-- NOTE: the pl-2 (overrides default of 16) is critical here or else in small phone size the data column is cut off to the right --> </tbody>
<td
class="v-data-table__mobile-row pl-2"
v-for="c in item.columns"
:key="c.key"
>
<v-row no-gutters>
<v-col :cols="narrowHeaderCellColumns">
<!-- NOTE: the mr-n6 is critical here or else in 360px (galaxy s9) small phone size the data column is cut off to the right -->
<div class="v-data-table__mobile-row__header text-truncate">
{{ getHeaderText(c.key) }}
</div>
</v-col>
<v-col :cols="narrowDataCellColumns">
<!-- at 360 to 388px cols above sb 7, at 389 and above sb 8, at 419 sb9 -->
<div class="v-data-table__mobile-row__cell text-truncate">
<!-- 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 -->
<!-- <a @click="btnClick(c.key, c.i)" href="#">{{ c.v }}</a> -->
<!-- <v-btn @click="btnClick(c.key, c.i)">{{ c.v }}</v-btn> -->
<span
@click="btnClick(c.key, c.i)"
class="secondary--text subtitle-2 font-weight-bold"
>{{ c.v }}</span
>
</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>
</v-col>
</v-row>
</td>
<!-- <hr class="mt-12" /> -->
<div class="mt-6"><hr /></div>
</tr>
</template> </template>
</tbody> </v-data-table>
</template> </template>
</v-data-table> <!-- MOBILE TABLE VIEW -->
<template v-else>
MOBILE VIEW HERE
</template>
</div>
<!-- End of large template -->
<!-- <hr /> <!-- <hr />
<div>Selected: {{ selected }}</div> <div>Selected: {{ selected }}</div>
<div>Headers: {{ headers }}</div> <div>Headers: {{ headers }}</div>