Skip to content

Commit

Permalink
Display where an image, or file is being referenced
Browse files Browse the repository at this point in the history
  • Loading branch information
MamlukiSn committed Jun 28, 2021
1 parent b420c69 commit 9c5f48f
Show file tree
Hide file tree
Showing 9 changed files with 197 additions and 22 deletions.
1 change: 1 addition & 0 deletions config/media-library.php
Original file line number Diff line number Diff line change
Expand Up @@ -31,4 +31,5 @@
'prefix_uuid_with_local_path' => config('twill.file_library.prefix_uuid_with_local_path', false),
'translated_form_fields' => false,
'show_file_name' => false,
'show_media_references' => false,
];
13 changes: 12 additions & 1 deletion frontend/js/components/MediaField.vue
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,12 @@
<li class="f--small">
<a href="#" @click.prevent="metadatasInfos" v-if="withAddInfo" class="f--link-underlined--o">{{ metadatas.text }}</a>
</li>
<li v-if="showMediaReferences && media.owners.length >= 1">
<ul class="media__references ">
<li class="media__name">{{ $trans('media-library.sidebar.references', 'References') }}</li>
<li class="f--small" :style="(index)" v-for="(item, index) in media.owners" :key="'mediaowner_' + item.id"><a :href="item.edit" target="_blank">{{ item.name }}</a></li>
</ul>
</li>
</ul>

<!--Actions-->
Expand Down Expand Up @@ -256,7 +262,8 @@
},
...mapState({
selectedMedias: state => state.mediaLibrary.selected,
allCrops: state => state.mediaLibrary.crops
allCrops: state => state.mediaLibrary.crops,
showMediaReferences: state => state.mediaLibrary.showMediaReferences
})
},
watch: {
Expand Down Expand Up @@ -804,6 +811,10 @@
margin-bottom:20px;
}
}
/* Media References */
.media__references {
margin-top: 20px;
}
</style>

<style lang="scss">
Expand Down
59 changes: 40 additions & 19 deletions frontend/js/components/files/FileItem.vue
Original file line number Diff line number Diff line change
@@ -1,26 +1,37 @@
<template>
<tr class="fileItem">
<td v-if="draggable" class="fileItem__cell fileItem__cell--drag">
<div class="drag__handle--drag"></div>
</td>
<td class="fileItem__cell fileItem__cell--extension" v-if="currentItem.hasOwnProperty('extension')">
<a href="#" target="_blank"><span v-svg :symbol="getSvgIconName()"></span></a>
</td>
<td class="fileItem__cell fileItem__cell--name">
<span v-if="currentItem.hasOwnProperty('thumbnail')"><img :src="currentItem.thumbnail"/></span>
<a :href="currentItem.hasOwnProperty('original') ? currentItem.original : '#'" download><span class="f--link-underlined--o">{{ currentItem.name }}</span></a>
<input type="hidden" :name="name" :value="currentItem.id"/>
</td>
<td class=" fileItem__cell fileItem__cell--size" v-if="currentItem.hasOwnProperty('size')">{{ currentItem.size }}</td>
<td class="fileItem__cell">
<a17-button class="bucket__action" icon="close" @click="deleteItem()"><span v-svg symbol="close_icon"></span>
</a17-button>
</td>
</tr>
<div>
<tr class="fileItem">
<td v-if="draggable" class="fileItem__cell fileItem__cell--drag">
<div class="drag__handle--drag"></div>
</td>
<td class="fileItem__cell fileItem__cell--extension" v-if="currentItem.hasOwnProperty('extension')">
<a href="#" target="_blank"><span v-svg :symbol="getSvgIconName()"></span></a>
</td>
<td class="fileItem__cell fileItem__cell--name">
<span v-if="currentItem.hasOwnProperty('thumbnail')"><img :src="currentItem.thumbnail"/></span>
<a :href="currentItem.hasOwnProperty('original') ? currentItem.original : '#'" download><span class="f--link-underlined--o">{{ currentItem.name }}</span></a>
<input type="hidden" :name="name" :value="currentItem.id"/>
</td>
<td class=" fileItem__cell fileItem__cell--size" v-if="currentItem.hasOwnProperty('size')">{{ currentItem.size }}</td>
<td class="fileItem__cell">
<a17-button class="bucket__action" icon="close" @click="deleteItem()"><span v-svg symbol="close_icon"></span>
</a17-button>
</td>
</tr>
<tr v-if="showMediaReferences && currentItem.owners.length >= 1" class="fileItem fileReferences">
<td class="fileItem">
<ul class="fileItem_references">
<li class="media__name"><strong>{{ $trans('media-library.sidebar.references', 'References') }}</strong></li>
<li class="f--small" :style="(index)" v-for="(item, index) in currentItem.owners" :key="'fileowner_' + item.id"><a :href="item.edit" target="_blank">{{ item.name }}</a></li>
</ul>
</td>
</tr>
</div>
</template>

