Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Sign in
Toggle navigation
C
cms
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Pedro-dev_2
cms
Commits
41ddd740
Commit
41ddd740
authored
May 19, 2021
by
PDuarte
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
*plalists curd completed
* starting assets
parent
267ca079
Changes
19
Show whitespace changes
Inline
Side-by-side
Showing
19 changed files
with
1306 additions
and
187 deletions
+1306
-187
rootReducer.js
src/redux/reducers/rootReducer.js
+3
-1
index.js
src/views/assets/index.js
+0
-0
index.js
src/views/assets/projectassets/add/index.js
+76
-0
index.js
src/views/assets/projectassets/card/index.js
+303
-0
manageassets.js
src/views/assets/projectassets/card/manageassets.js
+50
-32
data.js
src/views/assets/projectassets/data.js
+290
-0
index.js
src/views/assets/projectassets/edit/index.js
+44
-0
main.js
src/views/assets/projectassets/edit/main.js
+68
-0
index.js
src/views/assets/projectassets/index.js
+30
-0
module.js
src/views/assets/projectassets/module.js
+14
-0
table.js
src/views/assets/projectassets/table.js
+31
-0
assets.js
src/views/assets/store/actions/assets.js
+100
-0
index.js
src/views/assets/store/actions/index.js
+12
-0
index.js
src/views/assets/store/reducer/index.js
+68
-0
index.js
src/views/playlists/projectplaylists/add/index.js
+8
-9
index.js
src/views/playlists/projectplaylists/card/index.js
+29
-22
manageassets.js
src/views/playlists/projectplaylists/card/manageassets.js
+178
-0
tablayoutplaylists.js
...ews/playlists/projectplaylists/card/tablayoutplaylists.js
+0
-122
main.js
src/views/playlists/projectplaylists/edit/main.js
+2
-1
No files found.
src/redux/reducers/rootReducer.js
View file @
41ddd740
...
...
@@ -18,6 +18,7 @@ import projectsettings from '@src/views/settings/store/reducer'
import
screens
from
'@src/views/screens/store/reducer'
import
menupages
from
'@src/views/menupages/store/reducer'
import
playlists
from
'@src/views/playlists/store/reducer'
import
assets
from
'@src/views/assets/store/reducer'
const
rootReducer
=
combineReducers
({
auth
,
...
...
@@ -34,7 +35,8 @@ const rootReducer = combineReducers({
screens
,
projectsettings
,
menupages
,
playlists
playlists
,
assets
})
export
default
rootReducer
src/views/assets/index.js
0 → 100644
View file @
41ddd740
src/views/assets/projectassets/add/index.js
0 → 100644
View file @
41ddd740
// ** React Imports
import
{
Fragment
}
from
'react'
import
{
Link
}
from
'react-router-dom'
// ** Store & Actions
import
{
addplaylist
}
from
'../../store/actions'
import
{
useDispatch
}
from
'react-redux'
// ** Custom Components
import
Breadcrumbs
from
'@components/breadcrumbs'
// ** Third Party Components
import
{
Row
,
Col
}
from
'reactstrap'
// module settings
import
moduleSettings
from
'../module'
// ** Tables
import
ElementCard
from
'../card'
// ** Styles
import
'@styles/react/libs/tables/react-dataTable-component.scss'
const
Tables
=
()
=>
{
const
dispatch
=
useDispatch
()
const
onSubmitHandler
=
values
=>
{
dispatch
(
addplaylist
({
idproject
:
values
.
idproject
,
title
:
values
.
title
,
layout_id
:
values
.
layout_id
,
dynamic
:
values
.
dynamic
,
special
:
values
.
special
,
special_id
:
values
.
special_id
}
)
)
}
return
(
<
Fragment
>
<
Breadcrumbs
breadCrumbTitle
=
'Playlists'
breadCrumbParent
=
'Playlists'
breadCrumbActive
=
{
moduleSettings
.
mainTitle
}
/
>
<
Row
>
<
Col
sm
=
'12'
>
<
Link
to
=
{
moduleSettings
.
baseURL
}
>
Back
to
{
moduleSettings
.
mainTitle
}
<
/Link
>
<
/Col
>
<
/Row
>
<
Row
>
<
Col
sm
=
'12'
>
<
div
className
=
"card"
>
<
div
className
=
"card-header"
>
<
h4
className
=
"card-title"
>
New
{
moduleSettings
.
mainTitleSingle
}
<
/h4
>
<
/div
>
<
div
className
=
"card-body"
>
<
ElementCard
selectedElement
=
{{
id
:
'<generate>'
,
idproject
:
'2'
,
system_name
:
''
,
last_seen
:
''
,
layout_page_id
:
''
,
type
:
''
,
display
:
''
,
pagetypeid
:
''
,
order
:
'0'
,
menu_page_layouts
:
[]
}}
onSubmitHandler
=
{
onSubmitHandler
}
/
>
<
/div
>
<
/div
>
<
/Col
>
<
/Row
>
<
/Fragment
>
)
}
export
default
Tables
src/views/assets/projectassets/card/index.js
0 → 100644
View file @
41ddd740
// ** React Imports
import
{
useState
,
useEffect
,
Fragment
}
from
'react'
import
{
useSelector
,
useDispatch
}
from
'react-redux'
import
{
toast
}
from
'react-toastify'
import
Avatar
from
'@components/avatar'
import
{
Media
,
Button
,
Label
,
Form
,
FormGroup
,
Input
,
Table
,
CustomInput
,
Card
,
CardBody
,
Row
,
Col
,
Nav
,
NavItem
,
NavLink
,
TabContent
,
TabPane
,
Alert
,
CardHeader
,
CardTitle
,
CardText
}
from
'reactstrap'
import
{
isObjEmpty
}
from
'@utils'
import
{
Bell
,
Check
,
X
,
AlertTriangle
,
Info
}
from
'react-feather'
import
ManageAssets
from
'./manageassets'
// import TabLayoutPlaylist from './tablayoutplaylists'
// ** Store & Actions
import
{
resetResults
}
from
'../../store/actions'
import
{
getData_pagetypes
}
from
'../../../settings/store/actions'
import
{
getData_layoutPlaylists
}
from
'../../../screens/store/actions'
import
{
useForm
}
from
'react-hook-form'
import
classnames
from
'classnames'
import
Swal
from
'sweetalert2'
import
withReactContent
from
'sweetalert2-react-content'
// ** Styles
import
'@styles/react/apps/app-users.scss'
const
SuccessProgressToast
=
()
=>
(
<
Fragment
>
<
div
className
=
'toastify-header'
>
<
div
className
=
'title-wrapper'
>
<
Avatar
size
=
'sm'
color
=
'success'
icon
=
{
<
Check
size
=
{
12
}
/>} /
>
<
h6
className
=
'toast-title'
>
Saved
!<
/h6
>
<
/div
>
<
small
className
=
'text-muted'
><
/small
>
<
/div
>
<
div
className
=
'toastify-body'
>
<
span
role
=
'img'
aria
-
label
=
'toast-text'
>
👋
Good
job
.
<
/span
>
<
/div
>
<
/Fragment
>
)
const
ElementCard
=
({
selectedElement
,
onSubmitHandler
})
=>
{
const
store
=
useSelector
(
state
=>
state
.
projectsettings
)
const
[
PlatformName
,
setPlatformName
]
=
useState
(
'Web'
)
const
MySwal
=
withReactContent
(
Swal
)
const
handleError
=
(
text
)
=>
{
return
MySwal
.
fire
({
title
:
'Error!'
,
text
,
icon
:
'error'
,
customClass
:
{
confirmButton
:
'btn btn-primary'
},
buttonsStyling
:
false
})
}
const
[
dataElement
,
setElementData
]
=
useState
(
null
),
{
register
,
errors
,
handleSubmit
}
=
useForm
(),
settingStore
=
useSelector
(
state
=>
state
.
projectsettings
),
screensStore
=
useSelector
(
state
=>
state
.
screens
),
[
pagetypes
,
setPagetypes
]
=
useState
(
null
),
[
layoutplaylists
,
setLayoutplaylists
]
=
useState
(
null
),
[
activeTab
,
setActiveTab
]
=
useState
(
0
),
//
toggle
=
tab
=>
setActiveTab
(
tab
),
dispatch
=
useDispatch
(),
notifySuccessProgress
=
()
=>
toast
.
success
(
<
SuccessProgressToast
/>
),
onSubmit
=
values
=>
{
if
(
isObjEmpty
(
errors
))
{
const
submitElement
=
{
...
dataElement
,
idproject
:
values
.
idproject
,
title
:
values
.
title
,
layout_id
:
values
.
layout_id
,
dynamic
:
values
.
dynamic
,
special
:
values
.
special
,
special_id
:
values
.
special_id
}
onSubmitHandler
(
submitElement
)
}
},
handleAddBlock
=
()
=>
{
if
(
!
dataElement
)
return
const
newData
=
dataElement
newData
.
menu_page_layouts
.
push
({
id
:
'<generated>'
,
layout_id
:
null
,
order
:
1
,
page_id
:
dataElement
.
id
})
setElementData
(
newData
)
setActiveTab
(
newData
.
menu_page_layouts
.
length
-
1
)
console
.
log
(
newData
)
}
useEffect
(()
=>
{
if
(
selectedElement
!==
null
||
(
selectedElement
!==
null
&&
dataElement
!==
null
&&
selectedElement
.
id
!==
dataElement
.
id
))
{
return
setElementData
(
selectedElement
)
}
},
[
selectedElement
])
useEffect
(()
=>
{
if
(
store
.
errorMsg
!==
''
)
{
handleError
(
store
.
errorMsg
)
dispatch
(
resetResults
())
}
},
[
store
.
errorMsg
])
useEffect
(()
=>
{
if
(
store
.
saveSucces
)
{
notifySuccessProgress
()
dispatch
(
resetResults
())
}
},
[
store
.
saveSucces
])
// populate page types
useEffect
(()
=>
{
if
(
!
settingStore
.
allDataPagetypes
||
settingStore
.
allDataPagetypes
.
length
<
1
)
{
dispatch
(
getData_pagetypes
({
start
:
1
,
length
:
1000
,
q
:
null
}))
}
},
[
dispatch
])
useEffect
(()
=>
{
setPagetypes
(
settingStore
.
allDataPagetypes
)
},
[
settingStore
.
allDataPagetypes
])
// populate layout menus
useEffect
(()
=>
{
if
(
!
screensStore
.
allDataLayoutPlaylists
||
screensStore
.
allDataLayoutPlaylists
.
length
<
1
)
{
dispatch
(
getData_layoutPlaylists
({
start
:
1
,
length
:
1000
,
q
:
null
}))
}
},
[
dispatch
])
useEffect
(()
=>
{
setLayoutplaylists
(
screensStore
.
allDataLayoutPlaylists
)
},
[
screensStore
.
allDataLayoutPlaylists
])
return
(
<
Fragment
>
<
Form
onSubmit
=
{
handleSubmit
(
onSubmit
)}
>
<
Row
>
<
Col
md
=
'4'
sm
=
'12'
>
<
FormGroup
>
<
Label
for
=
'id'
>
ID
<
/Label
>
<
Input
readOnly
=
{
true
}
type
=
'text'
name
=
'id'
id
=
'id'
placeholder
=
'id'
defaultValue
=
{
dataElement
&&
dataElement
.
id
}
/
>
<
/FormGroup
>
<
/Col
>
<
Col
md
=
'4'
sm
=
'12'
>
<
FormGroup
>
<
Label
for
=
'name'
>
Project
ID
<
/Label
>
<
Input
readOnly
=
{
true
}
type
=
'text'
name
=
'idproject'
id
=
'idproject'
innerRef
=
{
register
({
required
:
true
})}
placeholder
=
'idproject'
defaultValue
=
{
dataElement
&&
dataElement
.
idproject
}
className
=
{
classnames
({
'is-invalid'
:
errors
[
'idproject'
]
})}
/
>
<
/FormGroup
>
<
/Col
>
<
Col
md
=
'4'
sm
=
'12'
>
<
FormGroup
>
<
Label
for
=
'title'
>
Title
<
/Label
>
<
Input
type
=
'text'
name
=
'title'
id
=
'title'
innerRef
=
{
register
({
required
:
true
})}
placeholder
=
'title'
defaultValue
=
{
dataElement
&&
dataElement
.
title
}
className
=
{
classnames
({
'is-invalid'
:
errors
[
'title'
]
})}
/
>
<
/FormGroup
>
<
/Col
>
<
Col
md
=
'4'
sm
=
'12'
>
<
FormGroup
>
<
Label
for
=
'layout_id'
>
Layout
Playlist
<
/Label
>
<
Input
type
=
'select'
name
=
'layout_id'
id
=
'layout_id'
innerRef
=
{
register
({
required
:
true
})}
placeholder
=
'layout_id'
defaultValue
=
{
dataElement
&&
dataElement
.
layout_id
}
className
=
{
classnames
({
'is-invalid'
:
errors
[
'layout_id'
]
})}
>
{
!!
layoutplaylists
?
layoutplaylists
.
map
(
option
=>
{
return
<
option
key
=
{
option
.
id
}
selected
=
{
option
.
id
===
dataElement
.
layout_id
?
option
.
id
:
''
}
value
=
{
option
.
id
}
>
{
option
.
name
}
<
/option
>
})
:
<
option
>
Loading
<
/option>
}
<
/Input
>
<
/FormGroup
>
<
/Col
>
<
Col
md
=
'4'
sm
=
'12'
>
<
FormGroup
>
<
Label
for
=
'dynamic'
>
dynamic
<
/Label
>
<
Input
type
=
'select'
name
=
'dynamic'
id
=
'dynamic'
innerRef
=
{
register
({
required
:
true
})}
placeholder
=
'dynamic'
defaultValue
=
{
dataElement
&&
dataElement
.
dynamic
}
className
=
{
classnames
({
'is-invalid'
:
errors
[
'dynamic'
]
})}
>
<
option
value
=
'0'
>
No
<
/option
>
<
option
value
=
'1'
>
Yes
<
/option
>
<
/Input>
<
/FormGroup
>
<
/Col
>
<
Col
md
=
'4'
sm
=
'12'
>
<
FormGroup
>
<
Label
for
=
'special'
>
special
<
/Label
>
<
Input
type
=
'select'
name
=
'special'
id
=
'special'
innerRef
=
{
register
({
required
:
true
})}
placeholder
=
'special'
defaultValue
=
{
dataElement
&&
dataElement
.
special
}
className
=
{
classnames
({
'is-invalid'
:
errors
[
'special'
]
})}
>
<
option
value
=
'0'
>
No
<
/option
>
<
option
value
=
'1'
>
Yes
<
/option>
<
/Input
>
<
/FormGroup
>
<
/Col
>
<
Col
md
=
'4'
sm
=
'12'
>
<
FormGroup
>
<
Label
for
=
'special_id'
>
special_id
<
/Label
>
<
Input
type
=
'text'
name
=
'special_id'
id
=
'special_id'
innerRef
=
{
register
({
required
:
false
})}
placeholder
=
'special_id'
defaultValue
=
{
dataElement
&&
dataElement
.
special_id
}
className
=
{
classnames
({
'is-invalid'
:
errors
[
'special_id'
]
})}
/
>
<
/FormGroup
>
<
/Col
>
<
/Row
>
<
Row
className
=
'app-user-edit'
>
<
Col
sm
=
'12'
>
<
ManageAssets
dataElement
=
{
dataElement
&&
dataElement
.
assets
}
/>
/<
/Col>
<
/Row
>
<
Row
className
=
'app-user-edit'
>
<
Col
className
=
'd-flex flex-sm-row flex-column mt-2'
sm
=
'12'
>
<
Button
.
Ripple
className
=
'mb-1 mb-sm-0 mr-0 mr-sm-1'
type
=
'submit'
color
=
'primary'
>
Save
Changes
<
/Button.Ripple
>
{
/* <Button.Ripple color='secondary' outline onClick={() => dispatch(getPlatform(selectedElement.id))} >
Reset
</Button.Ripple> */
}
<
/Col
>
<
/Row
>
<
/Form
>
<
/Fragment
>
)
}
export
default
ElementCard
\ No newline at end of file
src/views/
playlists/projectplaylists/card/manageplaylist
.js
→
src/views/
assets/projectassets/card/manageassets
.js
View file @
41ddd740
...
...
@@ -6,7 +6,7 @@ import { Row, Col, FormGroup, Label, Input, Button } from 'reactstrap'
import
{
useForm
}
from
'react-hook-form'
import
classnames
from
'classnames'
import
{
getData_menupagesplaylists
,
updatemenupages
}
from
'../../store/actions'
import
{
getData_menupagesplaylists
}
from
'../../store/actions'
import
DataTableServerSide
from
'@components/datatable'
import
{
element
}
from
'prop-types'
...
...
@@ -27,29 +27,30 @@ const serverSideColumns = [
]
const
Manage
Playlist
=
(
dataElement
)
=>
{
const
store
=
useSelector
(
state
=>
state
.
menupage
s
),
[
avaliable
Playlists
,
setavaliablePlaylis
ts
]
=
useState
([]),
[
selected
Playlists
,
setSelectedPlaylis
ts
]
=
useState
([]),
const
Manage
Assets
=
({
dataElement
}
)
=>
{
const
store
=
useSelector
(
state
=>
state
.
playlist
s
),
[
avaliable
Assets
,
setavaliableAsse
ts
]
=
useState
([]),
[
selected
Assets
,
setSelectedAsse
ts
]
=
useState
([]),
dispatch
=
useDispatch
()
const
handleAdd
=
(
value
)
=>
{
const
newValue
=
selected
Playlis
ts
.
concat
(
value
)
setSelected
Playlis
ts
(
newValue
)
const
newValue
=
selected
Asse
ts
.
concat
(
value
)
setSelected
Asse
ts
(
newValue
)
}
const
handleRemove
=
(
value
)
=>
{
const
newValue
=
selected
Playlis
ts
.
filter
(
element
=>
element
.
id
!==
value
.
id
)
setSelected
Playlis
ts
(
newValue
)
const
newValue
=
selected
Asse
ts
.
filter
(
element
=>
element
.
id
!==
value
.
id
)
setSelected
Asse
ts
(
newValue
)
}
const
getData_selected
Playlis
ts
=
(
params
)
=>
{
const
getData_selected
Asse
ts
=
(
params
)
=>
{
return
(
dispatch
)
=>
{
if
(
params
.
q
===
''
)
{
setSelectedPlaylists
(
dataElement
.
dataElement
)
if
(
dataElement
===
null
)
return
setSelectedAssets
(
dataElement
)
return
}
const
newValue
=
dataElement
.
dataElement
.
filter
(
element
=>
element
.
title
.
includes
(
params
.
q
))
setSelected
Playlis
ts
(
newValue
)
const
newValue
=
dataElement
.
filter
(
element
=>
element
.
title
.
includes
(
params
.
q
))
setSelected
Asse
ts
(
newValue
)
}
}
...
...
@@ -96,44 +97,61 @@ const ManagePlaylist = (dataElement) => {
}
]
const
getData_avaliableAssets
=
(
params
)
=>
{
return
(
dispatch
)
=>
{
if
(
selectedAssets
===
null
)
return
const
Ids
=
selectedAssets
.
map
(
elem
=>
elem
.
id
),
// tabAssets = store.allDataAssets.filter(element => !Ids.includes(element.id))
tabAssets
=
[]
if
(
params
.
q
===
null
||
params
.
q
===
''
)
{
setavaliableAssets
(
tabAssets
)
return
}
const
newValue
=
tabAssets
.
filter
(
element
=>
element
.
title
.
includes
(
params
.
q
))
setavaliableAssets
(
newValue
)
}
}
useEffect
(()
=>
{
const
Ids
=
selected
Playlis
ts
.
map
(
elem
=>
elem
.
id
)
const
filtered
=
store
.
allData
MenuPage
s
.
filter
(
element
=>
!
Ids
.
includes
(
element
.
id
))
setavaliable
Playlis
ts
(
filtered
)
},
[
store
.
allData
MenuPage
s
])
const
Ids
=
selected
Asse
ts
.
map
(
elem
=>
elem
.
id
)
const
filtered
=
store
.
allData
Playlist
s
.
filter
(
element
=>
!
Ids
.
includes
(
element
.
id
))
setavaliable
Asse
ts
(
filtered
)
},
[
store
.
allData
Playlist
s
])
useEffect
(()
=>
{
const
Ids
=
selected
Playlis
ts
.
map
(
elem
=>
elem
.
id
)
const
filtered
=
store
.
allData
MenuPage
s
.
filter
(
element
=>
!
Ids
.
includes
(
element
.
id
))
setavaliable
Playlis
ts
(
filtered
)
},
[
selected
Playlis
ts
])
const
Ids
=
selected
Asse
ts
.
map
(
elem
=>
elem
.
id
)
const
filtered
=
store
.
allData
Playlist
s
.
filter
(
element
=>
!
Ids
.
includes
(
element
.
id
))
setavaliable
Asse
ts
(
filtered
)
},
[
selected
Asse
ts
])
useEffect
(()
=>
{
if
(
dataElement
!==
null
&&
dataElement
.
dataElement
!==
null
)
{
setSelectedPlaylists
(
dataElement
.
dataElement
)
if
(
dataElement
!==
null
)
{
setSelectedAssets
(
dataElement
)
}
},
[
dataElement
])
return
<
div
className
=
"card"
>
<
div
className
=
"card-header"
>
<
h4
className
=
"card-title"
>
playlist
<
/h4
>
<
h4
className
=
"card-title"
>
Assets
<
/h4
>
<
/div
>
<
div
className
=
"card-body"
>
<
Row
>
<
Col
sm
=
'6'
>
<
DataTableServerSide
cardTitle
=
'Content'
allData
=
{
selected
Playlis
ts
}
getData
=
{
getData_selected
Playlis
ts
}
allData
=
{
selected
Asse
ts
}
getData
=
{
getData_selected
Asse
ts
}
serverSideColumns
=
{
serverSideColumnsLeft
}
// linkAddButton={`/add`}
total
=
{
selected
Playlis
ts
.
length
}
total
=
{
selected
Asse
ts
.
length
}
/
>
<
/Col
>
<
Col
sm
=
'6'
>
<
DataTableServerSide
cardTitle
=
'List to add'
allData
=
{
avaliable
Playlis
ts
}
getData
=
{
getData_
menupagesplaylis
ts
}
allData
=
{
avaliable
Asse
ts
}
getData
=
{
getData_
avaliableAsse
ts
}
serverSideColumns
=
{
serverSideColumnsRight
}
// linkAddButton={`/add`}
total
=
{
store
.
totalMenuPages
}
...
...
@@ -145,4 +163,4 @@ const ManagePlaylist = (dataElement) => {
<
/div>
}
export
default
ManagePlaylist
\ No newline at end of file
export
default
ManageAssets
\ No newline at end of file
src/views/assets/projectassets/data.js
0 → 100644
View file @
41ddd740
// ** React Imports
import
{
Link
}
from
'react-router-dom'
// import { cleanLayoutMenu } from '../store/actions'
import
{
store
}
from
'@store/storeConfig/store'
// ** Custom Components
import
Avatar
from
'@components/avatar'
// module settings
import
moduleSettings
from
'./module'
// ** Third Party Components
import
axios
from
'axios'
import
{
MoreVertical
,
Edit
,
FileText
,
Archive
,
Trash
}
from
'react-feather'
import
{
Badge
,
UncontrolledDropdown
,
DropdownToggle
,
DropdownMenu
,
DropdownItem
}
from
'reactstrap'
// ** Vars
const
states
=
[
'success'
,
'danger'
,
'warning'
,
'info'
,
'dark'
,
'primary'
,
'secondary'
]
const
status
=
{
1
:
{
title
:
'Current'
,
color
:
'light-primary'
},
2
:
{
title
:
'Professional'
,
color
:
'light-success'
},
3
:
{
title
:
'Rejected'
,
color
:
'light-danger'
},
4
:
{
title
:
'Resigned'
,
color
:
'light-warning'
},
5
:
{
title
:
'Applied'
,
color
:
'light-info'
}
}
export
let
data
// ** Get initial Data
axios
.
get
(
'/api/datatables/initial-data'
).
then
(
response
=>
{
data
=
response
.
data
})
// ** Table Zero Config Column
export
const
basicColumns
=
[
{
name
:
'ID'
,
selector
:
'id'
,
sortable
:
true
,
maxWidth
:
'100px'
},
{
name
:
'Name'
,
selector
:
'name'
,
sortable
:
true
,
minWidth
:
'225px'
},
{
name
:
'Email'
,
selector
:
'email'
,
sortable
:
true
,
minWidth
:
'310px'
},
{
name
:
'Position'
,
selector
:
'post'
,
sortable
:
true
,
minWidth
:
'250px'
},
{
name
:
'Age'
,
selector
:
'age'
,
sortable
:
true
,
minWidth
:
'100px'
},
{
name
:
'Salary'
,
selector
:
'salary'
,
sortable
:
true
,
minWidth
:
'175px'
}
]
// ** Expandable table component
const
ExpandableTable
=
({
data
})
=>
{
return
(
<
div
className
=
'expandable-content p-2'
>
<
p
>
<
span
className
=
'font-weight-bold'
>
City
:
<
/span> {data.city
}
<
/p
>
<
p
>
<
span
className
=
'font-weight-bold'
>
Experience
:
<
/span> {data.experience
}
<
/p
>
<
p
className
=
'm-0'
>
<
span
className
=
'font-weight-bold'
>
Post
:
<
/span> {data.post
}
<
/p
>
<
/div
>
)
}
// ** Table Common Column
export
const
columns
=
[
{
name
:
'Name'
,
selector
:
'name'
,
sortable
:
true
,
minWidth
:
'250px'
,
cell
:
row
=>
(
<
div
className
=
'd-flex align-items-center'
>
{
row
.
avatar
===
''
?
(
<
Avatar
color
=
{
`light-
${
states
[
row
.
status
]}
`
}
content
=
{
row
.
full_name
}
initials
/>
)
:
(
<
Avatar
img
=
{
require
(
`@src/assets/images/portrait/small/avatar-s-
${
row
.
avatar
}
`
).
default
}
/
>
)}
<
div
className
=
'user-info text-truncate ml-1'
>
<
span
className
=
'd-block font-weight-bold text-truncate'
>
{
row
.
full_name
}
<
/span
>
<
small
>
{
row
.
post
}
<
/small
>
<
/div
>
<
/div
>
)
},
{
name
:
'Status'
,
selector
:
'status'
,
sortable
:
true
,
minWidth
:
'150px'
,
cell
:
row
=>
{
return
(
<
Badge
color
=
{
status
[
row
.
status
].
color
}
pill
>
{
status
[
row
.
status
].
title
}
<
/Badge
>
)
}
},
{
name
:
'Actions'
,
allowOverflow
:
true
,
cell
:
row
=>
{
return
(
<
div
className
=
'd-flex'
>
<
UncontrolledDropdown
>
<
DropdownToggle
className
=
'pr-1'
tag
=
'span'
>
<
MoreVertical
size
=
{
15
}
/
>
<
/DropdownToggle
>
<
DropdownMenu
right
>
<
DropdownItem
tag
=
'a'
href
=
'/'
className
=
'w-100'
onClick
=
{
e
=>
e
.
preventDefault
()}
>
<
FileText
size
=
{
15
}
/
>
<
span
className
=
'align-middle ml-50'
>
Details
<
/span
>
<
/DropdownItem
>
<
DropdownItem
tag
=
'a'
href
=
'/'
className
=
'w-100'
onClick
=
{
e
=>
e
.
preventDefault
()}
>
<
Archive
size
=
{
15
}
/
>
<
span
className
=
'align-middle ml-50'
>
Archive
<
/span
>
<
/DropdownItem
>
<
DropdownItem
tag
=
'a'
href
=
'/'
className
=
'w-100'
onClick
=
{
e
=>
e
.
preventDefault
()}
>
<
Trash
size
=
{
15
}
/
>
<
span
className
=
'align-middle ml-50'
>
Delete
<
/span
>
<
/DropdownItem
>
<
/DropdownMenu
>
<
/UncontrolledDropdown
>
<
Edit
size
=
{
15
}
/
>
<
/div
>
)
}
}
]
// ** Table Intl Column
export
const
multiLingColumns
=
[
{
name
:
'Name'
,
selector
:
'name'
,
sortable
:
true
,
minWidth
:
'200px'
},
{
name
:
'Status'
,
selector
:
'status'
,
sortable
:
true
,
minWidth
:
'150px'
,
cell
:
row
=>
{
return
(
<
Badge
color
=
{
status
[
row
.
status
].
color
}
pill
>
{
status
[
row
.
status
].
title
}
<
/Badge
>
)
}
},
{
name
:
'Actions'
,
allowOverflow
:
true
,
cell
:
row
=>
{
return
(
<
div
className
=
'd-flex'
>
<
UncontrolledDropdown
>
<
DropdownToggle
className
=
'pr-1'
tag
=
'span'
>
<
MoreVertical
size
=
{
15
}
/
>
<
/DropdownToggle
>
<
DropdownMenu
right
>
<
DropdownItem
>
<
FileText
size
=
{
15
}
/
>
<
span
className
=
'align-middle ml-50'
>
Details
<
/span
>
<
/DropdownItem
>
<
DropdownItem
>
<
Archive
size
=
{
15
}
/
>
<
span
className
=
'align-middle ml-50'
>
Archive
<
/span
>
<
/DropdownItem
>
<
DropdownItem
>
<
Trash
size
=
{
15
}
/
>
<
span
className
=
'align-middle ml-50'
>
Delete
<
/span
>
<
/DropdownItem
>
<
/DropdownMenu
>
<
/UncontrolledDropdown
>
<
Edit
size
=
{
15
}
/
>
<
/div
>
)
}
}
]
// ** Table Server Side Column
export
const
serverSideColumns
=
[
{
name
:
'ID'
,
selector
:
'id'
,
sortable
:
true
,
minWidth
:
'25px'
},
{
name
:
'Title'
,
selector
:
'title'
,
sortable
:
true
,
minWidth
:
'225px'
,
cell
:
row
=>
(
<
div
className
=
'd-flex justify-content-left align-items-center'
>
<
div
className
=
'd-flex flex-column'
>
<
Link
to
=
{
`
${
moduleSettings
.
baseURL
}
/edit/
${
row
.
id
}
`
}
className
=
'user-name text-truncate mb-0'
// onClick={() => store.dispatch(cleanLayoutMenu(row.id))}
>
<
span
className
=
'font-weight-bold'
>
{
row
.
title
}
<
/span
>
<
/Link
>
<
small
className
=
'text-truncate text-muted mb-0'
>
edit
<
/small
>
<
/div
>
<
/div
>
)
},
{
name
:
'Dynamic'
,
selector
:
'dynamic'
,
sortable
:
true
,
minWidth
:
'225px'
}
]
// ** Table Adv Search Column
export
const
advSearchColumns
=
[
{
name
:
'Name'
,
selector
:
'full_name'
,
sortable
:
true
,
minWidth
:
'200px'
},
{
name
:
'Email'
,
selector
:
'email'
,
sortable
:
true
,
minWidth
:
'250px'
},
{
name
:
'Post'
,
selector
:
'post'
,
sortable
:
true
,
minWidth
:
'250px'
},
{
name
:
'City'
,
selector
:
'city'
,
sortable
:
true
,
minWidth
:
'150px'
},
{
name
:
'Date'
,
selector
:
'start_date'
,
sortable
:
true
,
minWidth
:
'150px'
},
{
name
:
'Salary'
,
selector
:
'salary'
,
sortable
:
true
,
minWidth
:
'100px'
}
]
export
default
ExpandableTable
src/views/assets/projectassets/edit/index.js
0 → 100644
View file @
41ddd740
// ** React Imports
import
{
Fragment
}
from
'react'
import
{
Link
}
from
'react-router-dom'
// ** Custom Components
import
Breadcrumbs
from
'@components/breadcrumbs'
// ** Third Party Components
import
{
Row
,
Col
}
from
'reactstrap'
// ** Tables
import
ElementEdit
from
'./main'
// ** Styles
import
'@styles/react/libs/tables/react-dataTable-component.scss'
// module settings
import
moduleSettings
from
'../module'
const
Tables
=
()
=>
{
return
(
<
Fragment
>
<
Breadcrumbs
breadCrumbTitle
=
'Playlists'
breadCrumbParent
=
'Playlists'
breadCrumbActive
=
{
moduleSettings
.
mainTitle
}
/
>
<
Row
>
<
Col
sm
=
'12'
>
<
Link
to
=
{
moduleSettings
.
baseURL
}
>
Back
to
{
moduleSettings
.
mainTitleSingle
}
<
/Link
>
<
/Col
>
<
/Row
>
<
Row
>
<
Col
sm
=
'12'
>
<
div
className
=
"card"
>
<
div
className
=
"card-header"
>
<
h4
className
=
"card-title"
>
{
moduleSettings
.
mainTitleSingle
}
<
/h4
>
<
/div
>
<
div
className
=
"card-body"
>
<
ElementEdit
/>
<
/div
>
<
/div
>
<
/Col
>
<
/Row
>
<
/Fragment
>
)
}
export
default
Tables
src/views/assets/projectassets/edit/main.js
0 → 100644
View file @
41ddd740
import
{
useState
,
useEffect
,
Fragment
}
from
'react'
import
{
useParams
,
Link
}
from
'react-router-dom'
// ** Store & Actions
import
{
getplaylist
,
updateplaylist
}
from
'../../store/actions'
import
{
useSelector
,
useDispatch
}
from
'react-redux'
import
{
Alert
}
from
'reactstrap'
import
ElementCard
from
'../card'
// module settings
import
moduleSettings
from
'../module'
const
ElementEdit
=
()
=>
{
// ** States & Vars
const
store
=
useSelector
(
state
=>
state
.
playlists
),
[
dataElement
,
setElementData
]
=
useState
(
null
),
dispatch
=
useDispatch
(),
{
id
}
=
useParams
()
const
onSubmitHandler
=
values
=>
{
console
.
log
(
values
)
dispatch
(
updateplaylist
({
...
dataElement
,
idproject
:
values
.
idproject
,
title
:
values
.
title
,
layout_id
:
values
.
layout_id
,
dynamic
:
values
.
dynamic
,
special
:
values
.
special
,
special_id
:
values
.
special_id
})
)
}
// ** Function to get user on mount
useEffect
(()
=>
{
dispatch
(
getplaylist
(
id
))
},
[
dispatch
])
// ** Update user image on mount or change
useEffect
(()
=>
{
if
(
store
.
selectedPlaylist
!==
null
||
(
store
.
selectedPlaylist
!==
null
&&
dataElement
!==
null
&&
store
.
selectedPlaylist
.
id
!==
dataElement
.
id
))
{
return
setElementData
(
store
.
selectedPlaylist
)
}
},
[
store
.
selectedPlaylist
])
return
store
.
selectedPlaylist
!==
null
&&
store
.
selectedPlaylist
!==
undefined
?
(
<
ElementCard
selectedElement
=
{
store
.
selectedPlaylist
}
onSubmitHandler
=
{
onSubmitHandler
}
/>
)
:
(
<
Alert
color
=
'info'
>
<
h4
className
=
'alert-heading'
>
Loading
{
moduleSettings
.
mainTitleSingle
}
<
/h4
>
<
div
className
=
'alert-body'
>
If
{
moduleSettings
.
mainTitleSingle
}
with
id
:
{
id
}
doesn
't exist. Check list of all {moduleSettings.mainTitle}: <Link to={moduleSettings.baseURL}>{moduleSettings.mainTitle} List</Link>
</div>
</Alert>
)
}
export default ElementEdit
src/views/assets/projectassets/index.js
0 → 100644
View file @
41ddd740
// ** React Imports
import
{
Fragment
}
from
'react'
// ** Custom Components
import
Breadcrumbs
from
'@components/breadcrumbs'
// ** Third Party Components
import
{
Row
,
Col
}
from
'reactstrap'
// ** Tables
import
DataTable
from
'./table'
// ** Styles
import
'@styles/react/libs/tables/react-dataTable-component.scss'
// module settings
import
moduleSettings
from
'./module'
const
Tables
=
()
=>
{
return
(
<
Fragment
>
<
Breadcrumbs
breadCrumbTitle
=
'Playlists'
breadCrumbParent
=
'Playlists'
breadCrumbActive
=
{
moduleSettings
.
mainTitle
}
/
>
<
Row
>
<
Col
sm
=
'12'
>
<
DataTable
/>
<
/Col
>
<
/Row
>
<
/Fragment
>
)
}
export
default
Tables
src/views/assets/projectassets/module.js
0 → 100644
View file @
41ddd740
const
moduleSettings
=
{
mainTitle
:
'Assets'
,
mainTitleSingle
:
'Asset'
,
apiBaseURL
:
'/api/assets'
,
baseURL
:
'/assets/projectassets'
,
newElement
:
{
slug
:
0
,
type
:
0
},
elementsOption
:
{
}
}
export
default
moduleSettings
\ No newline at end of file
src/views/assets/projectassets/table.js
0 → 100644
View file @
41ddd740
import
{
Fragment
,
useState
,
useEffect
,
memo
}
from
'react'
// ** Table Columns
import
{
serverSideColumns
}
from
'./data'
// ** Store & Actions
import
{
getData_playlists
}
from
'../store/actions'
import
{
useSelector
,
useDispatch
}
from
'react-redux'
import
DataTableServerSide
from
'@components/datatable'
// module settings
import
moduleSettings
from
'./module'
const
DataTable
=
()
=>
{
// ** Store Vars
const
dispatch
=
useDispatch
()
const
store
=
useSelector
(
state
=>
state
.
playlists
)
return
(
<
DataTableServerSide
cardTitle
=
{
moduleSettings
.
mainTitle
}
allData
=
{
store
.
allDataPlaylists
}
getData
=
{
getData_playlists
}
serverSideColumns
=
{
serverSideColumns
}
linkAddButton
=
{
`
${
moduleSettings
.
baseURL
}
/add`
}
total
=
{
store
.
totalPlaylists
}
/
>
)
}
export
default
memo
(
DataTable
)
src/views/assets/store/actions/assets.js
0 → 100644
View file @
41ddd740
import
axios
from
'axios'
import
{
setSaveSatus
,
setErrorMsg
}
from
'../../../../redux/actions/api'
import
moduleSettings
from
'../../projectassets/module'
// ** Get table Data ///api/datatables/data
const
_getData_assets
=
params
=>
{
return
async
dispatch
=>
{
await
axios
.
get
(
`
${
process
.
env
.
REACT_APP_API
}${
moduleSettings
.
apiBaseURL
}
`
,
{
params
}
).
then
(
response
=>
{
dispatch
({
type
:
'GET_DATA_ASSETS'
,
allData
:
response
.
data
.
data
,
// datalayoumenus: response.data.invoices,
totalPages
:
response
.
data
.
recordsTotal
,
params
:
response
.
data
.
params
})
})
}
}
export
const
getData_assets
=
params
=>
{
const
newparams
=
{
...
params
,
idproject
:
2
}
return
_getData_assets
(
newparams
)
}
export
const
addasset
=
params
=>
{
return
(
dispatch
,
getState
)
=>
{
axios
.
post
(
`
${
process
.
env
.
REACT_APP_API
}${
moduleSettings
.
apiBaseURL
}
`
,
params
)
.
then
(
response
=>
{
dispatch
({
type
:
'ADD_ASSET'
,
params
})
})
.
then
(()
=>
{
dispatch
(
setSaveSatus
(
true
))
// dispatch(getlayoumenu(layoumenu.id))
// dispatch(getData_layoumenus())
})
.
catch
(
err
=>
{
const
errosMsg
=
!
err
.
response
?
'error'
:
err
.
response
.
data
.
message
console
.
log
(
errosMsg
)
dispatch
(
setErrorMsg
(
errosMsg
))
})
}
}
export
const
getasset
=
id
=>
{
return
async
dispatch
=>
{
await
axios
.
get
(
`
${
process
.
env
.
REACT_APP_API
}${
moduleSettings
.
apiBaseURL
}
/
${
id
}
`
)
.
then
(
response
=>
{
// console.log('leu')
// console.log(response)
dispatch
({
type
:
'GET_ASSET'
,
data
:
response
.
data
.
data
})
})
.
catch
(
err
=>
console
.
log
(
err
))
}
}
export
const
cleanasset
=
id
=>
{
return
async
dispatch
=>
{
dispatch
({
type
:
'GET_ASSETS'
,
data
:
null
})
}
}
export
const
updateasset
=
params
=>
{
return
(
dispatch
,
getState
)
=>
{
axios
.
put
(
`
${
process
.
env
.
REACT_APP_API
}${
moduleSettings
.
apiBaseURL
}
/
${
params
.
id
}
`
,
params
)
.
then
(
response
=>
{
dispatch
({
type
:
'UPDATE_ASSETS'
,
params
})
})
.
then
(()
=>
{
dispatch
(
setSaveSatus
(
true
))
})
.
catch
(
err
=>
{
const
errosMsg
=
!
err
.
response
?
'error'
:
err
.
response
.
data
.
message
console
.
log
(
errosMsg
)
dispatch
(
setErrorMsg
(
errosMsg
))
})
}
}
\ No newline at end of file
src/views/assets/store/actions/index.js
0 → 100644
View file @
41ddd740
export
*
from
'./assets'
export
const
resetResults
=
id
=>
{
return
async
dispatch
=>
{
dispatch
({
type
:
'RESET_RESULTS'
,
saveSucces
:
false
,
errorMsg
:
''
})
}
}
\ No newline at end of file
src/views/assets/store/reducer/index.js
0 → 100644
View file @
41ddd740
// ** Initial State
const
initialState
=
{
saveSucces
:
false
,
errorMsg
:
''
,
data
:
[],
total
:
1
,
params
:
{},
allData
:
[],
dataAssets
:
[],
totalAssets
:
1
,
paramsAssets
:
{},
allDataAssets
:
[],
selectedAsset
:
null
}
const
assets
=
(
state
=
initialState
,
action
)
=>
{
switch
(
action
.
type
)
{
case
'SAVE_STATUS'
:
return
{
...
state
,
saveSucces
:
action
.
status
}
case
'SAVE_ERROR'
:
return
{
...
state
,
errorMsg
:
action
.
errorMsg
}
case
'RESET_RESULTS'
:
return
{
...
state
,
saveSucces
:
false
,
errorMsg
:
''
}
// layout menus
case
'GET_DATA_ASSETS'
:
return
{
...
state
,
allDataAssets
:
action
.
allData
,
dataAssets
:
action
.
data
,
totalAssets
:
action
.
totalPages
,
paramsAssets
:
action
.
params
}
case
'ADD_ASSETS'
:
return
{
...
state
}
case
'GET_ASSET'
:
return
{
...
state
,
selectedPlaylist
:
action
.
data
}
case
'UPDATE_ASSET'
:
return
{
...
state
}
case
'ADD_ASSET'
:
return
{
...
state
}
// default
default
:
return
state
}
}
export
default
assets
src/views/playlists/projectplaylists/add/index.js
View file @
41ddd740
...
...
@@ -29,7 +29,8 @@ const Tables = () => {
layout_id
:
values
.
layout_id
,
dynamic
:
values
.
dynamic
,
special
:
values
.
special
,
special_id
:
values
.
special_id
special_id
:
values
.
special_id
,
assets
:
values
.
assets
}
)
)
...
...
@@ -53,14 +54,12 @@ const Tables = () => {
<
ElementCard
selectedElement
=
{{
id
:
'<generate>'
,
idproject
:
'2'
,
system_name
:
''
,
last_seen
:
''
,
layout_page_id
:
''
,
type
:
''
,
display
:
''
,
pagetypeid
:
''
,
order
:
'0'
,
menu_page_layouts
:
[]
title
:
''
,
layout_id
:
null
,
dynamic
:
0
,
special
:
0
,
special_id
:
''
,
assets
:
[]
}}
onSubmitHandler
=
{
onSubmitHandler
}
/
>
...
...
src/views/playlists/projectplaylists/card/index.js
View file @
41ddd740
...
...
@@ -11,6 +11,9 @@ import { isObjEmpty } from '@utils'
import
{
Bell
,
Check
,
X
,
AlertTriangle
,
Info
}
from
'react-feather'
import
ManageAssets
from
'./manageassets'
// import TabLayoutPlaylist from './tablayoutplaylists'
...
...
@@ -68,11 +71,21 @@ const handleError = (text) => {
const
[
dataElement
,
setElementData
]
=
useState
(
null
),
{
register
,
errors
,
handleSubmit
}
=
useForm
(),
settingStore
=
useSelector
(
state
=>
state
.
projectsettings
),
//
settingStore = useSelector(state => state.projectsettings),
screensStore
=
useSelector
(
state
=>
state
.
screens
),
[
pagetypes
,
setPagetypes
]
=
useState
(
null
),
//
[pagetypes, setPagetypes] = useState(null),
[
layoutplaylists
,
setLayoutplaylists
]
=
useState
(
null
),
[
activeTab
,
setActiveTab
]
=
useState
(
0
),
//
handleAssetsChange
=
(
value
)
=>
{
const
newData
=
{
...
dataElement
}
newData
.
assets
=
value
setElementData
(
{
...
newData
})
},
//
toggle
=
tab
=>
setActiveTab
(
tab
),
dispatch
=
useDispatch
(),
...
...
@@ -129,18 +142,18 @@ const handleError = (text) => {
},
[
store
.
saveSucces
])
// populate page types
useEffect
(()
=>
{
if
(
!
settingStore
.
allDataPagetypes
||
settingStore
.
allDataPagetypes
.
length
<
1
)
{
dispatch
(
getData_pagetypes
({
start
:
1
,
length
:
1000
,
q
:
null
}))
}
},
[
dispatch
])
useEffect
(()
=>
{
setPagetypes
(
settingStore
.
allDataPagetypes
)
},
[
settingStore
.
allDataPagetypes
])
//
useEffect(() => {
//
if (!settingStore.allDataPagetypes || settingStore.allDataPagetypes.length < 1) {
//
dispatch(getData_pagetypes({
//
start: 1,
//
length: 1000,
//
q: null
//
}))
//
}
//
}, [dispatch])
//
useEffect(() => {
//
setPagetypes(settingStore.allDataPagetypes)
//
}, [settingStore.allDataPagetypes])
// populate layout menus
useEffect
(()
=>
{
...
...
@@ -277,13 +290,7 @@ return (
<
Row
className
=
'app-user-edit'
>
<
Col
sm
=
'12'
>
<
Card
>
<
CardBody
className
=
'pt-2'
>
<
h4
className
=
"card-title"
>
Assets
<
/h4
>
<
/CardBody>
<
/Card>
<
ManageAssets
dataElement
=
{
dataElement
&&
dataElement
.
assets
}
handleChange
=
{
handleAssetsChange
}
/>
<
/Col>
<
/Row
>
...
...
src/views/playlists/projectplaylists/card/manageassets.js
0 → 100644
View file @
41ddd740
import
{
useState
,
useEffect
}
from
'react'
import
{
useSelector
,
useDispatch
}
from
'react-redux'
// ** Third Party Components
import
{
Row
,
Col
,
FormGroup
,
Label
,
Input
,
Button
}
from
'reactstrap'
import
{
useForm
}
from
'react-hook-form'
import
classnames
from
'classnames'
import
{
getData_assets
}
from
'../../../assets/store/actions'
import
DataTableServerSide
from
'@components/datatable'
import
{
element
}
from
'prop-types'
// ** Table Server Side Column
const
serverSideColumns
=
[
{
name
:
'ID'
,
selector
:
'id'
,
sortable
:
true
,
minWidth
:
'25px'
},
{
name
:
'Title'
,
selector
:
'title'
,
sortable
:
true
,
minWidth
:
'225px'
}
]
const
ManageAssets
=
({
dataElement
,
handleChange
})
=>
{
const
store
=
useSelector
(
state
=>
state
.
assets
),
[
avaliableAssets
,
setavaliableAssets
]
=
useState
([]),
[
selectedAssets
,
setSelectedAssets
]
=
useState
([]),
dispatch
=
useDispatch
()
const
handleAdd
=
(
value
)
=>
{
const
newValue
=
selectedAssets
.
concat
(
value
)
setSelectedAssets
(
newValue
)
handleChange
(
newValue
)
}
const
handleRemove
=
(
value
)
=>
{
const
newValue
=
selectedAssets
.
filter
(
element
=>
element
.
id
!==
value
.
id
)
setSelectedAssets
(
newValue
)
handleChange
(
newValue
)
}
const
getData_selectedAssets
=
(
params
)
=>
{
return
(
dispatch
)
=>
{
if
(
params
.
q
===
''
)
{
if
(
dataElement
===
null
)
return
setSelectedAssets
(
dataElement
)
return
}
const
newValue
=
dataElement
.
filter
(
element
=>
element
.
title
.
includes
(
params
.
q
))
setSelectedAssets
(
newValue
)
}
}
const
serverSideColumnsLeft
=
[
...
serverSideColumns
,
{
name
:
'Action'
,
selector
:
'Action'
,
sortable
:
true
,
minWidth
:
'25px'
,
cell
:
row
=>
(
<
div
className
=
'd-flex justify-content-left align-items-center'
>
<
div
className
=
'd-flex flex-column'
>
<
Button
className
=
'user-name text-truncate mb-0'
onClick
=
{()
=>
{
handleRemove
(
row
)
}}
>
<
span
className
=
'font-weight-bold'
>
Remove
<
/span
>
<
/Button
>
<
/div
>
<
/div
>
)
}
]
const
serverSideColumnsRight
=
[
...
serverSideColumns
,
{
name
:
'Action'
,
selector
:
'Action'
,
sortable
:
true
,
minWidth
:
'25px'
,
cell
:
row
=>
(
<
div
className
=
'd-flex justify-content-left align-items-center'
>
<
div
className
=
'd-flex flex-column'
>
<
Button
className
=
'user-name text-truncate mb-0'
onClick
=
{()
=>
{
handleAdd
(
row
)
}}
>
<
span
className
=
'font-weight-bold'
>
Add
<
/span
>
<
/Button
>
<
/div
>
<
/div
>
)
}
]
const
getData_avaliableAssets
=
(
params
)
=>
{
return
(
dispatch
)
=>
{
if
(
selectedAssets
===
null
)
return
const
Ids
=
selectedAssets
.
map
(
elem
=>
elem
.
id
),
tabAssets
=
store
.
allDataAssets
.
filter
(
element
=>
!
Ids
.
includes
(
element
.
id
))
if
(
params
.
q
===
null
||
params
.
q
===
''
)
{
setavaliableAssets
(
tabAssets
)
return
}
const
newValue
=
tabAssets
.
filter
(
element
=>
element
.
title
.
includes
(
params
.
q
))
setavaliableAssets
(
newValue
)
}
}
useEffect
(()
=>
{
const
Ids
=
selectedAssets
.
map
(
elem
=>
elem
.
id
)
const
filtered
=
store
.
allDataAssets
.
filter
(
element
=>
!
Ids
.
includes
(
element
.
id
))
setavaliableAssets
(
filtered
)
},
[
store
.
allDataAssets
])
useEffect
(()
=>
{
const
Ids
=
selectedAssets
.
map
(
elem
=>
elem
.
id
)
const
filtered
=
store
.
allDataAssets
.
filter
(
element
=>
!
Ids
.
includes
(
element
.
id
))
setavaliableAssets
(
filtered
)
},
[
selectedAssets
])
useEffect
(()
=>
{
if
(
!
store
.
allDataLayoutAssets
||
store
.
allDataLayoutAssets
.
length
<
1
)
{
dispatch
(
getData_assets
({
start
:
0
,
length
:
1000
,
q
:
null
}))
}
},
[
dispatch
])
useEffect
(()
=>
{
if
(
dataElement
!==
null
)
{
setSelectedAssets
(
dataElement
)
}
},
[
dataElement
])
return
<
div
className
=
"card"
>
<
div
className
=
"card-header"
>
<
h4
className
=
"card-title"
>
Assets
<
/h4
>
<
/div
>
<
div
className
=
"card-body"
>
<
Row
>
<
Col
sm
=
'6'
>
<
DataTableServerSide
cardTitle
=
'Content'
allData
=
{
selectedAssets
}
getData
=
{
getData_selectedAssets
}
serverSideColumns
=
{
serverSideColumnsLeft
}
// linkAddButton={`/add`}
total
=
{
selectedAssets
.
length
}
/
>
<
/Col
>
<
Col
sm
=
'6'
>
<
DataTableServerSide
cardTitle
=
'List to add'
allData
=
{
avaliableAssets
}
getData
=
{
getData_avaliableAssets
}
serverSideColumns
=
{
serverSideColumnsRight
}
// linkAddButton={`/add`}
total
=
{
store
.
totalMenuPages
}
/
>
<
/Col
>
<
/Row
>
<
/div
>
<
/div>
}
export
default
ManageAssets
\ No newline at end of file
src/views/playlists/projectplaylists/card/tablayoutplaylists.js
deleted
100644 → 0
View file @
267ca079
import
{
useState
,
useEffect
}
from
'react'
import
{
useSelector
,
useDispatch
}
from
'react-redux'
// ** Third Party Components
import
{
Row
,
Col
,
FormGroup
,
Label
,
Input
,
Button
}
from
'reactstrap'
import
{
useForm
}
from
'react-hook-form'
import
classnames
from
'classnames'
import
{
getData_layoutPlaylists
}
from
'../../../screens/store/actions'
import
{
DivideCircle
}
from
'react-feather'
// import { Button } from 'bootstrap'
import
ManagePlaylist
from
'./manageplaylist'
const
TabLayoutPlaylist
=
({
block
,
selectedDataElement
,
setElementData
})
=>
{
const
[
dataElement
,
setDataElement
]
=
useState
(
null
),
[
layoutPlaylists
,
setLayoutPlaylists
]
=
useState
(
null
),
dispatch
=
useDispatch
(),
screensStore
=
useSelector
(
state
=>
state
.
screens
),
{
register
,
errors
,
handleSubmit
}
=
useForm
()
const
handleDetailChange
=
(
value
,
field
)
=>
{
const
newData
=
selectedDataElement
.
menu_page_layouts
.
map
((
mpagelayout
)
=>
{
if
(
mpagelayout
.
id
===
block
.
id
)
{
mpagelayout
[
field
]
=
value
}
})
setElementData
(
{
...
selectedDataElement
})
}
useEffect
(()
=>
{
if
(
block
!==
null
||
(
block
!==
null
&&
dataElement
!==
null
&&
block
.
id
!==
dataElement
.
id
))
{
return
setDataElement
(
block
)
}
},
[
block
])
// populate layout playlist
useEffect
(()
=>
{
if
(
!
screensStore
.
allDataLayoutPlaylists
||
screensStore
.
allDataLayoutPlaylists
.
length
<
1
)
{
dispatch
(
getData_layoutPlaylists
({
start
:
1
,
length
:
1000
,
q
:
null
}))
}
},
[
dispatch
])
useEffect
(()
=>
{
setLayoutPlaylists
(
screensStore
.
allDataLayoutPlaylists
)
},
[
screensStore
.
allDataLayoutPlaylists
])
return
(
<
Col
sm
=
'12'
>
<
div
className
=
"card"
>
<
div
className
=
"card-header"
>
<
h4
className
=
"card-title"
>
ElementCard
{
dataElement
&&
dataElement
.
id
}
<
/h4
>
<
/div
>
<
div
className
=
"card-body"
>
<
Row
>
<
Col
md
=
'4'
sm
=
'12'
>
<
FormGroup
>
<
Label
for
=
'id'
>
ID
<
/Label
>
<
Input
readOnly
=
{
true
}
type
=
'text'
name
=
'id'
id
=
'id'
placeholder
=
'id'
defaultValue
=
{
dataElement
&&
dataElement
.
id
}
/
>
<
/FormGroup
>
<
/Col
>
<
Col
md
=
'4'
sm
=
'12'
>
<
FormGroup
>
<
Label
for
=
'layout_id'
>
Layout
<
/Label
>
<
Input
type
=
'select'
name
=
'layout_id'
id
=
'layout_id'
placeholder
=
'layout_id'
innerRef
=
{
register
({
required
:
true
})}
defaultValue
=
{
dataElement
&&
dataElement
.
layout_id
}
className
=
{
classnames
({
'is-invalid'
:
errors
[
'layout_id'
]
})}
onChange
=
{(
e
)
=>
handleDetailChange
(
e
.
target
.
value
,
'layout_id'
)}
>
{
!!
layoutPlaylists
?
layoutPlaylists
.
map
(
option
=>
{
return
<
option
key
=
{
option
.
id
}
selected
=
{
option
.
id
===
dataElement
.
layout_id
?
option
.
id
:
''
}
value
=
{
option
.
id
}
>
{
option
.
name
}
<
/option
>
})
:
<
option
>
Loading
<
/option>
}
<
/Input
>
<
/FormGroup
>
<
/Col
>
<
Col
md
=
'4'
sm
=
'12'
>
<
FormGroup
>
<
Label
for
=
'order'
>
order
<
/Label
>
<
Input
type
=
'text'
name
=
'order'
order
=
'order'
placeholder
=
'order'
innerRef
=
{
register
({
required
:
true
})}
defaultValue
=
{
dataElement
&&
dataElement
.
order
}
className
=
{
classnames
({
'is-invalid'
:
errors
[
'order'
]
})}
onChange
=
{(
e
)
=>
handleDetailChange
(
e
.
target
.
value
,
'order'
)}
/
>
<
/FormGroup
>
<
/Col
>
<
/Row
>
<
/div
>
<
/div
>
<
ManagePlaylist
dataElement
=
{
dataElement
&&
dataElement
.
playlists
}
/>
<
/Col>
)
}
export
default
TabLayoutPlaylist
\ No newline at end of file
src/views/playlists/projectplaylists/edit/main.js
View file @
41ddd740
...
...
@@ -30,7 +30,8 @@ const ElementEdit = () => {
layout_id
:
values
.
layout_id
,
dynamic
:
values
.
dynamic
,
special
:
values
.
special
,
special_id
:
values
.
special_id
special_id
:
values
.
special_id
,
assets
:
values
.
assets
})
)
...
...
Write
Preview
Markdown
is supported
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