Use of (value) instead of (ngModel) is probaly the culprit

Input doc

https://angular.io/guide/forms-overview

https://material.angular.io/components/select/overview

mat-select is a form control. How to initialize it ?

https://angular.io/api/forms/FormControlDirective#use-with-ngmodel

https://stackoverflow.com/a/60763655/5803707

Steps:

•  front : add a file generated
• back : add the API path

Steps:

npm install --save angular-split material-design-icons typeface-open-sans typeface-roboto @angular-material-components/datetime-picker
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/cdk
npm ERR!   @angular/cdk@"^12.2.13" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/cdk@"^13.0.1" from @angular-material-components/[email protected]
npm ERR! node_modules/@angular-material-components/datetime-picker
npm ERR!   @angular-material-components/datetime-picker@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/thomaspeugeot/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/thomaspeugeot/.npm/_logs/2022-01-05T13_08_14_204Z-debug.log

It seems 7.0.1 from datetime-picker requests 13.0.1

Allow for plugging a callback that is called before the commit

This features uses xlsx WriteStruct API.

This translates into the need to have go struct in the orm domain that is

type AclassWOP struct {

   // basic fields
  // encoded pointers
}

func CopyFieldsFromAClassDBToAclassAOP {
}
func CopyFieldsFromAClassAOPToAclassDB {
}

Steps:

• manual
  • test
  • gong.go
  • backRepo.go
  • aclass.go
• genereted
  • gong.go
  • backRepo.go
  • aclass.go

Findngs:

• setEditorSpecialRouterOutlet is call from the sidebar

node.associatedStructName.toLowerCase() + "-adder", node.id, node.structName + "_" + node.name

Finding n1: the detail class is not reintialized when called

• Make it not reusable

Finding n2 : when detail is called, id == 1 (the id of the bclass) and association == "Aclass_(Bclass) Anarrayofb". Initialisation of BClass is not performed correctly

•  compute a variable mode with values CREATE_INSTANCE, UPDATE_INSTANCE, CREATE_INSTANCE_WITH_ASSOCIATION_<>_SET
• set the asociation in the init

Code refactoring is necessary to go forward:

•  in the sidebar, add "AssociationField" variable to the node
• in the routing change "assocation" into "orginStruct" and "originAssociationField"
• in the detail, update the code accordingly

Situation

Gong back-end architecture and the repository pattern

Rationale

Gong is a programming language that is a subset of the go language. When compiled, a gong program generates additional go code. The original go code and the generated go code coexist in the back-end and are arranged in a software architecture.

Program written in gong can invoke functions on gong object (Stage() for instance) that are later generated by the gong compiler. This can be a problem when this generated code is not yet present (the go compiler will fails and the go language server will pinpoint error). However, the gong compiler is robust to this kind of go compiler errors.

The Gong back-end architecture is close to the repository design pattern (which includes the unit of work, another design pattern). Thanks to this architecture, a set of object (the "unit of work") can be persisted to a database (the "repository") with a single "check in" operation. Conversely, objects can be retrieved from the database with a single "check out" operation. Moreover, once persisted, objects can be CRUD via a REST API.

This architecture presents two advantages:

• since gong generates the code implementing the repository pattern, it insulates the programmer from the the complexity of database management (pointer encoding, instances management, null values, ...) and of REST API implementation.
• It leverages a mental model that is familiar to all programmer. Indeed, "Stage", "Unstage", "Check in", "Check out" are not trivial operation to understand but there are part of the knowledge of all programmers because they use it with git, the de facto standard tool of configuration management.

To implement the repository pattern, Gong divides programming objects into three sets (memory, stage and backRepo) that falls in two packages (models and orm). A third package, controllers, provides a REST API to the back repo objects.

Staging gongstruct instances

The first set of go instance is the memory set. It lives in the models package. With gong, the models package is where manual coding takes places. The rest of the backend code is generated by gongc, the gong compiler.

The second set is the stage set, a subset of the memory set (this is where it follows the repository design pattern). As with git, the programmer stages instances (or unstages them) of the memory set.

To be staged, go instances have to be instances of a special kind of go struct called gongstruct. A gongstruct is an a exported go struct with a Name field.

package models

// Aclass is an example of gongstruct
// It has two association to Bclass, another gong struct
// - a pointer (a 0..1 relationship), 
// - an array of pointers (a 0..N relationship)
type Aclass struct {
	Name string
	Associationtob *Bclass
	Anarrayofb []*Bclass
}

