Asset filter updates. (#189)

* Asset filter updates.

* User filter sidebar.

* Asset user filter, perm group lastname filter, permissions filter

* lint fixes.

* Package updates.

---------

Co-authored-by: Tomas Hermanek <[email protected]>

package.json

@@ -27,7 +27,7 @@
  "@vuelidate/validators": "^2.0.4",
  "@vueuse/core": "10.11.0",
  "@vueuse/integrations": "10.11.0",
- "axios": "^1.7.2",
+ "axios": "^1.7.7",
  "cropperjs": "^1.6.2",
  "jwt-decode": "^4.0.0",
  "pinia": "^2.1.7",
@@ -73,7 +73,7 @@
  "stylelint-config-recommended-vue": "^1.5.0",
  "stylelint-config-standard-scss": "^13.1.0",
  "typescript": "5.4.5",
- "vite": "^5.3.3",
+ "vite": "^5.4.8",
  "vite-plugin-vuetify": "^2.0.3",
  "vue-tsc": "2.0.24"
  }

src/locales/en.ts

@@ -18,6 +18,7 @@ import keyword from '@/locales/en/coreDam/keyword.json'
 import podcast from '@/locales/en/coreDam/podcast.json'
 import podcastEpisode from '@/locales/en/coreDam/podcastEpisode.json'
 import user from '@/locales/en/coreDam/user.json'
+import anzuUser from '@/locales/en/common/anzuUser.json'
 import videoShow from '@/locales/en/coreDam/videoShow.json'
 import videoShowEpisode from '@/locales/en/coreDam/videoShowEpisode.json'
 import { messagesEn } from '@anzusystems/common-admin'
