0.0.10 • Published 11 months ago

witty-v2-email-package v0.0.10

Weekly downloads
-
License
ISC
Repository
gitlab
Last release
11 months ago

witty-email-package

INSTALLATION

Download & install applications

Application Install

  1. Clone the repository hhttps://gitlab.com/wittydevops/witty-email-package.git
  2. Navigate to the app root directory using Cmder or Git Bash CLI Example: cd c:\xampp\htdocs\witty-email-package\
  3. Run npm install
  4. Generate component docs. Install Vuese and run vuese gen. This will generate a website folder containing component documentation.

Testing (Option 1)

  1. Run npm run build
  2. Run npm pack
  3. Copy the created zip file and extract to the project node_modules or install it using npm.

Testing (Option 2)

  1. Run npm run serve
  2. Go to your localhost site. (http://localhost:8080/)

Publish

  1. Run npm run build
  2. Run npm publish
  3. In the project, run npm install --save witty-twilio-plugin

Local Testing

  1. Run npm link on current witty-video-chat-plugin folder
  2. Run npm link witty-twilio-plugin to target project folder
  3. Import package ` import WittyVideoChatPlugin from 'witty-twilio-plugin'

Sample WittyVideoChat Implementation

<template>
    <div id="app">
        <witty-email
        token=""
        :user="{
            email: 'wittydemo@gmail.com',
            password: 'gagayijnkfnhbews'
        }"
        base-url="http://localhost/webmail/?/Api"
        url="http://localhost/webmail/"
        layout="email"
        :options="options"
        :kanban-data="sortData"
        @kanban-template-created="onKanbanTemplateCreated"
        @kanban-template-deleted="onKanbanTemplateDeleted"
        @message-sent="onMessageSent"
        ref="wittyEmail">
        </witty-email>
    </div>
</template>

<script>

    import axios from 'axios'
    import WittyEmail from '~components/WittyEmail.vue'

    export default {
    	data() {
            return {
            	options: {
                    imageUpload: (image) => { console.log(" image upload ", image) },
                    enableCustomData: true,
                    customMessageLoad: this.customLoadMessages,
                    formatFilter: this.formatFilters,
                    getUserList: this.getUserList,
                    getUserData: this.getUserData,
                    locale: 'en-Us',
                    customMessageItemSlots: this.customMessageAction,
                    dialog: {
                        closeOnClick: false,
                        closeOnEsc: false,
                    },
                    messageActions: [
                        {
                            name: `<i class="witx-task-square"></i>${('Task')}`, 
                            key: 'convert_to_task',
                            class: ['divided'],
                            selectable: true,
                            show: true,
                            action: this.convertToTask
                        },
                        {
                            name: `<i class="witx-ticket"></i>${('Ticket')}`, 
                            key: 'convert_to_ticket',
                            show: true,
                            selectable: true,
                            action: this.convertToTask,
                        },
                    ],
                    editor: {
                        // custom icons for tinymce editor
                        // must be hosted to a url, a copy exists in src/assets/tinymce
                        iconsUrl: 'http://localhost/oxide-icon-pack-template/dist/icons/Witx/icons.js'
                    },
                    viewTypes: [
                        {
                            list: [],
                            page: 1,
                            limit: 25,
                            result: null,
                            value: 'accounts',
                            label: 'Accounts'
                        },
                        {
                            list: [],
                            page: 1,
                            limit: 25,
                            result: null,
                            value: 'contacts',
                            label: 'Contacts'
                        },
                        {
                            list: [],
                            page: 1,
                            limit: 25,
                            result: null,
                            value: 'tasks',
                            label: 'Tasks'
                        },
                        {
                            list: [],
                            page: 1,
                            limit: 25,
                            result: null,
                            value: 'tickets',
                            label: 'Tickets'
                        }
                    ]
                },
            }
        }
    }
</script>

WittyEmail (Main Component)

Props

NameDescriptionTypeRequiredDefault
tokenwebmail-lite access tokenStringfalsenull
userUser object. Can contain any data. Must match with properties from options.Objectfalsenull
baseUrlwebmail-lite api url linkStringfalse-
urlwebmail-lite urlfalse-
optionsconfig settingsObjectfalse{"properties":{"email":"Email","label1":"DisplayName","label2":"label2","label3":"label3","image":"image_path","timeFormat":"hh:mm A","dateFormat":"MMMM DD, YYYY"},"editor":{"color":"#333333","fontSize":"10pt","fontFamily":"Inter, sans-serif","apiKey":"q1fl7wqmmbkxzshds6b8k7ux6ib10y8n2xvd38au0cztw6we"},"imageUpload":null,"enableCustomData":false,"locale":"en-Us","customMessageLoad":null,"formatFilter":null,"messageActions":null}
layoutlayout (email, kanban)Stringfalseemail
kanbanDataarray of kanban templates containing columns and card sort orderArrayfalse-

Events

Event NameDescriptionParameters
kanban-template-createdKanban Template Created{Folder
kanban-template-deletedKanban Template Deleted{Folder
cards-updatedKanban Cards updates{template
message-sent--

Slots

NameDescriptionDefault Slot Content
message-detail-header-author-info--
message-header-sort--
kanban-header-sort--
email-header-actions--
email-detail-header-actions--
message-detail-pre-content--
message-detail-post-content--

MixIns

MixIn
accountMixin
messageDetailsMixin