shihaam/akaunting
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #3011 from mervekaraman/master

Browse Source 
Import page re-design
This commit is contained in:
Cüneyt Şentürk 2023-07-26 10:46:26 +03:00 committed by GitHub
commit e16fac07a3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 624 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/Http/Controllers/Common/Import.php
View File

@ -48,6 +48,8 @@ class Import extends Controller
$form_params['url'] = $path . '/import';
}
return view('common.import.create', compact('group', 'type', 'path', 'route', 'form_params', 'title_type', 'sample_file'));
$document_link = 'https://akaunting.com/hc/docs/import-export/';
return view('common.import.create', compact('group', 'type', 'path', 'route', 'form_params', 'title_type', 'sample_file', 'document_link'));
}
}

38
app/View/Components/Form/Group/Import.php Normal file
View File

@ -0,0 +1,38 @@
<?php
namespace App\View\Components\Form\Group;
use App\Abstracts\View\Components\Form;
class Import extends Form
{
public $type = 'file';
public $formGroupClass = 'sm:col-span-3';
public $custom_attributes = [
'dropzone-class' => 'form-file dropzone-column sm:w-1/2 h-32.5',
];
/**
* Get the view / contents that represent the component.
*
* @return \Illuminate\Contracts\View\View|string
*/
public function render()
{
if (! empty($this->options)) {
$options = [];
foreach ($this->options as $option) {
$options[$option->id] = $option->name;
}
$this->options = $options;
}
$this->options['maxFilesize'] = config('filesystems.max_size');
return view('components.form.group.import');
}
}

30
app/View/Components/Form/Input/Import.php Normal file
View File

@ -0,0 +1,30 @@
<?php
namespace App\View\Components\Form\Input;
use App\Abstracts\View\Components\Form;
class Import extends Form
{
public $type = 'file';
/**
* Get the view / contents that represent the component.
*
* @return \Illuminate\Contracts\View\View|string
*/
public function render()
{
if (! empty($this->options)) {
$options = [];
foreach ($this->options as $option) {
$options[$option->id] = $option->name;
}
$this->options = $options;
}
return view('components.form.input.import');
}
}

97
public/css/app.css vendored
View File

