-
Notifications
You must be signed in to change notification settings - Fork 741
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Organization enrichment frontend (#864)
- Loading branch information
1 parent
789faf8
commit d3bc417
Showing
15 changed files
with
713 additions
and
25 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
81 changes: 81 additions & 0 deletions
81
frontend/src/modules/organization/components/form/organization-form-attributes.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| <template> | ||
| <div class="grid gap-x-12 grid-cols-3 mb-16"> | ||
| <div v-if="showHeader"> | ||
| <h6>Attributes</h6> | ||
| <p class="text-gray-500 text-2xs leading-normal mt-1"> | ||
| Data points to enhance the organization profile | ||
| </p> | ||
| </div> | ||
| <div :class="showHeader ? 'col-span-2' : 'col-span-3'"> | ||
| <div class="flex gap-3 border-b h-8 items-center"> | ||
| <span | ||
| class="uppercase text-gray-400 text-2xs font-semibold tracking-wide w-1/3" | ||
| >Name</span> | ||
| <span | ||
| class="uppercase text-gray-400 text-2xs font-semibold tracking-wide grow" | ||
| >Value</span> | ||
| </div> | ||
| <div | ||
| class="custom-attributes-form flex mt-4 mb-2 flex-col gap-4" | ||
| > | ||
| <app-organization-form-item | ||
| v-for="attribute in visibleAttributes" | ||
| :key="attribute.name" | ||
| :type="attribute.type" | ||
| :label="attribute.label" | ||
| :is-enrichment-field="true" | ||
| > | ||
| <app-autocomplete-many-input | ||
| v-if="attribute.type === attributesTypes.multiSelect" | ||
| v-model="model[attribute.name]" | ||
| disabled | ||
| input-class="w-full multi-select-field" | ||
| placeholder=" " | ||
| :collapse-tags="true" | ||
| /> | ||
| <el-input | ||
| v-else | ||
| v-model="model[attribute.name]" | ||
| :type="attribute.type" | ||
| disabled | ||
| clearable | ||
| /><template #error> | ||
| <div class="el-form-item__error"> | ||
| Value is required | ||
| </div> | ||
| </template> | ||
| </app-organization-form-item> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup> | ||
| import { computed } from 'vue'; | ||
| import enrichmentAttributes, { attributesTypes } from '@/modules/organization/config/organization-enrichment-attributes'; | ||
| import AppOrganizationFormItem from './organization-form-item.vue'; | ||
| const props = defineProps({ | ||
| showHeader: { | ||
| type: Boolean, | ||
| default: true, | ||
| }, | ||
| modelValue: { | ||
| type: Object, | ||
| default: () => {}, | ||
| }, | ||
| organization: { | ||
| type: Object, | ||
| default: () => {}, | ||
| }, | ||
| }); | ||
| const model = computed(() => props.modelValue); | ||
| const visibleAttributes = computed(() => enrichmentAttributes.filter((a) => a.showInForm)); | ||
| </script> | ||
|
|
||
| <script> | ||
| export default { | ||
| name: 'AppOrganizationFormAttributes', | ||
| }; | ||
| </script> |
68 changes: 68 additions & 0 deletions
68
frontend/src/modules/organization/components/form/organization-form-item.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| <template> | ||
| <div class="flex gap-3"> | ||
| <div | ||
| class="w-1/3 flex flex-col gap-1 justify-start mt-0.5" | ||
| > | ||
| <div class="flex items-center leading-tight"> | ||
| <div | ||
| class="text-gray-900 text-xs font-medium mr-2" | ||
| > | ||
| {{ label }} | ||
| </div> | ||
| <el-tooltip | ||
| v-if="isEnrichmentField" | ||
| content="Organization enrichment" | ||
| placement="top" | ||
| > | ||
| <div class="form-enrichment-badge"> | ||
| <app-svg name="enrichment" /> | ||
| </div> | ||
| </el-tooltip> | ||
| </div> | ||
| <span | ||
| class="text-2xs text-gray-500 leading-none" | ||
| >{{ type }}</span> | ||
| </div> | ||
| <el-form-item class="grow"> | ||
| <slot /> | ||
| </el-form-item> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup> | ||
| import AppSvg from '@/shared/svg/svg.vue'; | ||
| defineProps({ | ||
| label: { | ||
| type: String, | ||
| default: null, | ||
| }, | ||
| type: { | ||
| type: String, | ||
| default: null, | ||
| }, | ||
| isEnrichmentField: { | ||
| type: Boolean, | ||
| default: false, | ||
| }, | ||
| }); | ||
| </script> | ||
|
|
||
| <script> | ||
| export default { | ||
| name: 'AppOrganizationFormItem', | ||
| }; | ||
| </script> | ||
|
|
||
| <style lang="scss"> | ||
| .form-enrichment-badge { | ||
| @apply w-5 h-5 bg-gray-100 rounded-full flex items-center justify-center; | ||
| svg { | ||
| @apply h-4 w-4 overflow-visible flex items-center justify-center leading-none; | ||
| } | ||
| } | ||
| .multi-select-field .el-select__tags { | ||
| @apply h-7; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.