From 88b66464c6656325395491e5d49b1501ac73e3d9 Mon Sep 17 00:00:00 2001
From: Hans-Peter Herzog <hherzog@sipwise.com>
Date: Thu, 8 Oct 2020 08:58:42 +0200
Subject: [PATCH] TT#96500 Fix date range filter for Conversations

Change-Id: I6f6442bcd76f2d4e8ab293646cd8bfadd30130eb
---
 src/api/conversations.js                      |   8 ++
 src/components/CscPageStickyTabs.vue          |   2 +-
 src/components/form/CscInputDate.vue          |  47 ++++++++
 .../Conversations/CscConversationsFilter.vue  |  66 ++++++++++
 .../pages/Conversations/CscFaxItem.vue        |   1 -
 .../pages/Conversations/CscVoiceMailItem.vue  |   2 -
 src/pages/CscPageConversations.vue            | 113 ++++++++----------
 src/store/conversations/actions.js            |   9 +-
 8 files changed, 181 insertions(+), 67 deletions(-)
 create mode 100644 src/components/form/CscInputDate.vue
 create mode 100644 src/components/pages/Conversations/CscConversationsFilter.vue

diff --git a/src/api/conversations.js b/src/api/conversations.js
index 24cc8b92..bf00dd54 100644
--- a/src/api/conversations.js
+++ b/src/api/conversations.js
@@ -15,6 +15,8 @@ import {
 export function getConversations (options) {
 	return new Promise((resolve, reject) => {
 		const type = _.get(options, 'type', null)
+		const from = _.get(options, 'from', '')
+		const to = _.get(options, 'to', '')
 		const params = {
 			subscriber_id: _.get(options, 'subscriberId'),
 			order_by: _.get(options, 'order_by', 'timestamp'),
@@ -27,6 +29,12 @@ export function getConversations (options) {
 		if (type !== null) {
 			params.type = type
 		}
+		if (from !== '') {
+			params.from = from
+		}
+		if (to !== '') {
+			params.to = to
+		}
 		getList({
 			path: 'api/conversations/',
 			root: '_embedded.ngcp:conversations',
diff --git a/src/components/CscPageStickyTabs.vue b/src/components/CscPageStickyTabs.vue
index 56d8ac60..d4995af6 100644
--- a/src/components/CscPageStickyTabs.vue
+++ b/src/components/CscPageStickyTabs.vue
@@ -32,7 +32,7 @@
 <script>
 import CscPage from 'components/CscPage'
 export default {
-	name: 'QPageStickyTabs',
+	name: 'CscPageStickyTabs',
 	components: {
 		CscPage
 	},
diff --git a/src/components/form/CscInputDate.vue b/src/components/form/CscInputDate.vue
new file mode 100644
index 00000000..4299179a
--- /dev/null
+++ b/src/components/form/CscInputDate.vue
@@ -0,0 +1,47 @@
+<template>
+	<csc-input
+		:value="value"
+		v-bind="$attrs"
+		@click="$refs.popupTime.show()"
+		@input="$emit('input', $event)"
+	>
+		<template
+			v-slot:prepend
+		>
+			<q-btn
+				icon="date_range"
+				color="primary"
+				dense
+				flat
+			>
+				<q-popup-proxy
+					ref="popupTime"
+				>
+					<q-date
+						:value="value"
+						mask="YYYY-MM-DD"
+						color="primary"
+						@input="$emit('input', $event); $refs.popupTime.hide()"
+					/>
+				</q-popup-proxy>
+			</q-btn>
+		</template>
+	</csc-input>
+</template>
+
+<script>
+import CscInput from 'components/form/CscInput'
+export default {
+	name: 'CscInputDate',
+	components: { CscInput },
+	props: {
+		value: {
+			type: String,
+			default: undefined
+		}
+	},
+	data () {
+		return {}
+	}
+}
+</script>
diff --git a/src/components/pages/Conversations/CscConversationsFilter.vue b/src/components/pages/Conversations/CscConversationsFilter.vue
new file mode 100644
index 00000000..bddb6e86
--- /dev/null
+++ b/src/components/pages/Conversations/CscConversationsFilter.vue
@@ -0,0 +1,66 @@
+<template>
+	<q-toolbar>
+		<q-space />
+		<csc-input-date
+			v-model="value.from"
+			class="q-mr-sm"
+			dense
+			clearable
+			label="From"
+			:disable="loading"
+			@input="inputFrom"
+		/>
+		<csc-input-date
+			v-model="value.to"
+			dense
+			clearable
+			label="To"
+			:disable="loading"
+			@input="inputTo"
+		/>
+		<q-space />
+	</q-toolbar>
+</template>
+
+<script>
+import CscInputDate from 'components/form/CscInputDate'
+export default {
+	name: 'CscConversationsFilter',
+	components: {
+		CscInputDate
+	},
+	props: {
+		value: {
+			type: Object,
+			default () {
+				return {
+					from: '',
+					to: ''
+				}
+			}
+		},
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		disable: {
+			type: Boolean,
+			default: false
+		}
+	},
+	methods: {
+		inputFrom (from) {
+			this.$emit('input', {
+				from: from,
+				to: this.value.to
+			})
+		},
+		inputTo (to) {
+			this.$emit('input', {
+				from: this.value.from,
+				to: to
+			})
+		}
+	}
+}
+</script>
diff --git a/src/components/pages/Conversations/CscFaxItem.vue b/src/components/pages/Conversations/CscFaxItem.vue
index b64a78ee..069d2a54 100644
--- a/src/components/pages/Conversations/CscFaxItem.vue
+++ b/src/components/pages/Conversations/CscFaxItem.vue
@@ -97,7 +97,6 @@ export default {
 			this.$emit('download-fax', this.fax)
 		},
 		startCall () {
-			this.$refs.callPopover.close()
 			this.$emit('start-call', this.fax.caller)
 		}
 	}
diff --git a/src/components/pages/Conversations/CscVoiceMailItem.vue b/src/components/pages/Conversations/CscVoiceMailItem.vue
index a3978343..7d4cddac 100644
--- a/src/components/pages/Conversations/CscVoiceMailItem.vue
+++ b/src/components/pages/Conversations/CscVoiceMailItem.vue
@@ -165,7 +165,6 @@ export default {
 			this.$refs.voicemailPlayer.setPausedFalse()
 		},
 		startCall () {
-			this.$refs.callPopover.close()
 			this.$emit('start-call', this.voiceMail.callee)
 		},
 		toggleBlockIncoming () {
@@ -178,7 +177,6 @@ export default {
 			this.$emit('toggle-block-both')
 		},
 		deleteVoicemail (voiceMail) {
-			this.$refs.callPopover.close()
 			this.$emit('delete-voicemail', voiceMail)
 		}
 	}
diff --git a/src/pages/CscPageConversations.vue b/src/pages/CscPageConversations.vue
index debf11ef..415e9d7c 100644
--- a/src/pages/CscPageConversations.vue
+++ b/src/pages/CscPageConversations.vue
@@ -1,34 +1,32 @@
 <template>
-	<csc-page
-		:style="pageStyle"
+	<csc-page-sticky-tabs
+		ref="pageSticky"
+		:value="selectedTab"
 	>
-		<q-page-sticky
-			ref="pageSticky"
-			class="bg-secondary q-pt-lg"
-			style="z-index: 10"
-			expand
-			position="top"
+		<template
+			v-slot:tabs
 		>
-			<q-tabs
-				:value="selectedTab"
-				class="col-sm-12 col-md-8"
-				align="justify"
-				inline-label
-				active-color="primary"
-				dense
-			>
-				<q-tab
-					v-for="tab in tabs"
-					:key="tab.value"
-					:name="tab.value"
-					:icon="tab.icon"
-					:label="tab.label"
-					:default="tab.value === selectedTab"
-					@click="selectTab(tab.value)"
-				/>
-			</q-tabs>
-			<q-separator />
-		</q-page-sticky>
+			<q-tab
+				v-for="tab in tabs"
+				:key="tab.value"
+				:name="tab.value"
+				:icon="tab.icon"
+				:label="tab.label"
+				:default="tab.value === selectedTab"
+				@click="selectTab(tab.value)"
+			/>
+		</template>
+		<template
+			v-slot:toolbar
+		>
+			<csc-conversations-filter
+				v-model="filter"
+				class="q-pb-sm"
+				:loading="isNextPageRequesting"
+				:disable="isNextPageRequesting"
+				@input="filterTab(selectedTab)"
+			/>
+		</template>
 		<q-infinite-scroll
 			ref="infiniteScroll"
 			:offset="500"
@@ -81,12 +79,13 @@
 		<csc-remove-dialog
 			ref="confirmDeletionDialog"
 			title-icon="delete"
+			title-icon-color="negative"
 			:title="$t('conversations.deleteVoicemailTitle')"
 			:message="$t('conversations.deleteVoicemailText')"
 			@remove="deleteVoicemail({id:deletionId, tab: selectedTab})"
 			@cancel="deletionId=null"
 		/>
-	</csc-page>
+	</csc-page-sticky-tabs>
 </template>
 
 <script>
@@ -96,23 +95,26 @@ import {
 	mapActions,
 	mapState
 } from 'vuex'
-import CscPage from 'components/CscPage'
+import CscPageStickyTabs from 'components/CscPageStickyTabs'
+import CscListSpinner from 'components/CscListSpinner'
 import CscConversationItem from 'components/pages/Conversations/CscConversationItem'
+import CscConversationsFilter from 'components/pages/Conversations/CscConversationsFilter'
 import CscRemoveDialog from 'components/CscRemoveDialog'
-import CscListSpinner from 'components/CscListSpinner'
 export default {
 	name: 'CscConversations',
 	components: {
-		CscListSpinner,
 		CscRemoveDialog,
-		CscPage,
-		CscConversationItem
+		CscConversationsFilter,
+		CscConversationItem,
+		CscListSpinner,
+		CscPageStickyTabs
 	},
 	mixins: [
 		platformMixin
 	],
 	data () {
 		return {
+			filter: undefined,
 			topMargin: 0,
 			deletionId: null,
 			selectedTab: 'call-fax-voicemail'
@@ -226,22 +228,29 @@ export default {
 			this.$store.dispatch('conversations/nextPage', {
 				type: type,
 				index: index,
+				filter: this.filter,
 				done: done
 			})
 		},
-		async selectTab (tabName) {
+		selectTab (tabName) {
 			if (this.selectedTab !== tabName) {
-				this.selectedTab = tabName
-				this.$store.commit('conversations/resetList')
-				this.$refs.infiniteScroll.reset()
-				if (this.reachedLastPage) {
-					this.$refs.infiniteScroll.resume()
-					this.$refs.infiniteScroll.trigger()
-				} else {
-					this.$refs.infiniteScroll.poll()
-				}
+				this.forceTabReload(tabName)
+			}
+		},
+		forceTabReload (tabName) {
+			this.selectedTab = tabName
+			this.$store.commit('conversations/resetList')
+			this.$refs.infiniteScroll.reset()
+			if (this.reachedLastPage) {
+				this.$refs.infiniteScroll.resume()
+				this.$refs.infiniteScroll.trigger()
+			} else {
+				this.$refs.infiniteScroll.poll()
 			}
 		},
+		filterTab (tabName) {
+			this.forceTabReload(tabName)
+		},
 		async reload () {
 			this.$store.commit('conversations/resetList')
 		},
@@ -264,22 +273,6 @@ export default {
 				format: voiceMail.format
 			})
 		},
-		reloadItems () {
-			let type = this.selectedTab
-			if (type === 'call-fax-voicemail') {
-				type = null
-			}
-			this.$store.dispatch('conversations/reloadItems', {
-				retryCount: 1,
-				type: type
-			})
-		},
-		filterByType (type) {
-			if (type !== this.selectedTab) {
-				this.$store.commit('conversations/resetList')
-				this.$store.dispatch('conversations/nextPage', type)
-			}
-		},
 		toggleBlockIncoming (options) {
 			this.$store.dispatch('conversations/toggleBlockIncoming', options).finally(() => {
 				this.reload()
diff --git a/src/store/conversations/actions.js b/src/store/conversations/actions.js
index 2c53221e..af152742 100644
--- a/src/store/conversations/actions.js
+++ b/src/store/conversations/actions.js
@@ -88,14 +88,17 @@ export default {
 				subscriberId: context.getters.getSubscriberId,
 				page: options.index,
 				rows: ROWS_PER_PAGE,
-				type: options.type
+				type: options.type,
+				from: _.get(options, 'filter.from', ''),
+				to: _.get(options, 'filter.to', '')
 			})
 			context.commit('nextPageSucceeded', res)
 		} catch (err) {
 			context.commit('nextPageFailed', err.message)
 		} finally {
-			console.log(res)
-			if (options.done !== undefined && res.items && res.items.length === 0) {
+			if (options.done !== undefined && (res === undefined || res.items === undefined)) {
+				options.done(true)
+			} else if (options.done !== undefined && res.items && res.items.length === 0) {
 				options.done(true)
 			} else if (options.done !== undefined) {
 				options.done()