Code description

Global architecture

The project is structured based on Ionic 4’s default tabs layout. All of the code resides in the src folder.

Images are to be put in the src/assets folder. Global CSS changes are made in the src/theme/variables.scss file.

The src/app folder contains all of the Typescript and HTML files.

The model folder contains the model classes. Each class corresponding to a main feature of the app is placed into the same folder. For example, the area folder contains the pages, components and services related to that feature. The tab1, tab2 and tabs folders are generated by Ionic’s tabs default layout.

Area

AreaDbService is a service class that accesses the Storage database. It reads and modifies the area and type keys.

AddAreaPage is a page that calls a FormAreaComponent in its HTML. It relies on the FormAreaComponent to handle the actual information input, and displays additional information and the submit button. It uses the URL parameter parentid to guess where to put the new area.

EditAreaPage is a page similar to AddAreaPage. It uses the URL parameter id to retrieve the area to edit from the Storage, and it fills the form after that.

AreaPopoverComponent represents the popover that is displayed when selecting the options of an area in the arborescence.

FormAreaComponent is a generic form that can be used to add or edit an area. All information about the area is transmitted through the area input directive.

HelperTextComponent is a “dumb” component that only displays an area name and a list of parent names.

AutocompleteBarComponent is an input field that relies on Angular Material’s mat-autocomplete input. It needs a list of suggestions for the autocompletion. The default text can be modified through the fieldContent input. It sends the choosenOptionChanged to the parent component when the field has been modified.

SelectAreaService is a service needed to pass information between SelectAreaPage, CreateOperationPage and EditOperationPage(?), it’s contained an Operation access with getOperation setOperation(operation) getArea and setArea(area) . the two Area function interract with the Operation given .

ViewAreasModule is a module that display the areas list obtained by the parameter areas and create a routerlink for each area with the parameter link.

AreasArboresencePage is a page that call ViewAreasModule according to the URL parameter parentid and using areaDBService. With no parentid the page inject the root level of the arboresence on ViewAreasModule, otherwise it inject the childs of the parent area.

SelectAreaPage is a page similar to AreasArborescencePage but is use SelectAreaService to give the area validate by the user.

Operations

OperationDbService is a service class that accesses the Storage database. It reads and modifies the operation, label, vegetable and category keys.

AddOperationPage is a page that calls FormOperationComponent and allows the operation described in the form to be added to the database through the submit button.It’s use the service of SelectAreaService to retrieve information in the operation if an area is selected

FormOperationComponent is a generic form that can be used to add or edit an operation. All information about the operation is transmitted through the operation input directive. if we select an area, we use SelectAreaService to save the information of the operation .

There is also an AutocompleteBarComponent that works in the same way as in Area, however one more input for the placeholder text is added. Here we need autosuggestion for the vegetables’ varieties, names, suppliers and label fields.

Planning

PlanningComponent is called from the Tab1Page HTML.

PlanningComponent handles all the informations about the operations. It converts the dates, stored in “YYYY-MM-DD” into a “Do MMMM YYYY” format, more readable, and in french, using the momentjs library.

To scroll into the current date when the component is started, the ngx virtual scroller is used. At the moment of development, Ionic virtual scroll appears to be buggy in Ionic4 and Angular virtual scroll slowed down the application.

On click on one of the operations in PlanningComponent, an ActionSheet opens, with the options: mark as done/undone, details, cancel.

DetailsPage is a page that displays all informations of an operation according to the URL parameter id. It’s possible to toggle the operation done state by accessing this page. It is also possible to open an OperationPopover.

OperationPopover is currently used to delete an operation. It contains the interactions required before deleting it (including the confirmation dialog), and calls the OperationDbService which actually deletes it.