Removed extraneous container element

This commit is contained in:
2020-04-13 23:03:12 +00:00
parent 8dfd5e213a
commit b25af47cdd
11 changed files with 879 additions and 1114 deletions

View File

@@ -1,421 +1,403 @@
<template>
<v-container fluid>
<!-- <div>
READY: {{ formState.ready }}
<br />
LOADING: {{ formState.loading }}
<br />
DIRTY: {{ formState.dirty }}
<br />
VALID: {{ formState.valid }}
<br />
READONLY: {{ formState.readOnly }}
<br />
</div>
-->
<v-row v-if="this.formState.ready">
<v-col>
<v-form ref="form">
<v-row>
<gz-error :errorBoxMessage="formState.errorBoxMessage"></gz-error>
<v-col cols="12">
<v-row>
<v-col cols="12" sm="6" lg="4" xl="3">
<v-text-field
v-model="obj.name"
:readonly="this.formState.readOnly"
clearable
@click:clear="fieldValueChanged('name')"
:counter="255"
:label="$ay.t('Name')"
:rules="[
form().max255(this, 'name'),
form().required(this, 'name')
]"
:error-messages="form().serverErrors(this, 'name')"
ref="name"
@input="fieldValueChanged('name')"
:data-cy="!!$ay.dev ? 'name' : false"
></v-text-field>
</v-col>
<v-col cols="12" sm="6" lg="4" xl="3">
<v-checkbox
v-model="obj.public"
:readonly="this.formState.readOnly"
:label="$ay.t('AnyUser')"
ref="public"
@change="fieldValueChanged('public')"
></v-checkbox>
</v-col>
</v-row>
</v-col>
<template v-for="(item, index) in obj.editView">
<v-col :key="item.key" cols="12" sm="6" lg="4" xl="3" px-2>
<v-card :data-cy="!!$ay.dev ? 'columncard:' + item.key : false">
<v-card-title>
{{ item.title }}
</v-card-title>
<v-row v-if="this.formState.ready">
<v-col>
<v-form ref="form">
<v-row>
<gz-error :errorBoxMessage="formState.errorBoxMessage"></gz-error>
<v-col cols="12">
<v-row>
<v-col cols="12" sm="6" lg="4" xl="3">
<v-text-field
v-model="obj.name"
:readonly="this.formState.readOnly"
clearable
@click:clear="fieldValueChanged('name')"
:counter="255"
:label="$ay.t('Name')"
:rules="[
form().max255(this, 'name'),
form().required(this, 'name')
]"
:error-messages="form().serverErrors(this, 'name')"
ref="name"
@input="fieldValueChanged('name')"
:data-cy="!!$ay.dev ? 'name' : false"
></v-text-field>
</v-col>
<v-col cols="12" sm="6" lg="4" xl="3">
<v-checkbox
v-model="obj.public"
:readonly="this.formState.readOnly"
:label="$ay.t('AnyUser')"
ref="public"
@change="fieldValueChanged('public')"
></v-checkbox>
</v-col>
</v-row>
</v-col>
<template v-for="(item, index) in obj.editView">
<v-col :key="item.key" cols="12" sm="6" lg="4" xl="3" px-2>
<v-card :data-cy="!!$ay.dev ? 'columncard:' + item.key : false">
<v-card-title>
{{ item.title }}
</v-card-title>
<v-card-text>
<!-- INCLUDE CONTROL -->
<v-switch
v-if="!item.rid"
v-model="item.include"
:label="$ay.t('Include')"
:ref="item.key"
:disabled="
item.sort != null || item.filter.items.length > 0
"
@change="includeChanged(item)"
></v-switch>
<div v-if="item.rid" class="v-label mb-8 mt-6">
{{ $ay.t("Include") }}
</div>
<!-- RE-ORDER CONTROL -->
<div class="d-flex justify-space-between">
<v-btn large icon @click="move('start', index)"
><v-icon
large
:data-cy="!!$ay.dev ? 'movestart' : false"
>fa-step-backward</v-icon
<v-card-text>
<!-- INCLUDE CONTROL -->
<v-switch
v-if="!item.rid"
v-model="item.include"
:label="$ay.t('Include')"
:ref="item.key"
:disabled="
item.sort != null || item.filter.items.length > 0
"
@change="includeChanged(item)"
></v-switch>
<div v-if="item.rid" class="v-label mb-8 mt-6">
{{ $ay.t("Include") }}
</div>
<!-- RE-ORDER CONTROL -->
<div class="d-flex justify-space-between">
<v-btn large icon @click="move('start', index)"
><v-icon large :data-cy="!!$ay.dev ? 'movestart' : false"
>fa-step-backward</v-icon
></v-btn
>
<v-btn large icon @click="move('left', index)"
><v-icon large>fa-backward</v-icon></v-btn
>
<v-btn large icon @click="move('right', index)"
><v-icon large>fa-forward</v-icon></v-btn
>
<v-btn large icon @click="move('end', index)"
><v-icon large>fa-step-forward</v-icon></v-btn
>
</div>
<!-- SORT CONTROL -->
<template v-if="item.isSortable">
<div @click="toggleSort(item)" class="pt-6">
<v-btn x-large v-if="item.sort == null" icon>
<v-icon x-large>fa-sort</v-icon></v-btn
>
<v-btn
v-if="item.sort != null && item.sort == '-'"
icon
x-large
><v-icon color="primary" x-large
>fa-sort-amount-down</v-icon
></v-btn
>
<v-btn large icon @click="move('left', index)"
><v-icon large>fa-backward</v-icon></v-btn
<v-btn
v-if="item.sort != null && item.sort == '+'"
icon
x-large
><v-icon color="primary" x-large
>fa-sort-amount-up</v-icon
></v-btn
>
<v-btn large icon @click="move('right', index)"
><v-icon large>fa-forward</v-icon></v-btn
>
<v-btn large icon @click="move('end', index)"
><v-icon large>fa-step-forward</v-icon></v-btn
<label class="v-label theme--light"
>&nbsp;{{ $ay.t("Sort") }}</label
>
</div>
<!-- SORT CONTROL -->
<template v-if="item.isSortable">
<div @click="toggleSort(item)" class="pt-6">
<v-btn x-large v-if="item.sort == null" icon>
<v-icon x-large>fa-sort</v-icon></v-btn
>
<v-btn
v-if="item.sort != null && item.sort == '-'"
icon
x-large
><v-icon color="primary" x-large
>fa-sort-amount-down</v-icon
></v-btn
>
<v-btn
v-if="item.sort != null && item.sort == '+'"
icon
x-large
><v-icon color="primary" x-large
>fa-sort-amount-up</v-icon
></v-btn
>
<label class="v-label theme--light"
>&nbsp;{{ $ay.t("Sort") }}</label
>
</div>
</template>
</template>
<!-- FILTER CONTROL -->
<template v-if="item.isFilterable">
<div class="pt-6">
<!-- ******** BUILDER FOR EACH TYPE Tag, decimal,currency, bool, integer, string, datetime ******** -->
<!-- DATETIME BUILDER -->
<div v-if="item.uiFieldDataType === 1">
<!-- FILTER CONTROL -->
<template v-if="item.isFilterable">
<div class="pt-6">
<!-- ******** BUILDER FOR EACH TYPE Tag, decimal,currency, bool, integer, string, datetime ******** -->
<!-- DATETIME BUILDER -->
<div v-if="item.uiFieldDataType === 1">
<v-select
v-model="item.tempFilterToken"
:items="selectLists.dateFilterTokens"
item-text="name"
item-value="id"
:label="$ay.t('Filter')"
prepend-icon="fa-filter"
></v-select>
<div v-if="item.tempFilterToken == '*select*'">
<v-select
v-model="item.tempFilterToken"
:items="selectLists.dateFilterTokens"
v-model="item.tempFilterOperator"
:items="selectLists.dateFilterOperators"
item-text="name"
item-value="id"
:label="$ay.t('Filter')"
prepend-icon="fa-filter"
></v-select>
<div v-if="item.tempFilterToken == '*select*'">
<v-select
v-model="item.tempFilterOperator"
:items="selectLists.dateFilterOperators"
item-text="name"
item-value="id"
></v-select>
<gz-date-time-picker
v-if="
item.tempFilterOperator != '*NOVALUE*' &&
item.tempFilterOperator != '*HASVALUE*'
"
v-model="item.tempFilterValue"
></gz-date-time-picker>
</div>
<v-btn
large
block
v-if="item.tempFilterToken != null"
@click="addFilterCondition(item)"
><v-icon large>fa-plus</v-icon></v-btn
>
<gz-date-time-picker
v-if="
item.tempFilterOperator != '*NOVALUE*' &&
item.tempFilterOperator != '*HASVALUE*'
"
v-model="item.tempFilterValue"
></gz-date-time-picker>
</div>
<v-btn
large
block
v-if="item.tempFilterToken != null"
@click="addFilterCondition(item)"
><v-icon large>fa-plus</v-icon></v-btn
>
</div>
<!-- STRING(text-4, emailaddress-11, http-12) BUILDER -->
<div
<!-- STRING(text-4, emailaddress-11, http-12) BUILDER -->
<div
v-if="
item.uiFieldDataType === 4 ||
item.uiFieldDataType === 11 ||
item.uiFieldDataType === 12
"
>
<v-select
v-model="item.tempFilterOperator"
:items="selectLists.stringFilterOperators"
item-text="name"
item-value="id"
:label="$ay.t('Filter')"
prepend-icon="fa-filter"
></v-select>
<v-text-field
v-if="
item.uiFieldDataType === 4 ||
item.uiFieldDataType === 11 ||
item.uiFieldDataType === 12
item.tempFilterOperator != null &&
item.tempFilterOperator != '*NOVALUE*' &&
item.tempFilterOperator != '*HASVALUE*'
"
v-model="item.tempFilterValue"
clearable
></v-text-field>
<v-btn
large
block
v-if="item.tempFilterOperator != null"
@click="addFilterCondition(item)"
><v-icon large>fa-plus</v-icon></v-btn
>
<v-select
v-model="item.tempFilterOperator"
:items="selectLists.stringFilterOperators"
item-text="name"
item-value="id"
:label="$ay.t('Filter')"
prepend-icon="fa-filter"
></v-select>
<v-text-field
v-if="
item.tempFilterOperator != null &&
item.tempFilterOperator != '*NOVALUE*' &&
item.tempFilterOperator != '*HASVALUE*'
"
v-model="item.tempFilterValue"
clearable
></v-text-field>
<v-btn
large
block
v-if="item.tempFilterOperator != null"
@click="addFilterCondition(item)"
><v-icon large>fa-plus</v-icon></v-btn
>
</div>
<!-- INTEGER BUILDER -->
<div v-if="item.uiFieldDataType === 5">
<v-select
v-model="item.tempFilterOperator"
:items="selectLists.integerFilterOperators"
item-text="name"
item-value="id"
:label="$ay.t('Filter')"
prepend-icon="fa-filter"
></v-select>
<v-text-field
v-if="
item.tempFilterOperator != null &&
item.tempFilterOperator != '*NOVALUE*' &&
item.tempFilterOperator != '*HASVALUE*'
"
v-model="item.tempFilterValue"
clearable
type="number"
></v-text-field>
<v-btn
large
block
v-if="item.tempFilterOperator != null"
@click="addFilterCondition(item)"
><v-icon large>fa-plus</v-icon></v-btn
>
</div>
<!-- BOOL BUILDER -->
<div v-if="item.uiFieldDataType === 6">
<v-select
v-model="item.tempFilterOperator"
:items="selectLists.boolFilterOperators"
item-text="name"
item-value="id"
:label="$ay.t('Filter')"
prepend-icon="fa-filter"
></v-select>
<v-radio-group
v-model="item.tempFilterValue"
v-if="
item.tempFilterOperator != null &&
item.tempFilterOperator != '*NOVALUE*' &&
item.tempFilterOperator != '*HASVALUE*'
"
row
>
<v-radio
:label="$ay.t('False')"
:value="false"
></v-radio>
<v-radio
:label="$ay.t('True')"
:value="true"
></v-radio>
</v-radio-group>
<v-btn
large
block
v-if="item.tempFilterOperator != null"
@click="addFilterCondition(item)"
><v-icon large>fa-plus</v-icon></v-btn
>
</div>
<!-- DECIMAL BUILDER -->
<div v-if="item.uiFieldDataType === 7">
<v-select
v-model="item.tempFilterOperator"
:items="selectLists.decimalFilterOperators"
item-text="name"
item-value="id"
:label="$ay.t('Filter')"
prepend-icon="fa-filter"
></v-select>
<gz-decimal
v-if="
item.tempFilterOperator != null &&
item.tempFilterOperator != '*NOVALUE*' &&
item.tempFilterOperator != '*HASVALUE*'
"
v-model="item.tempFilterValue"
clearable
></gz-decimal>
<v-btn
large
block
v-if="item.tempFilterOperator != null"
@click="addFilterCondition(item)"
><v-icon large>fa-plus</v-icon></v-btn
>
</div>
<!-- CURRENCY BUILDER -->
<div v-if="item.uiFieldDataType === 8">
<v-select
v-model="item.tempFilterOperator"
:items="selectLists.decimalFilterOperators"
item-text="name"
item-value="id"
:label="$ay.t('Filter')"
prepend-icon="fa-filter"
></v-select>
<gz-currency
v-if="
item.tempFilterOperator != null &&
item.tempFilterOperator != '*NOVALUE*' &&
item.tempFilterOperator != '*HASVALUE*'
"
v-model="item.tempFilterValue"
clearable
></gz-currency>
<v-btn
large
block
v-if="item.tempFilterOperator != null"
@click="addFilterCondition(item)"
><v-icon large>fa-plus</v-icon></v-btn
>
</div>
<!-- TAG BUILDER -->
<div v-if="item.uiFieldDataType === 9">
<v-select
v-model="item.tempFilterOperator"
:items="selectLists.tagFilterOperators"
item-text="name"
item-value="id"
:label="$ay.t('Filter')"
prepend-icon="fa-filter"
></v-select>
<gz-tag-picker
v-if="item.tempFilterOperator != null"
v-model="item.tempFilterValue"
></gz-tag-picker>
<v-btn
large
block
v-if="item.tempFilterOperator != null"
@click="addFilterCondition(item)"
><v-icon large>fa-plus</v-icon></v-btn
>
</div>
<!-- ENUM BUILDER -->
<div v-if="item.uiFieldDataType === 10">
<v-select
v-model="item.tempFilterOperator"
:items="selectLists.enumFilterOperators"
item-text="name"
item-value="id"
:label="$ay.t('Filter')"
prepend-icon="fa-filter"
></v-select>
<v-select
v-if="
item.tempFilterOperator != null &&
item.tempFilterOperator != '*NOVALUE*' &&
item.tempFilterOperator != '*HASVALUE*'
"
v-model="item.tempFilterValue"
:items="enumSelectionList(item.enumType)"
item-text="name"
item-value="id"
></v-select>
<v-btn
large
block
v-if="item.tempFilterOperator != null"
@click="addFilterCondition(item)"
><v-icon large>fa-plus</v-icon></v-btn
>
</div>
</div>
<div class="pt-6">
<!-- FILTER LIST -->
<template v-if="item.filter.items.length > 0">
<v-list elevation="2">
<v-subheader v-if="item.filter.items.length > 1">
<!-- AND / OR FILTER CONDITIONS -->
<v-radio-group v-model="item.filter.any" row>
<v-radio
:label="$ay.t('GridFilterDialogAndRadioText')"
:value="false"
></v-radio>
<v-radio
:label="$ay.t('GridFilterDialogOrRadioText')"
:value="true"
></v-radio> </v-radio-group
></v-subheader>
<v-list-item
v-for="(filterItem, index) in item.filter.items"
:key="index"
>
<v-list-item-content>
<v-list-item-title v-text="filterItem.display">
</v-list-item-title>
</v-list-item-content>
<v-list-item-action>
<v-btn
icon
@click="removeFilterCondition(item, index)"
>
<v-icon>fa-trash-alt</v-icon>
</v-btn>
</v-list-item-action>
</v-list-item>
</v-list>
</template>
<!-- <v-divider></v-divider>
<!-- INTEGER BUILDER -->
<div v-if="item.uiFieldDataType === 5">
<v-select
v-model="item.tempFilterOperator"
:items="selectLists.integerFilterOperators"
item-text="name"
item-value="id"
:label="$ay.t('Filter')"
prepend-icon="fa-filter"
></v-select>
<v-text-field
v-if="
item.tempFilterOperator != null &&
item.tempFilterOperator != '*NOVALUE*' &&
item.tempFilterOperator != '*HASVALUE*'
"
v-model="item.tempFilterValue"
clearable
type="number"
></v-text-field>
<v-btn
large
block
v-if="item.tempFilterOperator != null"
@click="addFilterCondition(item)"
><v-icon large>fa-plus</v-icon></v-btn
>
</div>
<!-- BOOL BUILDER -->
<div v-if="item.uiFieldDataType === 6">
<v-select
v-model="item.tempFilterOperator"
:items="selectLists.boolFilterOperators"
item-text="name"
item-value="id"
:label="$ay.t('Filter')"
prepend-icon="fa-filter"
></v-select>
<v-radio-group
v-model="item.tempFilterValue"
v-if="
item.tempFilterOperator != null &&
item.tempFilterOperator != '*NOVALUE*' &&
item.tempFilterOperator != '*HASVALUE*'
"
row
>
<v-radio
:label="$ay.t('False')"
:value="false"
></v-radio>
<v-radio
:label="$ay.t('True')"
:value="true"
></v-radio>
</v-radio-group>
<v-btn
large
block
v-if="item.tempFilterOperator != null"
@click="addFilterCondition(item)"
><v-icon large>fa-plus</v-icon></v-btn
>
</div>
<!-- DECIMAL BUILDER -->
<div v-if="item.uiFieldDataType === 7">
<v-select
v-model="item.tempFilterOperator"
:items="selectLists.decimalFilterOperators"
item-text="name"
item-value="id"
:label="$ay.t('Filter')"
prepend-icon="fa-filter"
></v-select>
<gz-decimal
v-if="
item.tempFilterOperator != null &&
item.tempFilterOperator != '*NOVALUE*' &&
item.tempFilterOperator != '*HASVALUE*'
"
v-model="item.tempFilterValue"
clearable
></gz-decimal>
<v-btn
large
block
v-if="item.tempFilterOperator != null"
@click="addFilterCondition(item)"
><v-icon large>fa-plus</v-icon></v-btn
>
</div>
<!-- CURRENCY BUILDER -->
<div v-if="item.uiFieldDataType === 8">
<v-select
v-model="item.tempFilterOperator"
:items="selectLists.decimalFilterOperators"
item-text="name"
item-value="id"
:label="$ay.t('Filter')"
prepend-icon="fa-filter"
></v-select>
<gz-currency
v-if="
item.tempFilterOperator != null &&
item.tempFilterOperator != '*NOVALUE*' &&
item.tempFilterOperator != '*HASVALUE*'
"
v-model="item.tempFilterValue"
clearable
></gz-currency>
<v-btn
large
block
v-if="item.tempFilterOperator != null"
@click="addFilterCondition(item)"
><v-icon large>fa-plus</v-icon></v-btn
>
</div>
<!-- TAG BUILDER -->
<div v-if="item.uiFieldDataType === 9">
<v-select
v-model="item.tempFilterOperator"
:items="selectLists.tagFilterOperators"
item-text="name"
item-value="id"
:label="$ay.t('Filter')"
prepend-icon="fa-filter"
></v-select>
<gz-tag-picker
v-if="item.tempFilterOperator != null"
v-model="item.tempFilterValue"
></gz-tag-picker>
<v-btn
large
block
v-if="item.tempFilterOperator != null"
@click="addFilterCondition(item)"
><v-icon large>fa-plus</v-icon></v-btn
>
</div>
<!-- ENUM BUILDER -->
<div v-if="item.uiFieldDataType === 10">
<v-select
v-model="item.tempFilterOperator"
:items="selectLists.enumFilterOperators"
item-text="name"
item-value="id"
:label="$ay.t('Filter')"
prepend-icon="fa-filter"
></v-select>
<v-select
v-if="
item.tempFilterOperator != null &&
item.tempFilterOperator != '*NOVALUE*' &&
item.tempFilterOperator != '*HASVALUE*'
"
v-model="item.tempFilterValue"
:items="enumSelectionList(item.enumType)"
item-text="name"
item-value="id"
></v-select>
<v-btn
large
block
v-if="item.tempFilterOperator != null"
@click="addFilterCondition(item)"
><v-icon large>fa-plus</v-icon></v-btn
>
</div>
</div>
<div class="pt-6">
<!-- FILTER LIST -->
<template v-if="item.filter.items.length > 0">
<v-list elevation="2">
<v-subheader v-if="item.filter.items.length > 1">
<!-- AND / OR FILTER CONDITIONS -->
<v-radio-group v-model="item.filter.any" row>
<v-radio
:label="$ay.t('GridFilterDialogAndRadioText')"
:value="false"
></v-radio>
<v-radio
:label="$ay.t('GridFilterDialogOrRadioText')"
:value="true"
></v-radio> </v-radio-group
></v-subheader>
<v-list-item
v-for="(filterItem, index) in item.filter.items"
:key="index"
>
<v-list-item-content>
<v-list-item-title v-text="filterItem.display">
</v-list-item-title>
</v-list-item-content>
<v-list-item-action>
<v-btn
icon
@click="removeFilterCondition(item, index)"
>
<v-icon>fa-trash-alt</v-icon>
</v-btn>
</v-list-item-action>
</v-list-item>
</v-list>
</template>
<!-- <v-divider></v-divider>
{{ item }} -->
</div>
</template>
</v-card-text>
</v-card>
</v-col>
</template>
</v-row>
</v-form>
</v-col>
</v-row>
</v-container>
</div>
</template>
</v-card-text>
</v-card>
</v-col>
</template>
</v-row>
</v-form>
</v-col>
</v-row>
</template>
<script>
/////////////////////////////////////////////////////////////////////////////////////////////////////////////