Skip to content

Commit

Permalink
fix: cleanup roles and limiter ui lists
Browse files Browse the repository at this point in the history 
Signed-off-by: Alexander Trost <[email protected]>
  • Loading branch information
@galexrt
galexrt committed Feb 3, 2025
1 parent 40226f0 commit fe5439f
Show file tree
Hide file tree
Showing 7 changed files with 282 additions and 271 deletions.
172 changes: 79 additions & 93 deletions app/components/rector/attrs/AttrRolesList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,105 +106,91 @@ const onSubmitThrottle = useThrottleFn(async () => {
</script>

<template>
<div class="relative overflow-x-auto">
<div class="px-1 sm:px-2">
<div class="flex flex-col lg:flex-row">
<div class="mt-2 flow-root basis-1/3">
<div v-if="can('RectorService.CreateRole').value" class="sm:flex sm:items-center">
<div class="sm:flex-auto">
<UForm :schema="schema" :state="state" @submit="refresh()">
<div class="flex flex-row gap-2">
<UFormGroup class="flex-1" name="grade" :label="$t('common.job')">
<ClientOnly>
<USelectMenu
v-model="state.job"
:options="availableJobs"
by="name"
searchable
:searchable-placeholder="$t('common.search_field')"
>
<template #label>
<template v-if="state.job">
<span class="truncate"
>{{ state.job?.label }} ({{ state.job.name }})</span
>
</template>
</template>

<template #option="{ option: job }">
<span class="truncate">{{ job.label }} ({{ job.name }})</span>
</template>
</USelectMenu>
</ClientOnly>
</UFormGroup>

<div class="flex flex-initial flex-col justify-end">
<UButton
:disabled="state.job === undefined || !canSubmit"
:loading="!canSubmit"
icon="i-mdi-plus"
@click="onSubmitThrottle"
>
{{ $t('common.create') }}
</UButton>
</div>
</div>
</UForm>
</div>
</div>

<div class="-my-2 mx-0 overflow-x-auto">
<div class="inline-block min-w-full px-1 py-2 align-middle">
<DataErrorBlock
v-if="error"
:title="$t('common.unable_to_load', [$t('common.job', 2)])"
:error="error"
:retry="refresh"
/>
<UTable
v-else
:columns="columns"
:rows="sortedRoles"
:loading="loading"
:empty-state="{
icon: 'i-mdi-account-group',
label: $t('common.not_found', [$t('common.role', 2)]),
}"
<UDashboardPanelContent class="flex flex-col gap-2 lg:flex-row">
<div class="basis-1/3">
<UForm v-if="can('RectorService.CreateRole').value" :schema="schema" :state="state" @submit="refresh()">
<div class="flex flex-row gap-2">
<UFormGroup class="flex-1" name="grade" :label="$t('common.job')">
<ClientOnly>
<USelectMenu
v-model="state.job"
:options="availableJobs"
by="name"
searchable
:searchable-placeholder="$t('common.search_field')"
>
<template #job-data="{ row: role }">
<div class="text-gray-900 dark:text-white">{{ role.jobLabel }} ({{ role.job }})</div>
<template #label>
<template v-if="state.job">
<span class="truncate">{{ state.job?.label }} ({{ state.job.name }})</span>
</template>
</template>

<template #actions-data="{ row: role }">
<div class="text-right">
<UTooltip :text="$t('common.show')">
<UButton
class="place-self-end"
variant="link"
icon="i-mdi-eye"
@click="selectedRole = role"
/>
</UTooltip>
</div>
<template #option="{ option: job }">
<span class="truncate">{{ job.label }} ({{ job.name }})</span>
</template>
</UTable>
</div>
</div>
</USelectMenu>
</ClientOnly>
</UFormGroup>

<UFormGroup name="submit" label="&nbsp;">
<UButton
:disabled="state.job === undefined || !canSubmit"
:loading="!canSubmit"
icon="i-mdi-plus"
@click="onSubmitThrottle"
>
{{ $t('common.create') }}
</UButton>
</UFormGroup>
</div>
<div class="mt-0 mt-4 w-full basis-2/3 lg:ml-2">
<AttrView
v-if="selectedRole"
:role-id="selectedRole.id"
@deleted="
selectedRole = undefined;
refresh();
"
/>
<template v-else>
<DataNoDataBlock icon="i-mdi-select" :message="$t('common.none_selected', [$t('common.job', 2)])" />
</UForm>

<div>
<DataErrorBlock
v-if="error"
:title="$t('common.unable_to_load', [$t('common.job', 2)])"
:error="error"
:retry="refresh"
/>
<UTable
v-else
:columns="columns"
:rows="sortedRoles"
:loading="loading"
:empty-state="{
icon: 'i-mdi-account-group',
label: $t('common.not_found', [$t('common.role', 2)]),
}"
>
<template #job-data="{ row: role }">
<div class="text-gray-900 dark:text-white">{{ role.jobLabel }} ({{ role.job }})</div>
</template>
</div>

