commmit changes

joaojmendes · joaojmendes · commit 061f13ffeb40 · 2018-11-09T09:29:46.000Z
diff --git a/docs/documentation/docs/assets/ListItemAttachementDeletedMsg.png b/docs/documentation/docs/assets/ListItemAttachementDeletedMsg.png
diff --git a/docs/documentation/docs/assets/ListItemAttachmentDeleteConfirm.png b/docs/documentation/docs/assets/ListItemAttachmentDeleteConfirm.png
diff --git a/docs/documentation/docs/assets/ListItemAttachmentsTitles.png b/docs/documentation/docs/assets/ListItemAttachmentsTitles.png
diff --git a/docs/documentation/docs/assets/ListItemAttachmentsTitles2.png b/docs/documentation/docs/assets/ListItemAttachmentsTitles2.png
diff --git a/docs/documentation/docs/controls/ListItemAttachments.md b/docs/documentation/docs/controls/ListItemAttachments.md
@@ -0,0 +1,46 @@
+# List-Item-Attachments control
+
+This control allows you to manage list item attachments, you can add or delete associated attachments, the attachments are listed in tile view.
+ 
+
+Here is an example of the control:
+
+![ListItemAttachments Tiles](./assets/ListItemAttachmentsTitles.png)
+
+![ListItemAttachments Confirm Delete](./assets/ListItemAttachmentDeleteConfirm.png)
+
+![ListItemAttachments Attachment Deleted ](./assets/ListItemAttachementDeletedMsg.png)
+
+## How to use this control in your solutions
+
+- Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../#getting-started) page for more information about installing the dependency.
+- Import the control into your component:
+
+```TypeScript
+ 
+import { ListItemAttachments } from '@pnp/spfx-controls-react/listItemAttachments';
+```
+- Use the `ListItemAttachments` control in your code as follows:
+
+```TypeScript
+<ListItemAttachments listId='dfa283f4-5faf-4d54-b6b8-5bcaf2725af5'
+                     itemId={1}
+                     context={this.props.context}
+                     disabled={false} />
+```
+
+## Implementation
+
+The `ListItemAttachments` control can be configured with the following properties:
+
+
+| Property | Type | Required | Description |
+| ---- | ---- | ---- | ---- |
+| context | WebPartContext \| ApplicationCustomizerContext | yes | SPFx web part or extention context |
+| listId | string | yes | Guid of the list. |
+| itemId | number | yes | List Item Id  |
+| webUrl | string | no | URL of the site. By default it uses the current site URL. |
+| disabled | boolean | no | Specifies if the control is disabled or not. |
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/ListItemAttachments)
+
diff --git a/src/ListItemAttachments.ts b/src/ListItemAttachments.ts
@@ -0,0 +1 @@
+export * from './controls/listItemAttachments';
diff --git a/src/controls/listItemAttachments/IListItemAttachmentsState.ts b/src/controls/listItemAttachments/IListItemAttachmentsState.ts
@@ -1,8 +1,9 @@
-import {IListItemAttachmentFile } from '../spentities/IListItemAttachmentFile';
+import {IListItemAttachmentFile } from './IListItemAttachmentFile';
 export interface IListItemAttachmentsState {
       file: IListItemAttachmentFile;
       showDialog: boolean;
       dialogMessage: string;
-      Documents: IListItemAttachmentFile[];
+      attachments: IListItemAttachmentFile[];
       deleteAttachment: boolean;
+      disableButton: boolean;
 }
diff --git a/src/controls/listItemAttachments/IUploadAttachmentProps.ts b/src/controls/listItemAttachments/IUploadAttachmentProps.ts
@@ -9,5 +9,4 @@ export interface IUploadAttachmentProps {
   disabled?: boolean;
   context: WebPartContext |  ApplicationCustomizerContext;
   onAttachmentUpload: () => void;
-  iconButton: boolean;
 }
diff --git a/src/controls/listItemAttachments/ListItemAttachments.tsx b/src/controls/listItemAttachments/ListItemAttachments.tsx
@@ -21,6 +21,7 @@ import { IListItemAttachmentsProps } from '.';
 import { IListItemAttachmentsState } from '.';
 import SPservice from "../../services/SPService";
 import { TooltipHost, DirectionalHint } from 'office-ui-fabric-react/lib/Tooltip';
