Application Android et IOS pour l'amicale des élèves
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

DashboardEditScreen.tsx 5.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
  1. /*
  2. * Copyright (c) 2019 - 2020 Arnaud Vergnet.
  3. *
  4. * This file is part of Campus INSAT.
  5. *
  6. * Campus INSAT is free software: you can redistribute it and/or modify
  7. * it under the terms of the GNU General Public License as published by
  8. * the Free Software Foundation, either version 3 of the License, or
  9. * (at your option) any later version.
  10. *
  11. * Campus INSAT is distributed in the hope that it will be useful,
  12. * but WITHOUT ANY WARRANTY; without even the implied warranty of
  13. * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  14. * GNU General Public License for more details.
  15. *
  16. * You should have received a copy of the GNU General Public License
  17. * along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
  18. */
  19. import * as React from 'react';
  20. import {StackNavigationProp} from '@react-navigation/stack';
  21. import {Button, Card, Paragraph} from 'react-native-paper';
  22. import {FlatList} from 'react-native';
  23. import {View} from 'react-native-animatable';
  24. import i18n from 'i18n-js';
  25. import type {
  26. ServiceCategoryType,
  27. ServiceItemType,
  28. } from '../../../managers/ServicesManager';
  29. import DashboardManager from '../../../managers/DashboardManager';
  30. import DashboardEditAccordion from '../../../components/Lists/DashboardEdit/DashboardEditAccordion';
  31. import DashboardEditPreviewItem from '../../../components/Lists/DashboardEdit/DashboardEditPreviewItem';
  32. import AsyncStorageManager from '../../../managers/AsyncStorageManager';
  33. import CollapsibleFlatList from '../../../components/Collapsible/CollapsibleFlatList';
  34. type PropsType = {
  35. navigation: StackNavigationProp<any>;
  36. };
  37. type StateType = {
  38. currentDashboard: Array<ServiceItemType | null>;
  39. currentDashboardIdList: Array<string>;
  40. activeItem: number;
  41. };
  42. /**
  43. * Class defining the Settings screen. This screen shows controls to modify app preferences.
  44. */
  45. class DashboardEditScreen extends React.Component<PropsType, StateType> {
  46. content: Array<ServiceCategoryType>;
  47. initialDashboard: Array<ServiceItemType | null>;
  48. initialDashboardIdList: Array<string>;
  49. constructor(props: PropsType) {
  50. super(props);
  51. const dashboardManager = new DashboardManager(props.navigation);
  52. this.initialDashboardIdList = AsyncStorageManager.getObject(
  53. AsyncStorageManager.PREFERENCES.dashboardItems.key,
  54. );
  55. this.initialDashboard = dashboardManager.getCurrentDashboard();
  56. this.state = {
  57. currentDashboard: [...this.initialDashboard],
  58. currentDashboardIdList: [...this.initialDashboardIdList],
  59. activeItem: 0,
  60. };
  61. this.content = dashboardManager.getCategories();
  62. }
  63. getDashboardRowRenderItem = ({
  64. item,
  65. index,
  66. }: {
  67. item: ServiceItemType | null;
  68. index: number;
  69. }) => {
  70. const {activeItem} = this.state;
  71. return (
  72. <DashboardEditPreviewItem
  73. image={item?.image}
  74. onPress={() => {
  75. this.setState({activeItem: index});
  76. }}
  77. isActive={activeItem === index}
  78. />
  79. );
  80. };
  81. getDashboard(content: Array<ServiceItemType | null>) {
  82. return (
  83. <FlatList
  84. data={content}
  85. extraData={this.state}
  86. renderItem={this.getDashboardRowRenderItem}
  87. horizontal
  88. contentContainerStyle={{
  89. marginLeft: 'auto',
  90. marginRight: 'auto',
  91. marginTop: 5,
  92. }}
  93. />
  94. );
  95. }
  96. getRenderItem = ({item}: {item: ServiceCategoryType}) => {
  97. const {currentDashboardIdList} = this.state;
  98. return (
  99. <DashboardEditAccordion
  100. item={item}
  101. onPress={this.updateDashboard}
  102. activeDashboard={currentDashboardIdList}
  103. />
  104. );
  105. };
  106. getListHeader() {
  107. const {currentDashboard} = this.state;
  108. return (
  109. <Card style={{margin: 5}}>
  110. <Card.Content>
  111. <View style={{padding: 5}}>
  112. <Button
  113. mode="contained"
  114. onPress={this.undoDashboard}
  115. style={{
  116. marginLeft: 'auto',
  117. marginRight: 'auto',
  118. marginBottom: 10,
  119. }}>
  120. {i18n.t('screens.settings.dashboardEdit.undo')}
  121. </Button>
  122. <View style={{height: 50}}>
  123. {this.getDashboard(currentDashboard)}
  124. </View>
  125. </View>
  126. <Paragraph style={{textAlign: 'center'}}>
  127. {i18n.t('screens.settings.dashboardEdit.message')}
  128. </Paragraph>
  129. </Card.Content>
  130. </Card>
  131. );
  132. }
  133. updateDashboard = (service: ServiceItemType) => {
  134. const {currentDashboard, currentDashboardIdList, activeItem} = this.state;
  135. currentDashboard[activeItem] = service;
  136. currentDashboardIdList[activeItem] = service.key;
  137. this.setState({
  138. currentDashboard,
  139. currentDashboardIdList,
  140. });
  141. AsyncStorageManager.set(
  142. AsyncStorageManager.PREFERENCES.dashboardItems.key,
  143. currentDashboardIdList,
  144. );
  145. };
  146. undoDashboard = () => {
  147. this.setState({
  148. currentDashboard: [...this.initialDashboard],
  149. currentDashboardIdList: [...this.initialDashboardIdList],
  150. });
  151. AsyncStorageManager.set(
  152. AsyncStorageManager.PREFERENCES.dashboardItems.key,
  153. this.initialDashboardIdList,
  154. );
  155. };
  156. render() {
  157. return (
  158. <CollapsibleFlatList
  159. data={this.content}
  160. renderItem={this.getRenderItem}
  161. ListHeaderComponent={this.getListHeader()}
  162. style={{}}
  163. />
  164. );
  165. }
  166. }
  167. export default DashboardEditScreen;