feat: Add user profile pictures (#510)

TomBursch · web-flow · commit fb57a98fccdb · 2025-04-19T16:03:40.000+02:00
diff --git a/kitchenowl/lib/cubits/settings_user_cubit.dart b/kitchenowl/lib/cubits/settings_user_cubit.dart
@@ -5,14 +5,15 @@ import 'package:flutter/widgets.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:kitchenowl/cubits/auth_cubit.dart';
 import 'package:kitchenowl/enums/update_enum.dart';
+import 'package:kitchenowl/helpers/named_bytearray.dart';
 import 'package:kitchenowl/models/token.dart';
 import 'package:kitchenowl/models/user.dart';
 import 'package:kitchenowl/services/api/api_service.dart';
 
 class SettingsUserCubit extends Cubit<SettingsUserState> {
   final int? userId;
   SettingsUserCubit(this.userId, [User? initialUserData])
-      : super(SettingsUserState(initialUserData, false, UpdateEnum.unchanged)) {
+      : super(SettingsUserState(user: initialUserData)) {
     refresh();
   }
 
@@ -26,27 +27,34 @@ class SettingsUserCubit extends Cubit<SettingsUserState> {
 
   Future<void> updateUser({
     required BuildContext context,
-    String? name,
     String? username,
     String? password,
     String? email,
   }) async {
     if (state.user == null) return;
+    String? image;
+    if (state.image != null) {
+      image = state.image!.isEmpty
+          ? ''
+          : await ApiService.getInstance().uploadBytes(state.image!);
+    }
     bool res = false;
     res = userId != null
         ? await ApiService.getInstance().updateUserById(
             userId!,
-            name: name,
+            name: state.name,
             password: password,
             email: email,
+            image: image,
             admin: (state.setAdmin != state.user!.serverAdmin)
                 ? state.setAdmin
                 : null,
           )
         : await ApiService.getInstance().updateUser(
-            name: name,
+            name: state.name,
             password: password,
             email: email,
+            image: image,
           );
     if (res) {
       emit(state.copyWith(updateState: UpdateEnum.updated));
@@ -57,10 +65,18 @@ class SettingsUserCubit extends Cubit<SettingsUserState> {
     }
   }
 
+  void setName(String name) {
+    emit(state.copyWith(name: name));
+  }
+
   void setAdmin(bool newAdmin) {
     emit(state.copyWith(setAdmin: newAdmin));
   }
 
+  void setImage(NamedByteArray image) {
+    emit(state.copyWith(image: image));
+  }
+
   Future<String?> addLongLivedToken(String name) async {
     final token = await ApiService.getInstance().createLongLivedToken(name);
     if (token != null) refresh();
@@ -94,22 +110,38 @@ class SettingsUserCubit extends Cubit<SettingsUserState> {
 
 class SettingsUserState extends Equatable {
   final User? user;
+
+  final String? name;
+  final NamedByteArray? image;
   final bool setAdmin;
   final UpdateEnum updateState;
 
-  const SettingsUserState(this.user, this.setAdmin, this.updateState);
+  const SettingsUserState({
+    this.user,
+    this.name,
+    this.setAdmin = false,
+    this.updateState = UpdateEnum.unchanged,
+    this.image,
+  });
 
   @override
-  List<Object?> get props => [user, setAdmin, updateState];
+  List<Object?> get props => [user, name, setAdmin, updateState, image];
 
   SettingsUserState copyWith({
     User? user,
+    String? name,
     bool? setAdmin,
     UpdateEnum? updateState,
+    NamedByteArray? image,
   }) =>
       SettingsUserState(
-        user ?? this.user,
-        setAdmin ?? this.setAdmin,
-        updateState ?? this.updateState,
+        user: user ?? this.user,
+        name: name ?? this.name,
+        setAdmin: setAdmin ?? this.setAdmin,
+        updateState: updateState ?? this.updateState,
+        image: image ?? this.image,
       );
+
+  bool hasChanges() =>
+      name != null && (user == null || user!.name != name) || image != null;
 }
diff --git a/kitchenowl/lib/models/user.dart b/kitchenowl/lib/models/user.dart
@@ -56,6 +56,7 @@ class User extends Model {
         name,
         email,
         emailVerified,
+        image,
         username,
         serverAdmin,
         tokens,
diff --git a/kitchenowl/lib/pages/settings_user_page.dart b/kitchenowl/lib/pages/settings_user_page.dart
@@ -11,6 +11,7 @@ import 'package:kitchenowl/pages/settings_user_email_page.dart';
 import 'package:kitchenowl/pages/settings_user_linked_accounts_page.dart';
 import 'package:kitchenowl/pages/settings_user_password_page.dart';
 import 'package:kitchenowl/pages/settings_user_sessions_page.dart';
+import 'package:kitchenowl/widgets/user_image_selector.dart';
 
 class SettingsUserPage extends StatefulWidget {
   final User? user;
@@ -131,21 +132,12 @@ class _SettingsUserPageState extends State<SettingsUserPage> {
                     BlocBuilder<SettingsUserCubit, SettingsUserState>(
                       bloc: cubit,
                       builder: (context, state) => Center(
-                        child: CircleAvatar(
-                          foregroundImage: state.user?.image?.isEmpty ?? true
-                              ? null
-                              : getImageProvider(
-                                  context,
-                                  state.user!.image!,
-                                ),
-                          radius: 45,
-                          child: nameController.text.isNotEmpty
-                              ? Text(
-                                  nameController.text.substring(0, 1),
-                                  textScaler: MediaQuery.textScalerOf(context)
-                                      .clamp(minScaleFactor: 2),
-                                )
-                              : null,
+                        child: UserImageSelector(
+                          name: nameController.text,
+                          originalImage: state.user?.image,
+                          image: state.image,
+                          tooltip: AppLocalizations.of(context)!.imageSelect,
+                          setImage: cubit.setImage,
                         ),
                       ),
                     ),
@@ -190,6 +182,7 @@ class _SettingsUserPageState extends State<SettingsUserPage> {
                       decoration: InputDecoration(
                         labelText: AppLocalizations.of(context)!.name,
                       ),
+                      onChanged: cubit.setName,
                     ),
                     if (cubit.userId == null && App.isDefaultServer) ...[
                       const SizedBox(height: 8),
@@ -226,12 +219,17 @@ class _SettingsUserPageState extends State<SettingsUserPage> {
                     const SizedBox(height: 8),
                     Padding(
                       padding: const EdgeInsets.only(bottom: 24),
-                      child: LoadingElevatedButton(
-                        onPressed: () => cubit.updateUser(
-                          context: context,
-                          name: nameController.text,
+                      child: BlocBuilder<SettingsUserCubit, SettingsUserState>(
+                        bloc: cubit,
+                        builder: (context, state) => LoadingElevatedButton(
+                          onPressed: state.hasChanges() &&
+                                  (state.name?.isNotEmpty ?? true)
+                              ? () => cubit.updateUser(
+                                    context: context,
+                                  )
+                              : null,
+                          child: Text(AppLocalizations.of(context)!.save),
                         ),
-                        child: Text(AppLocalizations.of(context)!.save),
                       ),
                     ),
                     const Divider(),
diff --git a/kitchenowl/lib/services/api/user.dart b/kitchenowl/lib/services/api/user.dart
@@ -43,6 +43,7 @@ extension UserApi on ApiService {
   }
 
   Future<bool> updateUser({
+    String? image,
     String? name,
     String? password,
     String? email,
@@ -53,6 +54,7 @@ extension UserApi on ApiService {
       if (name != null) 'name': name,
       if (password != null) 'password': password,
       if (email != null) 'email': email,
+      if (image != null) 'photo': image,
     };
 
     final res = await post(baseRoute, jsonEncode(body));
@@ -62,6 +64,7 @@ extension UserApi on ApiService {
 
   Future<bool> updateUserById(
     int userId, {
+    String? image,
     String? name,
     String? password,
     String? email,
@@ -74,6 +77,7 @@ extension UserApi on ApiService {
       if (password != null) 'password': password,
       if (email != null) 'email': email,
       if (admin != null) 'admin': admin,
+      if (image != null) 'photo': image,
     };
 
     final res = await post('$baseRoute/$userId', jsonEncode(body));
diff --git a/kitchenowl/lib/widgets/user_image_selector.dart b/kitchenowl/lib/widgets/user_image_selector.dart
@@ -0,0 +1,71 @@
+import 'package:flutter/material.dart';
+import 'package:kitchenowl/helpers/named_bytearray.dart';
+import 'package:kitchenowl/kitchenowl.dart';
+
+class UserImageSelector extends StatelessWidget {
+  final NamedByteArray? image;
+  final String? originalImage;
+  final void Function(NamedByteArray) setImage;
+  final String? tooltip;
+  final String? name;
+
+  const UserImageSelector({
+    super.key,
+    this.image,
+    this.originalImage,
+    required this.setImage,
+    this.tooltip,
+    this.name,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return CircleAvatar(
+      backgroundImage: hasDominantImage() ? getDominantImage(context)! : null,
+      radius: 45,
+      child: IconButton(
+        icon: hasDominantImage()
+            ? const Icon(Icons.edit)
+            : const Icon(Icons.add_photo_alternate_rounded),
+        tooltip: tooltip ?? AppLocalizations.of(context)!.imageSelect,
+        color: hasDominantImage()
+            ? Theme.of(context).colorScheme.secondary
+            : Theme.of(context).colorScheme.onSecondary,
+        onPressed: () async {
+          NamedByteArray? file = await selectFile(
+            context: context,
+            title: tooltip ?? AppLocalizations.of(context)!.imageSelect,
+            deleteOption: hasDominantImage(),
+          );
+          if (file != null) {
+            setImage(file);
+          }
+        },
+      ),
+    );
+  }
+
+  bool hasDominantImage() {
+    if (image != null && image!.isNotEmpty) {
+      return true;
+    } else if (image == null && (originalImage?.isNotEmpty ?? false)) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  ImageProvider<Object>? getDominantImage(BuildContext context) {
+    if (image != null && image!.isNotEmpty) {
+      return MemoryImage(image!.bytes);
+    } else if (originalImage?.isNotEmpty ?? false) {
+      return getImageProvider(
+        context,
+        originalImage!,
+        maxWidth: MediaQuery.of(context).size.width.toInt(),
+      );
+    } else {
+      return null;
+    }
+  }
+}
