Edit and remove avatar (#1218)

Signed-off-by: Denis Bykhov <80476319+BykhovDenis@users.noreply.github.com>

packages/presentation/src/components/Avatar.svelte

@@ -18,7 +18,7 @@
 
   import { getBlobURL, getFileUrl } from '../utils'
 
-  export let avatar: string | undefined = undefined
+  export let avatar: string | null | undefined = undefined
   export let direct: Blob | undefined = undefined
   export let size: 'x-small' | 'small' | 'medium' | 'large' | 'x-large'
 
@@ -27,7 +27,7 @@
     getBlobURL(direct).then((blobURL) => {
       url = blobURL
     })
-  } else if (avatar !== undefined) {
+  } else if (avatar !== undefined && avatar !== null) {
     url = getFileUrl(avatar)
   } else {
     url = undefined

packages/presentation/src/components/EditAvatarPopup.svelte

@@ -19,27 +19,57 @@
   import imageCropper from '@anticrm/image-cropper'
   import plugin from '../plugin'
 
-  export let file: File
+  export let file: Blob
+  let inputRef: HTMLInputElement
+  const targetMimes = ['image/png', 'image/jpg', 'image/jpeg']
 
   const dispatch = createEventDispatcher()
   const CropperP = getResource(imageCropper.component.Cropper)
   let cropper: any
 
+  function onSelect (e: any) {
+    const newFile = e.target?.files[0] as File | undefined
+    if (newFile === undefined || !targetMimes.includes(newFile.type)) {
+      return
+    }
+    file = newFile
+
+    e.target.value = null
+  }
+
   async function onCrop () {
     const res = await cropper.crop()
 
     dispatch('close', res)
   }
+
+  async function remove () {
+    dispatch('close', null)
+  }
+
+
+  function selectAnother () {
+    inputRef.click()
+  }
 </script>
 
+<input style="display: none;" type="file" bind:this={inputRef} on:change={onSelect} accept={targetMimes.join(',')}/>
 <div class="overlay" on:click={() => { dispatch('close') }} />
 <div class="root">
   {#await CropperP then Cropper}
     <div class="cropper">
       <Cropper bind:this={cropper} image={file} />
     </div>
-    <div class="footer ml-6 mr-6 mt-4 mb-4">
-      <Button label={plugin.string.Save} primary on:click={onCrop} />
+    <div class="footer">
+      <div>
+        <Button label={plugin.string.Save} primary on:click={onCrop} />
+      </div>
+      <div class="ml-4 mr-4">
+        <Button label={plugin.string.Change} on:click={selectAnother} />
+      </div>
+      <div>
+        <Button label={plugin.string.Remove} on:click={remove} />
+      </div>
     </div>
   {/await}
 </div>
@@ -85,5 +115,6 @@
   .footer {
     display: flex;
     flex-direction: row-reverse;
+    padding: 1rem 1.5rem;
   }
 </style>

packages/presentation/src/components/EditableAvatar.svelte

@@ -15,13 +15,13 @@
 
 <script lang="ts">
   import { createEventDispatcher } from 'svelte'
-  
   import { showPopup } from '@anticrm/ui'
 
   import Avatar from './Avatar.svelte'
   import EditAvatarPopup from './EditAvatarPopup.svelte'
+  import { getFileUrl } from '../utils'
 
-  export let avatar: string | undefined = undefined
+  export let avatar: string | null | undefined = undefined
   export let size: 'x-small' | 'small' | 'medium' | 'large' | 'x-large'
   export let direct: Blob | undefined = undefined
 
@@ -29,8 +29,28 @@
 
   let inputRef: HTMLInputElement
   const targetMimes = ['image/png', 'image/jpg', 'image/jpeg']
-  function onClick () {
-    inputRef.click()
+  async function onClick () {
+    let file: Blob
+    if (direct !== undefined) {
+      file = direct
+    } else if (avatar != null) {
+      const url = getFileUrl(avatar)
+      file = await (await fetch(url)).blob()
+    } else {
+      return inputRef.click()
+    }
+    showPopup(EditAvatarPopup, { file }, undefined, (blob) => {
+      if (blob === undefined) {
+        return
+      }
+      if (blob === null) {
+        direct = undefined
+        dispatch('remove')
+      } else {
+        direct = blob
+        dispatch('done', { file: new File([blob], 'avatar') })
+      }
+    })
   }
 
 
@@ -44,9 +64,13 @@
       if (blob === undefined) {
         return
       }
-
-      direct = blob
-      dispatch('done', { file: new File([blob], file.name) })
+      if (blob === null) {
+        direct = undefined
+        dispatch('remove')
+      } else {
+        direct = blob
+        dispatch('done', { file: new File([blob], file.name) })
+      }
     })
     e.target.value = null
   }