Grid Widget güncellemesi

api/src/Kurs.Platform.Application.Contracts/ListForms/GridOptionsDto/WidgetEditDto.cs

@@ -10,7 +10,7 @@ public class WidgetEditDto
     public string ValueClassName { get; set; } = "text-3xl";
     public string Color { get; set; }
     public string Icon { get; set; }
-    public string Subtitle { get; set; }
+    public string SubTitle { get; set; }
     public string OnClick { get; set; }
     public string ClassName { get; set; }
 }

api/src/Kurs.Platform.Application.Contracts/ListForms/Select/WidgetDto.cs

@@ -4,6 +4,7 @@ public class WidgetDto
 {
     public int ColGap { get; set; }
     public int ColSpan { get; set; }
+    public string ClassName { get; set; }
     public List<WidgetItemDto> Items { get; set; }
 }
 
@@ -14,7 +15,6 @@ public class WidgetItemDto
     public string ValueClassName { get; set; } = "text-3xl";
     public string Color { get; set; }
     public string Icon { get; set; }
-    public string Subtitle { get; set; }
+    public string SubTitle { get; set; }
     public string OnClick { get; set; }
-    public string ClassName { get; set; }
 }

api/src/Kurs.Platform.Application/ListForms/ListFormSelectAppService.cs

@@ -228,6 +228,7 @@ public class ListFormSelectAppService : PlatformAppService, IListFormSelectAppSe
                     {
                         ColGap = widget.ColGap,
                         ColSpan = widget.ColSpan,
+                        ClassName = widget.ClassName,
                         Items = []
                     };
 
@@ -244,9 +245,8 @@ public class ListFormSelectAppService : PlatformAppService, IListFormSelectAppSe
                                     Value = dynamicItem.ContainsKey(widget.Value) ? dynamicItem[widget.Value]?.ToString() : string.Empty,
                                     Color = dynamicItem.ContainsKey(widget.Color) ? dynamicItem[widget.Color]?.ToString() : string.Empty,
                                     Icon = dynamicItem.ContainsKey(widget.Icon) ? dynamicItem[widget.Icon]?.ToString() : string.Empty,
-                                    Subtitle = dynamicItem.ContainsKey(widget.Subtitle) ? dynamicItem[widget.Subtitle]?.ToString() : string.Empty,
+                                    SubTitle = dynamicItem.ContainsKey(widget.SubTitle) ? dynamicItem[widget.SubTitle]?.ToString() : string.Empty,
                                     OnClick = dynamicItem.ContainsKey(widget.OnClick) ? dynamicItem[widget.OnClick]?.ToString() : string.Empty,
-                                    ClassName = dynamicItem.ContainsKey(widget.ClassName) ? dynamicItem[widget.ClassName]?.ToString() : string.Empty,
                                 });
                             }
                         }

api/src/Kurs.Platform.Domain/Queries/Widget.cs

@@ -13,7 +13,7 @@ public class Widget : ValueObject
     public string ValueClassName { get; set; } = "text-3xl";
     public string Color { get; set; }
     public string Icon { get; set; }
-    public string Subtitle { get; set; }
+    public string SubTitle { get; set; }
     public string OnClick { get; set; }
     public string ClassName { get; set; }
 
@@ -27,7 +27,7 @@ public class Widget : ValueObject
         yield return ValueClassName;
         yield return Color;
         yield return Icon;
-        yield return Subtitle;
+        yield return SubTitle;
         yield return OnClick;
         yield return ClassName;
     }

ui/dev-dist/sw.js

