From 39d2515f24ddb0a3c723785fb6b25592d32b1046 Mon Sep 17 00:00:00 2001 From: Roman Semenov Date: Mon, 31 Mar 2025 22:53:06 +0400 Subject: [PATCH] storybook --- .../stories/card_view/Card.stories.tsx | 74 ++ .../stories/card_view/CardView.stories.tsx | 269 ++++++ .../react-storybook/stories/card_view/data.ts | 40 + .../stories/card_view/generatedData.ts | 799 ++++++++++++++++++ 4 files changed, 1182 insertions(+) create mode 100644 apps/react-storybook/stories/card_view/Card.stories.tsx create mode 100644 apps/react-storybook/stories/card_view/CardView.stories.tsx create mode 100644 apps/react-storybook/stories/card_view/data.ts create mode 100644 apps/react-storybook/stories/card_view/generatedData.ts diff --git a/apps/react-storybook/stories/card_view/Card.stories.tsx b/apps/react-storybook/stories/card_view/Card.stories.tsx new file mode 100644 index 000000000000..843e22211ae0 --- /dev/null +++ b/apps/react-storybook/stories/card_view/Card.stories.tsx @@ -0,0 +1,74 @@ +import React, { useState, useRef, useEffect } from "react"; +import type { Meta, StoryObj } from "@storybook/react"; + +import { Card as InfernoCard } from "devextreme/esm/__internal/grids/new/card_view/content_view/content/card/card"; +import { wrapInfernoWithReact } from "../utils"; + +interface Props { + row: { + key: unknown; + cells: { + value: unknown; + column: { + alignment: "left" | "right" | "center"; + caption: string; + }; + }[]; + }; +} + +const Card = wrapInfernoWithReact(InfernoCard); + +const meta: Meta = { + title: "Grids/CardView/Card", + component: Card, +}; + +export default meta; + +type Story = StoryObj; + +export const DefaultMode: Story = { + args: { + row: { + cells: [ + { + value: 1, + column: { + alignment: 'left', + caption: 'asd', + }, + }, + { + value: 1, + column: { + alignment: 'left', + caption: 'asd', + }, + }, + { + value: 1, + column: { + alignment: 'left', + caption: 'asd', + }, + }, + { + value: 1, + column: { + alignment: 'left', + caption: 'asd', + }, + }, + { + value: 1, + column: { + alignment: 'left', + caption: 'asd', + }, + }, + ], + key: 1, + }, + }, +}; diff --git a/apps/react-storybook/stories/card_view/CardView.stories.tsx b/apps/react-storybook/stories/card_view/CardView.stories.tsx new file mode 100644 index 000000000000..2164c9c04ae2 --- /dev/null +++ b/apps/react-storybook/stories/card_view/CardView.stories.tsx @@ -0,0 +1,269 @@ +import type { Meta, StoryObj } from "@storybook/react"; + +import dxCardView from "devextreme/ui/card_view"; +import { wrapDxWithReact } from "../utils"; +import { store } from "./data"; +import { generatedData } from "./generatedData"; + +const CardView = wrapDxWithReact(dxCardView); + +const dataSources = { + empty: [], + local: generatedData, + remote: store, +} + +const columns = { + remote: [ + { + dataField: "OrderNumber", + alignment: 'right', + dataType: "number", + }, + { + dataField: "OrderDate", + visible: false, + }, + "StoreCity", + "StoreState", + "Employee", + { + dataField: "SaleAmount", + dataType: "number", + }, + ], + local: [ + 'firstName', + 'lastName', + 'gender', + 'birthDate' + ], + sortedRemote: [ + { + dataField: "OrderNumber", + alignment: 'right', + dataType: "number", + sortOrder: 'asc', + sortIndex: 1, + }, + { + dataField: "OrderDate", + visible: false, + }, + { + dataField: "StoreCity", + sortOrder: 'desc', + sortIndex: 0, + }, + "StoreState", + "Employee", + "SaleAmount", + ], + localHeaderFilter: [ + { + dataField: 'firstName', + headerFilter: { + allowSelectAll: false, + search: { + enabled: true, + }, + values: ['Anet', 'Annabela'], + }, + }, + { + dataField: 'lastName', + headerFilter: { + filterType: 'exclude', + values: ['Abbey'], + } + }, + { + dataField: 'gender', + allowHeaderFiltering: false, + }, + { + dataField: 'birthDate', + dataType: 'date', + calculateCellValue: (data) => { + return new Date(data.birthDate); + }, + calculateDisplayValue: (data) => { + return new Date(data.birthDate).toDateString(); + } + }, + ] +} + +const meta: Meta = { + title: "Grids/CardView", + component: CardView, + argTypes: { + dataSource: { + options: Object.keys(dataSources), + mapping: dataSources, + control: { type: 'radio' }, + }, + width: { + control: 'text', + }, + height: { + control: 'text', + }, + keyExpr: { + control: 'text', + }, + cardsPerRow: { + options: ['auto', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10], + control: { type: 'select' }, + }, + paging: { + pageSize: 12, + }, + // cardMinWidth: 250, + // cardMaxWidth: 350, + // filterPanel: { visible: true }, + columns: { + options: Object.keys(columns), + mapping: columns, + control: { type: 'radio' }, + }, + headerFilter: { + control: 'object', + }, + searchPanel: { + control: 'object', + }, + } +}; + +export default meta; + +type Story = StoryObj; + +export const DefaultMode: Story = { + args: { + dataSource: 'local', + width: "100%", + // TODO: Fix height limit + // height: '500px', + keyExpr: "OrderNumber", + cardsPerRow: "auto", + paging: { + pageSize: 12, + }, + cardMinWidth: 250, + cardMaxWidth: 350, + columns: 'local', + filterPanel: { visible: true }, + }, +}; + +export const RawControls: Story = { + ...DefaultMode, + argTypes: { + ...meta.argTypes, + dataSource: { + control: 'object', + mapping: null, + }, + columns: { + control: 'object', + mapping: null, + }, + }, + args: { + ...DefaultMode.args, + dataSource: dataSources.local.slice(0, 10), + columns: columns.local, + } +}; + +export const FixatedCardsPerRow: Story = { + ...DefaultMode, + args: { + ...DefaultMode.args, + cardsPerRow: 3 + }, +}; + +export const EmptyCardView: Story = { + ...DefaultMode, + args: { + ...DefaultMode.args, + dataSource: 'empty', + }, +}; + +export const CardViewWithCover : Story = { + ...DefaultMode, + args: { + ...DefaultMode.args, + cardCover: { + imageExpr: (data) => `https://js.devexpress.com/jQuery/Demos/WidgetsGallery/JSDemos/${data.picture}`, + altExpr: 'FirstName', + // ratio: '2 / 1', + }, + }, +}; + +export const SortedCardView: Story = { + ...DefaultMode, + args: { + ...DefaultMode.args, + dataSource: 'remote', + columns: 'sortedRemote', + }, +}; + +export const SearchCardView: Story = { + ...DefaultMode, + args: { + ...DefaultMode.args, + dataSource: 'local', + columns: 'local', + searchPanel: { + highlightCaseSensitive: false, + highlightSearchText: true, + text: '', + } + } +} + +export const HeaderFilterStory: Story = { + ...DefaultMode, + args: { + ...DefaultMode.args, + headerFilter: { + visible: true, + width: 252, + height: 325, + allowSelectAll: true, + search: { + enabled: false, + timeout: 500, + mode: 'contains', + editorOptions: {}, + }, + texts: { + emptyValue: 'empty', + ok: 'ok', + cancel: 'cancel', + }, + } + } +} + +export const SelectionStory: Story = { + ...DefaultMode, + args: { + ...DefaultMode.args, + keyExpr: 'id', + selection: { + mode: 'multiple', + showCheckBoxesMode: 'onClick', + allowSelectAll: true, + selectAllMode: 'allPages', + } + } +} + diff --git a/apps/react-storybook/stories/card_view/data.ts b/apps/react-storybook/stories/card_view/data.ts new file mode 100644 index 000000000000..9e2c22a22a44 --- /dev/null +++ b/apps/react-storybook/stories/card_view/data.ts @@ -0,0 +1,40 @@ +import CustomStore from 'devextreme/data/custom_store'; + +export const items = new Array(1000).fill(null).map(() => ( + {column1: 1, column2: 2} +)); + + +function isNotEmpty(value: string | undefined | null) { + return value !== undefined && value !== null && value !== ''; +} + +export const store = new CustomStore({ + key: 'OrderNumber', + async load(loadOptions) { + const paramNames = [ + 'skip', 'take', 'requireTotalCount', 'requireGroupCount', + 'sort', 'filter', 'totalSummary', 'group', 'groupSummary', + ]; + + const queryString = paramNames + .filter((paramName) => isNotEmpty(loadOptions[paramName])) + .map((paramName) => `${paramName}=${JSON.stringify(loadOptions[paramName])}`) + .join('&'); + + try { + const response = await fetch(`https://js.devexpress.com/Demos/WidgetsGalleryDataService/api/orders?${queryString}`); + + const result = await response.json(); + + return { + data: result.data, + totalCount: result.totalCount, + summary: result.summary, + groupCount: result.groupCount, + }; + } catch (err) { + throw new Error('Data Loading Error'); + } + }, +}); \ No newline at end of file diff --git a/apps/react-storybook/stories/card_view/generatedData.ts b/apps/react-storybook/stories/card_view/generatedData.ts new file mode 100644 index 000000000000..4433715542a5 --- /dev/null +++ b/apps/react-storybook/stories/card_view/generatedData.ts @@ -0,0 +1,799 @@ +export const generatedData = [{ + "id": 1, + "firstName": "Curry", + "lastName": "Moynham", + "email": "cmoynham0@google.com.au", + "gender": "Male", + "birthDate": "1983/11/07", + "picture": "images/employees/01.png", +}, { + "id": 2, + "firstName": "Anya", + "lastName": "Le Claire", + "email": "aleclaire1@tinyurl.com", + "gender": "Female", + "birthDate": "1988/03/27", +}, { + "id": 3, + "firstName": "Raven", + "lastName": "Slayton", + "email": "rslayton2@scientificamerican.com", + "gender": "Female", + "birthDate": "1981/04/29", + "picture": "images/employees/03.png", +}, { + "id": 4, + "firstName": "Mireille", + "lastName": "Casini", + "email": "mcasini3@ted.com", + "gender": "Female", + "birthDate": "1993/11/29", + "picture": "images/employees/04.png", +}, { + "id": 5, + "firstName": "Gloriane", + "lastName": "Workes", + "email": "gworkes4@uol.com.br", + "gender": "Female", + "birthDate": "1980/11/28", +}, { + "id": 6, + "firstName": "Elvis", + "lastName": "Matthew", + "email": "ematthew5@qq.com", + "gender": "Male", + "birthDate": "1981/07/24", + "picture": "images/employees/06.png", +}, { + "id": 7, + "firstName": "Gerti", + "lastName": "Greneham", + "email": "ggreneham6@ucoz.ru", + "gender": "Female", + "birthDate": "1994/12/18", + "picture": "images/employees/07.png", +}, { + "id": 8, + "firstName": "Ken", + "lastName": "Collinge", + "email": "kcollinge7@friendfeed.com", + "gender": "Male", + "birthDate": "1982/11/30", + "picture": "images/employees/08.png", +}, { + "id": 9, + "firstName": "Georgina", + "lastName": "Warder", + "email": "gwarder8@salon.com", + "gender": "Female", + "birthDate": "1999/01/14", + "picture": "images/employees/09.png", +}, { + "id": 10, + "firstName": "Mose", + "lastName": "Vertey", + "email": "mvertey9@vinaora.com", + "gender": "Male", + "birthDate": "1996/09/11", + "picture": "images/employees/02.png", +}, { + "id": 11, + "firstName": "Karlik", + "lastName": "Windows", + "email": "kwindowsa@wunderground.com", + "gender": "Male", + "birthDate": "1980/03/17", + "picture": "images/employees/02.png", +}, { + "id": 12, + "firstName": "Konstanze", + "lastName": "Navan", + "email": "knavanb@hatena.ne.jp", + "gender": "Female", + "birthDate": "1980/04/23", + "picture": "images/employees/02.png", +}, { + "id": 13, + "firstName": "Anet", + "lastName": "Saberton", + "email": "asabertonc@quantcast.com", + "gender": "Female", + "birthDate": "1992/05/05", + "picture": "images/employees/02.png", +}, { + "id": 14, + "firstName": "Ruthy", + "lastName": "Casserly", + "email": "rcasserlyd@ezinearticles.com", + "gender": "Female", + "birthDate": "1982/05/25", + "picture": "images/employees/02.png", +}, { + "id": 15, + "firstName": "Hakim", + "lastName": "McCrainor", + "email": "hmccrainore@prnewswire.com", + "gender": "Polygender", + "birthDate": "1989/02/26", + "picture": "images/employees/02.png", +}, { + "id": 16, + "firstName": "Jennica", + "lastName": "Kinsell", + "email": "jkinsellf@prnewswire.com", + "gender": "Female", + "birthDate": "1989/10/07", + "picture": "images/employees/02.png", +}, { + "id": 17, + "firstName": "Reed", + "lastName": "Abramovitch", + "email": "rabramovitchg@psu.edu", + "gender": "Male", + "birthDate": "1997/10/05", + "picture": "images/employees/02.png", +}, { + "id": 18, + "firstName": "Arlena", + "lastName": "Heinlein", + "email": "aheinleinh@pen.io", + "gender": "Agender", + "birthDate": "1987/05/08", + "picture": "images/employees/02.png", +}, { + "id": 19, + "firstName": "Opaline", + "lastName": "Climar", + "email": "oclimari@histats.com", + "gender": "Female", + "birthDate": "1986/04/10", + "picture": "images/employees/02.png", +}, { + "id": 20, + "firstName": "Serge", + "lastName": "Mullan", + "email": "smullanj@senate.gov", + "gender": "Male", + "birthDate": "1985/10/26", + "picture": "images/employees/02.png", +}, { + "id": 21, + "firstName": "Lucy", + "lastName": "Congrave", + "email": "lcongravek@globo.com", + "gender": "Female", + "birthDate": "1983/04/12", + "picture": "images/employees/02.png", +}, { + "id": 22, + "firstName": "Harland", + "lastName": "Gerardot", + "email": "hgerardotl@comcast.net", + "gender": "Male", + "birthDate": "1992/01/04", + "picture": "images/employees/02.png", +}, { + "id": 23, + "firstName": "Maisey", + "lastName": "Boken", + "email": "mbokenm@economist.com", + "gender": "Female", + "birthDate": "1985/07/03", + "picture": "images/employees/02.png", +}, { + "id": 24, + "firstName": "Devlin", + "lastName": "Sayle", + "email": "dsaylen@squarespace.com", + "gender": "Male", + "birthDate": "1980/06/24", + "picture": "images/employees/02.png", +}, { + "id": 25, + "firstName": "Cleve", + "lastName": "Schuler", + "email": "cschulero@reference.com", + "gender": "Male", + "birthDate": "1995/05/02", + "picture": "images/employees/02.png", +}, { + "id": 26, + "firstName": "Jorgan", + "lastName": "Navan", + "email": "jnavanp@buzzfeed.com", + "gender": "Male", + "birthDate": "1985/03/16", + "picture": "images/employees/02.png", +}, { + "id": 27, + "firstName": "Worth", + "lastName": "Hellens", + "email": "whellensq@wikispaces.com", + "gender": "Male", + "birthDate": "1986/01/20", + "picture": "images/employees/02.png", +}, { + "id": 28, + "firstName": "Annnora", + "lastName": "Garahan", + "email": "agarahanr@sina.com.cn", + "gender": "Female", + "birthDate": "1986/06/09", + "picture": "images/employees/02.png", +}, { + "id": 29, + "firstName": "Thaxter", + "lastName": "Pembridge", + "email": "tpembridges@about.com", + "gender": "Male", + "birthDate": "1991/03/06", + "picture": "images/employees/02.png", +}, { + "id": 30, + "firstName": "Annabela", + "lastName": "Hannaway", + "email": "ahannawayt@dion.ne.jp", + "gender": "Non-binary", + "birthDate": "1996/01/15", + "picture": "images/employees/02.png", +}, { + "id": 31, + "firstName": "Nelson", + "lastName": "Geerdts", + "email": "ngeerdtsu@abc.net.au", + "gender": "Male", + "birthDate": "1999/03/12", + "picture": "images/employees/02.png", +}, { + "id": 32, + "firstName": "Viviyan", + "lastName": "Collet", + "email": "vcolletv@ox.ac.uk", + "gender": "Female", + "birthDate": "1984/09/20", + "picture": "images/employees/02.png", +}, { + "id": 33, + "firstName": "Pammy", + "lastName": "Sneyd", + "email": "psneydw@nyu.edu", + "gender": "Female", + "birthDate": "1998/04/30", + "picture": "images/employees/02.png", +}, { + "id": 34, + "firstName": "Sofia", + "lastName": "Yekel", + "email": "syekelx@netscape.com", + "gender": "Agender", + "birthDate": "1990/03/27", + "picture": "images/employees/02.png", +}, { + "id": 35, + "firstName": "Mose", + "lastName": "Crowcombe", + "email": "mcrowcombey@yahoo.com", + "gender": "Male", + "birthDate": "1993/11/14", + "picture": "images/employees/02.png", +}, { + "id": 36, + "firstName": "Marcello", + "lastName": "Squibb", + "email": "msquibbz@themeforest.net", + "gender": "Male", + "birthDate": "1997/12/06", + "picture": "images/employees/02.png", +}, { + "id": 37, + "firstName": "Tiebold", + "lastName": "Tippings", + "email": "ttippings10@shop-pro.jp", + "gender": "Male", + "birthDate": "1987/06/28", + "picture": "images/employees/02.png", +}, { + "id": 38, + "firstName": "Rosemarie", + "lastName": "Saiens", + "email": "rsaiens11@163.com", + "gender": "Female", + "birthDate": "1980/08/30", + "picture": "images/employees/02.png", +}, { + "id": 39, + "firstName": "Dylan", + "lastName": "Lugton", + "email": "dlugton12@elpais.com", + "gender": "Male", + "birthDate": "1997/01/18", + "picture": "images/employees/02.png", +}, { + "id": 40, + "firstName": "Maxim", + "lastName": "Laphorn", + "email": "mlaphorn13@vinaora.com", + "gender": "Male", + "birthDate": "1990/10/14", + "picture": "images/employees/02.png", +}, { + "id": 41, + "firstName": "Charity", + "lastName": "Lorking", + "email": "clorking14@surveymonkey.com", + "gender": "Female", + "birthDate": "1998/07/07", + "picture": "images/employees/02.png", +}, { + "id": 42, + "firstName": "Stevie", + "lastName": "Wagenen", + "email": "swagenen15@archive.org", + "gender": "Male", + "birthDate": "1989/12/13", + "picture": "images/employees/02.png", +}, { + "id": 43, + "firstName": "Julita", + "lastName": "Hopfner", + "email": "jhopfner16@google.ca", + "gender": "Female", + "birthDate": "1998/10/11", + "picture": "images/employees/02.png", +}, { + "id": 44, + "firstName": "Ethel", + "lastName": "Murdy", + "email": "emurdy17@typepad.com", + "gender": "Female", + "birthDate": "1987/05/19", + "picture": "images/employees/02.png", +}, { + "id": 45, + "firstName": "Freeland", + "lastName": "Brimham", + "email": "fbrimham18@army.mil", + "gender": "Male", + "birthDate": "1994/01/18", + "picture": "images/employees/02.png", +}, { + "id": 46, + "firstName": "Fons", + "lastName": "Mangeon", + "email": "fmangeon19@bravesites.com", + "gender": "Male", + "birthDate": "1998/04/22", + "picture": "images/employees/02.png", +}, { + "id": 47, + "firstName": "Gregoor", + "lastName": "Disney", + "email": "gdisney1a@disqus.com", + "gender": "Male", + "birthDate": "1991/06/04", + "picture": "images/employees/02.png", +}, { + "id": 48, + "firstName": "Thorny", + "lastName": "Descroix", + "email": "tdescroix1b@wunderground.com", + "gender": "Male", + "birthDate": "1981/03/15", + "picture": "images/employees/02.png", +}, { + "id": 49, + "firstName": "Olwen", + "lastName": "Clewett", + "email": "oclewett1c@merriam-webster.com", + "gender": "Female", + "birthDate": "1986/09/28", + "picture": "images/employees/02.png", +}, { + "id": 50, + "firstName": "Kendal", + "lastName": "Scrauniage", + "email": "kscrauniage1d@cmu.edu", + "gender": "Male", + "birthDate": "1982/09/25", + "picture": "images/employees/02.png", +}, { + "id": 51, + "firstName": "Mendie", + "lastName": "Bonallack", + "email": "mbonallack1e@amazon.com", + "gender": "Male", + "birthDate": "1985/05/07", + "picture": "images/employees/02.png", +}, { + "id": 52, + "firstName": "Nellie", + "lastName": "Brave", + "email": "nbrave1f@freewebs.com", + "gender": "Bigender", + "birthDate": "1997/06/10", + "picture": "images/employees/02.png", +}, { + "id": 53, + "firstName": "Shir", + "lastName": "Lipson", + "email": "slipson1g@nydailynews.com", + "gender": "Female", + "birthDate": "1994/11/29", + "picture": "images/employees/02.png", +}, { + "id": 54, + "firstName": "Brittney", + "lastName": "Barley", + "email": "bbarley1h@jigsy.com", + "gender": "Female", + "birthDate": "1999/04/17", + "picture": "images/employees/02.png", +}, { + "id": 55, + "firstName": "Pedro", + "lastName": "Spurrett", + "email": "pspurrett1i@mysql.com", + "gender": "Genderfluid", + "birthDate": "1981/08/31", + "picture": "images/employees/02.png", +}, { + "id": 56, + "firstName": "Merrielle", + "lastName": "Davana", + "email": "mdavana1j@booking.com", + "gender": "Female", + "birthDate": "1985/07/25", + "picture": "images/employees/02.png", +}, { + "id": 57, + "firstName": "Tildie", + "lastName": "Sacaze", + "email": "tsacaze1k@livejournal.com", + "gender": "Female", + "birthDate": "1998/08/26", + "picture": "images/employees/02.png", +}, { + "id": 58, + "firstName": "Hurley", + "lastName": "Loomis", + "email": "hloomis1l@phoca.cz", + "gender": "Male", + "birthDate": "1980/06/23", + "picture": "images/employees/02.png", +}, { + "id": 59, + "firstName": "Rowland", + "lastName": "Keeling", + "email": "rkeeling1m@umn.edu", + "gender": "Male", + "birthDate": "1989/05/13", + "picture": "images/employees/02.png", +}, { + "id": 60, + "firstName": "Bonita", + "lastName": "Harwin", + "email": "bharwin1n@adobe.com", + "gender": "Female", + "birthDate": "1988/09/03", + "picture": "images/employees/02.png", +}, { + "id": 61, + "firstName": "Elva", + "lastName": "Doswell", + "email": "edoswell1o@amazonaws.com", + "gender": "Female", + "birthDate": "1985/08/25", + "picture": "images/employees/02.png", +}, { + "id": 62, + "firstName": "Zeb", + "lastName": "McQuode", + "email": "zmcquode1p@berkeley.edu", + "gender": "Male", + "birthDate": "1998/03/24", + "picture": "images/employees/02.png", +}, { + "id": 63, + "firstName": "Pearce", + "lastName": "Yannikov", + "email": "pyannikov1q@weibo.com", + "gender": "Male", + "birthDate": "1988/09/19", + "picture": "images/employees/02.png", +}, { + "id": 64, + "firstName": "Keeley", + "lastName": "Starford", + "email": "kstarford1r@huffingtonpost.com", + "gender": "Female", + "birthDate": "1998/11/29", + "picture": "images/employees/02.png", +}, { + "id": 65, + "firstName": "Kurt", + "lastName": "Surby", + "email": "ksurby1s@hostgator.com", + "gender": "Male", + "birthDate": "1981/09/19", + "picture": "images/employees/02.png", +}, { + "id": 66, + "firstName": "Dwight", + "lastName": "Sickling", + "email": "dsickling1t@constantcontact.com", + "gender": "Male", + "birthDate": "1988/10/24", + "picture": "images/employees/02.png", +}, { + "id": 67, + "firstName": "Vin", + "lastName": "Tawse", + "email": "vtawse1u@cornell.edu", + "gender": "Female", + "birthDate": "1995/10/13", + "picture": "images/employees/02.png", +}, { + "id": 68, + "firstName": "Lyda", + "lastName": "Edgcombe", + "email": "ledgcombe1v@yelp.com", + "gender": "Female", + "birthDate": "1983/07/23", + "picture": "images/employees/02.png", +}, { + "id": 69, + "firstName": "Oliviero", + "lastName": "Fewell", + "email": "ofewell1w@creativecommons.org", + "gender": "Male", + "birthDate": "1987/10/25", + "picture": "images/employees/02.png", +}, { + "id": 70, + "firstName": "Erick", + "lastName": "Hatchett", + "email": "ehatchett1x@wufoo.com", + "gender": "Male", + "birthDate": "1994/12/04", + "picture": "images/employees/02.png", +}, { + "id": 71, + "firstName": "Magdalena", + "lastName": "Jex", + "email": "mjex1y@friendfeed.com", + "gender": "Female", + "birthDate": "1989/09/03", + "picture": "images/employees/02.png", +}, { + "id": 72, + "firstName": "Carver", + "lastName": "Kisting", + "email": "ckisting1z@netvibes.com", + "gender": "Male", + "birthDate": "1996/06/13", + "picture": "images/employees/02.png", +}, { + "id": 73, + "firstName": "Dore", + "lastName": "Carff", + "email": "dcarff20@about.com", + "gender": "Male", + "birthDate": "1997/09/16", + "picture": "images/employees/02.png", +}, { + "id": 74, + "firstName": "Antonius", + "lastName": "John", + "email": "ajohn21@amazon.co.uk", + "gender": "Male", + "birthDate": "1981/01/23", + "picture": "images/employees/02.png", +}, { + "id": 75, + "firstName": "Bone", + "lastName": "Lourenco", + "email": "blourenco22@sogou.com", + "gender": "Male", + "birthDate": "1995/06/10", + "picture": "images/employees/02.png", +}, { + "id": 76, + "firstName": "Wakefield", + "lastName": "Tandey", + "email": "wtandey23@elpais.com", + "gender": "Male", + "birthDate": "1996/02/08", + "picture": "images/employees/02.png", +}, { + "id": 77, + "firstName": "Juditha", + "lastName": "Gumm", + "email": "jgumm24@goo.ne.jp", + "gender": "Female", + "birthDate": "1991/06/21", + "picture": "images/employees/02.png", +}, { + "id": 78, + "firstName": "Wilone", + "lastName": "Lafaye", + "email": "wlafaye25@pcworld.com", + "gender": "Female", + "birthDate": "1985/02/17", + "picture": "images/employees/02.png", +}, { + "id": 79, + "firstName": "Cece", + "lastName": "Gifkins", + "email": "cgifkins26@slate.com", + "gender": "Male", + "birthDate": "1997/11/10", + "picture": "images/employees/02.png", +}, { + "id": 80, + "firstName": "Darin", + "lastName": "Lyddy", + "email": "dlyddy27@infoseek.co.jp", + "gender": "Male", + "birthDate": "1984/07/07", + "picture": "images/employees/02.png", +}, { + "id": 81, + "firstName": "Trevar", + "lastName": "Knowller", + "email": "tknowller28@sciencedirect.com", + "gender": "Male", + "birthDate": "1992/12/14", + "picture": "images/employees/02.png", +}, { + "id": 82, + "firstName": "Milli", + "lastName": "Coppeard", + "email": "mcoppeard29@ted.com", + "gender": "Female", + "birthDate": "1992/03/29", + "picture": "images/employees/02.png", +}, { + "id": 83, + "firstName": "Cayla", + "lastName": "Davidwitz", + "email": "cdavidwitz2a@yandex.ru", + "gender": "Female", + "birthDate": "1982/02/10", + "picture": "images/employees/02.png", +}, { + "id": 84, + "firstName": "Laura", + "lastName": "Pherps", + "email": "lpherps2b@tripadvisor.com", + "gender": "Female", + "birthDate": "1980/01/12", + "picture": "images/employees/02.png", +}, { + "id": 85, + "firstName": "Lianne", + "lastName": "Jennaway", + "email": "ljennaway2c@parallels.com", + "gender": "Female", + "birthDate": "1993/10/12", + "picture": "images/employees/02.png", +}, { + "id": 86, + "firstName": "Rollin", + "lastName": "Besnardeau", + "email": "rbesnardeau2d@php.net", + "gender": "Agender", + "birthDate": "1999/05/24", + "picture": "images/employees/02.png", +}, { + "id": 87, + "firstName": "Augustine", + "lastName": "Keaton", + "email": "akeaton2e@surveymonkey.com", + "gender": "Female", + "birthDate": "1985/08/16", + "picture": "images/employees/02.png", +}, { + "id": 88, + "firstName": "Wynn", + "lastName": "Couthard", + "email": "wcouthard2f@webmd.com", + "gender": "Male", + "birthDate": "1990/08/06", + "picture": "images/employees/02.png", +}, { + "id": 89, + "firstName": "Stirling", + "lastName": "Cleevely", + "email": "scleevely2g@java.com", + "gender": "Agender", + "birthDate": "1999/04/28", + "picture": "images/employees/02.png", +}, { + "id": 90, + "firstName": "Tracee", + "lastName": "Maitland", + "email": "tmaitland2h@ning.com", + "gender": "Female", + "birthDate": "1999/12/21", + "picture": "images/employees/02.png", +}, { + "id": 91, + "firstName": "Joscelin", + "lastName": "Dregan", + "email": "jdregan2i@ucla.edu", + "gender": "Female", + "birthDate": "1999/01/30", + "picture": "images/employees/02.png", +}, { + "id": 92, + "firstName": "Rolfe", + "lastName": "Tilt", + "email": "rtilt2j@drupal.org", + "gender": "Male", + "birthDate": "1996/02/03", + "picture": "images/employees/02.png", +}, { + "id": 93, + "firstName": "Bordy", + "lastName": "Beyne", + "email": "bbeyne2k@zdnet.com", + "gender": "Male", + "birthDate": "1992/07/18", + "picture": "images/employees/02.png", +}, { + "id": 94, + "firstName": "Grier", + "lastName": "Spaducci", + "email": "gspaducci2l@bravesites.com", + "gender": "Female", + "birthDate": "1995/11/06", + "picture": "images/employees/02.png", +}, { + "id": 95, + "firstName": "Licha", + "lastName": "Witcherley", + "email": "lwitcherley2m@latimes.com", + "gender": "Female", + "birthDate": "1987/01/09", + "picture": "images/employees/02.png", +}, { + "id": 96, + "firstName": "Cori", + "lastName": "Gwatkins", + "email": "cgwatkins2n@marriott.com", + "gender": "Male", + "birthDate": "1984/08/26", + "picture": "images/employees/02.png", +}, { + "id": 97, + "firstName": "Annecorinne", + "lastName": "Abbey", + "email": "aabbey2o@miitbeian.gov.cn", + "gender": "Agender", + "birthDate": "1999/05/03", + "picture": "images/employees/02.png", +}, { + "id": 98, + "firstName": "Denice", + "lastName": "Isaksen", + "email": "disaksen2p@indiatimes.com", + "gender": "Female", + "birthDate": "1994/05/10", + "picture": "images/employees/02.png", +}, { + "id": 99, + "firstName": "Sabrina", + "lastName": "Oulett", + "email": "soulett2q@ifeng.com", + "gender": "Female", + "birthDate": "1985/01/14", + "picture": "images/employees/02.png", +}, { + "id": 100, + "firstName": "Jarrod", + "lastName": "Hellewell", + "email": "jhellewell2r@springer.com", + "gender": "Male", + "birthDate": "1985/08/20", + "picture": "images/employees/02.png", +}];