winggy-angular v0.0.45

Winggy Angular

This package is mainly used for the following Common Contents:

• Installing winggy-angular Package
• Integration of Common Modules
• Integration of Common Translator Modules
• Integration of Common Services
• Integration of Common Components
• Integration of Common Styles

Installing winggy-angular

  npm install winggy-angular --save

Integration of Common Modules

• Using of Common Modules, import the below lines in the *.module.ts

  import { WinggyCommonModule } from 'winggy-angular';

  imports: [
    ...
    WinggyCommonModule.forRoot(),
    ...
  ]

Integration of Common Translator Modules

• Using of Common Translator Module, import the below lines in app.module.ts

  import { WinggyTranslateModule } from 'winggy-angular';

  imports: [
    ...
    WinggyTranslateModule.forRoot(),
    ...
  ]

Integration of Common Services

• Using of Common Services Import the below lines in the *.component.ts

  import { WinggyCommonService } from 'winggy-angular';

  constructor(
    ...
    public commonService: WinggyCommonService
  ) {}

• To initiate the translator service and update the language for the translator service, follow the lines

    constructor(
    ...
    public commonService: WinggyCommonService
  ) {
      this.commonService.initiateTranslator();
  }

  this.commonService.setLanguage('English');

Integration of Common Components

• Using of Common Components Import the below lines in parent module of the component.

  import { WinggyTranslateModule } from 'winggy-angular';

  imports: [
    ...
    WinggyTranslateModule.forRoot(),
    ...
  ]

