list sheet, tree view sheet and two column select components support hidden field
This commit is contained in:
@@ -30,6 +30,7 @@
|
||||
<v-list-item :class="{ 'primary-list-item-selected v-list-item--active text-primary': item === selectedPrimaryItem }"
|
||||
:key="primaryKeyField ? item[primaryKeyField] : item"
|
||||
v-for="item in items"
|
||||
v-show="item && (!primaryHiddenField || !item[primaryHiddenField])"
|
||||
@click="onPrimaryItemClicked(item)">
|
||||
<template #prepend>
|
||||
<ItemIcon class="mr-2" :icon-type="primaryIconType"
|
||||
@@ -49,6 +50,7 @@
|
||||
<v-list-item :class="{ 'secondary-list-item-selected v-list-item--active text-primary': isSecondarySelected(subItem) }"
|
||||
:key="secondaryKeyField ? subItem[secondaryKeyField] : subItem"
|
||||
v-for="subItem in selectedPrimaryItem[primarySubItemsField]"
|
||||
v-show="subItem && (!secondaryHiddenField || !subItem[secondaryHiddenField])"
|
||||
@click="onSecondaryItemClicked(subItem)">
|
||||
<template #prepend>
|
||||
<ItemIcon class="mr-2" :icon-type="secondaryIconType"
|
||||
@@ -69,7 +71,7 @@
|
||||
|
||||
<script>
|
||||
import {
|
||||
getFirstItem,
|
||||
getFirstVisibleItem,
|
||||
getItemByKeyValue,
|
||||
getNameByKeyValue,
|
||||
getPrimaryValueBySecondaryValue
|
||||
@@ -100,6 +102,7 @@ export default {
|
||||
'primaryIconField',
|
||||
'primaryIconType',
|
||||
'primaryColorField',
|
||||
'primaryHiddenField',
|
||||
'primarySubItemsField',
|
||||
'secondaryKeyField',
|
||||
'secondaryValueField',
|
||||
@@ -112,6 +115,7 @@ export default {
|
||||
'secondaryIconField',
|
||||
'secondaryIconType',
|
||||
'secondaryColorField',
|
||||
'secondaryHiddenField',
|
||||
'noItemText',
|
||||
'items'
|
||||
],
|
||||
@@ -133,7 +137,7 @@ export default {
|
||||
},
|
||||
set: function (value) {
|
||||
const primaryItem = getItemByKeyValue(this.items, value, this.primaryValueField);
|
||||
const secondaryItem = getFirstItem(primaryItem[this.primarySubItemsField]);
|
||||
const secondaryItem = getFirstVisibleItem(primaryItem[this.primarySubItemsField], this.primaryHiddenField);
|
||||
|
||||
if (secondaryItem) {
|
||||
if (this.secondaryValueField) {
|
||||
@@ -214,7 +218,7 @@ export default {
|
||||
}
|
||||
},
|
||||
getPrimaryValueBySecondaryValue(secondaryValue) {
|
||||
return getPrimaryValueBySecondaryValue(this.items, this.primarySubItemsField, this.primaryValueField, this.secondaryValueField, secondaryValue);
|
||||
return getPrimaryValueBySecondaryValue(this.items, this.primarySubItemsField, this.primaryValueField, this.primaryHiddenField, this.secondaryValueField, this.secondaryHiddenField, secondaryValue);
|
||||
},
|
||||
onMenuStateChanged(state) {
|
||||
const self = this;
|
||||
|
||||
@@ -17,6 +17,7 @@
|
||||
:class="{ 'list-item-selected': isSelected(item, index) }"
|
||||
:key="getItemValue(item, index, keyField, valueType)"
|
||||
v-for="(item, index) in items"
|
||||
v-show="item && (!hiddenField || !item[hiddenField])"
|
||||
@click="onItemClicked(item, index)">
|
||||
<template #content-start>
|
||||
<f7-icon class="list-item-checked-icon" f7="checkmark_alt" :style="{ 'color': isSelected(item, index) ? '' : 'transparent' }"></f7-icon>
|
||||
@@ -44,6 +45,7 @@ export default {
|
||||
'iconField',
|
||||
'iconType',
|
||||
'colorField',
|
||||
'hiddenField',
|
||||
'items',
|
||||
'show'
|
||||
],
|
||||
|
||||
@@ -15,7 +15,8 @@
|
||||
:opened="isPrimaryItemHasSecondaryValue(item)"
|
||||
:label="$tIf((primaryTitleField ? item[primaryTitleField] : item), primaryTitleI18n)"
|
||||
:key="primaryKeyField ? item[primaryKeyField] : item"
|
||||
v-for="item in items">
|
||||
v-for="item in items"
|
||||
v-show="item && (!primaryHiddenField || !item[primaryHiddenField])">
|
||||
<template #media>
|
||||
<ItemIcon :icon-type="primaryIconType" :icon-id="item[primaryIconField]"
|
||||
:color="item[primaryColorField]" v-if="primaryIconField"></ItemIcon>
|
||||
@@ -26,6 +27,7 @@
|
||||
:label="$tIf((secondaryTitleField ? subItem[secondaryTitleField] : subItem), secondaryTitleI18n)"
|
||||
:key="secondaryKeyField ? subItem[secondaryKeyField] : subItem"
|
||||
v-for="subItem in item[primarySubItemsField]"
|
||||
v-show="subItem && (!secondaryHiddenField || !subItem[secondaryHiddenField])"
|
||||
@click="onSecondaryItemClicked(subItem)">
|
||||
<template #media>
|
||||
<ItemIcon :icon-type="secondaryIconType" :icon-id="subItem[secondaryIconField]"
|
||||
@@ -52,6 +54,7 @@ export default {
|
||||
'primaryIconField',
|
||||
'primaryIconType',
|
||||
'primaryColorField',
|
||||
'primaryHiddenField',
|
||||
'primarySubItemsField',
|
||||
'secondaryKeyField',
|
||||
'secondaryValueField',
|
||||
@@ -60,6 +63,7 @@ export default {
|
||||
'secondaryIconField',
|
||||
'secondaryIconType',
|
||||
'secondaryColorField',
|
||||
'secondaryHiddenField',
|
||||
'items',
|
||||
'show'
|
||||
],
|
||||
@@ -121,6 +125,10 @@ export default {
|
||||
for (let i = 0; i < primaryItem[this.primarySubItemsField].length; i++) {
|
||||
const secondaryItem = primaryItem[this.primarySubItemsField][i];
|
||||
|
||||
if (this.secondaryHiddenField && secondaryItem[this.secondaryHiddenField]) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (this.secondaryValueField && secondaryItem[this.secondaryValueField] === this.currentValue) {
|
||||
return true;
|
||||
} else if (!this.secondaryValueField && secondaryItem === this.currentValue) {
|
||||
|
||||
@@ -21,6 +21,7 @@
|
||||
:footer="$tIf(item[primaryFooterField], primaryFooterI18n)"
|
||||
:key="primaryKeyField ? item[primaryKeyField] : item"
|
||||
v-for="item in items"
|
||||
v-show="item && (!primaryHiddenField || !item[primaryHiddenField])"
|
||||
@click="onPrimaryItemClicked(item)">
|
||||
<template #media>
|
||||
<ItemIcon :icon-type="primaryIconType" :icon-id="item[primaryIconField]" :color="item[primaryColorField]"></ItemIcon>
|
||||
@@ -43,6 +44,7 @@
|
||||
:footer="$tIf(subItem[secondaryFooterField], secondaryFooterI18n)"
|
||||
:key="secondaryKeyField ? subItem[secondaryKeyField] : subItem"
|
||||
v-for="subItem in selectedPrimaryItem[primarySubItemsField]"
|
||||
v-show="subItem && (!secondaryHiddenField || !subItem[secondaryHiddenField])"
|
||||
@click="onSecondaryItemClicked(subItem)">
|
||||
<template #media>
|
||||
<ItemIcon :icon-type="secondaryIconType" :icon-id="subItem[secondaryIconField]" :color="subItem[secondaryColorField]"></ItemIcon>
|
||||
@@ -80,6 +82,7 @@ export default {
|
||||
'primaryIconField',
|
||||
'primaryIconType',
|
||||
'primaryColorField',
|
||||
'primaryHiddenField',
|
||||
'primarySubItemsField',
|
||||
'secondaryKeyField',
|
||||
'secondaryValueField',
|
||||
@@ -92,6 +95,7 @@ export default {
|
||||
'secondaryIconField',
|
||||
'secondaryIconType',
|
||||
'secondaryColorField',
|
||||
'secondaryHiddenField',
|
||||
'items',
|
||||
'show'
|
||||
],
|
||||
@@ -151,7 +155,7 @@ export default {
|
||||
}
|
||||
},
|
||||
getPrimaryValueBySecondaryValue(secondaryValue) {
|
||||
return getPrimaryValueBySecondaryValue(this.items, this.primarySubItemsField, this.primaryValueField, this.secondaryValueField, secondaryValue);
|
||||
return getPrimaryValueBySecondaryValue(this.items, this.primarySubItemsField, this.primaryValueField, this.primaryHiddenField, this.secondaryValueField, this.secondaryHiddenField, secondaryValue);
|
||||
},
|
||||
close() {
|
||||
this.$emit('update:show', false);
|
||||
|
||||
+28
-8
@@ -214,10 +214,14 @@ export function stringToArrayBuffer(str){
|
||||
return Uint8Array.from(str, c => c.charCodeAt(0)).buffer;
|
||||
}
|
||||
|
||||
export function getFirstItem(items) {
|
||||
if (isArray(items)) {
|
||||
if (items.length > 0) {
|
||||
return items[0];
|
||||
export function getFirstVisibleItem(items, hiddenField) {
|
||||
if (isArray(items) && items.length > 0) {
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
if (hiddenField && items[i][hiddenField]) {
|
||||
continue;
|
||||
}
|
||||
|
||||
return items[i];
|
||||
}
|
||||
} else {
|
||||
for (let field in items) {
|
||||
@@ -225,6 +229,10 @@ export function getFirstItem(items) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (hiddenField && items[field][hiddenField]) {
|
||||
continue;
|
||||
}
|
||||
|
||||
return items[field];
|
||||
}
|
||||
}
|
||||
@@ -467,10 +475,14 @@ export function selectInvert(filterItemIds, allItemsMap) {
|
||||
}
|
||||
}
|
||||
|
||||
export function isPrimaryItemHasSecondaryValue(primaryItem, primarySubItemsField, secondaryValueField, secondaryValue) {
|
||||
export function isPrimaryItemHasSecondaryValue(primaryItem, primarySubItemsField, secondaryValueField, secondaryHiddenField, secondaryValue) {
|
||||
for (let i = 0; i < primaryItem[primarySubItemsField].length; i++) {
|
||||
const secondaryItem = primaryItem[primarySubItemsField][i];
|
||||
|
||||
if (secondaryHiddenField && secondaryItem[secondaryHiddenField]) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (secondaryValueField && secondaryItem[secondaryValueField] === secondaryValue) {
|
||||
return true;
|
||||
} else if (!secondaryValueField && secondaryItem === secondaryValue) {
|
||||
@@ -481,13 +493,17 @@ export function isPrimaryItemHasSecondaryValue(primaryItem, primarySubItemsField
|
||||
return false;
|
||||
}
|
||||
|
||||
export function getPrimaryValueBySecondaryValue(items, primarySubItemsField, primaryValueField, secondaryValueField, secondaryValue) {
|
||||
export function getPrimaryValueBySecondaryValue(items, primarySubItemsField, primaryValueField, primaryHiddenField, secondaryValueField, secondaryHiddenField, secondaryValue) {
|
||||
if (primarySubItemsField) {
|
||||
if (isArray(items)) {
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
const primaryItem = items[i];
|
||||
|
||||
if (isPrimaryItemHasSecondaryValue(primaryItem, primarySubItemsField, secondaryValueField, secondaryValue)) {
|
||||
if (primaryHiddenField && primaryItem[primaryHiddenField]) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (isPrimaryItemHasSecondaryValue(primaryItem, primarySubItemsField, secondaryValueField, secondaryHiddenField, secondaryValue)) {
|
||||
if (primaryValueField) {
|
||||
return primaryItem[primaryValueField];
|
||||
} else {
|
||||
@@ -503,7 +519,11 @@ export function getPrimaryValueBySecondaryValue(items, primarySubItemsField, pri
|
||||
|
||||
const primaryItem = items[field];
|
||||
|
||||
if (isPrimaryItemHasSecondaryValue(primaryItem, primarySubItemsField, secondaryValueField, secondaryValue)) {
|
||||
if (primaryHiddenField && primaryItem[primaryHiddenField]) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (isPrimaryItemHasSecondaryValue(primaryItem, primarySubItemsField, secondaryValueField, secondaryHiddenField, secondaryValue)) {
|
||||
if (primaryValueField) {
|
||||
return primaryItem[primaryValueField];
|
||||
} else {
|
||||
|
||||
Reference in New Issue
Block a user