Skip to content

Commit

Permalink
feat: add import tips
Browse files Browse the repository at this point in the history
  • Loading branch information
@caoxing9
caoxing9 committed Jul 15, 2024
1 parent 5e5ee8f commit 7e9f44a
Show file tree
Hide file tree
Showing 6 changed files with 88 additions and 59 deletions.
120 changes: 70 additions & 50 deletions apps/nextjs-app/src/features/app/blocks/import-table/TableImport.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import {
importTableFromFile,
inplaceImportTableFromFile,
} from '@teable/openapi';
import { useBase } from '@teable/sdk';
import { useBase, LocalStorageKeys } from '@teable/sdk';
import {
Dialog,
DialogContent,
Expand All @@ -35,11 +35,14 @@ import {
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
Checkbox,
} from '@teable/ui-lib';
import { toast } from '@teable/ui-lib/shadcn/ui/sonner';
import { useRouter } from 'next/router';
import { useTranslation } from 'next-i18next';
import { useState, useRef, useCallback } from 'react';
import { useLocalStorage } from 'react-use';
import { FieldConfigPanel, InplaceFieldConfigPanel } from './field-config-panel';
import { UploadPanel } from './upload-panel';
import { UrlPanel } from './UrlPanel';
Expand Down Expand Up @@ -68,7 +71,6 @@ export const TableImport = (props: ITableImportProps) => {
const [step, setStep] = useState(Step.UPLOAD);
const { children, open, onOpenChange, fileType, tableId } = props;
const [errorMessage, setErrorMessage] = useState('');
const [alterDialogVisible, setAlterDialogVisible] = useState(false);
const [file, setFile] = useState<File | null>(null);
const [fileInfo, setFileInfo] = useState<IAnalyzeRo>({} as IAnalyzeRo);
const primitiveWorkSheets = useRef<IAnalyzeVo['worksheets']>({});
Expand All @@ -78,10 +80,8 @@ export const TableImport = (props: ITableImportProps) => {
sourceWorkSheetKey: '',
sourceColumnMap: {},
});

const closeDialog = () => {
dialogOpenProxy(false);
};
const [shouldAlert, setShouldAlert] = useLocalStorage(LocalStorageKeys.ImportAlert, true);
const [shouldTips, setShouldTips] = useState(false);

const { mutateAsync: importNewTableFn, isLoading } = useMutation({
mutationFn: async ({ baseId, importRo }: { baseId: string; importRo: IImportOptionRo }) => {
Expand Down Expand Up @@ -241,17 +241,6 @@ export const TableImport = (props: ITableImportProps) => {
[fileType, t]
);

const dialogOpenProxy = useCallback(
(open: boolean) => {
if (!open && Step.CONFIG && isLoading) {
setAlterDialogVisible(true);
return;
}
onOpenChange?.(open);
},
[isLoading, onOpenChange]
);

const fieldChangeHandler = (value: IImportOptionRo['worksheets']) => {
setWorkSheets(value);
};
Expand All @@ -262,7 +251,7 @@ export const TableImport = (props: ITableImportProps) => {

return (
<>
<Dialog open={open} onOpenChange={dialogOpenProxy}>
<Dialog open={open} onOpenChange={(open) => onOpenChange?.(open)}>
{children && <DialogTrigger>{children}</DialogTrigger>}
{open && (
<DialogContent
Expand Down Expand Up @@ -341,46 +330,77 @@ export const TableImport = (props: ITableImportProps) => {
{step === Step.CONFIG && (
<DialogFooter>
<footer className="mt-1 flex items-center justify-end">
<Button size="sm" variant="secondary" onClick={() => closeDialog()}>
<Button size="sm" variant="secondary" onClick={() => onOpenChange?.(false)}>
{t('table:import.menu.cancel')}
</Button>
<Button
size="sm"
className="ml-1"
onClick={() => importTable()}
disabled={tableId ? inplaceLoading : isLoading}
>
{(tableId ? inplaceLoading : isLoading) && <Spin className="mr-1 size-4" />}
{t('table:import.title.import')}
</Button>
{shouldAlert ? (
<AlertDialog>
<AlertDialogTrigger asChild>
<Button
size="sm"
className="ml-1"
disabled={tableId ? inplaceLoading : isLoading}
>
{(tableId ? inplaceLoading : isLoading) && (
<Spin className="mr-1 size-4" />
)}
{t('table:import.title.import')}
</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>{t('table:import.title.tipsTitle')}</AlertDialogTitle>
<AlertDialogDescription>
{t('table:import.tips.importAlert')}
</AlertDialogDescription>
</AlertDialogHeader>
<div className="flex items-center">
<Checkbox
id="noTips"
checked={shouldTips}
onCheckedChange={(res: boolean) => {
setShouldTips(res);
}}
/>
<label
htmlFor="noTips"
className="pl-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
{t('table:import.tips.noTips')}
</label>
</div>
<AlertDialogFooter>
<AlertDialogCancel>{t('table:import.menu.cancel')}</AlertDialogCancel>
<AlertDialogAction
onClick={() => {
importTable();
if (shouldTips) {
setShouldAlert(false);
}
}}
>
{t('table:import.title.confirm')}
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
) : (
<Button
size="sm"
className="ml-1"
onClick={() => importTable()}
disabled={tableId ? inplaceLoading : isLoading}
>
{(tableId ? inplaceLoading : isLoading) && <Spin className="mr-1 size-4" />}
{t('table:import.title.import')}
</Button>
)}
</footer>
</DialogFooter>
)}
</DialogContent>
)}
</Dialog>

<AlertDialog
open={alterDialogVisible}
onOpenChange={(open: boolean) => setAlterDialogVisible(open)}
>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>{t('table:import.title.leaveTitle')}</AlertDialogTitle>
<AlertDialogDescription>{t('table:import.tips.leaveTip')}</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>{t('table:import.menu.cancel')}</AlertDialogCancel>
<AlertDialogAction
onClick={() => {
onOpenChange?.(false);
}}
>
{t('table:import.menu.leave')}
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</>
);
};
2 changes: 1 addition & 1 deletion ...p/src/features/app/blocks/import-table/field-config-panel/inplace-panel/FieldSelector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ interface IFieldSelector {
export function FieldSelector(props: IFieldSelector) {
const { options, onSelect, value, disabled = false } = props;
const [open, setOpen] = useState(false);
const { t } = useTranslation(['table']);
const { t } = useTranslation(['table', 'common']);

const comOptions = useMemo(() => {
const result = [...options];
Expand Down
5 changes: 3 additions & 2 deletions ...features/app/blocks/import-table/field-config-panel/new-create-panel/FieldConfigPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,11 +104,12 @@ const FieldConfigPanel = (props: IFieldConfigPanel) => {
key={sheetKey}
size="xs"
onClick={() => setSelectedSheetKey(sheetKey)}
className={cn('w-20 shrink-0 cursor-pointer truncate rounded-sm', {
className={cn('max-w-32 shrink-0 cursor-pointer truncate rounded-sm px-2', {
'bg-secondary': sheetKey === selectedSheetKey,
})}
title={workSheets[sheetKey].name}
>
{workSheets[sheetKey].name}
<span className="truncate">{workSheets[sheetKey].name}</span>
</Button>
))}
</div>
Expand Down
9 changes: 6 additions & 3 deletions packages/common-i18n/src/locales/en/table.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,10 +142,11 @@
"importTitle": "Create a new table",
"incrementImportTitle": "Import Into — ",
"optionsTitle": "Import option",
"leaveTitle": "Are you sure to leave this page?",
"primitiveFields": "Primitive Fields",
"importFields": "Import Field",
"primaryField": "Primary Field"
"primaryField": "Primary Field",
"tipsTitle": "Tips",
"confirm": "Confirm and continue"
},
"menu": {
"addFromOtherSource": "Add from other sources",
Expand All @@ -163,7 +164,9 @@
"analyzing": "analyzing",
"notSupportFieldType": "Field type is not supported",
"resultEmpty": "No results found.",
"searchPlaceholder": "Search import field"
"searchPlaceholder": "Search...",
"importAlert": "Once the import begins, it cannot be stopped until it is either successfully completed or terminated due to failure. The import result will be notify to you later. You'd better do not operate the table during the import, which may cause errors.",
"noTips": "I've know that, don't show again"
},
"options": {
"autoSelectFieldOptionName": "Auto-select field types",
Expand Down
10 changes: 7 additions & 3 deletions packages/common-i18n/src/locales/zh/table.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,10 +142,11 @@
"importTitle": "创建一个新表格",
"incrementImportTitle": "导入到 — ",
"optionsTitle": "导入选项",
"leaveTitle": "确定离开此页面?",
"primitiveFields": "原表字段",
"importFields": "导入的字段",
"primaryField": "主键"
"primaryField": "主键",
"tipsTitle": "温馨提示",
"confirm": "确认并继续"
},
"menu": {
"addFromOtherSource": "从第三方资源导入",
Expand All @@ -162,7 +163,10 @@
"fileExceedSizeTip": "该类型文件限制文件大小为",
"analyzing": "分析中",
"notSupportFieldType": "字段类型不支持",
"resultEmpty": "未查询到结果"
"resultEmpty": "未查询到结果",
"searchPlaceholder": "搜索...",
"importAlert": "一旦导入，不能中止，直到导入成功或失败中止，导入结果将会在推送到通知栏。导入期间，最好不要操作表格，可能会引起错误。",
"noTips": "我已知晓，不再提示"
},
"options": {
"autoSelectFieldOptionName": "自动预测类型",
Expand Down
1 change: 1 addition & 0 deletions packages/sdk/src/config/local-storage-keys.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,4 +9,5 @@ export enum LocalStorageKeys {
ViewGridCollapsedGroup = 'ls_view_grid_collapsed_group',
ViewKanbanCollapsedStack = 'ls_view_kanban_collapsed_stack',
CompletedGuideMap = 'ls_completed_guide_map',
ImportAlert = 'ls_import_alert',
}

0 comments on commit 7e9f44a

Please sign in to comment.