raven-client/ayanova/src/components/work-order-state.vue

<template>
  <div>
    <div class="mb-n2 ml-10">
      <span class="text-caption">{{ $ay.t("WorkOrderStatus") }}</span>
    </div>

    <template v-if="hasState">
      <div>
        <v-btn icon class="ml-n1 mr-2">
          <v-icon>{{ openIcon() }}</v-icon>
        </v-btn>

        <span class="text-h6">{{ pvm.currentState.name }}</span>
        <v-icon :color="pvm.currentState.color" class="ml-4">$ayiFlag</v-icon>
        <v-icon color="primary" v-if="pvm.currentState.locked" class="ml-4"
          >$ayiLock</v-icon
        >
        <v-icon color="primary" v-if="pvm.currentState.completed" class="ml-4"
          >$ayiCheckCircle</v-icon
        >
      </div>
    </template>

    <!-- <template v-if="canAdd">
      <div>
        <v-autocomplete
          v-model="selectedStatus"
          :items="pvm.selectLists.allowedwostatus"
          item-text="name"
          item-value="id"
          append-outer-icon="$ayiPlus"
          @click:append-outer="addState()"
          dense
        >
          <template v-slot:item="data">
            <v-list-item-avatar>
              <v-icon :color="data.item.color">$ayiFlag</v-icon>
            </v-list-item-avatar>
            <v-list-item-content>
              <v-list-item-title
                ><span class="text-subtitle-2">{{ data.item.name }}</span
                ><v-icon
                  small
                  color="disabled"
                  class="ml-2"
                  v-if="data.item.locked"
                  >$ayiLock</v-icon
                >
                <v-icon
                  color="disabled"
                  class="ml-1"
                  small
                  v-if="data.item.completed"
                  >$ayiCheckCircle</v-icon
                ></v-list-item-title
              >

              <v-list-item-subtitle>
                {{ data.item.notes }}</v-list-item-subtitle
              >
            </v-list-item-content>
            <v-list-item-action> </v-list-item-action>
          </template>
        </v-autocomplete>
      </div>
    </template> -->

    <!-- 
      fixup status control 
		status control should require click to open dialog which shows list of all status prior and allows to add then close to view
		this way it's clear how to change, less confusing than now and easy to get at the list

    todo: reduce vertical, end confusion, hide combo and instead make it a popup dialog to select so it's clear something funky is happening
        maybe, it's the same dialog as the view history dialog, just put an edit symbol button after the current state and that opens the whole shitteree
    todo: view state historya button to show more info which pops up a dialog showing the entire state history in a data table 
    -->
  </div>
</template>
<script>
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
/*  XXXeslint-disable    */
////////////////////////////////////////////////////////////////////////////////////////////////////////////

export default {
  data() {
    return {
      selectedStatus: null
    };
  },

  props: {
    value: {
      default: null,
      type: Object
    },
    pvm: {
      default: null,
      type: Object
    },
    formKey: { type: String, default: "" }, //used to grab template from store
    readonly: Boolean,
    disabled: Boolean
  },

  methods: {
    addState() {
      if (this.selectedStatus != null) {
        //first remove any other non saved states in collection, no need to send them to the server if there was multiple state changes since last save
        this.value.states = this.value.states.filter(
          z => z.concurrency != null
        );

        //is it a different state?
        if (this.selectedStatus == this.pvm.currentState.id) {
          return;
        }

        //push in new state
        this.value.states.push({
          workOrderId: this.value.id,
          workOrderStatusId: this.selectedStatus,
          userId: window.$gz.store.state.userId,
          created: window.$gz.locale.nowUTC8601String()
        });

        //flag header itself as dirty
        //this.value.isDirty = true; //Not sure why this is here

        //flag form dirty
        this.pvm.formState.dirty = true;
      }
    },
    form() {
      return window.$gz.form;
    },
    openIcon: function() {
      if (this.canAdd) {
        return "$ayiEdit";
      }
      return "$ayiHistory";
    },
    fieldValueChanged(ref) {
      if (!this.pvm.formState.loading && !this.pvm.formState.readonly) {
        window.$gz.form.fieldValueChanged(this.pvm, ref);
      }
    }
  },
  computed: {
    hasState() {
      return this.value.states != null && this.value.states.length > 0;
    },
    canAdd: function() {
      //first check most obvious disqualifying properties
      if (!this.pvm.rights.change || !this.pvm.subRights.states.create) {
        return false;
      }

      //not currently locked, user has rights to do it so allow it
      if (!this.value.isLockedAtServer) {
        return true;
      }

      //locked, confirm if user can change it
      //if any role then no problem

      //ok, only thing left to check is if the current user can unlock this
      //get remove roles required for current state
      let cs = this.pvm.currentState;
      if (cs.removeRoles == null || cs.removeRoles == 0) {
        //no state set yet
        return true;
      }

      //ok, need to check the role here against current user roles to see if this is valid
      if (window.$gz.role.hasRole(cs.removeRoles)) {
        return true;
      }

      return false;
    }
  }
};
</script>