type Bclass struct {
	Name string
}

// Stage puts aclass to the model stage
func (aclass *Aclass) Stage() *Aclass {
        ....
	return aclass
}

// Unstage removes aclass off the model stage
func (aclass *Aclass) Unstage() *Aclass {
	....
        return aclass
}

        // stage two instances
	bclass1 := (&models.Bclass{Name: "B1"}).Stage()

	aclass1 := (&models.Aclass{
		Name:                "A1",
		Associationtob:      bclass1,
		Anarrayofb: []*models.Bclass{
			bclass1,
		},
	}).Stage()

       // aclass1 and bclass1 form a "unit of work"

Only gongstruct instances can be staged or unstaged. It is interesting to stage a gongstruct instance for different reasons:

• if the instance need to be persisted in a database
• if the instance need to be seen in the front end

Commiting a unit of work of the stage

needs to call the Commit on a Stage object (a generated singloton in the models package).

The stage object can also serves as a in-memory datastore in the model package.

// for a set implementation in  golang
type __void struct{}
var __member __void

type StageStruct struct { 
	Aclasss           map[*Aclass]struct{} // set of Aclass instances
	Aclasss_mapString map[string]*Aclass // map of Aclass by their Name
	....
}

// Stage puts aclass to the model stage
func (aclass *Aclass) Stage() *Aclass {
	Stage.Aclasss[aclass] = __member
	Stage.Aclasss_mapString[aclass.Name] = aclass

	return aclass
}

// Unstage puts aclass off the model stage
func (aclass *Aclass) Unstage() *Aclass {
	delete(Stage.Aclasss, aclass)
	delete(Stage.Aclasss_mapString, aclass.Name)
	return aclass
}

func (stage *StageStruct) Commit() {
	....
}

func (stage *StageStruct) Checkout() {
	....
}

var Stage StageStruct = StageStruct{ 
	....
}

The third set is the backRepo, it contains sister instances of instances of the stage set. The sister instances in the backRepo differ from the staged instance in two ways that make them fit for storage in a database:

• basic field are of type sql
• pointer fields are encoded into basic fields. Therefore, they are without pointers (acronym WOP).

The sister instances of the backRepo are instances in the ormpackage.

package orm

type AclassDB struct {
	gorm.Model

	Name_Data sql.NullString

	// encoding of pointers
	AclassPointersEnconding
}

type AclassPointersEnconding struct {
	// field Associationtob is a pointer to another Struct (optional or 0..1)
	// This field is generated into another field to enable AS ONE association
	AssociationtobID sql.NullInt64
}

Notice that the stage can be checked-out from the backRepo.

When a commit is performed, the WOP sister is created and it is persisted in the database.

Problem & resolution

For the frontRepo, the architecture is not as clean:

• There is only one library that mixes WOP instances, memory instances and angular material components

Implementation

Additions:

• uses test2
• at compil, generates, if absent, an angular library for material (ng generate library test2-mat --skip-install true --skip-package-json true )
• at compil, generates, if absent, an angular library for models (ng generate library test2-models --skip-install true --skip-package-json true )
• at compil, generates, if absent, an angular library for orm (ng generate library test2-orm --skip-install true --skip-package-json true )

Steps:

• manual in table / detail
• generated in table
• generated in detail

db can be accessed directly from controllers

Use form editor with simpler css

Interest:

• follow latest gorm.io, including cgo free sqlite driver
• mulit DB

set up test2 example with inclusion of test

• problem with router path that are not dependant on the stack path
• manualy setup router paths depdendant on the stack path
• generate router paths depdendant on the stack path

port to gorm.io

• port to gorm.io

unique package path

• reproduce issue with 2 DB that have a name collision
• solve issue with schema generation based on the package path

multiple DB (one in memory, the other in DB)

• reproduce issue in test & test2 (eventually, creates a test3)
• reproduce issue in atmsim
• solve issue

Problems:

• main.go in root directory makes it a main package, disalowing the export of embed variables from this directory
• embed of n/dist/ng can fails in import (not a problem), embed of ng/projects must not fails at import. Therefore both can be in the same package

Steps:

• generate embed.go in root with NgDistNg var
• generate embed.go in ng with Projects var
• optional generation of main.go cmd/

Fields are sorted alphabeticaly.
this is a problem for numeric fields

Situation:

