Skip to content

update the calendar view (no 20calendar) to use the translations in en.json e it.json and resized the calenadr grid to see better the tasks in the calendarview #33

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Gabry848 merged 1 commit into from
May 16, 2026
Merged

update the calendar view (no 20calendar) to use the translations in en.json e it.json and resized the calenadr grid to see better the tasks in the calendarview #33

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 15 additions & 4 deletions src/components/Calendar/CalendarGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,19 @@ import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import dayjs from 'dayjs';
import { useTranslation } from 'react-i18next';
import CalendarDay from './CalendarDay';
import { Task } from '../../services/taskService';

const MONTH_KEYS = [
'january', 'february', 'march', 'april', 'may', 'june',
'july', 'august', 'september', 'october', 'november', 'december'
];

const WEEKDAY_KEYS = [
'sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'
];

export interface CalendarGridProps {
selectedDate: string;
tasks: Task[];
Expand All @@ -26,6 +36,7 @@ const CalendarGrid: React.FC<CalendarGridProps> = ({
onPreviousMonth,
onNextMonth
}) => {
const { t } = useTranslation();
// Gruppo gli impegni per data
const groupTasksByDate = () => {
const groupedTasks: Record<string, Task[]> = {};
Expand Down Expand Up @@ -130,7 +141,7 @@ const CalendarGrid: React.FC<CalendarGridProps> = ({
</TouchableOpacity>

<Text style={styles.calendarMonthTitle}>
{dayjs(selectedDate).format('MMMM YYYY')}
{t(`calendar.months.${MONTH_KEYS[dayjs(selectedDate).month()]}`)} {dayjs(selectedDate).year()}
</Text>

<TouchableOpacity onPress={onNextMonth} style={{ padding: 6 }}>
Expand All @@ -140,9 +151,9 @@ const CalendarGrid: React.FC<CalendarGridProps> = ({

{/* Giorni della settimana */}
<View style={styles.weekdaysRow}>
{['Dom', 'Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab'].map((day, index) => (
<Text key={index} style={styles.weekdayText}>
{day}
{WEEKDAY_KEYS.map((dayKey) => (
<Text key={dayKey} style={styles.weekdayText}>
{t(`calendar.days.${dayKey}`)}
</Text>
))}
</View>
Expand Down
32 changes: 18 additions & 14 deletions src/components/Calendar/CalendarView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,11 @@ import AddTaskButton from '../Task/AddTaskButton';
import { addTaskToList } from '../TaskList/types';
import { LoadingState, EmptyState, StatusChip, AppText } from '../UI/foundation';

const MONTH_KEYS = [
'january', 'february', 'march', 'april', 'may', 'june',
'july', 'august', 'september', 'october', 'november', 'december'
];

const CalendarView: React.FC = () => {
const [selectedDate, setSelectedDate] = useState<string>(dayjs().format('YYYY-MM-DD'));
const [tasks, setTasks] = useState<TaskType[]>([]);
Expand Down Expand Up @@ -292,7 +297,7 @@ const CalendarView: React.FC = () => {
fetchTasks();
} catch (error) {
console.error("Errore nel completamento del task:", error);
Alert.alert("Errore", "Impossibile completare il task. Riprova.");
Alert.alert(t('calendar.errors.title'), t('calendar.errors.completeFailed'));
}
};

Expand All @@ -309,7 +314,7 @@ const CalendarView: React.FC = () => {
fetchTasks();
} catch (error) {
console.error("Errore nell'annullamento del completamento del task:", error);
Alert.alert("Errore", "Impossibile riaprire il task. Riprova.");
Alert.alert(t('calendar.errors.title'), t('calendar.errors.reopenFailed'));
}
};

Expand All @@ -326,7 +331,7 @@ const CalendarView: React.FC = () => {
fetchTasks();
} catch (error) {
console.error("Errore nella modifica del task:", error);
Alert.alert("Errore", "Impossibile modificare il task. Riprova.");
Alert.alert(t('calendar.errors.title'), t('calendar.errors.editFailed'));
}
};

Expand Down Expand Up @@ -362,8 +367,7 @@ const CalendarView: React.FC = () => {
categoryNameParam?: string
) => {
const priorityString = priority === 1 ? "Bassa" : priority === 2 ? "Media" : "Alta";
// Costruisci nuovo task con data di inizio dal calendario
const category = categoryNameParam || "Calendario";
const category = categoryNameParam || t('calendar.defaultCategory');
const newTask = {
id: Date.now(),
title: title.trim(),
Expand All @@ -389,8 +393,8 @@ const CalendarView: React.FC = () => {
console.error("Errore aggiunta task nel calendario:", error);
addTaskToList(newTask, category);
Alert.alert(
"Attenzione",
"Task aggiunto localmente ma errore nel salvataggio sul server."
t('calendar.errors.warningTitle'),
t('calendar.errors.localSaveWarning')
);
setShowAddTask(false);
}
Expand All @@ -412,22 +416,22 @@ const CalendarView: React.FC = () => {
<View style={styles.selectedDateHeader}>
<View style={styles.titleContainer}>
<AppText variant="subtitle" weight="300">
Impegni del {dayjs(selectedDate).format('DD MMMM YYYY')}
{t('calendar.commitmentsOf')} {dayjs(selectedDate).format('DD')} {t(`calendar.months.${MONTH_KEYS[dayjs(selectedDate).month()]}`)} {dayjs(selectedDate).year()}
</AppText>
</View>
<AddTaskButton onPress={handleAddTask} screenWidth={screenWidth} isInline={true} />
</View>

{/* Componente di caricamento */}
<LoadingState variant="dots" label="Caricamento impegni..." />
<LoadingState variant="dots" label={t('calendar.loadingEvents')} />

{/* Componente AddTask */}
<AddTask
visible={showAddTask}
onClose={handleCloseAddTask}
onSave={handleSaveTask}
allowCategorySelection={true}
categoryName="Calendario"
categoryName={t('calendar.defaultCategory')}
initialDate={selectedDate}
/>
</View>
Expand All @@ -449,13 +453,13 @@ const CalendarView: React.FC = () => {
<View style={styles.selectedDateHeader}>
<View style={styles.titleContainer}>
<AppText variant="subtitle" weight="300">
Impegni del {dayjs(selectedDate).format('DD MMMM YYYY')}
{t('calendar.commitmentsOf')} {dayjs(selectedDate).format('DD')} {t(`calendar.months.${MONTH_KEYS[dayjs(selectedDate).month()]}`)} {dayjs(selectedDate).year()}
</AppText>
{syncStatus && (syncStatus.isSyncing || syncStatus.pendingChanges > 0) && (
<View style={styles.syncIndicator}>
{syncStatus.isSyncing ? (
<StatusChip
label="Sync..."
label={t('calendar.syncing')}
tone="neutral"
leftIcon={<ActivityIndicator size="small" color="#666666" />}
/>
Expand Down Expand Up @@ -487,7 +491,7 @@ const CalendarView: React.FC = () => {
) : (
<EmptyState
icon={<Ionicons name="calendar-outline" size={48} color="#cccccc" />}
title="Nessun impegno per questa data"
title={t('calendar.noEventsForDate')}
style={styles.noTasksContainer}
/>
)}
Expand All @@ -499,7 +503,7 @@ const CalendarView: React.FC = () => {
onClose={handleCloseAddTask}
onSave={handleSaveTask}
allowCategorySelection={true}
categoryName="Calendario"
categoryName={t('calendar.defaultCategory')}
initialDate={selectedDate}
/>
</View>
Expand Down
4 changes: 2 additions & 2 deletions src/components/Calendar20/AgendaView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ const AgendaView: React.FC<AgendaViewProps> = ({
if (mins < 60) return `${mins} min`;
const h = Math.floor(mins / 60);
const m = mins % 60;
if (m === 0) return h === 1 ? '1 ora' : `${h} ore`;
if (m === 0) return h === 1 ? t('calendar20.duration.hour') : t('calendar20.duration.hours', { count: h });
return `${h}h ${m}min`;
})();

Expand Down Expand Up @@ -186,7 +186,7 @@ const AgendaView: React.FC<AgendaViewProps> = ({
ListFooterComponent={
<TouchableOpacity style={styles.loadMoreButton} onPress={loadMore}>
<Ionicons name="chevron-down" size={20} color="#000000" />
<Text style={styles.loadMoreText}>Load more</Text>
<Text style={styles.loadMoreText}>{t('calendar20.loadMore')}</Text>
</TouchableOpacity>
}
/>
Expand Down
6 changes: 4 additions & 2 deletions src/components/Calendar20/Calendar20View.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import FABMenu from './FABMenu';
import AddTask from '../Task/AddTask';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { LoadingState } from '../UI/foundation';
import { useTranslation } from 'react-i18next';

dayjs.extend(isoWeek);

Expand All @@ -32,6 +33,7 @@ interface Calendar20ViewProps {
}

const Calendar20View: React.FC<Calendar20ViewProps> = ({ onClose }) => {
const { t } = useTranslation();
const [viewType, setViewType] = useState<CalendarViewType>('month');
const [currentDate, setCurrentDate] = useState(dayjs());
const [rawTasks, setRawTasks] = useState<Task[]>([]);
Expand Down Expand Up @@ -273,7 +275,7 @@ const Calendar20View: React.FC<Calendar20ViewProps> = ({ onClose }) => {
) => {
const { addTask } = await import('../../services/taskService');
const priorityString = priority === 1 ? 'Bassa' : priority === 2 ? 'Media' : 'Alta';
const category = categoryNameParam || 'Calendario';
const category = categoryNameParam || t('calendar.defaultCategory');
// Usa la data selezionata se disponibile, altrimenti usa la data corrente
const taskDate = selectedDateForTask || currentDate;
const newTask: Task = {
Expand Down Expand Up @@ -416,7 +418,7 @@ const Calendar20View: React.FC<Calendar20ViewProps> = ({ onClose }) => {
}}
onSave={handleSaveTask}
allowCategorySelection={true}
categoryName="Calendario"
categoryName={t('calendar.defaultCategory')}
initialDate={(selectedDateForTask || currentDate).format('YYYY-MM-DD')}
/>
</View>
Expand Down
Loading