Entity User Interface

📄 Overview

The DataCard is a Vue 3 component that leverages Vuetify layout primitives (e.g., v-row, v-col) and custom rendering components to display structured entity data.

It is composed of Vuetify layout elements and field-specific components, allowing flexible and customizable data presentation.

✅ Basic Usage

<e-field label="Name" :has-value="item.Name">
    {{ item.Name }}
</e-field>

<e-field label="Role" :has-value="item.Role">
    <e-role :value="item.Role" />
</e-field>

<e-field label="Created" :has-value="item.CreatedAt">
    <e-date :value="item.CreatedAt" />
</e-field>
                

🔧 Custom Rendering Components

Custom rendering components allow tailored display of fields within a DataCard. Each field type has a default renderer, which can be overridden with custom components.

<e-field :has-value="item.Name" label="Name" inline label-width="120px" no-gutters>
    {{ item.Name }}
</e-field>
                        

<e-object entity="Company" :value="item.Company" itemTitle="name" />
                        

<e-object-list entity="ContactPerson" :value="item.ContactPersons" itemTitle="FullName" />
                        

<e-object-list entity="Project" :value="item.ProjectTeam" itemTitle="ProjectTitle" subpath="Project" />
                        

<e-role :value="item.WatcherRole" />
                        

<e-user :value="item.Manager" />
                        

<e-time value="item.Time" />
                        

<e-date value="item.Date" />
                        

<e-datetime value="item.DateTime" />
                        

<e-file :value="item.File1" />
                        

<e-address :value="item.CompanyLocation" />
                        

<e-entity-data-card card-name="BeneficiaryCardEn" :item="item" entity="Beneficiary" />
                        

<e-entity-data-card card-name="BeneficiaryCardEn" :item="{ Id: 'some_id' }" entity="Beneficiary" force-reload />
                        

<e-entity-data-table-card
    entity="DepartmentBudget"
    title="Department Budgets"
    table-id="department-budgets-table"
    parent-field="Department"
    :parent="item"
    max-height="500px"
/>
                        

<e-entity-data-table-card
    entity="Course"
    m2m-entity="StudentCourseEnrollment"
    title="Enrolled Courses"
    table-id="student-courses-table"
    parent-field="StudentEnrollments"
    :parent="item"
    height="400px"
    :allow-delete="false"
    :allow-edit="true"
/>
                        

📄 Overview

The DataForm is a reusable Vue 3 component built with Vuetify and custom input components. It enables seamless rendering and editing of entity objects, supporting dynamic data binding and form validation.

🔗 Field Binding Types

DataForm inputs use v-model to bind to different data sources. Selecting the appropriate binding type ensures correct editing and saving functionality.

• item.FieldName: Binds to entity object fields loaded from the server. These values are saved upon form submission.
• formData.VarName: Temporary variables for form logic, such as selections or conditional values. Not saved to the entity.
• varName: User-defined variables in the <script setup> block for advanced logic or standalone values.

🎨 Custom Input Components

Custom input components are designed for specific data types. Use them with v-model="item.Field" and display errors with :error-messages.

<v-row>
    <v-col>
        <e-select
            v-model="formData.country"
            label="Country"
            entity="Country"
            :initial-from="item.address?.state?.country"
            item-title="Name"
        />
    </v-col>
</v-row>
<v-row>
    <v-col>
        <e-select
            v-model="formData.state"
            label="State"
            entity="State"
            :disabled="!formData.country"
            filterby-field="Country"
            :filterby-value="formData.country"
            :initial-from="item.address?.state"
            item-title="Name"
        />
    </v-col>
</v-row>
<v-row>
    <v-col>
        <e-select
            v-model="item.city"
            label="City"
            entity="City"
            :disabled="!formData.state"
            filterby-field="State"
            :filterby-value="formData.state"
            :error-messages="errors['city']"
            item-title="Name"
        />
    </v-col>
</v-row>
                            

