Application Android et IOS pour l'amicale des élèves https://play.google.com/store/apps/details?id=fr.amicaleinsat.application
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 4.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  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 React, { useRef, useState } from 'react';
  20. import { Button, Card, Paragraph } from 'react-native-paper';
  21. import { FlatList, StyleSheet } from 'react-native';
  22. import { View } from 'react-native-animatable';
  23. import i18n from 'i18n-js';
  24. import DashboardEditAccordion from '../../../components/Lists/DashboardEdit/DashboardEditAccordion';
  25. import DashboardEditPreviewItem from '../../../components/Lists/DashboardEdit/DashboardEditPreviewItem';
  26. import CollapsibleFlatList from '../../../components/Collapsible/CollapsibleFlatList';
  27. import {
  28. getCategories,
  29. ServiceCategoryType,
  30. ServiceItemType,
  31. } from '../../../utils/Services';
  32. import { useNavigation } from '@react-navigation/core';
  33. import { useCurrentDashboard } from '../../../context/preferencesContext';
  34. import { useLoginState } from '../../../context/loginContext';
  35. const styles = StyleSheet.create({
  36. dashboardContainer: {
  37. height: 50,
  38. },
  39. dashboard: {
  40. marginLeft: 'auto',
  41. marginRight: 'auto',
  42. marginTop: 5,
  43. },
  44. card: {
  45. margin: 5,
  46. },
  47. buttonContainer: {
  48. padding: 5,
  49. },
  50. button: {
  51. marginLeft: 'auto',
  52. marginRight: 'auto',
  53. marginBottom: 10,
  54. },
  55. text: {
  56. textAlign: 'center',
  57. },
  58. });
  59. /**
  60. * Class defining the Settings screen. This screen shows controls to modify app preferences.
  61. */
  62. function DashboardEditScreen() {
  63. const navigation = useNavigation();
  64. const isLoggedIn = useLoginState();
  65. const { currentDashboard, currentDashboardIdList, updateCurrentDashboard } =
  66. useCurrentDashboard();
  67. const initialDashboard = useRef(currentDashboardIdList);
  68. const [activeItem, setActiveItem] = useState(0);
  69. const getDashboardRowRenderItem = ({
  70. item,
  71. index,
  72. }: {
  73. item: ServiceItemType | null;
  74. index: number;
  75. }) => {
  76. return (
  77. <DashboardEditPreviewItem
  78. image={item?.image}
  79. onPress={() => {
  80. setActiveItem(index);
  81. }}
  82. isActive={activeItem === index}
  83. />
  84. );
  85. };
  86. const getDashboard = (content: Array<ServiceItemType | null>) => {
  87. return (
  88. <FlatList
  89. data={content}
  90. extraData={activeItem}
  91. renderItem={getDashboardRowRenderItem}
  92. horizontal
  93. contentContainerStyle={styles.dashboard}
  94. />
  95. );
  96. };
  97. const getRenderItem = ({ item }: { item: ServiceCategoryType }) => {
  98. return (
  99. <DashboardEditAccordion
  100. item={item}
  101. onPress={updateDashboard}
  102. activeDashboard={currentDashboardIdList}
  103. />
  104. );
  105. };
  106. const getListHeader = () => {
  107. return (
  108. <Card style={styles.card}>
  109. <Card.Content>
  110. <View style={styles.buttonContainer}>
  111. <Button
  112. mode={'contained'}
  113. onPress={undoDashboard}
  114. style={styles.button}
  115. >
  116. {i18n.t('screens.settings.dashboardEdit.undo')}
  117. </Button>
  118. <View style={styles.dashboardContainer}>
  119. {getDashboard(currentDashboard)}
  120. </View>
  121. </View>
  122. <Paragraph style={styles.text}>
  123. {i18n.t('screens.settings.dashboardEdit.message')}
  124. </Paragraph>
  125. </Card.Content>
  126. </Card>
  127. );
  128. };
  129. const updateDashboard = (service: ServiceItemType) => {
  130. updateCurrentDashboard(
  131. currentDashboardIdList.map((id, index) =>
  132. index === activeItem ? service.key : id
  133. )
  134. );
  135. };
  136. const undoDashboard = () => {
  137. updateCurrentDashboard(initialDashboard.current);
  138. };
  139. return (
  140. <CollapsibleFlatList
  141. data={getCategories(navigation.navigate, isLoggedIn)}
  142. renderItem={getRenderItem}
  143. ListHeaderComponent={getListHeader()}
  144. style={{}}
  145. />
  146. );
  147. }
  148. export default DashboardEditScreen;