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
9296781e
Commit
9296781e
authored
May 18, 2020
by
jackie / Andrea Ida Malkah Klaura
Browse files
refactor file manager show selector and jumbotron
parent
9a8aba3f
Changes
5
Hide whitespace changes
Inline
Side-by-side
src/components/FileManager.vue
View file @
9296781e
<
template
>
<b-container>
<!-- This first row is so far only used to provide a dropdown for
choosing one of the loaded shows (which the user has access to) -->
<b-row>
<b-col>
<h3>
Dateien und Playlists
</h3>
</b-col>
<b-col
align=
"right"
>
<b-dropdown
id=
"ddshows"
text=
"Sendereihe auswählen"
variant=
"info"
>
<b-dropdown-item
v-for=
"(show, index) in shows"
:key=
"show.id"
@
click=
"switchShow(index)"
>
{{
show
.
name
}}
</b-dropdown-item>
</b-dropdown>
</b-col>
</b-row>
<show-selector
title=
"Files & playlists"
/>
<hr>
<!-- The jumbotron is used to display the name and short description of the
currently selected show and let the user choose between editing files and
playlists -->
<b-jumbotron>
<template
slot=
"header"
>
<span
v-if=
"loaded.shows"
>
{{
shows
[
currentShow
].
name
}}
</span>
<span
v-else
>
Shows are being loaded
</span>
</
template
>
<
template
slot=
"lead"
>
<span
v-if=
"loaded.shows"
>
{{
shows
[
currentShow
].
short_description
}}
</span>
</
template
>
<hr>
<div
align=
"center"
>
<b-button-group>
<b-button
size=
"lg"
:variant=
"button.files"
@
click=
"switchMode('files')"
>
Files
</b-button>
<b-button
size=
"lg"
:variant=
"button.playlists"
@
click=
"switchMode('playlists')"
>
Playlists
</b-button>
</b-button-group>
</div>
</b-jumbotron>
<jumbotron
/>
<!-- All the UI for uploading and editing files is only shown if the user
choose to edit files in the jumbotron above -->
...
...
@@ -628,11 +575,15 @@ import axios from 'axios'
import
filesize
from
'
filesize
'
import
prettyDate
from
'
../mixins/prettyDate
'
import
modalFileManagerLog
from
'
./FileManagerModalLog.vue
'
import
showSelector
from
'
./ShowSelector.vue
'
import
jumbotron
from
'
./filemanager/Jumbotron.vue
'
export
default
{
// include the modal for displaying file import logs
components
:
{
'
app-modalFileManagerLog
'
:
modalFileManagerLog
'
app-modalFileManagerLog
'
:
modalFileManagerLog
,
'
show-selector
'
:
showSelector
,
'
jumbotron
'
:
jumbotron
,
},
// generic functions that we want to use from our mixins folder
...
...
src/components/ShowSelector.vue
0 → 100644
View file @
9296781e
<
template
>
<b-row>
<b-col>
<h3>
{{
title
}}
</h3>
</b-col>
<b-col
align=
"right"
>
<b-dropdown
id=
"ddshows"
text=
"Sendereihe auswählen"
variant=
"info"
>
<b-dropdown-item
v-for=
"(show, index) in shows"
:key=
"show.id"
@
click=
"switchShow(index)"
>
{{
show
.
name
}}
</b-dropdown-item>
</b-dropdown>
</b-col>
</b-row>
</
template
>
<
script
>
import
{
mapGetters
}
from
'
vuex
'
export
default
{
props
:
{
title
:
{
type
:
String
,
default
:
'
Unlabeled component title
'
},
},
computed
:
{
loaded
()
{
return
{
shows
:
this
.
$store
.
state
.
shows
.
loaded
.
shows
,
}
},
...
mapGetters
({
shows
:
'
shows/shows
'
,
selectedShow
:
'
shows/selectedShow
'
,
})
},
methods
:
{
switchShow
:
function
(
index
)
{
this
.
$store
.
commit
(
'
shows/switchShow
'
,
index
)
},
}
}
</
script
>
src/components/filemanager/Jumbotron.vue
0 → 100644
View file @
9296781e
<
template
>
<b-jumbotron>
<!-- The jumbotron is used to display the name and short description of the
currently selected show and let the user choose between editing files and
playlists -->
<template
slot=
"header"
>
<span
v-if=
"loaded.shows"
>
{{
selectedShow
.
name
}}
</span>
<span
v-else
>
Shows are being loaded
</span>
</
template
>
<
template
slot=
"lead"
>
<span
v-if=
"loaded.shows"
>
{{
selectedShow
.
short_description
}}
</span>
</
template
>
<hr>
<div
align=
"center"
>
<b-button-group>
<b-button
size=
"lg"
:variant=
"button.files"
@
click=
"$store.commit('setFileManagerMode', 'files')"
>
Files
</b-button>
<b-button
size=
"lg"
:variant=
"button.playlists"
@
click=
"$store.commit('setFileManagerMode', 'playlists')"
>
Playlists
</b-button>
</b-button-group>
</div>
</b-jumbotron>
</template>
<
script
>
import
{
mapGetters
}
from
'
vuex
'
export
default
{
computed
:
{
loaded
()
{
return
{
shows
:
this
.
$store
.
state
.
shows
.
loaded
.
shows
,
}
},
button
()
{
return
{
files
:
this
.
mode
===
'
files
'
?
'
info
'
:
'
outline-info
'
,
playlists
:
this
.
mode
===
'
playlists
'
?
'
info
'
:
'
outline-info
'
,
}
},
...
mapGetters
({
selectedShow
:
'
shows/selectedShow
'
,
mode
:
'
fileManagerMode
'
})
}
}
</
script
>
src/store/index.js
View file @
9296781e
...
...
@@ -10,23 +10,19 @@ Vue.use(Vuex)
const
debug
=
process
.
env
.
NODE_ENV
!==
'
production
'
const
state
=
{
items
:
[]
,
fileManagerMode
:
'
files
'
,
}
const
getters
=
{
items
:
state
=>
state
.
items
,
itemCount
:
state
=>
state
.
items
.
length
,
fileManagerMode
:
state
=>
state
.
fileManagerMode
}
const
actions
=
{
addItem
({
commit
},
item
)
{
commit
(
'
addItem
'
,
item
)
}
}
const
mutations
=
{
addItem
(
state
,
item
)
{
state
.
items
.
push
(
item
)
setFileManagerMode
(
state
,
mode
)
{
state
.
fileManagerMode
=
mode
}
}
...
...
src/store/modules/playlists.js
View file @
9296781e
const
state
=
{
items
:
[],
}
const
getters
=
{
items
:
state
=>
state
.
items
,
itemCount
:
state
=>
state
.
items
.
length
,
}
const
actions
=
{
addItem
({
commit
},
item
)
{
commit
(
'
addItem
'
,
item
)
}
}
const
mutations
=
{
addItem
(
state
,
item
)
{
state
.
items
.
push
(
item
)
}
}
export
default
{
...
...
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