Skip to content

Commit

Permalink
Merge pull request #1790 from ever-co/improve/status-value-removal-wh…
Browse files Browse the repository at this point in the history 
…en-selected-one-pressed

Improve/status value removal when selected one pressed
  • Loading branch information
@evereq
evereq authored Nov 15, 2023
2 parents 4f4552b + e54cb80 commit 87a1a6d
Show file tree
Hide file tree
Showing 4 changed files with 160 additions and 141 deletions.
184 changes: 98 additions & 86 deletions apps/mobile/app/components/TaskPriority.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,112 +1,124 @@
/* eslint-disable react-native/no-color-literals */
/* eslint-disable react-native/no-inline-styles */
import React, { FC, useState } from 'react';
import { TouchableOpacity, View, Text, StyleSheet, ViewStyle } from 'react-native';
import { AntDesign, Entypo } from '@expo/vector-icons';
import { observer } from 'mobx-react-lite';
import { ITeamTask } from '../services/interfaces/ITask';
import { useTeamTasks } from '../services/hooks/features/useTeamTasks';
import { typography, useAppTheme } from '../theme';
import TaskPriorityPopup from './TaskPriorityPopup';
import { translate } from '../i18n';
import { useTaskPriorityValue } from './StatusType';
import { limitTextCharaters } from '../helpers/sub-text';
import React, { FC, useState } from "react"
import { TouchableOpacity, View, Text, StyleSheet, ViewStyle } from "react-native"
import { AntDesign, Entypo } from "@expo/vector-icons"

Check warning on line 5 in apps/mobile/app/components/TaskPriority.tsx

View workflow job for this annotation

GitHub Actions / Cspell 

Unknown word (Entypo)
import { observer } from "mobx-react-lite"
import { ITeamTask } from "../services/interfaces/ITask"
import { useTeamTasks } from "../services/hooks/features/useTeamTasks"
import { typography, useAppTheme } from "../theme"
import TaskPriorityPopup from "./TaskPriorityPopup"
import { translate } from "../i18n"
import { useTaskPriorityValue } from "./StatusType"
import { limitTextCharaters } from "../helpers/sub-text"

Check warning on line 13 in apps/mobile/app/components/TaskPriority.tsx

View workflow job for this annotation

GitHub Actions / Cspell 

Unknown word (Charaters)

interface TaskPriorityProps {
task?: ITeamTask;
containerStyle?: ViewStyle;
priority?: string;
setPriority?: (priority: string) => unknown;
task?: ITeamTask
containerStyle?: ViewStyle
priority?: string
setPriority?: (priority: string) => unknown
}

