<commit_before>
<template>
  <v-card class="c-admin-editor hide-non-error-details">
    <v-toolbar
      class="c-admin-editor-page--toolbar"
      dense color="primary darken-1" dark
    >

      <v-toolbar-title >
        <template v-if="showContent">
          <span v-if="!canEdit">View</span>
          <span v-else-if="!hasPk">Create</span>
          <span v-else>Edit</span>
        </template>
        {{metadata.displayName}}
      </v-toolbar-title>

      <v-divider class="mx-4 my-0" vertical></v-divider>

      <v-toolbar-title v-if="hasPk" class="hidden-xs-only">
        <c-display :model="model"></c-display>
      </v-toolbar-title>
      
      <v-spacer></v-spacer>
      <v-btn @click="model.$load()" text :disabled="!hasPk">
        <v-icon left>fa fa-sync-alt</v-icon> 
        <span class="hidden-sm-and-down">Reload</span>
      </v-btn>

    </v-toolbar>
    
    <v-card-text>
      <v-form ref="form">
        <c-loader-status :loaders="{
          [!showContent ? 'no-initial-content' : 'no-error-content']: [model.$load],
          '': [model.$save],
        }">
          <template #default>
            <v-row 
              v-for="prop in showProps" 
              :key="prop.name"  
              class="py-1"
            >
              <v-col cols="12" md="2" class="py-0 font-weight-bold text-md-right" align-self="center">
                {{prop.displayName}}
              </v-col>
              <v-col class="py-0">
                <c-input :model="model" :for="prop" :readonly="!canEdit" label="">
                  <c-admin-display :model="model" :for="prop" />
                </c-input>
              </v-col>
              <v-col 
                v-if="prop.role == 'referenceNavigation'"
                class="py-0 flex-grow-0"
              >
                <v-btn 
                  class="c-admin-editor--ref-nav-link"
                  outlined
                  color="grey"
                  :disabled="!model[prop.foreignKey.name]"
                  :to="{name: 'coalesce-admin-item', params: {type: prop.typeDef.name, id: model[prop.foreignKey.name]}}"
                >
                  <v-icon class="black--text">fa fa-ellipsis-h</v-icon>
                </v-btn>
              </v-col>
            </v-row>
          </template>
        </c-loader-status>
        
      </v-form>
    </v-card-text>
  </v-card>
</template>


<script lang="ts">

import { Vue, Component, Watch, Prop } from 'vue-property-decorator'
import { Model, ClassType, ViewModel, Property, ModelType, BehaviorFlags } from 'coalesce-vue';

import CInput from '../input/c-input'
import CAdminDisplay from './c-admin-display'
    
@Component({
  name: 'c-admin-editor',
  components: {
    CInput, CAdminDisplay
  }
})
export default class extends Vue {
  @Prop({required: true, type: Object})
  public model!: ViewModel<Model<ModelType>>;

  get metadata(): ModelType {
    if (this.model) {
      return this.model.$metadata
    }
    throw `No metadata available.`
  }

  get showContent() {
    const model = this.model;
    return (
        // If we have loaded at least once, we're in an edit scenario and the object is loaded.
        model.$load.wasSuccessful
        // If we're not loading now, we're in a create scenario.
        || !model.$load.isLoading
      )
  }

  get hasPk() {
    return this.model.$primaryKey != null
  }

  get canEdit() {
    const metadata = this.metadata;
    if (!metadata) return false;

    return (metadata.behaviorFlags & (this.hasPk ? BehaviorFlags.Edit : BehaviorFlags.Create)) != 0
  }
  
