1
0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-07-30 04:23:11 +03:00

Finished breakdown of attachment vue into components

This commit is contained in:
Dan Brown
2020-07-04 16:53:02 +01:00
parent 14b6cd1091
commit d41452f39c
24 changed files with 371 additions and 321 deletions

View File

@ -0,0 +1,8 @@
@foreach($attachments as $attachment)
<div class="attachment icon-list">
<a class="icon-list-item py-xs" href="{{ $attachment->getUrl() }}" @if($attachment->external) target="_blank" @endif>
<span class="icon">@icon($attachment->external ? 'export' : 'file')</span>
<span>{{ $attachment->name }}</span>
</a>
</div>
@endforeach

View File

@ -0,0 +1,47 @@
<div component="ajax-form"
option:ajax-form:url="/attachments/{{ $attachment->id }}"
option:ajax-form:method="put"
option:ajax-form:success-message="{{ trans('entities.attachments_updated_success') }}">
<h5>{{ trans('entities.attachments_edit_file') }}</h5>
<div class="form-group">
<label for="attachment_edit_name">{{ trans('entities.attachments_edit_file_name') }}</label>
<input type="text" id="attachment_edit_name"
name="attachment_edit_name"
value="{{ $attachment_edit_name ?? $attachment->name ?? '' }}"
placeholder="{{ trans('entities.attachments_edit_file_name') }}">
@if($errors->has('attachment_edit_name'))
<div class="text-neg text-small">{{ $errors->first('attachment_edit_name') }}</div>
@endif
</div>
<div component="tabs" class="tab-container">
<div class="nav-tabs">
<button refs="tabs@toggleFile" type="button" class="tab-item {{ $attachment->external ? '' : 'selected' }}">{{ trans('entities.attachments_upload') }}</button>
<button refs="tabs@toggleLink" type="button" class="tab-item {{ $attachment->external ? 'selected' : '' }}">{{ trans('entities.attachments_set_link') }}</button>
</div>
<div refs="tabs@contentFile" class="mb-m {{ $attachment->external ? 'hidden' : '' }}">
@include('components.dropzone', [
'placeholder' => trans('entities.attachments_edit_drop_upload'),
'url' => url('/attachments/upload/' . $attachment->id),
'successMessage' => trans('entities.attachments_file_updated'),
])
</div>
<div refs="tabs@contentLink" class="{{ $attachment->external ? '' : 'hidden' }}">
<div class="form-group">
<label for="attachment_edit_url">{{ trans('entities.attachments_link_url') }}</label>
<input type="text" id="attachment_edit_url"
name="attachment_edit_url"
value="{{ $attachment_edit_url ?? ($attachment->external ? $attachment->path : '') }}"
placeholder="{{ trans('entities.attachment_link') }}">
@if($errors->has('attachment_edit_url'))
<div class="text-neg text-small">{{ $errors->first('attachment_edit_url') }}</div>
@endif
</div>
</div>
</div>
<button component="event-emit-select"
option:event-emit-select:name="edit-back" type="button" class="button outline">{{ trans('common.back') }}</button>
<button refs="ajax-form@submit" type="button" class="button">{{ trans('common.save') }}</button>
</div>

View File

@ -0,0 +1,27 @@
{{--
@pageId
--}}
<div component="ajax-form"
option:ajax-form:url="/attachments/link"
option:ajax-form:method="post"
option:ajax-form:success-message="{{ trans('entities.attachments_link_attached') }}">
<input type="hidden" name="attachment_link_uploaded_to" value="{{ $pageId }}">
<p class="text-muted small">{{ trans('entities.attachments_explain_link') }}</p>
<div class="form-group">
<label for="attachment_link_name">{{ trans('entities.attachments_link_name') }}</label>
<input name="attachment_link_name" id="attachment_link_name" type="text" placeholder="{{ trans('entities.attachments_link_name') }}" value="{{ $attachment_link_name ?? '' }}">
@if($errors->has('attachment_link_name'))
<div class="text-neg text-small">{{ $errors->first('attachment_link_name') }}</div>
@endif
</div>
<div class="form-group">
<label for="attachment_link_url">{{ trans('entities.attachments_link_url') }}</label>
<input name="attachment_link_url" id="attachment_link_url" type="text" placeholder="{{ trans('entities.attachments_link_url_hint') }}" value="{{ $attachment_link_url ?? '' }}">
@if($errors->has('attachment_link_url'))
<div class="text-neg text-small">{{ $errors->first('attachment_link_url') }}</div>
@endif
</div>
<button refs="ajax-form@submit"
type="button"
class="button">{{ trans('entities.attach') }}</button>
</div>

View File

@ -0,0 +1,32 @@
<div component="sortable-list" option:sortable-list:handle-selector=".handle">
@foreach($attachments as $attachment)
<div component="ajax-delete-row"
option:ajax-delete-row:url="{{ url('/attachments/' . $attachment->id) }}"
data-id="{{ $attachment->id }}"
class="card drag-card">
<div class="handle">@icon('grip')</div>
<div class="py-s">
<a href="{{ $attachment->getUrl() }}" target="_blank">{{ $attachment->name }}</a>
</div>
<div class="flex-fill justify-flex-end">
<button component="event-emit-select"
option:event-emit-select:name="edit"
option:event-emit-select:id="{{ $attachment->id }}"
type="button"
class="drag-card-action text-center text-primary">@icon('edit')</button>
<div component="dropdown" class="flex-fill relative">
<button refs="dropdown@toggle" type="button" class="drag-card-action text-center text-neg">@icon('close')</button>
<div refs="dropdown@menu" class="dropdown-menu">
<p class="text-neg small px-m mb-xs">{{ trans('entities.attachments_delete') }}</p>
<button refs="ajax-delete-row@delete" type="button" class="text-primary small delete">{{ trans('common.confirm') }}</button>
</div>
</div>
</div>
</div>
@endforeach
@if (count($attachments) === 0)
<p class="small text-muted">
{{ trans('entities.attachments_no_files') }}
</p>
@endif
</div>

View File

@ -0,0 +1,39 @@
<div style="display: block;" toolbox-tab-content="files"
component="attachments"
option:attachments:page-id="{{ $page->id ?? 0 }}">
<h4>{{ trans('entities.attachments') }}</h4>
<div class="px-l files">
<div refs="attachments@listContainer">
<p class="text-muted small">{{ trans('entities.attachments_explain') }} <span class="text-warn">{{ trans('entities.attachments_explain_instant_save') }}</span></p>
<div component="tabs" refs="attachments@mainTabs" class="tab-container">
<div class="nav-tabs">
<button refs="tabs@toggleItems" type="button" class="selected tab-item">{{ trans('entities.attachments_items') }}</button>
<button refs="tabs@toggleUpload" type="button" class="tab-item">{{ trans('entities.attachments_upload') }}</button>
<button refs="tabs@toggleLinks" type="button" class="tab-item">{{ trans('entities.attachments_link') }}</button>
</div>
<div refs="tabs@contentItems attachments@list">
@include('attachments.manager-list', ['attachments' => $page->attachments->all()])
</div>
<div refs="tabs@contentUpload" class="hidden">
@include('components.dropzone', [
'placeholder' => trans('entities.attachments_dropzone'),
'url' => url('/attachments/upload?uploaded_to=' . $page->id),
'successMessage' => trans('entities.attachments_file_uploaded'),
])
</div>
<div refs="tabs@contentLinks" class="hidden">
@include('attachments.manager-link-form', ['pageId' => $page->id])
</div>
</div>
</div>
<div refs="attachments@editContainer" class="hidden">
</div>
</div>
</div>