TT#27768 Implement fax infos and collapsible

What has been done:
- TT#27769, Conversations: Create custom card component
- TT#28200, Conversations: Show page count

Change-Id: Ia3765a11d415d62f280cbf95a666bfdc9230b0d4

README.md

@@ -11,11 +11,11 @@ First make sure you have Node.js and npm installed, and then install and build t
 1. Clone the ngcp-csc-ui repo locally
 1. Run npm install
 
-    ```npm install```
+    `npm install`
 
 1. Build the app for dev
 
-    ```npm run dev-build```
+    `npm run dev-build`
 
 ### Vagrant
 
@@ -23,37 +23,37 @@ To run this app you also need to have a [vagrant-ngcp](https://www.sipwise.org/d
 
 1. Go to your local vagrant-ngcp folder, for example
 
-    ```cd ~/Sipwise/mr/vagrant-ngcp```
+    `cd ~/Sipwise/mr/vagrant-ngcp`
 
 1. Spin up a new vagrant box
 
-    ```./v n pro1```
+    `./v n pro1`
 
 1. SSH into vagrant box and become root
 
-    ```
+    `
     ./v s pro1
     sudo -s
-    ```
+    `
 
 1. Edit config.yml
 
-    ```vim /etc/ngcp-config/config.yml```
+    `vim /etc/ngcp-config/config.yml`
 
 1. Enable csc by finding the the "http_csc:" section of the file, and setting "csc_js_enable:" to yes
 
-    ```csc_js_enable: yes```
+    `csc_js_enable: yes`
 
 1. Run ngcpcfg apply
 
-    ```ngcpcfg apply 'Enable http_csc'```
+    `ngcpcfg apply 'Enable http_csc'`
 
 1. Navigate into the vagrant shared local folder (configured via custom_config file in local vagrant-ngcp/users.d/ folder) and execute dev.sh script to set up symlink between local built files and vagrant files served via nginx
 
-    ```
+    `
     cd /usr/local/devel/ngcp-csc-ui/
     ./dev.sh
-    ```
+    `
 
 You can now access ngcp-csc-ui in browser by using the url provided by the vagrant script.
 
@@ -63,22 +63,22 @@ You need a pbx subscriber to be able to access the pbx config specific modules i
 
 1. SSH into the vagrant box and become root
 
-    ```
+    `
     ./v s pro1
     sudo -s
-    ```
+    `
 
 1. Edit config.yml
 
-    ```vim /etc/ngcp-config/config.yml```
+    `vim /etc/ngcp-config/config.yml`
 
 1. Enable csc by finding the "pbx:" section of the file, and setting "enable:" to yes
 
-    ```enable: yes```
+    `enable: yes`
 
 1. Run ngcpcfg apply
 
-    ```ngcpcfg apply 'Enable pbx'```
+    `ngcpcfg apply 'Enable pbx'`
 
 1. Log in to ngcp-panel with administrator credentials
 1. Go to Settings > Customers
@@ -92,40 +92,39 @@ You need a pbx subscriber to be able to access the pbx config specific modules i
 
 Now you can log in to csc with one of the normal subscriber you just created. URL for login is the same as for accessing ngcp-panel admin, except with csc suffix and no port specified:
 
-```https://<your-ip-address>/csc```
+`https://<your-ip-address>/csc`
 
 ### How to add new npm package
 
 1. Remove the package if you've already installed it
 
-`npm remove <package> <--save-dev || --save>`
+    `npm remove <package> <--save-dev || --save>`
 
 1. Ensure that you have a clean node_modules folder
-    
+    `
-    ```
     rm -R node_modules/
     npm install
-    ```
+    `
 
 1. Remove obsolete shrinkwrap file
-    
+
-    ```rm npm-shrinkwrap.json```    
+    `rm npm-shrinkwrap.json`
-    
+
-1. Install new package(s)    
+1. Install new package(s)
-    
+
-    ```npm install packageA packageB --save-dev```
+    `npm install packageA packageB --save-dev`
 
 1. Generate new shrinkwrap file including all dependencies
 
-    ```npm shrinkwrap --dev```
+    `npm shrinkwrap --dev`
-    
+
     You should see the following result in console:
-    
+
-    ```wrote npm-shrinkwrap.json```
+    `wrote npm-shrinkwrap.json`
-    
+
 1. Add new shrinkwrap file to git
 
-    ```git add .```
+    `git add .`
 
 ## Contributing
 

TESTDATA.md

@@ -1,3 +1,4 @@
+
 # CONVERSATIONS MODULE
 
 IMPORTANT: This document is meant for internal use at Sipwise, as it requires a vagrant-ngcp environment to be able to generate the test data.
@@ -24,9 +25,18 @@ cd /usr/local/devel
 mysql < ./conversations_dump.sql
 `
 
+## PBX
+
+1. Before doing the individual test data creation steps below, make sure pbx is enabled
+1. First SSH in to the vagrant box, become root and edit /etc/ngcp-config/config.yml
+`vim /etc/ngcp-config/config.yml`
+1. Search for the "pbx:" section, and set "enable:" to yes
+1. Then do `ngcpcfg apply 'commit msg'`
+
 ## VOICEMAIL
 
-1. Go to Settings > Subscribers > Details > Preferences, and under Call Forwards create a call forward destination under "Call Forward Unconditional" to voicemail
+1. Go to Settings > Subscribers > Details > Master Data, and set "Primary Number"/E164 to the desired number (for example 43993007)
+1. Go to Settings > Subscribers > Details > Preferences, and under "Call Forwards" create a call forward destination under "Call Forward Unconditional" to voicemail
 1. Initiate a call from another subscriber to the subscriber you just set call forward for, and leave a voicemail
 
 See [calls section](#calls) for information on how to initiate calls.
@@ -45,15 +55,21 @@ See [calls section](#calls) for information on how to initiate calls.
 For outgoing you need to use the api (also with E 164 number set to sms number from wiki). According to gjungwirth pretty simple with POST request containing the destination number and the content. 
 
 ## FAX
+1. Install exim package, so we can send the fax via mail. SSH in to vagrant box, become root, and then execute:
+`dpkg-reconfigure exim4-config`
+1. Follow the install prompt by first choosing 'mail sent by smarthost; no local mail'
+1. Then press enter for default sp1 selection, until you get asked for "IP address or host name of the outgoing smarthost:". There you enter mail.sipwise.com and press enter
+1. For the rest of the prompts, press enter to choose the defaults
 1. Go to Settings > Subscribers, find subscriber you want to use as caller, and click "Details"
 1. Under "Master Data" click edit, and enter subscribers number also in the E164 field
+1. Then go to "Preferences", and set "Fax2Mail and Sendfax" to active
 1. Repeat the two steps above, this time for the callee
-1. SSH in to the vagrant box, become root, and create a text file to use for sending fax:
+1. For the callee, you also need to add your internal sipwise email address as "Destination" under "Fax2Mail and Sendfax", and also under "Call Forwards" configure a "Call Forward Unconditional" to "Fax2Mail"
-`echo 'test test' > filetosend.txt`
+1. SSH in to the vagrant box, become root, and execute the following command to send a fax from one subscriber to another
-1. Use the ngcp-fax tool to send a fax:
+`echo "Test Fax!" | ngcp-fax --caller 43993006 --callee 43993007`
-`ngcp-fax --caller 43993003 --callee 43993002 --file filetosend.txt`
+1. To troubleshoot you can check logs:
-1. To troubleshoot you can check log:
 `tail -f /var/log/ngcp/faxserver.log`
+`tail -f /var/log/ngcp/kamailio-proxy.log`
 
 ## CALLS
 

src/components/CscConversation.vue

@@ -1,22 +1,40 @@
 <template>
-    <q-card class="conversation-card" :id="conversation._id">
+    <csc-card-collapsible :list-item="conversation" :collapsible="hasCollapsibleData"
-        <csc-collapsible :icon="getCollapsibleIcons()"
+        :firstIcon="getFirstIcon()" :secondIcon="getSecondIcon()"
-            :label="getCollapsibleLabel()"
+        :sublabel="conversation.start_time | readableDate" :id="conversation._id">
-            :sublabel="conversation.start_time | readableDate">
+        <span slot="title">
-            <div v-if="isType('call') || isType('voicemail')">
+            {{ getTitle() }}
-                <ul>
+            <span v-if="isType('fax')" style="padding-left:12px;">
-                    <li>
+                <q-chip pointing="left" color="primary" class="csc-number-chip">
-                        <strong>
+                    <strong>Pages:</strong>
-                            {{ $t('pages.conversations.card.duration') }}:
+                    {{ conversation.pages }}
-                        </strong> {{ conversation.duration }}</li>
+                </q-chip>
-                    <li v-if="isType('voicemail')">
+            </span>
-                        <strong>
+        </span>
-                            {{ $t('pages.conversations.card.folder') }}:
+        <div v-if="isType('call')" slot="main">
-                        </strong> {{ conversation.folder }}</li>
+            <ul>
-                </ul>
+                <li>
-            </div>
+                    <strong>
-        </csc-collapsible>
+                        {{ $t('pages.conversations.card.duration') }}:
-        <div v-if="!isType('fax')">
+                    </strong> {{ conversation.duration }}
+                </li>
+            </ul>
+        </div>
+        <div v-else-if="isType('voicemail')" slot="main">
+            <ul>
+                <li>
+                    <strong>
+                        {{ $t('pages.conversations.card.duration') }}:
+                    </strong> {{ conversation.duration }}
+                </li>
+                <li>
+                    <strong>
+                        {{ $t('pages.conversations.card.folder') }}:
+                    </strong> {{ conversation.folder }}
+                </li>
+            </ul>
+        </div>
+        <div v-if="!isType('fax')" slot="footer">
             <q-card-separator />
             <q-card-actions align="center">
                 <q-btn flat round small color="primary" icon="call">
@@ -34,24 +52,20 @@
                         </q-list>
                       </q-popover>
                 </q-btn>
-                <div v-if="isType('voicemail')">
+                <q-btn v-if="isType('voicemail')" flat round small color="primary"
-                    <q-btn flat round small color="primary" icon="play_arrow"
+                    icon="play_arrow" @click="downloadVoiceMail(conversation.id)">
-                           @click="downloadVoiceMail(conversation.id)">
+                    {{ $t('pages.conversations.buttons.play') }}
-                        {{ $t('pages.conversations.buttons.play') }}
+                </q-btn>
-                    </q-btn>
-                </div>
             </q-card-actions>
         </div>
-    </q-card>
+    </csc-collapsible-card>
 </template>
 
 <script>
     import Vue from 'vue'
-    import crypto from 'crypto-browserify'
+    import CscCardCollapsible from './card/CscCardCollapsible'
-    import CscCollapsible from './card/CscCollapsible'
+    import { QBtn, QPopover, QItem, QList, QCardActions,
-    import { mapGetters } from 'vuex'
+        QChip, QCardSeparator } from 'quasar-framework'
-    import { QBtn, QCardActions, QCard, QCardSeparator,
-        QPopover, QItem, QList } from 'quasar-framework'
     import numberFormat from '../filters/number-format'
     export default {
         name: 'csc-conversation',
@@ -60,18 +74,18 @@
         ],
         components: {
             QBtn,
-            QCard,
-            QCardActions,
-            QCardSeparator,
             QPopover,
             QItem,
             QList,
-            CscCollapsible
+            QChip,
+            QCardSeparator,
+            QCardActions,
+            CscCardCollapsible
         },
         computed: {
-            ...mapGetters('conversations', [
+            hasCollapsibleData() {
-                'getCardId'
+                return (['call', 'voicemail'].indexOf(this.conversation.type) > -1);
-            ])
+            }
         },
         methods: {
             downloadVoiceMail(id) {
@@ -84,28 +98,32 @@
                 this.$store.dispatch('call/start',
                     { number: number, localMedia: localMedia });
             },
-            getCollapsibleIcons() {
+            getFirstIcon() {
                 let conversation = this.conversation;
-                let directionIcon = conversation.direction == 'out' ? 'call_made' :
-                    'call_received';
                 switch (conversation.type) {
                     case 'call':
-                        return 'phone ' + directionIcon;
+                        return 'phone';
                         break;
                     case 'callforward':
-                        return 'call_merge ' + directionIcon;
+                        return 'call_merge';
                         break;
                     case 'voicemail':
-                        return 'voicemail ' + directionIcon;
+                        return 'voicemail';
                         break;
                     case 'fax':
-                        return 'insert_drive_file ' + directionIcon;
+                        return 'insert_drive_file';
                         break; case 'sms':
-                        return 'txtsms ' + directionIcon;
+                        return 'txtsms';
                         break;
                 };
             },
-            getCollapsibleLabel() {
+            getSecondIcon() {
+                let conversation = this.conversation;
+                let directionIcon = conversation.direction == 'out' ?
+                    'call_made' : 'call_received';
+                return directionIcon;
+            },
+            getTitle() {
                 let conversation = this.conversation;
                 let prefix;
                 if (!conversation.status || ['ok', 'SUCCESS'].indexOf(conversation.status) > -1) {
@@ -124,28 +142,10 @@
             },
             isType(type) {
                 return this.conversation.type == type;
-            },
-            getVoicemailUrl() {
-                return window.location.origin + this.conversation.voicemail;
             }
         }
     }
 </script>
 
 <style lang="stylus">
-@import '~variables'
-.conversation-card
-    padding 15px
-    .q-btn
-        margin-bottom -10px
-.voicemail-controls
-    height 46px
-    padding 0 7px
-.voicemail-outer
-    width 110px
-    height 50px
-    margin-left 10px
-.voicemail-inner
-    position absolute
-    width 110px
 </style>

src/components/card/CscCardCollapsible.vue

@@ -0,0 +1,100 @@
+<template>
+    <div class="csc-card-collapsible" :id="getId">
+        <q-card>
+            <q-item :link="collapsible" @click="toggleCollapse()" class="csc-card-title">
+                <q-item-side class="csc-card-left-icons">
+                    <q-item-tile color="secondary" :icon="firstIcon" />
+                    <q-item-tile color="secondary" :icon="secondIcon" />
+                </q-item-side>
+                <q-item-main>
+                    <q-item-tile label>
+                        <slot name="title">
+                    </q-item-tile>
+                    <q-item-tile sublabel>
+                        {{ sublabel }}
+                    </q-item-tile>
+                </q-item-main>
+                <q-item-side v-if="collapsible" right>
+                    <q-item-tile color="secondary" icon="keyboard_arrow_down" />
+                </q-item-side>
+            </q-item>
+            <q-card-main v-show="isExpanded">
+                <slot name="main"></slot>
+            </q-card-main>
+            <slot name="footer"></slot>
+        </q-card>
+    </div>
+</template>
+
+<script>
+    import { QCard, QCardTitle, QCardMain, QIcon, QItem,
+        QItemSide, QItemMain, QItemTile } from 'quasar-framework'
+    export default {
+        name: 'csc-card-collapsible',
+        props: [
+            'listItem',
+            'collapsible',
+            'firstIcon',
+            'secondIcon',
+            'sublabel',
+            'id'
+        ],
+        data() {
+            return {
+                expanded: false
+            }
+        },
+        components: {
+            QCard,
+            QCardTitle,
+            QCardMain,
+            QIcon,
+            QItem,
+            QItemSide,
+            QItemMain,
+            QItemTile
+        },
+        computed: {
+            isExpanded() {
+                return this.expanded;
+            },
+            getId() {
+                return this.id;
+            }
+        },
+        methods: {
+            toggleCollapse() {
+                if (this.collapsible) {
+                    this.expanded = !this.expanded;
+                }
+            }
+        }
+    }
+</script>
+
+<style lang="stylus">
+@import '~variables'
+.csc-card-collapsible
+    .q-btn
+        margin-bottom 5px
+    ul
+        list-style none
+        font-size 1rem
+        line-height 2rem
+        strong
+            font-weight 500
+    .q-item-icon
+        font-size 22px
+        padding-right 12px
+        line-height 2rem
+    div.q-item-label > span
+        font-size 18px
+        color #0c0c0c
+        font-weight 400
+    div.q-item-sublabel
+        margin-top 5px
+.csc-card-left-icons
+    margin-left 15px
+.csc-card-title
+    padding 16px
+</style>

src/components/card/CscCollapsible.vue

@@ -1,44 +0,0 @@
-<template>
-    <div class="csc-collapsible">
-        <q-collapsible :icon="icon"
-            :label="label"
-            :sublabel="sublabel">
-            <slot></slot>
-        </q-collapsible>
-    </div>
-</template>
-
-<script>
-    import { QCollapsible } from 'quasar-framework'
-    export default {
-        name: 'csc-collapsible',
-        props: [
-            'icon',
-            'label',
-            'sublabel'
-        ],
-        components: {
-            QCollapsible
-        }
-    }
-</script>
-
-<style lang="stylus">
-@import '~variables'
-.csc-collapsible
-    .q-collapsible
-        .q-item-icon
-            font-size 22px
-            padding-right 12px
-            color $secondary
-        .q-item-label
-            color black
-            font-size 18px
-            font-weight 400
-        ul
-            list-style none
-            font-size 1rem
-            line-height 2rem
-            strong
-                font-weight 500
-</style>