[go: nahoru, domu]
Skip to content

Commit

Permalink
ui: refactor the component tag update
Browse files Browse the repository at this point in the history 
This commit refactors the component to block click actions on the listing when
the user does not have permission. Also, tests are modified to accommodate the
changes made.

Signed-off-by: Leonardo R.S. Joao <leonardo.joao@ossystems.com.br>
  • Loading branch information
@leonardojoao @otavio
leonardojoao authored and otavio committed Feb 17, 2022
1 parent b476e9e commit 4487c9b
Show file tree
Hide file tree
Showing 9 changed files with 358 additions and 384 deletions.
55 changes: 45 additions & 10 deletions ui/src/components/device/DeviceDetails.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,15 +59,34 @@
/>
</v-list-item>

<v-list-item @click.stop="openDialog('tagFormUpdateShow')">
<TagFormUpdate
:device-uid="device.uid"
:tags-list="device.tags"
:show.sync="tagFormUpdateShow"
data-test="tagFormUpdate-component"
@update="getDevice()"
/>
</v-list-item>
<v-tooltip
bottom
:disabled="hasAuthorizationFormUpdate"
>
<template #activator="{ on, attrs }">
<div
v-bind="attrs"
v-on="on"
>
<v-list-item
:disabled="!hasAuthorizationFormUpdate"
@click.stop="openDialog('tagFormUpdateShow')"
>
<TagFormUpdate
:device-uid="device.uid"
:tags-list="device.tags"
:show.sync="tagFormUpdateShow"
data-test="tagFormUpdate-component"
@update="getDevice()"
/>
</v-list-item>
</div>
</template>

<span>
You don't have this kind of authorization.
</span>
</v-tooltip>

<v-list-item @click.stop="openDialog('deviceDeleteShow')">
<DeviceDelete
Expand Down Expand Up @@ -186,6 +205,7 @@ import DeviceDelete from '@/components/device/DeviceDelete';
import DeviceRename from '@/components/device/DeviceRename';
import TagFormUpdate from '@/components/tag/TagFormUpdate';
import { formatDate, lastSeen } from '@/components/filter/date';
import hasPermission from '@/components/filter/permission';
export default {
name: 'DeviceDetailsComponent',
Expand All @@ -198,7 +218,7 @@ export default {
TagFormUpdate,
},
filters: { formatDate, lastSeen },
filters: { formatDate, lastSeen, hasPermission },
data() {
return {
Expand All @@ -211,9 +231,24 @@ export default {
deviceRenameShow: false,
tagFormUpdateShow: false,
deviceDeleteShow: false,
updateAction: 'deviceUpdate',
};
},
computed: {
hasAuthorizationFormUpdate() {
const role = this.$store.getters['auth/role'];
if (role !== '') {
return hasPermission(
this.$authorizer.role[role],
this.$actions.tag[this.updateAction],
);
}
return false;
},
},
async created() {
this.uid = await this.$route.params.id;
Expand Down
53 changes: 43 additions & 10 deletions ui/src/components/device/DeviceList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,15 +110,34 @@
</v-list-item-title>
</v-list-item>

<v-list-item @click="showTagDialog(getListDevices.indexOf(item))">
<TagFormUpdate
:device-uid="item.uid"
:tags-list="item.tags"
:show.sync="tagDialogShow[getListDevices.indexOf(item)]"
data-test="tagFormUpdate-component"
@update="refresh"
/>
</v-list-item>
<v-tooltip
bottom
:disabled="hasAuthorizationFormUpdate"
>
<template #activator="{ on, attrs }">
<div
v-bind="attrs"
v-on="on"
>
<v-list-item
:disabled="!hasAuthorizationFormUpdate"
@click="showTagDialog(getListDevices.indexOf(item))"
>
<TagFormUpdate
:device-uid="item.uid"
:tags-list="item.tags"
:show.sync="tagDialogShow[getListDevices.indexOf(item)]"
data-test="tagFormUpdate-component"
@update="refresh"
/>
</v-list-item>
</div>
</template>

<span>
You don't have this kind of authorization.
</span>
</v-tooltip>

<v-list-item @click="showDeviceDelete(getListDevices.indexOf(item))">
<DeviceDelete
Expand All @@ -143,6 +162,7 @@ import DeviceDelete from '@/components/device/DeviceDelete';
import TagFormUpdate from '@/components/tag/TagFormUpdate';
import { lastSeen } from '@/components/filter/date';
import formatDeviceSort from '@/components/filter/object';
import hasPermission from '@/components/filter/permission';
export default {
name: 'DeviceListComponent',
Expand All @@ -154,7 +174,7 @@ export default {
TagFormUpdate,
},
filters: { lastSeen },
filters: { lastSeen, hasPermission },
data() {
return {
Expand All @@ -164,6 +184,7 @@ export default {
tagDialogShow: [],
deviceDeleteShow: [],
selectedTags: [],
updateAction: 'deviceUpdate',
headers: [
{
text: 'Online',
Expand Down Expand Up @@ -211,6 +232,18 @@ export default {
getNumberDevices() {
return this.$store.getters['devices/getNumberDevices'];
},
hasAuthorizationFormUpdate() {
const role = this.$store.getters['auth/role'];
if (role !== '') {
return hasPermission(
this.$authorizer.role[role],
this.$actions.tag[this.updateAction],
);
}
return false;
},
},
watch: {
Expand Down
64 changes: 17 additions & 47 deletions ui/src/components/tag/TagFormUpdate.vue
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,20 @@
<template>
<fragment>
<v-tooltip
:disabled="hasAuthorization"
bottom
>
<template #activator="{ on }">
<span v-on="on">
<v-list-item-title
data-test="title-item"
v-on="on"
>
{{ hasTag ? 'Edit tags' : 'Add tags' }}
</v-list-item-title>
</span>

<span v-on="on">
<v-icon
:disabled="!hasAuthorization"
left
data-test="tag-icon"
v-on="on"
v-text="'mdi-tag'"
/>
</span>
</template>

<span v-if="!hasAuthorization">
You don't have this kind of authorization.
</span>
</v-tooltip>
<v-list-item-icon class="mr-0">
<v-icon
left
data-test="edit-icon"
v-text="'mdi-tag'"
/>
</v-list-item-icon>

<v-list-item-content>
<v-list-item-title
class="text-left"
data-test="edit-title"
v-text="hasTag ? 'Edit tags': 'Add tags'"
/>
</v-list-item-content>

<v-dialog
v-model="showDialog"
Expand Down Expand Up @@ -82,13 +68,9 @@

<script>
import hasPermission from '@/components/filter/permission';
export default {
name: 'TagFormDialogComponent',
filters: { hasPermission },
props: {
deviceUid: {
type: String,
Expand All @@ -111,15 +93,15 @@ export default {
dialog: false,
listTagLocal: [],
errorMsg: '',
action: 'deviceUpdate',
};
},
computed: {
showDialog: {
get() {
return this.show && this.hasAuthorization;
return this.show;
},
set(value) {
this.$emit('update:show', value);
},
Expand All @@ -128,18 +110,6 @@ export default {
hasTag() {
return this.tagsList.length > 0;
},
hasAuthorization() {
const role = this.$store.getters['auth/role'];
if (role !== '') {
return hasPermission(
this.$authorizer.role[role],
this.$actions.tag[this.action],
);
}
return false;
},
},
watch: {
Expand Down
Loading

0 comments on commit 4487c9b

Please sign in to comment.