1010 <v-container >
1111 <v-row >
1212 <v-col cols =" 12" md =" 9" offset-md =" 1" xl =" 8" offset-xl =" 2" >
13+ <div v-if =" $fire.auth.currentUser" class =" text-center" >
14+ <v-avatar size =" 100" color =" indigo" class =" mx-auto" >
15+ <img
16+ v-if =" $fire.auth.currentUser.photoURL"
17+ :src =" $fire.auth.currentUser.photoURL"
18+ :alt =" $fire.auth.currentUser.displayName"
19+ />
20+ <v-icon v-else dark size =" 70" > mdi-account-circle </v-icon >
21+ </v-avatar >
22+ <h3 v-if =" $fire.auth.currentUser.displayName" >
23+ {{ $fire.auth.currentUser.displayName }}
24+ </h3 >
25+ <h4 class =" text--secondary" >
26+ {{ $fire.auth.currentUser.email }}
27+ <v-icon
28+ v-if =" $fire.auth.currentUser.emailVerified"
29+ small
30+ color =" primary"
31+ >mdi-shield-check</v-icon
32+ >
33+ </h4 >
34+ </div >
1335 <h5 class =" text-h4 mb-3 mt-3" >API Key</h5 >
1436 <p >
1537 Use your API Key in the <code >x-api-key</code > HTTP Header when
92114 <v-btn
93115 :icon =" $vuetify.breakpoint.mdAndDown"
94116 small
95- color =" error "
96- :disabled =" deletingPhone "
97- @click.prevent =" deletePhone (phone.id)"
117+ color =" info "
118+ :disabled =" updatingPhone "
119+ @click.prevent =" showEditPhone (phone.id)"
98120 >
99- <v-icon small >mdi-delete </v-icon >
121+ <v-icon small >mdi-square-edit-outline </v-icon >
100122 <span v-if =" !$vuetify.breakpoint.mdAndDown" >
101- Delete
123+ Edit
102124 </span >
103125 </v-btn >
104126 </td >
110132 </v-row >
111133 </v-container >
112134 </div >
135+ <v-dialog v-model =" showPhoneEdit" max-width =" 500px" >
136+ <v-card >
137+ <v-card-text v-if =" activePhone" class =" mt-6" >
138+ <v-container >
139+ <v-row >
140+ <v-col >
141+ <v-text-field
142+ outlined
143+ dense
144+ disabled
145+ label =" ID"
146+ :value =" activePhone.id"
147+ >
148+ </v-text-field >
149+ <v-text-field
150+ outlined
151+ disabled
152+ dense
153+ label =" Phone Number"
154+ :value =" activePhone.phone_number"
155+ >
156+ </v-text-field >
157+ <v-textarea
158+ outlined
159+ disabled
160+ dense
161+ label =" FCM Token"
162+ :value =" activePhone.fcm_token"
163+ >
164+ </v-textarea >
165+ <v-text-field
166+ v-model =" activePhone.messages_per_minute"
167+ outlined
168+ type =" number"
169+ dense
170+ label =" Messages Per Minute"
171+ >
172+ </v-text-field >
173+ </v-col >
174+ </v-row >
175+ </v-container >
176+ </v-card-text >
177+ <v-card-actions class =" mt-n8" >
178+ <v-btn small color =" info" @click =" updatePhone" >
179+ <v-icon v-if =" $vuetify.breakpoint.lgAndUp" small
180+ >mdi-content-save</v-icon
181+ >
182+ Update
183+ </v-btn >
184+ <v-spacer ></v-spacer >
185+ <v-btn small color =" error" text @click =" deletePhone(activePhone.id)" >
186+ <v-icon v-if =" $vuetify.breakpoint.lgAndUp" small >mdi-delete</v-icon >
187+ Delete
188+ </v-btn >
189+ </v-card-actions >
190+ </v-card >
191+ </v-dialog >
113192 </v-container >
114193</template >
115194
116- <script >
117- export default {
195+ <script lang="ts">
196+ import Vue from ' vue'
197+ import { Phone } from ' ~/models/phone'
198+
199+ export default Vue .extend ({
118200 name: ' SettingsIndex' ,
119201 middleware: [' auth' ],
120202 data() {
121203 return {
122204 apiKeyShow: false ,
123- deletingPhone: false ,
205+ showPhoneEdit: false ,
206+ activePhone: null ,
207+ updatingPhone: false ,
124208 }
125209 },
126210 computed: {
@@ -141,12 +225,34 @@ export default {
141225 },
142226
143227 methods: {
144- deletePhone (phoneId ) {
145- this .deletingPhone = true
228+ showEditPhone(phoneId : string ) {
229+ const phone = this .$store .getters .getPhones .find (
230+ (x : Phone ) => x .id === phoneId
231+ )
232+ if (! phone ) {
233+ return
234+ }
235+ this .activePhone = { ... phone }
236+ this .showPhoneEdit = true
237+ },
238+
239+ updatePhone() {
240+ this .updatingPhone = true
241+ this .$store .dispatch (' updatePhone' , this .activePhone ).finally (() => {
242+ this .updatingPhone = false
243+ this .showPhoneEdit = false
244+ this .activePhone = null
245+ })
246+ },
247+
248+ deletePhone(phoneId : string ) {
249+ this .updatingPhone = true
146250 this .$store .dispatch (' deletePhone' , phoneId ).finally (() => {
147- this .deletingPhone = false
251+ this .updatingPhone = false
252+ this .showPhoneEdit = false
253+ this .activePhone = null
148254 })
149255 },
150256 },
151- }
257+ })
152258 </script >
0 commit comments