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 18:53:52 +00:00
parent 983be5c96d
commit b61e03abad
2 changed files with 73 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -61,16 +61,18 @@
</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">
<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
@@ -88,33 +90,46 @@
v-for="c in item.columns"
:key="c.key"
>
<!-- 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 mr-n6">
{{ 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>
<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>
</tbody>
@@ -148,7 +163,9 @@ export default {
records: [],
rowsPerPageItems: [5, 10, 25, 50, 100],
selected: [],
narrowFormat: this.$vuetify.breakpoint.xs
narrowFormat: this.$vuetify.breakpoint.xs,
narrowDataCellColumns: 7,
narrowHeaderCellColumns: 3
};
},
props: {
@@ -185,16 +202,38 @@ export default {
},
"$vuetify.breakpoint.xs": function(value) {
this.narrowFormat = value;
},
"$vuetify.breakpoint.width": function(value) {
this.calculateNarrowWidthColumns(value);
}
},
methods: {
calculateNarrowWidthColumns() {
//only need to do this if xs sized narrow format
if (this.$vuetify.breakpoint.xs) {
var width = this.$vuetify.breakpoint.width;
// <!-- at 360 to 388px cols above sb 7, at 389 and above sb 8, at 419 sb9 -->
if (width < 389) {
this.narrowDataCellColumns = 7;
this.narrowHeaderCellColumns = 3;
} else if (width < 419) {
this.narrowDataCellColumns = 8;
this.narrowHeaderCellColumns = 3;
} else {
this.narrowDataCellColumns = 8;
this.narrowHeaderCellColumns = 4;
}
//this.narrowHeaderCellColumns = 12 - this.narrowDataCellColumns;
console.log("narrowDataCellColumns=" + this.narrowDataCellColumns);
}
},
//Used by narrow view to get the "header" text for a column based on the column key
getHeaderText(key) {
//key format is row-column e.g."500-2"
var columnIndex = key.split("-")[1];
var header = this.headers[columnIndex - 1];
if (header && header.text) {
return header.text;
return header.text + "_HERE_IS_A_REALLY_LONG_CUSTOMIZATION";
}
return "";
},
@@ -259,6 +298,8 @@ export default {
// }
that.loading = true;
//this is here because my theory is it's set to loading so this won't trigger a re-draw here
that.calculateNarrowWidthColumns();
var listUrl =
that.apiBaseUrl + "?" + window.$gz.api.buildQuery(listOptions);
window.$gz.api.get(listUrl).then(res => {
@@ -357,7 +398,7 @@ function buildRecords(listData, columndefinitions, filters) {
var column = row[iColumn];
var dataType = columndefinitions[iColumn].dt;
var display = column.v;
var display = column.v + "_SOME_EXTRA_TEXT";
switch (dataType) {
case 1: //datetime format to shortdatetime
display = filters.shortdatelocalized(display);

3
ayanova/src/plugins/vuetify.js
View File

@@ -20,7 +20,8 @@ export default new Vuetify({
//accent: "#BD491A", //dark orangey red, more clarity, less friendly looking
error: "#ff5252", //lighter red, have to see if it's good for all screens and sizes as it's a bit light but it stands out as an error condition better
disabled: "#e0e0e0"
disabled: "#e0e0e0",
anchor: "colors.purple"
}
}
},