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
Show 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
const element: React.ReactElement<IHomeDetailsListProps> = React.createElement(
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';
import { mergeStyles } from 'office-ui-fabric-react/lib/Styling';
import { DefaultButton, PrimaryButton } from '@microsoft/office-ui-fabric-react-bundle';
import { Panel, PanelType } from 'office-ui-fabric-react';
import './HomeDetailsList.scss';
const exampleChildClass = mergeStyles({
......@@ -19,10 +19,16 @@ const exampleChildClass = mergeStyles({
const textFieldStyles: Partial<ITextFieldStyles> = { root: { maxWidth: '300px' } };
export interface IDetailsListBasicExampleItem {
ID: number;
name: string;
category: string;
amount: number;
DataCreacion: string;
NumPregunt: string;
tema: string;
prodcedencia: string;
dataRegister: string;
dataDerivacio: string
dataEnviament: string;
grup: string;
encarregatReposta: string;
}
export interface IDetailsListBasicExampleState {
......@@ -30,6 +36,7 @@ export interface IDetailsListBasicExampleState {
selectionDetails: string;
itemsAux: IDetailsListBasicExampleItem[];
showPanel: boolean;
}
export default class HomeDetailsList extends React.Component<IHomeDetailsListProps, IDetailsListBasicExampleState> {
......@@ -42,37 +49,63 @@ export default class HomeDetailsList extends React.Component<IHomeDetailsListPro
constructor(props: IHomeDetailsListProps) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.state = {
items:[
{
ID: 1,
name: "Platano",
category: "fruta",
amount: 4,
DataCreacion:"22/01/2018 15:30:62", // 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"
},
{
ID: 2,
name: "Fresa",
category: "fruta",
amount: 3,
DataCreacion: "22/01/2018 15:30:62",
NumPregunt: "M1519-8760",
tema: "Pregunta donacs inmob Jcs PPC (Oscar Ruiz Fuste)",
prodcedencia: "prueba de concepto",
dataRegister: "prueba de concepto",
dataDerivacio: "prueba de concepto",
dataEnviament: "prueba de concepto",
grup:"grupo",
encarregatReposta:"encargado"
},
{
ID: 3,
name: "Pera",
category: "fruta",
amount: 2,
DataCreacion: "22/01/2018 15:30:62",
NumPregunt: "M1519-9124",
tema: "Accés sona lastant MWC (Oscar Ruiz Fuste)",
prodcedencia: "prueba de concepto",
dataRegister: "prueba de concepto",
dataDerivacio: "prueba de concepto",
dataEnviament: "prueba de concepto",
grup:"grupo",
encarregatReposta:"encargado"
},
{
ID: 1,
name: "Brocolí",
category: "verdura",
amount: 5,
DataCreacion: "22/01/2018 15:30:62",
NumPregunt: "M1519-9500",
tema: "Otra prueba para probar",
prodcedencia: "prueba de concepto",
dataRegister: "prueba de concepto",
dataDerivacio: "prueba de concepto",
dataEnviament: "prueba de concepto",
grup:"grupo",
encarregatReposta:"encargado"
}
],
selectionDetails: '',
itemsAux: [],
showPanel: false
showPanel: false,
};
this._selection = new Selection({
......@@ -80,10 +113,17 @@ export default class HomeDetailsList extends React.Component<IHomeDetailsListPro
});
this._columns = [
{ key: 'column1', name: 'ID', fieldName: 'ID', minWidth: 100, maxWidth: 200, isResizable: true },
{ key: 'column2', name: 'Name', fieldName: 'name', minWidth: 100, maxWidth: 200, isResizable: true },
{ key: 'column3', name: 'Category', fieldName: 'category', minWidth: 100, maxWidth: 200, isResizable: true },
{ key: 'column4', name: 'Amount', fieldName: 'amount', minWidth: 100, maxWidth: 200, isResizable: true },
{ key: 'column1', name: 'DataCreacion', fieldName: 'DataCreacion', isMultiline: true, minWidth: 100, maxWidth: 200, isResizable: true },
{ key: 'column2', name: 'Num.Pregunt', fieldName: 'NumPregunt', isMultiline: true, minWidth: 100, maxWidth: 200, isResizable: true },
{ key: 'column3', name: 'Tema', fieldName: 'tema', minWidth: 100, isMultiline: true, 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 },
];
}
......@@ -96,24 +136,23 @@ export default class HomeDetailsList extends React.Component<IHomeDetailsListPro
const { items, itemsAux, selectionDetails } = this.state;
function _alertClicked(): void {
alert('Clicked');
}
return (
<div className="deatails">
return (
<Fabric>
<div className={exampleChildClass}>{selectionDetails}</div>
<Announced message={selectionDetails} />
<TextField
className={exampleChildClass}
label="Filter by name:"
label="Filter by topic in lower case:"
onChange={this._onFilter}
styles={textFieldStyles}
/>
<Announced message={`Number of items after filter applied: ${items.length}.`} />
<MarqueeSelection selection={this._selection}>
<DetailsList
items={itemsAux}
columns={this._columns}
......@@ -126,6 +165,8 @@ export default class HomeDetailsList extends React.Component<IHomeDetailsListPro
checkButtonAriaLabel="Row checkbox"
onItemInvoked={this._onItemInvoked}
/>
<br />
<div>
......@@ -141,41 +182,136 @@ export default class HomeDetailsList extends React.Component<IHomeDetailsListPro
isFooterAtBottom={ true }
headerText='Panel with footer at bottom'
closeButtonAriaLabel='Close'
onRenderFooterContent={ this._onRenderFooterContent }
>
<span>Content goes here.</span>
</Panel>
<form onSubmit={this.handleSubmit} >
<div id="contenedor">
<TextField
label='Asunto:'
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>
</MarqueeSelection>
</Fabric>
);
}
<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 => {
return (
<div>
<PrimaryButton
onClick={ this._onClosePanel }
<button
style={ { 'marginRight': '8px' } }
>
Save
</PrimaryButton>
</button>
<DefaultButton
onClick={ this._onClosePanel }
>
Cancel
</DefaultButton>
</form>
</Panel>
</div>
</MarqueeSelection>
</Fabric>
</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 {
const selectionCount = this._selection.getSelectedCount();
......@@ -183,7 +319,7 @@ export default class HomeDetailsList extends React.Component<IHomeDetailsListPro
case 0:
return 'No items selected';
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:
return `${selectionCount} items selected`;
}
......@@ -193,7 +329,7 @@ export default class HomeDetailsList extends React.Component<IHomeDetailsListPro
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
}
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