<e-select
    v-model="item.ProductCategoryAssignments"
    label="Categories"
    entity="ProductCategoryAssignment"
    ref-field="Category"
    :type="'Autocomplete'"
    :multiple="true"
    item-title="Name"
    :errors-messages="errors['ProductCategoryAssignments']"
/>
                            

<e-file-i
    v-model="formData.Attachment"
    label="Upload File"
></e-file-i>
                        

📂 Examples

<v-text-field v-model="item.Name" label="Name" :error-messages="errors['Name']" />
<v-textarea v-model="item.Description" label="Description" :error-messages="errors['Description']" />
<v-checkbox v-model="item.IsActive" label="Active" />
                        

<e-role-i label="Role" v-model="item.Role" :errors-messages="errors['Role']" />
<e-user-i label="User" v-model="item.User" :errors-messages="errors['User']" />
<e-date-i label="Start Date" v-model="item.StartDate" :error-messages="errors['StartDate']" />
<e-datetime-i label="Appointment" v-model="item.Appointment" :error-messages="errors['Appointment']" />
<e-time-i label="Meeting Time" v-model="item.MeetingTime" :error-messages="errors['MeetingTime']" />
<e-select entity="Product" label="Product" v-model="item.Product" :error-messages="errors['Product']" />
<e-address-i label="Location" v-model="item.Location" :error-messages="errors['Location']" />
                        

⚙️ Helper Methods

Optional helper methods in the <script> block customize form behavior.

const createItem = (remoteItem) => {
    return Object.assign({}, remoteItem);
};
                        

const createPayload = (formItem) => {
    return Object.assign({}, formItem);
};
                        

const validate = (item) => {
    return [];
};
                        

📄 Overview

The Entity Details Page provides a comprehensive view of a single entity, combining field data, related collections, and navigation elements in a cohesive layout.

Built with Vuetify layout primitives and custom rendering components, it supports dynamic presentation of simple fields and complex relationships.

💠 Tabs Support

The page can be organized into tabs using Vuetify’s VTabs and VTabsWindow components, allowing separation of details, documents, related records, and more.

<VTabs v-model="activeTab" class="v-tabs-pill">
    <VTab value="overview">Overview</VTab>
    <VTab value="files">Files</VTab>
    <VTab value="team">Team</VTab>
</VTabs>
<VTabsWindow v-model="activeTab">
    <VTabsWindowItem value="overview">
        <div class="my-4">
            <e-field label="Project Name" :has-value="item.Name">{{ item.Name }}</e-field>
            <e-field label="Start Date" :has-value="item.StartDate">
                <e-date :value="item.StartDate" />
            </e-field>
        </div>
    </VTabsWindowItem>
    <VTabsWindowItem value="files">
        <e-entity-data-table-card
            entity="ProjectDocuments"
            table-id="project-files"
            title="Project Files"
            :parent="item"
            parent-field="Project"
        />
    </VTabsWindowItem>
    <VTabsWindowItem value="team">
        <e-object-list
            entity="TeamMember"
            :value="item.TeamMembers"
            item-title="FullName"
            flex
        />
    </VTabsWindowItem>
</VTabsWindow>
                

🔧 Custom Rendering Components

Custom components enable overriding default renderers for fields, headers, and embedded tables, allowing tailored appearance and behavior.

For additional rendering components (e-role, e-user, e-time, e-date, e-datetime, e-file, e-address, e-entity-data-card), refer to the UI Data Card help page.

📂 Examples

<e-entity-header-card :title="item.Name" edit-form-name="ProjectForm" />
<div class="my-4">
    <e-field label="Short Name" :has-value="item.ShortName">{{ item.ShortName }}</e-field>
    <e-field label="Status" :has-value="item.Status"><e-object entity="ProjectStatus" :value="item.Status" item-title="Name"/></e-field>
</div>
<e-entity-data-table-card entity="ProjectDocuments" table-id="project-docs" title="Documents" :parent="item" parent-field="Project"/>