• Vue 3 with SFC
• Nuxt 3
• Native HTML components
• Backend with Node express and VFPnode proyect https://github.com/siavcom/VFP-NODE
• SQL Data Base Postgres ( 12 or newer) or MSSQL (17 or newer)

• Make a simple program in typescript (class based), but with out knowledge of web programming (HTML, CSS, VUE).

It's based in use a main form (like ThisForm in VFP) made in typescript only, where each form has it owns components ( editBox, comboBox,checkBox grid ,etc) and has it own methods (click(), when, valid() etc()) forming a component tree.

                this.Form
                /   |   \
               /    |    \
              /     |     \
             /      |      \
            /       |       \
    Component1  Component2  Component..n
                /   |    \ 
               /    |      \
           click() when()  valid()...etc()

there are some components where each one have it's own components (grid have a several columns components)

            grid
           /  | \
          /   |  \
         /    |   \
        /     |    \
    Column1 Column2 Column..n

Each component has it own propierties.

• basic props
• Style props
• Position props (outdated)

and methods

• click
• when
• valid
• setFocus
• interactiveChange
• init
• keyPress

To make a reference to especific propierty you can do by using a complete name reference tree example: propierties : this.Form.style.display="inline-block" this.Form.style.width='800px'. this.Form.component1.prop.Type = 'editText' this.Form.component2.prop.Value='Customer name 1' or this.Parent.component2.prop.Value='Customer name 1' this.Parent.component1.component2.prop.Value='Customer name 1'

method:
this.Form.component4.click(). this.Parent.component1.component2.click()

• Form
• editText
• textLabel
• comboBox
• checkBox
• optionGroup
• grid

• Form (component container)
• Component Each component have serveral properties where each properties afect visual and database behaviour as values to.

- BaseClass: "editText",  // HTML base class (Form, - - editText, comboBox, sppiner, grid, checkBox ...)
- Name: "", // Name  of component.
- textLabel: "", // text label showing before input.


- Type 'text', //  data types :
                - number
                - text
                - date
                - dateTime
                - spinner
                - checkBox.

- Value: '', // Value of component .

- First: false // component who receives a focus when new register is inserted .
- Disabled: false
- ErrorMessage: "" // Error message if component is not valid (after valid()=false or prop.Valid=false).
- Format: ""
- InputMask: ""
- MaxLength: 0
- Min:0  // Minimun value for number
- Max:99999 // Maximun value for number
- Placeholder: ""
- Position: 'main', // main, header , footer.
- ReadOnly: false
- TabIndex: 1 // Tab index of component.

Image: ''
- ReadOnly: false
- TabIndex: 0
- ToolTipText: 'Principal name ',.
- Visible: true

• background: "white",
• color: "#b94295",
• width: "64px",
• height: "auto",
• Maxheight: '13px',
• MaxWidth: 'auto',
• fontFamily: "Arial",
• fontSize: "13px", // automaticamente vue lo cambiara por font-size (para eso se utiliza la anotacion Camello)
• textAlign: "left",
• ...... serveral css style properties : .

# each prop.Value component can be gatter from a field of local SQL where :

- ControlSource: "tableName.fieldName // Name of sql field.
- RecordSource: 'viewTableName'
- SqlUpdate: true   //true, when lost focus component, update field component. When false, update field component since tableUpdate method

- Capture: true // When capture is true, can't lost focus until Validate or esc
- First: false
- Focus: false // When put 1 , take focus this component
- Last: false
- Map:  // Read only. Main structure map of this component, class, method  example : "this.Form.componentName"
- Grid: false
- id: 0
- Key: 0
- Status: "I" //  P)rocess, A)ctive , I)nitialization.
- Valid:true // (Internal use). the value of the component is good
- KeyId : true when this component is a field index for a table select , update or delete

- Currency: '   ' //USD,EUR,MXN
- CurrencyDisplay : 'code' //to use the ISO currency code
- Decimals : 2
- Max: "999999999"
- Min: "0"
- Step: "1"
- Style: 'decimal' // decimal, currency,percent,unit

- BoundColumn: 2  // The value is atached to column
- ColumnCount: 2 // Total column numbers in a comboBox
- ColumnWidths: '80%','20%' //  width each column
- MultiSelect: true, // Can multiple select
- List: [], // List array result when MultiSelect=true
- Row: 0
- RowSourceType: 1 // How to fill the comboBox :
      1-Value.
      2-Alias,
      3-Query SQL Server
      5-Array
      
 when RowSourceType=2 or 3, you have to specify the RowSource     

