Skip to content

Commit

Permalink
feat: acl improved and component refined
Browse files Browse the repository at this point in the history
  • Loading branch information
@devansh-webkul
devansh-webkul committed Dec 7, 2023
1 parent ba06d08 commit df8fbf7
Show file tree
Hide file tree
Showing 11 changed files with 160 additions and 146 deletions.
10 changes: 4 additions & 6 deletions packages/Webkul/Admin/src/Resources/views/components/tree/checkbox.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
@pushOnce('scripts')
<!-- v-tree-checkbox template-->
<script type="text/x-template" id="v-tree-checkbox-template">
<label
:for="id"
Expand All @@ -26,14 +25,13 @@ class="text-[14px] text-gray-600 dark:text-gray-300 cursor-pointer hover:text-gr
</label>
</script>

<!-- v-tree-checkbox component -->
<script type="module">
app.component('v-tree-checkbox', {
template: '#v-tree-checkbox-template',
name: 'v-tree-checkbox',
props: ['id', 'label', 'nameField', 'modelValue', 'inputValue', 'value'],
props: ['id', 'label', 'nameField', 'modelValue', 'inputValue', 'value', 'isAcl'],
computed: {
isMultiple () {
Expand Down Expand Up @@ -82,7 +80,7 @@ class="text-[14px] text-gray-600 dark:text-gray-300 cursor-pointer hover:text-gr
input = input.filter(item => !this.valueComparator(item, value));
if (input.length === length) {
if (this.isAcl || (! this.isAcl && input.length === length)) {
input.push(value);
}
} else {
Expand All @@ -93,7 +91,7 @@ class="text-[14px] text-gray-600 dark:text-gray-300 cursor-pointer hover:text-gr
},
valueComparator (a, b) {
if (a === b)
if (a === b)
return true;
if (a !== Object(a) || b !== Object(b)) {
Expand All @@ -111,4 +109,4 @@ class="text-[14px] text-gray-600 dark:text-gray-300 cursor-pointer hover:text-gr
}
});
</script>
@endPushOnce
@endPushOnce
88 changes: 48 additions & 40 deletions packages/Webkul/Admin/src/Resources/views/components/tree/item.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
@pushOnce('scripts')
<!-- v-tree-item component -->
<script type="module">
app.component('v-tree-item', {
inheritAttrs: false,
props: {
inputType: {
type: String,
Expand All @@ -13,19 +12,19 @@
type: String,
},
idField: {
valueField: {
type: String,
},
captionField: {
idField: {
type: String,
},
childrenField: {
captionField: {
type: String,
},
valueField: {
childrenField: {
type: String,
},
Expand All @@ -35,18 +34,24 @@
default: null,
},
value: {
type: Array,
required: false,
default: null,
},
behavior: {
type: String,
required: false,
default: 'reactive',
},
isAcl: {
type: Boolean,
required: false,
default: 0,
},
value: {
type: Array,
required: false,
default: null,
},
savedValues: {
type: Array,
required: false,
Expand Down Expand Up @@ -79,11 +84,11 @@
computed: {
caption() {
return this.items[this.captionField]
? this.items[this.captionField]
: this.items.translations.filter(
return this.items[this.captionField] ?
this.items[this.captionField] :
this.items.translations.filter(
(translation) =>
translation.locale === this.fallbackLocale
translation.locale === this.fallbackLocale
)[0][this.captionField];
},
Expand Down Expand Up @@ -150,13 +155,13 @@
)
);
},
},
},
methods: {
getLength(items) {
return typeof items == 'object'
? Object.keys(items).length
: items.length;
return typeof items == 'object' ?
Object.keys(items).length :
items.length;
},
generateRoot() {
Expand All @@ -167,19 +172,20 @@
label: this.caption,
nameField: this.nameField,
modelValue: this.items[this.valueField],
inputValue: this.hasChildren
? this.isSomeChildrenSelected
: this.value,
value: this.hasChildren
? this.isAllChildrenSelected
: this.items,
inputValue: this.hasChildren ?
this.isSomeChildrenSelected :
this.value,
value: this.hasChildren ?
this.isAllChildrenSelected :
this.items,
isAcl: this.isAcl,
onInputChange: (selection) => {
if (this.hasChildren) {
if (this.isAllChildrenSelected) {
this.resetChildren();
} else {
if (! selection) {
if (!selection) {
this.allChildren.forEach((leaf) => {
this.value.forEach((item, index) => {
if (item[this.idField] == leaf[this.idField]) {
Expand Down Expand Up @@ -218,6 +224,7 @@
modelValue: this.items[this.valueField],
inputValue: this.value,
value: this.items,
isAcl: this.isAcl,
});
}
} else if (this.inputType == 'radio') {
Expand All @@ -233,18 +240,19 @@
generateChild(child) {
return this.$h(this.$resolveComponent('v-tree-item'), {
items: child,
value: this.value,
savedValues: this.savedValues,
nameField: this.nameField,
inputType: this.inputType,
captionField: this.captionField,
childrenField: this.childrenField,
nameField: this.nameField,
valueField: this.valueField,
idField: this.idField,
captionField: this.captionField,
childrenField: this.childrenField,
items: child,
behavior: this.behavior,
isAcl: this.isAcl,
value: this.value,
savedValues: this.savedValues,
fallbackLocale: this.fallbackLocale,
onInputChange:(selection) => {
onInputChange: (selection) => {
this.$emit('input-change', selection);
}
});
Expand Down Expand Up @@ -279,16 +287,16 @@
generateIcon() {
return this.$h('i', {
class: [
this.isActive ? 'icon-sort-right' :
this.isActive ? 'icon-sort-right' :
this.hasChildren ? 'icon-sort-down' : '',
'text-[20px] rounded-[6px] cursor-pointer transition-all hover:bg-gray-100 dark:hover:bg-gray-950'
],
onClick: (selection) => {
this.$el.classList.toggle('active');
if (this.$el.classList.contains('has-children')) {
this.isActive = ! this.isActive;
this.isActive = !this.isActive;
}
},
});
Expand All @@ -297,7 +305,7 @@ class: [
generateFolderIcon() {
return this.$h('i', {
class: [
this.hasChildren ? 'icon-folder': 'icon-attribute',
this.hasChildren ? 'icon-folder' : 'icon-attribute',
'text-[24px] cursor-pointer'
],
});
Expand Down Expand Up @@ -333,4 +341,4 @@ class: [
},
});
</script>
@endPushOnce
@endPushOnce
8 changes: 3 additions & 5 deletions packages/Webkul/Admin/src/Resources/views/components/tree/radio.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
@pushOnce('scripts')
<!-- v-tree-radio-component template -->
<script
type="text/x-template"
id="v-tree-radio-template"
Expand All @@ -19,15 +18,14 @@ class="hidden peer"
<span class="icon-radio-normal mr-[4px] text-[24px] rounded-[6px] cursor-pointer peer-checked:icon-radio-selected peer-checked:text-blue-600"></span>
<div
<div
class="text-[14px] text-gray-600 dark:text-gray-300 cursor-pointer hover:text-gray-800 dark:hover:text-white"
v-text="label"
>
</div>
</label>
</script>

<!-- v-tree-radio component -->
<script type="module">
app.component('v-tree-radio', {
template: '#v-tree-radio-template',
Expand All @@ -38,7 +36,7 @@ class="text-[14px] text-gray-600 dark:text-gray-300 cursor-pointer hover:text-gr
computed: {
isActive() {
if(this.value.length) {
if (this.value.length) {
return this.value[0] == this.modelValue ? true : false;
}
Expand All @@ -47,4 +45,4 @@ class="text-[14px] text-gray-600 dark:text-gray-300 cursor-pointer hover:text-gr
}
});
</script>
@endPushOnce
@endPushOnce
Loading

0 comments on commit df8fbf7

Please sign in to comment.