bnk-components
Version:
Reusable React components for Issaglam UI - Modern, responsive UI components with TypeScript support
75 lines (74 loc) • 6.06 kB
JavaScript
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { CrudGrid, CrudGridHeader, CrudGridAdvancedFilter, CrudGridTable, CrudGridColumn, CrudGridPagination, CrudGridModal, useFormContext } from './CrudGrid';
// Örnek form bileşeni
function UserForm() {
const { onFieldChange } = useFormContext();
return (_jsxs("div", { className: "user-form", children: [_jsxs("div", { className: "form-group", children: [_jsx("label", { children: "Ad Soyad:" }), _jsx("input", { type: "text", className: "form-control", onChange: (e) => onFieldChange('name', e.target.value) })] }), _jsxs("div", { className: "form-group", children: [_jsx("label", { children: "E-posta:" }), _jsx("input", { type: "email", className: "form-control", onChange: (e) => onFieldChange('email', e.target.value) })] }), _jsxs("div", { className: "form-group", children: [_jsx("label", { children: "Ya\u015F:" }), _jsx("input", { type: "number", className: "form-control", onChange: (e) => onFieldChange('age', parseInt(e.target.value)) })] }), _jsx("div", { className: "form-group", children: _jsxs("label", { children: [_jsx("input", { type: "checkbox", onChange: (e) => onFieldChange('isActive', e.target.checked) }), "Aktif"] }) })] }));
}
// Örnek kullanım
export function UserGrid() {
return (_jsxs(CrudGrid, { appService: userAppService, title: "Kullan\u0131c\u0131 Y\u00F6netimi", showFilterBar: true, showAdvancedFilter: true, editable: true, pageSize: 10, children: [_jsx(CrudGridHeader, { showTitle: true, showFilterBar: true, children: _jsxs("button", { className: "btn btn-primary", children: [_jsx("i", { className: "fas fa-download" }), "D\u0131\u015Fa Aktar"] }) }), _jsx(CrudGridAdvancedFilter, { children: _jsxs("div", { className: "row", children: [_jsxs("div", { className: "col-md-3", children: [_jsx("label", { children: "Ya\u015F Aral\u0131\u011F\u0131:" }), _jsx("input", { type: "number", placeholder: "Min ya\u015F" })] }), _jsx("div", { className: "col-md-3", children: _jsx("input", { type: "number", placeholder: "Max ya\u015F" }) }), _jsxs("div", { className: "col-md-3", children: [_jsx("label", { children: "Durum:" }), _jsxs("select", { children: [_jsx("option", { value: "", children: "T\u00FCm\u00FC" }), _jsx("option", { value: "true", children: "Aktif" }), _jsx("option", { value: "false", children: "Pasif" })] })] })] }) }), _jsxs(CrudGridTable, { responsiveMode: true, children: [_jsx(CrudGridColumn, { field: "name", header: "Ad Soyad", width: "200px", responsive: { xs: true, sm: true, md: true, lg: true, xl: true } }), _jsx(CrudGridColumn, { field: "email", header: "E-posta", width: "250px", responsive: { xs: false, sm: true, md: true, lg: true, xl: true } }), _jsx(CrudGridColumn, { field: "age", header: "Ya\u015F", width: "80px", align: "center", responsive: { xs: true, sm: true, md: true, lg: false, xl: false } }), _jsx(CrudGridColumn, { field: "isActive", header: "Durum", width: "100px", align: "center", responsive: { xs: true, sm: true, md: true, lg: true, xl: true }, render: (value) => (_jsx("span", { className: `badge ${value ? 'bg-success' : 'bg-secondary'}`, children: value ? 'Aktif' : 'Pasif' })) }), _jsx(CrudGridColumn, { field: "createdAt", header: "Olu\u015Fturulma Tarihi", width: "150px", align: "center", responsive: { xs: false, sm: false, md: true, lg: true, xl: true }, render: (value) => value ? new Date(value).toLocaleDateString('tr-TR') : '-' })] }), _jsx(CrudGridPagination, { showInfo: true, showControls: true }), _jsx(CrudGridModal, { children: _jsx(UserForm, {}) })] }));
}
// Örnek appService (gerçek implementasyon gerekli)
const userAppService = {
getListAsync: (input) => __awaiter(void 0, void 0, void 0, function* () {
// API çağrısı
return {
items: [],
totalCount: 0
};
}),
createAsync: (entity) => __awaiter(void 0, void 0, void 0, function* () {
// API çağrısı
return entity;
}),
updateAsync: (id, entity) => __awaiter(void 0, void 0, void 0, function* () {
// API çağrısı
return entity;
}),
deleteAsync: (id) => __awaiter(void 0, void 0, void 0, function* () {
// API çağrısı
}),
getAsync: (id) => __awaiter(void 0, void 0, void 0, function* () {
return {};
}),
getLookupAsync: () => __awaiter(void 0, void 0, void 0, function* () {
return [];
}),
getCountAsync: () => __awaiter(void 0, void 0, void 0, function* () {
return 0;
}),
createRangeAsync: (entities) => __awaiter(void 0, void 0, void 0, function* () {
return entities;
}),
updateRangeAsync: (entities) => __awaiter(void 0, void 0, void 0, function* () {
return entities;
}),
deleteRangeAsync: (ids) => __awaiter(void 0, void 0, void 0, function* () {
// API çağrısı
}),
getPagedListAsync: (input) => __awaiter(void 0, void 0, void 0, function* () {
return {
items: [],
totalCount: 0
};
}),
getListByFilterAsync: (filter) => __awaiter(void 0, void 0, void 0, function* () {
return [];
}),
getListByFilterPagedAsync: (filter, input) => __awaiter(void 0, void 0, void 0, function* () {
return {
items: [],
totalCount: 0
};
})
}; // Type assertion to avoid implementing all methods