Skip to content

Commit d79b843

Browse files
abhishekctvabhishekctv
authored
Merge pull request #50 from SwapnilTechVariable/wip/view-permission-profile
View permissions on profile and UI related bug fixes
2 parents 5ff4ff6 + 8454567 commit d79b843

11 files changed

Lines changed: 161 additions & 164 deletions

File tree

‎src/components/common/buttons/icon-button-basic/icon-button-basic.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,8 @@ export class IconButtonBasic {
3737
render() {
3838
return (
3939
<button
40-
class={`flex border border-transparent ${this.sizeClasses[this.size]} bg-${this.colorClasses[this.color]}-500 text-${this.colorClasses[this.color]}-600 hover:text-${
41-
this.colorClasses[this.color]
42-
}-800 justify-center w-${this.width} ${this.customClass} cursor-pointer disabled:cursor-default disabled:text-${this.colorClasses[this.color]}-400 `}
40+
class={`flex border border-transparent ${this.sizeClasses[this.size]} text-${this.colorClasses[this.color]}-600 hover:text-${this.colorClasses[this.color]
41+
}-800 justify-center w-${this.width} ${this.customClass} cursor-pointer disabled:cursor-default disabled:text-${this.colorClasses[this.color]}-400 `}
4342
title={this.title}
4443
onClick={this.clickHandler}
4544
disabled={this.disabled || this.loading}

‎src/components/common/custom-drop-down/custom-drop-down.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export class CustomDropDown {
5555
class="justify-between bg-gray-100 border border-gray-200 focus:ring-1 focus:outline-none focus:ring-gray-500 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 w-full"
5656
type="button"
5757
>
58-
{`Selected Node: ${this.dropdownSearchKey || ''}`}
58+
{`Selected Label: ${this.dropdownSearchKey || ''}`}
5959
<svg class="w-4 h-4 ml-2" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
6060
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
6161
</svg>
@@ -106,16 +106,16 @@ export class CustomDropDown {
106106
);
107107
})}
108108
</ul>
109-
<button
109+
{(this.dropdownSearchKey !== undefined && this.dropdownSearchKey.length > 0) && <button
110110
type="button"
111111
onClick={() => this.handleSelect()}
112112
class="flex w-full items-center p-3 text-sm font-medium text-gray-700 border-t border-gray-400 rounded-b-lg bg-gray-100 dark:border-gray-600 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-red-500 "
113113
>
114114
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
115115
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
116116
</svg>
117-
<span class="px-3">Select</span>
118-
</button>
117+
<span class="px-3">Select {`"${this.dropdownSearchKey}"`}</span>
118+
</button>}
119119
</form>
120120
</Host>
121121
);

‎src/components/common/items/data-table/readme.md‎

Lines changed: 25 additions & 24 deletions
Large diffs are not rendered by default.

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,7 @@ export class EditorPage {
123123
<div>
124124
<aside class="w-full lg:w-80" aria-label="Sidebar">
125125
<div class="w-full flex justify-between ">
126-
<h2 class="font-mono text-lg font-bold leading-7 text-gray-600">Nodes</h2>
126+
<h2 class="font-mono text-lg font-bold leading-7 text-gray-600">Labels</h2>
127127
<icon-button-basic
128128
color="secondary"
129129
size="md"

‎src/components/editorPage/menu-drop-down/menu-drop-down.tsx‎

Lines changed: 45 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, h, Prop, State } from '@stencil/core';
1+
import { Component, h, Host, Prop, State } from '@stencil/core';
22
import state from '../store';
33

