add new group table and filter for member table
This commit is contained in:
Adrian Zürcher
61
src/vueLib/tables/group/GroupTable.ts
Normal file
61
src/vueLib/tables/group/GroupTable.ts
Normal file
@@ -0,0 +1,61 @@
|
||||
import { appApi } from 'src/boot/axios';
|
||||
import { ref, computed } from 'vue';
|
||||
import type { Members } from 'src/vueLib/models/member';
|
||||
import { useNotify } from 'src/vueLib/general/useNotify';
|
||||
import { i18n } from 'boot/lang';
|
||||
|
||||
export function useGroupTable() {
|
||||
const groups = ref<Members>([]);
|
||||
|
||||
const pagination = ref({
|
||||
sortBy: 'firstName',
|
||||
descending: false,
|
||||
page: 1,
|
||||
rowsPerPage: 20,
|
||||
});
|
||||
|
||||
const columns = computed(() => [
|
||||
{
|
||||
name: 'name',
|
||||
align: 'left' as const,
|
||||
label: i18n.global.t('name'),
|
||||
field: 'name',
|
||||
sortable: true,
|
||||
},
|
||||
{ name: 'option', align: 'center' as const, label: '', field: 'option', icon: 'option' },
|
||||
]);
|
||||
|
||||
const { NotifyResponse } = useNotify();
|
||||
|
||||
const loading = ref(false);
|
||||
|
||||
//updates group list from database
|
||||
async function updateGroups() {
|
||||
loading.value = true;
|
||||
|
||||
await appApi
|
||||
.get('groups')
|
||||
.then((resp) => {
|
||||
if (resp.data === null) {
|
||||
groups.value = [];
|
||||
return;
|
||||
}
|
||||
groups.value = resp.data as Members;
|
||||
})
|
||||
|
||||
.catch((err) => {
|
||||
NotifyResponse(err, 'error');
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
groups,
|
||||
pagination,
|
||||
columns,
|
||||
loading,
|
||||
updateGroups,
|
||||
};
|
||||
}
|
||||
267
src/vueLib/tables/group/GroupTable.vue
Normal file
267
src/vueLib/tables/group/GroupTable.vue
Normal file
@@ -0,0 +1,267 @@
|
||||
<template>
|
||||
<div class="q-pa-md">
|
||||
<q-table
|
||||
flat
|
||||
bordered
|
||||
ref="tableRef"
|
||||
title="groups"
|
||||
title-class="text-bold text-blue-9"
|
||||
:no-data-label="$t('noDataAvailable')"
|
||||
:loading-label="$t('loading')"
|
||||
:rows-per-page-label="$t('recordsPerPage')"
|
||||
:selected-rows-label="(val) => val + ' ' + $t('recordSelected')"
|
||||
:rows="groups"
|
||||
:columns="columns"
|
||||
row-key="id"
|
||||
v-model:pagination="pagination"
|
||||
:loading="loading"
|
||||
:filter="filter"
|
||||
:selection="selectOption ? 'multiple' : 'none'"
|
||||
v-model:selected="selected"
|
||||
binary-state-sort
|
||||
class="bigger-table-text"
|
||||
>
|
||||
<template v-slot:top-left>
|
||||
<q-btn-group push flat style="color: grey">
|
||||
<q-btn
|
||||
v-if="user.isPermittedTo('group', 'write')"
|
||||
dense
|
||||
flat
|
||||
icon="add"
|
||||
@click="openGroupDialog()"
|
||||
>
|
||||
<q-tooltip>{{ $t('addNewgroup') }}</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
v-if="user.isPermittedTo('group', 'write') || user.isPermittedTo('group', 'delete')"
|
||||
dense
|
||||
flat
|
||||
style="color: grey"
|
||||
:icon="selectOption ? 'check_box' : 'check_box_outline_blank'"
|
||||
@click="selectOption = !selectOption"
|
||||
>
|
||||
<q-tooltip>{{ $t('selectgroupOptions') }}</q-tooltip>
|
||||
</q-btn>
|
||||
</q-btn-group>
|
||||
<div v-if="selectOption && selected.length > 0">
|
||||
<q-btn flat dense icon="more_vert" @click="openSubmenu = true" />
|
||||
<q-menu v-if="openSubmenu" anchor="bottom middle" self="top middle">
|
||||
<q-item
|
||||
v-if="user.isPermittedTo('group', 'delete')"
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="openRemoveDialog(...selected)"
|
||||
class="text-negative"
|
||||
>{{ $t('delete') }}</q-item
|
||||
>
|
||||
</q-menu>
|
||||
</div>
|
||||
<div v-if="selectOption && selected.length > 0" class="text-weight-bold">
|
||||
{{ $t('selected') }}: {{ selected.length }}
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:top-right>
|
||||
<q-input filled dense debounce="300" v-model="filter" :placeholder="$t('search')">
|
||||
<template v-slot:append>
|
||||
<q-icon name="search" />
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
<template v-slot:body-cell="props">
|
||||
<q-td
|
||||
:props="props"
|
||||
:style="user.isPermittedTo('group', 'write') ? 'cursor: pointer' : ''"
|
||||
@click="
|
||||
user.isPermittedTo('group', 'write') && openGroupDialog(props.col.label, props.row)
|
||||
"
|
||||
>
|
||||
{{ props.value }}
|
||||
</q-td>
|
||||
</template>
|
||||
<template v-slot:body-cell-option="props">
|
||||
<q-td :props="props">
|
||||
<q-btn
|
||||
v-if="user.isPermittedTo('group', 'write') || user.isPermittedTo('group', 'delete')"
|
||||
flat
|
||||
dense
|
||||
icon="more_vert"
|
||||
@click="openSubmenu = true"
|
||||
/>
|
||||
<q-menu v-if="openSubmenu" anchor="top right" self="top left">
|
||||
<q-item
|
||||
v-if="user.isPermittedTo('group', 'delete')"
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="openRemoveDialog(props.row)"
|
||||
class="text-negative"
|
||||
title="zu"
|
||||
>{{ $t('delete') }}</q-item
|
||||
>
|
||||
</q-menu>
|
||||
</q-td>
|
||||
</template>
|
||||
</q-table>
|
||||
</div>
|
||||
<DialogFrame ref="groupDialog" :header-title="$t('addNewgroup')" :height="600" :width="500">
|
||||
<q-form ref="form">
|
||||
<div class="row justify-center q-gutter-md">
|
||||
<q-input
|
||||
class="q-ml-md col-5 required"
|
||||
:label="$t('groupName')"
|
||||
filled
|
||||
:rules="[(val) => !!val || $t('groupNameIsRequired')]"
|
||||
v-model="localGroup.name"
|
||||
autofocus
|
||||
@keyup.enter="save()"
|
||||
></q-input>
|
||||
</div>
|
||||
</q-form>
|
||||
<div class="row justify-center">
|
||||
<q-btn class="q-ma-md" color="primary" no-caps @click="save()">{{ $t('save') }}</q-btn>
|
||||
</div>
|
||||
</DialogFrame>
|
||||
<OkDialog
|
||||
ref="okDialog"
|
||||
:dialog-label="$t('delete')"
|
||||
:text="$t('doYouWantToDelete') + ' ' + deleteText"
|
||||
label-color="red"
|
||||
:button-cancel-label="$t('cancel')"
|
||||
:button-ok-label="$t('confirm')"
|
||||
:button-ok-flat="false"
|
||||
button-ok-color="red"
|
||||
v-on:update-confirm="(val) => removegroup(...val)"
|
||||
></OkDialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { appApi } from 'src/boot/axios';
|
||||
import { ref, onMounted } from 'vue';
|
||||
import DialogFrame from 'src/vueLib/dialog/DialogFrame.vue';
|
||||
import OkDialog from 'src/components/dialog/OkDialog.vue';
|
||||
import { useNotify } from 'src/vueLib/general/useNotify';
|
||||
import { useGroupTable } from './GroupTable';
|
||||
import { databaseName } from 'src/vueLib/models/settings';
|
||||
import { useUserStore } from 'src/vueLib/login/userStore';
|
||||
import { i18n } from 'src/boot/lang';
|
||||
import type { Group, Groups } from 'src/vueLib/models/group';
|
||||
|
||||
export interface groupDialog {
|
||||
getSelected: () => Groups;
|
||||
}
|
||||
|
||||
const { NotifyResponse } = useNotify();
|
||||
const groupDialog = ref();
|
||||
const form = ref();
|
||||
const localGroup = ref<Group>({} as Group);
|
||||
const localLabel = ref('');
|
||||
const okDialog = ref();
|
||||
const deleteText = ref('');
|
||||
const selectOption = ref(false);
|
||||
const selected = ref<Groups>([]);
|
||||
const openSubmenu = ref(false);
|
||||
const filter = ref('');
|
||||
const user = useUserStore();
|
||||
|
||||
const { groups, pagination, loading, columns, updateGroups } = useGroupTable();
|
||||
|
||||
//load on mounting page
|
||||
onMounted(() => {
|
||||
loading.value = true;
|
||||
|
||||
appApi
|
||||
.post('database/open', { dbPath: databaseName.value, create: true })
|
||||
.then(() => {
|
||||
updateGroups().catch((err) => {
|
||||
NotifyResponse(err, 'error');
|
||||
});
|
||||
})
|
||||
.catch((err) => NotifyResponse(err, 'error'))
|
||||
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
});
|
||||
|
||||
//opens dialog for one value
|
||||
function openGroupDialog(label?: string, group?: Group) {
|
||||
localLabel.value = label!;
|
||||
localGroup.value = group ? group : <Group>{ name: '' };
|
||||
groupDialog.value?.open();
|
||||
}
|
||||
|
||||
//opens remove dialog
|
||||
function openRemoveDialog(...groups: Groups) {
|
||||
if (groups.length === 1) {
|
||||
deleteText.value = "'" + localGroup.value.name + "''";
|
||||
} else {
|
||||
deleteText.value = String(groups.length) + ' ' + i18n.global.t('groups');
|
||||
}
|
||||
okDialog.value?.open(groups);
|
||||
}
|
||||
|
||||
//remove group from database
|
||||
function removegroup(...removegroups: Groups) {
|
||||
const groupIds: number[] = [];
|
||||
|
||||
removegroups.forEach((group: Group) => {
|
||||
groupIds.push(group.id);
|
||||
});
|
||||
|
||||
appApi
|
||||
.post('groups/delete', { ids: groupIds })
|
||||
.then(() => {
|
||||
updateGroups().catch((err) => {
|
||||
NotifyResponse(err, 'error');
|
||||
});
|
||||
selected.value = [];
|
||||
})
|
||||
.catch((err) => NotifyResponse(err, 'error'))
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
async function save() {
|
||||
const valid = await form.value.validate();
|
||||
|
||||
if (!valid) return;
|
||||
|
||||
let query = 'groups/edit';
|
||||
let payload = JSON.stringify([localGroup.value]);
|
||||
|
||||
if (!localGroup.value.id) {
|
||||
query = 'groups/add';
|
||||
payload = JSON.stringify(localGroup.value);
|
||||
}
|
||||
|
||||
appApi
|
||||
.post(query, payload)
|
||||
.then(() => {
|
||||
updateGroups().catch((err) => NotifyResponse(err, 'error'));
|
||||
groupDialog.value.close();
|
||||
})
|
||||
.catch((err) => NotifyResponse(err, 'error'));
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@keyframes blink-yellow {
|
||||
0%,
|
||||
100% {
|
||||
background-color: yellow;
|
||||
}
|
||||
50% {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.bigger-table-text .q-table__middle td {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.bigger-table-text .q-table__top,
|
||||
.bigger-table-text .q-table__bottom,
|
||||
.bigger-table-text th {
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user