Skip to content

Commit

Permalink
Merge pull request #51 from INTO-CPS-Association/28-create-template-t…
Browse files Browse the repository at this point in the history 
…o-add-table-row(19-07)

Button to save a row as template.
  • Loading branch information
@omar-perpetuallabs
omar-perpetuallabs authored Jul 26, 2023
2 parents 22de9ac + f310e25 commit cc902f3
Show file tree
Hide file tree
Showing 2 changed files with 337 additions and 266 deletions.
307 changes: 41 additions & 266 deletions components/table-block/src/DetailsList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,271 +2,28 @@
import React from 'react';
import { DetailsList, IColumn, Selection} from '@fluentui/react/lib/DetailsList';
import { PanelLight } from './SettingsPanel';
import { CommandBar, ICommandBarItemProps } from '@fluentui/react/lib/CommandBar';
import { Dialog, DialogType, DialogFooter, IDialogContentProps } from '@fluentui/react/lib/Dialog';
import { useBoolean } from '@fluentui/react-hooks';
import { TextField, ITextFieldStyles } from '@fluentui/react/lib/TextField';
import { IComboBoxOption, IComboBoxStyles, VirtualizedComboBox } from '@fluentui/react';
import { Stack } from '@fluentui/react/lib/Stack';
import { IconButton, DefaultButton, PrimaryButton, IButtonStyles} from '@fluentui/react/lib/Button';
import {GitWorkDataBlock} from "./api"
import { Dropdown, DropdownMenuItemType, IDropdownStyles, IDropdownOption } from '@fluentui/react/lib/Dropdown';
import { Panel, PanelType } from '@fluentui/react/lib/Panel';
import {CommandBar_} from './_Commandbar'


//-------------------------COMANDBAR COMPONENT
//function to pass the the coomandbar component
type CommandbarProps = {
_deleteRow: () => void
filter_columns: IColumn[]
multSearch: (column: any, SortOrder: any) => void
};


