Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
C
canifa_note
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Vũ Hoàng Anh
canifa_note
Commits
8a3845ff
Commit
8a3845ff
authored
Apr 29, 2024
by
Steven
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
chore: remove external resource dialog
parent
155c5baf
Changes
4
Show whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
66 additions
and
184 deletions
+66
-184
CreateMemoRelationDialog.tsx
web/src/components/CreateMemoRelationDialog.tsx
+1
-1
CreateResourceDialog.tsx
web/src/components/CreateResourceDialog.tsx
+63
-178
BaseDialog.tsx
web/src/components/Dialog/BaseDialog.tsx
+2
-4
view.d.ts
web/src/types/view.d.ts
+0
-1
No files found.
web/src/components/CreateMemoRelationDialog.tsx
View file @
8a3845ff
...
@@ -145,7 +145,7 @@ const CreateMemoRelationDialog: React.FC<Props> = (props: Props) => {
...
@@ -145,7 +145,7 @@ const CreateMemoRelationDialog: React.FC<Props> = (props: Props) => {
);
);
};
};
function
showCreateMemoRelationDialog
(
props
:
Omit
<
Props
,
"destroy"
|
"hide"
>
)
{
function
showCreateMemoRelationDialog
(
props
:
Omit
<
Props
,
"destroy"
>
)
{
generateDialog
(
generateDialog
(
{
{
className
:
"create-memo-relation-dialog"
,
className
:
"create-memo-relation-dialog"
,
...
...
web/src/components/CreateResourceDialog.tsx
View file @
8a3845ff
import
{
Autocomplete
,
Button
,
IconButton
,
Input
,
List
,
ListItem
,
Option
,
Select
,
Typography
}
from
"@mui/joy"
;
import
{
Button
,
IconButton
,
List
,
ListItem
,
Typography
}
from
"@mui/joy"
;
import
React
,
{
useRef
,
useState
}
from
"react"
;
import
React
,
{
useRef
,
useState
}
from
"react"
;
import
{
toast
}
from
"react-hot-toast"
;
import
{
toast
}
from
"react-hot-toast"
;
import
{
useResourceStore
}
from
"@/store/v1"
;
import
{
useResourceStore
}
from
"@/store/v1"
;
...
@@ -7,17 +7,12 @@ import { useTranslate } from "@/utils/i18n";
...
@@ -7,17 +7,12 @@ import { useTranslate } from "@/utils/i18n";
import
{
generateDialog
}
from
"./Dialog"
;
import
{
generateDialog
}
from
"./Dialog"
;
import
Icon
from
"./Icon"
;
import
Icon
from
"./Icon"
;
const
fileTypeAutocompleteOptions
=
[
"image/*"
,
"text/*"
,
"audio/*"
,
"video/*"
,
"application/*"
];
interface
Props
extends
DialogProps
{
interface
Props
extends
DialogProps
{
onCancel
?:
()
=>
void
;
onCancel
?:
()
=>
void
;
onConfirm
?:
(
resourceList
:
Resource
[])
=>
void
;
onConfirm
?:
(
resourceList
:
Resource
[])
=>
void
;
}
}
type
SelectedMode
=
"local-file"
|
"external-link"
;
interface
State
{
interface
State
{
selectedMode
:
SelectedMode
;
uploadingFlag
:
boolean
;
uploadingFlag
:
boolean
;
}
}
...
@@ -26,16 +21,8 @@ const CreateResourceDialog: React.FC<Props> = (props: Props) => {
...
@@ -26,16 +21,8 @@ const CreateResourceDialog: React.FC<Props> = (props: Props) => {
const
{
destroy
,
onCancel
,
onConfirm
}
=
props
;
const
{
destroy
,
onCancel
,
onConfirm
}
=
props
;
const
resourceStore
=
useResourceStore
();
const
resourceStore
=
useResourceStore
();
const
[
state
,
setState
]
=
useState
<
State
>
({
const
[
state
,
setState
]
=
useState
<
State
>
({
selectedMode
:
"local-file"
,
uploadingFlag
:
false
,
uploadingFlag
:
false
,
});
});
const
[
resourceCreate
,
setResourceCreate
]
=
useState
<
Resource
>
(
Resource
.
fromPartial
({
filename
:
""
,
externalLink
:
""
,
type
:
""
,
}),
);
const
[
fileList
,
setFileList
]
=
useState
<
File
[]
>
([]);
const
[
fileList
,
setFileList
]
=
useState
<
File
[]
>
([]);
const
fileInputRef
=
useRef
<
HTMLInputElement
>
(
null
);
const
fileInputRef
=
useRef
<
HTMLInputElement
>
(
null
);
...
@@ -73,44 +60,6 @@ const CreateResourceDialog: React.FC<Props> = (props: Props) => {
...
@@ -73,44 +60,6 @@ const CreateResourceDialog: React.FC<Props> = (props: Props) => {
destroy
();
destroy
();
};
};
const
handleSelectedModeChanged
=
(
mode
:
"local-file"
|
"external-link"
)
=>
{
setState
((
state
)
=>
{
return
{
...
state
,
selectedMode
:
mode
,
};
});
};
const
handleExternalLinkChanged
=
(
event
:
React
.
ChangeEvent
<
HTMLInputElement
>
)
=>
{
const
externalLink
=
event
.
target
.
value
;
setResourceCreate
((
state
)
=>
{
return
{
...
state
,
externalLink
,
};
});
};
const
handleFileNameChanged
=
(
event
:
React
.
ChangeEvent
<
HTMLInputElement
>
)
=>
{
const
filename
=
event
.
target
.
value
;
setResourceCreate
((
state
)
=>
{
return
{
...
state
,
filename
,
};
});
};
const
handleFileTypeChanged
=
(
fileType
:
string
)
=>
{
setResourceCreate
((
state
)
=>
{
return
{
...
state
,
type
:
fileType
,
};
});
};
const
handleFileInputChange
=
async
()
=>
{
const
handleFileInputChange
=
async
()
=>
{
if
(
!
fileInputRef
.
current
||
!
fileInputRef
.
current
.
files
)
{
if
(
!
fileInputRef
.
current
||
!
fileInputRef
.
current
.
files
)
{
return
;
return
;
...
@@ -124,15 +73,9 @@ const CreateResourceDialog: React.FC<Props> = (props: Props) => {
...
@@ -124,15 +73,9 @@ const CreateResourceDialog: React.FC<Props> = (props: Props) => {
};
};
const
allowConfirmAction
=
()
=>
{
const
allowConfirmAction
=
()
=>
{
if
(
state
.
selectedMode
===
"local-file"
)
{
if
(
!
fileInputRef
.
current
||
!
fileInputRef
.
current
.
files
||
fileInputRef
.
current
.
files
.
length
===
0
)
{
if
(
!
fileInputRef
.
current
||
!
fileInputRef
.
current
.
files
||
fileInputRef
.
current
.
files
.
length
===
0
)
{
return
false
;
return
false
;
}
}
}
else
if
(
state
.
selectedMode
===
"external-link"
)
{
if
(
resourceCreate
.
filename
===
""
||
resourceCreate
.
externalLink
===
""
||
resourceCreate
.
type
===
""
)
{
return
false
;
}
}
return
true
;
return
true
;
};
};
...
@@ -150,7 +93,6 @@ const CreateResourceDialog: React.FC<Props> = (props: Props) => {
...
@@ -150,7 +93,6 @@ const CreateResourceDialog: React.FC<Props> = (props: Props) => {
const
createdResourceList
:
Resource
[]
=
[];
const
createdResourceList
:
Resource
[]
=
[];
try
{
try
{
if
(
state
.
selectedMode
===
"local-file"
)
{
if
(
!
fileInputRef
.
current
||
!
fileInputRef
.
current
.
files
)
{
if
(
!
fileInputRef
.
current
||
!
fileInputRef
.
current
.
files
)
{
return
;
return
;
}
}
...
@@ -172,10 +114,6 @@ const CreateResourceDialog: React.FC<Props> = (props: Props) => {
...
@@ -172,10 +114,6 @@ const CreateResourceDialog: React.FC<Props> = (props: Props) => {
});
});
createdResourceList
.
push
(
resource
);
createdResourceList
.
push
(
resource
);
}
}
}
else
{
const
resource
=
await
resourceStore
.
createResource
({
resource
:
resourceCreate
});
createdResourceList
.
push
(
resource
);
}
}
catch
(
error
:
any
)
{
}
catch
(
error
:
any
)
{
console
.
error
(
error
);
console
.
error
(
error
);
toast
.
error
(
error
.
details
);
toast
.
error
(
error
.
details
);
...
@@ -196,22 +134,7 @@ const CreateResourceDialog: React.FC<Props> = (props: Props) => {
...
@@ -196,22 +134,7 @@ const CreateResourceDialog: React.FC<Props> = (props: Props) => {
</
IconButton
>
</
IconButton
>
</
div
>
</
div
>
<
div
className=
"dialog-content-container !w-80"
>
<
div
className=
"dialog-content-container !w-80"
>
<
Typography
className=
"!mb-1"
level=
"body-md"
>
<
div
className=
"w-full relative bg-blue-50 dark:bg-zinc-900 rounded-md border-dashed border-2 dark:border-zinc-700 flex flex-row justify-center items-center py-8 hover:opacity-90"
>
{
t
(
"resource.create-dialog.upload-method"
)
}
</
Typography
>
<
Select
className=
"w-full mb-2"
onChange=
{
(
_
,
value
)
=>
handleSelectedModeChanged
(
value
as
SelectedMode
)
}
value=
{
state
.
selectedMode
}
startDecorator=
{
<
Icon
.
File
className=
"w-4 h-auto"
/>
}
>
<
Option
value=
"local-file"
>
{
t
(
"resource.create-dialog.local-file.option"
)
}
</
Option
>
<
Option
value=
"external-link"
>
{
t
(
"resource.create-dialog.external-link.option"
)
}
</
Option
>
</
Select
>
{
state
.
selectedMode
===
"local-file"
&&
(
<>
<
div
className=
"w-full relative bg-blue-50 dark:bg-zinc-900 rounded-md flex flex-row justify-center items-center py-8"
>
<
label
htmlFor=
"files"
className=
"p-2 px-4 text-sm text-white cursor-pointer bg-blue-500 block rounded hover:opacity-80"
>
<
label
htmlFor=
"files"
className=
"p-2 px-4 text-sm text-white cursor-pointer bg-blue-500 block rounded hover:opacity-80"
>
{
t
(
"resource.create-dialog.local-file.choose"
)
}
{
t
(
"resource.create-dialog.local-file.choose"
)
}
</
label
>
</
label
>
...
@@ -252,44 +175,6 @@ const CreateResourceDialog: React.FC<Props> = (props: Props) => {
...
@@ -252,44 +175,6 @@ const CreateResourceDialog: React.FC<Props> = (props: Props) => {
</
ListItem
>
</
ListItem
>
))
}
))
}
</
List
>
</
List
>
</>
)
}
{
state
.
selectedMode
===
"external-link"
&&
(
<>
<
Typography
className=
"!mb-1"
level=
"body-md"
>
{
t
(
"resource.create-dialog.external-link.link"
)
}
</
Typography
>
<
Input
className=
"mb-2"
placeholder=
{
t
(
"resource.create-dialog.external-link.link-placeholder"
)
}
value=
{
resourceCreate
.
externalLink
}
onChange=
{
handleExternalLinkChanged
}
fullWidth
/>
<
Typography
className=
"!mb-1"
level=
"body-md"
>
{
t
(
"resource.create-dialog.external-link.file-name"
)
}
</
Typography
>
<
Input
className=
"mb-2"
placeholder=
{
t
(
"resource.create-dialog.external-link.file-name-placeholder"
)
}
value=
{
resourceCreate
.
filename
}
onChange=
{
handleFileNameChanged
}
fullWidth
/>
<
Typography
className=
"!mb-1"
level=
"body-md"
>
{
t
(
"resource.create-dialog.external-link.type"
)
}
</
Typography
>
<
Autocomplete
className=
"w-full"
size=
"sm"
placeholder=
{
t
(
"resource.create-dialog.external-link.type-placeholder"
)
}
freeSolo=
{
true
}
options=
{
fileTypeAutocompleteOptions
}
onChange=
{
(
_
,
value
)
=>
handleFileTypeChanged
(
value
||
""
)
}
/>
</>
)
}
<
div
className=
"mt-2 w-full flex flex-row justify-end items-center space-x-1"
>
<
div
className=
"mt-2 w-full flex flex-row justify-end items-center space-x-1"
>
<
Button
variant=
"plain"
color=
"neutral"
onClick=
{
handleCloseDialog
}
>
<
Button
variant=
"plain"
color=
"neutral"
onClick=
{
handleCloseDialog
}
>
...
@@ -304,7 +189,7 @@ const CreateResourceDialog: React.FC<Props> = (props: Props) => {
...
@@ -304,7 +189,7 @@ const CreateResourceDialog: React.FC<Props> = (props: Props) => {
);
);
};
};
function
showCreateResourceDialog
(
props
:
Omit
<
Props
,
"destroy"
|
"hide"
>
)
{
function
showCreateResourceDialog
(
props
:
Omit
<
Props
,
"destroy"
>
)
{
generateDialog
<
Props
>
(
generateDialog
<
Props
>
(
{
{
dialogName
:
"create-resource-dialog"
,
dialogName
:
"create-resource-dialog"
,
...
...
web/src/components/Dialog/BaseDialog.tsx
View file @
8a3845ff
...
@@ -67,7 +67,7 @@ const BaseDialog: React.FC<Props> = (props: Props) => {
...
@@ -67,7 +67,7 @@ const BaseDialog: React.FC<Props> = (props: Props) => {
export
function
generateDialog
<
T
extends
DialogProps
>
(
export
function
generateDialog
<
T
extends
DialogProps
>
(
config
:
DialogConfig
,
config
:
DialogConfig
,
DialogComponent
:
React
.
FC
<
T
>
,
DialogComponent
:
React
.
FC
<
T
>
,
props
?:
Omit
<
T
,
"destroy"
|
"hide"
>
,
props
?:
Omit
<
T
,
"destroy"
>
,
):
DialogCallback
{
):
DialogCallback
{
const
tempDiv
=
document
.
createElement
(
"div"
);
const
tempDiv
=
document
.
createElement
(
"div"
);
const
dialog
=
createRoot
(
tempDiv
);
const
dialog
=
createRoot
(
tempDiv
);
...
@@ -82,20 +82,18 @@ export function generateDialog<T extends DialogProps>(
...
@@ -82,20 +82,18 @@ export function generateDialog<T extends DialogProps>(
tempDiv
.
remove
();
tempDiv
.
remove
();
});
});
},
},
hide
:
()
=>
{},
};
};
const
dialogProps
=
{
const
dialogProps
=
{
...
props
,
...
props
,
destroy
:
cbs
.
destroy
,
destroy
:
cbs
.
destroy
,
hide
:
cbs
.
hide
,
}
as
T
;
}
as
T
;
const
Fragment
=
(
const
Fragment
=
(
<
Provider
store=
{
store
}
>
<
Provider
store=
{
store
}
>
<
CssVarsProvider
theme=
{
theme
}
>
<
CssVarsProvider
theme=
{
theme
}
>
<
CommonContextProvider
>
<
CommonContextProvider
>
<
BaseDialog
destroy=
{
cbs
.
destroy
}
hide=
{
cbs
.
hide
}
clickSpaceDestroy=
{
true
}
{
...
config
}
>
<
BaseDialog
destroy=
{
cbs
.
destroy
}
clickSpaceDestroy=
{
true
}
{
...
config
}
>
<
DialogComponent
{
...
dialogProps
}
/>
<
DialogComponent
{
...
dialogProps
}
/>
</
BaseDialog
>
</
BaseDialog
>
</
CommonContextProvider
>
</
CommonContextProvider
>
...
...
web/src/types/view.d.ts
View file @
8a3845ff
interface
DialogCallback
{
interface
DialogCallback
{
destroy
:
FunctionType
;
destroy
:
FunctionType
;
hide
:
FunctionType
;
}
}
type
DialogProps
=
DialogCallback
;
type
DialogProps
=
DialogCallback
;
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment