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-18 00:42:23 +00:00
parent ca4d8d71b7
commit 849e0d981d
2 changed files with 112 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
ayanova/devdocs/todo.txt
View File

@@ -81,8 +81,8 @@ DataTable form ListView picker
- Tells gz-data-table control it should update itself
GZFORM FORMSETTINGS RELATED TO DATALISTVIEW
- formSettings.saved.dataTable.{ListViewId:[0 if none or else the last saved view id selected], EditedListViewJson:[edited but unsaved listview json, only if listviewId=0]}
- formSettings.temp.dataTable.CachedListViewJson - temporary cached version of listview that was saved at server but only if saved listviewId is non-zero
- formSettings.saved.dataTable.{listViewId:[0 if none or else the last saved view id selected], unsavedListView:[edited but unsaved listview json, only if listviewId=0]}
- formSettings.temp.dataTable.cachedListView - temporary cached version of listview that was saved at server but only if saved listviewId is non-zero

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

@@ -71,9 +71,12 @@
<!-- TEXT (also maybe openable)-->
<template v-if="c.i">
<!-- openable object with an ID -->
<v-btn depressed small @click="gridCellButtonClick(c.key, c.i)">{{
c.v
}}</v-btn>
<v-btn
depressed
small
@click="gridCellButtonClick(c.key, c.i)"
>{{ c.v }}</v-btn
>
</template>
<template v-else>
{{ c.v }}
@@ -295,6 +298,7 @@ export default {
loading: true,
dataTablePagingOptions: {},
listViewId: 0,
listView: {},
pickLists: {
listViews: []
},
@@ -314,8 +318,6 @@ export default {
},
formKey: String,
dataListKey: String,
dataListSort: String,
dataListFilter: String,
showSelect: {
type: Boolean,
default: false
@@ -359,7 +361,7 @@ export default {
}
//emit event to parent form of selected rows
//this.$emit("update:selected", this.selected);
//Note that this bubbles up all the columns of all the selected rows
//Note vm this bubbles up all the columns of all the selected rows
//so, to be more efficient for now will just send the ID's until I see a need for other shit
this.$emit("update:selected", window.$gz._.map(this.selected, "id"));
@@ -384,7 +386,7 @@ export default {
//get the datatype of the column which matches the server columns array index
var typeToOpen = this.serverColumns[key.split("-")[1]].ay;
//i is the actual AyaNova index of that record so we have all we need to open that object
//i is the actual AyaNova index of vm record so we have all we need to open vm object
window.$gz.eventBus.$emit("openobject", { type: typeToOpen, id: i });
},
lt(ltKey) {
@@ -392,27 +394,27 @@ export default {
},
getDataFromApi() {
var that = this;
var vm = this;
//start with defaults
var listOptions = {
DataListKey: that.dataListKey,
DataListKey: vm.dataListKey,
Limit: 5,
Offset: 0
};
//calculate paging based on settings
const { page, itemsPerPage } = that.dataTablePagingOptions;
const { page, itemsPerPage } = vm.dataTablePagingOptions;
if (itemsPerPage && itemsPerPage > 0) {
listOptions.Offset = (page - 1) * itemsPerPage;
listOptions.Limit = itemsPerPage;
}
//is there a filter?
if (that.dataFilterId != 0) {
listOptions["DataFilterID"] = that.dataFilterId;
if (vm.dataFilterId != 0) {
listOptions["DataFilterID"] = vm.dataFilterId;
}
that.loading = true;
vm.loading = true;
// {
// "offset": 0,
@@ -424,35 +426,29 @@ export default {
// }
window.$gz.api
.upsert(that.apiBaseUrl, {
.upsert(vm.apiBaseUrl, {
offset: listOptions.Offset,
limit: listOptions.Limit,
dataListKey: that.dataListKey,
dataListKey: vm.dataListKey,
listView: ""
})
.then(res => {
//NOTE: This is how to call an async function and await it from sync code
(async function() {
//Save a copy of the server columns data for handling button clicks etc later
that.serverColumns = res.columns;
vm.serverColumns = res.columns;
//Make sure the locale keys are fetched
await fetchLocalizedHeaderNames(res.columns); //Note can use await here because it's wrapped inside an async function call, it will wait then resume next stuff below
await fetchEnums(res.columns);
//build that.headers here
that.headers = buildHeaders(res.columns);
//Post process data here and then set that.records
that.records = buildRecords(res.data, res.columns);
that.loading = false;
that.totalRecords = res.totalRecordCount;
//build vm.headers here
vm.headers = buildHeaders(res.columns);
//Post process data here and then set vm.records
vm.records = buildRecords(res.data, res.columns);
vm.loading = false;
vm.totalRecords = res.totalRecordCount;
//persist the paging options so user sees same page and list on refresh or leave and return scenario
window.$gz.form.setFormSettings(that.formKey, {
temp: { page: that.dataTablePagingOptions.page },
saved: {
itemsPerPage: that.dataTablePagingOptions.itemsPerPage
}
});
//persist the paging options and listview stuff so user sees same page and list on refresh or leave and return scenario
saveFormSettings(vm);
//////////
})();
});
@@ -465,19 +461,11 @@ export default {
initForm(vm).then(() => {
// path: "/ay-data-list-view/:listViewId/:dataListKey",
//rehydrate last form settings
var formSettings = window.$gz.form.getFormSettings(this.formKey);
if (formSettings.saved && formSettings.saved.itemsPerPage) {
this.dataTablePagingOptions.itemsPerPage =
formSettings.saved.itemsPerPage;
}
if (formSettings.temp && formSettings.temp.page) {
this.dataTablePagingOptions.page = formSettings.temp.page;
}
// - formSettings.saved.dataTable.{listViewId:[0 if none or else the last saved view id selected], unsavedListView:[edited but unsaved listview json, only if listviewId=0]}
// - formSettings.temp.dataTable.cachedListView - temporary cached version of listview vm was saved at server but only if saved listviewId is non-zero
// vm.formState.ready = true;
// vm.dataListKey = this.$route.params.dataListKey;
// vm.listViewId = this.$route.params.listViewId;
//rehydrate last form settings
loadFormSettings(vm);
});
}
};
@@ -570,14 +558,14 @@ function buildRecords(listData, columndefinitions) {
default:
//do nothing, allow it to stay as is (checkbox, plain text etc)
}
//build the row column object that will be used by the datatable
//build the row column object vm will be used by the datatable
var columnObject = {
v: display,
t: dataType,
key: iRow + "-" + iColumn
};
//is the source dtalist field openable? If so it will have an i property set for it's ID and we already know the types to open from the column headers data
//so between the two we can make a clickable button in the grid that triggers a function with the column index and the id and that in turn will bubble up the event to open that
//so between the two we can make a clickable button in the grid vm triggers a function with the column index and the id and vm in turn will bubble up the event to open vm
//object
if (column.i) {
columnObject["i"] = column.i;
@@ -589,7 +577,7 @@ function buildRecords(listData, columndefinitions) {
//CHANGE TO:
//Headers: [ { "text": "Name", "value": "c1.v" }, { "text": "Serial #", "value": "c2" },
//Records: [ { "id": 1,columns: {"c1": {v:"Incredible Metal Fish 76",t:THETYPE,key:ROWID-COLUMNID e.g. 1-1,1-2,2-1 etc}, "c2": 1, "c3": "$877.8", "c4": "AuthorizationRoles.65536", "c5": "2020-01-30 01:53:57 AM", "c6": "Yup", "c7": "Virgil Strosin 74" }, { "id": 2, "c1": "Practical Plastic Bike 77", "c2": 2, "
//THis way can have v-if for each column that changes based on type and then has it's shit figured out
//THis way can have v-if for each column vm changes based on type and then has it's shit figured out
}
ret.push(o);
}
@@ -616,7 +604,7 @@ async function fetchLocalizedHeaderNames(columnData) {
return;
})
.catch(err => {
that.formState.ready = true; //show the form anyway so we know what's what
vm.formState.ready = true; //show the form anyway so we know what's what
window.$gz.errorHandler.handleFormError(err);
});
}
@@ -666,4 +654,80 @@ function populatePickLists(vm) {
}
});
}
//////////////////////////////////////////////////////////
//
// Fetch and cache list view
//
async function fetchListView(vm, listViewId) {
if (!listViewId) {
return;
}
await window.$gz.api.get("DataListView/" + listViewId).then(res => {
if (res.error != undefined) {
window.$gz.errorHandler.handleFormError(res.error, vm);
} else {
vm.listView = res.data.listView;
}
});
}
////////////////////
//
function saveFormSettings(vm) {
//do we need to persist this listview (only if it's an unsaved one)
var unsavedlv = vm.listView;
var cachedlv = vm.listView;
if (vm.listViewId != 0) {
//we have a saved one in use so there is no unsaved lv to save
unsavedlv = undefined;
} else {
//we have an unsaved on in use so there is no need for a cached one
cachedlv = undefined;
}
window.$gz.form.setFormSettings(vm.formKey, {
temp: { page: vm.dataTablePagingOptions.page, cachedListView: cachedlv },
saved: {
itemsPerPage: vm.dataTablePagingOptions.itemsPerPage,
dataTable: { listViewId: vm.listViewId, unsavedListView: unsavedlv }
}
});
}
////////////////////
//
function loadFormSettings(vm) {
var formSettings = window.$gz.form.getFormSettings(this.formKey);
if (formSettings.saved) {
if (formSettings.saved.itemsPerPage) {
this.dataTablePagingOptions.itemsPerPage =
formSettings.saved.itemsPerPage;
}
if (formSettings.saved.dataTable.listViewId != undefined) {
vm.listViewId = formSettings.saved.dataTable.listViewId;
}
if (vm.listViewId == 0) {
//check if there is a local copy of a listview vm was edited but not saved
if (formSettings.saved.dataTable.editedListView != undefined) {
vm.listView = formSettings.saved.dataTable.editedListView;
}
}
}
if (formSettings.temp) {
if (formSettings.temp.page) {
this.dataTablePagingOptions.page = formSettings.temp.page;
}
//check for cached local copy of saved list view in use
if (vm.listViewId != 0) {
if (formSettings.temp.dataTable.cachedListView != undefined) {
vm.listView = formSettings.temp.dataTable.cachedListView;
} else {
//fetch it and cache it
(async function() {})();
}
}
}
}
</script>