Merge pull request '#7542 use right panel' (!427) from 7542-warmfix-fixRightPanel into test
gitea/salix-front/pipeline/head This commit looks good Details
gitea/salix-front/pipeline/pr-dev This commit looks good Details
gitea/salix-front/pipeline/pr-master This commit looks good Details

Reviewed-on: #427
Reviewed-by: Alex Moreno <alexm@verdnatura.es>
This commit is contained in:
Jorge Penadés 2024-06-07 09:56:20 +00:00
commit 45998a972b
1 changed files with 128 additions and 133 deletions

View File

@ -622,145 +622,140 @@ setLogTree();
</QList> </QList>
</div> </div>
</div> </div>
<QDrawer v-model="stateStore.rightDrawer" show-if-above side="right" :width="300"> <Teleport to="#right-panel" v-if="stateStore.isHeaderMounted()">
<QScrollArea class="fit text-grey-8"> <QList dense>
<QList dense> <QSeparator />
<QSeparator /> <QItem class="q-mt-sm">
<QItem class="q-mt-sm"> <QInput
<QInput :label="t('globals.search')"
:label="t('globals.search')" v-model="searchInput"
v-model="searchInput" class="full-width"
class="full-width" clearable
clearable clear-icon="close"
clear-icon="close" @keyup.enter="() => selectFilter('search')"
@keyup.enter="() => selectFilter('search')" @focusout="() => selectFilter('search')"
@focusout="() => selectFilter('search')" @clear="() => selectFilter('search')"
@clear="() => selectFilter('search')" >
> <template #append>
<template #append> <QIcon name="info" class="cursor-pointer">
<QIcon name="info" class="cursor-pointer"> <QTooltip>{{ t('tooltips.search') }}</QTooltip>
<QTooltip>{{ t('tooltips.search') }}</QTooltip> </QIcon>
</QIcon> </template>
</template> </QInput>
</QInput> </QItem>
</QItem> <QItem>
<QItem> <VnSelect
class="full-width"
:label="t('globals.entity')"
v-model="selectedFilters.changedModel"
option-label="locale"
option-value="value"
:options="actions"
@update:model-value="selectFilter('action')"
hide-selected
/>
</QItem>
<QItem class="q-mt-sm">
<QOptionGroup
size="sm"
v-model="userRadio"
:options="userTypes"
color="primary"
@update:model-value="selectFilter('userRadio')"
right-label
>
<template #label="{ label }">
{{ t(`Users.${label}`) }}
</template>
</QOptionGroup>
</QItem>
<QItem class="q-mt-sm">
<QItemSection v-if="!workers">
<QSkeleton type="QInput" class="full-width" />
</QItemSection>
<QItemSection v-if="workers && userRadio !== null">
<VnSelect <VnSelect
class="full-width" class="full-width"
:label="t('globals.entity')" :label="t('globals.user')"
v-model="selectedFilters.changedModel" v-model="userSelect"
option-label="locale" option-label="name"
option-value="value" option-value="id"
:options="actions" :options="workers"
@update:model-value="selectFilter('action')" @update:model-value="selectFilter('userSelect')"
hide-selected hide-selected
/>
</QItem>
<QItem class="q-mt-sm">
<QOptionGroup
size="sm"
v-model="userRadio"
:options="userTypes"
color="primary"
@update:model-value="selectFilter('userRadio')"
right-label
> >
<template #label="{ label }"> <template #option="{ opt, itemProps }">
{{ t(`Users.${label}`) }} <QItem v-bind="itemProps" class="q-pa-xs row items-center">
<QItemSection class="col-3 items-center">
<VnAvatar :worker-id="opt.id" />
</QItemSection>
<QItemSection class="col-9 justify-center">
<span>{{ opt.name }}</span>
<span class="text-grey">{{ opt.nickname }}</span>
</QItemSection>
</QItem>
</template> </template>
</QOptionGroup> </VnSelect>
</QItem> </QItemSection>
<QItem class="q-mt-sm"> </QItem>
<QItemSection v-if="!workers"> <QItem class="q-mt-sm">
<QSkeleton type="QInput" class="full-width" /> <QInput
</QItemSection> :label="t('globals.changes')"
<QItemSection v-if="workers && userRadio !== null"> v-model="changeInput"
<VnSelect class="full-width"
class="full-width" clearable
:label="t('globals.user')" clear-icon="close"
v-model="userSelect" @keyup.enter="selectFilter('change')"
option-label="name" @focusout="selectFilter('change')"
option-value="id" @clear="selectFilter('change')"
:options="workers"
@update:model-value="selectFilter('userSelect')"
hide-selected
>
<template #option="{ opt, itemProps }">
<QItem
v-bind="itemProps"
class="q-pa-xs row items-center"
>
<QItemSection class="col-3 items-center">
<VnAvatar :worker-id="opt.id" />
</QItemSection>
<QItemSection class="col-9 justify-center">
<span>{{ opt.name }}</span>
<span class="text-grey">{{ opt.nickname }}</span>
</QItemSection>
</QItem>
</template>
</VnSelect>
</QItemSection>
</QItem>
<QItem class="q-mt-sm">
<QInput
:label="t('globals.changes')"
v-model="changeInput"
class="full-width"
clearable
clear-icon="close"
@keyup.enter="selectFilter('change')"
@focusout="selectFilter('change')"
@clear="selectFilter('change')"
>
<template #append>
<QIcon name="info" class="cursor-pointer">
<QTooltip max-width="250px">{{
t('tooltips.changes')
}}</QTooltip>
</QIcon>
</template>
</QInput>
</QItem>
<QItem
:class="index == 'create' ? 'q-mt-md' : 'q-mt-xs'"
v-for="(checkboxOption, index) in checkboxOptions"
:key="index"
> >
<QCheckbox <template #append>
size="sm" <QIcon name="info" class="cursor-pointer">
v-model="checkboxOption.selected" <QTooltip max-width="250px">{{
:label="t(`actions.${checkboxOption.label}`)" t('tooltips.changes')
@update:model-value="selectFilter" }}</QTooltip>
/> </QIcon>
</QItem> </template>
<QItem class="q-mt-sm"> </QInput>
<QInput </QItem>
class="full-width" <QItem
:label="t('globals.date')" :class="index == 'create' ? 'q-mt-md' : 'q-mt-xs'"
@click="dateFromDialog = true" v-for="(checkboxOption, index) in checkboxOptions"
@focus="(evt) => evt.target.blur()" :key="index"
@clear="selectFilter('date', 'to')" >
v-model="dateFrom" <QCheckbox
clearable size="sm"
clear-icon="close" v-model="checkboxOption.selected"
/> :label="t(`actions.${checkboxOption.label}`)"
</QItem> @update:model-value="selectFilter"
<QItem class="q-mt-sm"> />
<QInput </QItem>
class="full-width" <QItem class="q-mt-sm">
:label="t('to')" <QInput
@click="dateToDialog = true" class="full-width"
@focus="(evt) => evt.target.blur()" :label="t('globals.date')"
@clear="selectFilter('date', 'from')" @click="dateFromDialog = true"
v-model="dateTo" @focus="(evt) => evt.target.blur()"
clearable @clear="selectFilter('date', 'to')"
clear-icon="close" v-model="dateFrom"
/> clearable
</QItem> clear-icon="close"
</QList> />
</QScrollArea> </QItem>
</QDrawer> <QItem class="q-mt-sm">
<QInput
class="full-width"
:label="t('to')"
@click="dateToDialog = true"
@focus="(evt) => evt.target.blur()"
@clear="selectFilter('date', 'from')"
v-model="dateTo"
clearable
clear-icon="close"
/>
</QItem>
</QList>
</Teleport>
<QDialog v-model="dateFromDialog"> <QDialog v-model="dateFromDialog">
<QDate <QDate
:years-in-month-view="false" :years-in-month-view="false"