Add button to show all pieces to the dialog

Author: rassvet-ii

components/calculationInput/common/PositiveIntegerOnlyInput.tsx

@@ -11,11 +11,12 @@ interface PositiveIntegerOnlyInputProps<T extends FieldValues> {
   helperText: string;
   min?: number;
   inputLabel?: string;
+  focused?: boolean;
 }
 
 const PositiveIntegerOnlyInput = function<T>({
   name, control, showError, helperText,
-  min = 1, inputLabel,
+  min = 1, inputLabel, focused,
 }: PositiveIntegerOnlyInputProps<T>) {
   const {t} = useTranslation('home');
   return <Controller
@@ -42,6 +43,7 @@ const PositiveIntegerOnlyInput = function<T>({
     render={({field}) => (
       <TextField
         {...field}
+        inputRef={(elm) => elm && focused && elm.focus()}
         inputProps={{pattern: '\\d*'}}
         variant="outlined"
         error={showError}

components/calculationInput/equipments/inventory/AddToInventoryDialog.tsx

@@ -1,9 +1,13 @@
 import styles from './AddToInventoryDialog.module.scss';
 import {
+  Box,
   Button, Dialog, DialogActions, DialogContent, DialogTitle,
+  Stack,
+  ToggleButton,
+  ToggleButtonGroup,
   useMediaQuery, useTheme,
 } from '@mui/material';
-import React, {useEffect, useMemo, useReducer} from 'react';
+import React, {useEffect, useMemo, useReducer, useState} from 'react';
 import {useTranslation} from 'next-i18next';
 import {useForm} from 'react-hook-form';
 import {
@@ -44,23 +48,30 @@ const AddToInventoryDialog = ({
     open && notifyOpened();
   }, [open]);
 
-  const pieceIds = useMemo(() => drops.map((drop) => drop.id), [drops]);
+  const [mode, setMode] = useState<'all' | 'lack' | 'required'>('lack');
+
   const pieces = useMemo(() => {
     // 20-3: Necklace, Watch, Bag
     // 20-4: Watch, Charm, Badge
     // 13-1: Shoes, Gloves, Hat
     // descending tier -> descending category order?
-    return Array.from(piecesState.values())
-        .filter((state) => pieceIds.includes(state.pieceId) && state.needCount > 0)
-        .sort(buildComparator(
-            (piece) => equipById.get(piece.pieceId),
-            buildComparator((e) => e.tier, Comparators.numberDescending),
-            buildComparator((e) => e.category, buildArrayIndexComparator(
-                EquipmentCategories,
-                SortingOrder.Descending
-            )),
-        ));
-  }, [piecesState, pieceIds, equipById]);
+    return drops.map(({id}) => (piecesState.get(id) ?? {
+      pieceId: id,
+      needCount: 0,
+      inStockCount: 0,
+    })).filter((state) => ({
+      all: true,
+      lack: state.needCount < state.inStockCount,
+      required: state.needCount > 0,
+    }[mode])).sort(buildComparator(
+        (piece) => equipById.get(piece.pieceId),
+        buildComparator((e) => e.tier, Comparators.numberDescending),
+        buildComparator((e) => e.category, buildArrayIndexComparator(
+            EquipmentCategories,
+            SortingOrder.Descending
+        )),
+    ));
+  }, [drops, piecesState, mode, equipById]);
   const defaultValues = useMemo(() => {
     return pieces.reduce<InventoryForm>((acc, piece) => {
       acc[piece.pieceId] = '';
@@ -102,26 +113,35 @@ const AddToInventoryDialog = ({
   return !onceOpen ? null : <Dialog open={open} keepMounted fullWidth
     fullScreen={hasManyPieces() && isFullScreen}
     maxWidth={hasManyPieces() && 'xl'}>
-    <DialogTitle>獲得した設計図</DialogTitle>
+    <Stack component={DialogTitle} direction='row' alignItems='center'>
+      {t('addPieceDialog.addToInventory')}
+      <Box flexGrow={1} />
+      <ToggleButtonGroup exclusive size='small'
+        value={mode} onChange={(e, value) => value && setMode(value)}>
+        <ToggleButton value='all'>{t('piecesFilter.filter.all')}</ToggleButton>
+        <ToggleButton value='lack'>{t('piecesFilter.filter.insufficient')}</ToggleButton>
+        <ToggleButton value='required'>{t('piecesFilter.filter.required')}</ToggleButton>
+      </ToggleButtonGroup>
+    </Stack>
 
     <DialogContent className={styles.dialogContentContainer}>
       <div className={styles.filler}></div>
       <div className={`${styles.container} ${isXsOrSmallerScreen && styles.xs}`}>
-        {pieces.map((piece) => {
+        {pieces.map((piece, index) => {
           return <ObtainedPieceBox key={piece.pieceId} allErrors={allErrors}
             control={control}
             equipmentsById={equipById}
-            piece={piece}/>;
+            piece={piece}
+            focused={index === 0}/>;
         })}
       </div>
+      {pieces.length === 0 && <div>{t('filterResultEmpty')}</div>}
       <div className={styles.filler}></div>
     </DialogContent>
 
     <DialogActions>
       <Button onClick={handleCancelDialog}>{t('cancelButton')}</Button>
-      <Button onClick={handleUpdateInventory} disabled={!isCountValid}>
-        追加
-      </Button>
+      <Button onClick={handleUpdateInventory} disabled={!isCountValid}>{t('addButton')}</Button>
     </DialogActions>
   </Dialog>;
 };

components/calculationInput/equipments/inventory/ObtainedPieceBox.tsx

@@ -8,19 +8,22 @@ import React from 'react';
 import {EquipmentsById} from 'components/calculationInput/PiecesCalculationCommonTypes';
 import {PieceState} from 'components/calculationInput/equipments/inventory/PiecesInventory';
 import {Control} from 'react-hook-form/dist/types/form';
-import {InventoryForm} from 'components/calculationInput/equipments/inventory/InventoryUpdateDialog';
+import {InventoryForm}
+  from 'components/calculationInput/equipments/inventory/InventoryUpdateDialog';
 import {useTranslation} from 'next-i18next';
 
 const ObtainedPieceBox = function({
   equipmentsById,
   piece,
   control,
   allErrors,
+  focused,
 }: {
   equipmentsById: EquipmentsById,
   piece: PieceState,
   control: Control<InventoryForm>,
   allErrors: any,
+  focused?: boolean,
 }) {
   const {t} = useTranslation('home');
 
@@ -38,7 +41,7 @@ const ObtainedPieceBox = function({
     </Card>
     <Box sx={{mr: 2}}/>
     <PositiveIntegerOnlyInput name={piece.pieceId}
-      min={0}
+      min={0} focused={focused}
       control={control} showError={!!allErrors[piece.pieceId]}
       helperText={allErrors[piece.pieceId]?.message ?? ''}
       inputLabel={t('addPieceDialog.obtainedCount')} />

public/locales/en/home.json

@@ -21,7 +21,9 @@
     "minimumIs": "Minimum is {{min}}",
     "maximumIs": "Maximum is {{max}}",
     "quantity": "Quantity",
-    "inStockCount": "In Stock Number"
+    "inStockCount": "In Stock Number",
+    "addToInventory": "Acquired Pieces",
+    "obtainedCount": "Acquisitions"
   },
   "selectInputMode": "Select input mode",
   "selectResultMode": "Output Mode",
@@ -46,6 +48,14 @@
     "enterNickName":  "Enter a nickname(optional)",
     "enterNickNameNormalHelperText": "Enter a student name to help you memorize equipment ownership"
   },
+  "filterResultEmpty": "Could not find any equipment matching the filter.",
+  "piecesFilter": {
+    "filter": {
+      "required": "Required",
+      "insufficient": "Insufficient",
+      "all": "All"
+    }
+  },
   "thinsToNote": {
     "title": "Things to note",
     "pointThisIsEstimation": "Recommended sweeping times is an estimation and your mileage may vary.",

public/locales/ja/home.json

@@ -22,6 +22,7 @@
     "maximumIs": "最大値は{{max}}です",
     "quantity": "欲しい数",
     "inStockCount": "所持数",
+    "addToInventory": "獲得した設計図",
     "obtainedCount": "獲得数"
   },
   "selectInputMode": "入力モード",
@@ -46,6 +47,14 @@
     "enterNickName":  "ニックネーム入力（任意）",
     "enterNickNameNormalHelperText": "生徒の名前をメモとして入力すれば、装備の管理ができます"
   },
+  "filterResultEmpty": "条件に合う装備が見つかりません。",
+  "piecesFilter": {
+    "filter": {
+      "required": "必要",
+      "insufficient": "不足",
+      "all": "すべて"
+    }
+  },
   "thinsToNote": {
     "title": "注記",
     "pointThisIsEstimation": "推奨掃討回数は予測であり、実際の報酬と大きく異なる場合もあります。",

public/locales/zh/home.json

@@ -21,7 +21,9 @@
     "minimumIs": "不能小于{{min}}",
     "maximumIs": "不能大于{{max}}",
     "quantity": "数量",
-    "inStockCount": "库存数量"
+    "inStockCount": "库存数量",
+    "addToInventory": "获得设计图",
+    "obtainedCount": "收购数量"
   },
   "selectInputMode": "输入模式",
   "selectResultMode": "结果展示模式",
@@ -45,6 +47,14 @@
     "enterNickName":  "添加昵称（选填）",
     "enterNickNameNormalHelperText": "可以输入学生姓名方便记和进行装备管理"
   },
+  "filterResultEmpty": "我找不到符合要求的设备。",
+  "piecesFilter": {
+    "filter": {
+      "required": "所需",
+      "insufficient": "不足",
+      "all": "全部"
+    }
+  },
   "thinsToNote": {
     "title": "注意事项",
     "pointThisIsEstimation": "推荐扫图次数为估计，与实际可能有出入。",