Skip to content

Commit df4150f

Browse files
AchoArnoldAchoArnold
committed
Fix UI
1 parent af02364 commit df4150f

8 files changed

Lines changed: 117 additions & 14 deletions

File tree

‎web/components/MessageThread.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
</v-list-item-avatar>
1313
<v-list-item-content>
1414
<v-list-item-title>
15-
{{ thread.contact }}
15+
{{ thread.contact | phoneNumber }}
1616
</v-list-item-title>
1717
<v-list-item-subtitle>
1818
{{ thread.last_message_content }}

‎web/components/MessageThreadHeader.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@
55
:color="$vuetify.breakpoint.lgAndUp ? 'grey darken-4' : 'primary'"
66
>
77
<div>
8-
<v-toolbar-title>+1 800 555-0199</v-toolbar-title>
8+
<v-toolbar-title>
9+
{{ $store.getters.getOwner | phoneNumber }}
10+
</v-toolbar-title>
911
<p class="text--secondary mb-n1">Estonia</p>
1012
</div>
1113
<v-spacer></v-spacer>

‎web/nuxt.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export default {
2424
css: [],
2525

2626
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
27-
plugins: [],
27+
plugins: ['~plugins/filters.ts'],
2828

2929
// Auto import components: https://go.nuxtjs.dev/config-components
3030
components: true,

‎web/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
"@nuxtjs/dotenv": "^1.4.1",
2525
"core-js": "^3.19.3",
2626
"dotenv": "^16.0.1",
27+
"libphonenumber-js": "^1.10.6",
2728
"nuxt": "^2.15.8",
2829
"vue": "^2.6.14",
2930
"vue-class-component": "^7.2.6",

‎web/pages/threads/_id.vue‎

Lines changed: 79 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
</v-btn>
77
<v-toolbar-title>
88
<span v-if="$store.getters.hasThread">
9-
{{ $store.getters.getThread.contact }}
9+
{{ $store.getters.getThread.contact | phoneNumber }}
1010
</span>
1111
</v-toolbar-title>
1212
<v-spacer></v-spacer>
@@ -20,7 +20,7 @@
2020
</v-tooltip>
2121
</v-app-bar>
2222
<v-container>
23-
<div ref="messageBody" class="messages-body">
23+
<div ref="messageBody" class="messages-body no-scrollbar">
2424
<v-row v-for="message in messages" :key="message.id">
2525
<v-col
2626
class="d-flex"
@@ -42,10 +42,14 @@
4242
shaped
4343
:color="isMT(message) ? 'primary' : 'default'"
4444
>
45-
<v-card-text>{{ message.content }}</v-card-text>
45+
<v-card-text
46+
class="text--primary"
47+
style="white-space: pre-line"
48+
>{{ message.content }}</v-card-text
49+
>
4650
</v-card>
4751
<div class="d-flex">
48-
<p class="ml-2 text--secondary caption">
52+
<p class="ml-2 text--secondary caption mr-2">
4953
{{ new Date(message.order_timestamp).toLocaleString() }}
5054
</p>
5155
<v-spacer></v-spacer>
@@ -55,8 +59,9 @@
5559
<v-progress-circular
5660
v-if="isPending(message)"
5761
indeterminate
58-
:size="16"
62+
:size="14"
5963
:width="1"
64+
class="mt-n2"
6065
color="primary"
6166
></v-progress-circular>
6267
<v-icon
@@ -77,27 +82,61 @@
7782
</v-col>
7883
</v-row>
7984
</div>
80-
<div class="d-flex fixed-bottom">
85+
<v-form
86+
ref="form"
87+
class="fixed-bottom d-flex"
88+
lazy-validation
89+
@submit.prevent="sendMessage"
90+
>
8191
<v-textarea
92+
v-model="formMessage"
93+
:disabled="submitting"
8294
:rows="2"
83-
placeholder="Type your message here"
8495
filled
96+
class="no-scrollbar"
97+
:rules="formMessageRules"
98+
placeholder="Type your message here"
8599
rounded
100+
@keydown.enter="sendMessage"
86101
></v-textarea>
87-
<v-btn color="primary" class="pa-5 white--text ml-2 mt-1" fab>
102+
<v-btn
103+
:disabled="submitting"
104+
type="submit"
105+
color="primary"
106+
class="pa-5 white--text ml-2 mt-1"
107+
fab
108+
>
109+
<v-progress-circular
110+
v-if="submitting"
111+
indeterminate
112+
style="position: absolute"
113+
:size="20"
114+
:width="3"
115+
color="pink"
116+
></v-progress-circular>
88117
<v-icon>mdi-send</v-icon>
89118
</v-btn>
90-
</div>
119+
</v-form>
91120
</v-container>
92121
</div>
93122
</template>
94123

95124
<script lang="ts">
96125
import { Vue, Component } from 'vue-property-decorator'
126+
import { InputValidationRules } from 'vuetify'
97127
import { Message } from '~/models/message'
128+
import { SendMessageRequest } from '~/store'
98129
99130
@Component
100131
export default class ThreadsIndex extends Vue {
132+
formMessage = ''
133+
formMessageRules: InputValidationRules = [
134+
(v) => !!v || 'Message is required',
135+
(v) => (v && v.length <= 320) || 'Message must be less than 320 characters',
136+
]
137+
138+
submitting = false
139+
101140
async mounted(): Promise<void> {
102141
await this.$store.dispatch('loadThreads')
103142
await this.$store.dispatch('loadThreadMessages', this.$route.params.id)
@@ -120,6 +159,31 @@ export default class ThreadsIndex extends Vue {
120159
const el: Element = this.$refs.messageBody as Element
121160
el.scrollTop = el.scrollHeight + 120
122161
}
162+
163+
async sendMessage(event: KeyboardEvent) {
164+
if (event.shiftKey) {
165+
return
166+
}
167+
168+
if (!(this.$refs.form as any).validate()) {
169+
return
170+
}
171+
172+
this.submitting = true
173+
const request: SendMessageRequest = {
174+
from: this.$store.getters.getOwner,
175+
to: this.$store.getters.getThread.contact,
176+
content: this.formMessage,
177+
}
178+
179+
await this.$store.dispatch('sendMessage', request)
180+
181+
this.formMessage = ''
182+
this.submitting = false
183+
;(this.$refs.form as any).reset()
184+
185+
this.$nextTick(this.scrollToElement)
186+
}
123187
}
124188
</script>
125189

@@ -136,11 +200,15 @@ export default class ThreadsIndex extends Vue {
136200
width: 96%;
137201
max-height: calc(100vh - 200px);
138202
max-width: 1761px;
203+
position: absolute;
204+
bottom: 120px;
205+
}
206+
207+
.no-scrollbar,
208+
.no-scrollbar textarea {
139209
overflow-x: hidden;
140210
-ms-overflow-style: none; /* for Internet Explorer, Edge */
141211
overflow-y: scroll;
142-
position: absolute;
143-
bottom: 120px;
144212
&::-webkit-scrollbar {
145213
display: none; /* for Chrome, Safari, and Opera */
146214
}

‎web/plugins/filters.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import Vue from 'vue'
2+
import { parsePhoneNumber } from 'libphonenumber-js'
3+
4+
Vue.filter('phoneNumber', (value: string): string => {
5+
const phoneNumber = parsePhoneNumber(value)
6+
if (phoneNumber) {
7+
return phoneNumber.formatInternational()
8+
}
9+
return value
10+
})

‎web/store/index.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,12 @@ export const mutations = {
5454
},
5555
}
5656

57+
export type SendMessageRequest = {
58+
from: string
59+
to: string
60+
content: string
61+
}
62+
5763
export const actions = {
5864
async loadThreads(context: ActionContext<State, State>) {
5965
const response = await axios.get('/v1/message-threads', {
@@ -64,6 +70,17 @@ export const actions = {
6470
context.commit('setThreads', response.data.data)
6571
},
6672

73+
async sendMessage(
74+
context: ActionContext<State, State>,
75+
request: SendMessageRequest
76+
) {
77+
await axios.post('/v1/messages/send', request)
78+
await Promise.all([
79+
context.dispatch('loadThreadMessages', context.getters.getThread.id),
80+
context.dispatch('loadThreads'),
81+
])
82+
},
83+
6784
setThreadId(context: ActionContext<State, State>, threadId: string | null) {
6885
context.commit('setThreadId', threadId)
6986
},

‎web/yarn.lock‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7489,6 +7489,11 @@ levn@~0.3.0:
74897489
prelude-ls "~1.1.2"
74907490
type-check "~0.3.2"
74917491

7492+
libphonenumber-js@^1.10.6:
7493+
version "1.10.6"
7494+
resolved "https://registry.yarnpkg.com/libphonenumber-js/-/libphonenumber-js-1.10.6.tgz#a453efe9d692cc9457abb20a712dec34472a7164"
7495+
integrity sha512-CIjT100/SmntsUjsLVs2t3ufeN4KdNXUxhD07tH153pdbaCWuAjv0jK/gPuywR3IImB/U/MQM+x9RfhMs5XZiA==
7496+
74927497
lilconfig@2.0.4:
74937498
version "2.0.4"
74947499
resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.0.4.tgz#f4507d043d7058b380b6a8f5cb7bcd4b34cee082"

0 commit comments

Comments
 (0)