web: ui improvements for report edit mode

apps/web/src/components/report/reportSlice.ts

@@ -11,12 +11,14 @@ import { createSlice } from '@reduxjs/toolkit';
 import type { PayloadAction } from '@reduxjs/toolkit';
 
 type InitialState = IChartInput & {
+  dirty: boolean;
   startDate: string | null;
   endDate: string | null;
 };
 
 // First approach: define the initial state using that type
 const initialState: InitialState = {
+  dirty: false,
   name: 'screen_view',
   chartType: 'linear',
   interval: 'day',
@@ -39,10 +41,12 @@ export const reportSlice = createSlice({
         ...action.payload,
         startDate: null,
         endDate: null,
+        dirty: false,
       };
     },
     // Events
     addEvent: (state, action: PayloadAction<Omit<IChartEvent, 'id'>>) => {
+      state.dirty = true;
       state.events.push({
         id: alphabetIds[state.events.length]!,
         ...action.payload,
@@ -54,11 +58,13 @@ export const reportSlice = createSlice({
         id: string;
       }>
     ) => {
+      state.dirty = true;
       state.events = state.events.filter(
         (event) => event.id !== action.payload.id
       );
     },
     changeEvent: (state, action: PayloadAction<IChartEvent>) => {
+      state.dirty = true;
       state.events = state.events.map((event) => {
         if (event.id === action.payload.id) {
           return action.payload;
@@ -72,6 +78,7 @@ export const reportSlice = createSlice({
       state,
       action: PayloadAction<Omit<IChartBreakdown, 'id'>>
     ) => {
+      state.dirty = true;
       state.breakdowns.push({
         id: alphabetIds[state.breakdowns.length]!,
         ...action.payload,
@@ -83,11 +90,13 @@ export const reportSlice = createSlice({
         id: string;
       }>
     ) => {
+      state.dirty = true;
       state.breakdowns = state.breakdowns.filter(
         (event) => event.id !== action.payload.id
       );
     },
     changeBreakdown: (state, action: PayloadAction<IChartBreakdown>) => {
+      state.dirty = true;
       state.breakdowns = state.breakdowns.map((breakdown) => {
         if (breakdown.id === action.payload.id) {
           return action.payload;
@@ -98,11 +107,13 @@ export const reportSlice = createSlice({
 
     // Interval
     changeInterval: (state, action: PayloadAction<IInterval>) => {
+      state.dirty = true;
       state.interval = action.payload;
     },
 
     // Chart type
     changeChartType: (state, action: PayloadAction<IChartType>) => {
+      state.dirty = true;
       state.chartType = action.payload;
 
       if (
@@ -115,15 +126,18 @@ export const reportSlice = createSlice({
 
     // Date range
     changeStartDate: (state, action: PayloadAction<string>) => {
+      state.dirty = true;
       state.startDate = action.payload;
     },
 
     // Date range
     changeEndDate: (state, action: PayloadAction<string>) => {
+      state.dirty = true;
       state.endDate = action.payload;
     },
 
     changeDateRanges: (state, action: PayloadAction<IChartRange>) => {
+      state.dirty = true;
       state.range = action.payload;
       if (action.payload === 0.3 || action.payload === 0.6) {
         state.interval = 'minute';