@solidstarters/solid-core-ui 1.1.211 → 1.1.212

package/dist/components/core/list/widgets/SolidManyToOneRelationAvatarListWidget.tsx

@@ -0,0 +1,30 @@
+import { SolidListFieldWidgetProps } from "../../../../types/solid-core";
+import { AvatarWidget } from '../../../../components/core/common/AvatarWidget';
+
+export const SolidManyToOneRelationAvatarListWidget = ({ rowData, solidListViewMetaData, fieldMetadata, column }: SolidListFieldWidgetProps) => {
+    const manyToOneFieldData = rowData[column.attrs.name];
+
+    // This is the userkey that will be present within the rowData.
+    if (manyToOneFieldData) {
+        // Since this is a many-to-one field, we fetch the user key field of the associated model.
+        const userKeyField = fieldMetadata?.relationModel?.userKeyField?.name;
+
+        const manyToManyColVal = [manyToOneFieldData[userKeyField]];
+
+        // TODO: change this to use an anchor tag so that on click we open that entity form view. 
+        return (
+            <>
+                {manyToManyColVal.length > 0 &&
+
+                    manyToManyColVal.map((m: any) =>
+                        <AvatarWidget value={m}></AvatarWidget>
+
+                    )
+                }
+            </>
+        )
+    }
+    else {
+        return <span></span>
+    }
+};

package/dist/components/core/list/widgets/SolidShortTextAvatarWidget.tsx

@@ -0,0 +1,70 @@
+import { SolidListFieldWidgetProps } from "../../../../types/solid-core";
+
+
+export const SolidShortTextAvatarWidget = ({ rowData, solidListViewMetaData, fieldMetadata, column }: SolidListFieldWidgetProps) => {
+    // use "widget": "SolidUserNameAvatarWidget" in the list view field 
+
+    const value =
+        fieldMetadata &&
+        fieldMetadata.name &&
+        fieldMetadata.type === 'relation' &&
+        column?.attrs?.initialsKey &&
+        rowData[fieldMetadata.name]
+            ? rowData[fieldMetadata.name][column.attrs.initialsKey]
+            : fieldMetadata && fieldMetadata.name
+                ? rowData[fieldMetadata.name]
+                : undefined;
+
+    const getInitials = (value: string) => {
+        if (value) {
+            const names = value?.trim().split(' ');
+            const initials =
+                names.length === 1
+                    ? names[0][0]
+                    : names[0][0] + names[names.length - 1][0];
+            return initials.toUpperCase();
+        } else {
+            return ""
+        }
+    };
+
+    const getColorFromInitials = (initials: string) => {
+        let hash = 0;
+        for (let i = 0; i < initials.length; i++) {
+            hash = initials.charCodeAt(i) + ((hash << 5) - hash);
+        }
+        const hue = Math.abs(hash) % 360;
+        return `hsl(${hue}, 60%, 60%)`; // nice pastel color
+    };
+
+    const initials = getInitials(value);
+    const bgColor = getColorFromInitials(initials);
+
+    return (
+        <div className="solid-table-row">
+            {value &&
+                < div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                    <div
+                        style={{
+                            width: 20,
+                            height: 20,
+                            borderRadius: '50%',
+                            backgroundColor: bgColor,
+                            color: 'white',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            fontWeight: 600,
+                            fontSize: 12,
+                        }}
+                    >
+                        {initials}
+                    </div>
+                    <span>{value}</span>
+                </div>
+            }
+
+        </div >
+    );
+};
+

package/dist/components/core/list/widgets/SolidShortTextFieldImageRenderModeWidget.tsx

@@ -0,0 +1,21 @@
+import { SolidMediaListFieldWidgetProps } from "../../../../types/solid-core";
+
+export const SolidShortTextFieldImageListWidget = ({ rowData, solidListViewMetaData, fieldMetadata, column, setLightboxUrls, setOpenLightbox }: SolidMediaListFieldWidgetProps) => {
+
+    return (
+        <img
+            src={rowData[fieldMetadata.name]}
+            alt="product-image-single"
+            className="shadow-2 border-round"
+            width={40}
+            height={40}
+            style={{ objectFit: "cover" }}
+            onClick={(event) => {
+                event.stopPropagation();
+                setLightboxUrls([{ src: rowData[fieldMetadata.name], downloadUrl: rowData[fieldMetadata.name] }]);
+                setOpenLightbox(true);
+            }}
+        />
+    );
+};
+

package/dist/components/core/locales/SolidChatterLocaleTabView.tsx

