Working with Vue.js Vuetify scripts.?

?

I had this function to display a status alert at the top of my page:

?

? ? ? ?showAlert(aMessage, aType)

? ? ? ? {

? ? ? ? ? this.alert = true;

? ? ? ? ? this.statusAlert = aMessage;

? ? ? ? ? this.alertType = aType;

? ? ? ? ? console.log(aType, aMessage);

? ? ? ? },

?

Tried to invoke it and got this error in the console:

Filer.htm:505? Uncaught TypeError: this.showAlert is not a function

?

Banged my head for a good hour trying to figure out what was going on.? Finally added this code:

?

? ? ? ?onAlert(alertMsg,alertType)

? ? ? ? {

? ? ? ? ? console.log('got here');

? ? ? ? ? console.log(alertMsg,alertType);

? ? ? ? ? this.alert = true;

? ? ? ? ? this.statusAlert = alertMsg;

? ? ? ? ? this.alertType = alertType;

? ? ? ? },

?

Called that, using the same parameters, initial tests worked.? OK, that was odd, but whatever.? I erased the showAlert code and changed all showAlert calls to onAlert.? Now I’m getting onAlert is not a function! ?Switched back to showAlert, some calls fail, other do not ?– can’t get anything to work consistently.?

?

Finally gave up on the idea of an alert function – replaced all instances of showAlert(“message”,”type”) with commands to directly set statusAlert and alertType

?

I have no idea WTF is wrong.? FWIW, I ran my code thru a validator and got no complaints.? Pasting the entire code block below in case someone with nothing better to do wants to look at it but as long as my workaround is functional I have minimal interest in messing further with this.

?

?

--sg

?

? <script type="text/javascript">

