Skip to content

Improvement/logs frontend #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
abhishekctv merged 5 commits into from
Feb 16, 2023
Merged

Improvement/logs frontend #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d324715
fixed pagination issues
durgatechvar Feb 16, 2023
761e526
fixed issues in permissions page
durgatechvar Feb 16, 2023
89093d2
query type added in logs table
durgatechvar Feb 16, 2023
dc79296
minor fix
durgatechvar Feb 16, 2023
1039dcb
fix-limited sort to only one field at a time
durgatechvar Feb 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/components/add-role/add-role.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ export class AddRole {
roleName: this.value,
permissions:"{\n \"editor\":{\n \"read\":true,\n \"write\":true,\n \"update\":true,\n \"delete\":true \n }\n}",
});
await this.refresh();

Swal.fire({
position: 'center',
Expand All @@ -34,7 +35,6 @@ export class AddRole {

this.value = '';
this.toggleModalState();
this.refresh();
} catch (error) {
Swal.fire({
icon: 'error',
Expand Down Expand Up @@ -82,15 +82,15 @@ export class AddRole {
</div>
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
Send Invitation
Add New Role
</h3>
<div class="mt-2">
<p class="text-sm text-gray-500 mb-4">Are you sure you want to create new role? Enter role name.</p>
<input
type="name"
name="name"
required
placeholder="admin"
placeholder="Role Name"
class="border w-full px-4 py-2 rounded-md text-sm"
value={this.value}
onInput={event => this.handleChange(event)}
Expand Down
1 change: 0 additions & 1 deletion src/components/editor-page/editor-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,6 @@ export class EditorPage {
query,
parameters: JSON.parse(parameters),
});

state.query = query;
state.queryParameter = parameters;
state.nodes = res.data.result;
Expand Down
4 changes: 2 additions & 2 deletions src/components/editor-res-updated/editor-res-updated.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,8 @@ export class TableWrapperUpdated {
}

toggleSortMethod = (id: string) => {
const chips = { ...state.order };
chips[id] = chips[id] === "desc" ? 'asc' : 'desc';
const chips = {};
chips[id] = state.order[id] === "desc" ? 'asc' : 'desc';
state.order = chips;
};

Expand Down
249 changes: 120 additions & 129 deletions src/components/logs-table/logs-table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,11 +41,6 @@ export class LogsTable {
componentWillRender() {
this.from = (this.currentPage - 1) * this.limit + 1;
this.to = this.currentPage * this.limit;
{
this.tableHeader.map((id: any) => {
console.log(id.click.clickable);
});
}
}

render() {
Expand All @@ -59,136 +54,132 @@ export class LogsTable {
}

return (
<div style={{ overflowY:"auto" }} >
<div style={{height:"580px", overflow:"auto" }}>
<table class="table-auto h-full min-w-full divide-y divide-gray-200 relative">
{/* Table Head */}
<thead class="bg-violet-50 sticky top-0">
<tr>
{this.tableHeader.map((item: any) => (
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 hover:text-indigo-700 uppercase tracking-wider">
{item.title}

{item?.filter?.sortable && (
<button class="ml-3" onClick={() => this.toggleSortMethod(item.title)}>
{sort}
</button>
)}

{item?.filter?.searchable && (
<drop-down searchMethod={(value, field) => this.searchMethod(value, field)} alias={item.alias} clearSearch={colName => this.clearSearch(colName)}>
{search}
</drop-down>
)}
</th>
))}
{this.isLoading && <th class="text-gray-500 ">&nbsp;</th>}
</tr>
</thead>

{/* loading screen */}
{this.isLoading && (
<tbody>
<tr>
<td colSpan={this.tableHeader.length} rowSpan={10} class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
<loader-component></loader-component>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">&nbsp;</td>
</tr>

{trList}
</tbody>
)}
<div style={{ overflowY: 'auto' }}>
<div style={{ maxWidth: '72.5rem', maxHeight: '580px', overflow: 'auto' }}>
<table class="table-auto h-full min-w-full divide-y divide-gray-200 relative">
{/* Table Head */}
<thead class="bg-violet-50 sticky top-0">
<tr>
{this.tableHeader.map((item: any) => (
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 hover:text-indigo-700 uppercase tracking-wider">
{item.title}

{item?.filter?.sortable && (
<button class="ml-3" onClick={() => this.toggleSortMethod(item.title)}>
{sort}
</button>
)}

<tbody class="bg-white divide-y divide-gray-200">
{/* loaded body */}
{this.tableBody &&
!this.isLoading &&
!this.isLoadingError &&
this.tableBody.map((item: any) => (
<tr class="hover:bg-gray-100 transition">
{this.tableHeader.map((id: any) => (
// <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{item[id.alias]}</td>
<td text-overflow:ellipsis max-width="50px" class="px-6 py-3 whitespace-nowrap text-sm text-gray-900">
{!id.click.clickable ? (
item[id.alias].length > 25 ? (
item[id.alias].slice(0, 25) + '...'
) : /\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/.test(item[id.alias]) ? (
item[id.alias].slice(0, 16).split('T')[0] + ' at ' + item[id.alias].slice(11, 19)
) : (
item[id.alias]
)
) : (
<a target="_blank" href={id.click.url + item[id.alias]} class="flex items-center py-1 px-4 text-base font-normal text-gray-900 rounded-lg bg-gray-200">
<img class="h-4" src={id.click.icon} alt="icon" />
<span class="px-2 ">View</span>
</a>
{item?.filter?.searchable && (
<drop-down searchMethod={(value, field) => this.searchMethod(value, field)} alias={item.alias} clearSearch={colName => this.clearSearch(colName)}>
{search}
</drop-down>
)}
</td>
</th>
))}
{this.isLoading && <th class="text-gray-500 ">&nbsp;</th>}
</tr>
))}
</tbody>

{/* error screen */}
{!this.isLoading && this.isLoadingError && (
<tbody>
<tr>
<td colSpan={this.tableHeader.length} rowSpan={10} class="px-6 py-4 whitespace-nowrap text-sm text-center text-gray-900">
<p>Error Found</p>
<plain-button type="text">retry</plain-button>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">&nbsp;</td>
</tr>
{trList}
</tbody>
)}

{/* Table Footer */}
<tfoot class="bg-violet-50 w-full sticky bottom-0">
<tr>
<td colSpan={this.tableHeader.length} class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
<div class="flex justify-between items-center">
{/* pagination description */}
<p>
Showing <strong>{this.from}</strong> to <strong>{this.to}</strong> of <strong>{this.dataLength}</strong> results
</p>

{/* rows per page */}
<div class="space-x-3">
<span>Rows per page</span>
<select
onChange={e => this.rowsHandler(e)}
class="form-select px-3 py-1.5 border-none text-inherit font-inherit text-gray-700 bg-transparent bg-clip-padding bg-no-repeat rounded transition ease-in-out focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
>
{this.rows.map(row => (
<option value={`${row}`}>{row}</option>
</thead>

{/* loading screen */}
{this.isLoading && (
<tbody>
<tr>
<td colSpan={this.tableHeader.length} rowSpan={10} class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
<loader-component></loader-component>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">&nbsp;</td>
</tr>

{trList}
</tbody>
)}

<tbody class="bg-white divide-y divide-gray-200">
{/* loaded body */}
{this.tableBody &&
!this.isLoading &&
!this.isLoadingError &&
this.tableBody.map((item: any) => (
<tr class="hover:bg-gray-100 transition">
{this.tableHeader.map((id: any) => (
// <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{item[id.alias]}</td>
<td text-overflow:ellipsis title={item[id.alias]} max-width="50px" class="px-6 py-3 whitespace-nowrap text-sm text-gray-900">
{!id.click.clickable ? (
item[id.alias].length > 25 ? (
item[id.alias].slice(0, 25) + '...'
) : /\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/.test(item[id.alias]) ? (
item[id.alias].slice(0, 16).split('T')[0] + ' at ' + item[id.alias].slice(11, 19)
) : (
item[id.alias]
)
) : (
<a target="_blank" href={id.click.url + item[id.alias]} class="flex items-center py-1 px-4 text-base font-normal text-gray-900 rounded-lg bg-gray-200">
<img class="h-4" src={id.click.icon} alt="icon" />
<span class="px-2 ">View</span>
</a>
)}
</td>
))}
</select>
</tr>
))}
</tbody>

{/* error screen */}
{!this.isLoading && this.isLoadingError && (
<tbody>
<tr>
<td colSpan={this.tableHeader.length} rowSpan={10} class="px-6 py-4 whitespace-nowrap text-sm text-center text-gray-900">
<p>Error Found</p>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">&nbsp;</td>
</tr>
{trList}
</tbody>
)}
</table>
</div>
<div style={{maxWidth: '72.5rem'}} class="bg-violet-50 sticky bottom-0">
<div class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
<div class="flex justify-between items-center">
{/* pagination description */}
<p>
Showing <strong>{this.from}</strong> to <strong>{this.to <= Number(this.dataLength) ? this.to : this.dataLength}</strong> of{' '}
<strong>{this.dataLength}</strong> results
</p>

{/* rows per page */}
<div class="space-x-3">
<span>Rows per page</span>
<select
onChange={e => this.rowsHandler(e)}
class="form-select px-3 py-1.5 border-none text-inherit font-inherit text-gray-700 bg-transparent bg-clip-padding bg-no-repeat rounded transition ease-in-out focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
>
{this.rows.map(row => (
<option value={`${row}`}>{row}</option>
))}
</select>
</div>

{/* pagination navigation menu */}
<nav class="flex gap-4 items-center">
<plain-button color="gray-500" type="text" clickHandler={() => this.prev()} disabledHandler={this.currentPage === 1} addClass="disabled:opacity-50">
prev
</plain-button>
<plain-button
color="gray-500"
type="text"
clickHandler={() => this.next()}
disabledHandler={parseInt(this.dataLength) <= this.to}
addClass="disabled:opacity-50"
>
next
</plain-button>
</nav>
</div>
</div>

{/* pagination navigation menu */}
<nav class="flex gap-4 items-center">
<plain-button color="gray-500" type="text" clickHandler={() => this.prev()} disabledHandler={this.currentPage === 1} addClass="disabled:opacity-50">
prev
</plain-button>
<plain-button
color="gray-500"
type="text"
clickHandler={() => this.next()}
disabledHandler={parseInt(this.dataLength) === this.to}
addClass="disabled:opacity-50"
>
next
</plain-button>
</nav>
</div>
</td>
{this.isLoading && <td class="text-gray-500">&nbsp;</td>}
</tr>
</tfoot>
</table>
</div>
{this.isLoading && <td class="text-gray-500">&nbsp;</td>}
</div>
</div>
);
}
Expand Down
26 changes: 12 additions & 14 deletions src/components/permission-editor/permission-editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,6 @@ export class PermissionEditor {
async fetchRoles() {
try {
const rolesRes = await axios.get(this.rolesurl);
if (rolesRes.status !== 200) throw Error('Failed to fetch roles');

const roles = rolesRes.data;
this.roleOptions = roles;
await this.fetchRolePermission(roles[0].id);
Expand All @@ -82,12 +80,13 @@ export class PermissionEditor {
});
this.view = new EditorView({
state: this.state,
parent: this.element.querySelector('#editor'),
parent: this.element.querySelector('#permissionEditor'),
});
}

onRoleUpdateClick() {
this.errorMessage = '';
this.resStatus = '';
let transaction = this.view.state.update();
this.view.dispatch(transaction);
const { isValid, error } = isValidPermissionJson(String(transaction.state.doc));
Expand Down Expand Up @@ -147,9 +146,9 @@ export class PermissionEditor {
))}
</select>
</div>
<add-role refresh={() => this.fetchRoles} url="http://localhost:3000/api/permissions"></add-role>
<add-role refresh={() => this.fetchRoles()} url="http://localhost:3000/api/permissions"></add-role>
</div>
<div id="editor" class="border border-gray-300"></div>
<div id="permissionEditor" class="border border-gray-300"></div>

{this.errorMessage !== '' ? <p class="px-3 py-2 bg-red-200 text-red-800 border-l-4 border-red-600 w-full -mt-4 mb-6">{this.errorMessage}</p> : null}
{this.errorMessage === '' && this.resStatus !== '' && (
Expand All @@ -160,17 +159,16 @@ export class PermissionEditor {

<div class="flex justify-between">
<div>
<button
title="Ctrl+Shift+Enter to run"
onClick={() => this.onRoleUpdateClick()}
disabled={this.isLoading}
class="mr-1 flex text-sm gap-2 items-center justify-between text-gray-600 border border-gray-300 px-3 py-2 hover:bg-gray-200 hover:text-gray-800 "
>
Update
</button>
<button
title="Ctrl+Shift+Enter to run"
onClick={() => this.onRoleUpdateClick()}
disabled={this.isLoading}
class="mr-1 flex text-sm gap-2 items-center justify-between text-gray-600 border border-gray-300 px-3 py-2 hover:bg-gray-200 hover:text-gray-800 "
>
Update
</button>
</div>
<div class="mx-4">{this.isLoading && <loader-component></loader-component>}</div>
<div></div>
</div>
</div>
</Host>
Expand Down
Loading