Records

Loading records...

<% fields.forEach(function(field) { -%> <% }); -%>
{{ col.header }} Actions
{{ item.<%= h.toCamelCase(field) %> || '-' <% if (field.includes('_at')) { %> | date:'medium' <% } else if (field.toLowerCase().includes('status') || field.toLowerCase().includes('type') || field.toLowerCase().includes('category')) { %> | titlecase <% } %> }}
Previous
Page {{ currentPage }} of {{ totalPages }} ({{ pagination.totalCount }} total)
Next

No Records Found

Click the + button to add your first record

 {{ isEditing ? 'Edit' : 'Add' }} Record
<% fieldsWithTypes.forEach(function(field) { if (['id', 'created_at', 'updated_at'].includes(field.name)) return; let inputType; let component = 'ion-input'; let extraAttributes = ''; // Check if this field is an enum by looking at the field definition const isEnum = field.type === 'String' && field.enumValues && field.enumValues.length > 0; switch(field.type) { case 'Integer': case 'Float': inputType = 'number'; extraAttributes = field.type === 'Float' ? ' step="0.01"' : ''; break; case 'Boolean': component = 'ion-toggle'; break; case 'Date': component = 'ion-datetime'; extraAttributes = ' presentation="date"'; break; case 'Time': component = 'ion-datetime'; extraAttributes = ' presentation="time"'; break; case 'DateTime': component = 'ion-datetime'; break; case 'String': if (isEnum) { component = 'ion-select'; } else if (field.name.toLowerCase().includes('password')) { inputType = 'password'; } else if (field.name.toLowerCase().includes('email')) { inputType = 'email'; } else if (field.name.toLowerCase().includes('phone')) { inputType = 'tel'; } else if (field.name.toLowerCase().includes('url') || field.name.toLowerCase().includes('website')) { inputType = 'url'; } else if (field.name.toLowerCase().includes('color')) { inputType = 'color'; } else { inputType = 'text'; } break; default: inputType = 'text'; } -%> <%= h.capitalize(field.name.replace(/_/g, ' ')) %> <% if (component === 'ion-select') { -%> <% if (isEnum && field.enumValues) { -%> <% field.enumValues.forEach(function(value) { -%> <%= h.capitalize(value) %> <% }); -%> <% } -%> <% } else if (component === 'ion-toggle') { -%> <% } else if (component === 'ion-datetime') { -%> presentation="date" display-format="MMM DD, YYYY" picker-format="MMM DD, YYYY" [firstDayOfWeek]="1" class="date-picker" <% } else if (field.type === 'Time') { -%> presentation="time" display-format="HH:mm" picker-format="HH:mm" class="time-picker" <% } else if (field.type === 'DateTime') { -%> presentation="date-time" display-format="MMM DD, YYYY HH:mm" picker-format="MMM DD, YYYY HH:mm" [firstDayOfWeek]="1" class="datetime-picker" <% } -%> style="--background: var(--ion-color-light); --wheel-highlight-background: var(--ion-color-primary-tint); min-height: 150px; max-height: 150px;" > <% } else { -%> <<%= component %> type="<%= inputType %>"<%= extraAttributes %> formControlName="<%= h.toCamelCase(field.name) %>" placeholder="Enter <%= field.name.replace(/_/g, ' ').toLowerCase() %>">> <% } -%> <%= h.capitalize(field.name.replace(/_/g, ' ')) %> is required <% }); -%> <%# Add relationships section %> <% if (relationships && relationships.length > 0) { -%> <% relationships.forEach(function(rel) { -%> <%= h.capitalize(rel.name) %> {{ item.name }} <%= h.capitalize(rel.name) %> is required <% }); -%> <% } -%>
Cancel {{ isEditing ? 'Update' : 'Create' }}