<script>
import Extensions from './Extensions'
import { mapState } from 'vuex'
export default {
name: 'a17FileItem',
Expand Down Expand Up @@ -60,7 +71,10 @@
computed: {
currentItem: function () {
return this.item
}
},
...mapState({
showMediaReferences: state => state.mediaLibrary.showMediaReferences
})
},
methods: {
deleteItem: function () {
Expand Down Expand Up @@ -185,4 +199,11 @@
transition: background 250ms ease;
@include dragGrid($color__drag, $color__drag_bg);
}
.fileItem_references {
padding: 5px 15px;
flex-grow: 1;
color: $color__text--light;
overflow: hidden;
}
</style>
10 changes: 9 additions & 1 deletion frontend/js/components/media-library/MediaSidebar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,13 @@
</ul>
</template>

<template v-if="showMediaReferences && hasSingleMedia && firstMedia.owners.length >= 1">
<p v-if="firstMedia.owners.length >= 1" class="mediasidebar__reference_label">{{ $trans('media-library.sidebar.references', 'References') }}</p>
<ul class="mediasidebar__metadatas usage">
<li class="f--small" :style="(index)" v-for="(item, index) in firstMedia.owners" :key="'mediaowner_' + item.id"><a :href="item.edit" target="_blank">{{ item.name }}</a></li>
</ul>
</template>

<a17-buttonbar class="mediasidebar__buttonbar" v-if="hasMedia">
<!-- Actions -->
<a v-if="hasSingleMedia" :href="firstMedia.original" download><span v-svg symbol="download"></span></a>
Expand Down Expand Up @@ -243,7 +250,8 @@
return this.extraMetadatas.filter(m => !m.multiple || (m.multiple && this.translatableMetadatas.includes(m.name)))
},
...mapState({
mediasLoading: state => state.mediaLibrary.loading
mediasLoading: state => state.mediaLibrary.loading,
showMediaReferences: state => state.mediaLibrary.showMediaReferences
})
},
methods: {
Expand Down
7 changes: 6 additions & 1 deletion frontend/js/store/modules/media-library.js
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,12 @@ const state = {
* An index used when mediaLibrary is open to replace a file
* @type {number}
*/
indexToReplace: -1
indexToReplace: -1,
/**
* Displays where an image, file or record is being referenced
* @type {Boolean}
*/
showMediaReferences: window[process.env.VUE_APP_NAME].STORE.medias.showMediaReferences || false
}

// getters
Expand Down
61 changes: 61 additions & 0 deletions src/Models/File.php
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@

use FileService;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Str;
use Illuminate\Database\Eloquent\Relations\Relation;
use A17\Twill\Models\Behaviors\HasSlug;

class File extends Model
{
Expand Down Expand Up @@ -40,11 +43,69 @@ public function toCmsArray()
'original' => FileService::getUrl($this->uuid),
'size' => $this->size,
'filesizeInMb' => number_format($this->attributes['size'] / 1048576, 2),
'owners' => $this->getOwnerDetails(),
];
}

public function getTable()
{
return config('twill.files_table', 'twill_files');
}

public function getOwners()
{
$morphMap = Relation::morphMap();

$owners = collect(
DB::table(config('twill.fileables_table', 'twill_fileables'))
->where('file_id', $this->id)->get()
);

return $owners->map(function ($owner) use ($morphMap){
$resolvedClass = array_key_exists($owner->fileable_type, $morphMap) ? $morphMap[ $owner->fileable_type ] : $owner->fileable_type;

return resolve($resolvedClass)::find($owner->fileable_id);

});
}