? ? new Vue({

? ? ? el: '#app',

? ? ? vuetify: new Vuetify(),

? ? ? mounted()

? ? ? {

? ? ? ? console.log('Checking logon status');

? ? ? ? ajaxJson("LogonStatus.scp", null,

? ? ? ? ? (response) =>

? ? ? ? ? {

? ? ? ? ? ? console.log(response);

? ? ? ? ? ? this.oUser = response;

? ? ? ? ? ? if (this.oUser.level < 4)

? ? ? ? ? ? {

? ? ? ? ? ? ? alert('You do not have permission to access this page.');

? ? ? ? ? ? ? window.open('SCPLogon.htm', '_self', 'noreferrer');

? ? ? ? ? ? }

? ? ? ? ? ? else

? ? ? ? ? ? {

? ? ? ? ? ? ? this.onAlert = ('Logged on as ' + this.oUser.username, "success");

? ? ? ? ? ? }

? ? ? ? ? },

? ? ? ? ? (error) =>

? ? ? ? ? {

? ? ? ? ? ? console.log('ERROR');

? ? ? ? ? ? console.log(error.message);

? ? ? ? ? ? window.open('SCPLogon.htm', '_self', 'noreferrer');

? ? ? ? ? });

? ? ? ? const payLoad = { mode: "table" };

? ? ? ? ajaxJson("/SCP/Getfiles.scp", payLoad,

? ? ? ? ? (response) =>

? ? ? ? ? {

? ? ? ? ? ? console.log("Got tables");

? ? ? ? ? ? this.tableList = response;

? ? ? ? ? ? console.log(this.tableList);

? ? ? ? ? },

? ? ? ? ? (error) =>

? ? ? ? ? {

? ? ? ? ? ? this.onAlert(error.message, "error");

? ? ? ? ? });

? ? ? ? return;

? ? ? },

? ? ? data: () => (

? ? ? ? {

? ? ? ? ? oUser: {},

? ? ? ? ? date: new Date().toISOString().substr(0, 10),

? ? ? ? ? menu: false,

? ? ? ? ? menu2: false,

? ? ? ? ? menu3: false,

? ? ? ? ? alert: true,

? ? ? ? ? search: '',

? ? ? ? ? statusAlert: '',

? ? ? ? ? tableList: '',

? ? ? ? ? fieldList: [],

? ? ? ? ? selectedFields: [],

? ? ? ? ? queryString: "",

? ? ? ? ? logList: [],

? ? ? ? ? iniList: [{ filename: 'scp.ini' }],

? ? ? ? ? alertType: '',

? ? ? ? ? dataMode: 0,

? ? ? ? ? valid: true,

? ? ? ? ? tab: null,

? ? ? ? ? items: [],

? ? ? ? ? fieldPicker: false,

? ? ? ? ? menuItems: [

? ? ? ? ? ? { text: 'Edit Profile', href: 'Patron.htm?id=:USER' },

? ? ? ? ? ? { text: 'Log Off', href: 'SCPLogon.htm' },

? ? ? ? ? ],

? ? ? ? ? tableName: "",

? ? ? ? ? selectedTable: { filename: '' },

? ? ? ? ? selectedLog: { filename: '' },

? ? ? ? ? selectedIni: { filename: '' },

? ? ? ? ? logContent: "",

? ? ? ? ? iniContent: "",

? ? ? ? ? headers: [],

? ? ? ? ? fieldHeaders: [

? ? ? ? ? ? {

? ? ? ? ? ? ? text: 'Field Name',

? ? ? ? ? ? ? align: 'start',

? ? ? ? ? ? ? value: 'fieldname',

? ? ? ? ? ? ? class: "grey accent-1"

? ? ? ? ? ? }

? ? ? ? ? ],

? ? ? ? ? pagination:

? ? ? ? ? {

? ? ? ? ? ? page: 1,

? ? ? ? ? ? rowsPerPage: 20

? ? ? ? ? },

? ? ? ? }),

? ? ? methods: {

? ? ? ? validate()

? ? ? ? {

? ? ? ? ? this.$refs.form.validate()

? ? ? ? },

?

? ? ? ? resetValidation()

? ? ? ? {

? ? ? ? ? this.$refs.form.resetValidation()

? ? ? ? },

?

? ? ? ? showAlert(aMessage, aType)

? ? ? ? {

? ? ? ? ? this.alert = true;

? ? ? ? ? this.statusAlert = aMessage;

? ? ? ? ? this.alertType = aType;

? ? ? ? ? console.log(aType, aMessage);

? ? ? ? },

? ? ? ? onAlert(alertMsg,alertType)

? ? ? ? {

? ? ? ? ? console.log(alertMsg,alertType);

? ? ? ? ? this.alert = true;

? ? ? ? ? this.statusAlert = alertMsg;

? ? ? ? ? this.alertType = alertType;

? ? ? ? },

? ? ? ? navigate(href)

? ? ? ? {

? ? ? ? ? console.log('navigating..' + href);

? ? ? ? ? window.location.href = href;

? ? ? ? },

? ? ? ? genHeaders()

? ? ? ? {

? ? ? ? ? {

? ? ? ? ? ? //set having unique values

? ? ? ? ? ? let s = new Set();

?

? ? ? ? ? ? this.items.forEach(item =>

? ? ? ? ? ? {

? ? ? ? ? ? ? for (f in item)

? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? //adding an existing value doesn't override the old one

? ? ? ? ? ? ? ? s.add(f)

? ? ? ? ? ? ? }

? ? ? ? ? ? });

? ? ? ? ? ? //respect the headers format required by Vuetify which

? ? ? ? ? ? // should has at least two fields (text, value)

? ? ? ? ? ? return Array.from(s).map(a =>

? ? ? ? ? ? {

? ? ? ? ? ? ? return {

? ? ? ? ? ? ? ? text: a.toUpperCase(),

? ? ? ? ? ? ? ? value: a

? ? ? ? ? ? ? }

? ? ? ? ? ? });

? ? ? ? ? }

? ? ? ? },

? ? ? ? goToLastPage()

? ? ? ? {

? ? ? ? ? const totalItems = this.items.length;

? ? ? ? ? const rowsPerPage = this.pagination.rowsPerPage;

? ? ? ? ? const lastPage = Math.ceil(totalItems / rowsPerPage);

? ? ? ? ? console.log('last', lastPage);

? ? ? ? ? this.pagination.page = lastPage; // Update the current page to the last

? ? ? ? },

? ? ? ? goToFirstPage()

? ? ? ? {

? ? ? ? ? this.pagination.page = 1;

? ? ? ? },

? ? ? ? onTabSelected(index)

? ? ? ? {

? ? ? ? ? console.log(this.tab);

? ? ? ? ? switch (this.tab)

? ? ? ? ? {

? ? ? ? ? ? case "tab2":

? ? ? ? ? ? ? const payLoad = { mode: "logs" };

? ? ? ? ? ? ? ajaxJson("/SCP/Getfiles.scp", payLoad,

? ? ? ? ? ? ? ? (response) =>

? ? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? ? console.log("Got logs", response);

? ? ? ? ? ? ? ? ? this.logList = response;

? ? ? ? ? ? ? ? ? console.log(this.logList);

? ? ? ? ? ? ? ? ? this.selectedLog = this.logList[0].filename; ?// ?? is drop down model an object or a string, ?doesn't work using selectedLog.filename

? ? ? ? ? ? ? ? ? this.loadText("logs", this.logList[0].filename);

? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? (error) =>

? ? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? ? this.onAlert(error.message, "error");

? ? ? ? ? ? ? ? });

? ? ? ? ? ? ? break;

? ? ? ? ? ? case "tab3":

? ? ? ? ? ? ? this.selectedIni = this.iniList[0].filename;

? ? ? ? ? ? ? console.log('ini tab');

? ? ? ? ? ? ? this.loadText("inis", this.iniList[0].filename);

? ? ? ? ? ? ? break;

? ? ? ? ? }

? ? ? ? },

? ? ? ? loadText(fileType, fileName)

? ? ? ? {

? ? ? ? ? fileName = this.qualifyName(fileType, fileName);

? ? ? ? ? const payLoad = { filename: fileName, action: "read" };

? ? ? ? ? ajaxJson("/SCP/filer.scp", payLoad,

? ? ? ? ? ? (response) =>

? ? ? ? ? ? {

? ? ? ? ? ? ? console.log("Got file contents");

? ? ? ? ? ? ? // ? ? ? ? ? ? ? this.logList = response;

? ? ? ? ? ? ? console.log(response);

? ? ? ? ? ? ? switch (fileType)

? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? case "logs":

? ? ? ? ? ? ? ? ? this.logContent = response.content;

? ? ? ? ? ? ? ? ? break;

? ? ? ? ? ? ? ? case "inis":

? ? ? ? ? ? ? ? ? this.iniContent = response.content;

? ? ? ? ? ? ? ? ? break;

? ? ? ? ? ? ? }

? ? ? ? ? ? },

? ? ? ? ? ? (error) =>

? ? ? ? ? ? {

? ? ? ? ? ? ? this.onAlert(error.message, "error");

? ? ? ? ? ? });

? ? ? ? },

