Browse Source

added hanler for status and btn archive and delete

Skylsmoi 6 years ago
parent
commit
e19ed5f650

+ 16 - 29
src/component/Input/SelectStatus/SelectStatus.jsx View File

17
         aria-haspopup='true'
17
         aria-haspopup='true'
18
         aria-expanded='false'
18
         aria-expanded='false'
19
       >
19
       >
20
-        {props.t('Input.SelectStatus.validated')}
20
+        {props.selectedStatus.label}
21
         <div className='selectStatus__dropdownbtn__icon'>
21
         <div className='selectStatus__dropdownbtn__icon'>
22
-          <i className='fa fa-check' />
22
+          <i className={`fa fa-${props.selectedStatus.faIcon}`} />
23
         </div>
23
         </div>
24
       </button>
24
       </button>
25
 
25
 
28
 
28
 
29
         <div className='dropdown-divider' />
29
         <div className='dropdown-divider' />
30
 
30
 
31
-        <button className='selectStatus__submenu__item current  dropdown-item' type='button'>
32
-          {props.t('Input.SelectStatus.ongoing')}
33
-          <div className='selectStatus__submenu__item__icon'>
34
-            <i className='fa fa-gears' />
35
-          </div>
36
-        </button>
37
-
38
-        <button className='selectStatus__submenu__item check dropdown-item' type='button'>
39
-          {props.t('Input.SelectStatus.validated')}
40
-          <div className='selectStatus__submenu__item__icon'>
41
-            <i className='fa fa-check' />
42
-          </div>
43
-        </button>
44
-
45
-        <button className='selectStatus__submenu__item invalid dropdown-item' type='button'>
46
-          {props.t('Input.SelectStatus.unvalidated')}
47
-          <div className='selectStatus__submenu__item__icon'>
48
-            <i className='fa fa-times' />
49
-          </div>
50
-        </button>
51
-
52
-        <button className='selectStatus__submenu__item ban dropdown-item' type='button'>
53
-          {props.t('Input.SelectStatus.obsolete')}
54
-          <div className='selectStatus__submenu__item__icon'>
55
-            <i className='fa fa-ban' />
56
-          </div>
57
-        </button>
31
+        {props.availableStatus.map(s =>
32
+          <button
33
+            className='selectStatus__submenu__item current dropdown-item'
34
+            type='button'
35
+            onClick={() => props.onChangeStatus(s.slug)}
36
+            key={`status_${s.slug}`}
37
+            style={{color: s.hexcolor}}
38
+          >
39
+            {s.label /* props.t('Input.SelectStatus.ongoing') */}
40
+            <div className='selectStatus__submenu__item__icon'>
41
+              <i className={`fa fa-${s.faIcon}`} />
42
+            </div>
43
+          </button>
44
+        )}
58
       </div>
45
       </div>
59
     </div>
46
     </div>
60
   )
47
   )

+ 20 - 14
src/component/OptionComponent/EditContent.jsx View File

1
-import React, { Component } from 'react'
1
+import React from 'react'
2
 
2
 
3
-class EditContent extends Component {
4
-  render () {
5
-    return (
6
-      <div className='d-flex align-items-center'>
7
-        <div className='wsContentGeneric__option__menu__action optionicon d-none d-sm-block'>
8
-          <i className='fa fa-fw fa-archive' />
9
-        </div>
10
-        <div className='wsContentGeneric__option__menu__action optionicon d-none d-sm-block'>
11
-          <i className='fa fa-fw fa-trash' />
12
-        </div>
13
-      </div>
14
-    )
15
-  }
3
+const EditContent = props => {
4
+  return (
5
+    <div className='d-flex align-items-center'>
6
+      <button
7
+        type='button'
8
+        className='wsContentGeneric__option__menu__action optionicon d-none d-sm-block'
9
+        onClick={props.onClickArchiveBtn}
10
+      >
11
+        <i className='fa fa-fw fa-archive' />
12
+      </button>
13
+      <button
14
+        type='button'
15
+        className='wsContentGeneric__option__menu__action optionicon d-none d-sm-block'
16
+        onClick={props.onClickDeleteBtn}
17
+      >
18
+        <i className='fa fa-fw fa-trash' />
19
+      </button>
20
+    </div>
21
+  )
16
 }
22
 }
