datastake-daf 0.6.745 → 0.6.746

package/dist/style/datastake/mapbox-gl.css

@@ -0,0 +1,330 @@
+/* Isolated Mapbox GL CSS - Scoped to prevent Leaflet conflicts */
+
+/* Mapbox GL Core Styles - Scoped with .mapbox-gl-scope */
+.mapbox-gl-scope .mapboxgl-map {
+  font: 12px/20px Helvetica Neue, Arial, Helvetica, sans-serif;
+  overflow: hidden;
+  position: relative;
+  -webkit-tap-highlight-color: rgb(0 0 0/0);
+}
+
+.mapbox-gl-scope .mapboxgl-canvas {
+  left: 0;
+  position: absolute;
+  top: 0;
+}
+
+.mapbox-gl-scope .mapboxgl-map:-webkit-full-screen {
+  height: 100%;
+  width: 100%;
+}
+
+.mapbox-gl-scope .mapboxgl-canary {
+  background-color: salmon;
+}
+
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-interactive,
+.mapbox-gl-scope .mapboxgl-ctrl-group button.mapboxgl-ctrl-compass {
+  cursor: grab;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-interactive.mapboxgl-track-pointer {
+  cursor: pointer;
+}
+
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-interactive:active,
+.mapbox-gl-scope .mapboxgl-ctrl-group button.mapboxgl-ctrl-compass:active {
+  cursor: grabbing;
+}
+
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate,
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate .mapboxgl-canvas {
+  touch-action: pan-x pan-y;
+}
+
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-drag-pan,
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-drag-pan .mapboxgl-canvas {
+  touch-action: pinch-zoom;
+}
+
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan,
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan .mapboxgl-canvas {
+  touch-action: none;
+}
+
+/* Control positioning */
+.mapbox-gl-scope .mapboxgl-ctrl-bottom,
+.mapbox-gl-scope .mapboxgl-ctrl-bottom-left,
+.mapbox-gl-scope .mapboxgl-ctrl-bottom-right,
+.mapbox-gl-scope .mapboxgl-ctrl-left,
+.mapbox-gl-scope .mapboxgl-ctrl-right,
+.mapbox-gl-scope .mapboxgl-ctrl-top,
+.mapbox-gl-scope .mapboxgl-ctrl-top-left,
+.mapbox-gl-scope .mapboxgl-ctrl-top-right {
+  pointer-events: none;
+  position: absolute;
+  z-index: 2;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-top-left {
+  left: 0;
+  top: 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-top {
+  left: 50%;
+  top: 0;
+  transform: translateX(-50%);
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-top-right {
+  right: 0;
+  top: 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-right {
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-bottom-right {
+  bottom: 0;
+  right: 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-bottom {
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-bottom-left {
+  bottom: 0;
+  left: 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-left {
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl {
+  clear: both;
+  pointer-events: auto;
+  transform: translate(0);
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-top-left .mapboxgl-ctrl {
+  float: left;
+  margin: 10px 0 0 10px;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-top .mapboxgl-ctrl {
+  float: left;
+  margin: 10px 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-top-right .mapboxgl-ctrl {
+  float: right;
+  margin: 10px 10px 0 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl,
+.mapbox-gl-scope .mapboxgl-ctrl-right .mapboxgl-ctrl {
+  float: right;
+  margin: 0 10px 10px 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-bottom .mapboxgl-ctrl {
+  float: left;
+  margin: 10px 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl,
+.mapbox-gl-scope .mapboxgl-ctrl-left .mapboxgl-ctrl {
+  float: left;
+  margin: 0 0 10px 10px;
+}
+
+/* Control group styling */
+.mapbox-gl-scope .mapboxgl-ctrl-group {
+  background: #fff;
+  border-radius: 4px;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-group:not(:empty) {
+  box-shadow: 0 0 0 2px #0000001a;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-group button {
+  background-color: initial;
+  border: 0;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: block;
+  height: 29px;
+  outline: none;
+  overflow: hidden;
+  padding: 0;
+  width: 29px;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-group button+button {
+  border-top: 1px solid #ddd;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl button .mapboxgl-ctrl-icon {
+  background-position: 50%;
+  background-repeat: no-repeat;
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-attrib-button:focus,
+.mapbox-gl-scope .mapboxgl-ctrl-group button:focus {
+  box-shadow: 0 0 2px 2px #0096ff;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl button:disabled {
+  cursor: not-allowed;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl button:disabled .mapboxgl-ctrl-icon {
+  opacity: .25;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-group button:first-child {
+  border-radius: 4px 4px 0 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-group button:last-child {
+  border-radius: 0 0 4px 4px;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-group button:only-child {
+  border-radius: inherit;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl button:not(:disabled):hover {
+  background-color: #0000000d;
+}
+
+/* Marker styles */
+.mapbox-gl-scope .mapboxgl-marker {
+  position: absolute;
+  z-index: 1;
+}
+
+.mapbox-gl-scope .mapboxgl-marker svg {
+  display: block;
+}
+
+/* Popup styles */
+.mapbox-gl-scope .mapboxgl-popup {
+  position: absolute;
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.mapbox-gl-scope .mapboxgl-popup-content-wrapper {
+  padding: 1px;
+  text-align: left;
+  border-radius: 12px;
+}
+
+.mapbox-gl-scope .mapboxgl-popup-content {
+  margin: 13px 24px 13px 20px;
+  line-height: 1.3;
+  font-size: 13px;
+  min-height: 1px;
+}
+
+.mapbox-gl-scope .mapboxgl-popup-content p {
+  margin: 17px 0;
+}
+
+.mapbox-gl-scope .mapboxgl-popup-tip-container {
+  width: 40px;
+  height: 20px;
+  position: absolute;
+  left: 50%;
+  margin-top: -1px;
+  margin-left: -20px;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.mapbox-gl-scope .mapboxgl-popup-tip {
+  width: 17px;
+  height: 17px;
+  padding: 1px;
+  margin: -10px auto 0;
+  pointer-events: auto;
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+
+.mapbox-gl-scope .mapboxgl-popup-content-wrapper,
+.mapbox-gl-scope .mapboxgl-popup-tip {
+  background: white;
+  color: #333;
+  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
+}
+
+.mapbox-gl-scope .mapboxgl-popup-close-button {
+  position: absolute;
+  top: 0;
+  right: 0;
+  border: none;
+  text-align: center;
+  width: 24px;
+  height: 24px;
+  font: 16px/24px Tahoma, Verdana, sans-serif;
+  color: #757575;
+  text-decoration: none;
+  background: transparent;
+}
+
+.mapbox-gl-scope .mapboxgl-popup-close-button:hover,
+.mapbox-gl-scope .mapboxgl-popup-close-button:focus {
+  color: #585858;
+}
+
+/* Attribution */
+.mapbox-gl-scope .mapboxgl-ctrl-attribution {
+  background: #fff;
+  background: rgba(255, 255, 255, 0.8);
+  margin: 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-attribution,
+.mapbox-gl-scope .mapboxgl-ctrl-scale-line {
+  padding: 0 5px;
+  color: #333;
+  line-height: 1.4;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-attribution a {
+  text-decoration: none;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-attribution a:hover,
+.mapbox-gl-scope .mapboxgl-ctrl-attribution a:focus {
+  text-decoration: underline;
+}
+
+/* Hide attribution by default */
+.mapbox-gl-scope .mapboxgl-ctrl-attribution {
+  display: none !important;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-logo {
+  display: none !important;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.745",
+	"version": "0.6.746",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",

package/src/@daf/core/components/Dashboard/Widget/ImageCarousel/index.jsx

@@ -1,9 +1,9 @@
 import React, { useState, useRef } from "react";
 import CarouselWidget from "../CarouselWidget/index.jsx";
-import { Image, Carousel } from "antd";
+import { Image, Carousel, Empty } from "antd";
 import { LeftOutlined, RightOutlined } from "@ant-design/icons";
 import CustomArrowButton from "./components/CustomArrowButton/index.js";
-import { StyledCarouselWrapper } from "./style.js";
+import { StyledCarouselWrapper, EmptyStateContainer } from "./style.js";
 import PropTypes from "prop-types";
 
 /**
@@ -45,6 +45,8 @@ import PropTypes from "prop-types";
  * @param {string} [props.arrowIconColor="#666"] - Default color of arrow icons
  * @param {string} [props.arrowHoverIconColor="#1890ff"] - Color of arrow icons on hover
  * @param {boolean} [props.customArrows=false] - Whether to show custom navigation arrows
+ * @param {ReactNode} [props.emptyLogo] - Custom logo/icon for empty state (defaults to Ant Design simple empty icon)
+ * @param {string|ReactNode} [props.emptyText="No Image"] - Custom text for empty state
  * @param {Object} [props.rest] - Additional props passed to the underlying CarouselWidget component
  * 
  * @features
@@ -74,6 +76,8 @@ function ImageCarousel({
   arrowIconColor = "#666",
   arrowHoverIconColor = "#1890ff",
   customArrows = false,
+  emptyLogo = Empty.PRESENTED_IMAGE_SIMPLE,
+  emptyText = "No Image",
   ...rest
 }) {
   const [previewVisible, setPreviewVisible] = useState(false);
@@ -92,7 +96,11 @@ function ImageCarousel({
     carouselRef.current?.next();
   };
 
-
+  // Check if images array is empty or has no valid images
+  const hasImages = images && images.length > 0 && images.some(image => {
+    const imageSrc = typeof image === "string" ? image : image?.src;
+    return imageSrc && imageSrc.trim().length > 0;
+  });
   return (
     <>
       <StyledCarouselWrapper 
@@ -108,38 +116,47 @@ function ImageCarousel({
           infinite
           dots={false}
         >
-        <Carousel ref={carouselRef} afterChange={handleCarouselChange} arrows={false} {...rest}  infinite>
-          {images.map((image, index) => {
-            const imageSrc = typeof image === "string" ? image : image.src;
-            const imageAlt =
-              typeof image === "string"
-                ? `${title} - Image ${index + 1}`
-                : image.alt;
+          {hasImages ? (
+            <Carousel ref={carouselRef} afterChange={handleCarouselChange} arrows={false} {...rest} infinite>
+              {images.map((image, index) => {
+                const imageSrc = typeof image === "string" ? image : image.src;
+                const imageAlt =
+                  typeof image === "string"
+                    ? `${title} - Image ${index + 1}`
+                    : image.alt;
 
-            return (
-              <div key={imageSrc}>
-                <div className="image-container">
-                  <Image
-                    src={imageSrc}
-                    alt={imageAlt}
-                    fallback={fallback}
-                    loading="lazy"
-                    preview={{
-                      visible: false,
-                    }}
-                    onClick={() => {
-                      setCurrent(index);
-                      setPreviewVisible(true);
-                    }}
-                  />
-                </div>
-              </div>
-            );
-          })}
-        </Carousel>
+                return (
+                  <div key={imageSrc}>
+                    <div className="image-container">
+                      <Image
+                        src={imageSrc}
+                        alt={imageAlt}
+                        fallback={fallback}
+                        loading="lazy"
+                        preview={{
+                          visible: false,
+                        }}
+                        onClick={() => {
+                          setCurrent(index);
+                          setPreviewVisible(true);
+                        }}
+                      />
+                    </div>
+                  </div>
+                );
+              })}
+            </Carousel>
+          ) : (
+            <EmptyStateContainer height={height}>
+              <Empty 
+                image={emptyLogo || Empty.PRESENTED_IMAGE_SIMPLE}
+                description={<span style={{ color: '#8C8C8C' }}>{emptyText}</span>}
+              />
+            </EmptyStateContainer>
+          )}
         </CarouselWidget>
         
-        {customArrows && images && images.length > 1 && (
+        {customArrows && hasImages && images.length > 1 && (
           <>
             <CustomArrowButton
               icon={<LeftOutlined />}
@@ -158,29 +175,31 @@ function ImageCarousel({
         )}
       </StyledCarouselWrapper>
 
-      <div style={{ display: "none" }}>
-        <Image.PreviewGroup
-          preview={{
-            visible: previewVisible,
-            current,
-            onVisibleChange: (vis) => setPreviewVisible(vis),
-            onChange: (idx) => {
-              setCurrent(idx);
-              carouselRef.current?.goTo(idx);
-            },
-          }}
-        >
-          {images.map((image, index) => {
-            const imageSrc = typeof image === "string" ? image : image.src;
-            const imageAlt =
-              typeof image === "string"
-                ? `${title} - Image ${index + 1}`
-                : image.alt;
+      {hasImages && (
+        <div style={{ display: "none" }}>
+          <Image.PreviewGroup
+            preview={{
+              visible: previewVisible,
+              current,
+              onVisibleChange: (vis) => setPreviewVisible(vis),
+              onChange: (idx) => {
+                setCurrent(idx);
+                carouselRef.current?.goTo(idx);
+              },
+            }}
+          >
+            {images.map((image, index) => {
+              const imageSrc = typeof image === "string" ? image : image.src;
+              const imageAlt =
+                typeof image === "string"
+                  ? `${title} - Image ${index + 1}`
+                  : image.alt;
 
-            return <Image key={imageSrc} src={imageSrc} alt={imageAlt} />;
-          })}
-        </Image.PreviewGroup>
-      </div>
+              return <Image key={imageSrc} src={imageSrc} alt={imageAlt} />;
+            })}
+          </Image.PreviewGroup>
+        </div>
+      )}
     </>
   );
 }
@@ -195,6 +214,8 @@ ImageCarousel.propTypes = {
   arrowIconColor: PropTypes.string,
   arrowHoverIconColor: PropTypes.string,
   customArrows: PropTypes.bool,
+  emptyLogo: PropTypes.node,
+  emptyText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 };
 
 export default ImageCarousel;

package/src/@daf/core/components/Dashboard/Widget/ImageCarousel/style.js

@@ -42,4 +42,48 @@ export const StyledCarouselWrapper = styled.div`
     margin-bottom: -3px !important;
   }
 
+`;
+
+export const EmptyStateContainer = styled.div`
+  width: 100%;
+  height: ${props => props.height || 400}px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #ffffff;
+  border-radius: 6px;
+  position: relative;
+
+  .ant-empty {
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+  }
+
+  .ant-empty-image {
+    margin-bottom: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .ant-empty-description {
+    text-align: center;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 8px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 40px;
+    height: 2px;
+    background-color: #722ed1;
+    border-radius: 1px;
+  }
 `;

package/src/@daf/core/components/Screens/TableScreen/TablePageWithTabs/index.jsx

@@ -0,0 +1,128 @@
+import React, { useState, useEffect, useRef } from 'react'
+import { Tabs, Drawer } from 'antd'
+import Header from '../../../Header/index.jsx'
+import BaseScreen from '../../BaseScreen/index.jsx'
+import { CREATE_DRAWER_WIDTH } from '../../../../../../helpers/Forms.js'
+import DrawerHeader from '../../../Header/DrawerHeader/index.jsx'
+
+const TablePageWithTabs = ({
+    t= () => {},
+    title,
+    breadCrumbs,
+    location,
+    loading = false,
+    goTo = () => {},
+    defaultActiveTab = "own",
+    checkboxConfig = {},
+    columns = [],
+    data = {},
+    APP,
+    getApiBaseUrl = () => {},
+    selectOptions = {},
+    selectFiltersConfig = {},
+    getRedirectLink = () => {},
+    filtersConfig = {},
+    isMobile,
+    view,
+    getActiveTab = () => {},
+    onDownload = () => {},
+    downloadDisabled = false,
+    drawerTitle = "",
+    onCreateModalClose = () => {},
+    children
+}) => {
+    const params = new URLSearchParams(location?.search);
+    const [activeTab, setActiveTab] = useState(params.get("tab") || defaultActiveTab);
+    const [openCreateModal, setOpenCreateModal] = useState(params.has("create"));
+
+    const getActiveTabRef = useRef(getActiveTab);
+    useEffect(() => {
+        getActiveTabRef.current = getActiveTab;
+    }, [getActiveTab]);
+
+    useEffect(() => {
+        getActiveTabRef.current(activeTab);
+    }, [activeTab]);
+
+    return (
+        <div className="semibold form-input-output daf-create-view">
+            <Header 
+                title={t(title)}
+                breadcrumbs={breadCrumbs}
+                actionButtons={[
+					{
+						type: "primary",
+						onClick: () => setOpenCreateModal(true),
+						tooltip: t("New"),
+						icon: "Add",
+					},
+				]}
+                onDownload={onDownload}
+                downloadDisabled={downloadDisabled}
+            />
+            <Tabs
+                items={[
+                    { label: t("All Data"), key: "all" },
+                    { label: t("Own Data"), key: "own" },
+                    { label: t("Partners"), key: "shared" },
+                ]}
+                defaultActiveKey={activeTab}
+                activeKey={activeTab}
+                onChange={(val) => {
+                    if (loading) {
+                        return;
+                    }
+        
+                    setActiveTab(val);
+                        
+                    const newParams = new URLSearchParams(location?.search);
+                    newParams.set("tab", val);
+                    goTo(`${location.pathname}?${newParams.toString()}`);
+                }}
+                className="view-page-tabs mt-3"
+            />
+            <BaseScreen 
+                t={t}
+                checkboxConfig={checkboxConfig}
+                defaultTableFilters={{}}
+                columns={columns}
+                data={data}
+                loading={loading}
+                location={location}
+                goTo={goTo}
+                APP={APP}
+                getApiBaseUrl={getApiBaseUrl}
+                selectOptions={selectOptions}
+                selectFilters={selectFiltersConfig}
+                view={view}
+                getRedirectLink={getRedirectLink}
+                defaultUrlParams={{}}
+                module={APP}
+                filtersConfig={filtersConfig}
+                isMobile={isMobile}
+            />
+            {openCreateModal && (
+                <Drawer
+                    destroyOnHidden
+                    title={
+                        <DrawerHeader 
+                            title={t(drawerTitle)}
+                        />
+                    }
+                    open={openCreateModal}
+                    onClose={() => setOpenCreateModal(false)}
+                    width={CREATE_DRAWER_WIDTH}
+                    bodyStyle={{ padding: 0 }}
+                >
+                {typeof children === 'function' 
+                    ? children({ onDrawerClose: () => setOpenCreateModal(false) })
+                    : children
+                }
+                </Drawer>
+            )}
+
+        </div>
+    )
+}
+
+export default TablePageWithTabs