const TaskPriority: FC<TaskPriorityProps> = observer(({ task, containerStyle, priority, setPriority }) => {
const { colors } = useAppTheme();
const { updateTask } = useTeamTasks();
const [openModal, setOpenModal] = useState(false);
const TaskPriority: FC<TaskPriorityProps> = observer(
({ task, containerStyle, priority, setPriority }) => {
const { colors } = useAppTheme()
const { updateTask } = useTeamTasks()
const [openModal, setOpenModal] = useState(false)

const allTaskPriorities = useTaskPriorityValue();
const allTaskPriorities = useTaskPriorityValue()

const sizeValue = (
task?.priority?.split('-').join(' ') ||
(priority && priority.split('-').join(' '))
)?.toLowerCase();
const sizeValue = (
task?.priority?.split("-").join(" ") ||
(priority && priority.split("-").join(" "))
)?.toLowerCase()

const currentPriority =
allTaskPriorities && Object.values(allTaskPriorities).find((item) => item.name.toLowerCase() === sizeValue);
const currentPriority =
allTaskPriorities &&
Object.values(allTaskPriorities).find((item) => item.name.toLowerCase() === sizeValue)

const onChangePriority = async (text) => {
if (task) {
const taskEdit = {
...task,
priority: text
};
const onChangePriority = async (text: string) => {
if (task) {
const taskEdit = {
...task,
priority: task?.priority === text ? null : text,
}

await updateTask(taskEdit, task.id);
} else {
setPriority(text);
await updateTask(taskEdit, task.id)
} else {
setPriority(text)
}
}
};

return (
<>
<TaskPriorityPopup
priorityName={task ? task?.priority : priority}
visible={openModal}
setSelectedPriority={(e) => onChangePriority(e.value)}
onDismiss={() => setOpenModal(false)}
/>
<TouchableOpacity onPress={() => setOpenModal(true)}>
<View
style={{
...styles.container,
...containerStyle,
borderColor: colors.border,
backgroundColor: currentPriority?.bgColor
}}
>
{(task?.priority || priority) && currentPriority ? (
<View style={styles.wrapStatus}>
{currentPriority.icon}
<Text style={{ ...styles.text, marginLeft: 10 }}>
{limitTextCharaters({ text: currentPriority.name, numChars: 15 })}
</Text>
</View>
) : (
<View style={styles.wrapStatus}>
<Entypo name="circle" size={12} color={colors.primary} />
<Text style={{ ...styles.text, color: colors.primary, marginLeft: 5 }}>
{translate('settingScreen.priorityScreen.priorities')}
</Text>
</View>
)}
<AntDesign name="down" size={14} color={task?.priority || priority ? '#000000' : colors.primary} />
</View>
</TouchableOpacity>
</>
);
});
return (
<>
<TaskPriorityPopup
priorityName={task ? task?.priority : priority}
visible={openModal}
setSelectedPriority={(e) => onChangePriority(e.value)}
onDismiss={() => setOpenModal(false)}
/>
<TouchableOpacity onPress={() => setOpenModal(true)}>
<View
style={{
...styles.container,
...containerStyle,
borderColor: colors.border,
backgroundColor: currentPriority?.bgColor,
}}
>
{(task?.priority || priority) && currentPriority ? (
<View style={styles.wrapStatus}>
{currentPriority.icon}
<Text style={{ ...styles.text, marginLeft: 10 }}>
{limitTextCharaters({

Check warning on line 73 in apps/mobile/app/components/TaskPriority.tsx

View workflow job for this annotation

GitHub Actions / Cspell 

Unknown word (Charaters)
text: currentPriority.name,
numChars: 15,
})}
</Text>
</View>
) : (
<View style={styles.wrapStatus}>
<Entypo name="circle" size={12} color={colors.primary} />

Check warning on line 81 in apps/mobile/app/components/TaskPriority.tsx

View workflow job for this annotation

GitHub Actions / Cspell 

Unknown word (Entypo)
<Text
style={{ ...styles.text, color: colors.primary, marginLeft: 5 }}
>
{translate("settingScreen.priorityScreen.priorities")}
</Text>
</View>
)}
<AntDesign
name="down"
size={14}
color={task?.priority || priority ? "#000000" : colors.primary}
/>
</View>
</TouchableOpacity>
</>
)
},
)

const styles = StyleSheet.create({
container: {
alignItems: 'center',
borderColor: 'rgba(0,0,0,0.16)',
alignItems: "center",
borderColor: "rgba(0,0,0,0.16)",
borderRadius: 10,
borderWidth: 1,
flexDirection: 'row',
justifyContent: 'space-between',
flexDirection: "row",
justifyContent: "space-between",
minHeight: 30,
minWidth: 100,
paddingHorizontal: 8
paddingHorizontal: 8,
},
text: {
fontFamily: typography.fonts.PlusJakartaSans.semiBold,
fontSize: 10
fontSize: 10,
},
wrapStatus: {
alignItems: 'center',
flexDirection: 'row',
width: '70%'
}
});
alignItems: "center",
flexDirection: "row",
width: "70%",
},
})

export default TaskPriority;
export default TaskPriority
106 changes: 57 additions & 49 deletions apps/mobile/app/components/TaskSize.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,56 +1,60 @@
/* eslint-disable react-native/no-color-literals */
/* eslint-disable react-native/no-inline-styles */
import React, { FC, useState } from 'react';
import { TouchableOpacity, View, Text, StyleSheet, ViewStyle, TextStyle } from 'react-native';
import { AntDesign, Entypo } from '@expo/vector-icons';
import { observer } from 'mobx-react-lite';
import { ITeamTask } from '../services/interfaces/ITask';
import { useTeamTasks } from '../services/hooks/features/useTeamTasks';
import { showMessage } from 'react-native-flash-message';
import { typography, useAppTheme } from '../theme';
import TaskSizePopup from './TaskSizePopup';
import { translate } from '../i18n';
import { limitTextCharaters } from '../helpers/sub-text';
import { useTaskSizeValue } from './StatusType';
import React, { FC, useState } from "react"
import { TouchableOpacity, View, Text, StyleSheet, ViewStyle, TextStyle } from "react-native"
import { AntDesign, Entypo } from "@expo/vector-icons"

Check warning on line 5 in apps/mobile/app/components/TaskSize.tsx

View workflow job for this annotation

GitHub Actions / Cspell 

Unknown word (Entypo)
import { observer } from "mobx-react-lite"
import { ITeamTask } from "../services/interfaces/ITask"
import { useTeamTasks } from "../services/hooks/features/useTeamTasks"
import { showMessage } from "react-native-flash-message"
import { typography, useAppTheme } from "../theme"
import TaskSizePopup from "./TaskSizePopup"
import { translate } from "../i18n"
import { limitTextCharaters } from "../helpers/sub-text"

Check warning on line 13 in apps/mobile/app/components/TaskSize.tsx

View workflow job for this annotation

GitHub Actions / Cspell 

Unknown word (Charaters)
import { useTaskSizeValue } from "./StatusType"

interface TaskSizeProps {
task?: ITeamTask;
containerStyle?: ViewStyle;
statusTextSyle?: TextStyle;
size?: string;
setSize?: (size: string) => unknown;
task?: ITeamTask
containerStyle?: ViewStyle
statusTextSyle?: TextStyle

Check warning on line 19 in apps/mobile/app/components/TaskSize.tsx

View workflow job for this annotation

GitHub Actions / Cspell 

Unknown word (Syle)
size?: string
setSize?: (size: string) => unknown
}