• Please follow the common components to integrate.

  • No data or Loader Component

    • HTML Template

    <winggy-no-data [error]="error"></winggy-no-data>

    • Properties

      Property Type	Property	Default Values	Parameters/Data Type
      Input	error	No data found	string

  • Breadcrumb Component

    • HTML Template

    <winggy-breadcrumb [breadcrumbData]="breadcrumbData"></winggy-breadcrumb>

    • Properties

      Property Type	Property	Default Values	Parameters/Data Type
      Input	breadcrumbData	[]	{name: string, path: string}

    • Sample Data Format

    breadcrumbData = [
      {
        name: "Home",
        path: null,
      },
      {
        name: "Menus",
        path: "/menu-management/menu-builder",
      },
      {
        name: "Menu Management",
        path: "/menu-management/menu-builder",
      },
      {
        name: "Edit Menus",
        path: null,
      },
    ];

  • Table Component

    • HTML Template

    <winggy-table
      [columns]="columns"
      [data]="data"
      (tableChanges)="tableChanges($event)"
      (tableAction)="tableAction($event)"
    ></winggy-table>

    • Properties

      Property Type	Property	Default Values	Parameters/Data Type	Description
      Input	columns	[]	{ header: string, field: string, type: string(value/tree/input/select/radio/checkbox/action), hideAllSelect: boolean, options: Array, selectOptions: Object, actions: Array, style: Object }	-
      Input	data	[]	{}	-
      Output	tableChanges	-	-	Every Input Changes will reflect in this Output Event
      Output	tableAction	-	-	Every Action Changes will reflect in this Output Event

    • Sample Data Format

    columns = [
      {
        header: "",
        field: "expand",
        type: "tree",
      },
      {
        header: "",
        field: "multiSelection",
        type: "checkbox",
        hideAllSelect: false,
      },
      {
        header: "",
        field: "singleSelection",
        type: "radio",
      },
      {
        header: "Name",
        field: "name",
        type: "value",
        style: { width: "20%" },
      },
      {
        header: "Sample Input",
        field: "inputData",
        type: "input",
        style: { width: "20%" },
      },
      {
        header: "Course",
        field: "course",
        type: "select",
        style: { width: "20%" },
        options: [
          {
            label: "Select",
            value: "",
          },
          {
            label: "None",
            value: "None",
          },
          {
            label: "Drinks",
            value: "Drinks",
          },
          {
            label: "Appetizers",
            value: "Appetizers",
          },
          {
            label: "Entrees",
            value: "Entrees",
          },
          {
            label: "Deserts",
            value: "Deserts",
          },
        ],
        selectOptions: {
          label: "label",
          value: "value",
        },
      },
      {
        header: "Actions",
        field: "action",
        type: "action",
        style: { width: "20%" },
        actions: [
          {
            icon: "edit",
            title: "Edit",
            action: "edit",
          },
          {
            icon: "more_horiz",
            title: "Menu",
            contextMenu: [
              {
                name: "Archieve",
                action: "archieve",
              },
            ],
          },
        ],
      },
    ];
    
    data = [
      {
        name: "Food",
        inputData: "Food",
        course: "Drinks",
        prepStations: "No Print",
        children: {
          columns: [
            {
              header: "",
              field: "expand",
              type: "tree",
            },
            {
              header: "",
              field: "multiSelection",
              type: "checkbox",
              hideAllSelect: false,
            },
            {
              header: "",
              field: "singleSelection",
              type: "radio",
            }
          ],
          hideHeader: true,
          name: "Groups",
          data: [
            {
              name: "Food",
              inputData: "Food",
              course: "Drinks",
              prepStations: "No Print",
            },
            {
              name: "Food",
              inputData: "Food",
              course: "Drinks",
              prepStations: "No Print",
            },
            {
              name: "Food",
              inputData: "Food",
              course: "Drinks",
              prepStations: "No Print",
            },
            {
              name: "Food",
              inputData: "Food",
              course: "Drinks",
              prepStations: "No Print",
            },
          ]
        }
      },
      {
        name: "Drinks",
        course: "",
        prepStations: "",
        children: {
          columns: [
            {
              header: "",
              field: "expand",
              type: "tree",
            },
            {
              header: "",
              field: "multiSelection",
              type: "checkbox",
              hideAllSelect: false,
            },
            {
              header: "",
              field: "singleSelection",
              type: "radio",
            }
          ],
          hideHeader: true,
          name: "Groups",
          data: [
            {
              name: "Food",
              inputData: "Food",
              course: "Drinks",
              prepStations: "No Print",
            },
            {
              name: "Food",
              inputData: "Food",
              course: "Drinks",
              prepStations: "No Print",
            },
            {
              name: "Food",
              inputData: "Food",
              course: "Drinks",
              prepStations: "No Print",
            },
            {
              name: "Food",
              inputData: "Food",
              course: "Drinks",
              prepStations: "No Print",
            },
          ]
        }
      },
      {
        name: "Open Items",
        course: "",
        prepStations: "",
        children: {
          columns: [
            {
              header: "",
              field: "expand",
              type: "tree",
            },
            {
              header: "",
              field: "multiSelection",
              type: "checkbox",
              hideAllSelect: false,
            },
            {
              header: "",
              field: "singleSelection",
              type: "radio",
            }
          ],
          hideHeader: true,
          name: "Groups",
          data: [
            {
              name: "Food",
              inputData: "Food",
              course: "Drinks",
              prepStations: "No Print",
            },
            {
              name: "Food",
              inputData: "Food",
              course: "Drinks",
              prepStations: "No Print",
            },
            {
              name: "Food",
              inputData: "Food",
              course: "Drinks",
              prepStations: "No Print",
            },
            {
              name: "Food",
              inputData: "Food",
              course: "Drinks",
              prepStations: "No Print",
            },
          ]
        }
      },
    ];

Integration of Common Styles

• Using of Common Styles Import the below lines in the style.scss

@import "node_modules/winggy-angular/assets/scss/common";

• Use the below template to start the new menu component

<div class="winggy-page-layout">
  <div class="winggy-page-header">
    <!-- Breadcrumb Component -->
  </div>
  <div class="winggy-page-content">
    <div class="indo-menu-title">
      <h2>Menu Header</h2>
      <!-- Actions Div -->
    </div>
    <!-- Contents -->
  </div>
</div>

• Please follow the styles to integrate with the common styles.

Author: Narenthiran Y

License: MIT