feat: improve task selector

tolgee · Jul 25, 2024 · d958376 · d958376
1 parent 2ff8c0e
commit d958376
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 47 deletions.
diff --git a/webapp/src/component/task/assigneeSelect/AssigneeSearchSelectPopover.tsx b/webapp/src/component/task/assigneeSelect/AssigneeSearchSelectPopover.tsx
@@ -7,6 +7,7 @@ import {
   Box,
   styled,
   Button,
+  Checkbox,
 } from '@mui/material';
 import { useTranslate } from '@tolgee/react';
 import { useDebounce } from 'use-debounce';
@@ -173,28 +174,38 @@ export const AssigneeSearchSelectPopover: React.FC<Props> = ({
             getOptionLabel={(u) => u.name || ''}
             PopperComponent={PopperComponent}
             PaperComponent={PaperComponent}
-            renderOption={(props, option) => (
-              <React.Fragment key={option.id}>
-                <MenuItem
-                  {...props}
-                  selected={Boolean(selection.find((u) => u.id === option.id))}
-                  data-cy="user-switch-item"
-                >
-                  <AssigneeSearchSelectItem data={option} />
-                </MenuItem>
-                {usersLoadable.hasNextPage &&
-                  option.id === items![items!.length - 1].id && (
-                    <Box display="flex" justifyContent="center" mt={0.5}>
-                      <Button
-                        size="small"
-                        onClick={() => usersLoadable.fetchNextPage()}
-                      >
-                        {t('global_load_more')}
-                      </Button>
-                    </Box>
-                  )}
-              </React.Fragment>
-            )}
+            renderOption={(props, option) => {
+              const selected = Boolean(
+                selection.find((u) => u.id === option.id)
+              );
+              return (
+                <React.Fragment key={option.id}>
+                  <MenuItem
+                    {...props}
+                    selected={selected}
+                    data-cy="user-switch-item"
+                  >
+                    <Checkbox
+                      checked={selected}
+                      size="small"
+                      sx={{ marginLeft: -1, marginRight: 0.5 }}
+                    />
+                    <AssigneeSearchSelectItem data={option} />
+                  </MenuItem>
+                  {usersLoadable.hasNextPage &&
+                    option.id === items![items!.length - 1].id && (
+                      <Box display="flex" justifyContent="center" mt={0.5}>
+                        <Button
+                          size="small"
+                          onClick={() => usersLoadable.fetchNextPage()}
+                        >
+                          {t('global_load_more')}
+                        </Button>
+                      </Box>
+                    )}
+                </React.Fragment>
+              );
+            }}
             onChange={(_, newValue) => {
               setSelection(newValue);
             }}

diff --git a/webapp/src/component/task/taskSelect/TaskSearchSelectPopover.tsx b/webapp/src/component/task/taskSelect/TaskSearchSelectPopover.tsx
@@ -167,7 +167,7 @@ export const TaskSearchSelectPopover: React.FC<Props> = ({
               <React.Fragment key={option.id}>
                 <MenuItem
                   {...props}
-                  selected={Boolean()}
+                  selected={option.id === selected?.id}
                   data-cy="task-select-item"
                 >
                   <TaskSearchSelectItem data={option} />

diff --git a/webapp/src/service/apiSchema.generated.ts b/webapp/src/service/apiSchema.generated.ts
@@ -2040,10 +2040,10 @@ export interface components {
       convertPlaceholdersToIcu: boolean;
     };
     ImportSettingsModel: {
-      /** @description If true, placeholders from other formats will be converted to ICU when possible */
-      convertPlaceholdersToIcu: boolean;
       /** @description If true, key descriptions will be overridden by the import */
       overrideKeyDescriptions: boolean;
+      /** @description If true, placeholders from other formats will be converted to ICU when possible */
+      convertPlaceholdersToIcu: boolean;
     };
     TranslationCommentModel: {
       /**
@@ -2202,15 +2202,15 @@ export interface components {
       token: string;
       /** Format: int64 */
       id: number;
-      /** Format: int64 */
-      expiresAt?: number;
-      /** Format: int64 */
-      lastUsedAt?: number;
+      description: string;
       /** Format: int64 */
       createdAt: number;
       /** Format: int64 */
       updatedAt: number;
-      description: string;
+      /** Format: int64 */
+      expiresAt?: number;
+      /** Format: int64 */
+      lastUsedAt?: number;
     };
     SetOrganizationRoleDto: {
       roleType: "MEMBER" | "OWNER";
@@ -2350,14 +2350,14 @@ export interface components {
       id: number;
       projectName: string;
       userFullName?: string;
+      description: string;
+      username?: string;
       /** Format: int64 */
       projectId: number;
       /** Format: int64 */
       expiresAt?: number;
       /** Format: int64 */
       lastUsedAt?: number;
-      username?: string;
-      description: string;
       scopes: string[];
     };
     SuperTokenRequest: {
@@ -3501,14 +3501,14 @@ export interface components {
       /** Format: int64 */
       id: number;
       basePermissions: components["schemas"]["PermissionModel"];
+      /** @example This is a beautiful organization full of beautiful and clever people */
+      description?: string;
       /**
        * @description The role of currently authorized user.
        *
        * Can be null when user has direct access to one of the projects owned by the organization.
        */
       currentUserRole?: "MEMBER" | "OWNER";
-      /** @example This is a beautiful organization full of beautiful and clever people */
-      description?: string;
       /** @example btforg */
       slug: string;
       avatar?: components["schemas"]["Avatar"];
@@ -3654,20 +3654,20 @@ export interface components {
       name: string;
       /** Format: int64 */
       id: number;
-      baseTranslation?: string;
-      translation?: string;
       namespace?: string;
       description?: string;
+      baseTranslation?: string;
+      translation?: string;
     };
     KeySearchSearchResultModel: {
       view?: components["schemas"]["KeySearchResultView"];
       name: string;
       /** Format: int64 */
       id: number;
-      baseTranslation?: string;
-      translation?: string;
       namespace?: string;
       description?: string;
+      baseTranslation?: string;
+      translation?: string;
     };
     PagedModelKeySearchSearchResultModel: {
       _embedded?: {
@@ -4215,15 +4215,15 @@ export interface components {
       user: components["schemas"]["SimpleUserAccountModel"];
       /** Format: int64 */
       id: number;
-      /** Format: int64 */
-      expiresAt?: number;
-      /** Format: int64 */
-      lastUsedAt?: number;
+      description: string;
       /** Format: int64 */
       createdAt: number;
       /** Format: int64 */
       updatedAt: number;
-      description: string;
+      /** Format: int64 */
+      expiresAt?: number;
+      /** Format: int64 */
+      lastUsedAt?: number;
     };
     PagedModelOrganizationModel: {
       _embedded?: {
@@ -4344,14 +4344,14 @@ export interface components {
       id: number;
       projectName: string;
       userFullName?: string;
+      description: string;
+      username?: string;
       /** Format: int64 */
       projectId: number;
       /** Format: int64 */
       expiresAt?: number;
       /** Format: int64 */
       lastUsedAt?: number;
-      username?: string;
-      description: string;
       scopes: string[];
     };
     PagedModelUserAccountModel: {

diff --git a/webapp/src/views/projects/translations/BatchOperations/OperationTaskAddKeys.tsx b/webapp/src/views/projects/translations/BatchOperations/OperationTaskAddKeys.tsx
@@ -29,7 +29,7 @@ export const OperationTaskAddKeys = ({ disabled, onFinished }: Props) => {
   function handleAddKeys() {
     addTaskKeysLoadable.mutate(
       {
-        path: { projectId: project.id, taskId: Number(task) },
+        path: { projectId: project.id, taskId: task!.id },
         content: { 'application/json': { addKeys: selection } },
       },
       {

diff --git a/webapp/src/views/projects/translations/BatchOperations/OperationTaskRemoveKeys.tsx b/webapp/src/views/projects/translations/BatchOperations/OperationTaskRemoveKeys.tsx
@@ -29,7 +29,7 @@ export const OperationTaskRemoveKeys = ({ disabled, onFinished }: Props) => {
   function handleAddKeys() {
     addTaskKeysLoadable.mutate(
       {
-        path: { projectId: project.id, taskId: Number(task) },
+        path: { projectId: project.id, taskId: task!.id },
         content: { 'application/json': { removeKeys: selection } },
       },
       {