From 283a97bc255de3a835a532f70db63d56a05adde8 Mon Sep 17 00:00:00 2001 From: maceteligolden Date: Thu, 26 Oct 2023 12:56:10 +0100 Subject: [PATCH 1/5] feat:add render yaml file --- render.yaml | 93 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 93 insertions(+) create mode 100644 render.yaml diff --git a/render.yaml b/render.yaml new file mode 100644 index 000000000..3d963a0e4 --- /dev/null +++ b/render.yaml @@ -0,0 +1,93 @@ +services: + - type: web + runtime: node + env: node + name: ever-teams-web + region: oregon + branch: develop + rootDir: ./apps/web + buildCommand: yarn; yarn build + startCommand: yarn start + envVars: + - key: RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED + value: false + - key: NEXT_PUBLIC_GAUZY_API_SERVER_URL + value: https://api.gauzy.co + - key: GAUZY_API_SERVER_URL + value: https://api.gauzy.co/api + - key: INVITE_CALLBACK_URL + value: https://app.ever.team/passcode + - key: NEXT_PUBLIC_GA_MEASUREMENT_ID + value: SOME_MEASUREMENT_ID + #CAPTCHA Settings + - key: NEXT_PUBLIC_CAPTCHA_SITE_KEY + sync: false + - key: CAPTCHA_SECRET_KEY + sync: false + # Invite callback URL + - key: INVITE_CALLBACK_URL + value: https://app.ever.team/auth/passcode + # Verify Email Callback URL + - key: VERIFY_EMAIL_CALLBACK_URL + value: https://app.ever.team/verify-email + # SMTP Mail Configuration + - key: SMTP_FROM_ADDRESS + value: noreply@ever.team + - key: SMTP_HOST + sync: false + - key: SMTP_PORT + sync: false + - key: SMTP_SECURE + sync: false + - key: SMTP_USERNAME + sync: false + - key: SMTP_PASSWORD + sync: false + # Disable auto api refresh + - key: NEXT_PUBLIC_DISABLE_AUTO_REFRESH + value: false + # App Defaults + - key: APP_NAME + value: "Ever Teams" + - key: APP_SIGNATURE + value: "Ever Teams" + - key: APP_LOGO_URL + value: "https://app.ever.team/assets/gauzy-team.png" + # Cookies + - key: NEXT_PUBLIC_COOKIE_DOMAINS + value: ever.team + # Board + - key: NEXT_PUBLIC_BOARD_APP_DOMAIN + value: https://board.ever.team + - key: NEXT_PUBLIC_BOARD_BACKEND_POST_URL + value: "https://jsonboard.ever.team/api/v2/post/" + - key: NEXT_PUBLIC_BOARD_FIREBASE_CONFIG + sync: false + # Meet + - key: NEXT_PUBLIC_MEET_DOMAIN + value: "meet.ever.team" + # Private Variables (Meet) + - key: MEET_JWT_APP_ID + value: ever_teams + - key: MEET_JWT_APP_SECRET + sync: false + # SENTRY + - key: SENTRY_ORG + value: ever-co + - key: SENTRY_PROJECT + value: ever-teams-web + - key: NEXT_PUBLIC_SENTRY_DNS + sync: false + - key: NEXT_PUBLIC_SENTRY_DEBUG + value: false + # JITSU + - key: JITSU_BROWSER_URL + sync: false + - key: JITSU_BROWSER_WRITE_KEY + sync: false + # Github Integration + - key: NEXT_PUBLIC_GITHUB_APP_NAME + value: ever-github + # Chatwoot + - key: NEXT_PUBLIC_CHATWOOT_API_KEY + sync: false \ No newline at end of file From 9e1f91aada6ede5a1fbbb52fecf7c9f543a927f5 Mon Sep 17 00:00:00 2001 From: desperado1802 <124465103+desperado1802@users.noreply.github.com> Date: Fri, 27 Oct 2023 08:46:50 +0300 Subject: [PATCH 2/5] Bug/team settings statuses color picker (#1665) * added functionality to show edited item color in color picker modal, also fixed a height issue for all item screens * added blur background when bottom sheet is open * formatted size name --- .../app/components/ColorPickerModal.tsx | 174 ++++++----- .../components/TaskLabelForm.tsx | 213 +++++++------ .../Authenticated/TaskLabelScreen/index.tsx | 173 ++++++----- .../components/TaskPriorityForm.tsx | 216 +++++++------ .../TaskPrioritiesScreen/index.tsx | 172 ++++++----- .../TaskSizeScreen/components/SizeItem.tsx | 77 +++-- .../components/TaskSizeForm.tsx | 213 +++++++------ .../Authenticated/TaskSizeScreen/index.tsx | 292 ++++++++++-------- .../components/TaskStatusForm.tsx | 213 +++++++------ .../Authenticated/TaskStatusScreen/index.tsx | 290 +++++++++-------- 10 files changed, 1133 insertions(+), 900 deletions(-) diff --git a/apps/mobile/app/components/ColorPickerModal.tsx b/apps/mobile/app/components/ColorPickerModal.tsx index 42ea63a37..a569925c5 100644 --- a/apps/mobile/app/components/ColorPickerModal.tsx +++ b/apps/mobile/app/components/ColorPickerModal.tsx @@ -1,6 +1,6 @@ /* eslint-disable react-native/no-color-literals */ /* eslint-disable react-native/no-inline-styles */ -import React, { FC } from 'react'; +import React, { FC } from "react" import { View, ViewStyle, @@ -9,54 +9,60 @@ import { StyleSheet, Text, TouchableOpacity, - TouchableWithoutFeedback -} from 'react-native'; -import { useSharedValue } from 'react-native-reanimated'; + TouchableWithoutFeedback, +} from "react-native" +import { useSharedValue } from "react-native-reanimated" import ColorPicker, { Panel1, Swatches, OpacitySlider, HueSlider, colorKit, - PreviewText -} from 'reanimated-color-picker'; -import { useAppTheme, typography } from '../theme'; -import { translate } from '../i18n'; + PreviewText, +} from "reanimated-color-picker" +import { useAppTheme, typography } from "../theme" +import { translate } from "../i18n" +import { ITaskPriorityItem } from "../services/interfaces/ITaskPriority" +import { ITaskSizeItem } from "../services/interfaces/ITaskSize" +import { ITaskLabelItem } from "../services/interfaces/ITaskLabel" +import { ITaskStatusItem } from "../services/interfaces/ITaskStatus" interface ColorObj { - hex: string; - hsl: string; - hsla: string; - hsv: string; - hsva: string; - hwb: string; - hwba: string; - rgb: string; - rgba: string; + hex: string + hsl: string + hsla: string + hsv: string + hsva: string + hwb: string + hwba: string + rgb: string + rgba: string } interface IColorPicker { - visible: boolean; - onDismiss: () => void; - setColor: React.Dispatch>; + visible: boolean + onDismiss: () => void + setColor: React.Dispatch> + isEdit?: boolean + item?: ITaskPriorityItem | ITaskSizeItem | ITaskLabelItem | ITaskStatusItem } -const ColorPickerModal: FC = ({ visible, onDismiss, setColor }) => { - const { dark, colors } = useAppTheme(); +const ColorPickerModal: FC = ({ visible, onDismiss, setColor, isEdit, item }) => { + const { dark, colors } = useAppTheme() - const customSwatches = new Array(6).fill('#fff').map(() => colorKit.randomRgbColor().hex()); + const customSwatches = new Array(6).fill("#fff").map(() => colorKit.randomRgbColor().hex()) - const selectedColor = useSharedValue(customSwatches[0]); + const selectedColor = useSharedValue(customSwatches[0]) const onColorSelect = (color: ColorObj) => { - selectedColor.value = color.hex; - }; + selectedColor.value = color.hex + } return ( = ({ visible, onDismiss, setColor }) => colors={customSwatches} /> - + onDismiss()}> - {translate('settingScreen.statusScreen.cancelButtonText')} + + {translate("settingScreen.statusScreen.cancelButtonText")} + { - setColor(selectedColor.value); - onDismiss(); + setColor(selectedColor.value) + onDismiss() }} > - {translate('common.confirm')} + {translate("common.confirm")} - ); -}; + ) +} -export default ColorPickerModal; +export default ColorPickerModal const ModalPopUp = ({ visible, children }) => { - const [showModal, setShowModal] = React.useState(visible); - const scaleValue = React.useRef(new Animated.Value(0)).current; + const [showModal, setShowModal] = React.useState(visible) + const scaleValue = React.useRef(new Animated.Value(0)).current React.useEffect(() => { - toggleModal(); - }, [visible]); + toggleModal() + }, [visible]) const toggleModal = () => { if (visible) { - setShowModal(true); + setShowModal(true) Animated.spring(scaleValue, { toValue: 1, - useNativeDriver: true - }).start(); + useNativeDriver: true, + }).start() } else { - setTimeout(() => setShowModal(false), 200); + setTimeout(() => setShowModal(false), 200) Animated.timing(scaleValue, { toValue: 0, duration: 300, - useNativeDriver: true - }).start(); + useNativeDriver: true, + }).start() } - }; + } return ( - {children} + + {children} + - ); -}; + ) +} const $modalBackGround: ViewStyle = { flex: 1, - backgroundColor: '#000000AA', - justifyContent: 'center' -}; + backgroundColor: "#000000AA", + justifyContent: "center", +} const styles = StyleSheet.create({ cancelBtn: { - alignItems: 'center', - backgroundColor: '#E6E6E9', + alignItems: "center", + backgroundColor: "#E6E6E9", borderRadius: 12, height: 57, - justifyContent: 'center', - width: '48%' + justifyContent: "center", + width: "48%", }, cancelTxt: { - color: '#1A1C1E', + color: "#1A1C1E", fontFamily: typography.primary.semiBold, - fontSize: 18 + fontSize: 18, }, confirmBtn: { - alignItems: 'center', - backgroundColor: '#3826A6', + alignItems: "center", + backgroundColor: "#3826A6", borderRadius: 12, height: 57, - justifyContent: 'center', - width: '48%' + justifyContent: "center", + width: "48%", }, container: { - alignSelf: 'center', + alignSelf: "center", borderRadius: 20, padding: 20, - width: '90%' + width: "90%", }, createTxt: { - color: '#FFF', + color: "#FFF", fontFamily: typography.primary.semiBold, - fontSize: 18 + fontSize: 18, }, panelStyle: { borderRadius: 16, - elevation: 5 + elevation: 5, }, previewTxtContainer: { - borderColor: '#bebdbe', + borderColor: "#bebdbe", borderTopWidth: 1, marginTop: 20, - paddingTop: 20 + paddingTop: 20, }, sliderStyle: { borderRadius: 20, elevation: 5, - marginTop: 20 + marginTop: 20, }, swatchStyle: { borderRadius: 20, @@ -194,21 +206,21 @@ const styles = StyleSheet.create({ marginBottom: 0, marginHorizontal: 0, marginVertical: 0, - width: 30 + width: 30, }, swatchesContainer: { - alignItems: 'center', - borderColor: '#bebdbe', + alignItems: "center", + borderColor: "#bebdbe", borderTopWidth: 1, - flexWrap: 'nowrap', + flexWrap: "nowrap", gap: 10, marginTop: 20, - paddingTop: 20 + paddingTop: 20, }, wrapButtons: { - flexDirection: 'row', - justifyContent: 'space-between', + flexDirection: "row", + justifyContent: "space-between", marginTop: 20, - width: '100%' - } -}); + width: "100%", + }, +}) diff --git a/apps/mobile/app/screens/Authenticated/TaskLabelScreen/components/TaskLabelForm.tsx b/apps/mobile/app/screens/Authenticated/TaskLabelScreen/components/TaskLabelForm.tsx index e4905d23b..43f9c379f 100644 --- a/apps/mobile/app/screens/Authenticated/TaskLabelScreen/components/TaskLabelForm.tsx +++ b/apps/mobile/app/screens/Authenticated/TaskLabelScreen/components/TaskLabelForm.tsx @@ -1,78 +1,78 @@ /* eslint-disable react-native/no-color-literals */ /* eslint-disable react-native/no-inline-styles */ -import React, { useEffect, useState } from 'react'; -import { View, Text, TouchableOpacity, TextInput, StyleSheet } from 'react-native'; -import { translate } from '../../../../i18n'; -import { ITaskLabelCreate, ITaskLabelItem } from '../../../../services/interfaces/ITaskLabel'; -import { typography, useAppTheme } from '../../../../theme'; -import ColorPickerModal from '../../../../components/ColorPickerModal'; -import { Badge } from 'react-native-paper'; -import { formatName } from '../../../../helpers/name-format'; -import IconModal from '../../../../components/IconModal'; -import { IIcon } from '../../../../services/interfaces/IIcon'; -import { SvgUri } from 'react-native-svg'; +import React, { useEffect, useState } from "react" +import { View, Text, TouchableOpacity, TextInput, StyleSheet } from "react-native" +import { translate } from "../../../../i18n" +import { ITaskLabelCreate, ITaskLabelItem } from "../../../../services/interfaces/ITaskLabel" +import { typography, useAppTheme } from "../../../../theme" +import ColorPickerModal from "../../../../components/ColorPickerModal" +import { Badge } from "react-native-paper" +import { formatName } from "../../../../helpers/name-format" +import IconModal from "../../../../components/IconModal" +import { IIcon } from "../../../../services/interfaces/IIcon" +import { SvgUri } from "react-native-svg" const TaskLabelForm = ({ isEdit, onDismiss, item, onCreateLabel, - onUpdateLabel + onUpdateLabel, }: { - isEdit: boolean; - onDismiss: () => unknown; - item?: ITaskLabelItem; - onUpdateLabel: (id: string, data: ITaskLabelCreate) => unknown; - onCreateLabel: (data: ITaskLabelCreate) => unknown; + isEdit: boolean + onDismiss: () => unknown + item?: ITaskLabelItem + onUpdateLabel: (id: string, data: ITaskLabelCreate) => unknown + onCreateLabel: (data: ITaskLabelCreate) => unknown }) => { - const { colors, dark } = useAppTheme(); - const [labelName, setLabelName] = useState(null); - const [labelColor, setLabelColor] = useState(null); - const [labelIcon, setLabelIcon] = useState(null); - const [colorModalVisible, setColorModalVisible] = useState(false); - const [iconModalVisible, setIconModalVisible] = useState(false); - const [allIcons, setAllIcons] = useState([]); + const { colors, dark } = useAppTheme() + const [labelName, setLabelName] = useState(null) + const [labelColor, setLabelColor] = useState(null) + const [labelIcon, setLabelIcon] = useState(null) + const [colorModalVisible, setColorModalVisible] = useState(false) + const [iconModalVisible, setIconModalVisible] = useState(false) + const [allIcons, setAllIcons] = useState([]) useEffect(() => { if (isEdit) { - setLabelName(item.name); - setLabelColor(item.color); - setLabelIcon(item.icon); + setLabelName(item.name) + setLabelColor(item.color) + setLabelIcon(item.icon) } else { - setLabelName(null); - setLabelColor(null); - setLabelIcon(null); + setLabelName(null) + setLabelColor(null) + setLabelIcon(null) } - }, [item, isEdit]); + }, [item, isEdit]) const handleSubmit = async () => { if (labelName.trim().length <= 0 || labelColor.trim().length <= 0) { - return; + return } if (isEdit) { await onUpdateLabel(item?.id, { icon: labelIcon, color: labelColor, - name: labelName - }); + name: labelName, + }) } else { await onCreateLabel({ icon: labelIcon, color: labelColor, - name: labelName - }); + name: labelName, + }) } - setLabelColor(null); - setLabelName(null); - setLabelIcon(null); - onDismiss(); - }; + setLabelColor(null) + setLabelName(null) + setLabelIcon(null) + onDismiss() + } const onDismissModal = () => { - setColorModalVisible(false); - setIconModalVisible(false); - }; + setColorModalVisible(false) + setIconModalVisible(false) + } return ( - + - {translate('settingScreen.statusScreen.createNewStatusText')} + {translate("settingScreen.statusScreen.createNewStatusText")} setLabelName(text)} /> {/* Icon Modal button */} - setIconModalVisible(true)}> - - icon.path === labelIcon)?.fullUrl} /> + setIconModalVisible(true)} + > + + icon.path === labelIcon)?.fullUrl} + /> - {allIcons?.find((icon) => icon.path === labelIcon)?.title?.replace('-', ' ') || - translate('settingScreen.priorityScreen.priorityIconPlaceholder')} + {allIcons + ?.find((icon) => icon.path === labelIcon) + ?.title?.replace("-", " ") || + translate("settingScreen.priorityScreen.priorityIconPlaceholder")} {/* Color Picker button */} - setColorModalVisible(true)}> - - + setColorModalVisible(true)} + > + + - {labelColor?.toUpperCase() || translate('settingScreen.statusScreen.statusColorPlaceholder')} + {labelColor?.toUpperCase() || + translate("settingScreen.statusScreen.statusColorPlaceholder")} onDismiss()}> - {translate('settingScreen.labelScreen.cancelButtonText')} + + {translate("settingScreen.labelScreen.cancelButtonText")} + (!labelColor || !labelName ? {} : handleSubmit())} > {isEdit - ? translate('settingScreen.labelScreen.updateButtonText') - : translate('settingScreen.labelScreen.createButtonText')} + ? translate("settingScreen.labelScreen.updateButtonText") + : translate("settingScreen.labelScreen.createButtonText")} - ); -}; + ) +} const styles = StyleSheet.create({ cancelBtn: { - alignItems: 'center', - backgroundColor: '#E6E6E9', + alignItems: "center", + backgroundColor: "#E6E6E9", borderRadius: 12, height: 57, - justifyContent: 'center', - width: '48%' + justifyContent: "center", + width: "48%", }, cancelTxt: { - color: '#1A1C1E', + color: "#1A1C1E", fontFamily: typography.primary.semiBold, - fontSize: 18 + fontSize: 18, }, colorModalButton: { - alignItems: 'center', - borderColor: '#DCE4E8', + alignItems: "center", + borderColor: "#DCE4E8", borderRadius: 12, borderWidth: 1, - flexDirection: 'row', + flexDirection: "row", height: 57, - justifyContent: 'space-between', + justifyContent: "space-between", marginTop: 16, paddingHorizontal: 18, - width: '100%' + width: "100%", }, createBtn: { - alignItems: 'center', - backgroundColor: '#3826A6', + alignItems: "center", + backgroundColor: "#3826A6", borderRadius: 12, height: 57, - justifyContent: 'center', - width: '48%' + justifyContent: "center", + width: "48%", }, createTxt: { - color: '#FFF', + color: "#FFF", fontFamily: typography.primary.semiBold, - fontSize: 18 + fontSize: 18, }, formTitle: { - color: '#1A1C1E', + color: "#1A1C1E", fontFamily: typography.primary.semiBold, - fontSize: 24 + fontSize: 24, }, statusNameInput: { - alignItems: 'center', - borderColor: '#DCE4E8', + alignItems: "center", + borderColor: "#DCE4E8", borderRadius: 12, borderWidth: 1, height: 57, marginTop: 16, paddingHorizontal: 18, - width: '100%' + width: "100%", }, wrapButtons: { - flexDirection: 'row', - justifyContent: 'space-between', + flexDirection: "row", + justifyContent: "space-between", marginTop: 40, - width: '100%' - } -}); + width: "100%", + }, +}) -export default TaskLabelForm; +export default TaskLabelForm diff --git a/apps/mobile/app/screens/Authenticated/TaskLabelScreen/index.tsx b/apps/mobile/app/screens/Authenticated/TaskLabelScreen/index.tsx index 26eeb0d4f..135e6d007 100644 --- a/apps/mobile/app/screens/Authenticated/TaskLabelScreen/index.tsx +++ b/apps/mobile/app/screens/Authenticated/TaskLabelScreen/index.tsx @@ -1,71 +1,84 @@ /* eslint-disable react-native/no-color-literals */ /* eslint-disable react-native/no-inline-styles */ -import React, { FC, useState } from 'react'; -import { View, Text, ViewStyle, TouchableOpacity, StyleSheet, FlatList } from 'react-native'; -import { AntDesign, Ionicons } from '@expo/vector-icons'; -import { Screen } from '../../../components'; -import { AuthenticatedDrawerScreenProps } from '../../../navigators/AuthenticatedNavigator'; -import { translate } from '../../../i18n'; -import BottomSheet from 'reanimated-bottom-sheet'; -import { typography, useAppTheme } from '../../../theme'; -import { ActivityIndicator } from 'react-native-paper'; -import Animated from 'react-native-reanimated'; -import LabelItem from './components/LabelItem'; -import TaskLabelForm from './components/TaskLabelForm'; -import { ITaskLabelItem } from '../../../services/interfaces/ITaskLabel'; -import { useTaskLabels } from '../../../services/hooks/features/useTaskLabels'; +import React, { FC, useState } from "react" +import { View, Text, ViewStyle, TouchableOpacity, StyleSheet, FlatList } from "react-native" +import { AntDesign, Ionicons } from "@expo/vector-icons" +import { Screen } from "../../../components" +import { AuthenticatedDrawerScreenProps } from "../../../navigators/AuthenticatedNavigator" +import { translate } from "../../../i18n" +import BottomSheet from "reanimated-bottom-sheet" +import { typography, useAppTheme } from "../../../theme" +import { ActivityIndicator } from "react-native-paper" +import Animated from "react-native-reanimated" +import LabelItem from "./components/LabelItem" +import TaskLabelForm from "./components/TaskLabelForm" +import { ITaskLabelItem } from "../../../services/interfaces/ITaskLabel" +import { useTaskLabels } from "../../../services/hooks/features/useTaskLabels" +import { BlurView } from "expo-blur" -export const TaskLabelScreen: FC> = +export const TaskLabelScreen: FC> = function AuthenticatedDrawerScreen(_props) { - const { colors, dark } = useAppTheme(); - const { navigation } = _props; - const { isLoading, labels, deleteLabel, updateLabel, createLabel } = useTaskLabels(); - const [editMode, setEditMode] = useState(false); - const [itemToEdit, setItemToEdit] = useState(null); + const { colors, dark } = useAppTheme() + const { navigation } = _props + const { isLoading, labels, deleteLabel, updateLabel, createLabel } = useTaskLabels() + const [editMode, setEditMode] = useState(false) + const [itemToEdit, setItemToEdit] = useState(null) + const [isSheetOpen, setIsSheetOpen] = useState(false) // ref - const sheetRef = React.useRef(null); + const sheetRef = React.useRef(null) // variables // const snapPoints = useMemo(() => ["25%", "50%"], []) - const fall = new Animated.Value(1); + const fall = new Animated.Value(1) const openForEdit = (item: ITaskLabelItem) => { - setEditMode(true); - setItemToEdit(item); - sheetRef.current.snapTo(0); - }; + setEditMode(true) + setIsSheetOpen(true) + setItemToEdit(item) + sheetRef.current.snapTo(0) + } return ( - + - navigation.navigate('Setting')}> + navigation.navigate("Setting")}> - {translate('settingScreen.labelScreen.mainTitle')} + {translate("settingScreen.labelScreen.mainTitle")} - + - {translate('settingScreen.labelScreen.listLabels')} + + {translate("settingScreen.labelScreen.listLabels")} + - - {isLoading ? : null} + + {isLoading ? ( + + ) : null} {!isLoading && labels?.total === 0 ? ( - {translate('settingScreen.labelScreen.noActiveLabels')} + {translate("settingScreen.labelScreen.noActiveLabels")} ) : null} ( { - setEditMode(false); - sheetRef.current.snapTo(0); + setEditMode(false) + setIsSheetOpen(true) + sheetRef.current.snapTo(0) }} > - - - {translate('settingScreen.labelScreen.createNewLabelText')} + + + {translate("settingScreen.labelScreen.createNewLabelText")} + {isSheetOpen && ( + + )} { - setEditMode(false); - sheetRef.current.snapTo(1); + setEditMode(false) + setIsSheetOpen(false) + sheetRef.current.snapTo(1) }} onUpdateLabel={updateLabel} onCreateLabel={createLabel} @@ -113,66 +142,66 @@ export const TaskLabelScreen: FC - ); - }; + ) + } const $container: ViewStyle = { - flex: 1 -}; + flex: 1, +} const $headerContainer: ViewStyle = { padding: 20, paddingVertical: 16, - shadowColor: 'rgba(0, 0, 0, 0.6)', + shadowColor: "rgba(0, 0, 0, 0.6)", shadowOffset: { width: 0, - height: 2 + height: 2, }, shadowOpacity: 0.07, shadowRadius: 1.0, elevation: 1, - zIndex: 10 -}; + zIndex: 10, +} const styles = StyleSheet.create({ btnText: { - color: '#3826A6', + color: "#3826A6", fontFamily: typography.primary.semiBold, fontSize: 18, - fontStyle: 'normal' + fontStyle: "normal", }, container: { - alignItems: 'center', - flexDirection: 'row', - width: '100%' + alignItems: "center", + flexDirection: "row", + width: "100%", }, createButton: { - alignItems: 'center', - alignSelf: 'center', - borderColor: '#3826A6', + alignItems: "center", + alignSelf: "center", + borderColor: "#3826A6", borderRadius: 12, borderWidth: 2, - flexDirection: 'row', - justifyContent: 'center', + flexDirection: "row", + justifyContent: "center", marginTop: 24, padding: 16, - width: '90%' + width: "90%", }, noStatusTxt: { - color: '#7E7991', + color: "#7E7991", fontFamily: typography.primary.semiBold, - fontSize: 16 + fontSize: 16, }, title: { - alignSelf: 'center', + alignSelf: "center", fontFamily: typography.primary.semiBold, fontSize: 16, - textAlign: 'center', - width: '80%' + textAlign: "center", + width: "80%", }, title2: { - color: '#7E7991', + color: "#7E7991", fontFamily: typography.primary.semiBold, fontSize: 16, - marginBottom: 8 - } -}); + marginBottom: 8, + }, +}) diff --git a/apps/mobile/app/screens/Authenticated/TaskPrioritiesScreen/components/TaskPriorityForm.tsx b/apps/mobile/app/screens/Authenticated/TaskPrioritiesScreen/components/TaskPriorityForm.tsx index b19555394..582278f64 100644 --- a/apps/mobile/app/screens/Authenticated/TaskPrioritiesScreen/components/TaskPriorityForm.tsx +++ b/apps/mobile/app/screens/Authenticated/TaskPrioritiesScreen/components/TaskPriorityForm.tsx @@ -1,79 +1,82 @@ /* eslint-disable react-native/no-color-literals */ /* eslint-disable react-native/no-inline-styles */ -import React, { useEffect, useState } from 'react'; -import { View, Text, TouchableOpacity, TextInput, StyleSheet } from 'react-native'; -import { translate } from '../../../../i18n'; -import { ITaskPriorityCreate, ITaskPriorityItem } from '../../../../services/interfaces/ITaskPriority'; -import { typography, useAppTheme } from '../../../../theme'; +import React, { useEffect, useState } from "react" +import { View, Text, TouchableOpacity, TextInput, StyleSheet } from "react-native" +import { translate } from "../../../../i18n" +import { + ITaskPriorityCreate, + ITaskPriorityItem, +} from "../../../../services/interfaces/ITaskPriority" +import { typography, useAppTheme } from "../../../../theme" // import IconDropDown from "./IconDropDown" -import ColorPickerModal from '../../../../components/ColorPickerModal'; -import { Badge } from 'react-native-paper'; -import { formatName } from '../../../../helpers/name-format'; -import IconModal from '../../../../components/IconModal'; -import { IIcon } from '../../../../services/interfaces/IIcon'; -import { SvgUri } from 'react-native-svg'; +import ColorPickerModal from "../../../../components/ColorPickerModal" +import { Badge } from "react-native-paper" +import { formatName } from "../../../../helpers/name-format" +import IconModal from "../../../../components/IconModal" +import { IIcon } from "../../../../services/interfaces/IIcon" +import { SvgUri } from "react-native-svg" const TaskPriorityForm = ({ isEdit, onDismiss, item, onCreatePriority, - onUpdatePriority + onUpdatePriority, }: { - isEdit: boolean; - onDismiss: () => unknown; - item?: ITaskPriorityItem; - onUpdatePriority: (id: string, data: ITaskPriorityCreate) => unknown; - onCreatePriority: (data: ITaskPriorityCreate) => unknown; + isEdit: boolean + onDismiss: () => unknown + item?: ITaskPriorityItem + onUpdatePriority: (id: string, data: ITaskPriorityCreate) => unknown + onCreatePriority: (data: ITaskPriorityCreate) => unknown }) => { - const { colors, dark } = useAppTheme(); - const [priorityName, setPriorityName] = useState(null); - const [priorityColor, setPriorityColor] = useState(null); - const [priorityIcon, setPriorityIcon] = useState(null); - const [colorModalVisible, setColorModalVisible] = useState(false); - const [iconModalVisible, setIconModalVisible] = useState(false); - const [allIcons, setAllIcons] = useState([]); + const { colors, dark } = useAppTheme() + const [priorityName, setPriorityName] = useState(null) + const [priorityColor, setPriorityColor] = useState(null) + const [priorityIcon, setPriorityIcon] = useState(null) + const [colorModalVisible, setColorModalVisible] = useState(false) + const [iconModalVisible, setIconModalVisible] = useState(false) + const [allIcons, setAllIcons] = useState([]) useEffect(() => { if (isEdit) { - setPriorityName(item.value); - setPriorityColor(item.color); - setPriorityIcon(item.icon); + setPriorityName(item.value) + setPriorityColor(item.color) + setPriorityIcon(item.icon) } else { - setPriorityName(null); - setPriorityColor(null); - setPriorityIcon(null); + setPriorityName(null) + setPriorityColor(null) + setPriorityIcon(null) } - }, [item, isEdit]); + }, [item, isEdit]) const handleSubmit = async () => { if (priorityName.trim().length <= 0 || priorityColor.trim().length <= 0) { - return; + return } if (isEdit) { await onUpdatePriority(item?.id, { icon: priorityIcon, color: priorityColor, - name: priorityName - }); + name: priorityName, + }) } else { await onCreatePriority({ icon: priorityIcon, color: priorityColor, - name: priorityName - }); + name: priorityName, + }) } - setPriorityColor(null); - setPriorityName(null); - setPriorityIcon(null); - onDismiss(); - }; + setPriorityColor(null) + setPriorityName(null) + setPriorityIcon(null) + onDismiss() + } const onDismissModal = () => { - setColorModalVisible(false); - setIconModalVisible(false); - }; + setColorModalVisible(false) + setIconModalVisible(false) + } return ( - + - {translate('settingScreen.priorityScreen.createNewPriorityText')} + {translate("settingScreen.priorityScreen.createNewPriorityText")} setPriorityName(text)} /> {/* Icon Modal button */} - setIconModalVisible(true)}> - + setIconModalVisible(true)} + > + - {allIcons?.find((icon) => icon.path === priorityIcon)?.title?.replace('-', ' ') || - translate('settingScreen.priorityScreen.priorityIconPlaceholder')} + {allIcons + ?.find((icon) => icon.path === priorityIcon) + ?.title?.replace("-", " ") || + translate("settingScreen.priorityScreen.priorityIconPlaceholder")} {/* Color Picker button */} - setColorModalVisible(true)}> - - + setColorModalVisible(true)} + > + + - {priorityColor?.toUpperCase() || translate('settingScreen.statusScreen.statusColorPlaceholder')} + {priorityColor?.toUpperCase() || + translate("settingScreen.statusScreen.statusColorPlaceholder")} onDismiss()}> - {translate('settingScreen.priorityScreen.cancelButtonText')} + + {translate("settingScreen.priorityScreen.cancelButtonText")} + (!priorityColor || !priorityName ? {} : handleSubmit())} > {isEdit - ? translate('settingScreen.priorityScreen.updateButtonText') - : translate('settingScreen.statusScreen.createButtonText')} + ? translate("settingScreen.priorityScreen.updateButtonText") + : translate("settingScreen.statusScreen.createButtonText")} - ); -}; + ) +} const styles = StyleSheet.create({ cancelBtn: { - alignItems: 'center', - backgroundColor: '#E6E6E9', + alignItems: "center", + backgroundColor: "#E6E6E9", borderRadius: 12, height: 57, - justifyContent: 'center', - width: '48%' + justifyContent: "center", + width: "48%", }, cancelTxt: { - color: '#1A1C1E', + color: "#1A1C1E", fontFamily: typography.primary.semiBold, - fontSize: 18 + fontSize: 18, }, colorModalButton: { - alignItems: 'center', - borderColor: '#DCE4E8', + alignItems: "center", + borderColor: "#DCE4E8", borderRadius: 12, borderWidth: 1, - flexDirection: 'row', + flexDirection: "row", height: 57, - justifyContent: 'space-between', + justifyContent: "space-between", marginTop: 16, paddingHorizontal: 18, - width: '100%' + width: "100%", }, createBtn: { - alignItems: 'center', - backgroundColor: '#3826A6', + alignItems: "center", + backgroundColor: "#3826A6", borderRadius: 12, height: 57, - justifyContent: 'center', - width: '48%' + justifyContent: "center", + width: "48%", }, createTxt: { - color: '#FFF', + color: "#FFF", fontFamily: typography.primary.semiBold, - fontSize: 18 + fontSize: 18, }, formTitle: { - color: '#1A1C1E', + color: "#1A1C1E", fontFamily: typography.primary.semiBold, - fontSize: 24 + fontSize: 24, }, statusNameInput: { - alignItems: 'center', - borderColor: '#DCE4E8', + alignItems: "center", + borderColor: "#DCE4E8", borderRadius: 12, borderWidth: 1, height: 57, marginTop: 16, paddingHorizontal: 18, - width: '100%' + width: "100%", }, wrapButtons: { - flexDirection: 'row', - justifyContent: 'space-between', + flexDirection: "row", + justifyContent: "space-between", marginTop: 40, - width: '100%' - } -}); + width: "100%", + }, +}) -export default TaskPriorityForm; +export default TaskPriorityForm diff --git a/apps/mobile/app/screens/Authenticated/TaskPrioritiesScreen/index.tsx b/apps/mobile/app/screens/Authenticated/TaskPrioritiesScreen/index.tsx index 27f4de476..0270ad648 100644 --- a/apps/mobile/app/screens/Authenticated/TaskPrioritiesScreen/index.tsx +++ b/apps/mobile/app/screens/Authenticated/TaskPrioritiesScreen/index.tsx @@ -1,73 +1,85 @@ /* eslint-disable react-native/no-color-literals */ /* eslint-disable react-native/no-inline-styles */ -import React, { FC, useState } from 'react'; -import { View, Text, ViewStyle, TouchableOpacity, StyleSheet, FlatList } from 'react-native'; -import { AntDesign, Ionicons } from '@expo/vector-icons'; -import { Screen } from '../../../components'; -import { AuthenticatedDrawerScreenProps } from '../../../navigators/AuthenticatedNavigator'; -import { translate } from '../../../i18n'; -import BottomSheet from 'reanimated-bottom-sheet'; -import { typography, useAppTheme } from '../../../theme'; -import { ActivityIndicator } from 'react-native-paper'; -import Animated from 'react-native-reanimated'; -import { ITaskPriorityItem } from '../../../services/interfaces/ITaskPriority'; -import TaskPriorityForm from './components/TaskPriorityForm'; -import { useTaskPriority } from '../../../services/hooks/features/useTaskPriority'; -import PriorityItem from './components/PriorityItem'; +import React, { FC, useState } from "react" +import { View, Text, ViewStyle, TouchableOpacity, StyleSheet, FlatList } from "react-native" +import { AntDesign, Ionicons } from "@expo/vector-icons" +import { Screen } from "../../../components" +import { AuthenticatedDrawerScreenProps } from "../../../navigators/AuthenticatedNavigator" +import { translate } from "../../../i18n" +import BottomSheet from "reanimated-bottom-sheet" +import { typography, useAppTheme } from "../../../theme" +import { ActivityIndicator } from "react-native-paper" +import Animated from "react-native-reanimated" +import { ITaskPriorityItem } from "../../../services/interfaces/ITaskPriority" +import TaskPriorityForm from "./components/TaskPriorityForm" +import { useTaskPriority } from "../../../services/hooks/features/useTaskPriority" +import PriorityItem from "./components/PriorityItem" +import { BlurView } from "expo-blur" -export const TaskPriorityScreen: FC> = +export const TaskPriorityScreen: FC> = function AuthenticatedDrawerScreen(_props) { - const { colors, dark } = useAppTheme(); - const { navigation } = _props; - const { isLoading, priorities, deletePriority, updatePriority, createPriority } = useTaskPriority(); - const [editMode, setEditMode] = useState(false); - const [itemToEdit, setItemToEdit] = useState(null); + const { colors, dark } = useAppTheme() + const { navigation } = _props + const { isLoading, priorities, deletePriority, updatePriority, createPriority } = + useTaskPriority() + const [editMode, setEditMode] = useState(false) + const [itemToEdit, setItemToEdit] = useState(null) + const [isSheetOpen, setIsSheetOpen] = useState(false) // ref - const sheetRef = React.useRef(null); + const sheetRef = React.useRef(null) // variables // const snapPoints = useMemo(() => ["25%", "50%"], []) - const fall = new Animated.Value(1); + const fall = new Animated.Value(1) const openForEdit = (item: ITaskPriorityItem) => { - setEditMode(true); - setItemToEdit(item); - sheetRef.current.snapTo(0); - }; + setEditMode(true) + setIsSheetOpen(true) + setItemToEdit(item) + sheetRef.current.snapTo(0) + } return ( - + - navigation.navigate('Setting')}> + navigation.navigate("Setting")}> - {translate('settingScreen.priorityScreen.mainTitle')} + {translate("settingScreen.priorityScreen.mainTitle")} - + - {translate('settingScreen.priorityScreen.listPriorities')} + {translate("settingScreen.priorityScreen.listPriorities")} - - {isLoading ? : null} + + {isLoading ? ( + + ) : null} {!isLoading && priorities?.total === 0 ? ( - {translate('settingScreen.priorityScreen.noActivePriorities')} + {translate("settingScreen.priorityScreen.noActivePriorities")} ) : null} ( { - setEditMode(false); - sheetRef.current.snapTo(0); + setEditMode(false) + setIsSheetOpen(true) + sheetRef.current.snapTo(0) }} > - - - {translate('settingScreen.priorityScreen.createNewPriorityText')} + + + {translate("settingScreen.priorityScreen.createNewPriorityText")} + {isSheetOpen && ( + + )} { - setEditMode(false); - sheetRef.current.snapTo(1); + setEditMode(false) + setIsSheetOpen(false) + sheetRef.current.snapTo(1) }} onUpdatePriority={updatePriority} onCreatePriority={createPriority} @@ -115,66 +143,66 @@ export const TaskPriorityScreen: FC - ); - }; + ) + } const $container: ViewStyle = { - flex: 1 -}; + flex: 1, +} const $headerContainer: ViewStyle = { padding: 20, paddingVertical: 16, - shadowColor: 'rgba(0, 0, 0, 0.6)', + shadowColor: "rgba(0, 0, 0, 0.6)", shadowOffset: { width: 0, - height: 2 + height: 2, }, shadowOpacity: 0.07, shadowRadius: 1.0, elevation: 1, - zIndex: 10 -}; + zIndex: 10, +} const styles = StyleSheet.create({ btnText: { - color: '#3826A6', + color: "#3826A6", fontFamily: typography.primary.semiBold, fontSize: 18, - fontStyle: 'normal' + fontStyle: "normal", }, container: { - alignItems: 'center', - flexDirection: 'row', - width: '100%' + alignItems: "center", + flexDirection: "row", + width: "100%", }, createButton: { - alignItems: 'center', - alignSelf: 'center', - borderColor: '#3826A6', + alignItems: "center", + alignSelf: "center", + borderColor: "#3826A6", borderRadius: 12, borderWidth: 2, - flexDirection: 'row', - justifyContent: 'center', + flexDirection: "row", + justifyContent: "center", marginTop: 24, padding: 16, - width: '90%' + width: "90%", }, noStatusTxt: { - color: '#7E7991', + color: "#7E7991", fontFamily: typography.primary.semiBold, - fontSize: 16 + fontSize: 16, }, title: { - alignSelf: 'center', + alignSelf: "center", fontFamily: typography.primary.semiBold, fontSize: 16, - textAlign: 'center', - width: '80%' + textAlign: "center", + width: "80%", }, title2: { - color: '#7E7991', + color: "#7E7991", fontFamily: typography.primary.semiBold, fontSize: 16, - marginBottom: 8 - } -}); + marginBottom: 8, + }, +}) diff --git a/apps/mobile/app/screens/Authenticated/TaskSizeScreen/components/SizeItem.tsx b/apps/mobile/app/screens/Authenticated/TaskSizeScreen/components/SizeItem.tsx index b3a38157b..f5bb67c9c 100644 --- a/apps/mobile/app/screens/Authenticated/TaskSizeScreen/components/SizeItem.tsx +++ b/apps/mobile/app/screens/Authenticated/TaskSizeScreen/components/SizeItem.tsx @@ -1,72 +1,83 @@ /* eslint-disable react-native/no-color-literals */ /* eslint-disable react-native/no-inline-styles */ -import React, { FC } from 'react'; -import { View, Text, StyleSheet } from 'react-native'; -import { AntDesign, Ionicons } from '@expo/vector-icons'; -import { typography, useAppTheme } from '../../../../theme'; -import { ITaskSizeItem } from '../../../../services/interfaces/ITaskSize'; -import { SvgUri } from 'react-native-svg'; +import React, { FC } from "react" +import { View, Text, StyleSheet } from "react-native" +import { AntDesign, Ionicons } from "@expo/vector-icons" +import { typography, useAppTheme } from "../../../../theme" +import { ITaskSizeItem } from "../../../../services/interfaces/ITaskSize" +import { SvgUri } from "react-native-svg" +import { formatName } from "../../../../helpers/name-format" interface ISizeItem { - size: ITaskSizeItem; - onDeleteSize: () => unknown; - openForEdit: () => unknown; + size: ITaskSizeItem + onDeleteSize: () => unknown + openForEdit: () => unknown } const StatusItem: FC = ({ size, onDeleteSize, openForEdit }) => { - const { colors, dark } = useAppTheme(); + const { colors, dark } = useAppTheme() return ( - {size?.name} + {formatName(size?.name)} - openForEdit()} /> - onDeleteSize()} /> + openForEdit()} + /> + onDeleteSize()} + /> - ); -}; + ) +} const styles = StyleSheet.create({ container: { - alignItems: 'center', + alignItems: "center", borderRadius: 10, borderWidth: 1, - flexDirection: 'row', - justifyContent: 'space-between', + flexDirection: "row", + justifyContent: "space-between", marginTop: 16, padding: 6, paddingRight: 16, - width: '100%' + width: "100%", }, rightSection: { - flexDirection: 'row', - justifyContent: 'space-between', - width: '16%' + flexDirection: "row", + justifyContent: "space-between", + width: "16%", }, statusContainer: { - alignItems: 'center', - backgroundColor: '#D4EFDF', + alignItems: "center", + backgroundColor: "#D4EFDF", borderRadius: 10, - flexDirection: 'row', - height: '100%', + flexDirection: "row", + height: "100%", paddingHorizontal: 16, paddingVertical: 12, - width: '60%' + width: "60%", }, text: { fontFamily: typography.primary.medium, fontSize: 14, - marginLeft: 13.5 - } -}); + marginLeft: 13.5, + }, +}) -export default StatusItem; +export default StatusItem diff --git a/apps/mobile/app/screens/Authenticated/TaskSizeScreen/components/TaskSizeForm.tsx b/apps/mobile/app/screens/Authenticated/TaskSizeScreen/components/TaskSizeForm.tsx index f92b5e622..34fa62df5 100644 --- a/apps/mobile/app/screens/Authenticated/TaskSizeScreen/components/TaskSizeForm.tsx +++ b/apps/mobile/app/screens/Authenticated/TaskSizeScreen/components/TaskSizeForm.tsx @@ -1,78 +1,78 @@ /* eslint-disable react-native/no-color-literals */ /* eslint-disable react-native/no-inline-styles */ -import React, { useEffect, useState } from 'react'; -import { View, Text, TouchableOpacity, TextInput, StyleSheet } from 'react-native'; -import { translate } from '../../../../i18n'; -import { ITaskSizeCreate, ITaskSizeItem } from '../../../../services/interfaces/ITaskSize'; -import { typography, useAppTheme } from '../../../../theme'; -import ColorPickerModal from '../../../../components/ColorPickerModal'; -import { Badge } from 'react-native-paper'; -import { formatName } from '../../../../helpers/name-format'; -import { SvgUri } from 'react-native-svg'; -import IconModal from '../../../../components/IconModal'; -import { IIcon } from '../../../../services/interfaces/IIcon'; +import React, { useEffect, useState } from "react" +import { View, Text, TouchableOpacity, TextInput, StyleSheet } from "react-native" +import { translate } from "../../../../i18n" +import { ITaskSizeCreate, ITaskSizeItem } from "../../../../services/interfaces/ITaskSize" +import { typography, useAppTheme } from "../../../../theme" +import ColorPickerModal from "../../../../components/ColorPickerModal" +import { Badge } from "react-native-paper" +import { formatName } from "../../../../helpers/name-format" +import { SvgUri } from "react-native-svg" +import IconModal from "../../../../components/IconModal" +import { IIcon } from "../../../../services/interfaces/IIcon" const TaskSizeForm = ({ isEdit, onDismiss, item, onCreateSize, - onUpdateSize + onUpdateSize, }: { - isEdit: boolean; - onDismiss: () => unknown; - item?: ITaskSizeItem; - onUpdateSize: (id: string, data: ITaskSizeCreate) => unknown; - onCreateSize: (data: ITaskSizeCreate) => unknown; + isEdit: boolean + onDismiss: () => unknown + item?: ITaskSizeItem + onUpdateSize: (id: string, data: ITaskSizeCreate) => unknown + onCreateSize: (data: ITaskSizeCreate) => unknown }) => { - const { colors, dark } = useAppTheme(); - const [sizeName, setSizeName] = useState(null); - const [sizeColor, setSizeColor] = useState(null); - const [sizeIcon, setSizeIcon] = useState(null); - const [colorModalVisible, setColorModalVisible] = useState(false); - const [iconModalVisible, setIconModalVisible] = useState(false); - const [allIcons, setAllIcons] = useState([]); + const { colors, dark } = useAppTheme() + const [sizeName, setSizeName] = useState(null) + const [sizeColor, setSizeColor] = useState(null) + const [sizeIcon, setSizeIcon] = useState(null) + const [colorModalVisible, setColorModalVisible] = useState(false) + const [iconModalVisible, setIconModalVisible] = useState(false) + const [allIcons, setAllIcons] = useState([]) useEffect(() => { if (isEdit) { - setSizeName(item.value); - setSizeColor(item.color); - setSizeIcon(item.icon); + setSizeName(item.value) + setSizeColor(item.color) + setSizeIcon(item.icon) } else { - setSizeName(null); - setSizeColor(null); - setSizeIcon(null); + setSizeName(null) + setSizeColor(null) + setSizeIcon(null) } - }, [item, isEdit]); + }, [item, isEdit]) const handleSubmit = async () => { if (sizeName.trim().length <= 0 || sizeColor.trim().length <= 0) { - return; + return } if (isEdit) { await onUpdateSize(item?.id, { icon: sizeIcon, color: sizeColor, - name: sizeName - }); + name: sizeName, + }) } else { await onCreateSize({ icon: sizeIcon, color: sizeColor, - name: sizeName - }); + name: sizeName, + }) } - setSizeColor(null); - setSizeName(null); - setSizeIcon(null); - onDismiss(); - }; + setSizeColor(null) + setSizeName(null) + setSizeIcon(null) + onDismiss() + } const onDismissModal = () => { - setColorModalVisible(false); - setIconModalVisible(false); - }; + setColorModalVisible(false) + setIconModalVisible(false) + } return ( - + - {translate('settingScreen.sizeScreen.createNewSizeText')} + {translate("settingScreen.sizeScreen.createNewSizeText")} setSizeName(text)} /> {/* Icon Modal button */} - setIconModalVisible(true)}> - - icon.path === sizeIcon)?.fullUrl} /> + setIconModalVisible(true)} + > + + icon.path === sizeIcon)?.fullUrl} + /> - {allIcons?.find((icon) => icon.path === sizeIcon)?.title?.replace('-', ' ') || - translate('settingScreen.priorityScreen.priorityIconPlaceholder')} + {allIcons + ?.find((icon) => icon.path === sizeIcon) + ?.title?.replace("-", " ") || + translate("settingScreen.priorityScreen.priorityIconPlaceholder")} {/* Color Picker button */} - setColorModalVisible(true)}> - - + setColorModalVisible(true)} + > + + - {sizeColor?.toUpperCase() || translate('settingScreen.statusScreen.statusColorPlaceholder')} + {sizeColor?.toUpperCase() || + translate("settingScreen.statusScreen.statusColorPlaceholder")} onDismiss()}> - {translate('settingScreen.sizeScreen.cancelButtonText')} + + {translate("settingScreen.sizeScreen.cancelButtonText")} + (!sizeColor || !sizeName ? {} : handleSubmit())} > {isEdit - ? translate('settingScreen.sizeScreen.updateButtonText') - : translate('settingScreen.sizeScreen.createButtonText')} + ? translate("settingScreen.sizeScreen.updateButtonText") + : translate("settingScreen.sizeScreen.createButtonText")} - ); -}; + ) +} const styles = StyleSheet.create({ cancelBtn: { - alignItems: 'center', - backgroundColor: '#E6E6E9', + alignItems: "center", + backgroundColor: "#E6E6E9", borderRadius: 12, height: 57, - justifyContent: 'center', - width: '48%' + justifyContent: "center", + width: "48%", }, cancelTxt: { - color: '#1A1C1E', + color: "#1A1C1E", fontFamily: typography.primary.semiBold, - fontSize: 18 + fontSize: 18, }, colorModalButton: { - alignItems: 'center', - borderColor: '#DCE4E8', + alignItems: "center", + borderColor: "#DCE4E8", borderRadius: 12, borderWidth: 1, - flexDirection: 'row', + flexDirection: "row", height: 57, - justifyContent: 'space-between', + justifyContent: "space-between", marginTop: 16, paddingHorizontal: 18, - width: '100%' + width: "100%", }, createBtn: { - alignItems: 'center', - backgroundColor: '#3826A6', + alignItems: "center", + backgroundColor: "#3826A6", borderRadius: 12, height: 57, - justifyContent: 'center', - width: '48%' + justifyContent: "center", + width: "48%", }, createTxt: { - color: '#FFF', + color: "#FFF", fontFamily: typography.primary.semiBold, - fontSize: 18 + fontSize: 18, }, formTitle: { - color: '#1A1C1E', + color: "#1A1C1E", fontFamily: typography.primary.semiBold, - fontSize: 24 + fontSize: 24, }, statusNameInput: { - alignItems: 'center', - borderColor: '#DCE4E8', + alignItems: "center", + borderColor: "#DCE4E8", borderRadius: 12, borderWidth: 1, height: 57, marginTop: 16, paddingHorizontal: 18, - width: '100%' + width: "100%", }, wrapButtons: { - flexDirection: 'row', - justifyContent: 'space-between', + flexDirection: "row", + justifyContent: "space-between", marginTop: 40, - width: '100%' - } -}); + width: "100%", + }, +}) -export default TaskSizeForm; +export default TaskSizeForm diff --git a/apps/mobile/app/screens/Authenticated/TaskSizeScreen/index.tsx b/apps/mobile/app/screens/Authenticated/TaskSizeScreen/index.tsx index 1b27bdc1e..61075069f 100644 --- a/apps/mobile/app/screens/Authenticated/TaskSizeScreen/index.tsx +++ b/apps/mobile/app/screens/Authenticated/TaskSizeScreen/index.tsx @@ -1,176 +1,210 @@ /* eslint-disable react-native/no-color-literals */ /* eslint-disable react-native/no-inline-styles */ -import React, { FC, useState } from 'react'; -import { View, Text, ViewStyle, TouchableOpacity, StyleSheet, FlatList } from 'react-native'; -import { AntDesign, Ionicons } from '@expo/vector-icons'; -import { Screen } from '../../../components'; -import { AuthenticatedDrawerScreenProps } from '../../../navigators/AuthenticatedNavigator'; -import { translate } from '../../../i18n'; -import BottomSheet from 'reanimated-bottom-sheet'; -import { typography, useAppTheme } from '../../../theme'; -import { ActivityIndicator } from 'react-native-paper'; -import Animated from 'react-native-reanimated'; -import { ITaskStatusItem } from '../../../services/interfaces/ITaskStatus'; -import TaskSizeForm from './components/TaskSizeForm'; -import SizeItem from './components/SizeItem'; -import { useTaskSizes } from '../../../services/hooks/features/useTaskSizes'; +import React, { FC, useState } from "react" +import { View, Text, ViewStyle, TouchableOpacity, StyleSheet, FlatList } from "react-native" +import { AntDesign, Ionicons } from "@expo/vector-icons" +import { Screen } from "../../../components" +import { AuthenticatedDrawerScreenProps } from "../../../navigators/AuthenticatedNavigator" +import { translate } from "../../../i18n" +import BottomSheet from "reanimated-bottom-sheet" +import { typography, useAppTheme } from "../../../theme" +import { ActivityIndicator } from "react-native-paper" +import Animated from "react-native-reanimated" +import { ITaskStatusItem } from "../../../services/interfaces/ITaskStatus" +import TaskSizeForm from "./components/TaskSizeForm" +import SizeItem from "./components/SizeItem" +import { useTaskSizes } from "../../../services/hooks/features/useTaskSizes" +import { BlurView } from "expo-blur" -export const TaskSizeScreen: FC> = function AuthenticatedDrawerScreen( - _props -) { - const { colors, dark } = useAppTheme(); - const { navigation } = _props; - const { isLoading, sizes, deleteSize, updateSize, createSize } = useTaskSizes(); - const [editMode, setEditMode] = useState(false); - const [itemToEdit, setItemToEdit] = useState(null); - // ref - const sheetRef = React.useRef(null); +export const TaskSizeScreen: FC> = + function AuthenticatedDrawerScreen(_props) { + const { colors, dark } = useAppTheme() + const { navigation } = _props + const { isLoading, sizes, deleteSize, updateSize, createSize } = useTaskSizes() + const [editMode, setEditMode] = useState(false) + const [itemToEdit, setItemToEdit] = useState(null) + const [isSheetOpen, setIsSheetOpen] = useState(false) + // ref + const sheetRef = React.useRef(null) - // variables - // const snapPoints = useMemo(() => ["25%", "50%"], []) - const fall = new Animated.Value(1); - const openForEdit = (item: ITaskStatusItem) => { - setEditMode(true); - setItemToEdit(item); - sheetRef.current.snapTo(0); - }; + // variables + // const snapPoints = useMemo(() => ["25%", "50%"], []) + const fall = new Animated.Value(1) - return ( - - - - - navigation.navigate('Setting')}> - - - - {translate('settingScreen.sizeScreen.mainTitle')} - - - - - - {translate('settingScreen.sizeScreen.listSizes')} + // console.log(fall) + + const openForEdit = (item: ITaskStatusItem) => { + setEditMode(true) + setIsSheetOpen(true) + setItemToEdit(item) + sheetRef.current.snapTo(0) + } + + return ( + + + + + navigation.navigate("Setting")}> + + + + {translate("settingScreen.sizeScreen.mainTitle")} + + - - {isLoading ? : null} - {!isLoading && sizes?.total === 0 ? ( - - {translate('settingScreen.sizeScreen.noActiveSizes')} + + + + {translate("settingScreen.sizeScreen.listSizes")} - ) : null} + + + {isLoading ? ( + + ) : null} + {!isLoading && sizes?.total === 0 ? ( + + {translate("settingScreen.sizeScreen.noActiveSizes")} + + ) : null} - ( - openForEdit(item)} - onDeleteSize={() => deleteSize(item.id)} - size={item} - /> - )} - keyExtractor={(_, index) => index.toString()} - ListFooterComponent={() => } - /> + ( + openForEdit(item)} + onDeleteSize={() => deleteSize(item.id)} + size={item} + /> + )} + keyExtractor={(_, index) => index.toString()} + ListFooterComponent={() => } + /> + - - { - setEditMode(false); - sheetRef.current.snapTo(0); - }} - > - - - {translate('settingScreen.sizeScreen.createSizeButton')} - - - - ( - { - setEditMode(false); - sheetRef.current.snapTo(1); + { + setEditMode(false) + setIsSheetOpen(true) + sheetRef.current.snapTo(0) + }} + > + + + {translate("settingScreen.sizeScreen.createSizeButton")} + + + + {isSheetOpen && ( + )} - /> - - ); -}; + ( + { + setEditMode(false) + setIsSheetOpen(false) + sheetRef.current.snapTo(1) + }} + onUpdateSize={updateSize} + onCreateSize={createSize} + isEdit={editMode} + /> + )} + /> + + ) + } const $container: ViewStyle = { - flex: 1 -}; + flex: 1, +} const $headerContainer: ViewStyle = { padding: 20, paddingVertical: 16, - shadowColor: 'rgba(0, 0, 0, 0.6)', + shadowColor: "rgba(0, 0, 0, 0.6)", shadowOffset: { width: 0, - height: 2 + height: 2, }, shadowOpacity: 0.07, shadowRadius: 1.0, elevation: 1, - zIndex: 10 -}; + zIndex: 10, +} const styles = StyleSheet.create({ btnText: { - color: '#3826A6', + color: "#3826A6", fontFamily: typography.primary.semiBold, fontSize: 18, - fontStyle: 'normal' + fontStyle: "normal", }, container: { - alignItems: 'center', - flexDirection: 'row', - width: '100%' + alignItems: "center", + flexDirection: "row", + width: "100%", }, createButton: { - alignItems: 'center', - alignSelf: 'center', - borderColor: '#3826A6', + alignItems: "center", + alignSelf: "center", + borderColor: "#3826A6", borderRadius: 12, borderWidth: 2, - flexDirection: 'row', - justifyContent: 'center', + flexDirection: "row", + justifyContent: "center", marginTop: 24, padding: 16, - width: '90%' + width: "90%", }, noStatusTxt: { - color: '#7E7991', + color: "#7E7991", fontFamily: typography.primary.semiBold, - fontSize: 16 + fontSize: 16, }, title: { - alignSelf: 'center', + alignSelf: "center", fontFamily: typography.primary.semiBold, fontSize: 16, - textAlign: 'center', - width: '80%' + textAlign: "center", + width: "80%", }, title2: { - color: '#7E7991', + color: "#7E7991", fontFamily: typography.primary.semiBold, fontSize: 16, - marginBottom: 8 - } -}); + marginBottom: 8, + }, +}) diff --git a/apps/mobile/app/screens/Authenticated/TaskStatusScreen/components/TaskStatusForm.tsx b/apps/mobile/app/screens/Authenticated/TaskStatusScreen/components/TaskStatusForm.tsx index 9b890674b..8751759e5 100644 --- a/apps/mobile/app/screens/Authenticated/TaskStatusScreen/components/TaskStatusForm.tsx +++ b/apps/mobile/app/screens/Authenticated/TaskStatusScreen/components/TaskStatusForm.tsx @@ -1,78 +1,78 @@ /* eslint-disable react-native/no-color-literals */ /* eslint-disable react-native/no-inline-styles */ -import React, { useEffect, useState } from 'react'; -import { View, Text, TouchableOpacity, TextInput, StyleSheet } from 'react-native'; -import { translate } from '../../../../i18n'; -import { ITaskStatusCreate, ITaskStatusItem } from '../../../../services/interfaces/ITaskStatus'; -import { typography, useAppTheme } from '../../../../theme'; -import ColorPickerModal from '../../../../components/ColorPickerModal'; -import { Badge } from 'react-native-paper'; -import { formatName } from '../../../../helpers/name-format'; -import IconModal from '../../../../components/IconModal'; -import { SvgUri } from 'react-native-svg'; -import { IIcon } from '../../../../services/interfaces/IIcon'; +import React, { useEffect, useState } from "react" +import { View, Text, TouchableOpacity, TextInput, StyleSheet } from "react-native" +import { translate } from "../../../../i18n" +import { ITaskStatusCreate, ITaskStatusItem } from "../../../../services/interfaces/ITaskStatus" +import { typography, useAppTheme } from "../../../../theme" +import ColorPickerModal from "../../../../components/ColorPickerModal" +import { Badge } from "react-native-paper" +import { formatName } from "../../../../helpers/name-format" +import IconModal from "../../../../components/IconModal" +import { SvgUri } from "react-native-svg" +import { IIcon } from "../../../../services/interfaces/IIcon" const TaskStatusForm = ({ isEdit, onDismiss, item, onCreateStatus, - onUpdateStatus + onUpdateStatus, }: { - isEdit: boolean; - onDismiss: () => unknown; - item?: ITaskStatusItem; - onUpdateStatus: (id: string, data: ITaskStatusCreate) => unknown; - onCreateStatus: (data: ITaskStatusCreate) => unknown; + isEdit: boolean + onDismiss: () => unknown + item?: ITaskStatusItem + onUpdateStatus: (id: string, data: ITaskStatusCreate) => unknown + onCreateStatus: (data: ITaskStatusCreate) => unknown }) => { - const { colors, dark } = useAppTheme(); - const [statusName, setStatusName] = useState(null); - const [statusColor, setStatusColor] = useState(null); - const [statusIcon, setStatusIcon] = useState(null); - const [colorModalVisible, setColorModalVisible] = useState(false); - const [iconModalVisible, setIconModalVisible] = useState(false); - const [allIcons, setAllIcons] = useState([]); + const { colors, dark } = useAppTheme() + const [statusName, setStatusName] = useState(null) + const [statusColor, setStatusColor] = useState(null) + const [statusIcon, setStatusIcon] = useState(null) + const [colorModalVisible, setColorModalVisible] = useState(false) + const [iconModalVisible, setIconModalVisible] = useState(false) + const [allIcons, setAllIcons] = useState([]) useEffect(() => { if (isEdit) { - setStatusName(item.value); - setStatusColor(item.color); - setStatusIcon(item.icon); + setStatusName(item.value) + setStatusColor(item.color) + setStatusIcon(item.icon) } else { - setStatusName(null); - setStatusColor(null); - setStatusIcon(null); + setStatusName(null) + setStatusColor(null) + setStatusIcon(null) } - }, [item, isEdit]); + }, [item, isEdit]) const handleSubmit = async () => { if (statusName.trim().length <= 0 || statusColor.trim().length <= 0) { - return; + return } if (isEdit) { await onUpdateStatus(item?.id, { icon: statusIcon, color: statusColor, - name: statusName - }); + name: statusName, + }) } else { await onCreateStatus({ icon: statusIcon, color: statusColor, - name: statusName - }); + name: statusName, + }) } - setStatusColor(null); - setStatusName(null); - setStatusIcon(null); - onDismiss(); - }; + setStatusColor(null) + setStatusName(null) + setStatusIcon(null) + onDismiss() + } const onDismissModal = () => { - setColorModalVisible(false); - setIconModalVisible(false); - }; + setColorModalVisible(false) + setIconModalVisible(false) + } return ( - + - {translate('settingScreen.statusScreen.createNewStatusText')} + {translate("settingScreen.statusScreen.createNewStatusText")} setStatusName(text)} /> {/* Icon Modal button */} - setIconModalVisible(true)}> - - icon.path === statusIcon)?.fullUrl} /> + setIconModalVisible(true)} + > + + icon.path === statusIcon)?.fullUrl} + /> - {allIcons?.find((icon) => icon.path === statusIcon)?.title?.replace('-', ' ') || - translate('settingScreen.priorityScreen.priorityIconPlaceholder')} + {allIcons + ?.find((icon) => icon.path === statusIcon) + ?.title?.replace("-", " ") || + translate("settingScreen.priorityScreen.priorityIconPlaceholder")} {/* Color Picker button */} - setColorModalVisible(true)}> - - + setColorModalVisible(true)} + > + + - {statusColor?.toUpperCase() || translate('settingScreen.statusScreen.statusColorPlaceholder')} + {statusColor?.toUpperCase() || + translate("settingScreen.statusScreen.statusColorPlaceholder")} onDismiss()}> - {translate('settingScreen.statusScreen.cancelButtonText')} + + {translate("settingScreen.statusScreen.cancelButtonText")} + (!statusColor || !statusName ? {} : handleSubmit())} > {isEdit - ? translate('settingScreen.statusScreen.updateButtonText') - : translate('settingScreen.statusScreen.createButtonText')} + ? translate("settingScreen.statusScreen.updateButtonText") + : translate("settingScreen.statusScreen.createButtonText")} - ); -}; + ) +} const styles = StyleSheet.create({ cancelBtn: { - alignItems: 'center', - backgroundColor: '#E6E6E9', + alignItems: "center", + backgroundColor: "#E6E6E9", borderRadius: 12, height: 57, - justifyContent: 'center', - width: '48%' + justifyContent: "center", + width: "48%", }, cancelTxt: { - color: '#1A1C1E', + color: "#1A1C1E", fontFamily: typography.primary.semiBold, - fontSize: 18 + fontSize: 18, }, colorModalButton: { - alignItems: 'center', - borderColor: '#DCE4E8', + alignItems: "center", + borderColor: "#DCE4E8", borderRadius: 12, borderWidth: 1, - flexDirection: 'row', + flexDirection: "row", height: 57, - justifyContent: 'space-between', + justifyContent: "space-between", marginTop: 16, paddingHorizontal: 18, - width: '100%' + width: "100%", }, createBtn: { - alignItems: 'center', - backgroundColor: '#3826A6', + alignItems: "center", + backgroundColor: "#3826A6", borderRadius: 12, height: 57, - justifyContent: 'center', - width: '48%' + justifyContent: "center", + width: "48%", }, createTxt: { - color: '#FFF', + color: "#FFF", fontFamily: typography.primary.semiBold, - fontSize: 18 + fontSize: 18, }, formTitle: { - color: '#1A1C1E', + color: "#1A1C1E", fontFamily: typography.primary.semiBold, - fontSize: 24 + fontSize: 24, }, statusNameInput: { - alignItems: 'center', - borderColor: '#DCE4E8', + alignItems: "center", + borderColor: "#DCE4E8", borderRadius: 12, borderWidth: 1, height: 57, marginTop: 16, paddingHorizontal: 18, - width: '100%' + width: "100%", }, wrapButtons: { - flexDirection: 'row', - justifyContent: 'space-between', + flexDirection: "row", + justifyContent: "space-between", marginTop: 40, - width: '100%' - } -}); + width: "100%", + }, +}) -export default TaskStatusForm; +export default TaskStatusForm diff --git a/apps/mobile/app/screens/Authenticated/TaskStatusScreen/index.tsx b/apps/mobile/app/screens/Authenticated/TaskStatusScreen/index.tsx index b0f05bdc5..33af4bb84 100644 --- a/apps/mobile/app/screens/Authenticated/TaskStatusScreen/index.tsx +++ b/apps/mobile/app/screens/Authenticated/TaskStatusScreen/index.tsx @@ -1,175 +1,207 @@ /* eslint-disable react-native/no-color-literals */ /* eslint-disable react-native/no-inline-styles */ -import React, { FC, useState } from 'react'; -import { View, Text, ViewStyle, TouchableOpacity, StyleSheet, FlatList } from 'react-native'; -import { AntDesign, Ionicons } from '@expo/vector-icons'; -import { Screen } from '../../../components'; -import { AuthenticatedDrawerScreenProps } from '../../../navigators/AuthenticatedNavigator'; -import { translate } from '../../../i18n'; -import BottomSheet from 'reanimated-bottom-sheet'; -import { typography, useAppTheme } from '../../../theme'; -import StatusItem from './components/StatusItem'; -import { ActivityIndicator } from 'react-native-paper'; -import { useTaskStatus } from '../../../services/hooks/features/useTaskStatus'; -import Animated from 'react-native-reanimated'; -import { ITaskStatusItem } from '../../../services/interfaces/ITaskStatus'; -import TaskStatusForm from './components/TaskStatusForm'; +import React, { FC, useState } from "react" +import { View, Text, ViewStyle, TouchableOpacity, StyleSheet, FlatList } from "react-native" +import { AntDesign, Ionicons } from "@expo/vector-icons" +import { Screen } from "../../../components" +import { AuthenticatedDrawerScreenProps } from "../../../navigators/AuthenticatedNavigator" +import { translate } from "../../../i18n" +import BottomSheet from "reanimated-bottom-sheet" +import { typography, useAppTheme } from "../../../theme" +import StatusItem from "./components/StatusItem" +import { ActivityIndicator } from "react-native-paper" +import { useTaskStatus } from "../../../services/hooks/features/useTaskStatus" +import Animated from "react-native-reanimated" +import { ITaskStatusItem } from "../../../services/interfaces/ITaskStatus" +import TaskStatusForm from "./components/TaskStatusForm" +import { BlurView } from "expo-blur" -export const TaskStatusScreen: FC> = function AuthenticatedDrawerScreen( - _props -) { - const { colors, dark } = useAppTheme(); - const { navigation } = _props; - const { isLoading, statuses, deleteStatus, updateStatus, createStatus } = useTaskStatus(); - const [editMode, setEditMode] = useState(false); - const [itemToEdit, setItemToEdit] = useState(null); - // ref - const sheetRef = React.useRef(null); +export const TaskStatusScreen: FC> = + function AuthenticatedDrawerScreen(_props) { + const { colors, dark } = useAppTheme() + const { navigation } = _props + const { isLoading, statuses, deleteStatus, updateStatus, createStatus } = useTaskStatus() + const [editMode, setEditMode] = useState(false) + const [itemToEdit, setItemToEdit] = useState(null) + const [isSheetOpen, setIsSheetOpen] = useState(false) + // ref + const sheetRef = React.useRef(null) - // variables - const fall = new Animated.Value(1); - const openForEdit = (item: ITaskStatusItem) => { - setEditMode(true); - setItemToEdit(item); - sheetRef.current.snapTo(0); - }; - // console.log("in-progress-again".replaceAll("-", " ")) - return ( - - - - - navigation.navigate('Setting')}> - - - - {translate('settingScreen.statusScreen.mainTitle')} - - - - - - {translate('settingScreen.statusScreen.listStatuses')} + // variables + const fall = new Animated.Value(1) + const openForEdit = (item: ITaskStatusItem) => { + setEditMode(true) + setIsSheetOpen(true) + setItemToEdit(item) + sheetRef.current.snapTo(0) + } + // console.log("in-progress-again".replaceAll("-", " ")) + + return ( + + + + + navigation.navigate("Setting")}> + + + + {translate("settingScreen.statusScreen.mainTitle")} + + - - {isLoading ? : null} - {!isLoading && statuses?.total === 0 ? ( - - {translate('settingScreen.statusScreen.noActiveStatuses')} + + + + {translate("settingScreen.statusScreen.listStatuses")} - ) : null} + + + {isLoading ? ( + + ) : null} + {!isLoading && statuses?.total === 0 ? ( + + {translate("settingScreen.statusScreen.noActiveStatuses")} + + ) : null} - ( - openForEdit(item)} - onDeleteTask={() => deleteStatus(item.id)} - status={item} - /> - )} - keyExtractor={(_, index) => index.toString()} - ListFooterComponent={() => } - /> + ( + openForEdit(item)} + onDeleteTask={() => deleteStatus(item.id)} + status={item} + /> + )} + keyExtractor={(_, index) => index.toString()} + ListFooterComponent={() => } + /> + - - { - setEditMode(false); - sheetRef.current.snapTo(0); - }} - > - - - {translate('settingScreen.statusScreen.createStatusButton')} - - - - ( - { - setEditMode(false); - sheetRef.current.snapTo(1); + { + setEditMode(false) + setIsSheetOpen(true) + sheetRef.current.snapTo(0) + }} + > + + + {translate("settingScreen.statusScreen.createStatusButton")} + + + + {isSheetOpen && ( + )} - /> - - ); -}; + ( + { + setEditMode(false) + setIsSheetOpen(false) + sheetRef.current.snapTo(1) + }} + onUpdateStatus={updateStatus} + onCreateStatus={createStatus} + isEdit={editMode} + /> + )} + /> + + ) + } const $container: ViewStyle = { - flex: 1 -}; + flex: 1, +} const $headerContainer: ViewStyle = { padding: 20, paddingVertical: 16, - shadowColor: 'rgba(0, 0, 0, 0.6)', + shadowColor: "rgba(0, 0, 0, 0.6)", shadowOffset: { width: 0, - height: 2 + height: 2, }, shadowOpacity: 0.07, shadowRadius: 1.0, elevation: 1, - zIndex: 10 -}; + zIndex: 10, +} const styles = StyleSheet.create({ btnText: { - color: '#3826A6', + color: "#3826A6", fontFamily: typography.primary.semiBold, fontSize: 18, - fontStyle: 'normal' + fontStyle: "normal", }, container: { - alignItems: 'center', - flexDirection: 'row', - width: '100%' + alignItems: "center", + flexDirection: "row", + width: "100%", }, createButton: { - alignItems: 'center', - alignSelf: 'center', - borderColor: '#3826A6', + alignItems: "center", + alignSelf: "center", + borderColor: "#3826A6", borderRadius: 12, borderWidth: 2, - flexDirection: 'row', - justifyContent: 'center', + flexDirection: "row", + justifyContent: "center", marginTop: 24, padding: 16, - width: '90%' + width: "90%", }, noStatusTxt: { - color: '#7E7991', + color: "#7E7991", fontFamily: typography.primary.semiBold, - fontSize: 16 + fontSize: 16, }, title: { - alignSelf: 'center', + alignSelf: "center", fontFamily: typography.primary.semiBold, fontSize: 16, - textAlign: 'center', - width: '80%' + textAlign: "center", + width: "80%", }, title2: { - color: '#7E7991', + color: "#7E7991", fontFamily: typography.primary.semiBold, fontSize: 16, - marginBottom: 8 - } -}); + marginBottom: 8, + }, +}) From 4976c5ddb6b1c909d193506d9d91b774a6e9dcc3 Mon Sep 17 00:00:00 2001 From: Badal Khatri Date: Fri, 27 Oct 2023 11:46:40 +0530 Subject: [PATCH 3/5] fix: Verification Code Translation --- apps/web/lib/features/unverified-email.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/web/lib/features/unverified-email.tsx b/apps/web/lib/features/unverified-email.tsx index d729ad55c..c228db2e5 100644 --- a/apps/web/lib/features/unverified-email.tsx +++ b/apps/web/lib/features/unverified-email.tsx @@ -9,7 +9,7 @@ import { useTranslation } from 'react-i18next'; export function UnverifiedEmail() { const { user } = useAuthenticateUser(); - const { t } = useTranslation('home'); + const { t } = useTranslation(); const [verified, setVefified] = useState(true); const { loading: resendLinkLoading, queryCall: resendLinkQueryCall } = useQuery(resentVerifyUserLinkAPI); From b262fddfbbc3e05feebc3c8098fffac6ff0d7033 Mon Sep 17 00:00:00 2001 From: Badal Khatri Date: Fri, 27 Oct 2023 15:53:05 +0530 Subject: [PATCH 4/5] Reset card UI --- .../lib/features/team-members-card-view.tsx | 36 ++----- .../lib/features/team-members-table-view.tsx | 10 +- apps/web/lib/features/team-members.tsx | 101 ++++++++++-------- apps/web/lib/i18n/en.ts | 1 + apps/web/pages/index.tsx | 2 +- 5 files changed, 75 insertions(+), 75 deletions(-) diff --git a/apps/web/lib/features/team-members-card-view.tsx b/apps/web/lib/features/team-members-card-view.tsx index 55b8911df..56bf65055 100644 --- a/apps/web/lib/features/team-members-card-view.tsx +++ b/apps/web/lib/features/team-members-card-view.tsx @@ -1,34 +1,22 @@ -import { - useAuthenticateUser, - useModal, - useOrganizationTeams, - useTeamInvitations -} from '@app/hooks'; +import { useAuthenticateUser, useModal, useOrganizationTeams, useTeamInvitations } from '@app/hooks'; import { Transition } from '@headlessui/react'; import { InviteFormModal } from './team/invite/invite-form-modal'; -import { - InvitedCard, - InviteUserTeamCard -} from './team/invite/user-invite-card'; +import { InvitedCard, InviteUserTeamCard } from './team/invite/user-invite-card'; import { InviteUserTeamSkeleton, UserTeamCard, UserTeamCardSkeleton } from '.'; import { OT_Member } from '@app/interfaces'; interface Props { teamMembers: OT_Member[]; publicTeam: boolean; + currentUser: OT_Member | undefined; } -const TeamMembersCardView: React.FC = ({ teamMembers, publicTeam=false }) => { - const { isTeamManager, user } = useAuthenticateUser(); - const currentUser = teamMembers.find((m) => { - return m.employee.userId === user?.id; - }); - const { activeTeam, teamsFetching } = useOrganizationTeams(); - const members = activeTeam?.members || []; - +const TeamMembersCardView: React.FC = ({ teamMembers: members, currentUser, publicTeam = false }) => { + const { isTeamManager } = useAuthenticateUser(); + const { teamsFetching } = useOrganizationTeams(); const { teamInvitations } = useTeamInvitations(); const $teamsFetching = teamsFetching && members.length === 0; - return( + return (
    {/* Current authenticated user members */} = ({ teamMembers, publicTeam=false })