17
 
23
 
18
 export default EditContent
24
 export default EditContent

+ 11 - 13
src/component/OptionComponent/NewVersionBtn.jsx View File

1
-import React, { Component } from 'react'
1
+import React from 'react'
2
 
2
 
3
-class NewVersionBtn extends Component {
4
-  render () {
5
-    return (
6
-      <div
7
-        className='wsContentGeneric__option__menu__addversion newversionbtn btn btn-outline-primary mr-auto'
8
-        onClick={this.props.onClickNewVersionBtn}
9
-      >
10
-        Nouvelle version
11
-        <i className='fa fa-plus-circle ml-3' />
12
-      </div>
13
-    )
14
-  }
3
+const NewVersionBtn = props => {
4
+  return (
5
+    <div
6
+      className='wsContentGeneric__option__menu__addversion newversionbtn btn btn-outline-primary mr-auto'
7
+      onClick={props.onClickNewVersionBtn}
8
+    >
9
+      Nouvelle version
10
+      <i className='fa fa-plus-circle ml-3' />
11
+    </div>
12
+  )
15
 }
13
 }
16
 
14
 
17
 export default NewVersionBtn
15
 export default NewVersionBtn

+ 0 - 12
src/component/OptionComponent/StatusContent.jsx View File

1
-import React, { Component } from 'react'
2
-import SelectStatus from '../Input/SelectStatus/SelectStatus.jsx'
3
-
4
-class StatusContent extends Component {
5
-  render () {
6
-    return (
7
-      <SelectStatus />
8
-    )
9
-  }
10
-}
11
-
12
-export default StatusContent

+ 2 - 1
src/component/PopinFixed/PopinFixed.styl View File

66
       &__action
66
       &__action
67
         margin 5px 10px 0 0
67
         margin 5px 10px 0 0
68
         font-size 18px
68
         font-size 18px
69
-        cursor pointer
69
+        background-color transparent
70
+        border none
70
         &:hover , &:focus
71
         &:hover , &:focus
71
           color blue
72
           color blue
72
   &__content
73
   &__content

+ 15 - 4
src/component/PopinFixed/PopinFixedOption.jsx View File

3
 import PropTypes from 'prop-types'
3
 import PropTypes from 'prop-types'
4
 import { translate } from 'react-i18next'
4
 import { translate } from 'react-i18next'
5
 import i18n from '../../i18n.js'
5
 import i18n from '../../i18n.js'
6
-import StatusContent from '../OptionComponent/StatusContent.jsx'
7
 import NewVersionBtn from '../OptionComponent/NewVersionBtn.jsx'
6
 import NewVersionBtn from '../OptionComponent/NewVersionBtn.jsx'
8
 import EditContent from '../OptionComponent/EditContent.jsx'
7
 import EditContent from '../OptionComponent/EditContent.jsx'
8
+import SelectStatus from '../Input/SelectStatus/SelectStatus.jsx'
9
 
9
 
