kmh-common-components v0.17.39

kmh-common-components

A pack of frontend vue components based on VueMaterial and css grid.

• kmh-navigation-drawer
• kmh-infobox
• kmh-infopanel
• kmh-sidebar
• kmh-cart-popup-content

Tech

kmh-common-components uses only VueMaterial material design library as dependency:

• VueMaterial - material design for vue.js

Demo

To start demo app simply run

npm install
npm run serve

or

yarn
yarn serve

Usage

Installation

Install the dependencies.

$ npm i vue-material

$ yarn add vue-material

Install components

$ npm i kmh-common-components

$ yarn add kmh-common-components

Use components

import kmhCommonComponents from 'kmh-common-components';
import 'kmh-common-components/dist/kmh-common-components.css';

Vue.use(kmhCommonComponents);

Components settings

Our components pack uses predefined css grid style. 1. NavigationDrawer - first bar on the left 2. Infobox - 2nd from left 3. Infopanel - 3rd from left (optional) 4. Sidebar - slides in/out from right, as top layer in app 5. CartPopupContent - Content component from inside the cart popup for use outside a popup

Optional you can use your own toolbar component as horizontal header i.e.:

.main-header {
    grid-row: 1
    grid-column: 1 / 5
    height: 50px
    background: #dedede
}

An full example of the use of this components is given in die Demo.

NavigationDrawer

Used as main navigation vertical bar.

• in template

<kmh-navigation-drawer
  :items="navItems"
  :settingsItems="settingsItems"
  @list-item-changed="listItemChanged"
  @delete-cart-item="deleteCartItem"
  @edit-cart-item="editCartItem"
/>

• to configure navigationItems in NavigationDrawer pass as property an Array of Objects i.e.

 {
    icon: 'people', //material icon name
    action: this.dummy,
    actionArgs: ['first argument', 9999],
    disabled: false
 }

• you can pass also settingsItems, to show buttons at the bottom of NavigationDrawer

NavigationItems & SettingsItems Props

SettingsItems (only) Props

submenuItem Object

 { icon: 'people', title: 'submenu name', action: this.dummy, actionArgs: ['first argument', 9999] }

listItem Object

{
    title: 'another list',
    items: [
      { title: 'test first title', done: false },
      { title: 'totedo 2nd title long description', done: true }
    ]
 }

cartItem Object

{
    icon: 'shopping_cart',
    title: 'Warenkorb',
    actions: {
      showButtons: true,
      activeOnTab: 1,
      buttons: [
        { name: 'Gesprächsaufzeichnung', action: this.cartActionButton }
      ]
    },
    categories: [
      'Energie',
      'Zusatzangebote'
    ],
    finalProducts: [],
    notFinalProducts: [],
    notFinalProducts: [],
    unvalidatedProducts: [],
    additionalOffers: []
}

In cartItem you have to pass four properties as arrays of objects

1. finalProducts: [],
2. notFinalProducts: [],
3. additionalOffers: [],
4. unvalidatedProducts: []

finalProducts, notFinalProducts & unvalidatedProducts objects structure

{
    'contractNumber': '999999',
    'contractType': 'strom',
    'isFinal': true,
    'isSaved': true,
    'isValidated': true,
    'voiceFileRequired': true,
    'shippingAddress': {
      'address': {
        'streetName': 'Bonnstraße',
        'houseNumber': 999,
        'zip': 54125,
        'city': 'köln',
        'district': 'Köln süd'
      },
      'predefinedAddress': null,
      'status': null
    },
    'tariff': {
      'selectedProduct': {
        'tariff': 'Strom Zuhause+ (24 Monate)',
        'bonus': '50,00€'
      },
      'bonus': {},
      'usage': '5000',
      'info': {
        'bonus': '50,0€',
        'tariff': {
          'tariff': 'Strom+ (24 Monate)'
        }
      },
      'status': null
    },
    'specialPromotions': {
      'list': [],
      'selected': [],
      'info': null,
      'status': null
    },
    'additionalOffers': {
      'list': [],
      'selected': [],
      'status': null
    },
    'customerData': {
      'customer': {
        'salutation': '',
        'firstName': '',
        'lastName': '',
        'dateOfBirth': null,
        'company': null,
        'identicalAddress': false,
        'iban': 'DE12 3456 7890 0987 6543 21',
        'bic': '',
        'bank': '',
        'contactInformation': {
          'emailAddress': ''
        },
        'phone': '01574654132',
        'counterNumber': '123456',
        'startOfDelivery': '02.02.2018',
        'preSupplier': 'XXX AG',
        'phoneNumber': '01574654132'
      },
      'invoiceAddress': {
        'address': {
          'streetName': 'Südstraße',
          'houseNumber': 21,
          'zip': 15120,
          'city': 'Berlin',
          'district': 'Süd'
        },
        'predefinedAddress': null
      },
      'status': null
    }
}

