ben.carrasco/chrome-extension-dialer
1
0
Fork 0
mirror of https://github.com/jambonz/chrome-extension-dialer.git synced 2025-12-19 04:47:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Quan HL
2023-10-23 15:18:58 +07:00
parent 7e6aa3c647
commit 9bddc2ce25
2 changed files with 91 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/menu/index.tsx
View File

@@ -5,6 +5,7 @@ import {
MenuItem,
MenuList,
Spinner,
Tooltip,
} from "@chakra-ui/react";
import { useState } from "react";
@@ -16,12 +17,14 @@ type IconButtonMenuProbs = {
icon: React.ReactElement;
onOpen: () => Promise<IconButtonMenuItems[]>;
onClick: (value: string) => void;
tooltip: string;
};
export const IconButtonMenu = ({
icon,
onOpen,
onClick,
tooltip,
}: IconButtonMenuProbs) => {
const [items, setItems] = useState<IconButtonMenuItems[]>([]);
const [isLoading, setIsLoading] = useState(false);
@@ -34,12 +37,15 @@ export const IconButtonMenu = ({
};
return (
<Menu onOpen={handleOnOpen}>
<MenuButton
as={IconButton}
aria-label="Options"
icon={icon}
variant="unstyled"
/>
<Tooltip label={tooltip}>
<MenuButton
as={IconButton}
aria-label="Options"
icon={icon}
variant="unstyled"
/>
</Tooltip>
<MenuList>
{isLoading ? (
<MenuItem>

161
src/window/phone/index.tsx
View File

@@ -411,89 +411,86 @@ export const Phone = ({
>
{isAdvanceMode && isSipClientIdle(callStatus) && (
<HStack spacing={2} align="start" w="full">
<Tooltip label="Call to user">
<IconButtonMenu
icon={<Users />}
onClick={(value) => {
setInputNumber(value);
makeOutboundCall(value);
}}
onOpen={() => {
return new Promise<IconButtonMenuItems[]>(
(resolve, reject) => {
getRegisteredUser()
.then(({ json }) => {
resolve(
json
.filter((u) => !u.includes(sipUsername))
.map((u) => {
const uName = u.match(/(^.*)@.*/);
return {
name: uName ? uName[1] : u,
value: uName ? uName[1] : u,
};
})
);
})
.catch((err) => reject(err));
}
);
}}
/>
</Tooltip>
<Tooltip label="Call to a queue">
<IconButtonMenu
icon={<GitMerge />}
onClick={(value) => {
const calledQueue = `queue-${value}`;
setInputNumber(calledQueue);
makeOutboundCall(calledQueue);
}}
onOpen={() => {
return new Promise<IconButtonMenuItems[]>(
(resolve, reject) => {
getQueues()
.then(({ json }) => {
resolve(
json.map((q) => ({
name: `${q.name} (${q.length})`,
value: q.name,
}))
);
})
.catch((err) => reject(err));
}
);
}}
/>
</Tooltip>
<IconButtonMenu
icon={<Users />}
tooltip="Call to user"
onClick={(value) => {
setInputNumber(value);
makeOutboundCall(value);
}}
onOpen={() => {
return new Promise<IconButtonMenuItems[]>(
(resolve, reject) => {
getRegisteredUser()
.then(({ json }) => {
resolve(
json
.filter((u) => !u.includes(sipUsername))
.map((u) => {
const uName = u.match(/(^.*)@.*/);
return {
name: uName ? uName[1] : u,
value: uName ? uName[1] : u,
};
})
);
})
.catch((err) => reject(err));
}
);
}}
/>
<IconButtonMenu
icon={<GitMerge />}
tooltip="Call to a queue"
onClick={(value) => {
const calledQueue = `queue-${value}`;
setInputNumber(calledQueue);
makeOutboundCall(calledQueue);
}}
onOpen={() => {
return new Promise<IconButtonMenuItems[]>(
(resolve, reject) => {
getQueues()
.then(({ json }) => {
resolve(
json.map((q) => ({
name: `${q.name} (${q.length})`,
value: q.name,
}))
);
})
.catch((err) => reject(err));
}
);
}}
/>
<Tooltip label="Call to an application">
<IconButtonMenu
icon={<List />}
onClick={(value) => {
const calledAppId = `app-${value}`;
setInputNumber(calledAppId);
makeOutboundCall(calledAppId);
}}
onOpen={() => {
return new Promise<IconButtonMenuItems[]>(
(resolve, reject) => {
getApplications()
.then(({ json }) => {
resolve(
json.map((a) => ({
name: a.name,
value: a.application_sid,
}))
);
})
.catch((err) => reject(err));
}
);
}}
/>
</Tooltip>
<IconButtonMenu
icon={<List />}
tooltip="Call to an application"
onClick={(value) => {
const calledAppId = `app-${value}`;
setInputNumber(calledAppId);
makeOutboundCall(calledAppId);
}}
onOpen={() => {
return new Promise<IconButtonMenuItems[]>(
(resolve, reject) => {
getApplications()
.then(({ json }) => {
resolve(
json.map((a) => ({
name: a.name,
value: a.application_sid,
}))
);
})
.catch((err) => reject(err));
}
);
}}
/>
</HStack>
)}