Skip to content

Commit

Permalink
added the create status from modal functionality and ui (#1950)
Browse files Browse the repository at this point in the history 
* added the create status from modal functionality and ui

* added create size functionality and ui

* added create priority from modal

* added the create version from task screen modal functionality and ui
  • Loading branch information
@desperado1802
desperado1802 authored Dec 4, 2023
1 parent 7bea142 commit 5e9853e
Show file tree
Hide file tree
Showing 10 changed files with 676 additions and 415 deletions.
4 changes: 4 additions & 0 deletions apps/mobile/app/components/Task/DetailsBlock/blocks/TaskMainInfo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,7 @@ const TaskMainInfo = observer(() => {
>
<TaskVersion
task={task}
canCreateVersion={true}
containerStyle={{
width: '70%',
borderRadius: 3
Expand Down Expand Up @@ -187,6 +188,7 @@ const TaskMainInfo = observer(() => {
>
<TaskStatus
task={task}
canCreateStatus={true}
containerStyle={{
width: '70%',
borderRadius: 3,
Expand Down Expand Up @@ -226,6 +228,7 @@ const TaskMainInfo = observer(() => {
>
<TaskSize
task={task}
canCreateSize={true}
containerStyle={{
width: '70%',
borderRadius: 3,
Expand All @@ -245,6 +248,7 @@ const TaskMainInfo = observer(() => {
>
<TaskPriority
task={task}
canCreatePriority={true}
containerStyle={{
width: '70%',
borderRadius: 3,
Expand Down
103 changes: 51 additions & 52 deletions apps/mobile/app/components/TaskPriority.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,53 +1,53 @@
/* 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';
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';

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

const TaskPriority: FC<TaskPriorityProps> = observer(
({ task, containerStyle, priority, setPriority }) => {
const { colors } = useAppTheme()
const { updateTask } = useTeamTasks()
const [openModal, setOpenModal] = useState(false)
({ task, containerStyle, priority, setPriority, canCreatePriority }) => {
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()
task?.priority?.split('-').join(' ') ||
(priority && priority.split('-').join(' '))
)?.toLowerCase();

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

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

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

return (
<>
Expand All @@ -56,14 +56,15 @@ const TaskPriority: FC<TaskPriorityProps> = observer(
visible={openModal}
setSelectedPriority={(e) => onChangePriority(e.value)}
onDismiss={() => setOpenModal(false)}
canCreatePriority={canCreatePriority}
/>
<TouchableOpacity onPress={() => setOpenModal(true)}>
<View
style={{
...styles.container,
...containerStyle,
borderColor: colors.border,
backgroundColor: currentPriority?.bgColor,
backgroundColor: currentPriority?.bgColor
}}
>
{(task?.priority || priority) && currentPriority ? (
Expand All @@ -72,53 +73,51 @@ const TaskPriority: FC<TaskPriorityProps> = observer(
<Text style={{ ...styles.text, marginLeft: 10 }}>
{limitTextCharaters({
text: currentPriority.name,
numChars: 15,
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 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}
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;
104 changes: 85 additions & 19 deletions apps/mobile/app/components/TaskPriorityPopup.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/* eslint-disable react-native/no-inline-styles */
/* eslint-disable react-native/no-color-literals */
import React, { FC } from 'react';
import React, { FC, useState } from 'react';
import {
View,
ViewStyle,
Expand All @@ -12,19 +12,21 @@ import {
TouchableOpacity,
TouchableWithoutFeedback
} from 'react-native';
import { Feather, AntDesign } from '@expo/vector-icons';
import { spacing, useAppTheme } from '../theme';
import { Feather, AntDesign, Ionicons } from '@expo/vector-icons';
import { spacing, useAppTheme, typography } from '../theme';
import { BadgedTaskPriority } from './PriorityIcon';
import { useTaskPriority } from '../services/hooks/features/useTaskPriority';
import { ITaskPriorityItem } from '../services/interfaces/ITaskPriority';
import { translate } from '../i18n';
import { BlurView } from 'expo-blur';
import TaskPriorityForm from '../screens/Authenticated/TaskPrioritiesScreen/components/TaskPriorityForm';

export interface Props {
visible: boolean;
onDismiss: () => unknown;
priorityName: string;
setSelectedPriority: (status: ITaskPriorityItem) => unknown;
canCreatePriority?: boolean;
}

const ModalPopUp = ({ visible, children, onDismiss }) => {
Expand Down Expand Up @@ -74,31 +76,77 @@ const TaskPriorityPopup: FC<Props> = function TaskPriorityPopup({
visible,
onDismiss,
setSelectedPriority,
priorityName
priorityName,
canCreatePriority
}) {
const { allTaskPriorities } = useTaskPriority();
const { colors } = useAppTheme();
const { colors, dark } = useAppTheme();
const { createPriority, updatePriority } = useTaskPriority();

const [createPriorityMode, setCreatePriorityMode] = useState<boolean>(false);

const onPrioritySelected = (size: ITaskPriorityItem) => {
setSelectedPriority(size);
onDismiss();
};

return (
<ModalPopUp visible={visible} onDismiss={onDismiss}>
<View style={{ ...styles.container, backgroundColor: colors.background }}>
<Text style={{ ...styles.title, color: colors.primary }}>
{translate('settingScreen.priorityScreen.priorities')}
</Text>
<FlatList
data={allTaskPriorities}
contentContainerStyle={{ paddingHorizontal: 10 }}
renderItem={({ item }) => (
<Item currentSizeName={priorityName} onPrioritySelected={onPrioritySelected} priority={item} />
)}
legacyImplementation={true}
showsVerticalScrollIndicator={true}
keyExtractor={(_, index) => index.toString()}
/>
<View
style={{
...styles.container,
backgroundColor: colors.background,
height: canCreatePriority ? 460 : 396,
overflow: canCreatePriority ? 'hidden' : 'scroll'
}}
>
{!createPriorityMode ? (
<>
<Text style={{ ...styles.title, color: colors.primary }}>
{translate('settingScreen.priorityScreen.priorities')}
</Text>
<FlatList
data={allTaskPriorities}
contentContainerStyle={{ paddingHorizontal: 10 }}
renderItem={({ item }) => (
<Item
currentSizeName={priorityName}
onPrioritySelected={onPrioritySelected}
priority={item}
/>
)}
legacyImplementation={true}
showsVerticalScrollIndicator={true}
keyExtractor={(_, index) => index.toString()}
/>
{canCreatePriority && (
<TouchableOpacity
style={{
...styles.createButton,
borderColor: dark ? '#6755C9' : '#3826A6'
}}
onPress={() => setCreatePriorityMode(true)}
>
<Ionicons name="add" size={24} color={dark ? '#6755C9' : '#3826A6'} />
<Text
style={{
...styles.btnText,
color: dark ? '#6755C9' : '#3826A6'
}}
>
{translate('settingScreen.priorityScreen.createNewPriorityText')}
</Text>
</TouchableOpacity>
)}
</>
) : (
<TaskPriorityForm
onDismiss={() => setCreatePriorityMode(false)}
onCreatePriority={createPriority}
onUpdatePriority={updatePriority}
isEdit={false}
/>
)}
</View>
</ModalPopUp>
);
Expand Down Expand Up @@ -138,6 +186,12 @@ const $modalBackGround: ViewStyle = {
};

const styles = StyleSheet.create({
btnText: {
color: '#3826A6',
fontFamily: typography.primary.semiBold,
fontSize: 16,
fontStyle: 'normal'
},
colorFrame: {
borderRadius: 10,
height: 44,
Expand All @@ -154,6 +208,18 @@ const styles = StyleSheet.create({
paddingVertical: 16,
width: '90%'
},
createButton: {
alignItems: 'center',
alignSelf: 'center',
borderColor: '#3826A6',
borderRadius: 12,
borderWidth: 2,
flexDirection: 'row',
justifyContent: 'center',
marginTop: 10,
padding: 12,
width: '80%'
},
title: {
fontSize: spacing.medium - 2,
marginBottom: 16,
Expand Down
Loading

0 comments on commit 5e9853e

Please sign in to comment.