//create commandbart which can add or remove
const CommandBar_: React.FunctionComponent<CommandbarProps> = ({_deleteRow , filter_columns, multSearch}) => {
const stackTokens = { childrenGap: 15 };


// ------------------------ADD functionallity ---------------------
//create combobox to select type when adding
const ComboBox_type: React.FunctionComponent = () => {
const GetOptions = () => {
const options: IComboBoxOption[] = [
{
key: `Extends`,
text: `Extends`
},
{
key: 'Uses',
text: 'Uses'
}
]
return options;
}
const options = GetOptions();
return (
<VirtualizedComboBox
label="Select type"
allowFreeform
autoComplete="on"
options={options}
dropdownMaxWidth={200}
useComboBoxAsMenuWidth
/>
);
};

//creates the textfield to contain ppu
const TextField_ppu: React.FunctionComponent = () => {
const [TextFieldValue, setTextFieldValue] = React.useState('');
const onChangeFirstTextFieldValue = React.useCallback(
(event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => {
setTextFieldValue(newValue || '');
},
[],
);
return (
<TextField
label="Type ppu"
value={TextFieldValue}
onChange={onChangeFirstTextFieldValue}
/>
);
};
//create textfield to contain name
const TextField_name: React.FunctionComponent = () => {
const [TextFieldValue, setTextFieldValue] = React.useState('');
const onChangeFirstTextFieldValue = React.useCallback(
(event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => {
setTextFieldValue(newValue || '');
},
[],
);
return (
<TextField
label="Type name"
value={TextFieldValue}
//Textfieldvalue contains the prefix. need to set up constaints for prefix format.
onChange={onChangeFirstTextFieldValue}
/>
);
};

// ----------------------Sort on multiple collums funtionallity-------------------

//set options
const options_columns: IDropdownOption[] = []
for(let i = 0; i<filter_columns.length; i++){
options_columns.push({key: filter_columns[i].key, text: filter_columns[i].name})
}
const sort_columns: IDropdownOption[] = [
{
key: "ASC",
text: "ASC"
},
{
key: 'DESC',
text: 'DESC'
}
];

//dialog variables
const [hideAddDialog, { toggle: toggleHideAddDialog }] = useBoolean(true);
//panel variables
const [isOpen, { setTrue: openPanel, setFalse: dismissPanel }] = useBoolean(false);
const [selectedcolumn, setSelectedcolumn] = React.useState<IDropdownOption>();
const [selectedSortorder, setSelectedSortorder] = React.useState<IDropdownOption>();
const [indexcounter, setindex] = React.useState<number>(0);
const [data, setData] = React.useState<any>([{ key: indexcounter, name: indexcounter}]);

const AddDigalogProps: IDialogContentProps = {
title: "Add"
}
//create the two options and assign onClick functions.
const _items: ICommandBarItemProps[] = [
{
key: 'addItem',
text: 'Add',
iconProps: { iconName: 'Add' },
onClick: () => toggleHideAddDialog()
},
{
key: 'removeRow',
text: 'Remove',
iconProps: { iconName: 'Remove'},
onClick: () => _deleteRow()
},
{
key: 'MulSort',
text: 'Sort on muliple collums',
iconProps: { iconName: 'Filter'},
onClick: () => openPanel()
},
{
key: 'Saverow',
text: 'Save row for template',
iconProps: { iconName: 'Save'},

}
];
// -------------------------THE SORT TABLE ------------------------------------

//Set table collums
let _columns: IColumn[] = [
{ key: 'ColumnSort', name: 'ColumnSort', fieldName: 'ColumnSort', minWidth: 100, maxWidth: 200, isResizable: true,
onRender: (item) => (
<Dropdown
options={options_columns}
defaultSelectedKey={options_columns[0].key}
styles={{ dropdown: { width: 150 } }}
onChange = {onChangecolumn}
/>
), },
{ key: 'SortOrder', name: 'SortOrder', fieldName: 'SortOrder', minWidth: 100, maxWidth: 200, isResizable: true,
onRender: (item) => (
<Dropdown
options={sort_columns}
defaultSelectedKey={sort_columns[0].key}
styles={{ dropdown: { width: 150 } }}
onChange={onChangeSortOrder}

/>
),
},
];
const addrow = (data: any) => {
setindex(indexcounter + 1)

data.push({key: indexcounter+1, name: indexcounter+1})
setData(data)
}
const _table = <DetailsList
items = {data}
columns={_columns}
/>
const onRenderFooterContent = React.useCallback(
() => (
<div>
<DefaultButton onClick={dismissPanel}>Back</DefaultButton>
</div>
),
[dismissPanel],
);

const onChangecolumn = (event: React.FormEvent<HTMLDivElement>, option?: IDropdownOption | undefined): void => {
setSelectedcolumn(option);
};
const onChangeSortOrder = (event: React.FormEvent<HTMLDivElement>, option?: IDropdownOption | undefined): void => {
setSelectedSortorder(option);
};

// ---------------------------------------RETURN CONTENT --------------------------------
return (

<div>
<CommandBar items={_items} />
<>
<Dialog
//add dialog
dialogContentProps={AddDigalogProps}
hidden={hideAddDialog}
onDismiss={toggleHideAddDialog}
>
<DialogFooter>
<Stack tokens={stackTokens} horizontalAlign="baseline">
<ComboBox_type/>
<TextField_ppu/>
<TextField_name/>
<DefaultButton onClick={toggleHideAddDialog} text="Cancel" />
</Stack>
</DialogFooter>
</Dialog>

<Panel
//sort dialog
isLightDismiss
isOpen={isOpen}
onDismiss={dismissPanel}
headerText="Sort on multiple rows"
onRenderFooterContent={onRenderFooterContent}
isFooterAtBottom={true}
customWidth='500px'
type={PanelType.custom}

>
{_table}
<DefaultButton
label='Save'
text='Save'
onClick={() => {multSearch(selectedcolumn, selectedSortorder)}}
/>
<DefaultButton
label='Add new '
text='Add new'
onClick={() => {addrow(data)}}
/>
</Panel>
</>
</div>
)
}

// --------------------------TABLE COMPONENT ------------------------------
//interfaces for the table
interface IDetailsListBasicExampleItem {
export interface IDetailsListBasicExampleItem {
Id: number
Type: string
Ppu: number
Name: string
}
interface IDetailsListBasicExampleState {
export interface IDetailsListBasicExampleState {
items: IDetailsListBasicExampleItem[];
selectionDetails: string;
}
export class DetailsListBasicExample extends React.Component<any, any, IDetailsListBasicExampleState> {

private _selection: Selection;
private _table: GitWorkDataBlock;

constructor(){


Expand All @@ -289,13 +46,13 @@ export class DetailsListBasicExample extends React.Component<any, any, IDetailsL
this.state = {
items: this._table.data,
column: _columns,
selectionDetails: this._getSelectionDetails()

selectionDetails: this._getSelectionDetails(),
saved_templates: [],
showDialog: false
};

//auto update function
this._table.on('update', (data: any) => {
console.log("table has been updates")
let keys = this._table.getColumnNames();

let _columns: IColumn[] = [];
Expand All @@ -307,12 +64,11 @@ export class DetailsListBasicExample extends React.Component<any, any, IDetailsL
this.setState({
items: data,
column: _columns,
selectionDetails: this._getSelectionDetails()
selectionDetails: this._getSelectionDetails(),
});
})
}


//function to sort collum ASC | DESC
private _sortcolumn(csortColumn: IColumn, sortOrder: string){
//first time sort is pressed
Expand Down Expand Up @@ -364,7 +120,9 @@ export class DetailsListBasicExample extends React.Component<any, any, IDetailsL

//function to remove a row
private _RemoveRow(){
this._table.deleteRow(this.state.selectionDetails);
if(this.state.selectionDetails){
this._table.deleteRow(this.state.selectionDetails.Id);
}
};

//function to remove a collum - should be updated to use api
Expand All @@ -376,19 +134,39 @@ export class DetailsListBasicExample extends React.Component<any, any, IDetailsL
});
}
}

//some nice to have dialog functionallity for later
/*
handleOpenDialog = () => {
console.log("here")
this.setState({
showDialog: true
});
console.log(this.state.showDialog)
};
handleCloseDialog = () => {
this.setState({ showDialog: false });
};
*/
// saves row for template

private _saverowfortemplate() {
//togle dialog
if(this.state.selectionDetails !== undefined){
this.state.saved_templates.push(this.state.selectionDetails)
console.log(this.state.selectionDetails, 'Has been saved')
}

}
//gets the row that is clicked
private _getSelectionDetails(): number {
private _getSelectionDetails(): IDetailsListBasicExampleItem | undefined {

if(this._selection.getSelection()[0] as IDetailsListBasicExampleItem !== undefined)
{
console.log(this._selection.getSelection()[0] as IDetailsListBasicExampleItem)
return ((this._selection.getSelection()[0] as IDetailsListBasicExampleItem).Id)
return ((this._selection.getSelection()[0] as IDetailsListBasicExampleItem))
}
return -1
return undefined
}

//searchfilter funcition
Expand Down Expand Up @@ -429,6 +207,9 @@ export class DetailsListBasicExample extends React.Component<any, any, IDetailsL
this._sortcolumn(column, "ASC")
}
}
const savetemplate = () => {
this._saverowfortemplate();
}
//proberties of searchfield
const searchfield = (<TextField
label='Search field'
Expand All @@ -447,21 +228,15 @@ export class DetailsListBasicExample extends React.Component<any, any, IDetailsL
ariaLabelForSelectAllCheckbox="Toggle selection for all items"
checkButtonAriaLabel="select row"
onColumnHeaderClick={_onColumnClick}

/>)

/>)
return (
//what the class displays
<div>
<PanelLight handleClick={_RemoveColumn} columns={column}/>
<CommandBar_ _deleteRow = {_deleteRow} filter_columns={column} multSearch = {this.multSearch}/>
<CommandBar_ _deleteRow = {_deleteRow} filter_columns={column} multSearch = {this.multSearch} savetemplate = {savetemplate} savedtemplates = {this.state.saved_templates}/>
{searchfield}
{_detailslist}
</div>
);
};
}


//select a row and safe it as a template.
//when you add a row it should give you a dropdown meneu of saved templated
}
Loading

0 comments on commit cc902f3

Please sign in to comment.