? ? ? ? saveText(fileType, fileName, fileContents)

? ? ? ? {

? ? ? ? ? fileName = this.qualifyName(fileType, fileName);

? ? ? ? ? fileContents = this.qualifyContents(fileType);

? ? ? ? ? //this.showAlert('!!!!');

? ? ? ? ?// this.onAlert('saving','success');

? ? ? ? ? const payLoad = { filename: fileName, action: "save", contents: fileContents };

? ? ? ? ? ajaxJson("/SCP/filer.scp", payLoad,

? ? ? ? ? ? (response) =>

? ? ? ? ? ? {

? ? ? ? ? ? ? console.log(this.selectedIni);

? ? ? ? ? ? ? this.showAlert("File " + fileName + " has been updated on the server", "success");

? ? ? ? ? ? ? console.log(response);

? ? ? ? ? ? },

? ? ? ? ? ? (error) =>

? ? ? ? ? ? {

? ? ? ? ? ? ? this.showAlert(error.message, "error");

? ? ? ? ? ? });

? ? ? ? },

? ? ? ? qualifyName(fileType, fileName)

? ? ? ? {

? ? ? ? ? console.log('Qualifying', fileName, fileType);

? ? ? ? ? switch (fileType)

? ? ? ? ? {

? ? ? ? ? ? case "logs":

? ? ? ? ? ? ? console.log(fileName, this.selectedLogs, this.selectedLogs.filename);

? ? ? ? ? ? ? if (!fileName)

? ? ? ? ? ? ? ? fileName = this.selectedLog.filename;

? ? ? ? ? ? ? fileName = '\\logs\\' + fileName + '.txt';

? ? ? ? ? ? ? break;

? ? ? ? ? ? case "inis":

? ? ? ? ? ? ? console.log(fileName, this.selectedIni, this.selectedIni.filename);

? ? ? ? ? ? ? if (!fileName)

? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? if (this.selectedIni.filename)

? ? ? ? ? ? ? ? ? fileName = this.selectedIni.filename

? ? ? ? ? ? ? ? else

? ? ? ? ? ? ? ? ? fileName = this.selectedIni;

? ? ? ? ? ? ? }

? ? ? ? ? ? ? break;

? ? ? ? ? }

