Header

/// <reference path="../../../../pnut/core/ViewModelBase.ts" />
/// <reference path="../../../../pnut/js/USDollars.ts" />
/// <reference path='../../../../typings/knockout/knockout.d.ts' />
/// <reference path='../../../../pnut/core/peanut.d.ts' />
// for registration components
/// <reference path='../vm/Registration.d.ts' />
// Other common refeences
/// <reference path='../../../../pnut/js/searchListObservable.ts' />
///<reference path="../../../../pnut/js/selectListObservable.ts"/>
/// <reference path='../../../../typings/jqueryui/jqueryui.d.ts' />
/// <reference path='../../../../pnut/js/ViewModelHelpers.ts' />

namespace QnutYearlymeeting {
    private application:Peanut.IPeanutClient;
    private owner : Peanut.IEventSubscriber;
    private services: Peanut.ServiceBroker;

    // for View models remove contructions and put anything required in Init()
    // for components
    public constructor(owner: Peanut.ViewModelBase = null)
    {
        // for reports: public constructor(owner: IReportOwner, name: string) {
        var me = this;
        me.application = owner.getApplication();
        me.services = owner.getServiceBroker();
        me.owner = <Peanut.IEventSubscriber>owner;
        // reports only
        // me.reportName = name;
    }
}

public constructor(owner: IReportOwner, name: string)
    {
        let me = this;
        me.application = owner.getApplication();
        me.services = owner.getServiceBroker();
        me.owner = owner;
        me.reportName = name;
    }

In view model: Remove constructor, move anything usefull to init()

Add ",me" argument to calls to bindSection, bindNode

Remove ".applicaion" from showDefaultSection.

Remove "applicationPath: string," from init()

remove me.application.initialize(applicationPath, function() { and move interal code up.

Code fixes

replace

peanut.executeService('registration

With

services.executeService('peanut.QnutYearlymeeting::registration

Replace 'var ' with 'let '

Prefix with Peanut.

• INameValuePair
• IServiceResponse
• IViewModel
• ServiceBroker
• IPeanutClient

to any component name referenced in attachComponent or loadComponent, prefix with:

@pkg/qnut-yearlymeeting/

**replace bindComponent with attachComponet per example:

    if (me.COMPONENTINSTANACE) {
        // same code as in the final block below
    }
    else {
        me.application.attachComponent(
            '@pkg/qnut-yearlymeeting/COMPONENTNAME',
            // component factory function
            (returnFuncton: (vm: any) => void) => {
                me.application.loadComponents('@pkg/qnut-yearlymeeting/COMPONENTNAME',() => {
                    me.VMINSTANCE = new COMPONENTCLASS(me, true);
                    returnFuncton(me.VMINSTANCE);
                });
            },

            () => {
                me.VMINSTANCE.initialize(function() {
                    // same code as top block
                });
            }
        );
    }

Replace "Tops." with "Peanut."

Convert underscore/lodash calls

Reports only:

adminReportsComponent:

• showRpt{reportName}

  • Remove 'application' parameter in call to loadReport in adminReportsComponent
    • before: return new arrivalsReportComponent(me.application,me,reportName);
    • after: return new arrivalsReportComponent(me,reportName);

• GetReportDataCommand:

  • check the query and update the view if needed.

HTML views and templates

Classes

Forms and Tables

• form-group: form-group mb-3
• data-dismiss: data-bs-dismiss
• btn-default: btn-outline-primary
• text-right: text-end

Replace bootstrap display classes:

• hidden-print = d-print-none
• hidden-xs = d-none d-sm-block
• visible-print-block = d-none d-print-block
• hidden-md hidden-sm hidden-lg = d-block d-sm-none

Modals and Forms

Modals

     <TITLE GOES HERE!>
     <button type="button" class="close btn-close"
             data-bs-dismiss="modal"
             aria-label="Close">
    </button>

    <div class="modal-dialog modal-lg" >

Forms

 <select class="form-select">
   <div class='form-group mb-3'>

 <div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="checkboxfield">
  <label class="form-check-label" for="checkboxfield">
     Checkbox label
  </label>
</div>

Icons

glyphicon glyphicon-remove
far fa-trash-alt

glyphicon glyphicon-info-sign
fas fa-info-circle

glyphicon glyphicon-refresh
fas fa-sync

glyphicon glyphicon-spin
fas fa-spinner

glyphicon glyphicon-search
fas fa-search

glyphicon glyphicon-backward
fas fa-arrow-left

glyphicon glyphicon-forward
fas fa-arrow-right

glyphicon glyphicon-exclamation-sign
fas fa-exclamation-circle

glyphicon glyphicon-plus
fas fa-plus-circle

glyphicon glyphicon-question-sign
fas fa-question-circle

glyphicon glyphicon-pencil
fas fa-pencil-alt

glyphicon glyphicon-bed
fas fa-bed

glyphicon glyphicon-send
far fa-paper-plane

glyphicon glyphicon-edit
far fa-edit

<i class="fas fa-cash-register"></i>

Lodash/Underscore

_.filter(list,function (...)
list.filter(function (...)

_.sortBy(list,propertyname);
Peanut.Helper.SortByAlpha(list,propertyname); //  case insensitied
Peanut.Helper.SortByInt(list,propertyname); //  whole number values
Peanut.Helper.SortBy(list,propertyname); //  conversions or case don't matter

 _.find(list, function(item: any) {...});
 list.find(function(item: any) {...});

Misc

Varible column width:

    data-bind="css: { 'col-6': showAttending,'col-12' : !showAttending() }