  get showProps() { 
    if (!this.model) return [];<commit_msg>c-admin-editor: Respect dontSerialize when determining if a prop is readonly.<commit_after>
<template>
  <v-card class="c-admin-editor hide-non-error-details">
    <v-toolbar
      class="c-admin-editor-page--toolbar"
      dense color="primary darken-1" dark
    >

      <v-toolbar-title >
        <template v-if="showContent">
          <span v-if="!canEdit">View</span>
          <span v-else-if="!hasPk">Create</span>
          <span v-else>Edit</span>
        </template>
        {{metadata.displayName}}
      </v-toolbar-title>

      <v-divider class="mx-4 my-0" vertical></v-divider>

      <v-toolbar-title v-if="hasPk" class="hidden-xs-only">
        <c-display :model="model"></c-display>
      </v-toolbar-title>
      
      <v-spacer></v-spacer>
      <v-btn @click="model.$load()" text :disabled="!hasPk">
        <v-icon left>fa fa-sync-alt</v-icon> 
        <span class="hidden-sm-and-down">Reload</span>
      </v-btn>

    </v-toolbar>
    
    <v-card-text>
      <v-form ref="form">
        <c-loader-status :loaders="{
          [!showContent ? 'no-initial-content' : 'no-error-content']: [model.$load],
          '': [model.$save],
        }">
          <template #default>
            <v-row 
              v-for="prop in showProps" 
              :key="prop.name"  
              class="py-1"
            >
              <v-col cols="12" md="2" class="py-0 font-weight-bold text-md-right" align-self="center">
                {{prop.displayName}}
              </v-col>
              <v-col class="py-0">
                <c-input :model="model" :for="prop" :readonly="isPropReadOnly(prop)" label="">
                  <c-admin-display :model="model" :for="prop" />
                </c-input>
              </v-col>
              <v-col 
                v-if="prop.role == 'referenceNavigation'"
                class="py-0 flex-grow-0"
              >
                <v-btn 
                  class="c-admin-editor--ref-nav-link"
                  outlined
                  color="grey"
                  :disabled="!model[prop.foreignKey.name]"
                  :to="{name: 'coalesce-admin-item', params: {type: prop.typeDef.name, id: model[prop.foreignKey.name]}}"
                >
                  <v-icon class="black--text">fa fa-ellipsis-h</v-icon>
                </v-btn>
              </v-col>
            </v-row>
          </template>
        </c-loader-status>
        
      </v-form>
    </v-card-text>
  </v-card>
</template>


<script lang="ts">

import { Vue, Component, Watch, Prop } from 'vue-property-decorator'
import { Model, ClassType, ViewModel, Property, ModelType, BehaviorFlags } from 'coalesce-vue';

import CInput from '../input/c-input'
import CAdminDisplay from './c-admin-display'
    
@Component({
  name: 'c-admin-editor',
  components: {
    CInput, CAdminDisplay
  }
})
export default class extends Vue {
  @Prop({required: true, type: Object})
  public model!: ViewModel<Model<ModelType>>;

  get metadata(): ModelType {
    if (this.model) {
      return this.model.$metadata
    }
    throw `No metadata available.`
  }

  get showContent() {
    const model = this.model;
    return (
        // If we have loaded at least once, we're in an edit scenario and the object is loaded.
        model.$load.wasSuccessful
        // If we're not loading now, we're in a create scenario.
        || !model.$load.isLoading
      )
  }

  get hasPk() {
    return this.model.$primaryKey != null
  }

  get canEdit() {
    const metadata = this.metadata;
    if (!metadata) return false;

    return (metadata.behaviorFlags & (this.hasPk ? BehaviorFlags.Edit : BehaviorFlags.Create)) != 0
  }

  isPropReadOnly(p: Property) {
    if (!this.canEdit) return true;
    
    return p.dontSerialize 
      && p.role !== "referenceNavigation" 
      && p.role !== "collectionNavigation"
  }
  
  get showProps() { 
    if (!this.model) return [];
{'fraction_non_alphanumeric': 0.16060525617202018, 'fraction_numerical': 0.003185558800106185, 'mean_word_length': 1.8595825426944972, 'pattern_counts': {'":': 0, '<': 115, '<?xml version=': 0, '>': 115, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6743291', 'n_tokens_mistral': 2476, 'n_tokens_neox': 2380, 'n_words': 477}