const TaskSize: FC<TaskSizeProps> = observer(({ task, containerStyle, setSize, size }) => {
const { colors } = useAppTheme();
const { updateTask } = useTeamTasks();
const [openModal, setOpenModal] = useState(false);
const { colors } = useAppTheme()
const { updateTask } = useTeamTasks()
const [openModal, setOpenModal] = useState(false)

const allTaskSizes = useTaskSizeValue();
const allTaskSizes = useTaskSizeValue()

const sizeValue = (task?.size?.split('-').join(' ') || (size && size.split('-').join(' ')))?.toLowerCase();
const sizeValue = (
task?.size?.split("-").join(" ") ||
(size && size.split("-").join(" "))
)?.toLowerCase()

const currentSize =
allTaskSizes && Object.values(allTaskSizes).find((item) => item.name.toLowerCase() === sizeValue);
allTaskSizes &&
Object.values(allTaskSizes).find((item) => item.name.toLowerCase() === sizeValue)

const onChangeSize = async (text) => {
const onChangeSize = async (text: string) => {
if (task) {
const taskEdit = {
...task,
size: text
};
size: task?.size === text ? null : text,
}

const { response } = await updateTask(taskEdit, task.id);
const { response } = await updateTask(taskEdit, task.id)
if (response.status !== 202) {
showMessage({
message: 'Something went wrong',
type: 'danger'
});
message: "Something went wrong",
type: "danger",
})
}
} else {
setSize(text);
setSize(text)
}
};
}

return (
<>
Expand All @@ -66,7 +70,7 @@ const TaskSize: FC<TaskSizeProps> = observer(({ task, containerStyle, setSize, s
...styles.container,
...containerStyle,
borderColor: colors.border,
backgroundColor: currentSize?.bgColor
backgroundColor: currentSize?.bgColor,
}}
>
{(task?.size || size) && currentSize ? (
Expand All @@ -80,38 +84,42 @@ const TaskSize: FC<TaskSizeProps> = observer(({ task, containerStyle, setSize, s
<View style={styles.wrapStatus}>
<Entypo name="circle" size={12} color={colors.primary} />

Check warning on line 85 in apps/mobile/app/components/TaskSize.tsx

View workflow job for this annotation

GitHub Actions / Cspell 

Unknown word (Entypo)
<Text style={{ ...styles.text, color: colors.primary, marginLeft: 5 }}>
{translate('settingScreen.sizeScreen.sizes')}
{translate("settingScreen.sizeScreen.sizes")}
</Text>
</View>
)}
<AntDesign name="down" size={14} color={task?.size || size ? '#000000' : colors.primary} />
<AntDesign
name="down"
size={14}
color={task?.size || size ? "#000000" : colors.primary}
/>
</View>
</TouchableOpacity>
</>
);
});
)
})

const styles = StyleSheet.create({
container: {
alignItems: 'center',
borderColor: 'rgba(0,0,0,0.16)',
alignItems: "center",
borderColor: "rgba(0,0,0,0.16)",
borderRadius: 10,
borderWidth: 1,
flexDirection: 'row',
justifyContent: 'space-between',
flexDirection: "row",
justifyContent: "space-between",
minHeight: 30,
minWidth: 100,
paddingHorizontal: 8
paddingHorizontal: 8,
},
text: {
fontFamily: typography.fonts.PlusJakartaSans.semiBold,
fontSize: 10
fontSize: 10,
},
wrapStatus: {
alignItems: 'center',
flexDirection: 'row',
width: '70%'
}
});
alignItems: "center",
flexDirection: "row",
width: "70%",
},
})

export default TaskSize;
export default TaskSize
7 changes: 3 additions & 4 deletions apps/mobile/app/components/TaskStatus.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
import React, { FC, useState } from "react"
import { TouchableOpacity, View, Text, StyleSheet, ViewStyle, TextStyle } from "react-native"
import { AntDesign, Feather } from "@expo/vector-icons"
import { ITaskStatus, ITeamTask } from "../services/interfaces/ITask"
import { ITeamTask } from "../services/interfaces/ITask"
import { observer } from "mobx-react-lite"
import { useTeamTasks } from "../services/hooks/features/useTeamTasks"
import TaskStatusPopup from "./TaskStatusPopup"
Expand Down Expand Up @@ -38,12 +38,11 @@ const TaskStatus: FC<TaskStatusProps> = observer(
allStatuses &&
Object.values(allStatuses).find((item) => item?.name.toLowerCase() === statusValue)

const onChangeStatus = async (text) => {
const onChangeStatus = async (text: string) => {
if (task) {
const value: ITaskStatus = text
const taskEdit = {
...task,
status: value,
status: task?.status === text ? null : text,
}

await updateTask(taskEdit, task.id)
Expand Down
Loading

0 comments on commit 87a1a6d

Please sign in to comment.