RecordBase.vue

<template>
  <wrap
    v-bind="$props"
    v-on="$listeners"
  >
    <div
      v-if="processing"
      class="d-flex align-items-center justify-content-center h-100"
    >
      <b-spinner />
    </div>

    <div
      v-else-if="fieldModule"
      class="mt-3"
    >
      <div
        v-for="(field, index) in fields"
        :key="index"
        :class="{ 'd-flex flex-column mb-3 px-3 field-container': canDisplay(field) }"
      >
        <template
          v-if="canDisplay(field)"
        >
          <label
            class="d-flex align-items-center text-primary mb-0"
          >
            <span class="d-inline-block text-truncate mw-100 py-1">
              {{ field.label || field.name }}
            </span>

            <hint
              :id="field.fieldID"
              :text="((field.options.hint || {}).view || '')"
            />

            <div
              v-if="options.inlineRecordEditEnabled && isFieldEditable(field)"
              class="inline-actions ml-2"
            >
              <b-button
                :title="$t('field.inlineEdit.button.title')"
                variant="outline-light"
                size="sm"
                :disabled="editable"
                class="text-secondary border-0"
                @click="editInlineField(fieldRecord, field)"
              >
                <font-awesome-icon
                  :icon="['fas', 'pen']"
                />
              </b-button>
            </div>
          </label>

          <div
            class="small text-muted"
            :class="{ 'mb-1': !!(field.options.description || {}).view }"
          >
            {{ (field.options.description || {}).view }}
          </div>

          <div
            v-if="field.canReadRecordValue"
            class="value mt-1"
          >
            <field-viewer
              v-bind="{ ...$props, field }"
              :extra-options="options"
              :record="fieldRecord"
            />
          </div>
          <i
            v-else
            class="text-primary"
          >
            {{ $t('field.noPermission') }}
          </i>
        </template>
      </div>
    </div>

    <!-- Modal for inline editing -->
    <bulk-edit-modal
      :namespace="namespace"
      :module="fieldModule"
      :selected-records="inlineEdit.recordIDs"
      :selected-fields="inlineEdit.fields"
      :initial-record="inlineEdit.record"
      :modal-title="$t('field.inlineEdit.modal.title')"
      open-on-select
      @save="onInlineEdit()"
    />
  </wrap>
</template>
<script>
import { compose, NoID } from '@cortezaproject/corteza-js'
import { mapActions } from 'vuex'
import base from './base'
import FieldViewer from 'corteza-webapp-compose/src/components/ModuleFields/Viewer'
import BulkEditModal from 'corteza-webapp-compose/src/components/Public/Record/BulkEdit'
import Hint from 'corteza-webapp-compose/src/components/Common/Hint.vue'
import users from 'corteza-webapp-compose/src/mixins/users'
import records from 'corteza-webapp-compose/src/mixins/records'
import conditionalFields from 'corteza-webapp-compose/src/mixins/conditionalFields'

export default {
  i18nOptions: {
    namespaces: 'block',
  },

  components: {
    FieldViewer,
    Hint,
    BulkEditModal,
  },

  extends: base,

  mixins: [
    users,
    records,
    conditionalFields,
  ],

  data () {
    return {
      referenceRecord: undefined,
      referenceModule: undefined,
      inlineEdit: {
        fields: [],
        recordIDs: [],
        initialRecord: {},
      },
    }
  },

  computed: {
    fields () {
      if (!this.fieldModule) {
        // No module, no fields
        return []
      }

      if (!this.options.fields || this.options.fields.length === 0) {
        // No fields defined in the options, show all (buy system)
        return this.fieldModule.fields
      }

      // Show filtered & ordered list of fields
      return this.fieldModule.filterFields(this.options.fields).map(f => {
        f.label = f.isSystem ? this.$t(`field:system.${f.name}`) : f.label || f.name
        return f
      })
    },

    fieldModule () {
      return this.options.referenceField ? this.referenceModule : this.module
    },

    fieldRecord () {
      return this.options.referenceField ? this.referenceRecord : this.record
    },

    processing () {
      return !this.fieldRecord || this.evaluating
    },
  },

  watch: {
    'record.recordID': {
      immediate: true,
      handler (recordID) {
        if (!recordID) return

        let resolutions = []

        if (recordID !== NoID) {
          resolutions = [
            this.fetchUsers(this.fields, [this.record]),
            this.fetchRecords(this.namespace.namespaceID, this.fields, [this.record]),
          ]
        }

        this.evaluating = true

        Promise.all([
          ...resolutions,
          this.evaluateExpressions(),
        ]).finally(() => {
          this.evaluating = false
        })

        if (this.options.referenceModuleID) {
          this.fetchReferenceModule(this.options.referenceModuleID)
        }
      },
    },

    options: {
      deep: true,
      handler (options) {
        if (options.referenceModuleID) {
          this.fetchReferenceModule(options.referenceModuleID)
        }
      },
    },
  },

  methods: {
    ...mapActions({
      findModuleByID: 'module/findByID',
    }),

    fetchReferenceModule (moduleID) {
      if (!moduleID) {
        this.referenceModule = undefined
        return
      }

      this.findModuleByID({ namespace: this.namespace.namespaceID, moduleID: this.options.referenceModuleID })
        .then(module => {
          this.referenceModule = new compose.Module({ ...module })

          if (this.options.referenceField) {
            this.loadRecord(this.referenceModule)
          }
        })
    },

    loadRecord (module) {
      if (!module) return

      const { namespaceID, moduleID } = module
      const { referenceField } = this.options
      const field = this.module.fields.find(({ fieldID }) => fieldID === referenceField)

      const recordID = this.record.values[field.name]

      if (!recordID || !field) {
        this.referenceRecord = new compose.Record(this.fieldModule, {})
        return
      }

      if (field.isMulti) {
        this.referenceRecord = new compose.Record(this.fieldModule, {})
        return
      }

      this.$ComposeAPI.recordRead({ namespaceID, moduleID, recordID })
        .then(record => {
          this.referenceRecord = new compose.Record(this.fieldModule, { ...record })
        })
        .catch((e) => {
          this.referenceRecord = new compose.Record(this.fieldModule, {})
          this.toastErrorHandler(this.$t('notification:record.loadFailed'))(e)
        })
    },

    editInlineField (record, field) {
      this.inlineEdit.fields = [field.name]
      this.inlineEdit.record = record.clone()
      this.inlineEdit.recordIDs = [record.recordID]
    },

    onInlineEdit () {
      this.inlineEdit.fields = []
      this.inlineEdit.recordIDs = []
      this.inlineEdit.record = {}

      this.$root.$emit('refetch-record-blocks')
    },

    isFieldEditable (field) {
      if (!field) return false

      const { canCreateOwnedRecord } = this.fieldModule || {}
      const { createdAt, canManageOwnerOnRecord } = this.record || {}
      const { name, canUpdateRecordValue, isSystem, expressions = {} } = field || {}

      if (!canUpdateRecordValue) return false

      if (isSystem) {
        // Make ownedBy field editable if correct permissions
        if (name === 'ownedBy') {
          // If not created we check module permissions, otherwise the canManageOwnerOnRecord
          return createdAt ? canManageOwnerOnRecord : canCreateOwnedRecord
        }

        return false
      }

      return !expressions.value
    },
  },
}
</script>
<style lang="scss">
.value {
  min-height: 1.2rem;
}
</style>

<style lang="scss" scoped>
.inline-actions {
  opacity: 0;
  transition: opacity 0.25s;
}

.field-container:hover .inline-actions {
  opacity: 1;

  button:hover {
    color: $primary !important;
  }
}
</style>