TT#117522 CallRecordings - As a Customer, I want to filter CallRecordings by caller and callee

- TT#120738 Integrate caller and callee input in CallRecording list view
- TT#120737 Adjust data fetching part
- TT#120736 Specify UX flow

Change-Id: I94e579c5f01c628ea42d9bd99225d02a68b5f234

src/components/pages/CallRecording/CscCallRecordingFilters.vue

@@ -4,7 +4,7 @@
             class="row justify-center full-width q-gutter-x-sm"
         >
             <div
-                class="col-xs-12 col-md-2"
+                class="col-xs-12 col-md-3"
             >
                 <q-select
                     v-model="filterTypeModel"
@@ -12,12 +12,11 @@
                     :options="filterTypeOptions"
                     :label="$t('Filter by')"
                     :disable="loading"
-                    data-cy="filter-type"
                 />
             </div>
             <div
                 v-if="filterType === 'timerange'"
-                class="row col-xs-12 col-md-4"
+                class="row col-xs-12 col-md-6"
             >
                 <q-input
                     v-model="dateStartFilter"
@@ -146,6 +145,28 @@
                     </template>
                 </q-input>
             </div>
+            <div
+                v-else-if="filterType !== null"
+                class="row col-xs-12 col-md-3"
+            >
+                <q-input
+                    v-model="typedFilter"
+                    class="q-pr-sm col-12"
+                    dense
+                    :disable="loading || filterType === null"
+                    :label="(filterType === null) ? $t('Type something') : filterTypeModel.label"
+                    @keypress.enter="triggerFilter"
+                    @keydown.space.prevent
+                >
+                    <template v-slot:append>
+                        <q-icon
+                            name="search"
+                            class="cursor-pointer"
+                            @click="triggerFilter"
+                        />
+                    </template>
+                </q-input>
+            </div>
         </div>
         <div
             class="row justify-center full-width q-gutter-x-sm"
@@ -163,7 +184,6 @@
                     dense
                     color="primary"
                     text-color="dark"
-                    data-cy="filter-applied-item"
                     @remove="removeFilter(id)"
                 />
             </div>
@@ -200,6 +220,14 @@ export default {
                 {
                     label: this.$t('Timerange'),
                     value: 'timerange'
+                },
+                {
+                    label: this.$t('Caller'),
+                    value: 'caller'
+                },
+                {
+                    label: this.$t('Callee'),
+                    value: 'callee'
                 }
             ]
         },

src/i18n/de.json

@@ -119,6 +119,8 @@
     "Call ended": "Beendet",
     "Call forwarded": "Anruf weitergeleitet",
     "Call recordings": "",
+    "Callee": "",
+    "Caller": "",
     "Calling": "Anrufen",
     "Calling {number}...": "{number} wird angerufen...",
     "Calls": "Anrufe",

src/i18n/en.json

@@ -119,6 +119,8 @@
     "Call ended": "Call ended",
     "Call forwarded": "Call forwarded",
     "Call recordings": "Call recordings",
+    "Callee": "Callee",
+    "Caller": "Caller",
     "Calling": "Calling",
     "Calling {number}...": "Calling {number}...",
     "Calls": "Calls",

src/i18n/es.json

@@ -119,6 +119,8 @@
     "Call ended": "Llamada terminada",
     "Call forwarded": "Llamada redirigida",
     "Call recordings": "",
+    "Callee": "",
+    "Caller": "",
     "Calling": "Llamando",
     "Calling {number}...": "Iniciando ...",
     "Calls": "Llamadas",

src/i18n/fr.json

@@ -119,6 +119,8 @@
     "Call ended": "Appel terminé",
     "Call forwarded": "",
     "Call recordings": "",
+    "Callee": "",
+    "Caller": "",
     "Calling": "Appel",
     "Calling {number}...": "Appel vers le {number} en cours...",
     "Calls": "Appels",

src/i18n/it.json

@@ -119,6 +119,8 @@
     "Call ended": "Chiamata terminata",
     "Call forwarded": "Chiamata inoltrata",
     "Call recordings": "",
+    "Callee": "",
+    "Caller": "",
     "Calling": "Composizione",
     "Calling {number}...": "Stai chiamando {number}...",
     "Calls": "Chiamate",

src/pages/CscPageCallRecording.vue

@@ -237,7 +237,9 @@ export default {
             rowStatus: [],
             filter: {
                 startTime: null,
-                endTime: null
+                endTime: null,
+                caller: null,
+                callee: null
             },
             showFilters: false
         }
@@ -273,14 +275,16 @@ export default {
         }),
         async fetchPaginatedRecordings (props) {
             const { page, rowsPerPage, sortBy, descending } = props.pagination
-            const { startTime, endTime } = this.filter
+            const { startTime, endTime, caller, callee } = this.filter
             const count = await this.fetchRecordings({
                 page: page,
                 rows: rowsPerPage,
                 order_by: sortBy,
                 order_by_direction: descending ? 'desc' : 'asc',
                 start_time: startTime,
-                end_time: endTime
+                end_time: endTime,
+                caller: caller ? '*' + caller : undefined,
+                callee: callee ? '*' + callee : undefined
             })
             this.pagination = { ...props.pagination }
             this.pagination.rowsNumber = count