Commit e04de2e5 authored by PDuarte's avatar PDuarte

Lives UI

parent 171fb847
......@@ -12,6 +12,12 @@ export default [
icon: <Briefcase />,
navLink: '/assets/projectassets'
},
{
id: 'liveDash',
title: 'Project Lives',
icon: <Briefcase />,
navLink: '/assets/lives'
},
{
id: 'seriesDash',
title: 'Project Series',
......
......@@ -27,6 +27,30 @@ const AssetsRoutes = [
path: '/assets/projectassets',
component: lazy(() => import('../../views/assets/projectassets'))
},
// lives
{
path: '/assets/lives/edit',
exact: true,
component: () => <Redirect to='/assets/lives/edit/1' />
},
{
path: '/assets/lives/edit/:id',
component: lazy(() => import('../../views/assets/lives/edit')),
meta: {
navLink: '/assets/lives/edit'
}
},
{
path: '/assets/lives/add',
component: lazy(() => import('../../views/assets/lives/add')),
meta: {
navLink: '/assets/lives/add'
}
},
{
path: '/assets/lives',
component: lazy(() => import('../../views/assets/lives'))
},
// series
{
path: '/assets/series/edit',
......
// ** React Imports
import { Fragment } from 'react'
import { Link } from 'react-router-dom'
// ** Store & Actions
import { addasset } from '../../store/actions'
import { useDispatch, useSelector } 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 storeNavbar = useSelector(state => state.navbar)
const onSubmitHandler = (values, uploadFile) => {
dispatch(
addasset({
projectid: values.projectid,
title: values.title,
parentid: values.parentid,
parenttype: values.parenttype,
external_id: values.external_id,
external_url: values.external_url,
textual: values.textual,
availability: values.availability,
genres: values.genres,
subgenres: values.subgenres,
data: uploadFile
}
)
)
}
return (
<Fragment>
<Breadcrumbs breadCrumbTitle='Lives' breadCrumbParent='Lives' 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">
{storeNavbar.projectCurrent === null ? <div>
Select Project
</div> : <ElementCard selectedElement={{
id: '<generate>',
projectid: storeNavbar.projectCurrent.value,
title: '',
parentid:'<generate>',
parenttype: 'Lives',
external_id: '',
external_url: '',
textual: [],
genres: [],
subgenres: [],
availability: [],
imagery: []
}}
onSubmitHandler={onSubmitHandler}
/>
}
</div>
</div>
</Col>
</Row>
</Fragment>
)
}
export default Tables
This diff is collapsed.
import { Fragment, useEffect, useState } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import {Button, Media, Card, CardBody, Row, Col, CardHeader, CardTitle, Label, Input, FormGroup, CardText } from 'reactstrap'
import { Camera, Lock, Edit, Trash2 } from 'react-feather'
const BlocoImage = ({title, img, handelImageChange}) => {
const [imgd, setImgd] = useState(false)
const onChange = e => {
const reader = new FileReader(),
files = e.target.files
reader.onload = function () {
setImgd(reader.result)
handelImageChange(title, JSON.stringify(reader.result))
}
reader.readAsDataURL(files[0])
}
useEffect(() => {
if (img !== null && img !== undefined) {
return setImgd(`${process.env.REACT_APP_IMAGERY}/${img}`)
}
}, [img])
return <Fragment>
<Media className='mb-2'>
{ imgd === null || imgd === false || imgd === undefined ? (
<Camera
className='user-avatar rounded mr-2 my-25 cursor-pointer'
alt={title}
height='90'
width='90'
/>) : (<img
className='user-avatar rounded mr-2 my-25 cursor-pointer'
src={imgd}
alt={title}
height='90'
width='90'
/>)}
<Media className='mt-50' body>
<h4>{title} </h4>
<div className='d-flex flex-wrap mt-1 px-0'>
<Button.Ripple id='change-img' tag={Label} className='mr-75 mb-0' color='primary'>
<span className='d-none d-sm-block'>Change</span>
<span className='d-block d-sm-none'>
<Edit size={14} />
</span>
<input type='file' hidden id={`change-img-${title}`}
onChange={onChange}
accept='image/*' />
</Button.Ripple>
<Button.Ripple color='secondary' outline onClick={ e => { setImgd(null) } }>
<span className='d-none d-sm-block'>Remove</span>
<span className='d-block d-sm-none'>
<Trash2 size={14} />
</span>
</Button.Ripple>
</div>
</Media>
</Media>
</Fragment>
}
const PlanImages = ({language, dataElement, handleElmChange}) => {
const handleInputChange = (value, file) => {
// console.log(value)
// console.log(file)
// //dataElement[field] = value
handleElmChange(value, file, language)
}
return <Fragment>
<CardTitle tag="h5">{language.name} Imagery </CardTitle>
<Col md='12' sm='12'>
<FormGroup>
<Label for='title'>Titlle</Label>
</FormGroup>
</Col>
<Row>
<Col md='4' >
<BlocoImage
title="portrait"
img={dataElement && dataElement.portrait}
handelImageChange={handleInputChange}
/>
</Col>
<Col md='4' >
<BlocoImage
title="landscape"
img={dataElement && dataElement.landscape}
handelImageChange={handleInputChange}
/>
</Col>
<Col md='4' >
<BlocoImage
title="thumbnail"
img={dataElement && dataElement.thumbnail}
handelImageChange={handleInputChange}
/>
</Col>
<Col md='4' >
<BlocoImage
title="banner"
img={dataElement && dataElement.banner}
handelImageChange={handleInputChange}
/>
</Col>
<Col md='4' >
<BlocoImage
title="icon"
img={dataElement && dataElement.icon}
handelImageChange={handleInputChange}
/>
</Col>
<Col md='4' >
<BlocoImage
title="hbackground"
img={dataElement && dataElement.hbackground}
handelImageChange={handleInputChange}
/>
</Col>
<Col md='4' >
<BlocoImage
title="vbackground"
img={dataElement && dataElement.vbackground}
handelImageChange={handleInputChange}
/>
</Col>
<Col md='4' >
<BlocoImage
title="hover"
img={dataElement && dataElement.hover}
handelImageChange={handleInputChange}
/>
</Col>
<Col md='4' >
<BlocoImage
title="focus"
img={dataElement && dataElement.focus}
handelImageChange={handleInputChange}
/>
</Col>
</Row>
</Fragment>
}
const ImageryBlock = ({dataElement, handleElmChange}) => {
const store = useSelector(state => state.projectsettings)
// dispatch = useDispatch(),
// handleLangChange = () => {
// handleTextualChange(dataElement)
// }
// useEffect(() => {
// console.log('aki')
// console.log(dataElement)
// }, [store.projectsettings])
return <Row>
<Col sm='12'>
<Card>
<CardBody className='pt-2'>
{ store.selectedProject !== null
&& dataElement
&& store.selectedProject.languages.map(language => {
let images = dataElement.filter(e => e.langcode === language.langcode)
if (images.length < 1) {
images = [
{
id: '<genrated>',
idassets: '<assetid>',
langcode: language.langcode,
longdescription: '',
shortdescriptions: '',
title: ''
}
]
dataElement.push(images[0])
}
return <PlanImages
key={language.id}
language={language}
dataElement={images[0]}
handleElmChange={handleElmChange}
/>
}
)}
</CardBody>
</Card>
</Col>
</Row>
}
export default ImageryBlock
\ No newline at end of file
This diff is collapsed.
import { Fragment, useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import {getProject} from '../../../settings/store/actions'
import { Card, CardBody, Row, Col, CardHeader, CardTitle, Label, Input, FormGroup, CardText } from 'reactstrap'
import { languages } from 'prismjs'
const PlanLang = ({language, dataElement, LangChange}) => {
const handleInputChange = (value, field) => {
dataElement[field] = value
LangChange(dataElement)
}
return <Fragment>
<CardTitle tag="h5">{language.name} Textual </CardTitle>
<Col md='12' sm='12'>
<FormGroup>
<Label for='title'>Titlle</Label>
<Input
type='text'
name='title'
id='title'
// innerRef={register({ required: true })}
placeholder='title'
defaultValue={dataElement && dataElement.title}
onChange={(e) => handleInputChange(e.target.value, 'title')}
// className={classnames({ 'is-invalid': errors['title'] })}
/>
</FormGroup>
</Col>
<Col md='12' sm='12'>
<FormGroup>
<Label for='longdescription'>Long description</Label>
<Input
type='textarea'
name='longdescription'
id='longdescription'
// innerRef={register({ required: true })}
placeholder='longdescription'
defaultValue={dataElement && dataElement.longdescription}
onChange={(e) => handleInputChange(e.target.value, 'longdescription')}
// className={classnames({ 'is-invalid': errors['shortdescriptions'] })}
/>
</FormGroup>
</Col>
<Col md='12' sm='12'>
<FormGroup>
<Label for='shortdescriptions'>Short description</Label>
<Input
type='textarea'
name='shortdescriptions'
id='shortdescriptions'
// innerRef={register({ required: true })}
placeholder='shortdescriptions'
defaultValue={dataElement && dataElement.shortdescriptions}
onChange={(e) => handleInputChange(e.target.value, 'shortdescriptions')}
// className={classnames({ 'is-invalid': errors['shortdescriptions'] })}
/>
</FormGroup>
</Col>
</Fragment>
}
const TextualBlock = ({dataElement, handleTextualChange}) => {
const store = useSelector(state => state.projectsettings),
dispatch = useDispatch(),
handleLangChange = () => {
handleTextualChange(dataElement)
}
// populate layout menus
useEffect(() => {
if (!store.selectedProject || store.selectedProject.length < 1) {
dispatch(getProject(2))
}
}, [dispatch])
return <Row>
<Col sm='12'>
<Card>
<CardBody className='pt-2'>
{ store.selectedProject !== null
&& dataElement
&& store.selectedProject.languages.map(language => {
let textuals = dataElement.filter(e => e.langcode === language.langcode)
if (textuals.length < 1) {
textuals = [
{
id: '<genrated>',
idassets: '<assetid>',
langcode: language.langcode,
longdescription: '',
shortdescriptions: '',
title: ''
}
]
dataElement.push(textuals[0])
}
return <PlanLang
key={language.id}
language={language}
dataElement={textuals[0]}
LangChange={handleLangChange}
/>
}
)}
</CardBody>
</Card>
</Col>
</Row>
}
export default TextualBlock
// ** React Imports
import { Link } from 'react-router-dom'
import { cleanasset } 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(cleanasset(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
// ** 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='Lives' breadCrumbParent='Lives' 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
import { useState, useEffect, Fragment } from 'react'
import { useParams, Link } from 'react-router-dom'
// ** Store & Actions
import { getasset, updateasset, deleteasset } from '../../store/actions'
import { useSelector, useDispatch } from 'react-redux'
import { Alert } from 'reactstrap'
import ElementCard from '../card'
// module settings
import moduleSettings from '../module'
import { Upload } from 'react-feather'
import _ from 'lodash'
const ElementEdit = () => {
// ** States & Vars
const store = useSelector(state => state.assets),
[dataElement, setElementData] = useState(null),
dispatch = useDispatch(),
{ id } = useParams()
const onSubmitHandler = (values, uploadFile) => {
// console.log(values)
// console.log(uploadFile)
dispatch(
updateasset({
...dataElement,
idproject: values.idproject,
title: values.title,
parentid: values.parentid,
parenttype: values.parenttype,
external_id: values.external_id,
external_url: values.external_url,
genres: values.genres,
subgenres: values.subgenres,
data: uploadFile
})
)
}
const handelDelete = () => {
if (!confirm('Delete')) return
dispatch(
deleteasset({ ...dataElement })
)
}
// ** Function to get user on mount
useEffect(() => {
dispatch(getasset(id))
}, [dispatch])
// ** Update user image on mount or change
useEffect(() => {
if (store.selectedAsset !== null || (store.selectedAsset !== null && dataElement !== null && store.selectedAsset.id !== dataElement.id)) {
return setElementData(store.selectedAsset)
}
}, [store.selectedAsset])
return store.selectedAsset !== null && store.selectedAsset !== undefined ? (
<ElementCard
selectedElement={store.selectedAsset}
onSubmitHandler={onSubmitHandler}
handelDelete={handelDelete}
/>
) : (
<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
// ** 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='Lives' breadCrumbParent='Lives' breadCrumbActive={moduleSettings.mainTitle} />
<Row>
<Col sm='12'>
<DataTable />
</Col>
</Row>
</Fragment>
)
}
export default Tables
const moduleSettings = {
mainTitle: 'Lives',
mainTitleSingle: 'Live',
apiBaseURL: '/api/assets',
baseURL: '/assets/lives',
newElement: {
slug: 0,
type: 0
},
elementsOption: {
}
}
export default moduleSettings
\ No newline at end of file
import { Fragment, useState, useEffect, memo } from 'react'
// ** Table Columns
import { serverSideColumns } from './data'
// ** Store & Actions
import { getData_lives} 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.assets)
const storeNavbar = useSelector(state => state.navbar)
useEffect(() => {
dispatch(getData_lives({
start: 0,
length: 1000
}))
}, [storeNavbar.projectCurrent])
return (
<DataTableServerSide
cardTitle={moduleSettings.mainTitle}
allData={store.allDataLives}
getData={getData_lives}
serverSideColumns={serverSideColumns}
linkAddButton={`${moduleSettings.baseURL}/add`}
total={store.totalLives}
/>
)
}
export default memo(DataTable)
export * from './assets'
export * from './lives'
export * from './series'
......
import {store} from '@store/storeConfig/store'
import axios from 'axios'
import moduleSettings from '../../projectassets/module'
const _getData_lives = params => {
return async dispatch => {
await axios.get(`${process.env.REACT_APP_API}${moduleSettings.apiBaseURL}`, {params}
).then(response => {
dispatch({
type: 'GET_DATA_LIVES',
allData: response.data.data,
// datalayoumenus: response.data.invoices,
totalPages: response.data.recordsTotal,
params: response.data.params
})
})
}
}
export const getData_lives = params => {
if (!!params.idproject && params.idproject !== null) {
const newparams = {
...params,
type: 'Lives'
}
return _getData_lives(newparams)
}
const currentProject = store.getState().navbar.projectCurrent
const newparams = {
...params,
idproject: !currentProject ? '%' : currentProject.value,
type: 'Lives'
}
return _getData_lives(newparams)
}
......@@ -13,6 +13,12 @@ const initialState = {
allDataAssets: [],
selectedAsset: null,
dataLives: [],
totalLives: 1,
paramsLives: {},
allDataLives: [],
selectedLive: null,
dataSeries: [],
totalSeries: 1,
paramsSeries: {},
......@@ -72,6 +78,17 @@ const assets = (state = initialState, action) => {
totalSeries: action.totalPages,
paramsSeries: action.params
}
// Lives
case 'GET_DATA_LIVES':
return {
...state,
allDataLives: action.allData,
dataLives: action.data,
totalLives: action.totalPages,
paramsLives: action.params
}
// default
default:
return state
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment