Skip to content

D
DetailsList-FluentUI
Commit e0d90bd3 authored by Sonia Vidal Gonzalez's avatar Sonia Vidal Gonzalez
Browse files
Options

ultimos cambios

parent 1a8ecb32
Hide whitespace changes
Inline Side-by-side
Showing with 216 additions and 59 deletions
src/webparts/homeDetailsList/HomeDetailsListWebPart.ts
View file @ e0d90bd3
...@@ -22,7 +22,7 @@ export default class HomeDetailsListWebPart extends BaseClientSideWebPart <IHome ...@@ -22,7 +22,7 @@ export default class HomeDetailsListWebPart extends BaseClientSideWebPart <IHome
const element: React.ReactElement<IHomeDetailsListProps> = React.createElement( const element: React.ReactElement<IHomeDetailsListProps> = React.createElement(
HomeDetailsList, HomeDetailsList,
{ {
description: this.properties.description description: this.properties.description,
} }
); );
......
src/webparts/homeDetailsList/components/HomeDetailsList.scss 0 → 100644
View file @ e0d90bd3
#contenedor {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
#contenedor > div {
width: 50%;
padding-left: 10px;
}
.lista{
font-size: 14px;
font-weight: normal;
box-sizing: border-box;
margin: 0 0;
padding: 10px 0 100px 0;
line-height: 50px;
width: 100%;
}
\ No newline at end of file
src/webparts/homeDetailsList/components/HomeDetailsList.tsx
View file @ e0d90bd3
...@@ -8,7 +8,7 @@ import { Fabric } from 'office-ui-fabric-react/lib/Fabric'; ...@@ -8,7 +8,7 @@ import { Fabric } from 'office-ui-fabric-react/lib/Fabric';
import { mergeStyles } from 'office-ui-fabric-react/lib/Styling'; import { mergeStyles } from 'office-ui-fabric-react/lib/Styling';
import { DefaultButton, PrimaryButton } from '@microsoft/office-ui-fabric-react-bundle'; import { DefaultButton, PrimaryButton } from '@microsoft/office-ui-fabric-react-bundle';
import { Panel, PanelType } from 'office-ui-fabric-react'; import { Panel, PanelType } from 'office-ui-fabric-react';
import './HomeDetailsList.scss';
const exampleChildClass = mergeStyles({ const exampleChildClass = mergeStyles({
...@@ -19,10 +19,16 @@ const exampleChildClass = mergeStyles({ ...@@ -19,10 +19,16 @@ const exampleChildClass = mergeStyles({
const textFieldStyles: Partial<ITextFieldStyles> = { root: { maxWidth: '300px' } }; const textFieldStyles: Partial<ITextFieldStyles> = { root: { maxWidth: '300px' } };
export interface IDetailsListBasicExampleItem { export interface IDetailsListBasicExampleItem {
ID: number; DataCreacion: string;
name: string; NumPregunt: string;
category: string; tema: string;
amount: number; prodcedencia: string;
dataRegister: string;
dataDerivacio: string
dataEnviament: string;
grup: string;
encarregatReposta: string;
} }
export interface IDetailsListBasicExampleState { export interface IDetailsListBasicExampleState {
...@@ -30,6 +36,7 @@ export interface IDetailsListBasicExampleState { ...@@ -30,6 +36,7 @@ export interface IDetailsListBasicExampleState {
selectionDetails: string; selectionDetails: string;
itemsAux: IDetailsListBasicExampleItem[]; itemsAux: IDetailsListBasicExampleItem[];
showPanel: boolean; showPanel: boolean;
} }
export default class HomeDetailsList extends React.Component<IHomeDetailsListProps, IDetailsListBasicExampleState> { export default class HomeDetailsList extends React.Component<IHomeDetailsListProps, IDetailsListBasicExampleState> {
...@@ -41,38 +48,64 @@ export default class HomeDetailsList extends React.Component<IHomeDetailsListPro ...@@ -41,38 +48,64 @@ export default class HomeDetailsList extends React.Component<IHomeDetailsListPro
constructor(props: IHomeDetailsListProps) { constructor(props: IHomeDetailsListProps) {
super(props); super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.state = { this.state = {
items:[ items:[
{ {
ID: 1, DataCreacion:"22/01/2018 15:30:62", // value={this.state.date ? this.state.date : ''}
name: "Platano", NumPregunt: "M1219-7864",
category: "fruta", tema: "Motivo otorgacioón As varxe ecomon solidaria Cs (Oscar Ruiz Fuste)",
amount: 4, prodcedencia: "prueba de concepto",
dataRegister: "prueba de concepto",
dataDerivacio: "prueba de concepto",
dataEnviament: "prueba de concepto",
grup:"grupo",
encarregatReposta:"encargado"
}, },
{ {
ID: 2, DataCreacion: "22/01/2018 15:30:62",
name: "Fresa", NumPregunt: "M1519-8760",
category: "fruta", tema: "Pregunta donacs inmob Jcs PPC (Oscar Ruiz Fuste)",
amount: 3, prodcedencia: "prueba de concepto",
dataRegister: "prueba de concepto",
dataDerivacio: "prueba de concepto",
dataEnviament: "prueba de concepto",
grup:"grupo",
encarregatReposta:"encargado"
}, },
{ {
ID: 3, DataCreacion: "22/01/2018 15:30:62",
name: "Pera", NumPregunt: "M1519-9124",
category: "fruta", tema: "Accés sona lastant MWC (Oscar Ruiz Fuste)",
amount: 2, prodcedencia: "prueba de concepto",
dataRegister: "prueba de concepto",
dataDerivacio: "prueba de concepto",
dataEnviament: "prueba de concepto",
grup:"grupo",
encarregatReposta:"encargado"
}, },
{ {
ID: 1, DataCreacion: "22/01/2018 15:30:62",
name: "Brocolí", NumPregunt: "M1519-9500",
category: "verdura", tema: "Otra prueba para probar",
amount: 5, prodcedencia: "prueba de concepto",
dataRegister: "prueba de concepto",
dataDerivacio: "prueba de concepto",
dataEnviament: "prueba de concepto",
grup:"grupo",
encarregatReposta:"encargado"
} }
], ],
selectionDetails: '', selectionDetails: '',
itemsAux: [], itemsAux: [],
showPanel: false showPanel: false,
}; };
this._selection = new Selection({ this._selection = new Selection({
...@@ -80,10 +113,17 @@ export default class HomeDetailsList extends React.Component<IHomeDetailsListPro ...@@ -80,10 +113,17 @@ export default class HomeDetailsList extends React.Component<IHomeDetailsListPro
}); });
this._columns = [ this._columns = [
{ key: 'column1', name: 'ID', fieldName: 'ID', minWidth: 100, maxWidth: 200, isResizable: true }, { key: 'column1', name: 'DataCreacion', fieldName: 'DataCreacion', isMultiline: true, minWidth: 100, maxWidth: 200, isResizable: true },
{ key: 'column2', name: 'Name', fieldName: 'name', minWidth: 100, maxWidth: 200, isResizable: true }, { key: 'column2', name: 'Num.Pregunt', fieldName: 'NumPregunt', isMultiline: true, minWidth: 100, maxWidth: 200, isResizable: true },
{ key: 'column3', name: 'Category', fieldName: 'category', minWidth: 100, maxWidth: 200, isResizable: true }, { key: 'column3', name: 'Tema', fieldName: 'tema', minWidth: 100, isMultiline: true, maxWidth: 200, isResizable: true },
{ key: 'column4', name: 'Amount', fieldName: 'amount', minWidth: 100, maxWidth: 200, isResizable: true }, { key: 'column4', name: 'Prodcedencia', fieldName: 'prodcedencia', isMultiline: true, minWidth: 100, maxWidth: 200, isResizable: true },
{ key: 'column5', name: 'DataRegister', fieldName: 'dataRegister', isMultiline: true, minWidth: 100, maxWidth: 200, isResizable: true },
{ key: 'column6', name: 'DataEnviament', fieldName: 'dataEnviament', isMultiline: true, minWidth: 100, maxWidth: 200, isResizable: true },
{ key: 'column7', name: 'Grup', fieldName: 'grup', minWidth: 50, isMultiline: true, maxWidth: 200, isResizable: true },
{ key: 'column8', name: 'Encarregat Reposta', fieldName: 'encarregatReposta', isMultiline: true, minWidth: 130, maxWidth: 200, isResizable: true },
]; ];
} }
...@@ -95,25 +135,24 @@ export default class HomeDetailsList extends React.Component<IHomeDetailsListPro ...@@ -95,25 +135,24 @@ export default class HomeDetailsList extends React.Component<IHomeDetailsListPro
public render(): React.ReactElement<IHomeDetailsListProps> { public render(): React.ReactElement<IHomeDetailsListProps> {
const { items, itemsAux, selectionDetails } = this.state; const { items, itemsAux, selectionDetails } = this.state;
function _alertClicked(): void {
alert('Clicked');
}
return ( return (
<div className="deatails">
<Fabric> <Fabric>
<div className={exampleChildClass}>{selectionDetails}</div> <div className={exampleChildClass}>{selectionDetails}</div>
<Announced message={selectionDetails} /> <Announced message={selectionDetails} />
<TextField <TextField
className={exampleChildClass} className={exampleChildClass}
label="Filter by name:"
label="Filter by topic in lower case:"
onChange={this._onFilter} onChange={this._onFilter}
styles={textFieldStyles} styles={textFieldStyles}
/> />
<Announced message={`Number of items after filter applied: ${items.length}.`} /> <Announced message={`Number of items after filter applied: ${items.length}.`} />
<MarqueeSelection selection={this._selection}> <MarqueeSelection selection={this._selection}>
<DetailsList <DetailsList
items={itemsAux} items={itemsAux}
columns={this._columns} columns={this._columns}
...@@ -126,6 +165,8 @@ export default class HomeDetailsList extends React.Component<IHomeDetailsListPro ...@@ -126,6 +165,8 @@ export default class HomeDetailsList extends React.Component<IHomeDetailsListPro
checkButtonAriaLabel="Row checkbox" checkButtonAriaLabel="Row checkbox"
onItemInvoked={this._onItemInvoked} onItemInvoked={this._onItemInvoked}
/> />
<br /> <br />
<div> <div>
...@@ -141,40 +182,135 @@ export default class HomeDetailsList extends React.Component<IHomeDetailsListPro ...@@ -141,40 +182,135 @@ export default class HomeDetailsList extends React.Component<IHomeDetailsListPro
isFooterAtBottom={ true } isFooterAtBottom={ true }
headerText='Panel with footer at bottom' headerText='Panel with footer at bottom'
closeButtonAriaLabel='Close' closeButtonAriaLabel='Close'
onRenderFooterContent={ this._onRenderFooterContent }
> >
<span>Content goes here.</span> <form onSubmit={this.handleSubmit} >
</Panel> <div id="contenedor">
</div> <TextField
</MarqueeSelection> label='Asunto:'
</Fabric> onChange={this.handleChange}
); />
} <TextField
label='Categoria:'
/>
<TextField
label='Nº pregunta:'
/>
<TextField
label='Data registre:'
/>
<TextField
label='Grup:'
/>
<TextField
label='Tipus:'
/>
<TextField
label='Resultat del vot:'
/>
<TextField
label='Nº pregunta:'
/>
<TextField
label='Data registre:'
/>
<TextField
label='Tipus:'
/>
<TextField
label='Resultat del vot:'
/>
<TextField
label='Seguiment:'
/>
<TextField
label='Data Comissió:'
/>
<TextField
label='Data entrada:'
/>
<TextField
label='Encarregat resposta:'
/>
<TextField
label='Arees Responsables:'
/>
<TextField
label='Estat Tramitació:'
/>
<TextField
label='Adjunt Resposta:'
/>
<TextField
label='Documents Adjunt Reposta:'
/>
<TextField
label='Arxiu acord final:'
/>
</div>
<br/>
<TextField
label='Observacions:'
multiline
rows={ 4 }
/>
<br />
<br />
<br />
private _onShowPanel = () => {
this.setState({ showPanel: true });
}
private _onClosePanel = () => {
this.setState({ showPanel: false });
}
private _onRenderFooterContent = (): JSX.Element => { <button
return (
<div>
<PrimaryButton
onClick={ this._onClosePanel }
style={ { 'marginRight': '8px' } } style={ { 'marginRight': '8px' } }
> >
Save Save
</PrimaryButton> </button>
<DefaultButton <DefaultButton
onClick={ this._onClosePanel } onClick={ this._onClosePanel }
> >
Cancel Cancel
</DefaultButton> </DefaultButton>
</form>
</Panel>
</div>
</MarqueeSelection>
</Fabric>
</div> </div>
); );
} }
handleSubmit(event) {
event.preventDefault();
console.log(event.target[0].value);
}
handleChange(e: React.ChangeEvent<HTMLInputElement>) {
// No longer need to cast to any - hooray for react!
this.setState({items:[{
DataCreacion: e.target.value, // value={this.state.date ? this.state.date : ''}
NumPregunt: "M1219-7864",
tema: "Motivo otorgacioón As varxe ecomon solidaria Cs (Oscar Ruiz Fuste)",
prodcedencia: "prueba de concepto",
dataRegister: "prueba de concepto",
dataDerivacio: "prueba de concepto",
dataEnviament: "prueba de concepto",
grup:"grupo",
encarregatReposta:"encargado"
}] });
}
private _onShowPanel = () => {
this.setState({ showPanel: true });
}
private _onClosePanel = () => {
this.setState({ showPanel: false });
}
private _getSelectionDetails(): string { private _getSelectionDetails(): string {
const selectionCount = this._selection.getSelectedCount(); const selectionCount = this._selection.getSelectedCount();
...@@ -183,7 +319,7 @@ export default class HomeDetailsList extends React.Component<IHomeDetailsListPro ...@@ -183,7 +319,7 @@ export default class HomeDetailsList extends React.Component<IHomeDetailsListPro
case 0: case 0:
return 'No items selected'; return 'No items selected';
case 1: case 1:
return '1 item selected: ' + (this._selection.getSelection()[0] as IDetailsListBasicExampleItem).name; return '1 item selected: ' + (this._selection.getSelection()[0] as IDetailsListBasicExampleItem).tema;
default: default:
return `${selectionCount} items selected`; return `${selectionCount} items selected`;
} }
...@@ -193,7 +329,7 @@ export default class HomeDetailsList extends React.Component<IHomeDetailsListPro ...@@ -193,7 +329,7 @@ export default class HomeDetailsList extends React.Component<IHomeDetailsListPro
this.setState({ this.setState({
itemsAux: text ? this.state.items.filter(i => i.name.toLowerCase().indexOf(text) > -1) : this.state.items, itemsAux: text ? this.state.items.filter(i => i.tema.toLowerCase().indexOf(text) > -1) : this.state.items,
}); });
...@@ -201,7 +337,6 @@ export default class HomeDetailsList extends React.Component<IHomeDetailsListPro ...@@ -201,7 +337,6 @@ export default class HomeDetailsList extends React.Component<IHomeDetailsListPro
} }
private _onItemInvoked = (item: IDetailsListBasicExampleItem): void => { private _onItemInvoked = (item: IDetailsListBasicExampleItem): void => {
alert(`Item invoked: ${item.name}`); alert(`Item invoked: ${item.tema}`);
} }
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment