List files in a file area

app/Models/Filearea.php

@@ -31,4 +31,9 @@ class Filearea extends Model
 	{
 		return $this->belongsTo(Domain::class);
 	}
+
+	public function files()
+	{
+		return $this->hasMany(File::class);
+	}
 }

resources/views/domain/view.blade.php

@@ -109,7 +109,7 @@
 									<tbody>
 									@foreach ($o->filearea_stats()->groupBy('id') as $oo)
 										<tr>
-											<td style="width: 10%;"><a href="{{ url('echoarea/addedit',[($x=$oo->first())->id]) }}">{{ $x->name }}</a></td>
+											<td style="width: 10%;"><a href="{{ url('filearea/addedit',[($x=$oo->first())->id]) }}">{{ $x->name }}</a></td>
 											<td>{{ $x->description }}</td>
 											<td>{{ ($xx=$oo->min('first_file')) ? $xx->format('Y-m-d H:i') : '-' }}</td>
 											<td>{{ $x->last_file ? $x->last_file->format('Y-m-d H:i') : '-' }}</td>

resources/views/filearea/addedit.blade.php

@@ -150,5 +150,61 @@
 				</div>
 			</div>
 		</div>
+
+		<div class="row">
+			<div class="col-12">
+				@if ($o->files->count())
+					<table class="table monotable" id="files">
+						<thead>
+						<tr>
+							<th>ID</th>
+							<th>File</th>
+							<th>Size</th>
+							<th>Hatched</th>
+							<th>Description</th>
+						</tr>
+						</thead>
+
+						<tbody>
+						@foreach ($o->files as $oo)
+							<tr>
+								<td><a href="{{ url('file/view',[$oo->id]) }}">{{ $oo->id }}</a></td>
+								<td>{{ $oo->name }}</td>
+								<td class="text-end">{{ number_format($oo->size) }}</td>
+								<td>{{ $oo->datetime->format('Y-m-d H:i:s') }}</td>
+								<td><small>{{ $oo->desc }}</small></td>
+							</tr>
+						@endforeach
+						</tbody>
+					</table>
+				@else
+					<p>No files yet in this area.</p>
+				@endif
+			</div>
+		</div>
 	</form>
-@endsection
+@endsection
+
+@section('page-css')
+	@css('datatables')
+@append
+
+@section('page-scripts')
+	@js('datatables')
+
+	<script type="text/javascript">
+		$(document).ready(function() {
+			$('#files').DataTable({
+				paging: true,
+				pageLength: 25,
+				searching: true,
+				ordering: true,
+				order: [1,'asc'],
+				conditionalPaging: {
+					style: 'fade',
+					speed: 500 // optional
+				},
+			});
+		});
+	</script>
+@append