@ -319,7 +319,8 @@
border-radius: .375rem;
}
.dz-message {
.dz-message,
.dz-preview-message {
padding: 5rem 1rem;
display: -webkit-box;
display: -ms-flexbox;
@ -331,8 +332,9 @@
-ms-flex-pack: center;
justify-content: center;
background-color: #fff;
border: 1px dashed #C7C9D9;
border: 2px dashed #C7C9D9;
border-radius: .375rem;
font-weight: 500;
text-align: center;
color: #595959;
-webkit-transition: all .15s ease;
@ -341,24 +343,31 @@
-ms-flex-order: -1;
order: -1;
cursor: pointer;
}
.dz-message {
z-index: 9;
}
.dz-message:hover {
border-color: #424242;
.dz-message:hover,
.dz-preview-message:hover {
border-color: #918b8b;
}
.dropzone-multiple .dz-message {
.dropzone-multiple .dz-message,
.dropzone-multiple .dz-preview-message {
height: 5rem;
padding: 0;
}
.dropzone-single .dz-message {
.dropzone-single .dz-message,
.dropzone-single .dz-preview-message {
height: 100%;
padding: 0.5rem 1rem;
padding: 1rem 0;
}
.dropzone-column .dz-message {
.dropzone-column .dz-message,
.dropzone-column .dz-preview-message {
height: 100%;
padding: 0;
}
@ -373,7 +382,8 @@
opacity:1
}
.dz-message .dz-button {
.dz-message .dz-button,
.dz-preview-message .dz-button {
background: hsla(0,0%,100%,0);
border: none;
color: #C7C9D9;
@ -415,6 +425,32 @@
bottom: 7px;
z-index: 99;
}
.dz-import-text {
color: #6B7280;
font-weight: 600;
}
.dz-import-upload {
color: #6B7280;
font-weight: 500;
}
.dz-import-icon {
font-size: 38px;
outline: none;
}
.dz-import {
padding: 20px;
background: hsla(0,0%,100%,0);
border: none;
color: #C7C9D9;
}
.dz-import-width {
width: 120%;
}
/*
! tailwindcss v3.3.2 | MIT License | https://tailwindcss.com
*/
@ -1543,13 +1579,16 @@ button, input, optgroup, select, textarea{
.change-log-modal .badge{
border-radius: 1.5rem;
--tw-bg-opacity: 1;
background-color: rgb(110 161 82 / var(--tw-bg-opacity));
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
font-size: 1.2rem;
font-size: 0.75rem;
line-height: 1rem;
font-weight: 700;
font-weight: 500;
--tw-text-opacity: 1;
color: #6ea152;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.change-log-modal h2{
@ -1563,39 +1602,31 @@ button, input, optgroup, select, textarea{
.change-log-modal h3{
margin-bottom: 0.5rem;
margin-top: 40px;
font-size: 1.125rem;
line-height: 1.75rem;
font-weight: 700;
--tw-text-opacity: 1;
color: #55588B;
color: rgb(85 88 139 / var(--tw-text-opacity));
}
.change-log-modal ul{
margin-bottom: 0.5rem;
list-style-position: inside;
list-style-type: disc;
border: 2px solid #eaeaea;
padding: 10px 20px;
border-radius: 8px;
}
.change-log-modal li:last-child {
margin-bottom: 13px;
}
.change-log-modal li{
font-size: 1rem;
line-height: 1.5rem;
margin-top: 13px;
--tw-text-opacity: 1;
color: rgb(85 88 139 / var(--tw-text-opacity));
}
.change-log-modal a{
--tw-text-opacity: 1;
color: rgb(110 161 82 / var(--tw-text-opacity));
-webkit-text-decoration-line: underline;
text-decoration-line: underline;
}
/* changelog modal styling for update center */
@ -62781,6 +62812,10 @@ body{
display: flex;
}
.group:hover .group-hover\:hidden{
display: none;
}
.group:hover .group-hover\:translate-x-1{
--tw-translate-x: 0.25rem;
-webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@ -63496,6 +63531,10 @@ body{
margin: 1px;
}
:is([dir="ltr"] .ltr\:-ml-10){
margin-left: -2.5rem;
}
:is([dir="ltr"] .ltr\:-ml-7){
margin-left: -1.75rem;
}
@ -63520,6 +63559,10 @@ body{
margin-right: 0.25rem;
}
:is([dir="ltr"] .ltr\:mr-10){
margin-right: 2.5rem;
}
:is([dir="ltr"] .ltr\:mr-2){
margin-right: 0.5rem;
}
@ -64513,6 +64556,10 @@ body{
margin: 1px;
}
:is([dir="rtl"] .rtl\:-mr-10){
margin-right: -2.5rem;
}
:is([dir="rtl"] .rtl\:-mr-7){
margin-right: -1.75rem;
}
@ -64521,6 +64568,10 @@ body{
margin-left: 0.25rem;
}
:is([dir="rtl"] .rtl\:ml-10){
margin-left: 2.5rem;
}
:is([dir="rtl"] .rtl\:ml-2){
margin-left: 0.5rem;
}

54
public/css/third_party/dropzone_custom.css vendored
View File

@ -20,37 +20,46 @@
border-radius: .375rem;
}
.dz-message {
.dz-message,
.dz-preview-message {
padding: 5rem 1rem;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
border: 1px dashed #C7C9D9;
border: 2px dashed #C7C9D9;
border-radius: .375rem;
font-weight: 500;
text-align: center;
color: #595959;
transition: all .15s ease;
order: -1;
cursor: pointer;
}
.dz-message {
z-index: 9;
}
.dz-message:hover {
border-color: #424242;
.dz-message:hover,
.dz-preview-message:hover {
border-color: #918b8b;
}
.dropzone-multiple .dz-message {
.dropzone-multiple .dz-message,
.dropzone-multiple .dz-preview-message {
height: 5rem;
padding: 0;
}
.dropzone-single .dz-message {
.dropzone-single .dz-message,
.dropzone-single .dz-preview-message {
height: 100%;
padding: 0.5rem 1rem;
padding: 1rem 0;
}
.dropzone-column .dz-message {
.dropzone-column .dz-message,
.dropzone-column .dz-preview-message {
height: 100%;
padding: 0;
}
@ -65,7 +74,8 @@
opacity:1
}
.dz-message .dz-button {
.dz-message .dz-button,
.dz-preview-message .dz-button {
background: hsla(0,0%,100%,0);
border: none;
color: #C7C9D9;
@ -100,3 +110,29 @@
bottom: 7px;
z-index: 99;
}
.dz-import-text {
color: #6B7280;
font-weight: 600;
}
.dz-import-upload {
color: #6B7280;
font-weight: 500;
}
.dz-import-icon {
font-size: 38px;
outline: none;
}
.dz-import {
padding: 20px;
background: hsla(0,0%,100%,0);
border: none;
color: #C7C9D9;
}
.dz-import-width {
width: 120%;
}

BIN
public/img/import.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 155 KiB

252
resources/assets/js/components/AkauntingImport.vue Normal file
View File

@ -0,0 +1,252 @@
<template>
<div :id="'dropzone-' + _uid" class="dropzone dropzone-single dz-clickable group w-full">
<div class="fallback">
<div class="custom-file">
<input type="file" class="custom-file-input" :id="'projectCoverUploads' + _uid">
<label class="custom-file-label" :for="'projectCoverUploads' + _uid">
{{ textChooseFile }}
</label>
</div>
</div>
<div class="dz-preview dz-preview-single" :class="previewClasses" ref="previewSingle">
<div class="dz-preview-cover dz-default dz-preview-message flex flex-col">
<div class="dz-import">
<div class="dz-import-icon relative">
<span class="material-icons-outlined text-default text-7xl">file_copy</span>
<button data-dz-remove="true" class="absolute z-10 right-18 top-0 hidden group-hover:flex bg-white">
<span class="material-icons-outlined text-gray-300 text-8xl">cancel</span>
</button>
</div>
<div class="relative h-12">
<p class="absolute dz-import-upload z-10" data-dz-name>...</p>
<p class="dz-import-text pt-6" v-html="textExtensionAndLimitationFile"></p>
</div>
</div>
<div class="w-full h-2 bg-purple-100 rounded-b-md -bottom-1 absolute group-hover:hidden">
<div class="w-0 h-2 bg-default rounded-b-md progress"></div>
</div>
</div>
</div>
<div class="dz-default dz-message flex flex-col" style="background-color: white;">
<div class="dz-import">
<div class="dz-import-icon">
<span class="material-icons-outlined text-7xl" :class="(files.length) ? 'text-default opacity-0' : ''">file_copy</span>
</div>
<div>
<p class="dz-import-upload" :class="(files.length) ? 'opacity-0' : ''" v-html="textDropFile"></p>
<p class="dz-import-text" v-html="textExtensionAndLimitationFile"></p>
</div>
</div>
</div>
</div>
</template>
<script>
import Dropzone from 'dropzone';
Dropzone.autoDiscover = false;
export default {
name: 'akaunting-import',
props: {
textDropFile: {
type: String,
default: '<span style="color: #006EA6;">Upload a file</span> or drag and drop',
description: 'Drop file text'
},
textExtensionAndLimitationFile: {
type: String,
default: '<span>XLS or XLSX</span> up to <span>500 rows</span>',
description: 'Drop message text'
},
textChooseFile: {
type: String,
default: 'Choose File',
description: 'Choose file text'
},
options: {
type: [Object, Array],
default: () => ({})
},
value: [String, Object, Array, File],
url: {
type: String,
default: 'http:'
},
previewClasses: [String, Object, Array],
attachments: {
type: Array,
default: () => ([])
},
},
model: {
prop: 'value',
event: 'change'
},
data() {
return {
files: [],
configurations: this.options,
progress:0,
}
},
methods: {
async initDropzone() {
let self = this;
let preview = this.$refs.previewSingle;
if (this.configurations.maxFiles === undefined) {
this.configurations.maxFiles = 1;
}
if (this.configurations.acceptedFiles === undefined) {
this.configurations.acceptedFiles = 'image/*';
}
let finalOptions = {
...self.configurations,
url: this.url,
previewsContainer: preview,
previewTemplate: preview.innerHTML,
dictDefaultMessage: this.textDropFile,
autoProcessQueue: false,
init: function () {
let dropzone = this;
dropzone.on('addedfile', function (file) {
self.pushProgressbar();
self.files.push(file);
if (self.configurations.maxFiles == 1) {
self.$emit('change', file);
} else {
self.$emit('change', self.files);
}
self.onMaxFilesReached(self);
}),
dropzone.on('removedfile', function (file) {
let index = self.files.findIndex(f => f.name === file.name)
if (index !== -1) {
self.files.splice(index, 1);
}
self.$emit('change', self.files);
self.resetProgressBar();
}),
dropzone.on('maxfilesexceeded', function(file) {
this.removeAllFiles('notCancel');
this.addFile(file);
}),
dropzone.on('maxfilesreached', function(file) {
//
})
}
};
this.dropzone = new Dropzone(this.$el, finalOptions);
preview.innerHTML = '';
},
onMaxFilesReached(arg) {
if (arg.attachments.length == 1) {
arg.$nextTick(() => {
document.querySelector("#dropzone-" + arg._uid).classList.add("dz-max-files-reached");
});
}
},
async pushProgressbar() {
if (this.progress == 0) {
var elem = document.querySelector(".progress");
var width = 1;
var id = setInterval(frame, 2);
var self = this;
function frame() {
if (width >= 100) {
self.progress = 1;
clearInterval(id);
} else {
width++;
elem.style.width = width + "%";
}
}
}
},
async resetProgressBar() {
this.progress = 0;
}
},
async mounted() {
this.initDropzone();
},
watch: {
progress: function(new_value) {
this.progress = new_value;
},
attachments: function (attachments) {
attachments.forEach((attachment) => {
if (attachment.length != undefined) {
var mockFile = {
id: attachment[0].id,
name: attachment[0].name,
size: attachment[0].size,
type: attachment[0].type,
download: attachment[0].downloadPath,
dropzone: 'edit',
};
this.dropzone.emit("addedfile", mockFile);
this.dropzone.options.thumbnail.call(this.dropzone, mockFile, attachment[0].path);
// Make sure that there is no progress bar, etc...
this.dropzone.emit("complete", mockFile);
this.onMaxFilesReached(this);
}
}, this);
},
},
}
</script>
<style>
.avatar.hidden {
display: none;
}
</style>

2
resources/assets/js/mixins/global.js vendored
View File

@ -24,6 +24,7 @@ import AkauntingConnectTransactions from './../components/AkauntingConnectTransa
import AkauntingSwitch from './../components/AkauntingSwitch';
import AkauntingSlider from './../components/AkauntingSlider';
import AkauntingColor from './../components/AkauntingColor';
import AkauntingImport from './../components/AkauntingImport';
import CardForm from './../components/CreditCard/CardForm';
import NProgress from 'nprogress';
@ -79,6 +80,7 @@ export default {
AkauntingSwitch,
AkauntingSlider,
AkauntingColor,
AkauntingImport,
CardForm,
[Select.name]: Select,
[Option.name]: Option,

3
resources/lang/en-GB/import.php
View File

@ -6,5 +6,8 @@ return [
'title' => 'Import :type',
'limitations' => 'Allowed file types: :extensions<br>Allowed max rows: :row_limit',
'sample_file' => 'You can <a target="_blank" href=":download_link"><strong>download</strong></a> the sample file and fill it with your data.',
'sample_file_and_document' => 'You can <a target="_blank" href=":download_link" class="text-blue-500 underline font-bold">download</a> the sample file and review the <a target="_blank" href=":document_link"class="text-blue-500 underline font-bold">documents</a> for detailed information',
'drop_file' => '<span style="color: #006EA6;">Upload a file</span> or drag and drop',
'file_type_and_limitations' => ':extensions up to :row_limit rows',
];

49
resources/views/common/import/create.blade.php
View File

@ -3,31 +3,49 @@
{{ trans('import.title', ['type' => $title_type]) }}
</x-slot>
<x-slot name="favorite"
title="{{ trans('import.title', ['type' => $title_type]) }}"
icon="import_export"
url="{{ route('import.create', ['group' => $group, 'type' => $type]) }}"
></x-slot>
<x-slot name="content">
<div class="card">
<x-form id="import" :route="$form_params['route']" :url="$form_params['url']">
<div class="card-body mt-8">
<div class="border-t-4 border-orange-300 rounded-b-lg text-orange-700 px-4 py-3 shadow-md" role="alert">
<div class="flex flex-col lg:flex-row">
<div class="hidden lg:flex w-4/12 ltr:-ml-10 rtl:-mr-10 ltr:mr-10 rtl:ml-10">
<img src="{{ asset('public/img/import.png') }}" alt="{{ trans('import.title', ['type' => $title_type]) }}">
</div>
<!--
<div class="hidden lg:flex w-4/12 mt-18 mr-14">
<iframe width="560" height="244" src="https://www.youtube.com/embed/p98z142g2yY" frameborder="0" title="{{ trans('import.title', ['type' => $title_type]) }}" class="rounded-lg"></iframe>
</div>
-->
<div class="card-body mt-8 lg:w-8/12 w-full">
<div class="w-full mt-8 bg-blue-100 rounded-lg text-blue-700 px-4 py-2" role="alert">
<div class="flex">
<div>
{!! trans('import.limitations', ['extensions' => strtoupper(config('excel.imports.extensions')),
'row_limit' => config('excel.imports.row_limit')
])
!!}
<span class="material-icons ltr:mr-3 rtl:ml-3">error_outline</span>
<div class="font-semibold text-sm mt-1">
{!! trans('import.sample_file_and_document', [
'download_link' => $sample_file,
'document_link' => $document_link
]) !!}
</div>
</div>
</div>
<div class="border-t-4 mt-8 border-blue-300 rounded-b-lg text-blue-700 px-4 py-3 shadow-md" role="alert">
<div class="flex">
<div>
{!! trans('import.sample_file', ['download_link' => $sample_file]) !!}
<x-form.group.import
name="import"
dropzone-class="form-file"
singleWidthClasses
:options="['acceptedFiles' => '.xls,.xlsx']"
form-group-class="mt-8"
/>
</div>
</div>
</div>
<x-form.group.file name="import" dropzone-class="form-file" singleWidthClasses :options="['acceptedFiles' => '.xls,.xlsx']" form-group-class="mt-8" />
</div>
<div class="mt-8">
<div class="sm:col-span-6 flex items-center justify-end">
@ -59,3 +77,4 @@
<x-script folder="common" file="imports" />
</x-layouts.admin>

59
resources/views/components/form/group/import.blade.php Normal file
View File

@ -0,0 +1,59 @@
@stack($name . '_input_start')
<div
@class([
'relative',
$formGroupClass,
'required' => $required,
'readonly' => $readonly,
'disabled' => $disabled,
])
@if (isset($attributes['v-show']))
v-if="{{ $attributes['v-show'] }}"
@endif
@if (isset($attributes['v-disabled']) || isset($attributes['v-bind:disabled']))
:class="[
{'disabled' : {{ (isset($attributes['v-disabled'])) ? $attributes['v-disabled'] : $attributes['v-bind:disabled'] }}},
{'has-error': {{ isset($attributes['v-error']) ? $attributes['v-error'] : 'form.errors.get("' . $name . '")' }}}
]"
@else
:class="[
{'has-error': {{ isset($attributes['v-error']) ? $attributes['v-error'] : 'form.errors.get("' . $name . '")' }}}
]"
@endif
>
@if (! $attributes->has('label') && ! empty($label->contents))
{!! $label ?? '' !!}
@elseif (! empty($label))
<x-form.label for="{{ $name }}" :required="$required">{!! $label !!}</x-form.label>
@endif
<div @class([
$inputGroupClass,
])
>
@if (! $attributes->has('icon') && ! empty($icon->contents))
{!! $icon ?? '' !!}
@elseif (! empty($icon))
<x-form.icon icon="{{ $icon }}" />
@endif
<x-form.input.import
name="{{ $name }}"
id="{{ $id }}"
:value="$value"
v-model="{{ !empty($attributes['v-model']) ? $attributes['v-model'] : (!empty($attributes['data-field']) ? 'form.' . $attributes['data-field'] . '.' . $name : 'form.' . $name) }}"
:multiple="$multiple"
:options="$options"
{{ $attributes->merge($custom_attributes) }}
/>
</div>
@if (! $attributes->has('error') && ! empty($error->contents))
{!! $error ?? '' !!}
@else
<x-form.error name="{{ $name }}" {{ $attributes }} />
@endif
</div>
@stack($name . '_input_end')

75
resources/views/components/form/input/import.blade.php Normal file
View File

@ -0,0 +1,75 @@
<akaunting-import
text-drop-file="{{ trans('import.drop_file') }}"
text-extension-and-limitation-file="{!! trans('import.file_type_and_limitations', [
'extensions' => strtoupper(config('excel.imports.extensions')),
'row_limit' => config('excel.imports.row_limit')
]) !!}"
text-choose-file="{{ trans('general.form.choose_file') }}"
@if (! empty($attributes['dropzone-class']))
class="{{ $attributes['dropzone-class'] }}"
@endif
@if (! empty($options))
:options={{ json_encode($options) }}
@endif
@if (! empty($attributes['previewClasses']))
preview-classes="{{ $attributes['previewClasses'] }}"
@endif
@if (! empty($attributes['url']))
url="{{ $attributes['url'] }}"
@endif
@if (! empty($value))
@php
$attachments = [];
@endphp
@if (is_array($value))
@foreach($value as $attachment)
@php
$attachments[] = [
'id' => $attachment->id,
'name' => $attachment->filename . '.' . $attachment->extension,
'path' => route('uploads.get', $attachment->id),
'type' => $attachment->mime_type,
'size' => $attachment->size,
'downloadPath' => route('uploads.download', $attachment->id),
];
@endphp
@endforeach
@elseif ($value instanceof \Plank\Mediable\Media)
@php
$attachments[] = [
'id' => $value->id,
'name' => $value->filename . '.' . $value->extension,
'path' => route('uploads.get', $value->id),
'type' => $value->mime_type,
'size' => $value->size,
'downloadPath' => false,
];
@endphp
@else
@php
$attachment = \Plank\Mediable\Media::find($value);
if (! empty($attachment)) {
$attachments[] = [
'id' => $attachment->id,
'name' => $attachment->filename . '.' . $attachment->extension,
'path' => route('uploads.get', $attachment->id),
'type' => $attachment->mime_type,
'size' => $attachment->size,
'downloadPath' => false,
];
}
@endphp
@endif
:attachments="{{ json_encode($attachments) }}"
@endif
v-model="{{ ! empty($attributes['v-model']) ? $attributes['v-model'] : (! empty($attributes['data-field']) ? 'form.' . $attributes['data-field'] . '.'. $name : 'form.' . $name) }}"
></akaunting-import>