44
@Component({
@@ -16,6 +16,12 @@ export class MenuDropDown {
1616
this.showDropdown = !this.showDropdown;
1717
}
1818

19+
viewHandler(item) {
20+
state.page = 1;
21+
this.fetchData(item);
22+
this.toggleDropdown();
23+
}
24+
1925
buttonHandler(item) {
2026
state.page = 1;
2127
this.fetchData(item);
@@ -28,36 +34,57 @@ export class MenuDropDown {
2834

2935
render() {
3036
return (
31-
<div class="relative">
32-
{/* Header */}
33-
<h2 onClick={() => this.toggleDropdown()} class="font-sans text-gray-600 hover:text-indigo-800 cursor-pointer transition text-sm capitalize flex gap-1 items-center">
34-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
35-
<path
36-
stroke-linecap="round"
37-
stroke-linejoin="round"
38-
d="M12 6.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 12.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 18.75a.75.75 0 110-1.5.75.75 0 010 1.5z"
39-
/>
40-
</svg>
41-
</h2>
37+
<Host class="relative w-full py-2">
38+
<div onClick={() => this.toggleDropdown()} class='w-full font-semibold pl-3 flex justify-between text-indigo-700'>
39+
{this.listTitle}
40+
<div
41+
id="dropdownDefaultButton"
42+
data-dropdown-toggle="dropdown"
43+
>
44+
<ul id="dropdown" class="flex gap-5 ml-2 mr-4 pt-1">
45+
{this.list?.map(item => (
46+
<li>
47+
{item === 'Edit' && <a href="#" class="block text-sm">
48+
<div class="cursor-pointer" title={item} onClick={() => this.buttonHandler(this.listTitle)}>
49+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" class="w-5 h-5">
50+
<path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
51+
</svg>
52+
53+
</div>
54+
</a>}
55+
{item === 'View' && <a href="#" class="block text-sm ">
56+
<div class="cursor-pointer" title={item} onClick={() => this.viewHandler(this.listTitle)}>
57+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" class="w-5 h-5">
58+
<path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
59+
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
60+
</svg>
61+
62+
</div>
63+
</a>}
64+
</li>
65+
))}
66+
</ul>
67+
</div>
68+
</div>
4269
<backdrop-filter showBackDrop={this.showDropdown} backDropHandler={this.backDropHandler}></backdrop-filter>
4370
{/* List */}
44-
<div
71+
{/* <div
4572
id="dropdownDefaultButton"
4673
data-dropdown-toggle="dropdown"
4774
style={{ right: '0px' }}
48-
class={this.showDropdown ? 'absolute bg-white z-10 w-44 text-sm list-none mt-2 rounded divide-y right-0 divide-gray-100 shadow ' : 'hidden'}
75+
class={this.showDropdown ? 'absolute bg-gray-300 z-50 w-44 text-sm list-none mt-2 rounded-md divide-y -bottom-1 right-2 divide-gray-100 shadow ' : 'hidden'}
4976
>
50-
<ul id="dropdown" class="py-1 bg-white">
77+
<ul id="dropdown" class="py-1 bg-gray-300 rounded-b-md">
5178
{this.list?.map(item => (
5279
<li>
53-
<a href="#" onClick={() => this.buttonHandler(this.listTitle)} class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100">
80+
<a href="#" onClick={() => this.buttonHandler(this.listTitle)} class="block py-1 px-4 text-sm text-gray-700 cursor-pointer">
5481
{item}
5582
</a>
5683
</li>
5784
))}
5885
</ul>
59-
</div>
60-
</div>
86+
</div> */}
87+
</Host>
6188
);
6289
}
6390
}

‎src/components/editorPage/node-item/node-item.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,8 @@ export class NodeItem {
2727
{state.availableNodes.map(item => {
2828
return (
2929
<li>
30-
<div class="flex justify-between p-2 text-base font-normal text-gray-900 rounded-lg bg-gray-200">
31-
<div class="ml-3">{item}</div>
30+
<div class="flex justify-between text-base font-normal text-gray-900 rounded-lg bg-gray-300">
31+
{/* <div class="ml-3">{item}</div> */}
3232
<menu-drop-down listTitle={item} list={DROPDOWN_ITEMS} fetchData={nodeName => this.nodeChangeHandler(nodeName)}></menu-drop-down>
3333
</div>
3434
</li>

‎src/components/profilePage/profile-component/profile-component.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ export class ProfileComponent {
7979
return (
8080
<Host class="rounded-lg w-auto bg-gray-100 shadow-gray-600 py-2 px-3 space-y-2 gap-4">
8181
<form onSubmit={e => this.handleSubmit(e)} class="w-full">
82-
<div class="flex flex-wrap -mx-3 mb-6">
82+
<div class="flex flex-wrap -mx-3 mb-3">
8383
<div class="w-full px-3">
8484
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">Name</label>
8585
<input
@@ -98,16 +98,16 @@ export class ProfileComponent {
9898
<div class="w-full px-3 mb-6 md:mb-0">
9999
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">Email</label>
100100
<input
101-
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-400 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white"
101+
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-400 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white"
102102
disabled
103103
id="grid-email"
104104
type="text"
105105
value={this.user.email}
106-
placeholder="Enter name"
106+
placeholder="Enter email"
107107
/>
108108
</div>
109109
</div>
110-
<div class="flex flex-wrap -mx-3 mb-6">
110+
<div class="flex flex-wrap -mx-3 mb-3">
111111
<div class="w-full px-3">
112112
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">Password</label>
113113
<input
@@ -122,7 +122,7 @@ export class ProfileComponent {
122122
<p class="text-gray-600 text-xs italic">Enter updated password</p>
123123
</div>
124124
</div>
125-
<div class="flex flex-wrap -mx-3 mb-6">
125+
<div class="flex flex-wrap -mx-3 mb-2">
126126
<div class="w-full px-3">
127127
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">Re-enter Password</label>
128128
<input
@@ -137,7 +137,7 @@ export class ProfileComponent {
137137
<p class="text-gray-600 text-xs italic">Re-enter the password</p>
138138
</div>
139139
</div>
140-
<div class="flex flex-row-reverse -mx-3 mb-6 ">
140+
<div class="flex flex-row-reverse -mx-3 mb-4 ">
141141
<icon-label-submit-button customClass="mx-4" type="submit" disabled={!hasAccess(this.parsedPermissions, { name: 'myprofile', permission: 'update' })}>
142142
Update
143143
</icon-label-submit-button>

‎src/components/settingsPage/basic-settings/basic-settings.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -99,19 +99,19 @@ export class BasicSettings {
9999
let style = '';
100100
switch (theme) {
101101
case 'dark-green':
102-
style = 'filter:invert(.9) hue-rotate(30deg)';
102+
style = 'filter:invert(.87) hue-rotate(30deg)';
103103
break;
104104
case 'dark-night':
105-
style = 'filter:invert(.9) hue-rotate(120deg)';
105+
style = 'filter:invert(.87) hue-rotate(120deg)';
106106
break;
107107
case 'dark-violet':
108-
style = 'filter:invert(.9) hue-rotate(220deg)';
108+
style = 'filter:invert(.87) hue-rotate(220deg)';
109109
break;
110110
case 'dark-orange':
111-
style = 'filter:invert(.9) hue-rotate(320deg)';
111+
style = 'filter:invert(.87) hue-rotate(320deg)';
112112
break;
113113
case 'dark-candy':
114-
style = 'filter:invert(.9) hue-rotate(360deg)';
114+
style = 'filter:invert(.87) hue-rotate(360deg)';
115115
break;
116116
case 'light-blue':
117117
style = 'filter: hue-rotate(330deg)';

‎src/components/usersPage/edit-user/edit-user.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@ export class EditUser {
155155
</div>
156156

157157
<div class="w-full">
158-
<p class="z-10 text-md text-gray-500 mb-4">Select permissions</p>
158+
<p class="z-10 text-md text-gray-500 mb-4">Select Role</p>
159159
<label class="block text-left">
160160
<select name="role" class="form-multiselect block w-full mt-1 border rounded-md " multiple>
161161
{this.rolesobj.map((role: any) => (

0 commit comments

Comments
 (0)