@@ -0,0 +1,91 @@
+import React, { useEffect, useState } from 'react';
+import { TabView, TabPanel } from 'primereact/tabview';
+import { SolidChatter } from '../chatter/SolidChatter';
+import SolidLocale from './SolidLocale';
+import './solid-locale.css';
+import { SolidAiMainWrapper } from '../solid-ai/SolidAiMainWrapper';
+interface Props {
+  solidFormViewMetaData: any;
+  id: string;
+  refreshChatterMessage: boolean;
+  setRefreshChatterMessage: (value: boolean) => void;
+  activeTab: number;
+  selectedLocale: string | null;
+  setSelectedLocale: (locale: string | null) => void;
+  viewMode: string;
+  createMode: boolean;
+  //setDefaultLocaleId: (localeId: string) => void;
+  handleLocaleChangeRedirect: (locale: string, defaultEntityLocaleId: string, viewMode: string) => void;
+  defaultEntityLocaleId: string | null;
+  solidFormViewData: any;
+  published: string | null;
+  actionsAllowed?: string[];
+  mcpUrl?: string | null;
+}
+
+const SolidChatterLocaleTabView: React.FC<Props> = ({
+  solidFormViewMetaData,
+  id,
+  refreshChatterMessage,
+  setRefreshChatterMessage,
+  selectedLocale,
+  setSelectedLocale,
+  activeTab,
+  viewMode,
+  createMode,
+  handleLocaleChangeRedirect,
+  defaultEntityLocaleId,
+  solidFormViewData,
+  published,
+  actionsAllowed,
+  mcpUrl
+}) => {
+
+
+
+
+
+
+  return (
+    <TabView className="SolidCustomLocaleTabviewPanels h-full" activeIndex={activeTab}>
+      {solidFormViewMetaData?.data?.solidView?.model?.draftPublishWorkflow &&
+        <TabPanel header="Info" className={`SolidCustomLocaleTab p-2`}>
+          <SolidLocale
+            setSelectedLocale={setSelectedLocale}
+            solidFormViewMetaData={solidFormViewMetaData}
+            selectedLocale={selectedLocale}
+            id={id}
+            viewMode={viewMode}
+            createMode={createMode}
+            handleLocaleChangeRedirect={handleLocaleChangeRedirect}
+            defaultEntityLocaleId={defaultEntityLocaleId}
+            applicableLocales={solidFormViewMetaData?.data?.applicableLocales}
+            solidFormViewData={solidFormViewData}
+            published={published}
+          />
+        </TabPanel>
+      }
+      <TabPanel header="Audit Trail" className={`SolidCustomLocaleTab`} headerClassName='p-2'>
+        <SolidChatter
+          modelSingularName={solidFormViewMetaData?.data?.solidView?.model?.singularName}
+          id={id}
+          refreshChatterMessage={refreshChatterMessage}
+          setRefreshChatterMessage={setRefreshChatterMessage}
+          actionsAllowed={actionsAllowed}
+        />
+      </TabPanel>
+      {
+        mcpUrl &&
+        (
+          <TabPanel header="SolidX AI" className={`SolidCustomLocaleTab py-2`} contentClassName='h-full'>
+            <div style={{ height: "calc(100vh - 60px)" }}>
+              <SolidAiMainWrapper mcpUrl={mcpUrl} />
+            </div>
+          </TabPanel>
+        )
+      }
+    </TabView>
+  );
+};
+
+export default SolidChatterLocaleTabView;

package/dist/components/core/locales/SolidLocale.tsx