? ? ? ? ? console.log('...to ', fileName);

? ? ? ? ? return fileName;

? ? ? ? },

?

? ? ? ? qualifyContents(fileType)

? ? ? ? {

? ? ? ? ? let contents = '';

? ? ? ? ? switch (fileType)

? ? ? ? ? {

? ? ? ? ? ? case "inis":

? ? ? ? ? ? ? contents = this.iniContent;

? ? ? ? ? ? ? break;

? ? ? ? ? }

? ? ? ? ? console.log('Contents: ', contents);

? ? ? ? ? return contents;

? ? ? ? },

?

? ? ? ? jumpToBottom()

? ? ? ? {

? ? ? ? ? console.log('to bottom?');

? ? ? ? ? document.getElementById("log-entries").scrollTop = document.getElementById("log-entries").scrollHeight;

? ? ? ? },

? ? ? ? tableSelected()

? ? ? ? {

? ? ? ? ? const payLoad = { table: this.selectedTable.filename };

? ? ? ? ? this.items = [];

? ? ? ? ? console.log(payLoad);

? ? ? ? ? ajaxJson("/SCP/Getfields.scp", payLoad,

? ? ? ? ? ? (response) =>

? ? ? ? ? ? {

? ? ? ? ? ? ? console.log("Got fields");

? ? ? ? ? ? ? this.fieldList = response;

? ? ? ? ? ? ? console.log(this.fieldList);

? ? ? ? ? ? ? this.fieldPicker = true;

? ? ? ? ? ? ? this.queryString = "SELECT * FROM " + this.selectedTable.filename;

? ? ? ? ? ? },

? ? ? ? ? ? (error) =>

? ? ? ? ? ? {

? ? ? ? ? ? ? this.onAlert(error.message, "error");

? ? ? ? ? ? });

? ? ? ? ? return;

? ? ? ? },

? ? ? ? selectFields()

? ? ? ? {

? ? ? ? ? console.log('selectFields', this.fieldPicker)

? ? ? ? ? if (!this.fieldPicker)

? ? ? ? ? ? this.fieldPicker = true

? ? ? ? ? else

? ? ? ? ? {

? ? ? ? ? ? let fldstr = '';

? ? ? ? ? ? this.selectedFields.forEach(f =>

? ? ? ? ? ? {

? ? ? ? ? ? ? console.log(f.fieldname);

? ? ? ? ? ? ? fldstr += f.fieldname + ',';

? ? ? ? ? ? }

? ? ? ? ? ? )

? ? ? ? ? ? this.selectedFields = [];

? ? ? ? ? ? if (fldstr)

? ? ? ? ? ? {

? ? ? ? ? ? ? fldstr = fldstr.replace(/,$/, "");

? ? ? ? ? ? ? this.queryString = this.queryString.replace("*", fldstr);

? ? ? ? ? ? ? console.log(fldstr);

? ? ? ? ? ? }

? ? ? ? ? ? this.fieldPicker = false;

? ? ? ? ? }

? ? ? ? },

