dam user detail and edit - implement Asset Licence Groups

src/locales/en/coreDam/user.json

@@ -12,6 +12,7 @@
     "enabled": "Enabled",
     "plainPassword": "New password",
     "assetLicences": "Licences",
+    "licenceGroups": "Licence groups",
     "userToExtSystems": "User to External Systems",
     "adminToExtSystems": "Admin to External Systems",
     "superAdmin": "Super admin",

src/locales/sk/coreDam/user.json

@@ -12,6 +12,7 @@
     "enabled": "Povolený",
     "plainPassword": "Nové heslo",
     "assetLicences": "Licencie",
+    "licenceGroups": "Skupiny licencií",
     "userToExtSystems": "Používateľ externých systémov",
     "adminToExtSystems": "Admin externých systémov",
     "superAdmin": "Super admin",

src/model/coreDam/filter/AssetLicenceGroupFilter.ts

@@ -15,3 +15,16 @@ export function useAssetLicenceGroupListFilter() {
   return filter
 }
 
+export function useAssetLicenceGroupFilter() {
+  return reactive({
+    name: {
+      ...makeFilter({ name: 'name', variant: 'startsWith' }),
+    },
+    extSystem: {
+      ...makeFilter({ name: 'extSystem', default: null }),
+    },
+    extId: {
+      ...makeFilter({ name: 'extId', default: null }),
+    },
+  })
+}

src/services/api/coreDam/assetLicenceGroupApi.ts

@@ -9,13 +9,14 @@ import {
   type IntegerId, type Pagination
 } from '@anzusystems/common-admin'
 import type { AssetLicenceGroup } from '@/types/coreDam/AssetLicenceGroup'
+import type { AxiosInstance } from 'axios'
 
 const END_POINT = '/adm/v1/asset-licence-group'
 export const ENTITY = 'assetLicenceGroup'
 
-export const fetchAssetLicenceGroupListByIds = (ids: IntegerId[]) =>
+export const fetchAssetLicenceGroupListByIds = (client: () => AxiosInstance, ids: IntegerId[]) =>
   apiFetchByIds<AssetLicenceGroup[]>(
-    damClient,
+    client,
     ids,
     END_POINT,
     {},
@@ -25,9 +26,9 @@ export const fetchAssetLicenceGroupListByIds = (ids: IntegerId[]) =>
     true
   )
 
