Skip to content

Commit

Permalink
🚧 Inertia media management
Browse files Browse the repository at this point in the history
  • Loading branch information
@juzaweb
juzaweb committed Sep 3, 2023
1 parent 3ea9127 commit 6cbd03a
Show file tree
Hide file tree
Showing 5 changed files with 143 additions and 98 deletions.
2 changes: 1 addition & 1 deletion modules/Backend/Http/Middleware/HandleInertiaRequests.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ function () {
'error' => $request->session()->get('error'),
];
},
'current_theme' => current_theme(),
'currentTheme' => current_theme(),
'user' => $userData,
'langs' => $langs,
'currentLang' => $currentLang,
Expand Down
16 changes: 4 additions & 12 deletions resources/js/layouts/admin.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,10 @@ import React from "react";
import MenuTop from "./components/menu-top";
import MenuLeft from "./components/menu-left";
import {__, admin_url, url} from "../helpers/functions";
import {BaseAdminPageProps} from "../types/config";

export default function Admin({children}: { children: React.ReactNode }) {
const {title, config, adminPrefix, currentPath, breadcrumbItems} = usePage<{
title?: string,
config: { title: string },
adminPrefix: string,
currentPath: string,
breadcrumbItems: Array<{
title: string,
url?: string
}>
}>().props;
const {title, config, adminPrefix, adminUrl, currentPath, breadcrumbItems} = usePage<BaseAdminPageProps>().props;

return (
<>
Expand All @@ -28,14 +20,14 @@ export default function Admin({children}: { children: React.ReactNode }) {

<div className="juzaweb__menuLeft__outer">
<div className="juzaweb__menuLeft__logo__container">
<a href="/admin-cp">
<Link href={adminUrl}>
<div className="juzaweb__menuLeft__logo">
<img src={url('/jw-styles/juzaweb/images/logo.svg')} className="mr-1"
alt="Juzaweb"/>
<div className="juzaweb__menuLeft__logo__name">JuzaWeb</div>
<div className="juzaweb__menuLeft__logo__descr">Cms</div>
</div>
</a>
</Link>
</div>

<div className="juzaweb__menuLeft__scroll jw__customScroll">
Expand Down
161 changes: 76 additions & 85 deletions resources/js/pages/media/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,15 @@
import Admin from "../../layouts/admin";
import '../../../assets/css/media-ineria.css';
import {__} from "../../helpers/functions";
import {Link} from "@inertiajs/react";
import {MediaFile, MediaFolder} from "../../types/media";

export interface MediaFilesProps {
data: Array<MediaFile>
}

export default function Index({mediaFolders, mediaFiles}: {mediaFolders: Array<MediaFolder>, mediaFiles: MediaFilesProps}) {

export default function Index() {
return (
<Admin>
<div className="container-m-nx container-m-ny bg-lightest mb-3">
Expand Down Expand Up @@ -54,101 +62,64 @@ export default function Index() {
</a>
</div>

<div className="file-item">
<div className="file-item-select-bg bg-primary"></div>
<label className="file-item-checkbox custom-control custom-checkbox">
<input type="checkbox" className="custom-control-input" />
<span className="custom-control-label"></span>
</label>
<div className="file-item-icon fa fa-folder text-secondary"></div>
<a href="#" className="file-item-name">
Images
</a>
<div className="file-item-changed">02/13/2018</div>
<div className="file-item-actions btn-group">
<button type="button" className="btn btn-default btn-sm rounded-pill icon-btn borderless md-btn-flat hide-arrow dropdown-toggle" data-toggle="dropdown"><i className="ion ion-ios-more"></i></button>
<div className="dropdown-menu dropdown-menu-right">
<a className="dropdown-item" href="#">Rename</a>
<a className="dropdown-item" href="#">Move</a>
<a className="dropdown-item" href="#">Copy</a>
<a className="dropdown-item" href="#">Remove</a>
</div>
</div>
</div>
{mediaFolders.map((folder) => (
<div className="file-item">
<div className="file-item-select-bg bg-primary"></div>

<div className="file-item">
<div className="file-item-select-bg bg-primary"></div>
<label className="file-item-checkbox custom-control custom-checkbox">
<input type="checkbox" className="custom-control-input" />
<span className="custom-control-label"></span>
</label>
<div className="file-item-icon fa fa-folder text-secondary"></div>
<a href="#" className="file-item-name">
Scripts
</a>
<div className="file-item-changed">02/14/2018</div>
<div className="file-item-actions btn-group">
<button type="button" className="btn btn-default btn-sm rounded-pill icon-btn borderless md-btn-flat hide-arrow dropdown-toggle" data-toggle="dropdown"><i className="ion ion-ios-more"></i></button>
<div className="dropdown-menu dropdown-menu-right">
<a className="dropdown-item" href="#">Rename</a>
<a className="dropdown-item" href="#">Move</a>
<a className="dropdown-item" href="#">Copy</a>
<a className="dropdown-item" href="#">Remove</a>
</div>
</div>
</div>
<label className="file-item-checkbox custom-control custom-checkbox">
<input type="checkbox" className="custom-control-input" />
<span className="custom-control-label"></span>
</label>

<div className="file-item">
<div className="file-item-select-bg bg-primary"></div>
<label className="file-item-checkbox custom-control custom-checkbox">
<input type="checkbox" className="custom-control-input" />
<span className="custom-control-label"></span>
</label>
<div className="file-item-icon fa fa-folder text-secondary"></div>
<a href="#" className="file-item-name">
Utils
</a>
<div className="file-item-changed">02/15/2018</div>
<div className="file-item-actions btn-group">
<button type="button" className="btn btn-default btn-sm rounded-pill icon-btn borderless md-btn-flat hide-arrow dropdown-toggle" data-toggle="dropdown"><i className="ion ion-ios-more"></i></button>
<div className="dropdown-menu dropdown-menu-right">
<a className="dropdown-item" href="#">Rename</a>
<a className="dropdown-item" href="#">Move</a>
<a className="dropdown-item" href="#">Copy</a>
<a className="dropdown-item" href="#">Remove</a>
<div className="file-item-icon fa fa-folder text-secondary"></div>
<Link href="#" className="file-item-name">
{folder.name}
</Link>
<div className="file-item-changed">02/13/2018</div>
<div className="file-item-actions btn-group">
<button type="button" className="btn btn-default btn-sm rounded-pill icon-btn borderless md-btn-flat hide-arrow dropdown-toggle" data-toggle="dropdown"><i className="ion ion-ios-more"></i></button>
<div className="dropdown-menu dropdown-menu-right">
<a className="dropdown-item" href="#">Rename</a>
<a className="dropdown-item" href="#">Move</a>
<a className="dropdown-item" href="#">Copy</a>
<a className="dropdown-item" href="#">Remove</a>
</div>
</div>
</div>
</div>
))}

<div className="file-item">
<div className="file-item-select-bg bg-primary"></div>
<label className="file-item-checkbox custom-control custom-checkbox">
<input type="checkbox" className="custom-control-input" />
<span className="custom-control-label"></span>
</label>
<div className="file-item-icon fa fa-file-archive text-secondary"></div>
<a href="#" className="file-item-name">
Archive.zip
</a>
<div className="file-item-changed">02/16/2018</div>
<div className="file-item-actions btn-group">
<button type="button" className="btn btn-default btn-sm rounded-pill icon-btn borderless md-btn-flat hide-arrow dropdown-toggle" data-toggle="dropdown"><i className="ion ion-ios-more"></i></button>
<div className="dropdown-menu dropdown-menu-right">
<a className="dropdown-item" href="#">Rename</a>
<a className="dropdown-item" href="#">Move</a>
<a className="dropdown-item" href="#">Copy</a>
<a className="dropdown-item" href="#">Remove</a>
{mediaFiles.data.map((file) => (
<div className="file-item">
<div className="file-item-select-bg bg-primary"></div>
<label className="file-item-checkbox custom-control custom-checkbox">
<input type="checkbox" className="custom-control-input" />
<span className="custom-control-label"></span>
</label>
<div className="file-item-icon fa fa-file-archive text-secondary"></div>
<a href="#" className="file-item-name">
{file.name}
</a>
<div className="file-item-changed">02/16/2018</div>
<div className="file-item-actions btn-group">
<button type="button" className="btn btn-default btn-sm rounded-pill icon-btn borderless md-btn-flat hide-arrow dropdown-toggle" data-toggle="dropdown"><i className="ion ion-ios-more"></i></button>
<div className="dropdown-menu dropdown-menu-right">
<a className="dropdown-item" href="#">Rename</a>
<a className="dropdown-item" href="#">Move</a>
<a className="dropdown-item" href="#">Copy</a>
<a className="dropdown-item" href="#">Remove</a>
</div>
</div>
</div>
</div>
))}


<div className="file-item">
<div className="file-item-select-bg bg-primary"></div>
<label className="file-item-checkbox custom-control custom-checkbox">
<input type="checkbox" className="custom-control-input" />
<span className="custom-control-label"></span>
</label>
<div className="file-item-icon fab fa-js text-secondary"></div>
<div className="file-item-icon fa fa-js text-secondary"></div>
<a href="#" className="file-item-name">
Build.js
</a>
Expand Down Expand Up @@ -192,7 +163,7 @@ export default function Index() {
<input type="checkbox" className="custom-control-input" />
<span className="custom-control-label"></span>
</label>
<div className="file-item-icon fab fa-html5 text-secondary"></div>
<div className="file-item-icon fa fa-html5 text-secondary"></div>
<a href="#" className="file-item-name">
Index.html
</a>
Expand Down Expand Up @@ -281,7 +252,7 @@ export default function Index() {
<input type="checkbox" className="custom-control-input" />
<span className="custom-control-label"></span>
</label>
<div className="file-item-icon fab fa-js text-secondary"></div>
<div className="file-item-icon fa fa-js text-secondary"></div>
<a href="#" className="file-item-name">
Main.js
</a>
Expand Down Expand Up @@ -369,7 +340,7 @@ export default function Index() {
<input type="checkbox" className="custom-control-input" />
<span className="custom-control-label"></span>
</label>
<div className="file-item-icon fab fa-css3 text-secondary"></div>
<div className="file-item-icon fa fa-css3 text-secondary"></div>
<a href="#" className="file-item-name">
Style.css
</a>
Expand Down Expand Up @@ -429,6 +400,26 @@ export default function Index() {
</div>
</div>
</div>

<div className="modal fade" id="upload-modal" tabIndex={-1} role="dialog" aria-labelledby="upload-modal-label" aria-hidden="true">
<div className="modal-dialog" role="document">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title" id="upload-modal-label">{__('cms::app.upload')}</h5>
<button type="button" className="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div className="modal-body">
...
</div>
<div className="modal-footer">
<button type="button" className="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" className="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</Admin>
);
}
35 changes: 35 additions & 0 deletions resources/js/types/config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,41 @@ export interface Config {
logo: string
}

export interface BaseAdminPageProps extends Page<PageProps> {
[key: string]: unknown;
props: {
errors: Errors & ErrorBag,
flash: {
success?: string,
error?: string,
},
currentTheme: string,
user: {
id: number,
name: string,
email: string,
avatar: string,
},
langs: any,
currentLang: string,
trans: any,
adminUrl: string,
adminPrefix: string,
totalNotifications: number,
leftMenuItems: MenuItem[],
currentUrl: string,
currentPath: string,
config: {
title: string,
description: string,
},
breadcrumbItems: Array<{
title: string,
url?: string
}>
}
}

export interface BasePageProps extends Page<PageProps> {
[key: string]: unknown;
props: {
Expand Down
27 changes: 27 additions & 0 deletions resources/js/types/media.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
export interface MediaFile {
id: number;
name: string;
path: string;
extension: string;
mime_type: string;
user_id: number;
folder_id: number;
type: string;
size: number;
disk: string;
metadata: any;
}

export interface MediaFolder {
id: number;
name: string;
path: string;
extension: string;
mime_type: string;
user_id: number;
folder_id: number;
type: string;
size: number;
disk: string;
metadata: any;
}

0 comments on commit 6cbd03a

Please sign in to comment.