? ? ? ? submitQuery()

? ? ? ? {

? ? ? ? ? console.log('Executing SQL request..');

? ? ? ? ? console.log(this.tableName);

? ? ? ? ? let submitObject = { sql: this.queryString };

? ? ? ? ? console.log(submitObject);

? ? ? ? ? ajaxJson("/SCP/SQLizer.scp", submitObject,

? ? ? ? ? ? (response) =>

? ? ? ? ? ? {

? ? ? ? ? ? ? console.log(response);

? ? ? ? ? ? ? this.items = response;

? ? ? ? ? ? ? this.items.forEach(item =>

? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? // ? ? ? ?console.log("item", item);

? ? ? ? ? ? ? ? for (f in item)

? ? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? ? // ? ? ? ? ?console.log("f", f);

? ? ? ? ? ? ? ? ? if (item[f] instanceof Date)

? ? ? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? ? ? item[f] = moment(item[f]).format(moment.HTML5_FMT.DATE);

? ? ? ? ? ? ? ? ? ? if (f == 'updated')

? ? ? ? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? ? ? ? item[f] = moment(item[f]).format('LLL');

? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? });

? ? ? ? ? ? ? this.headers = this.genHeaders();

? ? ? ? ? ? },

? ? ? ? ? ? (error) =>

? ? ? ? ? ? {

? ? ? ? ? ? ? console.log(error);

? ? ? ? ? ? ? this.onAlert(error.message, "error");

? ? ? ? ? ? }

? ? ? ? ? );

? ? ? ? }

? ? ? }

? ? })

? </script>

?

?

?

Just to be clear, my problem was not getting my reports to work on the web – it was just having to relearn some basic report designer usage.? I already had some legacy reports that had been set up using the Data Environment so it was a matter of figuring out how to modify the DE to get all the reports working like I want them to.?

?

I’m using Vue.js for my front end pages and an app built with Rick Strahl’s Web Connection to access VFP data on the back end.? As noted, I’m using FoxyPreviewer which makes outputting reports to PDFs ridiculously simple.? Here’s a snippet from my Reporter method:

?

lcStem = lcFilename

lcFilename = lcFilename + [.pdf]

lnX = 1

DO WHILE FILE([..\web\docs\reports\]+lcFilename)? && Make sure file name is unique

? lcFilename = lcStem+ [-] + TRANSFORM(lnX) + [.pdf]

??lnX = lnX + 1?

ENDDO

lcReportName = [reports\]+lcReportName + [.frx]

?

DO FoxyPreviewer.App

* Generate PDF (FoxyPreviewer object type 10)

REPORT FORM (lcReportName);

? OBJECT TYPE 10 ;

? TO FILE [..\web\docs\reports\]+lcFilename

?

IF VARTYPE(loObj) <> [O]

? loObj = CREATEOBJECT("Empty")

ENDIF

ADDPROPERTY(loObj, "pdfname",lcFilename)

?

RETURN loObj

?

loObj gets passed as a JSON object to the front end script, so I can easily display the PDF to the end user:

?

? ? ? ? ? ? ? ? ? window.open('docs/reports/' + response.pdfname, '_blank', 'noreferrer');

?

--sg

?

The web app I worked on over the past several years did not directly use VFP reports, so my skills in that area have been seriously neglected.

?

I’m now in the process of porting an old desktop app to the web, but for this one I want to leverage my existing reports.? When the user requests a report, I use FoxyPreviewer to send output to a PDF, which I then open in a new tab.?? This is working quite well, but it’s meant having to relearn some pretty basic stuff.

?

I just spent well over an hour trying to figure out how to edit a report data environment.? I kept thinking I was missing something on the Report menu.? Initial Google attempts kept pointing to sources that would start out with “Open the Data Environment…”?

?

For the record (and in the hope that if I write it down I’ll remember it next time), it’s under the View menu when the report designer is in scope.?

?

--sg

?

Steven (Stein) Goering

?