<template #actions-data="{ row: role }">
<div class="text-right">
<UTooltip :text="$t('common.show')">
<UButton class="place-self-end" variant="link" icon="i-mdi-eye" @click="selectedRole = role" />
</UTooltip>
</div>
</template>
</UTable>
</div>
</div>
</div>

<div class="w-full basis-2/3">
<DataNoDataBlock
v-if="!selectedRole"
icon="i-mdi-select"
:message="$t('common.none_selected', [$t('common.job', 2)])"
/>
<AttrView
v-else
:role-id="selectedRole.id"
@deleted="
selectedRole = undefined;
refresh();
"
/>
</div>
</UDashboardPanelContent>
</template>
49 changes: 25 additions & 24 deletions app/components/rector/attrs/AttrView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -335,23 +335,24 @@ const onSubmitThrottle = useThrottleFn(async () => {
/>
</div>

<UDivider :label="$t('common.attributes', 2)" />
<UDivider :label="$t('common.attributes', 2)" class="mb-1" />

<div class="flex flex-col gap-4 py-2">
<div class="flex flex-col gap-2">
<div class="flex flex-row gap-1">
<UButton
class="flex-1"
:disabled="!changed || !canSubmit"
:loading="!canSubmit"
icon="i-mdi-content-save"
@click="onSubmitThrottle"
>
{{ $t('common.save', 1) }}
</UButton>

<UPopover>
<UButton :disabled="changed" color="gray" icon="i-mdi-form-textarea">{{
$t('common.paste')
}}</UButton>
<UButton :disabled="changed" color="gray" icon="i-mdi-form-textarea">
{{ $t('common.paste') }}
</UButton>

<template #panel>
<div class="p-4">
Expand All @@ -368,30 +369,27 @@ const onSubmitThrottle = useThrottleFn(async () => {
</template>
</UPopover>

<UButton icon="i-mdi-content-copy" :disabled="changed" color="white" @click="copyRole">{{
$t('common.copy')
}}</UButton>
<UButton icon="i-mdi-content-copy" :disabled="changed" color="white" @click="copyRole">
{{ $t('common.copy') }}
</UButton>
</div>

<UAccordion :items="accordionCategories" multiple :unmount="true">
<template #item="{ item: category }">
<div class="flex flex-col gap-2 divide-y divide-gray-100 dark:divide-gray-800">
<div class="flex flex-col divide-y divide-gray-100 dark:divide-gray-800">
<div
v-for="perm in permList.filter((p) => p.category === category.category)"
:key="perm.id"
class="flex flex-col gap-2"
>
<div class="flex flex-row gap-2">
<div class="my-auto flex flex-1 flex-col">
<span
:title="`${$t('common.id')}: ${perm.id}`"
class="text-gray-900 dark:text-white"
>
<div class="flex flex-row items-center gap-2">
<div class="flex-1">
<p :title="`${$t('common.id')}: ${perm.id}`" class="text-gray-900 dark:text-white">
{{ $t(`perms.${perm.category}.${perm.name}.key`) }}
</span>
<span class="text-base-500">
</p>
<p class="text-base-500">
{{ $t(`perms.${perm.category}.${perm.name}.description`) }}
</span>
</p>
</div>

<UButtonGroup class="inline-flex flex-initial">
Expand All @@ -414,14 +412,17 @@ const onSubmitThrottle = useThrottleFn(async () => {
</UButtonGroup>
</div>

<AttrViewAttr
<template
v-for="attr in attrList.filter((a) => a.permissionId === perm.id)"
:key="attr.attrId"
v-model:states="attrStates"
:attribute="attr"
:permission="perm"
@changed="changed = true"
/>
>
<AttrViewAttr
v-model:states="attrStates"
:attribute="attr"
:permission="perm"
@changed="changed = true"
/>
</template>
</div>
</div>
</template>
Expand Down
40 changes: 24 additions & 16 deletions app/components/rector/attrs/AttrViewAttr.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,6 +166,8 @@ onBeforeMount(async () => {
});
}
});
const { game } = useAppConfig();
</script>

<template>
Expand All @@ -183,20 +185,19 @@ onBeforeMount(async () => {
validValues?.validValues &&
validValues?.validValues.oneofKind === 'stringList'
"
class="flex flex-row flex-wrap gap-4"
class="flex flex-row flex-wrap gap-3"
>
<div
v-for="value in validValues.validValues.stringList.strings"
:key="value"
class="flex flex-initial flex-row flex-nowrap"
class="flex flex-initial flex-row flex-nowrap gap-1"
>
<UCheckbox
<UToggle
:name="value"
:model-value="!!currentValue.validValues.stringList.strings.find((v) => v === value)"
class="my-auto size-4 rounded border-base-300"
@click="toggleStringListValue(value)"
/>
<span class="ml-1">{{
<span>{{
$t(`perms.${permission.category}.${permission.name}.attrs.${value.replaceAll('.', '_')}`)
}}</span>
</div>
Expand All @@ -208,16 +209,15 @@ onBeforeMount(async () => {
validValues?.validValues.oneofKind === 'jobList' &&
jobs !== undefined
"
class="flex flex-row flex-wrap gap-4"
class="flex flex-row flex-wrap gap-3"
>
<div v-for="job in jobs" :key="job.name" class="flex flex-initial flex-row flex-nowrap">
<UCheckbox
<div v-for="job in jobs" :key="job.name" class="flex flex-initial flex-row flex-nowrap gap-1">
<UToggle
:name="job.name"
:model-value="!!currentValue.validValues.jobList?.strings.find((v) => v === job.name)"
class="my-auto size-4 rounded border-base-300"
@click="toggleJobListValue(job.name)"
/>
<span class="ml-1">{{ job.label }}</span>
<span>{{ job.label }}</span>
</div>
</div>
<div
Expand All @@ -228,18 +228,24 @@ onBeforeMount(async () => {
"
class="flex flex-col gap-2"
>
<div v-for="job in jobs" :key="job.name" class="flex flex-initial flex-row flex-nowrap gap-2">
<UCheckbox
<div
v-for="job in jobs"
:key="job.name"
class="flex flex-initial flex-row flex-nowrap items-center gap-2"
>
<UToggle
:name="job.name"
:model-value="!!currentValue.validValues?.jobGradeList.jobs[job.name]"
class="my-auto size-4 rounded border-base-300"
@change="toggleJobGradeValue(job, $event)"
/>
<span class="my-auto flex-1">{{ job.label }}</span>

<span class="flex-1">{{ job.label }}</span>

<ClientOnly>
<USelectMenu
class="flex-1"
nullable
:disabled="!currentValue.validValues?.jobGradeList.jobs[job.name]"
:options="job.grades"
:search-attributes="['label']"
by="grade"
Expand All @@ -250,8 +256,10 @@ onBeforeMount(async () => {
<template #label>
<template v-if="job.grades && currentValue.validValues.jobGradeList.jobs[job.name]">
<span class="truncate">{{
job.grades[(currentValue.validValues.jobGradeList.jobs[job.name] ?? 1) - 1]
?.label ?? $t('common.na')
job.grades[
(currentValue.validValues.jobGradeList.jobs[job.name] ??
game.startJobGrade) - 1
]?.label ?? $t('common.na')
}}</span>
</template>
</template>
Expand Down
Loading

0 comments on commit fe5439f

Please sign in to comment.