- {tabInfo?.title}
-
{tabInfo?.theme}
+
+
+ {tabInfo?.title.toUpperCase()}
-
- {tabInfo?.content}
-
-
-
Learn more
-
-
-
-
-
- Download sample.
-
+
+
+ );
+}
+
+export function TabItemInfo({
+ tabName,
+ tabInfo,
+ isFullscreen,
+ onDownloadClick,
+ onViewMoreClick,
+ onToggleFullscreen,
+}: TabItemInfoProps) {
+ const info = tabInfo.get(tabName);
+
+ return (
+
+
+
{info?.title}
+
{info?.content}
+
+
+
+
Theme: {info?.theme}
+
Mode: {info?.themeMode}
+
+
+
+ onDownloadClick(e.nativeEvent as MouseEvent, tabName)
+ }
+ >
+
+ Download
+
+
+
+ onViewMoreClick(e.nativeEvent as MouseEvent, tabName)
+ }
+ >
+
+ View More
+
+
+ onToggleFullscreen(e.nativeEvent as MouseEvent)}
+ >
+
+ {isFullscreen ? "Exit Fullscreen" : "Fullscreen"}
+
);
-};
+}
export default function HomeView() {
+ const tabs = [
+ { key: "inventory" },
+ { key: "hr-portal" },
+ { key: "finance" },
+ { key: "sales" },
+ { key: "fleet" },
+ ];
const tabInfo = new Map
([
[
"inventory",
{
title: "ERP/ Inventory",
- theme: "Material Light",
- content: "Tracking and managing quantity, location and details of products in stock.",
- moreLink: "https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/hierarchical-grid",
- downloadLink: "https://www.infragistics.com/resources/sample-applications/erp-inventory-sample-app-react",
+ theme: "Material",
+ themeMode: "Light",
+ content:
+ "Tracking and managing quantity, location and details of products in stock.",
+ moreLink:
+ "https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/hierarchical-grid",
+ downloadLink:
+ "https://www.infragistics.com/resources/sample-applications/erp-inventory-sample-app-react",
},
],
[
"hr-portal",
{
title: "Org Chart/HR Portal",
- theme: "Fluent Light",
- content: "Displaying company's hierarchical structure and showing employees data.",
- moreLink: "https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/tree-grid",
- downloadLink: "https://www.infragistics.com/resources/sample-applications/org-charthr-portal-sample-app-react",
+ theme: "Fluent",
+ themeMode: "Light",
+ content:
+ "Displaying company's hierarchical structure and showing employees data.",
+ moreLink:
+ "https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/tree-grid",
+ downloadLink:
+ "https://www.infragistics.com/resources/sample-applications/org-charthr-portal-sample-app-react",
},
],
[
"finance",
{
title: "Financial Portfolio",
- theme: "Bootstrap Light",
- content: "Asset tracking, profit and loss analysis, featuring interactive dynamic charts.",
- moreLink: "https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid",
- downloadLink: "https://www.infragistics.com/resources/sample-applications/financial-portfolio-sample-app-react",
+ theme: "Bootstrap",
+ themeMode: "Light",
+ content:
+ "Asset tracking, profit and loss analysis, featuring interactive dynamic charts.",
+ moreLink:
+ "https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid",
+ downloadLink:
+ "https://www.infragistics.com/resources/sample-applications/financial-portfolio-sample-app-react",
},
],
[
"sales",
{
title: "Sales Dashboard",
- theme: "Indigo Light",
- content: "For trend analysis, KPIs and viewing sales summaries by region, product, etc.",
- moreLink: "https://www.infragistics.com/products/ignite-ui-angular/angular/components/pivotGrid/pivot-grid",
- downloadLink: "https://www.infragistics.com/resources/sample-applications/sales-grid-sample-app-react",
+ theme: "Indigo",
+ themeMode: "Light",
+ content:
+ "For trend analysis, KPIs and viewing sales summaries by region, product, etc.",
+ moreLink:
+ "https://www.infragistics.com/products/ignite-ui-angular/angular/components/pivotGrid/pivot-grid",
+ downloadLink:
+ "https://www.infragistics.com/resources/sample-applications/sales-grid-sample-app-react",
},
],
[
"fleet",
{
title: "Fleet Management",
- theme: "Material Dark",
- content: "A master-detail grid for managing vehicle acquisition, operations, and maintenance.",
- moreLink: "https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/master-detail",
- downloadLink: "https://www.infragistics.com/resources/sample-applications/fleet-management-sample-app-react",
+ theme: "Material",
+ themeMode: "Dark",
+ content:
+ "A master-detail grid for managing vehicle acquisition, operations, and maintenance.",
+ moreLink:
+ "https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/master-detail",
+ downloadLink:
+ "https://www.infragistics.com/resources/sample-applications/fleet-management-sample-app-react",
},
],
]);
const location = useLocation();
const [gridView, setGridView] = useState("inventory");
+ const [isFullscreen, setIsFullscreen] = useState(false);
+ const fullscreenRef = useRef(null);
useEffect(() => {
registerIcon("file_download", FILE_DOWNLOAD, "custom");
+ registerIcon("view_more", VIEW_MORE, "custom");
+ registerIcon("full_screen", FULL_SCREEN, "custom");
+ registerIcon("exit_full_screen", EXIT_FULL_SCREEN, "custom");
}, []);
useEffect(() => {
setGridView(location.pathname.replace("/home/", ""));
}, [location]);
+ useEffect(() => {
+ if (typeof window === "undefined" || typeof document === "undefined")
+ return;
+
+ const onFullscreenChange = () => {
+ setIsFullscreen(!!document.fullscreenElement);
+ };
+
+ const onResize = () => {
+ const isF11 =
+ window.innerWidth === screen.width &&
+ window.innerHeight === screen.height;
+
+ setIsFullscreen((prev) => {
+ if (prev !== isF11) return isF11;
+ return prev;
+ });
+ };
+
+ document.addEventListener("fullscreenchange", onFullscreenChange);
+ window.addEventListener("resize", onResize);
+
+ return () => {
+ document.removeEventListener("fullscreenchange", onFullscreenChange);
+ window.removeEventListener("resize", onResize);
+ };
+ }, []);
+
+ const onDownloadClick = (event: MouseEvent, tabName: string) => {
+ event.preventDefault();
+ event.stopPropagation();
+
+ if (typeof window === "undefined") return;
+
+ const downloadLink = tabInfo.get(tabName)?.downloadLink;
+ if (downloadLink) {
+ window.open(downloadLink, "_blank")?.focus();
+ }
+ };
+
+ const onViewMoreClick = (event: MouseEvent, tabName: string) => {
+ event.preventDefault();
+ event.stopPropagation();
+
+ if (typeof window === "undefined") return;
+
+ const moreLink = tabInfo.get(tabName)?.moreLink;
+ if (moreLink) {
+ window.open(moreLink, "_blank")?.focus();
+ }
+ };
+
+ const onToggleFullscreen = async () => {
+ if (typeof document === "undefined") return;
+
+ if (!document.fullscreenElement) {
+ await fullscreenRef.current?.requestFullscreen?.();
+ } else {
+ await document.exitFullscreen?.();
+ }
+ };
+
return (
-
-
- {['inventory', 'hr-portal', 'finance', 'sales', 'fleet'].map(tabName =>
-
- {({ isActive }) => (
-
- )}
-
- )}
-
+
+ {!isFullscreen && (
+
+ {tabs.map(({ key }) => (
+
+ {({ isActive }) => (
+
+ )}
+
+ ))}
+
+ )}
+
+
+
-
+
);