public function getOwnerDetails()
{
$owners = $this->getOwners();

return collect(($owners))->filter(function ($value){
return is_object($value);
})->map(function ($item){
$module = Str::plural(lcfirst((new \ReflectionClass($item))->getShortName()));

if ($item instanceof Block){
$model=$item->blockable;

$module = $model ? Str::plural(lcfirst((new \ReflectionClass($model))->getShortName())): null;

return ($model && $module) ? [
'id' => $model->id,
'slug' => classHasTrait($model, HasSlug::class) ? $model->slug : null,
'name' => $model->{$model->titleKey},
'titleKey' => $model->titleKey,
'model'=>$model,
'module'=>$module,
'edit' => moduleRoute($module, config('twill.block_editor.browser_route_prefixes.' . $module), 'edit', $model->id),
] : [];

}

return [
'id' => $item->id,
'slug' => classHasTrait($item, HasSlug::class) ? $item->slug : null,
'name' => $item->{$item->titleKey},
'titleKey' => $item->titleKey,
'model'=>$item,
'module'=>$module,
'edit' => moduleRoute($module, config('twill.block_editor.browser_route_prefixes.' . $module), 'edit', $item->id),
];

})->filter()->values()->toArray();

}
}
60 changes: 60 additions & 0 deletions src/Models/Media.php
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Str;
use ImageService;
use Illuminate\Database\Eloquent\Relations\Relation;
use A17\Twill\Models\Behaviors\HasSlug;

class Media extends Model
{
Expand Down Expand Up @@ -92,6 +94,7 @@ public function toCmsArray()
'video' => null,
],
],
'owners' => $this->getOwnerDetails(),
];
}

Expand Down Expand Up @@ -133,4 +136,61 @@ public function getTable()
{
return config('twill.medias_table', 'twill_medias');
}

public function getOwners()
{
$morphMap = Relation::morphMap();

$owners = collect(
DB::table(config('twill.mediables_table', 'twill_mediables'))
->where('media_id', $this->id)->get()
);

return $owners->map(function ($owner) use ($morphMap){
$resolvedClass = array_key_exists($owner->mediable_type, $morphMap) ? $morphMap[ $owner->mediable_type ] : $owner->mediable_type;

return resolve($resolvedClass)::find($owner->mediable_id);

});
}

public function getOwnerDetails()
{
$owners = $this->getOwners();

return collect(($owners))->filter(function ($value){
return is_object($value);
})->map(function ($item){
$module = Str::plural(lcfirst((new \ReflectionClass($item))->getShortName()));

if ($item instanceof Block){
$model=$item->blockable;

$module = $model ? Str::plural(lcfirst((new \ReflectionClass($model))->getShortName())): null;

return ($model && $module) ? [
'id' => $model->id,
'slug' =>classHasTrait($model, HasSlug::class) ? $model->slug : null,
'name' => $model->{$model->titleKey},
'titleKey' => $model->titleKey,
'model'=>$model,
'module'=>$module,
'edit' => moduleRoute($module, config('twill.block_editor.browser_route_prefixes.' . $module), 'edit', $model->id),
] : [];

}

return [
'id' => $item->id,
'slug' => classHasTrait($item, HasSlug::class) ? $item->slug : null,
'name' => $item->{$item->titleKey},
'titleKey' => $item->titleKey,
'model'=>$item,
'module'=>$module,
'edit' => moduleRoute($module, config('twill.block_editor.browser_route_prefixes.' . $module), 'edit', $item->id),
];

})->filter()->values()->toArray();

}
}
7 changes: 7 additions & 0 deletions src/Models/Model.php
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,13 @@ abstract class Model extends BaseModel implements TaggableInterface

public $timestamps = true;

/**
* Key of the index column to use as title column.
*
* @var string
*/
public $titleKey = 'title';

public function scopePublished($query)
{
return $query->wherePublished(true);
Expand Down
1 change: 1 addition & 0 deletions views/layouts/main.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,7 @@
uploaderConfig: {!! json_encode($mediasUploaderConfig) !!}
});
window['{{ config('twill.js_namespace') }}'].STORE.medias.showFileName = !!'{{ config('twill.media_library.show_file_name') }}';
window['{{ config('twill.js_namespace') }}'].STORE.medias.showMediaReferences = !!'{{ config('twill.media_library.show_media_references') }}';
@endif
@if (config('twill.enabled.file-library'))
Expand Down

0 comments on commit 9c5f48f

Please sign in to comment.