CardView eklendi.
This commit is contained in:
parent
9478d4f69d
commit
8793292932
8 changed files with 1518 additions and 5 deletions
|
|
@ -4,6 +4,7 @@ public class LayoutDto
|
||||||
{
|
{
|
||||||
public bool Grid { get; set; } = true;
|
public bool Grid { get; set; } = true;
|
||||||
public bool Card { get; set; } = true;
|
public bool Card { get; set; } = true;
|
||||||
|
public bool CardView { get; set; } = true;
|
||||||
public bool Pivot { get; set; } = true;
|
public bool Pivot { get; set; } = true;
|
||||||
public bool Chart { get; set; } = true;
|
public bool Chart { get; set; } = true;
|
||||||
public bool Tree { get; set; } = true;
|
public bool Tree { get; set; } = true;
|
||||||
|
|
|
||||||
|
|
@ -66,6 +66,7 @@ public static class SeederDefaults
|
||||||
{
|
{
|
||||||
Grid = true,
|
Grid = true,
|
||||||
Card = true,
|
Card = true,
|
||||||
|
CardView = true,
|
||||||
Pivot = true,
|
Pivot = true,
|
||||||
Chart = true,
|
Chart = true,
|
||||||
Tree = true,
|
Tree = true,
|
||||||
|
|
|
||||||
|
|
@ -894,6 +894,7 @@ export interface WidgetEditDto {
|
||||||
export interface LayoutDto {
|
export interface LayoutDto {
|
||||||
grid: boolean
|
grid: boolean
|
||||||
card: boolean
|
card: boolean
|
||||||
|
cardView: boolean
|
||||||
pivot: boolean
|
pivot: boolean
|
||||||
tree: boolean
|
tree: boolean
|
||||||
chart: boolean
|
chart: boolean
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,6 @@ import { LanguageInfo } from '@/proxy/config/models'
|
||||||
import { SelectBoxOption } from '@/types/shared'
|
import { SelectBoxOption } from '@/types/shared'
|
||||||
import { useStoreState } from '@/store'
|
import { useStoreState } from '@/store'
|
||||||
import { useLocalization } from '@/utils/hooks/useLocalization'
|
import { useLocalization } from '@/utils/hooks/useLocalization'
|
||||||
import SelectBox from 'devextreme-react/select-box'
|
|
||||||
import { Field, FieldProps, Form, Formik } from 'formik'
|
import { Field, FieldProps, Form, Formik } from 'formik'
|
||||||
import { useEffect, useState } from 'react'
|
import { useEffect, useState } from 'react'
|
||||||
import * as Yup from 'yup'
|
import * as Yup from 'yup'
|
||||||
|
|
@ -25,6 +24,7 @@ const schema = Yup.object().shape({
|
||||||
layoutDto: Yup.object().shape({
|
layoutDto: Yup.object().shape({
|
||||||
grid: Yup.boolean(),
|
grid: Yup.boolean(),
|
||||||
card: Yup.boolean(),
|
card: Yup.boolean(),
|
||||||
|
cardView: Yup.boolean(),
|
||||||
pivot: Yup.boolean(),
|
pivot: Yup.boolean(),
|
||||||
chart: Yup.boolean(),
|
chart: Yup.boolean(),
|
||||||
tree: Yup.boolean(),
|
tree: Yup.boolean(),
|
||||||
|
|
@ -311,6 +311,20 @@ function FormTabDetails(
|
||||||
/>
|
/>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
|
<FormItem
|
||||||
|
label={translate('::ListForms.ListFormEdit.DetailsLayoutDto.CardViewLayout')}
|
||||||
|
invalid={errors.layoutDto?.cardView && touched.layoutDto?.cardView}
|
||||||
|
errorMessage={errors.layoutDto?.cardView}
|
||||||
|
>
|
||||||
|
<Field
|
||||||
|
className="w-20"
|
||||||
|
autoComplete="off"
|
||||||
|
name="layoutDto.cardView"
|
||||||
|
placeholder={translate('::ListForms.ListFormEdit.DetailsLayoutDto.CardViewLayout')}
|
||||||
|
component={Checkbox}
|
||||||
|
/>
|
||||||
|
</FormItem>
|
||||||
|
|
||||||
<FormItem
|
<FormItem
|
||||||
label={translate('::ListForms.ListFormEdit.DetailsLayoutDto.PivotLayout')}
|
label={translate('::ListForms.ListFormEdit.DetailsLayoutDto.PivotLayout')}
|
||||||
invalid={errors.layoutDto?.pivot && touched.layoutDto?.pivot}
|
invalid={errors.layoutDto?.pivot && touched.layoutDto?.pivot}
|
||||||
|
|
|
||||||
|
|
@ -210,6 +210,7 @@ export const listFormTypeOptions = [
|
||||||
export const listFormDefaultLayoutOptions = [
|
export const listFormDefaultLayoutOptions = [
|
||||||
{ value: 'grid', label: 'Grid' },
|
{ value: 'grid', label: 'Grid' },
|
||||||
{ value: 'card', label: 'Card' },
|
{ value: 'card', label: 'Card' },
|
||||||
|
{ value: 'cardView', label: 'Card View' },
|
||||||
{ value: 'pivot', label: 'Pivot' },
|
{ value: 'pivot', label: 'Pivot' },
|
||||||
{ value: 'chart', label: 'Chart' },
|
{ value: 'chart', label: 'Chart' },
|
||||||
{ value: 'tree', label: 'Tree' },
|
{ value: 'tree', label: 'Tree' },
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,11 @@
|
||||||
export type ChartOperation = '' | 'select' | 'insert' | 'update' | 'delete'
|
export type ChartOperation = '' | 'select' | 'insert' | 'update' | 'delete'
|
||||||
export type ChartDialogType = '' | 'pane' | 'serie' | 'annotation' | 'axis'
|
export type ChartDialogType = '' | 'pane' | 'serie' | 'annotation' | 'axis'
|
||||||
export type ListViewLayoutType = 'grid' | 'card' | 'pivot' | 'tree' | 'chart' | 'gantt' | 'scheduler'
|
export type ListViewLayoutType = 'grid' | 'card' | 'cardView' | 'pivot' | 'tree' | 'chart' | 'gantt' | 'scheduler'
|
||||||
|
|
||||||
export const layoutTypes = {
|
export const layoutTypes = {
|
||||||
grid: 'Grid',
|
grid: 'Grid',
|
||||||
card: 'Card',
|
card: 'Card',
|
||||||
|
cardView: 'CardView',
|
||||||
pivot: 'Pivot',
|
pivot: 'Pivot',
|
||||||
tree: 'Tree',
|
tree: 'Tree',
|
||||||
chart: 'Chart',
|
chart: 'Chart',
|
||||||
|
|
|
||||||
1472
ui/src/views/list/CardView.tsx
Normal file
1472
ui/src/views/list/CardView.tsx
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -2,7 +2,7 @@ import { useParams, useSearchParams } from 'react-router-dom'
|
||||||
import { useEffect, useState } from 'react'
|
import { useEffect, useState } from 'react'
|
||||||
import Container from '@/components/shared/Container'
|
import Container from '@/components/shared/Container'
|
||||||
import Grid from './Grid'
|
import Grid from './Grid'
|
||||||
import { FaChartArea, FaList, FaSitemap, FaTable, FaTh, FaUser, FaCalendarAlt } from 'react-icons/fa'
|
import { FaChartArea, FaList, FaSitemap, FaTable, FaTh, FaCalendarAlt, FaIdCard, FaProjectDiagram } from 'react-icons/fa'
|
||||||
import { useStoreActions, useStoreState } from '@/store/store'
|
import { useStoreActions, useStoreState } from '@/store/store'
|
||||||
import classNames from 'classnames'
|
import classNames from 'classnames'
|
||||||
import { useLocalization } from '@/utils/hooks/useLocalization'
|
import { useLocalization } from '@/utils/hooks/useLocalization'
|
||||||
|
|
@ -15,7 +15,7 @@ import { useCurrentMenuIcon } from '@/utils/hooks/useCurrentMenuIcon'
|
||||||
import { ListViewLayoutType } from '../admin/listForm/edit/types'
|
import { ListViewLayoutType } from '../admin/listForm/edit/types'
|
||||||
import Chart from './Chart'
|
import Chart from './Chart'
|
||||||
import Card from './Card'
|
import Card from './Card'
|
||||||
import { FaChartGantt } from 'react-icons/fa6'
|
import CardView from './CardView'
|
||||||
import GanttView from './GanttView'
|
import GanttView from './GanttView'
|
||||||
import SchedulerView from './SchedulerView'
|
import SchedulerView from './SchedulerView'
|
||||||
|
|
||||||
|
|
@ -124,7 +124,7 @@ const List = () => {
|
||||||
}}
|
}}
|
||||||
title="Gantt Görünümü"
|
title="Gantt Görünümü"
|
||||||
>
|
>
|
||||||
<FaChartGantt className="w-4 h-4" />
|
<FaProjectDiagram className="w-4 h-4" />
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|
@ -171,6 +171,20 @@ const List = () => {
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{gridDto?.gridOptions?.layoutDto.cardView && (
|
||||||
|
<Button
|
||||||
|
size="xs"
|
||||||
|
variant={viewMode === 'cardView' ? 'solid' : 'default'}
|
||||||
|
onClick={() => {
|
||||||
|
setViewMode('cardView')
|
||||||
|
setStates({ listFormCode, layout: 'cardView' })
|
||||||
|
}}
|
||||||
|
title="CardView Görünümü"
|
||||||
|
>
|
||||||
|
<FaIdCard className="w-4 h-4" />
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
|
||||||
{gridDto?.gridOptions?.layoutDto.pivot && (
|
{gridDto?.gridOptions?.layoutDto.pivot && (
|
||||||
<Button
|
<Button
|
||||||
size="xs"
|
size="xs"
|
||||||
|
|
@ -237,6 +251,14 @@ const List = () => {
|
||||||
isSubForm={false}
|
isSubForm={false}
|
||||||
gridDto={gridDto}
|
gridDto={gridDto}
|
||||||
/>
|
/>
|
||||||
|
) : viewMode === 'cardView' ? (
|
||||||
|
<CardView
|
||||||
|
listFormCode={listFormCode}
|
||||||
|
searchParams={searchParams}
|
||||||
|
isSubForm={false}
|
||||||
|
gridDto={gridDto}
|
||||||
|
refreshGridDto={refreshGridDto}
|
||||||
|
/>
|
||||||
) : viewMode === 'grid' ? (
|
) : viewMode === 'grid' ? (
|
||||||
<Grid
|
<Grid
|
||||||
listFormCode={listFormCode}
|
listFormCode={listFormCode}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue