Web: Client: Connecting storage: integrated connecting storages data from API
This commit is contained in:
parent
70fad8a173
commit
0b349e32d7
@ -89,35 +89,6 @@ const StyledDropDown = styled(DropDown)`
|
||||
max-height: 7px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.storage-unavailable {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-direction: row-reverse;
|
||||
|
||||
.drop-down-item_icon {
|
||||
svg {
|
||||
path[fill] {
|
||||
fill: ${(props) => props.theme.dropDownItem.icon.disableColor};
|
||||
}
|
||||
|
||||
path[stroke] {
|
||||
stroke: ${(props) => props.theme.dropDownItem.icon.disableColor};
|
||||
}
|
||||
|
||||
circle[fill] {
|
||||
fill: ${(props) => props.theme.dropDownItem.icon.disableColor};
|
||||
}
|
||||
|
||||
rect[fill] {
|
||||
fill: ${(props) => props.theme.dropDownItem.icon.disableColor};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
color: ${(props) => props.theme.dropDownItem.disableColor};
|
||||
}
|
||||
`;
|
||||
|
||||
StyledDropDown.defaultProps = { theme: Base };
|
||||
|
@ -60,6 +60,34 @@ const StyledStorageLocation = styled.div`
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.storage-unavailable {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: row-reverse;
|
||||
|
||||
.drop-down-item_icon {
|
||||
svg {
|
||||
path[fill] {
|
||||
fill: ${(props) => props.theme.dropDownItem.disableColor};
|
||||
}
|
||||
|
||||
path[stroke] {
|
||||
stroke: ${(props) => props.theme.dropDownItem.disableColor};
|
||||
}
|
||||
|
||||
circle[fill] {
|
||||
fill: ${(props) => props.theme.dropDownItem.disableColor};
|
||||
}
|
||||
|
||||
rect[fill] {
|
||||
fill: ${(props) => props.theme.dropDownItem.disableColor};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
color: ${(props) => props.theme.dropDownItem.disableColor};
|
||||
}
|
||||
`;
|
||||
|
||||
StyledStorageLocation.defaultProps = { theme: Base };
|
||||
@ -67,7 +95,7 @@ StyledStorageLocation.defaultProps = { theme: Base };
|
||||
const services = {
|
||||
GoogleDrive: "google",
|
||||
Box: "box",
|
||||
DropboxV2: "dropbox",
|
||||
Dropbox: "dropbox",
|
||||
OneDrive: "skydrive",
|
||||
Nextcloud: "nextcloud",
|
||||
kDrive: "kdrive",
|
||||
@ -99,6 +127,14 @@ const ThirdPartyComboBox = ({
|
||||
|
||||
isDisabled,
|
||||
}) => {
|
||||
const deafultSelectedItem = {
|
||||
key: "length",
|
||||
label:
|
||||
storageLocation?.provider?.title ||
|
||||
t("ThirdPartyStorageComboBoxPlaceholder"),
|
||||
};
|
||||
|
||||
const [selectedItem, setSelectedItem] = useState(deafultSelectedItem);
|
||||
|
||||
const thirdparties = connectItems.map((item) => ({
|
||||
...item,
|
||||
@ -106,7 +142,6 @@ const ThirdPartyComboBox = ({
|
||||
}));
|
||||
|
||||
const setStorageLocaiton = (thirparty, isConnected) => {
|
||||
console.log(isConnected, thirparty)
|
||||
if (!isConnected) {
|
||||
window.open(
|
||||
`/portal-settings/integration/third-party-services?service=${services[thirparty.id]}`,
|
||||
@ -121,8 +156,6 @@ const ThirdPartyComboBox = ({
|
||||
setRoomCreation(true);
|
||||
const provider = storageLocation.provider;
|
||||
|
||||
console.log(provider);
|
||||
|
||||
if (storageLocation.provider.isOauth) {
|
||||
setIsOauthWindowOpen(true);
|
||||
const authModal = window.open(
|
||||
@ -176,10 +209,15 @@ const ThirdPartyComboBox = ({
|
||||
setSaveThirdpartyResponse(null);
|
||||
}, [saveThirdpartyResponse]);
|
||||
|
||||
const options = thirdparties.map((item) => ({
|
||||
label: item.title,
|
||||
const options = thirdparties
|
||||
.sort((storage) => (storage.isConnected ? -1 : 1))
|
||||
.map((item) => ({
|
||||
label:
|
||||
item.title + (item.isConnected ? "" : ` (${t("ActivationRequired")})`),
|
||||
title: item.title,
|
||||
key: item.id,
|
||||
icon: item.isConnected ? undefined : ExternalLinkReactSvgUrl,
|
||||
className: item.isConnected ? "" : "storage-unavailable",
|
||||
}));
|
||||
|
||||
const onSelect = (elem) => {
|
||||
@ -188,6 +226,9 @@ const ThirdPartyComboBox = ({
|
||||
});
|
||||
|
||||
thirdparty && setStorageLocaiton(thirdparty, thirdparty.isConnected);
|
||||
thirdparty.isConnected
|
||||
? setSelectedItem(elem)
|
||||
: setSelectedItem(deafultSelectedItem);
|
||||
};
|
||||
|
||||
return (
|
||||
@ -195,12 +236,7 @@ const ThirdPartyComboBox = ({
|
||||
<div className="set_room_params-thirdparty">
|
||||
<ComboBox
|
||||
className="thirdparty-combobox"
|
||||
selectedOption={{
|
||||
key: "length",
|
||||
label:
|
||||
storageLocation?.provider?.title ||
|
||||
t("ThirdPartyStorageComboBoxPlaceholder"),
|
||||
}}
|
||||
selectedOption={selectedItem}
|
||||
options={options}
|
||||
scaled
|
||||
withBackdrop={isMobile}
|
||||
@ -230,48 +266,6 @@ const ThirdPartyComboBox = ({
|
||||
onClick={onShowService}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
{/* <StyledDropDownWrapper
|
||||
className="dropdown-content-wrapper"
|
||||
ref={dropdownRef}
|
||||
>
|
||||
<StyledDropDown
|
||||
className="dropdown-content"
|
||||
open={isOpen}
|
||||
forwardedRef={dropdownRef}
|
||||
clickOutsideAction={toggleIsOpen}
|
||||
maxHeight={isMobile() ? 158 : 382}
|
||||
directionY={dropdownDirection}
|
||||
marginTop={dropdownDirection === "bottom" ? "4px" : "-36px"}
|
||||
hasItems={isOpen}
|
||||
>
|
||||
{thirdparties
|
||||
.sort((a) => (a.isAvailable ? -1 : 1))
|
||||
.map((thirdparty) => (
|
||||
<DropDownItem
|
||||
id={thirdparty.id}
|
||||
className={`dropdown-item ${thirdparty.isAvailable ? "" : "storage-unavailable"} ${thirdparty.className ?? ""}`}
|
||||
label={
|
||||
thirdparty.title +
|
||||
(thirdparty.isAvailable
|
||||
? ""
|
||||
: ` (${t("ActivationRequired")})`)
|
||||
}
|
||||
key={thirdparty.id}
|
||||
height={32}
|
||||
heightTablet={32}
|
||||
onClick={() =>
|
||||
setStorageLocaiton(thirdparty, thirdparty.isAvailable)
|
||||
}
|
||||
icon={
|
||||
!thirdparty.isAvailable ? ExternalLinkReactSvgUrl : undefined
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</StyledDropDown>
|
||||
</StyledDropDownWrapper> */}
|
||||
|
||||
</StyledStorageLocation>
|
||||
);
|
||||
};
|
||||
|
@ -73,92 +73,17 @@ class ThirdPartyStore {
|
||||
};
|
||||
|
||||
fetchConnectingStorages = async () => {
|
||||
const storages = await new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
resolve(
|
||||
[
|
||||
{
|
||||
id: "WebDav",
|
||||
className: "storage_webdav",
|
||||
providerKey: "WebDav",
|
||||
isOauth: false,
|
||||
oauthHref: "",
|
||||
category: "WebDav",
|
||||
isAvailable: true,
|
||||
title: "WebDav",
|
||||
},
|
||||
{
|
||||
id: "WebDav",
|
||||
className: "storage_webdav",
|
||||
providerKey: "WebDav",
|
||||
isOauth: false,
|
||||
oauthHref: "",
|
||||
category: "ownCloud",
|
||||
isAvailable: true,
|
||||
title: "ownCloud",
|
||||
},
|
||||
{
|
||||
id: "kDrive",
|
||||
className: "storage_kdrive",
|
||||
providerKey: "kDrive",
|
||||
isOauth: false,
|
||||
oauthHref: "",
|
||||
isAvailable: true,
|
||||
title: "kDrive",
|
||||
},
|
||||
{
|
||||
id: "WebDav",
|
||||
className: "storage_webdav",
|
||||
providerKey: "WebDav",
|
||||
isOauth: false,
|
||||
oauthHref: "",
|
||||
category: "Nextcloud",
|
||||
isAvailable: true,
|
||||
title: "Nextcloud",
|
||||
},
|
||||
{
|
||||
id: "GoogleDrive",
|
||||
className: "storage_googledrive",
|
||||
providerKey: "GoogleDrive",
|
||||
isOauth: false,
|
||||
oauthHref: "",
|
||||
isAvailable: false,
|
||||
title: "Google Drive",
|
||||
},
|
||||
{
|
||||
id: "Box",
|
||||
className: "storage_box",
|
||||
providerKey: "Box",
|
||||
isOauth: false,
|
||||
oauthHref: "",
|
||||
isAvailable: false,
|
||||
title: "Box",
|
||||
},
|
||||
{
|
||||
id: "DropboxV2",
|
||||
className: "storage_dropboxv2",
|
||||
providerKey: "DropboxV2",
|
||||
isOauth: false,
|
||||
oauthHref: "",
|
||||
isAvailable: false,
|
||||
title: "Dropbox",
|
||||
},
|
||||
{
|
||||
id: "OneDrive",
|
||||
className: "storage_onedrive",
|
||||
providerKey: "OneDrive",
|
||||
isOauth: false,
|
||||
oauthHref: "",
|
||||
isAvailable: false,
|
||||
title: "OneDrive",
|
||||
},
|
||||
],
|
||||
2000,
|
||||
);
|
||||
});
|
||||
});
|
||||
const res = await api.files.getConnectingStorages();
|
||||
|
||||
this.connectingStorages = storages;
|
||||
this.connectingStorages = res.map((storage) => ({
|
||||
id: storage.name,
|
||||
className: `storage_${storage.key}`,
|
||||
providerKey: storage.key !== "WebDav" ? storage.key : storage.name,
|
||||
isConnected: storage.connected,
|
||||
isOauth: storage.oauth,
|
||||
oauthHref: storage.redirectUrl,
|
||||
category: storage.name,
|
||||
}));
|
||||
};
|
||||
|
||||
saveThirdParty = (
|
||||
|
@ -62,6 +62,7 @@ import {
|
||||
TThirdPartyCapabilities,
|
||||
TTirdParties,
|
||||
TUploadOperation,
|
||||
TConnectingStorages,
|
||||
} from "./types";
|
||||
|
||||
export async function openEdit(
|
||||
@ -1386,3 +1387,12 @@ export async function getFilesUsedSpace() {
|
||||
|
||||
return res;
|
||||
}
|
||||
|
||||
export async function getConnectingStorages() {
|
||||
const res = (await request({
|
||||
method: "get",
|
||||
url: "files/thirdparty/providers",
|
||||
})) as TConnectingStorages;
|
||||
|
||||
return res;
|
||||
}
|
||||
|
@ -415,3 +415,13 @@ export type TFilesUsedSpace = {
|
||||
usedSpace: number;
|
||||
};
|
||||
};
|
||||
|
||||
export type TConnectingStorage = {
|
||||
name: string;
|
||||
key: string;
|
||||
connected: boolean;
|
||||
oauth: boolean;
|
||||
redirectUrl: string;
|
||||
};
|
||||
|
||||
export type TConnectingStorages = TConnectingStorage[];
|
||||
|
@ -232,7 +232,7 @@ const ComboBoxPure = (props: ComboboxProps) => {
|
||||
return (
|
||||
<DropDownItem
|
||||
{...option}
|
||||
className="drop-down-item"
|
||||
className={`drop-down-item ${"className" in option ? option.className : ""}`}
|
||||
textOverflow={textOverflow}
|
||||
key={option.key}
|
||||
disabled={disabled}
|
||||
|
@ -47,6 +47,7 @@ export type TOption =
|
||||
isSelected?: boolean;
|
||||
internal?: boolean;
|
||||
access?: ShareAccessRights;
|
||||
className?: string;
|
||||
}
|
||||
| {
|
||||
key: string | number;
|
||||
@ -63,6 +64,7 @@ export type TOption =
|
||||
isSelected?: undefined;
|
||||
internal?: undefined;
|
||||
access?: ShareAccessRights;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
export interface ComboboxProps {
|
||||
|
Loading…
Reference in New Issue
Block a user