+import { Spinner, SpinnerSize } from 'office-ui-fabric-react/lib/Spinner';
 import utilities from './utilities';
 export class ListItemAttachments extends React.Component<IListItemAttachmentsProps, IListItemAttachmentsState> {
   private _spservice: SPservice;
@@ -34,8 +35,9 @@ export class ListItemAttachments extends React.Component<IListItemAttachmentsPro
       file: null,
       showDialog: false,
       dialogMessage: '',
-      Documents: [],
-      deleteAttachment: false
+      attachments: [],
+      deleteAttachment: false,
+      disableButton: false
     };
     // Get SPService Factory
     this._spservice = new SPservice(this.props.context);
@@ -54,9 +56,10 @@ export class ListItemAttachments extends React.Component<IListItemAttachmentsPro
       const files: IListItemAttachmentFile[] = await this._spservice.getListItemAttachments(this.props.listId, this.props.itemId);
       for (const _file of files) {
 
+        const _previewImage = await this._utilities.GetFileImageUrl(_file);
         this.previewImages.push({
           name: _file.FileName,
-          previewImageSrc: await this._utilities.GetFileImageUrl(_file),
+          previewImageSrc: _previewImage,
           iconSrc: '',
           imageFit: ImageFit.center,
           width: 187,
@@ -66,7 +69,7 @@ export class ListItemAttachments extends React.Component<IListItemAttachmentsPro
       this.setState({
         showDialog: false,
         dialogMessage: '',
-        Documents: files
+        attachments: files
       });
     }
     catch (error) {
@@ -89,13 +92,12 @@ export class ListItemAttachments extends React.Component<IListItemAttachmentsPro
         <UploadAttachment
           listId={this.props.listId}
           itemId={this.props.itemId}
-          iconButton={true}
           disabled={this.props.disabled}
           context={this.props.context}
           onAttachmentUpload={this._onAttachmentpload}
         />
 
-        {this.state.Documents.map((_file, i: number) => {
+        {this.state.attachments.map((_file, i: number) => {
           return (
             <div className={styles.documentCardWrapper}>
               <TooltipHost
@@ -105,7 +107,7 @@ export class ListItemAttachments extends React.Component<IListItemAttachmentsPro
                 directionalHint={DirectionalHint.rightCenter}>
 
                 <DocumentCard
-                  onClickHref={_file.ServerRelativeUrl}
+                  onClickHref={ `${_file.ServerRelativeUrl}?web=1`}
                   className={styles.documentCard}>
                   <DocumentCardPreview previewImages={[this.previewImages[i]]} />
                   <Label className={styles.fileLabel}>
@@ -137,6 +139,7 @@ export class ListItemAttachments extends React.Component<IListItemAttachmentsPro
           );
         })}
         {
+
           <Dialog
             isOpen={this.state.showDialog}
             type={DialogType.normal}
@@ -145,11 +148,17 @@ export class ListItemAttachments extends React.Component<IListItemAttachmentsPro
             subText={this.state.dialogMessage}
             isBlocking={true}>
             <DialogFooter>
+              <div style={{ marginBottom: 7 }}>
+                {
+                  this.state.disableButton ? <Spinner size={SpinnerSize.medium} /> : ''
+                }
+              </div>
               {
-                this.state.deleteAttachment ? (<PrimaryButton onClick={this._onConfirmedDeleteAttachment}>{strings.ListItemAttachmentsdialogOKbuttonLabelOnDelete}</PrimaryButton>) : ""
+                this.state.deleteAttachment ? (<PrimaryButton disabled={this.state.disableButton} onClick={this._onConfirmedDeleteAttachment}>{strings.ListItemAttachmentsdialogOKbuttonLabelOnDelete}</PrimaryButton>) : ""
               }
               {
-                this.state.deleteAttachment ? (<DefaultButton onClick={this._closeDialog}>{strings.ListItemAttachmentsdialogCancelButtonLabel}</DefaultButton>) : <PrimaryButton onClick={this._closeDialog}>{strings.ListItemAttachmentsdialogOKbuttonLabel}</PrimaryButton>
+                this.state.deleteAttachment ? (<DefaultButton disabled={this.state.disableButton} onClick={this._closeDialog}>{strings.ListItemAttachmentsdialogCancelButtonLabel}</DefaultButton>)
+                  : <PrimaryButton onClick={this._closeDialog}>{strings.ListItemAttachmentsdialogOKbuttonLabel}</PrimaryButton>
               }
             </DialogFooter>
           </Dialog>
@@ -192,12 +201,18 @@ export class ListItemAttachments extends React.Component<IListItemAttachmentsPro
   private _onConfirmedDeleteAttachment() {
     // Delete Attachment
     const _file = this.state.file;
+
+    this.setState({
+      disableButton: true,
+    });
+
     this._spservice.deleteAttachment(_file.FileName, this.props.listId, this.props.itemId, this.props.webUrl)
       .then(() => {
 
         this.setState({
           showDialog: true,
           deleteAttachment: false,
+          disableButton: false,
           file: null,
           dialogMessage: strings.ListItemAttachmentsfileDeletedMsg.replace('{0}', _file.FileName),
         });
diff --git a/src/controls/listItemAttachments/UploadAttachment.tsx b/src/controls/listItemAttachments/UploadAttachment.tsx
@@ -8,10 +8,12 @@ import SPservice from "../../services/SPService";
 import * as strings from 'ControlStrings';
 import { CommandBar } from 'office-ui-fabric-react/lib/CommandBar';
 import { ProgressIndicator } from 'office-ui-fabric-react/lib/ProgressIndicator';
+import * as $ from 'jquery';
+import { createRef } from '@uifabric/utilities/lib';
 
 export class UploadAttachment extends React.Component<IUploadAttachmentProps, IUploadAttachmentState> {
   private _spservice: SPservice;
-
+  private fileInput;
   constructor(props) {
     super(props);
     this.state = {
@@ -22,25 +24,33 @@ export class UploadAttachment extends React.Component<IUploadAttachmentProps, IU
     };
     // Get SPService
     this._spservice = new SPservice(this.props.context);
+    this.fileInput =  createRef();
     // Handlers
     this._closeDialog = this._closeDialog.bind(this);
+    this._addAttachment = this._addAttachment.bind(this);
+    this._onAttachmentUpload = this._onAttachmentUpload.bind(this);
   }
   //  FileReader event
   private _onAttachmentUpload(e) {
     e.preventDefault();
     // fire click event
-     document.getElementById('file-picker').click();
+    this.fileInput.current.value='';
+    this.fileInput.current.click();
+  //$('#file-picker').val('');
+   // $('#file-picker').trigger('click');
+
+    // document.getElementById('file-picker').click();
   }
   // Add Attachment
   private _addAttachment(e) {
+
     e.preventDefault();
     this.setState({
       isLoading: true
     });
 
     const reader = new FileReader();
     const file = e.target.files[0];
-    reader.readAsDataURL(file);
 
     reader.onloadend = () => {
       this.setState({
@@ -62,6 +72,7 @@ export class UploadAttachment extends React.Component<IUploadAttachmentProps, IU
           });
         });
     };
+    reader.readAsDataURL(file);
   }
   // Render
   public render() {
@@ -72,6 +83,7 @@ export class UploadAttachment extends React.Component<IUploadAttachmentProps, IU
                style={{ display: 'none' }}
                type="file"
                onChange={(e) => this._addAttachment(e)}
+               ref={this.fileInput}
                />
         <div style={{ textAlign: 'left', marginTop: 25, marginBottom: 25 }}>
           <CommandBar
diff --git a/src/controls/listItemAttachments/index.ts b/src/controls/listItemAttachments/index.ts
@@ -6,4 +6,3 @@ export * from './IUploadAttachmentState';
 export * from './IListItemAttachmentFile';
 export * from './utilities';
 export * from './ListItemAttachments';
-export * from './UploadAttachment';
diff --git a/src/controls/listItemAttachments/utilities.ts b/src/controls/listItemAttachments/utilities.ts
@@ -30,9 +30,13 @@ export default class utilities {
    * GetFileImageUrl
    */
   public GetFileImageUrl(_file: IListItemAttachmentFile): Promise<string> {
-    let _fileImageUrl: string = '';
-    const _fileTypes = _file.ServerRelativeUrl.split('.');
+    let _fileImageUrl: string = DOCICONURL_GENERIC;
+    const _fileTypes = _file.FileName.split('.');
     const _fileExtension = _fileTypes[1];
+    
+   if ( !_fileExtension){
+     return Promise.resolve(_fileImageUrl);
+   }
     switch (_fileExtension.toLowerCase()) {
       case 'xlsx':
         _fileImageUrl = DOCICONURL_XLSX;
diff --git a/src/index.ts b/src/index.ts
@@ -6,6 +6,7 @@ export * from './TaxonomyPicker';
 export * from './WebPartTitle';
 export * from './ListPicker';
 export * from './ListItemPicker';
+export * from './ListItemAttachments';
 
 export * from './IFrameDialog';
 export * from './Common';
diff --git a/src/services/SPService.ts b/src/services/SPService.ts
@@ -62,9 +62,9 @@ export default class SPService implements ISPService {
     }
   }
 
-  // Get ListAttachments
-  public async getListItemAttachments(listId: string, itemId: number, webUrl?: string): Promise<any[]> {
-    let returnFiles: any[];
+   // Get ListAttachments
+   public async getListItemAttachments(listId: string, itemId: number, webUrl?: string): Promise<any[]> {
+
     let spWeb: Web;
     if (typeof webUrl !== "undefined") {
       spWeb = new Web(webUrl);
@@ -73,7 +73,7 @@ export default class SPService implements ISPService {
     }
 
     try {
-      let files = await spWeb.lists
+      const files = await spWeb.lists
         .getById(listId)
         .items.getById(itemId)
         .attachmentFiles.get();
@@ -97,13 +97,14 @@ export default class SPService implements ISPService {
       await spWeb.lists
         .getById(listId)
         .items.getById(itemId)
-        .attachmentFiles.getByName(fileName)
+        .attachmentFiles.getByName(encodeURIComponent(fileName))
         .delete();
       return;
     } catch (error) {
       return Promise.reject(error);
     }
   }
+
   // Add Attachment
   public async addAttachment(listId: string, itemId: number, fileName: string, file: ArrayBuffer, webUrl?: string): Promise<void> {
     let spWeb: Web;
@@ -114,13 +115,84 @@ export default class SPService implements ISPService {
     }
 
     try {
-      let files = await spWeb.lists
+      // remove special characteres in FileName
+      fileName = fileName.replace(/[^\.\w\s]/gi, '');
+      //  Check if Attachment Exists
+      const fileExists = await this.checkAttachmentExists(listId, itemId, fileName, webUrl);
+      // Delete Attachment if exists
+      if (fileExists) {
+        await this.deleteAttachment(fileName, listId, itemId, webUrl);
+      }
+      // Add Attachment
+      const files = await spWeb.lists
         .getById(listId)
         .items.getById(itemId)
-        .attachmentFiles.add(encodeURIComponent(fileName), file);
+        .attachmentFiles.add(fileName, file);
+
       return;
     } catch (error) {
       return Promise.reject(error);
     }
   }
+
+  // get Attachment
+  //
+  public async getAttachment(listId: string, itemId: number, fileName: string, webUrl?: string): Promise<any> {
+    let spWeb: Web;
+    if (typeof webUrl !== "undefined") {
+      spWeb = new Web(webUrl);
+    } else {
+      spWeb = new Web(this._context.pageContext.web.absoluteUrl);
+    }
+    try {
+      const file = await spWeb.lists
+        .getById(listId)
+        .items.getById(itemId)
+        .attachmentFiles.getByName(encodeURIComponent(fileName)).get();
+      return Promise.resolve(file);
+    } catch (error) {
+      return Promise.reject(error);
+    }
+  }
+  // Check if Attachment Exists
+  public async checkAttachmentExists(listId: string, itemId: number, fileName: string, webUrl?: string): Promise<any> {
+
+    try {
+      const listName = await this.getListName(listId, webUrl);
+      const webAbsoluteUrl = !webUrl ? this._context.pageContext.web.absoluteUrl : webUrl;
+      const apiUrl = `${webAbsoluteUrl}/_api/web/getfilebyserverrelativeurl('/lists/${listName}/Attachments/${itemId}/${fileName}')`;
+      const data = await this._context.spHttpClient.get(apiUrl, SPHttpClient.configurations.v1);
+      if (data.ok) {
+        const results = await data.json();
+        if (results && results.Exists) {
+          return results.Exists;
+        }
+      }
+
+      return false;
+    } catch (error) {
+      return Promise.reject(error);
+    }
+  }
+
+  // Get ListName
+  public async getListName(listId: string, webUrl?: string): Promise<string> {
+    let spWeb: Web;
+    if (typeof webUrl !== "undefined") {
+      spWeb = new Web(webUrl);
+    } else {
+      spWeb = new Web(this._context.pageContext.web.absoluteUrl);
+    }
+    try {
+      const list = await spWeb.lists
+        .getById(listId)
+        .select('RootFolder/Name')
+        .expand('RootFolder')
+        .get();
+
+      return Promise.resolve(list.RootFolder.Name);
+    } catch (error) {
+      return Promise.reject(error);
+    }
+  }
 }

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export * from './controls/listItemAttachments';`
Original file line number	Diff line number	Diff line change
`@@ -9,5 +9,4 @@ export interface IUploadAttachmentProps {`
`9`	`9`	`disabled?: boolean;`
`10`	`10`	`context: WebPartContext \| ApplicationCustomizerContext;`
`11`	`11`	`onAttachmentUpload: () => void;`
`12`		`- iconButton: boolean;`
`13`	`12`	`}`