@@ -82,7 +82,7 @@ define(['./workbox-54d0af47'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.buc1mitnpmo"
+    "revision": "0.h9qpsacvko"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

ui/src/components/ui/Widget/Widget.tsx

@@ -18,9 +18,9 @@ interface WidgetProps {
   title: string
   value: string | number
   valueClassName?: string
-  color: colorType
+  color?: colorType
-  icon: (typeof iconList)[number]
+  icon?: (typeof iconList)[number]
-  subtitle?: string
+  subTitle?: string
   onClick?: () => void
   className?: string
 }
@@ -29,9 +29,9 @@ export default function Widget({
   title,
   value,
   valueClassName = 'text-3xl',
-  color,
+  color = 'blue',
-  icon,
+  icon = 'FaChartBar',
-  subtitle,
+  subTitle = '-',
   onClick,
   className,
 }: WidgetProps) {
@@ -42,7 +42,7 @@ export default function Widget({
   useEffect(() => {
     let isMounted = true
     import('react-icons/fa').then((icons) => {
-      if (isMounted && icon in icons) {
+      if (isMounted && icon && icon in icons) {
         setIconComponent(() => (icons as any)[icon])
       }
     })
@@ -64,6 +64,8 @@ export default function Widget({
     orange: { bg: 'from-orange-100 to-orange-200', text: 'text-orange-600' },
   }
 
+  const safeColor = color && colorMap[color] ? color : 'green'
+
   return (
     <div
       onClick={onClick}
@@ -76,13 +78,15 @@ export default function Widget({
       <div className="flex items-center justify-between">
         <div>
           <p className="text-sm font-semibold text-gray-600 uppercase tracking-wide">{title}</p>
-          <p className={`${valueClassName} font-bold mt-1 ${colorMap[color].text}`}>{value}</p>
+          <p className={`${valueClassName} font-bold mt-1 ${colorMap[safeColor].text}`}>{value}</p>
-          {subtitle && <p className="text-sm text-gray-500 mt-1">{subtitle}</p>}
+          <p className="text-sm text-gray-500 mt-1">{subTitle}</p>
         </div>
         <div
-          className={`w-12 h-12 bg-gradient-to-br ${colorMap[color].bg} rounded-xl flex items-center justify-center shadow-sm`}
+          className={`w-12 h-12 bg-gradient-to-br ${colorMap[safeColor].bg} rounded-xl flex items-center justify-center shadow-sm`}
         >
-          {IconComponent ? <IconComponent className={`w-6 h-6 ${colorMap[color].text}`} /> : null}
+          {IconComponent ? (
+            <IconComponent className={`w-6 h-6 ${colorMap[safeColor].text}`} />
+          ) : null}
         </div>
       </div>
     </div>

ui/src/components/ui/Widget/WidgetGroup.tsx

@@ -1,29 +1,30 @@
 import classNames from 'classnames'
 import Widget, { type colorType } from './Widget'
-import { WidgetEditDto } from '@/proxy/form/models'
+import { WidgetEditDto, WidgetGroupDto } from '@/proxy/form/models'
 
-interface WidgetGroup {
+export default function WidgetGroup({ widgetGroups }: { widgetGroups: WidgetGroupDto[] }) {
-  colGap?: number
+  return (
-  colSpan?: number
+    <div>
-  items: WidgetEditDto[]
+      {widgetGroups.map((group, gIdx) => (
-}
+        <div
-
+          key={gIdx}
-export default function WidgetGroup(widgets: WidgetGroup[]) {
+          className={classNames(`grid grid-cols-12 gap-${group.colGap} ${group.className || ''}`)}
-  return widgets.map((group, gIdx) => (
+        >
-    <div key={gIdx} className={classNames(`grid grid-cols-12 gap-${group.colGap ?? 4}`)}>
           {group.items.map((item: WidgetEditDto, order: number) => (
-        <div key={`${gIdx}-${order}`} className={classNames(`col-span-${group.colSpan ?? 3}`)}>
+            <div key={`${gIdx}-${order}`} className={classNames(`col-span-${group.colSpan}`)}>
               <Widget
                 title={item.title}
                 value={item.value}
                 color={item.color as colorType}
-            icon={item.icon ?? 'FaChartBar'}
+                icon={item.icon}
-            subtitle={item.subTitle}
+                subTitle={item.subTitle}
                 valueClassName={item.valueClassName}
-            onClick={() => item.onClick}
+                onClick={eval(item.onClick)}
               />
             </div>
           ))}
         </div>
-  ))
+      ))}
+    </div>
+  )
 }

ui/src/proxy/form/models.ts

@@ -702,10 +702,18 @@ export enum ColumnSortDirectionEnum {
   'Desc' = 'desc',
 }
 
+export interface WidgetGroupDto {
+  colGap?: number
+  colSpan?: number
+  className?: string
+  items: WidgetEditDto[]
+}
+
 export interface WidgetEditDto {
   colGap: number
   colSpan: number
   sqlQuery?: string
+  className?: string
   title: string
   value: string
   valueClassName: string
@@ -713,5 +721,4 @@ export interface WidgetEditDto {
   icon: string
   subTitle: string
   onClick: string
-  className: string
 }

ui/src/shared/useListFormCustomDataSource.ts

@@ -1,9 +1,9 @@
 import DataGrid from 'devextreme-react/data-grid'
 import PivotGrid from 'devextreme-react/pivot-grid'
 import CustomStore from 'devextreme/data/custom_store'
-import { MutableRefObject, useCallback } from 'react'
+import { MutableRefObject, useCallback, useState } from 'react'
 import { getLoadOptions, getServiceAddress, setGridPanelColor } from '../views/list/Utils'
-import { GridOptionsDto } from '../proxy/form/models'
+import { GridOptionsDto, WidgetGroupDto } from '../proxy/form/models'
 import { GridColumnData } from '../views/list/GridColumnData'
 import { dynamicFetch } from '../services/form.service'
 import { MULTIVALUE_DELIMITER } from '../constants/app.constant'
@@ -23,6 +23,7 @@ const useListFormCustomDataSource = ({
       listFormCode: string,
       searchParams?: URLSearchParams,
       cols?: GridColumnData[],
+      setWidgetGroups?: (widgetGroups: WidgetGroupDto[]) => void,
     ) => {
       return new CustomStore({
         key: gridOptions.keyFieldName,
@@ -71,6 +72,8 @@ const useListFormCustomDataSource = ({
             parameters.filter = JSON.stringify(parameters.filter)
             const response = await dynamicFetch('list-form-select/select', 'GET', parameters)
 
+            if (setWidgetGroups) setWidgetGroups(response.data.widgets ?? [])
+
             // Column format multiValue ise, gelen stringi array yapmaliyiz
             if (columns) {
               columns.forEach((col: any) => {
@@ -123,6 +126,7 @@ const useListFormCustomDataSource = ({
               totalCount: response.data.totalCount,
               summary: response.data.summary,
               groupCount: response.data.groupCount,
+              widgets: response.data.widgets,
             }
             return retValue
           } catch (error: any) {

ui/src/views/admin/listForm/edit/FormTabWidgets.tsx

@@ -9,7 +9,7 @@ import { ListFormEditTabs } from '@/proxy/admin/list-form/models'
 import { useStoreState } from '@/store'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { useState } from 'react'
-import { FaEdit, FaFileMedical, FaTrash } from 'react-icons/fa';
+import { FaEdit, FaFileMedical, FaTrash } from 'react-icons/fa'
 import JsonRowOpDialogEditForm from './json-row-operations/JsonRowOpDialogEditForm'
 import { JsonRowDialogData } from './json-row-operations/types'
 import JsonRowOpDialogWidget from './json-row-operations/JsonRowOpDialogWidget'
@@ -58,14 +58,14 @@ function FormTabWidgets(props: { listFormCode: string }) {
               <Th>{translate('::ListForms.ListFormEdit.WidgetColGap')}</Th>
               <Th>{translate('::ListForms.ListFormEdit.WidgetColSpan')}</Th>
               <Th>{translate('::ListForms.ListFormEdit.WidgetSqlQuery')}</Th>
+              <Th>{translate('::ListForms.ListFormEdit.WidgetClassName')}</Th>
+              <Th>{translate('::ListForms.ListFormEdit.WidgetValueClassName')}</Th>
               <Th>{translate('::ListForms.ListFormEdit.WidgetTitle')}</Th>
               <Th>{translate('::ListForms.ListFormEdit.WidgetValue')}</Th>
-              <Th>{translate('::ListForms.ListFormEdit.WidgetValueClassName')}</Th>
               <Th>{translate('::ListForms.ListFormEdit.WidgetColor')}</Th>
               <Th>{translate('::ListForms.ListFormEdit.WidgetIcon')}</Th>
               <Th>{translate('::ListForms.ListFormEdit.WidgetSubtitle')}</Th>
               <Th>{translate('::ListForms.ListFormEdit.WidgetOnClick')}</Th>
-              <Th>{translate('::ListForms.ListFormEdit.WidgetClassName')}</Th>
             </Tr>
           </THead>
           <TBody>
@@ -113,14 +113,14 @@ function FormTabWidgets(props: { listFormCode: string }) {
                 <Td>{row.colGap}</Td>
                 <Td>{row.colSpan}</Td>
                 <Td>{row.sqlQuery}</Td>
+                <Td>{row.className}</Td>
+                <Td>{row.valueClassName}</Td>
                 <Td>{row.title}</Td>
                 <Td>{row.value}</Td>
-                <Td>{row.valueClassName}</Td>
                 <Td>{row.color}</Td>
                 <Td>{row.icon}</Td>
                 <Td>{row.subTitle}</Td>
                 <Td>{row.onClick}</Td>
-                <Td>{row.className}</Td>
               </Tr>
             ))}
           </TBody>

ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogWidget.tsx

@@ -5,13 +5,14 @@ import {
   FormItem,
   Input,
   Notification,
+  Select,
   toast,
 } from '@/components/ui'
 import { ListFormJsonRowDto } from '@/proxy/admin/list-form/models'
 import { SelectBoxOption } from '@/shared/types'
 import { useStoreActions, useStoreState } from '@/store'
 import { useLocalization } from '@/utils/hooks/useLocalization'
-import { Field, Form, Formik } from 'formik'
+import { Field, FieldProps, Form, Formik } from 'formik'
 import { Dispatch, SetStateAction, useEffect, useState } from 'react'
 import { number, object, string } from 'yup'
 import { JsonRowDialogData } from './types'
@@ -21,6 +22,7 @@ import {
   postListFormJsonRow,
   putListFormJsonRow,
 } from '@/services/admin/list-form.service'
+import { colSpanOptions } from '../options'
 
 const schema = object().shape({
   colGap: number().required('Column Gap Required'),
@@ -103,15 +105,15 @@ function JsonRowOpDialogWidget({
               data.widgetValues ?? {
                 colGap: 0,
                 colSpan: 0,
-                sqlQuery: '',
-                title: '',
-                value: '',
-                valueClassName: '',
-                color: '',
-                icon: '',
-                subTitle: '',
-                onClick: '',
                 className: '',
+                sqlQuery: '',
+                title: 'Title',
+                value: 'Value',
+                valueClassName: '',
+                color: 'Color',
+                icon: 'Icon',
+                subTitle: 'SubTitle',
+                onClick: '',
               }
             }
             validationSchema={schema}
@@ -153,12 +155,12 @@ function JsonRowOpDialogWidget({
                 <FormContainer size="sm">
                   <div className="max-h-96 overflow-y-auto p-2">
                     <FormItem
-                      label="Column Gap"
+                      label="Column Gap (Sütun Boşluğu)"
                       invalid={errors.colGap && touched.colGap}
                       errorMessage={errors.colGap}
                     >
                       <Field
-                        type="text"
+                        type="number"
                         autoComplete="off"
                         name="colGap"
                         placeholder="Column Gap"
@@ -167,17 +169,24 @@ function JsonRowOpDialogWidget({
                     </FormItem>
 
                     <FormItem
-                      label="Column Span"
+                      label="Column Span (Sütun Genişliği)"
                       invalid={errors.colSpan && touched.colSpan}
                       errorMessage={errors.colSpan}
                     >
-                      <Field
+                      <Field type="text" autoComplete="off" name="colSpan" placeholder="colSpan">
-                        type="text"
+                        {({ field, form }: FieldProps<SelectBoxOption>) => (
-                        autoComplete="off"
+                          <Select
-                        name="colSpan"
+                            field={field}
-                        placeholder="Column Span"
+                            form={form}
-                        component={Input}
+                            isClearable={true}
+                            options={colSpanOptions}
+                            value={colSpanOptions?.filter(
+                              (option: any) => option.value === values.colSpan,
+                            )}
+                            onChange={(option) => form.setFieldValue(field.name, option?.value)}
                           />
+                        )}
+                      </Field>
                     </FormItem>
 
                     <FormItem
@@ -191,6 +200,36 @@ function JsonRowOpDialogWidget({
                         name="sqlQuery"
                         placeholder="Sql Query"
                         component={Input}
+                        rows={6}
+                        textArea={true}
+                      />
+                    </FormItem>
+
+                    <FormItem
+                      label="Class Name"
+                      invalid={errors.className && touched.className}
+                      errorMessage={errors.className}
+                    >
+                      <Field
+                        type="text"
+                        autoComplete="off"
+                        name="className"
+                        placeholder="Class Name"
+                        component={Input}
+                      />
+                    </FormItem>
+
+                    <FormItem
+                      label="Value Class Name"
+                      invalid={errors.valueClassName && touched.valueClassName}
+                      errorMessage={errors.valueClassName}
+                    >
+                      <Field
+                        type="text"
+                        autoComplete="off"
+                        name="valueClassName"
+                        placeholder="Value Class Name"
+                        component={Input}
                       />
                     </FormItem>
 
@@ -223,21 +262,7 @@ function JsonRowOpDialogWidget({
                     </FormItem>
 
                     <FormItem
-                      label="Value Class Name"
+                      label="Color Field"
-                      invalid={errors.valueClassName && touched.valueClassName}
-                      errorMessage={errors.valueClassName}
-                    >
-                      <Field
-                        type="text"
-                        autoComplete="off"
-                        name="valueClassName"
-                        placeholder="Value Class Name"
-                        component={Input}
-                      />
-                    </FormItem>
-
-                    <FormItem
-                      label="Color"
                       invalid={errors.color && touched.color}
                       errorMessage={errors.color}
                     >
@@ -251,7 +276,7 @@ function JsonRowOpDialogWidget({
                     </FormItem>
 
                     <FormItem
-                      label="Icon"
+                      label="Icon Field"
                       invalid={errors.icon && touched.icon}
                       errorMessage={errors.icon}
                     >
@@ -264,6 +289,48 @@ function JsonRowOpDialogWidget({
                       />
                     </FormItem>
 
+                    {/* <FormItem
+                      label="Color"
+                      invalid={errors.color && touched.color}
+                      errorMessage={errors.color}
+                    >
+                      <Field type="text" autoComplete="off" name="color" placeholder="Color">
+                        {({ field, form }: FieldProps<SelectBoxOption>) => (
+                          <Select
+                            field={field}
+                            form={form}
+                            isClearable={true}
+                            options={widgetColorOptions}
+                            value={widgetColorOptions?.filter(
+                              (option: any) => option.value === values.color,
+                            )}
+                            onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                          />
+                        )}
+                      </Field>
+                    </FormItem>
+
+                    <FormItem
+                      label="Icon"
+                      invalid={errors.icon && touched.icon}
+                      errorMessage={errors.icon}
+                    >
+                      <Field type="text" autoComplete="off" name="icon" placeholder="Icon">
+                        {({ field, form }: FieldProps<SelectBoxOption>) => (
+                          <Select
+                            field={field}
+                            form={form}
+                            isClearable={true}
+                            options={widgetIconOptions}
+                            value={widgetIconOptions?.filter(
+                              (option: any) => option.value === values.icon,
+                            )}
+                            onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                          />
+                        )}
+                      </Field>
+                    </FormItem> */}
+
                     <FormItem
                       label="Sub Title"
                       invalid={errors.subTitle && touched.subTitle}
@@ -272,7 +339,7 @@ function JsonRowOpDialogWidget({
                       <Field
                         type="text"
                         autoComplete="off"
-                        name="subtitle"
+                        name="subTitle"
                         placeholder="Sub Title"
                         component={Input}
                       />
@@ -291,21 +358,6 @@ function JsonRowOpDialogWidget({
                         component={Input}
                       />
                     </FormItem>
-
-                    <FormItem
-                      label="Class Name"
-                      invalid={errors.className && touched.className}
-                      errorMessage={errors.className}
-                    >
-                      <Field
-                        type="text"
-                        autoComplete="off"
-                        name="className"
-                        placeholder="Class Name"
-                        component={Input}
-                      />
-                    </FormItem>
-
                   </div>
                   <div className="text-right mt-4">
                     <Button className="ltr:mr-2 rtl:ml-2" variant="plain" onClick={handleClose}>

ui/src/views/admin/listForm/edit/options.ts

@@ -25,6 +25,8 @@ import {
   GridColumnJoinTypeListEnum,
 } from '../../../../proxy/admin/list-form-field/models'
 import { enumToList } from '../../../../utils/enumUtils'
+import { colSpan, iconList, WidgetColorEnum } from '@/components/ui/Widget/iconList'
+import { SelectBoxOption } from '@/shared/types'
 
 export const sortModeOptions = [
   { value: 'none', label: 'None' },
@@ -216,3 +218,13 @@ export const cascadeFilterOperator = enumToList<string>(ColumnCascadeFilterOpera
 export const pivotSettingsAreaOptions = enumToList<string>(PivotSettingsAreaEnum)
 export const pivotSettingsGroupIntervalOptions = enumToList<string>(PivotSettingsGroupIntervalEnum)
 export const pivotSortDirectionOptions = enumToList<string>(ColumnSortDirectionEnum)
+export const widgetColorOptions = enumToList<string>(WidgetColorEnum)
+export const widgetIconOptions = iconList.map((icon) => ({
+  value: icon,
+  label: icon,
+}))
+
+export const colSpanOptions = colSpan.map((span) => ({
+  value: span,
+  label: span,
+}))

ui/src/views/list/Grid.tsx

@@ -7,6 +7,7 @@ import {
   GridDto,
   ListFormCustomizationTypeEnum,
   PlatformEditorTypes,
+  WidgetGroupDto,
 } from '@/proxy/form/models'
 import { getList } from '@/services/form.service'
 import {
@@ -64,6 +65,7 @@ import { TagBoxEditorComponent } from './editors/TagBoxEditorComponent'
 import { useFilters } from './useFilters'
 import { useToolbar } from './useToolbar'
 import { ImportDashboard } from '@/components/importManager/ImportDashboard'
+import WidgetGroup from '@/components/ui/Widget/WidgetGroup'
 
 interface GridProps {
   listFormCode: string
@@ -88,6 +90,7 @@ const Grid = (props: GridProps) => {
   const [columnData, setColumnData] = useState<GridColumnData[]>()
   const [formData, setFormData] = useState<any>()
   const [mode, setMode] = useState<RowMode>('view')
+  const [widgetGroups, setWidgetGroups] = useState<WidgetGroupDto[]>([])
 
   const preloadExportLibs = () => {
     import('exceljs')
@@ -404,7 +407,9 @@ const Grid = (props: GridProps) => {
       listFormCode,
       searchParams,
       cols,
+      setWidgetGroups,
     )
+
     setGridDataSource(dataSource)
   }, [gridDto, searchParams])
 
@@ -503,6 +508,9 @@ const Grid = (props: GridProps) => {
   }
 
   return (
+    <>
+      <WidgetGroup widgetGroups={widgetGroups} />
+
       <Container className={DX_CLASSNAMES}>
         {!isSubForm && (
           <Helmet
@@ -578,7 +586,8 @@ const Grid = (props: GridProps) => {
                 popup={{
                   title: gridDto.gridOptions.editingOptionDto?.popup?.title,
                   showTitle: gridDto.gridOptions.editingOptionDto?.popup?.showTitle,
-                hideOnOutsideClick: gridDto.gridOptions.editingOptionDto?.popup?.hideOnOutsideClick,
+                  hideOnOutsideClick:
+                    gridDto.gridOptions.editingOptionDto?.popup?.hideOnOutsideClick,
                   width: gridDto.gridOptions.editingOptionDto?.popup?.width,
                   height: gridDto.gridOptions.editingOptionDto?.popup?.height,
                   fullScreen: gridDto.gridOptions.editingOptionDto?.popup?.fullScreen,
@@ -805,6 +814,7 @@ const Grid = (props: GridProps) => {
         </Dialog>
         <GridFilterDialogs gridRef={gridRef} listFormCode={listFormCode} {...filterData} />
       </Container>
+    </>
   )
 }