From 5cb7c5fba0c59d822e0da2e6b7218f9a17487b69 Mon Sep 17 00:00:00 2001
From: Yogi Perdana <yogiperdana3@gmail.com>
Date: Wed, 23 Nov 2022 17:05:17 +0700
Subject: [PATCH] Preview foto user (#551)

* Perbaikan catatan rilis

* Buat filter status

* Validasi camat dan sekretaris

* Fix styling

* Validasi perubahan status

* Fix styling

* Validasi hanya pengurus aktif yang dapat ditambahkan

* Perbaiki validasi

* Refactor cek pengurus aktif

* Buat preview foto di user

* Fix styling

* Susulan pengurus (#550)

* Perbaikan catatan rilis

* Buat filter status

* Validasi camat dan sekretaris

* Fix styling

* Validasi perubahan status

* Fix styling

* Validasi hanya pengurus aktif yang dapat ditambahkan

* Perbaiki validasi

* Refactor cek pengurus aktif

* Fix styling

Co-authored-by: yogiperdana <yogiperdana@users.noreply.github.com>

* mutakhirkan catatan rilis

Co-authored-by: yogiperdana <yogiperdana@users.noreply.github.com>
Co-authored-by: sarwono <scqolbu@gmail.com>
---
 app/Models/User.php                 |  6 +++++
 catatan_rilis.md                    |  4 ++++
 resources/views/user/form.blade.php | 35 ++++++++++++++++++++++++++++-
 3 files changed, 44 insertions(+), 1 deletion(-)

diff --git a/app/Models/User.php b/app/Models/User.php
index e7700ea2f..a9840ae89 100755
--- a/app/Models/User.php
+++ b/app/Models/User.php
@@ -36,6 +36,7 @@
 use Illuminate\Notifications\Notifiable;
 use Illuminate\Support\Facades\File;
 use Illuminate\Support\Facades\Hash;
+use Illuminate\Support\Facades\Storage;
 use Intervention\Image\Facades\Image;
 use Spatie\Permission\Traits\HasRoles;
 use Tymon\JWTAuth\Contracts\JWTSubject;
@@ -99,6 +100,11 @@ public static function datatables()
         return static::select('name', 'address', 'status', 'id', 'email', 'created_at', 'phone');
     }
 
+    public function getFotoAttribute()
+    {
+        return $this->attributes['image'] ? Storage::url('user/' . $this->attributes['image']) : null;
+    }
+
     /**
      * Uploads an image.
      *
diff --git a/catatan_rilis.md b/catatan_rilis.md
index 72e86ea09..5b07c22fb 100644
--- a/catatan_rilis.md
+++ b/catatan_rilis.md
@@ -5,14 +5,18 @@ Di rilis v22.11.01 berisi perbaikan yang diminta Komunitas OpenDK.
 Terima kasih pada [] yang baru mulai berkontribusi.
 
 #### Penambahan Fitur
+
 1. [#521](https://github.com/OpenSID/OpenDK/issues/521) Penambahan fitur jabatan untuk perangkat kecamatan.
 2. [#514](https://github.com/OpenSID/OpenDK/issues/514) Penambahan fitur pengaturan perangkat kecamatan.
 3. [#519](https://github.com/OpenSID/OpenDK/issues/519) Penambahan fitur pengguna untuk perangkat kecamatan.
+4. [#546](https://github.com/OpenSID/OpenDK/issues/546) Penambahan fitur pratinjau foto pengguna.
 
 #### Perbaikan bug
+
 1. [#529](https://github.com/OpenSID/OpenDK/issues/529) Perbaikan foto pelapor di sikema tidak menampilkan foto penduduk.
 2. [#544](https://github.com/OpenSID/OpenDK/issues/544) Perbaikan form no telepon pengguna tidak bisa dikosongkan.
 
 #### Perubahan Teknis
+
 1. [#523](https://github.com/OpenSID/OpenDK/issues/523) Perbaikan relasi tabel pembangunan.
 2. [#525](https://github.com/OpenSID/OpenDK/issues/525) Perbaikan relasi tabel potensi.
diff --git a/resources/views/user/form.blade.php b/resources/views/user/form.blade.php
index de984e298..ffb1601d0 100755
--- a/resources/views/user/form.blade.php
+++ b/resources/views/user/form.blade.php
@@ -44,7 +44,9 @@
     <label class="control-label col-md-3 col-sm-3 col-xs-12">Foto Profil </label>
 
     <div class="col-md-6 col-sm-6 col-xs-12">
-        <input type="file" name="image" class="form-control">
+        <input type="file" name="image" id="foto" class="form-control">
+        <br>
+        <img src="{{ is_img($user->foto ?? null) }}"  id="showfoto" style="max-width:400px;max-height:250px;float:left;"/>
     </div>
 </div>
 
@@ -112,5 +114,36 @@
     var data = $('#pengurus :selected').data('nama');
     $('input[name="name"]').val(data);
 });
+
+$(function () {
+
+var fileTypes = ['jpg', 'jpeg', 'png'];  //acceptable file types
+
+function readURL(input) {
+    if (input.files && input.files[0]) {
+        var extension = input.files[0].name.split('.').pop().toLowerCase(),  //file extension from input file
+                isSuccess = fileTypes.indexOf(extension) > -1;  //is extension in acceptable types
+
+        if (isSuccess) { //yes
+            var reader = new FileReader();
+            reader.onload = function (e) {
+
+            $('#showfoto').attr('src', e.target.result);
+            $('#showfoto').removeClass('hide');
+        }
+
+            reader.readAsDataURL(input.files[0]);
+        } else { //no
+            //warning
+            $("#foto").val('');
+            alert('File tersebut tidak diperbolehkan.');
+        }
+    }
+}
+
+$("#foto").change(function () {
+    readURL(this);
+});
+});
 </script>
 @endpush