Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
AURA
dashboard
Commits
ac07d7f7
Commit
ac07d7f7
authored
May 15, 2020
by
jackie / Andrea Ida Malkah Klaura
Browse files
complete submit methods for notes modal
parent
a37dc5ee
Changes
2
Hide whitespace changes
Inline
Side-by-side
src/components/shows/NotesModal.vue
View file @
ac07d7f7
...
...
@@ -77,7 +77,9 @@
import
{
mapGetters
}
from
'
vuex
'
import
prettyDate
from
'
../../mixins/prettyDate
'
import
slugify
from
'
../../mixins/slugify
'
import
axios
from
'
axios
'
const
SUBMIT_NEW
=
false
const
SUBMIT_UPDATE
=
true
export
default
{
mixins
:
[
prettyDate
,
slugify
],
...
...
@@ -122,107 +124,79 @@ export default {
},
methods
:
{
update
(
event
)
{
// only try to save if anything has changed
if
(
this
.
title
!==
this
.
note
.
title
||
this
.
summary
!==
this
.
note
.
summary
||
this
.
content
!==
this
.
note
.
content
||
this
.
host_selected
!==
this
.
note
.
host
)
{
// prevent the modal from closing automatically on click
event
.
preventDefault
()
// backup the note contents
this
.
backuptitle
=
this
.
note
.
title
this
.
backupsummary
=
this
.
note
.
summary
this
.
backupcontent
=
this
.
note
.
content
this
.
backuphost
=
this
.
note
.
host
// now set the new contents
this
.
note
.
title
=
this
.
title
this
.
note
.
summary
=
this
.
summary
this
.
note
.
content
=
this
.
content
this
.
note
.
host
=
this
.
host_selected
// generate the uri for the API call:
// /api/v1/shows/1/schedules/1/timeslots/1/note/1/
var
uri
=
process
.
env
.
VUE_APP_API_STEERING_SHOWS
+
this
.
selectedShow
.
id
+
'
/schedules/
'
+
this
.
scheduleID
+
'
/timeslots/
'
+
this
.
timeslotID
+
'
/note/
'
+
this
.
note
.
id
+
'
/
'
// now send the PUT request with our updated note
axios
.
put
(
uri
,
this
.
note
,
{
withCredentials
:
true
,
headers
:
{
'
Authorization
'
:
'
Bearer
'
+
this
.
$parent
.
$parent
.
user
.
access_token
}
}).
then
(()
=>
{
// everything was fine, we can close the modal now
this
.
$refs
.
modalNote
.
hide
()
}).
catch
(
error
=>
{
this
.
$log
.
error
(
error
.
response
.
status
+
'
'
+
error
.
response
.
statusText
)
this
.
$log
.
error
(
error
.
response
)
alert
(
'
Error: could not update the note. See console for details.
'
)
submit
(
event
,
updatemode
)
{
// prevent the modal from closing automatically on click
event
.
preventDefault
()
// backup the note contents
this
.
backuptitle
=
this
.
note
.
title
this
.
backupsummary
=
this
.
note
.
summary
this
.
backupcontent
=
this
.
note
.
content
this
.
backuphost
=
this
.
note
.
host
// now set the new contents
this
.
note
.
title
=
this
.
title
this
.
note
.
summary
=
this
.
summary
this
.
note
.
content
=
this
.
content
this
.
note
.
host
=
this
.
host_selected
// for new notes we need to set some extras that are not in the UI yet
if
(
updatemode
===
SUBMIT_NEW
)
{
this
.
note
.
show
=
this
.
selectedShow
.
id
this
.
note
.
timeslot
=
this
.
timeslotID
this
.
note
.
slug
=
this
.
slug
this
.
note
.
ppoi
=
'
(0.5,0.5)
'
// TODO: implement
this
.
note
.
height
=
null
// TODO: implement
this
.
note
.
width
=
null
// TODO: implement
this
.
note
.
image
=
null
// TODO: implement
this
.
note
.
status
=
1
// TODO: implement
this
.
note
.
start
=
''
// TODO: implement
this
.
note
.
cba_id
=
null
// TODO: implement
this
.
note
.
audio_url
=
''
// TODO: implement
}
let
modal
=
this
.
$refs
.
modalNote
this
.
$store
.
dispatch
(
'
shows/submitNote
'
,
{
update
:
updatemode
,
id
:
this
.
selectedShow
.
id
,
scheduleID
:
this
.
scheduleID
,
timeslotID
:
this
.
timeslotID
,
note
:
this
.
note
,
callback
:
()
=>
{
modal
.
hide
()
},
callbackCancel
:
()
=>
{
// as there was an error saving the show, we have to make sure
// to restore the initial values of the note object
this
.
note
.
title
=
this
.
backuptitle
this
.
note
.
summary
=
this
.
backupsummary
this
.
note
.
content
=
this
.
backupcontent
this
.
note
.
host
=
this
.
backuphost
if
(
updatemode
===
SUBMIT_NEW
)
{
this
.
note
.
start
=
undefined
}
// and we leave the modal open, so no call to its .hide function here
})
}
})
},
update
(
event
)
{
// only try to save if anything has changed
if
(
this
.
title
!==
this
.
note
.
title
||
this
.
summary
!==
this
.
note
.
summary
||
this
.
content
!==
this
.
note
.
content
||
this
.
host_selected
!==
this
.
note
.
host
)
{
this
.
submit
(
event
,
SUBMIT_UPDATE
)
}
// if nothing was changed, just close the modal
}
else
{
else
{
this
.
$refs
.
modalNote
.
hide
()
}
},
new
(
event
)
{
// title and content are necessary
if
(
this
.
title
.
trim
()
===
''
||
this
.
content
.
trim
()
===
''
)
{
if
(
this
.
title
.
trim
()
===
''
||
this
.
content
.
trim
()
===
''
||
this
.
host_selected
===
null
)
{
event
.
preventDefault
()
// TODO: make this nicer UI-wise (red text annotations next to input fields instead of simple alert)
alert
(
'
Please provide at least a title and some content
.
'
)
alert
(
'
Please provide at least a title and some content
and choose a host!
'
)
}
else
{
// prevent the modal from closing automatically on click
event
.
preventDefault
()
// prepare the new note
this
.
note
=
{
show
:
this
.
selectedShow
.
id
,
timeslot
:
this
.
timeslotID
,
host
:
this
.
host_selected
,
title
:
this
.
title
,
slug
:
this
.
slug
,
summary
:
this
.
summary
,
content
:
this
.
content
,
ppoi
:
'
(0.5,0.5)
'
,
// TODO: implement
height
:
null
,
// TODO: implement
width
:
null
,
// TODO: implement
image
:
null
,
// TODO: implement
status
:
1
,
// TODO: implement
start
:
''
,
// TODO: implement
cba_id
:
null
,
// TODO: implement
audio_url
:
''
// TODO: implement
}
let
modal
=
this
.
$refs
.
modalNote
this
.
$store
.
dispatch
(
'
shows/submitNote
'
,
{
id
:
this
.
selectedShow
.
id
,
scheduleID
:
this
.
scheduleID
,
timeslotID
:
this
.
timeslotID
,
note
:
this
.
note
,
callback
:
()
=>
{
modal
.
hide
()
},
callbackCancel
:
()
=>
{
// as there was an error saving the show, we have to make sure
// to restore the initial values of the note object
this
.
note
.
title
=
this
.
backuptitle
this
.
note
.
summary
=
this
.
backupsummary
this
.
note
.
content
=
this
.
backupcontent
// and we have to set this back to undefined so next time we edit it
// it will still be treated as a new note and not an existing one to update
this
.
note
.
start
=
undefined
// and we leave the modal open, so no call to its .hide function here
}
})
this
.
submit
(
event
,
SUBMIT_NEW
)
}
},
saveNote
(
event
)
{
if
(
typeof
this
.
note
.
start
===
'
undefined
'
)
{
this
.
new
(
event
)
}
else
{
this
.
update
(
event
)
}
if
(
this
.
note
.
start
===
undefined
)
{
this
.
new
(
event
)
}
else
{
this
.
update
(
event
)
}
},
openModal
(
note
,
timeslotID
,
scheduleID
)
{
...
...
@@ -235,7 +209,7 @@ export default {
// should the field be empty by default or filled with the first host of the show?
this
.
host_selected
=
null
}
else
{
this
.
note
=
note
this
.
note
=
{...
note
}
this
.
title
=
this
.
note
.
title
this
.
summary
=
this
.
note
.
summary
this
.
content
=
this
.
note
.
content
...
...
src/store/modules/shows.js
View file @
ac07d7f7
...
...
@@ -105,6 +105,10 @@ const mutations = {
addNote
(
state
,
note
)
{
state
.
notes
.
push
(
note
)
},
setNote
(
state
,
note
)
{
let
index
=
state
.
notes
.
findIndex
(
n
=>
n
.
id
===
note
.
id
)
state
.
notes
.
splice
(
index
,
1
,
note
)
},
setName
(
state
,
data
)
{
let
index
=
state
.
shows
.
findIndex
(
s
=>
s
.
id
===
data
.
id
)
...
...
@@ -270,15 +274,27 @@ const actions = {
'
/schedules/
'
+
data
.
scheduleID
+
'
/timeslots/
'
+
data
.
timeslotID
+
'
/note/
'
axios
.
post
(
uri
,
data
.
note
,
{
if
(
data
.
update
)
{
uri
+=
data
.
note
.
id
+
'
/
'
}
let
method
=
data
.
update
?
'
put
'
:
'
post
'
axios
.
request
({
url
:
uri
,
method
:
method
,
data
:
data
.
note
,
withCredentials
:
true
,
responseType
:
'
json
'
,
// we need this explicitly here, as it does not seem to work automagically as in GET and PUT requests
headers
:
{
'
Authorization
'
:
'
Bearer
'
+
ctx
.
rootState
.
auth
.
user
.
access_token
}
}).
then
(
response
=>
{
ctx
.
commit
(
'
addNote
'
,
response
.
data
)
if
(
data
.
update
)
{
ctx
.
commit
(
'
setNote
'
,
response
.
data
)
}
else
{
ctx
.
commit
(
'
addNote
'
,
response
.
data
)
}
if
(
data
&&
typeof
(
data
.
callback
)
===
'
function
'
)
{
data
.
callback
(
response
)
}
}).
catch
(
error
=>
{
handleApiError
(
this
,
error
,
'
could not add new note
'
)
let
msg
=
data
.
update
?
'
could not update note
'
:
'
could not add new note
'
handleApiError
(
this
,
error
,
msg
)
if
(
data
&&
typeof
(
data
.
callbackCancel
)
===
'
function
'
)
{
data
.
callbackCancel
()
}
})
},
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment