Update pankow which now has Dropdown replaced with SingleSelect

This commit is contained in:
Johannes Zellner
2025-04-02 15:02:31 +02:00
parent 5527926508
commit 2104df5a83
15 changed files with 78 additions and 75 deletions
+4 -4
View File
@@ -1,7 +1,7 @@
<script setup>
import { ref, computed, useTemplateRef, onMounted, onUnmounted } from 'vue';
import { Button, ButtonGroup, Dropdown, Icon, TableView, TextInput } from 'pankow';
import { Button, ButtonGroup, SingleSelect, Icon, TableView, TextInput } from 'pankow';
import { API_ORIGIN, APP_TYPES, HSTATES, ISTATES, RSTATES } from '../constants.js';
import AppsModel from '../models/AppsModel.js';
import ApplinksModel from '../models/ApplinksModel.js';
@@ -219,9 +219,9 @@ onUnmounted(() => {
{{ $t('apps.title') }}
<div style="display: flex; gap: 4px; flex-wrap: wrap; margin-top: 10px;">
<TextInput v-model="filter" :placeholder="$t('apps.searchPlaceholder')" />
<Dropdown class="pankow-no-mobile" outline tool v-if="profile.isAtLeastAdmin" :options="tagFilterOptions" option-key="id" option-label="name" v-model="tagFilter"></Dropdown>
<Dropdown class="pankow-no-mobile" outline tool v-if="profile.isAtLeastAdmin" :options="stateFilterOptions" option-key="id" v-model="stateFilter"></Dropdown>
<Dropdown class="pankow-no-mobile" outline tool v-if="profile.isAtLeastAdmin" :options="domainFilterOptions" option-key="id" option-label="domain" v-model="domainFilter"></Dropdown>
<SingleSelect class="pankow-no-mobile" v-if="profile.isAtLeastAdmin" :options="tagFilterOptions" option-key="id" option-label="name" v-model="tagFilter" />
<SingleSelect class="pankow-no-mobile" v-if="profile.isAtLeastAdmin" :options="stateFilterOptions" option-key="id" v-model="stateFilter" />
<SingleSelect class="pankow-no-mobile" v-if="profile.isAtLeastAdmin" :options="domainFilterOptions" option-key="id" option-label="domain" v-model="domainFilter" />
<Button tool @click="toggleView()" :icon="viewType === VIEW_TYPE.GRID ? 'fas fa-list' : 'fas fa-grip'"></Button>
</div>
</h1>
+2 -2
View File
@@ -5,7 +5,7 @@ const i18n = useI18n();
const t = i18n.t;
import { ref, reactive, onMounted, watch } from 'vue';
import { Button, ButtonGroup, Dropdown, Spinner, TextInput, MultiSelect } from 'pankow';
import { Button, ButtonGroup, SingleSelect, Spinner, TextInput, MultiSelect } from 'pankow';
import { useDebouncedRef, prettyDate, prettyLongDate, prettyEmailAddresses } from 'pankow/utils';
import Section from '../components/Section.vue';
import MailModel from '../models/MailModel.js';
@@ -91,7 +91,7 @@ onMounted(async () => {
<!-- TODO replace with fetch more on scroll -->
<div class="eventlog-filter">
<Dropdown v-model="perPage" :options="perPageOptions" option-key="value" option-label="name"/>
<SingleSelect v-model="perPage" :options="perPageOptions" option-key="value" option-label="name"/>
<ButtonGroup>
<Button tool secondary @click="onPrevPage()" :disabled="busy || page <= 1" icon="fa-solid fa-angle-double-left" v-tooltip="$t('main.pagination.prev')" />
+2 -3
View File
@@ -5,7 +5,7 @@ const i18n = useI18n();
const t = i18n.t;
import { ref, onMounted, useTemplateRef } from 'vue';
import { Button, Dropdown, Dialog, InputDialog, TextInput, InputGroup } from 'pankow';
import { Button, SingleSelect, Dialog, InputDialog, TextInput, InputGroup } from 'pankow';
import { TOKEN_TYPES } from '../constants.js';
import AppPasswords from '../components/AppPasswords.vue';
import SettingsItem from '../components/SettingsItem.vue';
@@ -338,12 +338,11 @@ onMounted(async () => {
<div style="font-weight: bold">{{ $t('profile.language') }}</div>
</div>
<div style="display: flex; align-items: center">
<Dropdown small tool outline v-model="language" :options="languages" option-label="display" option-key="id" @select="onSelectLanguage"/>
<SingleSelect v-model="language" :options="languages" option-label="display" option-key="id" @select="onSelectLanguage"/>
</div>
</SettingsItem>
<div style="display: flex; gap: 10px;">
<!-- <Button tool @click="onPasswordReset()">{{ $t('profile.passwordResetAction') }}</Button> -->
<Button tool @click="onPasswordChange()">{{ $t('profile.changePasswordAction') }}</Button>
<Button tool v-show="!user.source && !config.external2FA" @click="user.twoFactorAuthenticationEnabled ? onTwoFADisable() : onOpenTwoFASetupDialog()">{{ $t(user.twoFactorAuthenticationEnabled ? 'profile.disable2FAAction' : 'profile.enable2FAAction') }}</Button>
</div>
+2 -2
View File
@@ -5,7 +5,7 @@ const i18n = useI18n();
const t = i18n.t;
import { ref, onMounted, computed, useTemplateRef } from 'vue';
import { Button, ButtonGroup, TextInput, Dropdown, TableView, InputDialog } from 'pankow';
import { Button, ButtonGroup, TextInput, SingleSelect, TableView, InputDialog } from 'pankow';
import { ROLES } from '../constants.js';
import Section from '../components/Section.vue';
import UserDialog from '../components/UserDialog.vue';
@@ -225,7 +225,7 @@ onMounted(async () => {
<Section :title="$t('main.navbar.users')">
<template #header-buttons>
<TextInput v-model="search" placeholder="Search ..." />
<Dropdown outline tool :options="filterOptions" option-key="id" option-label="name" v-model="filter"></Dropdown>
<SingleSelect :options="filterOptions" option-key="id" option-label="name" v-model="filter" />
<Button icon="fa-solid fa-user-plus" @click="onEditOrAddUser()">{{ $t('users.newUserAction') }}</Button>
</template>
+4 -4
View File
@@ -5,7 +5,7 @@ const i18n = useI18n();
const t = i18n.t;
import { computed, ref, useTemplateRef, onMounted } from 'vue';
import { Button, ButtonGroup, Checkbox, Dialog, Dropdown, FormGroup, InputDialog, NumberInput, PasswordInput, TableView, TextInput } from 'pankow';
import { Button, ButtonGroup, Checkbox, Dialog, SingleSelect, FormGroup, InputDialog, NumberInput, PasswordInput, TableView, TextInput } from 'pankow';
import Section from '../components/Section.vue';
import StateLED from '../components/StateLED.vue';
import VolumesModel from '../models/VolumesModel.js';
@@ -232,7 +232,7 @@ onMounted(async () =>{
<FormGroup>
<label for="volumeMountType">{{ $t('volumes.mountType') }}</label>
<Dropdown id="volumeMountType" v-model="volumeDialogData.mountType" :options="mountTypeOptions" option-label="name" option-key="value" :disabled="volumeDialogData.mode === 'edit'"/>
<SingleSelect id="volumeMountType" v-model="volumeDialogData.mountType" :options="mountTypeOptions" option-label="name" option-key="value" :disabled="volumeDialogData.mode === 'edit'"/>
</FormGroup>
<FormGroup v-if="volumeDialogData.mountType === 'filesystem' || volumeDialogData.mountType === 'mountpoint'">
@@ -242,8 +242,8 @@ onMounted(async () =>{
<FormGroup v-if="volumeDialogData.mountType === 'ext4' || volumeDialogData.mountType === 'xfs'">
<label for="volumeDiskPath">{{ $t('volumes.addVolumeDialog.diskPath') }}</label>
<Dropdown id="volumeMountType" v-if="volumeDialogData.mountType === 'ext4'" v-model="volumeDialogData.diskPath" :options="volumeDialogData.ext4BlockDevices" option-label="label" option-key="path" :disabled="volumeDialogData.mode === 'edit'"/>
<Dropdown id="volumeMountType" v-if="volumeDialogData.mountType === 'xfs'" v-model="volumeDialogData.diskPath" :options="volumeDialogData.xfsBlockDevices" option-label="label" option-key="path" :disabled="volumeDialogData.mode === 'edit'"/>
<SingleSelect id="volumeMountType" v-if="volumeDialogData.mountType === 'ext4'" v-model="volumeDialogData.diskPath" :options="volumeDialogData.ext4BlockDevices" option-label="label" option-key="path" :disabled="volumeDialogData.mode === 'edit'"/>
<SingleSelect id="volumeMountType" v-if="volumeDialogData.mountType === 'xfs'" v-model="volumeDialogData.diskPath" :options="volumeDialogData.xfsBlockDevices" option-label="label" option-key="path" :disabled="volumeDialogData.mode === 'edit'"/>
</FormGroup>
<FormGroup v-if="volumeDialogData.mountType === 'cifs' || volumeDialogData.mountType === 'nfs' || volumeDialogData.mountType === 'sshfs'">