Skip to content

Commit 2d7d04b

Browse files
abhishekctvabhishekctv
authored
Merge pull request #11 from SwapnilTechVariable/improvement/logs-frontend
Improvement/logs frontend
2 parents 8084c92 + 1039dcb commit 2d7d04b

File tree

8 files changed

+166
-158
lines changed

8 files changed

+166
-158
lines changed

‎src/components/add-role/add-role.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ export class AddRole {
2323
roleName: this.value,
2424
permissions:"{\n \"editor\":{\n \"read\":true,\n \"write\":true,\n \"update\":true,\n \"delete\":true \n }\n}",
2525
});
26+
await this.refresh();
2627

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

3536
this.value = '';
3637
this.toggleModalState();
37-
this.refresh();
3838
} catch (error) {
3939
Swal.fire({
4040
icon: 'error',
@@ -82,15 +82,15 @@ export class AddRole {
8282
</div>
8383
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
8484
<h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
85-
Send Invitation
85+
Add New Role
8686
</h3>
8787
<div class="mt-2">
8888
<p class="text-sm text-gray-500 mb-4">Are you sure you want to create new role? Enter role name.</p>
8989
<input
9090
type="name"
9191
name="name"
9292
required
93-
placeholder="admin"
93+
placeholder="Role Name"
9494
class="border w-full px-4 py-2 rounded-md text-sm"
9595
value={this.value}
9696
onInput={event => this.handleChange(event)}

‎src/components/editor-page/editor-page.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,6 @@ export class EditorPage {
6060
query,
6161
parameters: JSON.parse(parameters),
6262
});
63-
6463
state.query = query;
6564
state.queryParameter = parameters;
6665
state.nodes = res.data.result;

‎src/components/editor-res-updated/editor-res-updated.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,8 @@ export class TableWrapperUpdated {
5151
}
5252

5353
toggleSortMethod = (id: string) => {
54-
const chips = { ...state.order };
55-
chips[id] = chips[id] === "desc" ? 'asc' : 'desc';
54+
const chips = {};
55+
chips[id] = state.order[id] === "desc" ? 'asc' : 'desc';
5656
state.order = chips;
5757
};
5858

‎src/components/logs-table/logs-table.tsx‎

Lines changed: 120 additions & 129 deletions
Original file line numberDiff line numberDiff line change
@@ -41,11 +41,6 @@ export class LogsTable {
4141
componentWillRender() {
4242
this.from = (this.currentPage - 1) * this.limit + 1;
4343
this.to = this.currentPage * this.limit;
44-
{
45-
this.tableHeader.map((id: any) => {
46-
console.log(id.click.clickable);
47-
});
48-
}
4944
}
5045

5146
render() {
@@ -59,136 +54,132 @@ export class LogsTable {
5954
}
6055

6156
return (
62-
<div style={{ overflowY:"auto" }} >
63-
<div style={{height:"580px", overflow:"auto" }}>
64-
<table class="table-auto h-full min-w-full divide-y divide-gray-200 relative">
65-
{/* Table Head */}
66-
<thead class="bg-violet-50 sticky top-0">
67-
<tr>
68-
{this.tableHeader.map((item: any) => (
69-
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 hover:text-indigo-700 uppercase tracking-wider">
70-
{item.title}
71-
72-
{item?.filter?.sortable && (
73-
<button class="ml-3" onClick={() => this.toggleSortMethod(item.title)}>
74-
{sort}
75-
</button>
76-
)}
77-
78-
{item?.filter?.searchable && (
79-
<drop-down searchMethod={(value, field) => this.searchMethod(value, field)} alias={item.alias} clearSearch={colName => this.clearSearch(colName)}>
80-
{search}
81-
</drop-down>
82-
)}
83-
</th>
84-
))}
85-
{this.isLoading && <th class="text-gray-500 ">&nbsp;</th>}
86-
</tr>
87-
</thead>
88-
89-
{/* loading screen */}
90-
{this.isLoading && (
91-
<tbody>
92-
<tr>
93-
<td colSpan={this.tableHeader.length} rowSpan={10} class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
94-
<loader-component></loader-component>
95-
</td>
96-
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">&nbsp;</td>
97-
</tr>
98-
99-
{trList}
100-
</tbody>
101-
)}
57+
<div style={{ overflowY: 'auto' }}>
58+
<div style={{ maxWidth: '72.5rem', maxHeight: '580px', overflow: 'auto' }}>
59+
<table class="table-auto h-full min-w-full divide-y divide-gray-200 relative">
60+
{/* Table Head */}
61+
<thead class="bg-violet-50 sticky top-0">
62+
<tr>
63+
{this.tableHeader.map((item: any) => (
64+
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 hover:text-indigo-700 uppercase tracking-wider">
65+
{item.title}
66+
67+
{item?.filter?.sortable && (
68+
<button class="ml-3" onClick={() => this.toggleSortMethod(item.title)}>
69+
{sort}
70+
</button>
71+
)}
10272

103-
<tbody class="bg-white divide-y divide-gray-200">
104-
{/* loaded body */}
105-
{this.tableBody &&
106-
!this.isLoading &&
107-
!this.isLoadingError &&
108-
this.tableBody.map((item: any) => (
109-
<tr class="hover:bg-gray-100 transition">
110-
{this.tableHeader.map((id: any) => (
111-
// <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{item[id.alias]}</td>
112-
<td text-overflow:ellipsis max-width="50px" class="px-6 py-3 whitespace-nowrap text-sm text-gray-900">
113-
{!id.click.clickable ? (
114-
item[id.alias].length > 25 ? (
115-
item[id.alias].slice(0, 25) + '...'
116-
) : /\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/.test(item[id.alias]) ? (
117-
item[id.alias].slice(0, 16).split('T')[0] + ' at ' + item[id.alias].slice(11, 19)
118-
) : (
119-
item[id.alias]
120-
)
121-
) : (
122-
<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">
123-
<img class="h-4" src={id.click.icon} alt="icon" />
124-
<span class="px-2 ">View</span>
125-
</a>
73+
{item?.filter?.searchable && (
74+
<drop-down searchMethod={(value, field) => this.searchMethod(value, field)} alias={item.alias} clearSearch={colName => this.clearSearch(colName)}>
75+
{search}
76+
</drop-down>
12677
)}
127-
</td>
78+
</th>
12879
))}
80+
{this.isLoading && <th class="text-gray-500 ">&nbsp;</th>}
12981
</tr>
130-
))}
131-
</tbody>
132-
133-
{/* error screen */}
134-
{!this.isLoading && this.isLoadingError && (
135-
<tbody>
136-
<tr>
137-
<td colSpan={this.tableHeader.length} rowSpan={10} class="px-6 py-4 whitespace-nowrap text-sm text-center text-gray-900">
138-
<p>Error Found</p>
139-
<plain-button type="text">retry</plain-button>
140-
</td>
141-
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">&nbsp;</td>
142-
</tr>
143-
{trList}
144-
</tbody>
145-
)}
146-
147-
{/* Table Footer */}
148-
<tfoot class="bg-violet-50 w-full sticky bottom-0">
149-
<tr>
150-
<td colSpan={this.tableHeader.length} class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
151-
<div class="flex justify-between items-center">
152-
{/* pagination description */}
153-
<p>
154-
Showing <strong>{this.from}</strong> to <strong>{this.to}</strong> of <strong>{this.dataLength}</strong> results
155-
</p>
156-
157-
{/* rows per page */}
158-
<div class="space-x-3">
159-
<span>Rows per page</span>
160-
<select
161-
onChange={e => this.rowsHandler(e)}
162-
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"
163-
>
164-
{this.rows.map(row => (
165-
<option value={`${row}`}>{row}</option>
82+
</thead>
83+
84+
{/* loading screen */}
85+
{this.isLoading && (
86+
<tbody>
87+
<tr>
88+
<td colSpan={this.tableHeader.length} rowSpan={10} class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
89+
<loader-component></loader-component>
90+
</td>
91+
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">&nbsp;</td>
92+
</tr>
93+
94+
{trList}
95+
</tbody>
96+
)}
97+
98+
<tbody class="bg-white divide-y divide-gray-200">
99+
{/* loaded body */}
100+
{this.tableBody &&
101+
!this.isLoading &&
102+
!this.isLoadingError &&
103+
this.tableBody.map((item: any) => (
104+
<tr class="hover:bg-gray-100 transition">
105+
{this.tableHeader.map((id: any) => (
106+
// <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{item[id.alias]}</td>
107+
<td text-overflow:ellipsis title={item[id.alias]} max-width="50px" class="px-6 py-3 whitespace-nowrap text-sm text-gray-900">
108+
{!id.click.clickable ? (
109+
item[id.alias].length > 25 ? (
110+
item[id.alias].slice(0, 25) + '...'
111+
) : /\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/.test(item[id.alias]) ? (
112+
item[id.alias].slice(0, 16).split('T')[0] + ' at ' + item[id.alias].slice(11, 19)
113+
) : (
114+
item[id.alias]
115+
)
116+
) : (
117+
<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">
118+
<img class="h-4" src={id.click.icon} alt="icon" />
119+
<span class="px-2 ">View</span>
120+
</a>
121+
)}
122+
</td>
166123
))}
167-
</select>
124+
</tr>
125+
))}
126+
</tbody>
127+
128+
{/* error screen */}
129+
{!this.isLoading && this.isLoadingError && (
130+
<tbody>
131+
<tr>
132+
<td colSpan={this.tableHeader.length} rowSpan={10} class="px-6 py-4 whitespace-nowrap text-sm text-center text-gray-900">
133+
<p>Error Found</p>
134+
</td>
135+
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">&nbsp;</td>
136+
</tr>
137+
{trList}
138+
</tbody>
139+
)}
140+
</table>
141+
</div>
142+
<div style={{maxWidth: '72.5rem'}} class="bg-violet-50 sticky bottom-0">
143+
<div class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
144+
<div class="flex justify-between items-center">
145+
{/* pagination description */}
146+
<p>
147+
Showing <strong>{this.from}</strong> to <strong>{this.to <= Number(this.dataLength) ? this.to : this.dataLength}</strong> of{' '}
148+
<strong>{this.dataLength}</strong> results
149+
</p>
150+
151+
{/* rows per page */}
152+
<div class="space-x-3">
153+
<span>Rows per page</span>
154+
<select
155+
onChange={e => this.rowsHandler(e)}
156+
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"
157+
>
158+
{this.rows.map(row => (
159+
<option value={`${row}`}>{row}</option>
160+
))}
161+
</select>
162+
</div>
163+
164+
{/* pagination navigation menu */}
165+
<nav class="flex gap-4 items-center">
166+
<plain-button color="gray-500" type="text" clickHandler={() => this.prev()} disabledHandler={this.currentPage === 1} addClass="disabled:opacity-50">
167+
prev
168+
</plain-button>
169+
<plain-button
170+
color="gray-500"
171+
type="text"
172+
clickHandler={() => this.next()}
173+
disabledHandler={parseInt(this.dataLength) <= this.to}
174+
addClass="disabled:opacity-50"
175+
>
176+
next
177+
</plain-button>
178+
</nav>
179+
</div>
168180
</div>
169-
170-
{/* pagination navigation menu */}
171-
<nav class="flex gap-4 items-center">
172-
<plain-button color="gray-500" type="text" clickHandler={() => this.prev()} disabledHandler={this.currentPage === 1} addClass="disabled:opacity-50">
173-
prev
174-
</plain-button>
175-
<plain-button
176-
color="gray-500"
177-
type="text"
178-
clickHandler={() => this.next()}
179-
disabledHandler={parseInt(this.dataLength) === this.to}
180-
addClass="disabled:opacity-50"
181-
>
182-
next
183-
</plain-button>
184-
</nav>
185-
</div>
186-
</td>
187-
{this.isLoading && <td class="text-gray-500">&nbsp;</td>}
188-
</tr>
189-
</tfoot>
190-
</table>
191-
</div>
181+
{this.isLoading && <td class="text-gray-500">&nbsp;</td>}
182+
</div>
192183
</div>
193184
);
194185
}

‎src/components/permission-editor/permission-editor.tsx‎

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -55,8 +55,6 @@ export class PermissionEditor {
5555
async fetchRoles() {
5656
try {
5757
const rolesRes = await axios.get(this.rolesurl);
58-
if (rolesRes.status !== 200) throw Error('Failed to fetch roles');
59-
6058
const roles = rolesRes.data;
6159
this.roleOptions = roles;
6260
await this.fetchRolePermission(roles[0].id);
@@ -82,12 +80,13 @@ export class PermissionEditor {
8280
});
8381
this.view = new EditorView({
8482
state: this.state,
85-
parent: this.element.querySelector('#editor'),
83+
parent: this.element.querySelector('#permissionEditor'),
8684
});
8785
}
8886

8987
onRoleUpdateClick() {
9088
this.errorMessage = '';
89+
this.resStatus = '';
9190
let transaction = this.view.state.update();
9291
this.view.dispatch(transaction);
9392
const { isValid, error } = isValidPermissionJson(String(transaction.state.doc));
@@ -147,9 +146,9 @@ export class PermissionEditor {
147146
))}
148147
</select>
149148
</div>
150-
<add-role refresh={() => this.fetchRoles} url="http://localhost:3000/api/permissions"></add-role>
149+
<add-role refresh={() => this.fetchRoles()} url="http://localhost:3000/api/permissions"></add-role>
151150
</div>
152-
<div id="editor" class="border border-gray-300"></div>
151+
<div id="permissionEditor" class="border border-gray-300"></div>
153152

154153
{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}
155154
{this.errorMessage === '' && this.resStatus !== '' && (
@@ -160,17 +159,16 @@ export class PermissionEditor {
160159

161160
<div class="flex justify-between">
162161
<div>
163-
<button
164-
title="Ctrl+Shift+Enter to run"
165-
onClick={() => this.onRoleUpdateClick()}
166-
disabled={this.isLoading}
167-
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 "
168-
>
169-
Update
170-
</button>
162+
<button
163+
title="Ctrl+Shift+Enter to run"
164+
onClick={() => this.onRoleUpdateClick()}
165+
disabled={this.isLoading}
166+
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 "
167+
>
168+
Update
169+
</button>
171170
</div>
172171
<div class="mx-4">{this.isLoading && <loader-component></loader-component>}</div>
173-
<div></div>
174172
</div>
175173
</div>
176174
</Host>

0 commit comments

Comments
 (0)