10
 const PopinFixedOption = props => {
10
 const PopinFixedOption = props => {
11
   translate.setI18n(props.i18n ? props.i18n : i18n) // mandatory to allow Apps to overrides trad
11
   translate.setI18n(props.i18n ? props.i18n : i18n) // mandatory to allow Apps to overrides trad
16
 
16
 
17
         <NewVersionBtn onClickNewVersionBtn={props.onClickNewVersionBtn} />
17
         <NewVersionBtn onClickNewVersionBtn={props.onClickNewVersionBtn} />
18
 
18
 
19
-        <StatusContent />
19
+        <SelectStatus
20
+          selectedStatus={props.selectedStatus}
21
+          availableStatus={props.availableStatus}
22
+          onChangeStatus={props.onChangeStatus}
23
+        />
20
 
24
 
21
-        <EditContent />
25
+        <EditContent
26
+          onClickArchiveBtn={props.onClickArchive}
27
+          onClickDeleteBtn={props.onClickDelete}
28
+        />
22
 
29
 
23
       </div>
30
       </div>
24
     </div>
31
     </div>
28
 export default translate()(PopinFixedOption)
35
 export default translate()(PopinFixedOption)
29
 
36
 
30
 PopinFixedOption.propTypes = {
37
 PopinFixedOption.propTypes = {
38
+  selectedStatus: PropTypes.object,
39
+  availableStatus: PropTypes.array,
31
   i18n: PropTypes.object, // translate resource to overrides default one,
40
   i18n: PropTypes.object, // translate resource to overrides default one,
32
-  onClickNewVersionBtn: PropTypes.func
41
+  onClickNewVersionBtn: PropTypes.func,
42
+  onChangeStatus: PropTypes.func
33
 }
43
 }
34
 
44
 
35
 PopinFixedOption.defaultProps = {
45
 PopinFixedOption.defaultProps = {
46
+  availableStatus: [],
36
   i18n: {},
47
   i18n: {},
37
   onClickNewVersionBtn: () => {}
48
   onClickNewVersionBtn: () => {}
38
 }
49
 }

+ 43 - 3
src/index.dev.js View File

22
     <PopinFixed customClass={`${'randomClass'}`}>
22
     <PopinFixed customClass={`${'randomClass'}`}>
23
       <PopinFixedHeader
23
       <PopinFixedHeader
24
         customClass={`${'randomClass'}`}
24
         customClass={`${'randomClass'}`}
25
-        icon={'fa fa-file-word-o'}
25
+        faIcon={'fa fa-file-word-o'}
26
         name={'test exemple'}
26
         name={'test exemple'}
27
         onClickCloseBtn={() => {}}
27
         onClickCloseBtn={() => {}}
28
       />
28
       />
29
 
29
 
30
-      <PopinFixedOption customClass={`${'randomClass'}`} />
30
+      <PopinFixedOption
31
+        customClass={`${'randomClass'}`}
32
+        onClickNewVersionBtn={() => {}}
33
+        selectedStatus={{
34
+          label: 'Open',
35
+          slug: 'open',
36
+          faIcon: 'square-o',
37
+          hexcolor: '#3f52e3',
38
+          globalStatus: 'open'
39
+        }}
40
+        availableStatus={[{
41
+          label: 'Open',
42
+          slug: 'open',
43
+          faIcon: 'square-o',
44
+          hexcolor: '#3f52e3',
45
+          globalStatus: 'open'
46
+        }, {
47
+          label: 'Validated',
48
+          slug: 'closed-validated',
49
+          faIcon: 'check-square-o',
50
+          hexcolor: '#008000',
51
+          globalStatus: 'closed'
52
+        }, {
53
+          label: 'Cancelled',
54
+          slug: 'closed-unvalidated',
55
+          faIcon: 'close',
56
+          hexcolor: '#f63434',
57
+          globalStatus: 'closed'
58
+        }, {
59
+          label: 'Deprecated',
60
+          slug: 'closed-deprecated',
61
+          faIcon: 'warning',
62
+          hexcolor: '#ababab',
63
+          globalStatus: 'closed'
64
+        }]}
65
+        onChangeStatus={newStatus => console.log('newStatus', newStatus)}
66
+        onClickArchive={() => console.log('btn archive clicked')}
67
+        onClickDelete={() => console.log('btn delete clicked')}
68
+      />
31
 
69
 
32
       <PopinFixedContent customClass={`${'randomClass'}__contentpage`}>
70
       <PopinFixedContent customClass={`${'randomClass'}__contentpage`}>
33
         <div>
71
         <div>
34
           <Delimiter />
72
           <Delimiter />
35
           <span>Here will be the app content. Style is handled by the app (obviously)</span>
73
           <span>Here will be the app content. Style is handled by the app (obviously)</span>
36
           <BtnSwitch />
74
           <BtnSwitch />
37
-          <TextAreaApp customClass={'randomClass'} text={'woot'} />
75
+          {/* <TextAreaApp customClass={'randomClass'} text={'woot'} /> */}
38
         </div>
76
         </div>
39
 
77
 
78
+        {/*
40
         <Timeline
79
         <Timeline
41
           customClass={`${'randomClass'}__contentpage`}
80
           customClass={`${'randomClass'}__contentpage`}
42
           loggedUser={{
81
           loggedUser={{
46
           }}
85
           }}
47
           timelineData={TimelineDebugData}
86
           timelineData={TimelineDebugData}
48
         />
87
         />
88
+        */}
49
       </PopinFixedContent>
89
       </PopinFixedContent>
50
     </PopinFixed>
90
     </PopinFixed>
51
   </div>
91
   </div>