@@ -28,7 +29,16 @@ import breadcrumb from '@/locales/en/breadcrumb.json'
 import assetLicenceGroup from '@/locales/en/coreDam/assetLicenceGroup.json'
 
 export default {
- common: messagesEn.common,
+ common: {
+ ...messagesEn.common,
+ anzuUser: {
+ ...messagesEn.common.anzuUser,
+ filter: {
+ ...messagesEn.common.anzuUser.filter,
+ ...anzuUser.filter
+ }
+ }
+ },
  $vuetify: messagesEn.$vuetify,
  coreDam: {
  asset,

src/locales/en/common/anzuUser.json

@@ -0,0 +1,6 @@
+{
+ "filter": {
+ "lastName": "Last Name",
+ "permissionGroups": "Permission Groups"
+ }
+}

src/locales/en/coreDam/asset.json

@@ -7,9 +7,12 @@
  },
  "filter": {
  "text": "Text",
+ "assetAndMainFileIds": "Id",
  "type": "Type",
  "inPodcast": "In podcast",
  "keywordIds": "Keyword ids",
+ "authorIds": "Authors",
+ "createdByIds": "CreatedBy",
  "fromRss": "From RSS",
  "distributedInServices": "Distributed in services",
  "slotNames": "Slot names",

src/locales/sk.ts

@@ -26,9 +26,19 @@ import jsValidation from '@/locales/sk/error/jsValidation.json'
 import breadcrumb from '@/locales/sk/breadcrumb.json'
 import audioFile from '@/locales/sk/coreDam/audioFile.json'
 import videoFile from '@/locales/sk/coreDam/videoFile.json'
+import anzuUser from '@/locales/sk/common/anzuUser.json'
 
 export default {
- common: messagesSk.common,
+ common: {
+ ...messagesSk.common,
+ anzuUser: {
+ ...messagesSk.common.anzuUser,
+ filter: {
+ ...messagesSk.common.anzuUser.filter,
+ ...anzuUser.filter
+ }
+ }
+ },
  $vuetify: messagesSk.$vuetify,
  coreDam: {
  asset,

src/locales/sk/common/anzuUser.json

@@ -0,0 +1,6 @@
+{
+ "filter": {
+ "lastName": "Priezvisko",
+ "permissionGroups": "Skupiny oprávnení"
+ }
+}

src/locales/sk/coreDam/asset.json

@@ -7,9 +7,12 @@
  },
  "filter": {
  "text": "Text",
+ "assetAndMainFileIds": "Id",
  "type": "Typ",
  "inPodcast": "V podcastoch",
  "keywordIds": "Klúčové slová",
+ "authorIds": "Autori",
+ "createdByIds": "Založené používateľmi",
  "fromRss": "Z RSS",
  "distributedInServices": "Distribuované v službách",
  "slotNames": "Mená slotov",

src/model/common/filter/AnzuUserFilter.ts

@@ -13,6 +13,12 @@ const filter = reactive({
  enabled: {
  ...makeFilter({ name: 'enabled' }),
  },
+ lastName: {
+ ...makeFilter({ name: 'lastName', variant: 'startsWith', field: 'person.lastName' }),
+ },
+ permissionGroups: {
+ ...makeFilter({ name: 'permissionGroups', variant: 'custom', multiple: true, default: [] }),
+ },
 })
 
 export function useAnzuUserFilter() {

src/model/coreDam/filter/AssetFilter.ts

@@ -21,6 +21,15 @@ const filter = reactive({
  keywordIds: {
  ...makeFilter({ name: 'keywordIds', default: [], multiple: true }),
  },
+ assetAndMainFileIds: {
+ ...makeFilter({ name: 'assetAndMainFileIds' }),
+ },
+ authorIds: {
+ ...makeFilter({ name: 'authorIds', default: [], multiple: true }),
+ },
+ createdByIds: {
+ ...makeFilter({ name: 'createdByIds', default: [], multiple: true }),
+ },
  mostDominantColor: {
  ...makeFilter({ name: 'mostDominantColor', default: [] }),
  },

src/views/common/anzuUser/components/AnzuUserDatatable.vue

@@ -44,6 +44,8 @@ const onRowClick = (event: unknown, { item }: { item: DatatableItem }) => {
 const { columnsVisible, columnsAll, columnsHidden, updateSortBy, pagination } = createDatatableColumnsConfig(
  [
  { key: 'id' },
+ { key: 'person.firstName' },
+ { key: 'person.lastName' },
  { key: 'email' },
  { key: 'enabled' },
  { key: 'roles' },
@@ -106,6 +108,12 @@ defineExpose({
  :value="item.enabled"
  />
  </template>
+ <template #item.person.firstName="{ item }: { item: DatatableItem }">
+ {{ item.person.firstName }}
+ </template>
+ <template #item.person.lastName="{ item }: { item: DatatableItem }">
+ {{ item.person.lastName }}
+ </template>
  <template #item.roles="{ item }: { item: DatatableItem }">
  <AChipNoLink
  v-for="role in item.roles"

src/views/common/anzuUser/components/AnzuUserFilter.vue

@@ -1,7 +1,12 @@
 <script lang="ts" setup>
 import { useAnzuUserFilter } from '@/model/common/filter/AnzuUserFilter'
-import { AFilterBooleanSelect, AFilterInteger, AFilterString, AFilterWrapper } from '@anzusystems/common-admin'
+import {
+ AFilterInteger,
+ AFilterString,
+ AFilterWrapper,
+} from '@anzusystems/common-admin'
 import { ref } from 'vue'
+import PermissionGroupRemoteSelect from '@/views/common/permissionGroup/components/PermissionGroupRemoteSelect.vue'
 
 const emit = defineEmits<{
  (e: 'submitFilter'): void
@@ -33,6 +38,7 @@ const onAnyFilterUpdate = () => {
  >
  <AFilterWrapper
  :touched="touched"
+ enable-advanced
  @reset-filter="resetFilter"
  >
  <VRow align="start">
@@ -58,12 +64,26 @@ const onAnyFilterUpdate = () => {
  cols="12"
  sm="5"
  >
- <AFilterBooleanSelect
- v-model="filter.enabled"
+ <AFilterString
+ v-model="filter.lastName"
  @update:model-value="onAnyFilterUpdate"
  />
  </VCol>
  </VRow>
+
+ <template #advanced>
+ <VRow>
+ <VCol
+ cols="12"
+ sm="5"
+ >
+ <PermissionGroupRemoteSelect
+ v-model="filter.permissionGroups"
+ @update:model-value="onAnyFilterUpdate"
+ />
+ </VCol>
+ </VRow>
+ </template>
  </AFilterWrapper>
  </VForm>
 </template>

src/views/common/anzuUser/components/AnzuUserRemoteSelect.vue

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import { useVModels } from '@vueuse/core'
+import type { Filter } from '@anzusystems/common-admin'
+import { AFilterRemoteAutocomplete } from '@anzusystems/common-admin'
+import { useAnzuUserFilter } from '@/model/common/filter/AnzuUserFilter'
+import { useAnzuUserSelectAction } from '@/views/common/anzuUser/composables/anzuUserActions'
+import { damClient } from '@/services/api/clients/damClient'
+
+const props = withDefaults(
+ defineProps<{
+ modelValue: Filter
+ }>(),
+ {}
+)
+const emit = defineEmits<{
+ (e: 'update:modelValue', data: Filter): void
+}>()
+const { modelValue } = useVModels(props, emit)
+const { fetchItems, fetchItemsByIds } = useAnzuUserSelectAction(damClient)
+
+const innerFilter = useAnzuUserFilter()
+</script>
+
+<template>
+ <AFilterRemoteAutocomplete
+ v-model="modelValue"
+ :fetch-items="fetchItems"
+ :fetch-items-by-ids="fetchItemsByIds"
+ :inner-filter="innerFilter"
+ filter-by-field="lastName"
+ />
+</template>

src/views/common/anzuUser/composables/anzuUserActions.ts

@@ -1,5 +1,11 @@
-import type { AnzuUser, FilterBag, Pagination } from '@anzusystems/common-admin'
-import { isInt, useAlerts } from '@anzusystems/common-admin'
+import type {
+ AnzuUser,
+ DamUser,
+ FilterBag, IntegerId,
+ Pagination,
+ ValueObjectOption
+} from '@anzusystems/common-admin'
+import { fetchDamUserList, fetchDamUserListByIds, isInt, useAlerts } from '@anzusystems/common-admin'
 import { ref } from 'vue'
 import type { AxiosInstance } from 'axios'
 import { useAnzuUserApi } from '@/services/api/common/anzuUserApi'
@@ -12,7 +18,7 @@ import { useCachedPermissionGroups } from '@/views/common/permissionGroup/compos
 
 const { showValidationError, showRecordWas, showErrorsDefault } = useAlerts()
 
-const datatableHiddenColumns = ref<Array<string>>(['id'])
+const datatableHiddenColumns = ref<Array<string>>(['id', 'person.firstName', 'person.lastName'])
 const listLoading = ref(false)
 const detailLoading = ref(false)
 const saveButtonLoading = ref(false)
@@ -112,3 +118,28 @@ export const useAnzuUserActions = (client: () => AxiosInstance) => {
  resetAnzuUserStore: anzuUserOneStore.reset,
  }
 }
+
+export const useAnzuUserSelectAction = (client: () => AxiosInstance) => {
+ const mapToValueObject = (user: DamUser): ValueObjectOption<IntegerId> => ({
+ title: '' === user.person.fullName ? user.email : user.person.fullName,
+ value: user.id,
+ })
+
+ const mapToValueObjects = (users: DamUser[]): ValueObjectOption<IntegerId>[] => {
+ return users.map((user: DamUser) => mapToValueObject(user))
+ }
+
+ const fetchItems = async (pagination: Pagination, filterBag: FilterBag) => {
+ return mapToValueObjects(await fetchDamUserList(client, pagination, filterBag))
+ }
+
+ const fetchItemsByIds = async (ids: IntegerId[]) => {
+ return mapToValueObjects(await fetchDamUserListByIds(client, ids))
+ }
+
+ return {
+ mapToValueObject,
+ fetchItems,
+ fetchItemsByIds,
+ }
+}

src/views/common/permissionGroup/components/PermissionGroupRemoteSelect.vue

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import { useVModels } from '@vueuse/core'
+import type { Filter } from '@anzusystems/common-admin'
+import { AFilterRemoteAutocomplete } from '@anzusystems/common-admin'
+import { damClient } from '@/services/api/clients/damClient'
+import { usePermissionGroupSelectAction } from '@/views/common/permissionGroup/composables/permissionGroupActions'
+import { usePermissionGroupFilter } from '@/model/common/filter/PermissionGroupFilter'
+
+const props = withDefaults(
+ defineProps<{
+ modelValue: Filter
+ }>(),
+ {}
+)
+const emit = defineEmits<{
+ (e: 'update:modelValue', data: Filter): void
+}>()
+const { modelValue } = useVModels(props, emit)
+const { fetchItems, fetchItemsByIds } = usePermissionGroupSelectAction(damClient)
+
+const innerFilter = usePermissionGroupFilter()
+</script>
+
+<template>
+ <AFilterRemoteAutocomplete
+ v-model="modelValue"
+ :fetch-items="fetchItems"
+ :fetch-items-by-ids="fetchItemsByIds"
+ :inner-filter="innerFilter"
+ filter-by-field="title"
+ />
+</template>

src/views/common/permissionGroup/composables/permissionGroupActions.ts

@@ -1,4 +1,10 @@
-import type { FilterBag, IntegerId, Pagination, PermissionGroup, ValueObjectOption } from '@anzusystems/common-admin'
+import type {
+ FilterBag,
+ IntegerId,
+ Pagination,
+ PermissionGroup,
+ ValueObjectOption
+} from '@anzusystems/common-admin'
 import { useAlerts } from '@anzusystems/common-admin'
 import { ref } from 'vue'
 import type { AxiosInstance } from 'axios'
@@ -152,3 +158,33 @@ export const usePermissionGroupActions = (client: () => AxiosInstance) => {
  resetPermissionGroupStore: permissionGroupOneStore.reset,
  }
 }
+
+export const usePermissionGroupSelectAction = (client: () => AxiosInstance) => {
+ const {
+ apiFetchPermissionGroupList,
+ apiFetchPermissionGroupListByIds,
+ } = usePermissionGroupApi(client)
+
+ const mapToValueObject = (permissionGroup: PermissionGroup): ValueObjectOption<IntegerId> => ({
+ title: permissionGroup.title,
+ value: permissionGroup.id,
+ })
+
+ const mapToValueObjects = (permissionGroups: PermissionGroup[]): ValueObjectOption<IntegerId>[] => {
+ return permissionGroups.map((permissionGroup: PermissionGroup) => mapToValueObject(permissionGroup))
+ }
+
+ const fetchItems = async (pagination: Pagination, filterBag: FilterBag) => {
+ return mapToValueObjects(await apiFetchPermissionGroupList(pagination, filterBag))
+ }
+
+ const fetchItemsByIds = async (ids: IntegerId[]) => {
+ return mapToValueObjects(await apiFetchPermissionGroupListByIds(ids))
+ }
+
+ return {
+ mapToValueObject,
+ fetchItems,
+ fetchItemsByIds,
+ }
+}