@@ -0,0 +1,127 @@
+"use client";
+
+import React, { useEffect, useState } from 'react';
+import { Divider } from 'primereact/divider';
+import { Dropdown } from 'primereact/dropdown';
+import "./solid-locale.css";
+const SolidLocale = ({ solidFormViewMetaData, id, selectedLocale, setSelectedLocale, viewMode, createMode, handleLocaleChangeRedirect,
+    applicableLocales, defaultEntityLocaleId, solidFormViewData, published }: { solidFormViewMetaData: any, id: string, selectedLocale: any, setSelectedLocale: any, viewMode: string, createMode: boolean, handleLocaleChangeRedirect: any, applicableLocales: any, defaultEntityLocaleId: string | null, solidFormViewData: any, published: string | null }) => {
+    const [localeOptions, setLocaleOptions] = useState([]);
+    const [defautlLocale, setDefaultLocale] = useState('');
+    useEffect(() => {
+        if (!applicableLocales) return;
+        // Set dropdown options
+        const localeOptions = applicableLocales.map((x: any) => ({
+            label: x.displayName,
+            value: x.locale,
+        }));
+        setLocaleOptions(localeOptions);
+
+        if (createMode) {
+            const defaultLocale = applicableLocales.find((x: any) => x.isDefault === 'yes');
+            setSelectedLocale(defaultLocale?.locale || null);
+            setDefaultLocale(defaultLocale?.displayName || '');
+            return;
+        }
+
+        if (viewMode === 'edit' || viewMode === 'view') {
+            //This is to check record entity matched defaultEntityLocaleId from query params & isDefault for default locale
+            const matchedLocale = applicableLocales.find(
+                (x: any) => x.isDefault === 'yes' && x.defaultEntityLocaleId == id
+            );
+            if (matchedLocale) {
+                setSelectedLocale(matchedLocale.locale);
+            }
+        }
+    }, [applicableLocales, id, viewMode, createMode]);
+
+    const handleLocaleChange = (e: any) => {
+
+        const newLocale = e.value;
+        if (newLocale === selectedLocale) return;
+        setSelectedLocale(newLocale);
+        const targetDefaultEntityLocaleId = id === 'new' ? defaultEntityLocaleId : defaultEntityLocaleId || id;
+        handleLocaleChangeRedirect(newLocale, targetDefaultEntityLocaleId, viewMode);
+    };
+
+    // utils/formatDate.ts
+    const formatToDDMMYYWithTime = (dateString: string) => {
+        if (!dateString) return 'N/A';
+        const date = new Date(dateString);
+
+        const day = String(date.getDate()).padStart(2, '0');
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const year = String(date.getFullYear()).slice(-2);
+
+        const hours = String(date.getHours()).padStart(2, '0');
+        const minutes = String(date.getMinutes()).padStart(2, '0');
+
+        return `${day}-${month}-${year} ${hours}:${minutes}`;
+    }
+
+
+    return (
+        <div className="flex flex-column p-0 m-0">
+            <div className="flex justify-content-end gap-3">
+            </div>
+            {solidFormViewData && (viewMode === 'edit') &&
+                (<div className="w-full" style={{ backgroundColor: 'var(--surface-ground)', margin: '10px 0', padding: 0, overflow:'hidden' }}>
+                    {solidFormViewMetaData.data.solidView?.model?.draftPublishWorkflow &&
+                        published !== null ? (
+                        <li className="w-full text-left list-disc" style={{ padding: '10px 0px',margin: '0 20px', color: '#15803D' }}>
+                            Editing <span className="font-bold">published version</span>
+                        </li>
+                    ) : (
+                        <li className="w-full text-left list-disc" style={{ padding: '10px 0px',margin: '0 20px', color: '#EF4444' }}>
+                            Editing <span className="font-bold">unpublished version</span>
+                        </li>
+                    )}
+                </div>
+                )
+            }
+            <div className="flex flex-column gap-2 mt-2" style={{ backgroundColor: 'var(--surface-ground)', padding: '0.5rem' }}>
+                <h3 className="text-lg font-semibold p-0 m-0">Information</h3>
+                <Divider className="my-2" />
+                <div className="space-y-2">
+                    <div className='flex align-items-center justify-content-between gap-2 p-2'>
+                        <p className="text-sm font-bold text-gray-500 m-0">Created At</p>
+                        <p className="text-sm m-0">{formatToDDMMYYWithTime(solidFormViewData?.data?.createdAt)}</p>
+                    </div>
+                    <div className='flex align-items-center justify-content-between gap-2 p-2'>
+                        <p className="text-sm font-bold text-gray-500 m-0">Updated At</p>
+                        <p className="text-sm m-0">
+                            {formatToDDMMYYWithTime(solidFormViewData?.data?.updatedAt)}
+                        </p>
+                    </div>
+                    <div className='flex align-items-center justify-content-between gap-2 p-2'>
+                        <p className="text-sm font-bold text-gray-500 m-0">Published At</p>
+                        <p className="text-sm m-0">{formatToDDMMYYWithTime(published ?? '')}</p>
+                    </div>
+                </div>
+
+                {solidFormViewMetaData?.data?.solidView?.model?.internationalisation &&
+                    <>
+                        <h3 className="text-lg font-semibold mt-6 mb-2">Internationalisation</h3>
+                        <label className="form-field-label">Locales</label>
+                        <Dropdown
+                            value={selectedLocale}
+                            onChange={(e) => handleLocaleChange(e)}
+                            options={localeOptions}
+                            optionLabel="label"
+                            placeholder="Select locale"
+                            className="w-full"
+                            //TODO: disable if createMode is true
+                            disabled={createMode}
+                        />
+                        {viewMode === 'view' || createMode && (
+                            <p className="text-sm text-gray-700 mt-0 ml-0"> By default record will be created in <b>{defautlLocale}</b></p>
+                        )}
+                    </>
+                }
+            </div>
+            {/* <p className="text-sm font-bold text-gray-500 px-2">Fill in form another locale</p> */}
+        </div>
+    );
+};
+
+export default SolidLocale;