- RowSourceType= 1
- ColumnCount = 2
- RowSource="House,H,Building,B,Departament,D"

- RowSourceType : 2
- RowSource : 'table.cod_nom,nom_nom'
Notes : You already have a local table SQL

- RowSourceType : 3
- RowSource : 'select cod_nom,nom_nom from lla1_nom order by nom_nom'

- RowSourceType: 5
- ColumnCount = 2
- RowSource:[["Datos", "Tablas", "Indices", "Vistas", "Menú del sistema","Otros"],["D", "T", "I", "V", "M","O"]]

- Style = 2; //0=DropDown Combo 2=DropDown List
- Tag: ""

- display: "inline-block"
- flexGrow: "0"     /* do not grow   - initial value: 0 */
- flexShrink: "0"   /* do not shrink - initial value: 1 */
- flexBasis: "auto" /* width/height  - initial value: auto */
- flexWrap: "wrap"

- background: "white"
- color: "#b94295"
- width: "auto"
- maxWidth: "auto"
- minWidth: "auto"
- height: "auto"
- fontSize: "13px"
- fontFamily: "Arial"
- zIndex: 100  // tabIndex
- alignContent: "center"
- textAlign: "left"

- ....... serveral css style properties : .

A grid have a several columns where each column is a input or label component where each component if bind to a SQL table field .

This have a 2 principal files, a view VUE (Main.vue) and typescript program (ThisForm.ts) ThisForm.tx is the begin typesccript program where is a component definition .

Each component has a separate typescript file.

• select ().

• useNodata (

  , <alias?>).

• use (

,,<alias?> ).

• tableUpdate(,,).

• appendBlank(,).

• deleteRow(<key_pri>,).

• delete(,,).

• insert(,).

• execute(,<alias?>,).

• select().

• recCount().

• recno().

• goto().

• skip().

• scatter(,).

[alias] type : string .Local SQL table alias.

[table] type : string .SQL Server remote view name.

[memoryObject] type : Object. It have field and value field SQL table example : m={ code_id : '000021', PurchaseDate : '2022-10-21' }.

[updateType] : type: number . Value = 0 Only row witch posisioned. Value = 1 All table rows until update error. if error, return a false else return true. Value= 2 All table rows.

[force]: type : boolean . Value =false If a update table fail because other user change data first, return false. Value =true If a update table fail because other user change data first.

[key_pri]: type: number. Table key_pri(id) number in SQLServer.

[recno] : type: number .Local SQL id recno number.

[SqlUpdate] type: boolean . Value=true. Delete SQLServer. Value=false. Only local SQL .

[sqlQuery] type: string. Sql Server query to execute.

[resultType] type : string.

[row] type: number. Recno row id to go.

[rowNumbers] type: number Row number. Forward it is Positive and backward it is negative.

[type] type: string . Value='MEMVAR'. Return a object with all field values). Value= 'FIELDS',). Return a object with specific field values).

[fieldArray] type: array. Array with specific field to obtain values.

Recommended IDE Setup

• VSCode + Volar.

this project use

• Vue 3 SFC

• Nuxt 3 @nuxtjs/axios @pinia/nuxt @zip.js/zip.js alasql buffer file-saver socket.io-client vue-sweetalert2 xlsx

• Back End https://github.com/siavcom/VFP-NODE

• SQL Server ( Postgres or MSSQL soon )

Knowledge Necesary :

• Object class programing.
• TypeScript.
• Some basic css styles and propierties.
• Ansi 99 SQL instructions.

Notes:

• To use this Framework, you have to restore a initial SQL backup .
• If you are a VFP programer, clipper, dbase III or IV, this is the right option for programing in the web.
• If you have a question, let me now by mail or skype [email protected]
• I can help you if you want to use this framwork.
• I use linux (ubuntu 21.04) to make this project.

About

• Author :

  • Fer Blocks (Principal desing,programinig and project director) . Linkedin https://www.linkedin.com/in/fernando-cuadras-846a20102/ .

  • Lupita Sotelo (Reports and SQL desing) .

  • Raul Castro (html and css desing) .

• http:https://siavcom.com.mx skype & e-mail : [email protected]

Reserved Word

position

Other notes :

Development: $ npx nuxi dev --port=3000 $ npm run dev