• a 'MANY MANY' association between A and B with gong is implemented with a ONE-MANY association between A and a BUse and a a ONE-ONE/ZERO association between BUse and B
• the "BUse" struct is the the MANY MANY association table

Issue:

• This is is cumbersome since for the user in the interaction with the table component when it is in the "association" mode

Solution:

• define struct with Name that ends with "Use" as MANY-MANY association struct (MMAS)
• when working with the table component between A and "AClassBClassUse" in the "association" mode for struct
  • gather all relevant "AClassBClassUse" instances, indicate the "selected" for each of those instance
  • when saving, compute the difference that create/delete AClassBClassUse instances

Implementation:

• Create a AClassBClassUse struct
• Manual work on the association A->AClassBClassUse
  • Add a button to deal directly with MANY-MANY association (MM)
  • Implement a different setRouterOutlet...
  • Take into account in the table component
• Generation
  • Front Repo
  • table component ts
  • detail component html
  • detail component ts

The idea is that when this menu is invoked,

• all Bclass instances have to be displayed (with ID and Name, ....), like when you invoke a ONE-MANY selector to Bclass
• selected are is list of Aclass array of AclassBclassUse that have the Aclass
• at the save delete removed instance and create added ones

Implementation:

•  refactor table component in order to be explicit about the mode ( DISPLAY_MODE, ONE_MANY_ASSOCIATION_MODE, MANY_MANY_ASSOCIATION_MODE)
• Implement the MANY_MANY_ASSOCIATION_MODE
• generation

Finding:

• dialogData is not null when invoked from the Aclass detail (ONE_MANY_ASSOCIATION_MODE)
• There are already 3 modes:
• display mode
• select mode

the dialogData contains the reverse field.

• in the bclass-table component, set up of the correct selection of item to be selected
• one needs to performs a double loop:
• get all the AclassBclassUse instances of aclass. for each instance, get the bclass instance that is referenced and push it to the selection

IT works, but with hard coded variables

          let aclass = this.frontRepo.Aclasss.get(this.dialogData.ID)

          if (aclass.AnarrayofbUse) {
            for (let AclassBclassUse of aclass.AnarrayofbUse) {
              let bclass = AclassBclassUse.Bclass
              this.initialSelection.push(bclass)
            }  
          }

Let's try to have soft coded variable for aclass.

2 ways to do it.
1/ use soft typing of typescript

        if (this.mode == TableComponentMode.MANY_MANY_ASSOCIATION_MODE) {

          let mapOfSourceInstances = this.frontRepo[this.dialogData.SourceStruct + "s"]
          let sourceInstance = mapOfSourceInstances.get(this.dialogData.ID)

          if (sourceInstance[this.dialogData.SourceField]) {
            for (let associationInstance of sourceInstance[this.dialogData.SourceField]) {
              let bclass = associationInstance[this.dialogData.IntermediateStructField]
              this.initialSelection.push(bclass)
            }
          }
          this.selection = new SelectionModel<BclassDB>(allowMultiSelect, this.initialSelection);
        }

OK. Hard coded deletion/creation works.

    private reverseAclassBclassUseService: AclassBclassUseService,

and

            this.reverseAclassBclassUseService.deleteAclassBclassUse(associationInstance.ID).subscribe(
              aclassBclassUse => {
                this.reverseAclassBclassUseService.AclassBclassUseServiceChanged.next("delete")
              }
            );

...
              this.reverseAclassBclassUseService.postAclassBclassUse(aclassBclassUse).subscribe(
                aclassBclassUse => {
                  this.reverseAclassBclassUseService.AclassBclassUseServiceChanged.next("post")
                }
              );

Remove presentation component

Steps:

• manually
  • remove the route to the presenter component, and replace it with a route to the editor
  • remove the router-outlet
• automatic
• remove unused code

With port to ng 12, failure to generate a correct stack

Steps:

• manual
• generated

Expected:

• in detail, a button beside the selector of the "zero/one-many" for sorting
• this start a dialog with the list of assoicated instances
• the end user can sort elements
• the end user can save the ordered items
• in the stage, the slice order is restaured during checkout
• in the stage, the slice order is captured during chekin

Steps:

manualy

• add a button in a grid beside the access to the selector
• in the front, creates a new component for implementing the sort function between the associated IDs
• in the front and backrepo, add a generated "order" field with each reverse association pointer.
• creates a test to inspect the database and manipulate the order
• in the stage, implement checkout
• in the stage, implement checkin