-export const fetchAssetLicenceGroupList = (pagination: Pagination, filterBag: FilterBag) =>
+export const fetchAssetLicenceGroupList = (client: () => AxiosInstance, pagination: Pagination, filterBag: FilterBag) =>
   apiFetchList<AssetLicenceGroup[]>(
-    damClient,
+    client,
     END_POINT,
     {},
     pagination,

src/stores/coreDam/userStore.ts

@@ -1,29 +1,34 @@
 import type { DamUser, DamUserUpdateDto } from '@anzusystems/common-admin'
 import { useUserFactory } from '@/model/coreDam/factory/UserFactory'
 import { acceptHMRUpdate, defineStore } from 'pinia'
+import { ref } from 'vue'
+import type { AssetLicenceGroup } from '@/types/coreDam/AssetLicenceGroup'
 
-const { createDefault, createDefaultForUpdate } = useUserFactory()
+export const useUserOneStore = defineStore('damUserOneStore', () => {
+  const { createDefault, createDefaultForUpdate } = useUserFactory()
 
-interface State {
-  user: DamUser
-  userUpdate: DamUserUpdateDto
-}
+  const user = ref<DamUser>(createDefault())
+  const userUpdate = ref<DamUserUpdateDto>(createDefaultForUpdate(createDefault()))
+  const userAssetLicenceGroups = ref<AssetLicenceGroup[]>([])
+
+  function setUser(userNew: DamUser) {
+    user.value = userNew
+    userUpdate.value = createDefaultForUpdate(userNew)
+  }
+
+  function reset() {
+    user.value = createDefault()
+    userUpdate.value = createDefaultForUpdate(user.value)
+    userAssetLicenceGroups.value = []
+  }
 
-export const useUserOneStore = defineStore('damUserOneStore', {
-  state: (): State => ({
-    user: createDefault(),
-    userUpdate: createDefaultForUpdate(createDefault()),
-  }),
-  actions: {
-    setUser(user: DamUser) {
-      this.user = user
-      this.userUpdate = createDefaultForUpdate(user)
-    },
-    reset() {
-      this.user = createDefault()
-      this.userUpdate = createDefaultForUpdate(this.user)
-    },
-  },
+  return {
+    user,
+    userUpdate,
+    userAssetLicenceGroups,
+    setUser,
+    reset,
+  }
 })
 
 if (import.meta.hot) {

src/views/coreDam/assetLicenceGroup/components/DamAssetLicenceGroupRemoteAutocomplete.vue

@@ -0,0 +1,67 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { AFormRemoteAutocomplete, cloneDeep, type IntegerId, type ValueObjectOption } from '@anzusystems/common-admin'
+import type { AxiosInstance } from 'axios'
+import { useAssetLicenceGroupSelectActions } from '@/views/coreDam/assetLicenceGroup/composables/assetLicenceGroupActions'
+import { useAssetLicenceGroupFilter } from '@/model/coreDam/filter/AssetLicenceGroupFilter'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: IntegerId | null | IntegerId[] | any
+    client: () => AxiosInstance
+    label?: string | undefined
+    required?: boolean | undefined
+    multiple?: boolean
+    clearable?: boolean
+    dataCy?: string
+    hideDetails?: boolean
+    disableInitFetch?: boolean
+  }>(),
+  {
+    label: undefined,
+    required: undefined,
+    multiple: false,
+    clearable: false,
+    dataCy: '',
+    hideDetails: undefined,
+    disableInitFetch: false,
+  }
+)
+const emit = defineEmits<{
+  (e: 'update:modelValue', data: IntegerId | null | IntegerId[] | any): void
+}>()
+
+const modelValueComputed = computed({
+  get() {
+    return props.modelValue
+  },
+  set(newValue: IntegerId | null | IntegerId[] | any) {
+    emit('update:modelValue', cloneDeep<IntegerId | null | IntegerId[] | any>(newValue))
+  },
+})
+
+const selected = defineModel<ValueObjectOption<IntegerId>[]>('selected', { required: false, default: () => [] })
+
+// eslint-disable-next-line vue/no-setup-props-reactivity-loss
+const { fetchItems, fetchItemsByIds } = useAssetLicenceGroupSelectActions(props.client)
+
+const innerFilter = useAssetLicenceGroupFilter()
+</script>
+
+<template>
+  <AFormRemoteAutocomplete
+    v-model="modelValueComputed"
+    v-model:selected="selected"
+    :required="required"
+    :label="label"
+    :fetch-items="fetchItems"
+    :fetch-items-by-ids="fetchItemsByIds"
+    :inner-filter="innerFilter"
+    :multiple="multiple"
+    :clearable="clearable"
+    filter-by-field="name"
+    :data-cy="dataCy"
+    :hide-details="hideDetails"
+    :disable-init-fetch="disableInitFetch"
+  />
+</template>

src/views/coreDam/assetLicenceGroup/composables/assetLicenceGroupActions.ts

@@ -1,19 +1,22 @@
 import { ref } from 'vue'
-import type { FilterBag, Pagination } from '@anzusystems/common-admin'
+import type { FilterBag, IntegerId, Pagination, ValueObjectOption } from '@anzusystems/common-admin'
 import { useAlerts } from '@anzusystems/common-admin'
 import { useAssetLicenceGroupOneStore } from '@/stores/coreDam/assetLicenceGroupStore'
 import { storeToRefs } from 'pinia'
 import {
   fetchAssetLicenceGroup,
   fetchAssetLicenceGroupList,
-  updateAssetLicenceGroup
+  fetchAssetLicenceGroupListByIds,
+  updateAssetLicenceGroup,
 } from '@/services/api/coreDam/assetLicenceGroupApi'
 import useVuelidate from '@vuelidate/core'
 import { useRouter } from 'vue-router'
 import { ROUTE } from '@/router/routes'
 import type { AssetLicenceGroup } from '@/types/coreDam/AssetLicenceGroup'
 import { useCachedAssetLicences } from '@/views/coreDam/assetLicence/composables/cachedAssetLicences'
 import { useCachedExtSystems } from '@/views/coreDam/extSystem/composables/cachedExtSystems'
+import { damClient } from '@/services/api/clients/damClient'
+import type { AxiosInstance } from 'axios'
 
 const { showValidationError, showRecordWas, showErrorsDefault } = useAlerts()
 
@@ -31,7 +34,7 @@ export const useAssetLicenceGroupListActions = () => {
   const fetchList = async (pagination: Pagination, filterBag: FilterBag) => {
     listLoading.value = true
     try {
-      const res = await fetchAssetLicenceGroupList(pagination, filterBag)
+      const res = await fetchAssetLicenceGroupList(damClient, pagination, filterBag)
       res.forEach((item) => {
         addToCachedAssetLicences(item.licences)
         addToCachedExtSystems(item.extSystem)
@@ -133,3 +136,25 @@ export const useAssetLicenceGroupEditActions = () => {
     resetStore: assetLicenceGroupOneStore.reset,
   }
 }
+
+export const useAssetLicenceGroupSelectActions = (client: () => AxiosInstance) => {
+  const mapToValueObjectOption = (assetLicenceGroups: AssetLicenceGroup[]): ValueObjectOption<IntegerId>[] => {
+    return assetLicenceGroups.map((assetLicence: AssetLicenceGroup) => ({
+      title: assetLicence.name,
+      value: assetLicence.id,
+    }))
+  }
+
+  const fetchItems = async (pagination: Pagination, filterBag: FilterBag) => {
+    return mapToValueObjectOption(await fetchAssetLicenceGroupList(client, pagination, filterBag))
+  }
+
+  const fetchItemsByIds = async (ids: number[]) => {
+    return mapToValueObjectOption(await fetchAssetLicenceGroupListByIds(client, ids))
+  }
+
+  return {
+    fetchItems,
+    fetchItemsByIds,
+  }
+}

src/views/coreDam/user/components/UserDetail.vue

@@ -1,21 +1,35 @@
 <script lang="ts" setup>
-import { ACopyText, ARow, AUserAndTimeTrackingFields } from '@anzusystems/common-admin'
+import { ACopyText, ARow, AUserAndTimeTrackingFields, COMMON_CONFIG } from '@anzusystems/common-admin'
 import { useI18n } from 'vue-i18n'
 import { storeToRefs } from 'pinia'
 import { useUserOneStore } from '@/stores/coreDam/userStore'
 import CachedExtSystemChip from '@/views/coreDam/extSystem/components/CachedExtSystemChip.vue'
 import ExternalProviderAssetChip from '@/views/coreDam/externalProviderAsset/components/ExternalProviderAssetChip.vue'
 import DistributionServiceChip from '@/views/coreDam/distribution/components/DistributionServiceChip.vue'
 import CachedAssetLicenceChip from '@/views/coreDam/assetLicence/components/CachedAssetLicenceChip.vue'
+import { ROUTE } from '@/router/routes'
 
-const { user } = storeToRefs(useUserOneStore())
+const { user, userAssetLicenceGroups } = storeToRefs(useUserOneStore())
 
 const { t } = useI18n()
 </script>
 
 <template>
   <VRow>
     <VCol cols="8">
+      <ARow :title="t('coreDam.user.model.licenceGroups')">
+        <VChip
+          v-for="userAssetLicenceGroup in userAssetLicenceGroups"
+          :key="userAssetLicenceGroup.id"
+          :append-icon="COMMON_CONFIG.CHIP.ICON.LINK"
+          label
+          size="small"
+          class="mr-1"
+          :to="{ name: ROUTE.DAM.ASSET_LICENCE_GROUP.DETAIL, params: { id: userAssetLicenceGroup.id } }"
+        >
+          {{ userAssetLicenceGroup.name }}
+        </VChip>
+      </ARow>
       <ARow :title="t('coreDam.user.model.assetLicences')">
         <CachedAssetLicenceChip
           v-for="assetLicenceId in user.assetLicences"

src/views/coreDam/user/components/UserEditForm.vue

@@ -17,6 +17,8 @@ import { useUserEditActions } from '@/views/coreDam/user/composables/userActions
 import { useI18n } from 'vue-i18n'
 import { useUpdateUserValidation } from '@/views/coreDam/user/composables/userValidation'
 import { damClient } from '@/services/api/clients/damClient'
+import DamAssetLicenceGroupRemoteAutocomplete
+  from '@/views/coreDam/assetLicenceGroup/components/DamAssetLicenceGroupRemoteAutocomplete.vue'
 
 const { userUpdate } = useUserEditActions()
 
@@ -47,12 +49,21 @@ const { t } = useI18n()
             data-cy="user-plain-password"
           />
         </ARow>
+        <ARow>
+          <DamAssetLicenceGroupRemoteAutocomplete
+            v-model="userUpdate.licenceGroups"
+            :client="damClient"
+            :label="t('coreDam.user.model.licenceGroups')"
+            multiple
+            clearable
+            data-cy="user-asset-licence-groups"
+          />
+        </ARow>
         <ARow>
           <DamAssetLicenceRemoteAutocomplete
             v-model="userUpdate.assetLicences"
             :client="damClient"
             :label="t('coreDam.user.model.assetLicences')"
-            :v="v$.userUpdate.assetLicences"
             multiple
             clearable
             data-cy="user-asset-licences"

src/views/coreDam/user/composables/userActions.ts

@@ -16,6 +16,7 @@ import { ROUTE } from '@/router/routes'
 import { useCachedExtSystems } from '@/views/coreDam/extSystem/composables/cachedExtSystems'
 import { useCachedAssetLicences } from '@/views/coreDam/assetLicence/composables/cachedAssetLicences'
 import { damClient } from '@/services/api/clients/damClient'
+import { fetchAssetLicenceGroupListByIds } from '@/services/api/coreDam/assetLicenceGroupApi'
 
 const { showValidationError, showRecordWas, showErrorsDefault } = useAlerts()
 
@@ -52,12 +53,13 @@ export const useUserListActions = () => {
 
 export const useUserDetailActions = () => {
   const userOneStore = useUserOneStore()
-  const { user } = storeToRefs(userOneStore)
+  const { user, userAssetLicenceGroups } = storeToRefs(userOneStore)
 
   const fetchData = async (id: number) => {
     detailLoading.value = true
     try {
       const user = await fetchDamUser(damClient, id)
+      userAssetLicenceGroups.value = await fetchAssetLicenceGroupListByIds(damClient, user.licenceGroups)
       userOneStore.setUser(user)
       addToCachedExtSystems(user.adminToExtSystems, user.userToExtSystems)
       addToCachedAssetLicences(user.assetLicences)

src/views/coreDam/user/composables/userValidation.ts

@@ -4,9 +4,9 @@ import type { DamUserUpdateDto } from '@anzusystems/common-admin'
 import { UserAuthType, useValidate } from '@anzusystems/common-admin'
 import useVuelidate from '@vuelidate/core'
 
-const { required, minLength } = useValidate()
-
 export function useUpdateUserValidation(userUpdate: Ref<DamUserUpdateDto>, userAuthType: UserAuthType) {
+  const { required, minLength } = useValidate()
+
   const rulesRaw = {} as Record<string, any> // todo find better type
 
   if (userAuthType === UserAuthType.JsonCredentials) {