- ) - -} + ); +}; function Invite() { const { user } = useAuthenticateUser(); @@ -120,10 +107,7 @@ function Invite() { return ( <> - + ); } diff --git a/apps/web/lib/features/team-members-table-view.tsx b/apps/web/lib/features/team-members-table-view.tsx index eabac557d..2d5e939bf 100644 --- a/apps/web/lib/features/team-members-table-view.tsx +++ b/apps/web/lib/features/team-members-table-view.tsx @@ -9,10 +9,12 @@ import { InviteFormModal } from './team/invite/invite-form-modal'; const TeamMembersTableView = ({ teamMembers, + currentUser, publicTeam = false, active = false }: { teamMembers: OT_Member[]; + currentUser: OT_Member | undefined; publicTeam?: boolean; active?: boolean; }) => { @@ -55,10 +57,16 @@ const TeamMembersTableView = ({ const footerRows = React.useMemo(() => [], []); + const sortedTeamMembers: OT_Member[] = []; + if (currentUser) { + sortedTeamMembers.push(currentUser); + } + sortedTeamMembers.push(...teamMembers); + return ( []} - data={teamMembers} + data={sortedTeamMembers} footerRows={footerRows} noResultsMessage={{ heading: 'No team members found', diff --git a/apps/web/lib/features/team-members.tsx b/apps/web/lib/features/team-members.tsx index be2763ac3..a945a280b 100644 --- a/apps/web/lib/features/team-members.tsx +++ b/apps/web/lib/features/team-members.tsx @@ -9,57 +9,64 @@ import TeamMembersCardView from './team-members-card-view'; import { IssuesView } from '@app/constants'; type TeamMembersProps = { - publicTeam?: boolean; - kabanView?: IssuesView; + publicTeam?: boolean; + kabanView?: IssuesView; }; export function TeamMembers({ publicTeam = false, kabanView = IssuesView.CARDS }: TeamMembersProps) { - const { user } = useAuthenticateUser(); - const { activeTeam } = useOrganizationTeams(); + const { user } = useAuthenticateUser(); + const { activeTeam } = useOrganizationTeams(); - const members = activeTeam?.members || []; - const currentUser = members.find((m) => m.employee.userId === user?.id); + const members = activeTeam?.members || []; + const currentUser = members.find((m) => m.employee.userId === user?.id); + const $members = members.filter((member) => member.id !== currentUser?.id); -const $members = members.filter((m) => m.employee.user?.id !== user?.id); + let teamMembersView; - -let teamMembersView; - -switch (true) { - case members.length === 0: - teamMembersView = ( -
-
- - -
-
- - -
-
- ); - break; - case kabanView === IssuesView.CARDS: - teamMembersView = ; - break; - case kabanView === IssuesView.TABLE: - teamMembersView = ( - - - - ); - break; - default: - teamMembersView = ; -} -return teamMembersView; + switch (true) { + case members.length === 0: + teamMembersView = ( +
+
+ + +
+
+ + +
+
+ ); + break; + case kabanView === IssuesView.CARDS: + teamMembersView = ( + + ); + break; + case kabanView === IssuesView.TABLE: + teamMembersView = ( + + + + ); + break; + default: + teamMembersView = ( + + ); + } + return teamMembersView; } diff --git a/apps/web/lib/i18n/en.ts b/apps/web/lib/i18n/en.ts index 9f86d10ba..cd910228a 100644 --- a/apps/web/lib/i18n/en.ts +++ b/apps/web/lib/i18n/en.ts @@ -1,6 +1,7 @@ export const en = { TITLE: 'Ever Teams', common: { + COPY_NUMBER: 'Copy Number', VERIFY: 'verify', PLEASE: 'please', HERE: 'here', diff --git a/apps/web/pages/index.tsx b/apps/web/pages/index.tsx index d6cc077a7..73d058e71 100644 --- a/apps/web/pages/index.tsx +++ b/apps/web/pages/index.tsx @@ -21,7 +21,7 @@ import { TableCellsIcon, QueueListIcon } from '@heroicons/react/24/solid'; function MainPage() { const { t } = useTranslation(); const { isTeamMember, isTrackingEnabled, activeTeam } = useOrganizationTeams(); - const breadcrumb = [...t('pages.home.BREADCRUMB', { returnObjects: true }), activeTeam?.name || '']; + const breadcrumb = [...(t('pages.home.BREADCRUMB', { returnObjects: true }) as any), activeTeam?.name || '']; const [view, setView] = useState(IssuesView.CARDS); return ( From 8b91c7e913360608e5d787ec8b9cbdf60044efaf Mon Sep 17 00:00:00 2001 From: Yehualashet Date: Fri, 27 Oct 2023 13:35:15 +0200 Subject: [PATCH 5/5] * fix task title label name --- apps/web/components/pages/task/title-block/task-title-block.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/web/components/pages/task/title-block/task-title-block.tsx b/apps/web/components/pages/task/title-block/task-title-block.tsx index 2104fa784..e776abd0b 100644 --- a/apps/web/components/pages/task/title-block/task-title-block.tsx +++ b/apps/web/components/pages/task/title-block/task-title-block.tsx @@ -226,7 +226,7 @@ const TaskTitleBlock = () => { onClick={copyTaskNumber} > - {t('common.COPY_NUMBER')} + {t('pages.settingsTeam.COPY_NUMBER')}