Generated (front)

• add the field Index to API class
• add set Valid=true in the save
• add the field OrderingMode to DialogData in frontrepo
• Generate the sorting component
• add sorting component to module
• add sorting component to map of component
• impact the detail component for the new sorting button

Generated (back)

• add Index field
• add Index field management
• add commit checkout for the zero/one side

Sequence:

• in test directory, suppress ng directory
• gongc

Problem:

• appcomponent.ts is not what is expected

Steps:

• investigate why it is not generated
• correct the issue

_aclass.Anarrayofb = new Array()

install of npm and go mod tidy

Feature:

// backup generates backup files in the dirPath
func (stage *StageStruct) Backup(dirPath string) {
	if stage.BackRepo != nil {
		stage.BackRepo.Backup(stage, dirPath)
	}
}

// Restore resets Stage & BackRepo and restores their content from the restore files in dirPath
func (stage *StageStruct) Restore(dirPath string) {
	if stage.BackRepo != nil {
		stage.BackRepo.Restore(stage, dirPath)
	}
}

Steps:

• Implement a AclassDB without pointers

  • gong
  • backRepo
  • AclassDB

• generate

  • gong
  • backRepo
  • AclassDB
  • AclassCRUD

• manual implementation in test with backup files as json files

  • Stage
  • Backup
  • BackupAclass
  • BackupBclass

• generated code

Index of instances can be different at creation (for instance aclass1 is 1 and aclass2 is 3).

Perform reindexing:

•  ResotePhase1 : unmarshall, create in databse store ID at backup in a dedicated field ID_atBckp in aclassDB
•  ResotePhase2 : - reindex the Pointer to Struct and Slice of Pointer to Struct

See generated public api

Simplification

generated tsconfig.json add a strict:true parameter

Seen in gongsvg
Name of columns has to be disambigued

Issue:

• In table, filter/sort/pagination setting are not kept

The reuse strategy should change

Allow for specific sorting

Steps:

• develop a test2 stack that use the test stack

Cehck wether it is encode in UTF during imports

specs fo UTF-8 are

https://pkg.go.dev/github.com/mattn/go-sqlite3#readme-extensions

Seps:

• test with "Hélenne"

It works with gong. It must the import of the database in .

Gong has reached a complexity critical level. Steps are:

• mv gongsim into a standalone repo,
• mv gongdoc into a standalone repo
• mv laundromat into a standalone repo
• mv gong at the root
• put simple in a test subdir of go
• update the landromat repo for using gong, gongdoc, gongsim in the simplified architecture
• update the gong readme

Situation:

• in the ng library, there is a -api class generated

Problem:

• it is never used.

With port to ng 12, failure to generate a correct stack

for simplification

Sequence:

• have B8 before B4 in Anarray of b
• rename B4 into B4a

Problem:

• B4 is now before B8
• in fact, both index are reset

In gong.go:

• add the map definition
• fill up the map at each checkout or each stage operation

for k := range m {
delete(m, k)
}

Problem:

• field is an interface
• field index is unknown

Resolution:

• add field index to the interface

updated to node 16

thomaspeugeot@MacBook-Pro-de-Thomas ng % node --version
v16.13.0

npm cache clean --force

is good

npx @angular/cli@13 update @angular/core@13 @angular/cli@13 --allow-dirty

--allow-dirty for it does not compute git properly

RESULT : Can't do it, datetimepicker is not compatible with angular 13

Error: node_modules/@angular-material-components/datetime-picker/lib/datetime-picker.component.d.ts:12:20 - error TS2305: Module '"@angular/material/core"' has no exported member 'CanColorCtor'.

12 import { CanColor, CanColorCtor, ThemePalette } from '@angular/material/core';
                      ~~~~~~~~~~~~

h2qutc/angular-material-components#226

Compilation of gongsvg

Error: ../../gong/ng/projects/gong/src/lib/gongstruct-detail/gongstruct-detail.component.html:26:121 - error TS2345: Argument of type '"ONE_MANY_ASSOCIATION_MODE"' is not assignable to parameter of type 'SelectionMode'.

26             <button mat-raised-button (click)="openReverseSelection('GongBasicField', 'GongStruct_GongBasicFieldsDBID', 'ONE_MANY_ASSOCIATION_MODE', '', '', '')">GongBasicFields</button>