İmport page design
This commit is contained in:
Merve Karaman
252
resources/assets/js/components/AkauntingImport.vue
Normal file
252
resources/assets/js/components/AkauntingImport.vue
Normal 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-body">
|
||||
<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">
|
||||
<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
2
resources/assets/js/mixins/global.js
vendored
@@ -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,
|
||||
|
||||
@@ -2,9 +2,12 @@
|
||||
|
||||
return [
|
||||
|
||||
'import' => 'Import',
|
||||
'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.',
|
||||
'import' => 'Import',
|
||||
'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',
|
||||
|
||||
];
|
||||
|
||||
@@ -3,30 +3,48 @@
|
||||
{{ 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">
|
||||
<div>
|
||||
{!! trans('import.limitations', ['extensions' => strtoupper(config('excel.imports.extensions')),
|
||||
'row_limit' => config('excel.imports.row_limit')
|
||||
])
|
||||
!!}
|
||||
</div>
|
||||
</div>
|
||||
<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="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]) !!}
|
||||
<!--
|
||||
<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">
|
||||
<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>
|
||||
|
||||
<x-form.group.file name="import" dropzone-class="form-file" singleWidthClasses :options="['acceptedFiles' => '.xls,.xlsx']" form-group-class="mt-8" />
|
||||
<x-form.group.import
|
||||
name="import"
|
||||
dropzone-class="form-file"
|
||||
singleWidthClasses
|
||||
:options="['acceptedFiles' => '.xls,.xlsx']"
|
||||
form-group-class="mt-8"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-8">
|
||||
@@ -58,4 +76,5 @@
|
||||
</x-slot>
|
||||
|
||||
<x-script folder="common" file="imports" />
|
||||
</x-layouts.admin>
|
||||
</x-layouts.admin>
|
||||
|
||||
|
||||
59
resources/views/components/form/group/import.blade.php
Normal file
59
resources/views/components/form/group/import.blade.php
Normal 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
75
resources/views/components/form/input/import.blade.php
Normal 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>
|
||||
Reference in New Issue
Block a user