additionalOffers object structure

    { title: 'offer 1: very good' }

Events

Infobox

Used as infobox with customer info. You can also pass your own content adding it to and setting showMainContent to false. If not, there will be shown predefined component with customer personal info & comments & optional infos.

To use predefined component you have to pass mainContent object.

• in template

    <kmh-infobox
      v-if="showInfoBox"
      :titles="infoBoxTitles"
      :opened.sync="infoBoxOpened"
      :main-content="infoBoxContent"
      :show-main-content="true"
      @visibility-changed="infoboxVisibilitySet"
      @comment-added="addNewComment"
      @comment-changed="getNewValueOfComment"
    >
      <div slot="info">
        <div class="padding">
          test without main content
        </div>
      </div>
    </kmh-infobox>

Props

mainContent object

mainContent object example

    {
        id: 234343,
        personal: {
          salutation: 'Herr',
          firstName: 'Peter',
          lastName: 'Pan',
          dateOfBirth: '28.03.1954',
          age: '54'
        },
        actionButton: {
          action: this.openSideBar,
          icon: 'edit'
        },
        others: [
          {
            title: 'Kundennummer',
            items: [{ name: '', value: '479340953' }]
          },
          {
            title: 'Addresse',
            items: [
              { name: '', value: 'Newstreet 34a' },
              { name: '', value: '45357 Essen' }
            ]
          },
          {
            title: 'Phone',
            items: [
              { name: '', value: '0049 34534 32342343' },
              { name: '', value: '0049 112 9976666' }
            ]
          },
          {
            title: 'Mail',
            items: [
              { name: 'privat', value: 'peter@pan.de' },
              { name: 'geschäftlich', value: 'pp@wonderland.com' }
            ]
          }
        ],
        comments: {
          isSaveButtonVisible: false,
          placeholder: 'Add new comment',
          tabs: [
            {
              label: 'Kampagne',
              entries: [
                {
                  author: 'Agent Tom',
                  campaign: 'Secret service',
                  created: '16.03.2018 19:34 Uhr',
                  text: 'Secret comment for user X.'
                },
                {
                  author: 'Agent Eva',
                  campaign: 'Winter Campaign',
                  created: '16.12.2017 22:22 Uhr',
                  text: 'Winter is comming.'
                }
              ]
            },
            {
              label: 'Alle',
              entries: [
                {
                  author: 'Agent Tom',
                  campaign: 'Secret service',
                  created: '16.03.2018 19:34 Uhr',
                  text: 'Secret comment for user X.'
                },
                {
                  author: 'Agent Bomba',
                  campaign: 'Campaign SSdfsdf',
                  created: '23.03.2018 14:34 Uhr',
                  text: 'Bomba & co.'
                }
              ]
            }
          ]
        },
        infos: [
          {
            icon: 'star',
            header: 'NBA (3534535435345)',
            text: 'Neuvertrag FN/BB',
            action: this.dummyAction
          },
          {
            icon: 'highlight',
            header: 'NBQ (3534535435345)',
            text: 'Opt-in einholen'
          }
        ]
      }

Events

Infopanel (optional)

Used as infobox with additional info

    <kmh-infopanel-optional
      :opened.sync="infoPanelOpened"
      :titles="infoPanelTitles"
      @visibility-changed="infopanelVisibilitySet"
    >
      <div>
        test subpanel optional
      </div>
    </kmh-infopanel-optional>

Props

Events

Sidebar

Used as placeholder for additional components. You have to pass to sidebar component: path, type (name) and data for component you are injecting into.

• in template

    <kmh-sidebar
      :sidebar.sync="sidebarPayload"
    >
      <div>
        My sidebar content
      </div>
    </kmh-sidebar>

• payload example

    {
      show: false, //for toggling the sidebar
      closing: false, //default false; will only be used for the fading out animation
      blocked: false, //if true, then closing the sidebar is disabled
      title: '',
      props: {} // custom propertys
    }

Sidebar Props

Cart Popup Content

The Content from CartPopup inside the kmh-navigation-drawer component can be used as a single component outside an popup

• in template

    <kmh-cart-popup-content
      :mini="true" // Default false
      :items="cartObject"
      @editCartItem="editCartItem"
      @deleteCartItem="deleteCartItem" />

Props

Events

Todos

• Write MORE Tests
• Expand documentation