Trello Contact Vue

Trello Contact Vue is a Vue.js library for transforming Trello into a ticket system without any hassle. You just import the library and add your Trello keys and your board id - thats it.

:package: Features

• Can be imported into any Vue.js powered front end
• Reads the board label names and adds them as categories into the contact form
• Displays all informations well-formatted in the description section (categories will be transformed to card labels)
• All new cards will be added to the first list on the board (left list)
• Displayed title on Trello can be configured using a template
• Form labels can be configured
• Supports following CSS Frameworks:
  • Bulma
  • Bootstrap 3
  • (more to come!)

:hammer: Install

Prequisites

• Vue.js (npm install vue)
• One of those CSS-Frameworks:
  • Bulma
  • Bootstrap 3

npm

$ npm install @mig-frankfurt/trello-contact-vue

Register to your project

import Vue from 'vue'
import TrelloContactVue from '@mig-frankfurt/trello-contact-vue'

Vue.component('trello-form', TrelloContactVue)

Get your data from Trello

(Maybe you want to create a new Trello user for security reasons first.)

1. Get your app-key: https://trello.com/app-key
2. Reference Trello's client.js and add your app-key: <script src="https://api.trello.com/1/client.js?key=[app-key]"></script>
3. Get your OAuth key (insert your app-key at the end!): https://trello.com/1/authorize?expiration=never&scope=read,write,account&response_type=token&name=Server%20Token&key=app-key
4. Get your board id from URL: e.g. https://trello.com/b/board-id/board-name

Examples

• Bulma
• Bootstrap 3

:wrench: Configuration

Minimal import

<trello-form oauth-key="[oauth-key]" board-id="[board-id]"></trello-form>

Properties

| Property | Type | Required | Default Value | | -------- | ---- | -------- | ------------- | | oauth-key | String | true | - | | board-id | String | true | - | | css-framework | String { 'bulma', 'bootstrap3' } | false | 'bulma' | | success-text | String | false | 'Thank you! We have received your message.' | | fail-text | String | false | 'Looks that something went wrong. Try again!' | | redo-text | String | false | 'Do you want to add another ticket?' | | show-additional-contact-data | bool | false | true | | label-name-text | String | false | 'Your name' | | label-mail-text | String | false | 'Your e-mail' | | label-contact-data-text | String | false | 'Additional contact data' | | label-category-text | String | false | 'Category' | | label-title-text | String | false | 'Title' | | label-details-text | String | false | 'Details' | | placeholder-name-text | String | false | 'e.g. John Doe' | | placeholder-mail-text | String | false | 'e.g. [email protected]' | | placeholder-contact-data-text | String | false | 'Additional Contact Data' | | placeholder-title-text | String | false | 'e.g. Help with problem XYZ' | | placeholder-details-text | String | false | 'Describe your problem as detailed as you can' | | validation-empty-text | String | false | 'Please fill out every required input field' | | validation-mail-text | String | false | 'This email is invalid' | | card-title-template | String | false | '{title}' Valid placeholders: {name}, {email}, {contactData}, {category}, {title}, {inquiry}, {dateNumber} | | header-name | String | false | 'Name' | | header-e-mail | String | false | 'E-Mail' | | header-description | String | false | 'Description' | | header-additional-contact-data | String | false | 'Additional Contact Data' | | submit-button-text | String | false | 'Submit' | | reset-button-text | String | false | 'Reset' | | reload-url | String | false | window.location.href |

Full import

<trello-form oauth-key="[oauth-key]"
             board-id="[board-id]"
             css-framework="bootstrap3"
             success-text="Vielen Dank! Wir haben Ihre Anfrage entgegengenommen."
             fail-text="Hoppla, da ist wohl etwas schief gelaufen. Versuchen Sie es nochmal."
             redo-text="Möchten Sie eine weitere Anfrage einreichen?"
             :show-additional-contact-data="false"
             label-name-text="Ihr Name"
             label-mail-text="Ihre E-Mail"
             label-contact-data-text="Weitere Kontaktdaten"
             label-category-text="Kategorie"
             label-title-text="Kurzer Titel für die Anfrage"
             label-details-text="Wobei können wir Ihnen behilflich sein?"
             placeholder-name-text="z.B. Dr. John Doe"
             placeholder-mail-text="z.B. [email protected]"
             placeholder-contact-data-text="Haus? Raumnummer? Telefonnummer?"
             placeholder-title-text="z.B. Hilfe beim Unwandeln von Patientendaten"
             placeholder-details-text="Beschreiben Sie ihr Problem kurz und prägnant"
             validation-empty-text="Bitte füllen Sie alle erforderlichen Felder aus"
             validation-mail-text="Diese E-Mail-Adresse ist ungültig"
             card-title-template="{title} von {name} (#{dateNumber})"
             header-name="Name"
             header-e-mail="E-Mail"
             header-description="Beschreibung"
             header-additional-contact-data="Weitere Kontaktdaten"
             submit-button-text="Abschicken"
             reset-button-text="Zurücksetzen"
             reload-url="http://localhost:8080"
></trello-form>

:satellite: How to build (for developers only)

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test

:hospital: Developed by

Medical Informatics Group (MIG) University Hospital Frankfurt Theodor-Stern-Kai 7 60590 Frankfurt https://www.mig-frankfurt.de

Maintained by: Patric Vormstein ([email protected])

:page_with_curl: License

MIT License

Copyright (c) 2017 Medical Informatics Group (MIG) Frankfurt

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.