269 lines
8.5 KiB
Vue
269 lines
8.5 KiB
Vue
<template>
|
|
<div v-if="pvm != null">
|
|
<!-- Title and menu -->
|
|
<v-col cols="12">
|
|
<v-menu offset-y>
|
|
<template v-slot:activator="{ on, attrs }">
|
|
<div class="text-h6">
|
|
<v-icon large color="primary">$ayiWrench</v-icon>
|
|
{{ $ay.t("WorkOrderItemList") }}
|
|
<v-btn large icon v-bind="attrs" v-on="on">
|
|
<v-icon small color="primary">$ayiEllipsisV</v-icon>
|
|
</v-btn>
|
|
</div>
|
|
</template>
|
|
<v-list>
|
|
<v-list-item v-if="canAdd" @click="newItem">
|
|
<v-list-item-icon>
|
|
<v-icon>$ayiPlus</v-icon>
|
|
</v-list-item-icon>
|
|
<v-list-item-title>{{ $ay.t("New") }}</v-list-item-title>
|
|
</v-list-item>
|
|
<v-list-item v-if="canDelete" @click="deleteItem">
|
|
<v-list-item-icon>
|
|
<v-icon>$ayiTrashAlt</v-icon>
|
|
</v-list-item-icon>
|
|
<v-list-item-title>{{ $ay.t("Delete") }}</v-list-item-title>
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-menu>
|
|
</v-col>
|
|
|
|
<!-- items:{{ value.items }}<br />
|
|
<span class="text-caption"
|
|
>[selected index: {{ pvm.selectedItemIndex }}]</span
|
|
>-->
|
|
<template v-if="pvm.woItemCount > 1">
|
|
<!-- ################################ WORK ORDER ITEMS TABLE ############################### -->
|
|
<v-col cols="12">
|
|
<v-data-table
|
|
:headers="headerList"
|
|
:items="itemList"
|
|
item-key="id"
|
|
v-model="selectedRow"
|
|
class="elevation-1"
|
|
disable-pagination
|
|
disable-filtering
|
|
disable-sort
|
|
hide-default-footer
|
|
data-cy="itemsTable"
|
|
dense
|
|
:item-class="itemRowClasses"
|
|
@click:row="selectItem"
|
|
>
|
|
<!-- <template v-slot:[`item.actions`]="{ item }">
|
|
<v-btn icon @click="selectItem(item)">
|
|
<v-icon :class="itemRowClasses(item)">
|
|
$ayiEdit
|
|
</v-icon>
|
|
</v-btn>
|
|
</template> -->
|
|
</v-data-table>
|
|
</v-col>
|
|
</template>
|
|
<template v-if="pvm.hasSelectedWoItem">
|
|
<v-col v-if="form().showMe(this, 'TechNotes')" cols="12">
|
|
<v-textarea
|
|
v-model="value.items[pvm.selectedItemIndex].techNotes"
|
|
:readonly="formState.readOnly"
|
|
:label="$ay.t('WorkOrderItemTechNotes')"
|
|
:error-messages="form().serverErrors(this, 'notes')"
|
|
ref="notes"
|
|
data-cy="notes"
|
|
@input="fieldValueChanged('notes')"
|
|
auto-grow
|
|
></v-textarea>
|
|
</v-col>
|
|
|
|
<GzWoItemScheduledUsers
|
|
v-if="pvm.subRights.scheduledUsers.visible"
|
|
v-model="value"
|
|
:pvm="pvm"
|
|
data-cy="woItemScheduledUsers"
|
|
/>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
|
/* XXXeslint-disable */
|
|
////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
|
import GzWoItemScheduledUsers from "../components/work-order-item-scheduled-users.vue";
|
|
/*
|
|
todo: can I turn control labels into hyperlinks for getting to feeder records? If not then need to find a way to accomplish it
|
|
e.g. can workorder status title be changed to a hyper link to status list
|
|
e.g. can projects title be turned to a hyper link to projects list
|
|
ideally not in menu because it would be a lot on a workorder and need space for wo graph subitem links
|
|
todo: need an editable control at every level for proper test of partial update
|
|
todo: highlight currently selected row, mobile and full
|
|
*/
|
|
export default {
|
|
components: {
|
|
GzWoItemScheduledUsers
|
|
},
|
|
data() {
|
|
return { selectedRow: [] };
|
|
},
|
|
props: {
|
|
value: {
|
|
default: null,
|
|
type: Object
|
|
},
|
|
pvm: {
|
|
default: null,
|
|
type: Object
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
newItem() {
|
|
console.log("STUB: NEW ITEM");
|
|
},
|
|
deleteItem() {
|
|
console.log(`STUB: DELETE ITEM id:${this.selectedRow[0].id}`);
|
|
},
|
|
selectItem: function(item) {
|
|
this.selectedRow = [item];
|
|
this.pvm.selectedItemIndex = item.index;
|
|
},
|
|
form() {
|
|
return window.$gz.form;
|
|
},
|
|
fieldValueChanged(ref) {
|
|
if (!this.formState.loading && !this.formState.readonly) {
|
|
window.$gz.form.fieldValueChanged(this.pvm, ref);
|
|
}
|
|
},
|
|
itemRowClasses: function(item) {
|
|
if (this.form().childRowHasError(this, "Items", item.index)) {
|
|
return "font-weight-black font-italic error--text";
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
headerList: function() {
|
|
/*
|
|
public uint Concurrency { get; set; }
|
|
public string Notes { get; set; }//Was Summary
|
|
public string Wiki { get; set; }
|
|
public string CustomFields { get; set; }
|
|
public List<string> Tags { get; set; } = new List<string>();
|
|
|
|
[Required]
|
|
public long WorkOrderId { get; set; }
|
|
public string TechNotes { get; set; }
|
|
public long? WorkorderItemStatusId { get; set; }
|
|
public long? WorkorderItemPriorityId { get; set; }
|
|
public DateTime RequestDate { get; set; }
|
|
public bool WarrantyService { get; set; } = false;
|
|
|
|
|
|
IN ORDER: notes, status, date, priority, warranty, tags
|
|
|
|
except they will not prefill at server but will be set here since the wo differs from the po in that there is no instant update with new viz fields to populate from server
|
|
and it's probably not a big list to fill anyway
|
|
|
|
|
|
If the column is a text, left-align it
|
|
If the column is a number or number + unit, (or date) right-align it (like excel)
|
|
*/
|
|
let headers = [];
|
|
|
|
headers.push({
|
|
text: this.$ay.t("WorkOrderItemSummary"), //mandatory not hidden
|
|
align: "left",
|
|
value: "notes"
|
|
});
|
|
|
|
if (this.form().showMe(this, "Items.WorkOrderItemWorkOrderStatusID")) {
|
|
headers.push({
|
|
text: this.$ay.t("WorkOrderItemWorkOrderStatusID"),
|
|
align: "left",
|
|
value: "status"
|
|
});
|
|
}
|
|
|
|
if (this.form().showMe(this, "Items.RequestDate")) {
|
|
headers.push({
|
|
text: this.$ay.t("WorkOrderItemRequestDate"),
|
|
align: "right",
|
|
value: "requestDate"
|
|
});
|
|
}
|
|
|
|
if (this.form().showMe(this, "Items.WorkOrderItemPriorityID")) {
|
|
headers.push({
|
|
text: this.$ay.t("WorkOrderItemPriorityID"),
|
|
align: "left",
|
|
value: "priority"
|
|
});
|
|
}
|
|
|
|
if (this.form().showMe(this, "Items.WorkOrderItemWarrantyService")) {
|
|
headers.push({
|
|
text: this.$ay.t("WorkOrderItemWarrantyService"),
|
|
align: "center",
|
|
value: "warranty"
|
|
});
|
|
}
|
|
|
|
if (this.form().showMe(this, "Items.Tags")) {
|
|
headers.push({
|
|
text: this.$ay.t("Tags"),
|
|
align: "left",
|
|
value: "tags"
|
|
});
|
|
}
|
|
|
|
// headers.push({ text: "", value: "actions" });
|
|
|
|
return headers;
|
|
},
|
|
itemList: function() {
|
|
return this.value.items.map((x, i) => {
|
|
return {
|
|
index: i,
|
|
id: x.id,
|
|
notes: x.notes,
|
|
quantityReceived: window.$gz.locale.decimalLocalized(
|
|
x.quantityReceived,
|
|
this.pvm.languageName
|
|
),
|
|
status: x.workorderItemStatusId, //todo: get real status name etc here
|
|
requestDate: window.$gz.locale.utcDateToShortDateAndTimeLocalized(
|
|
x.requestDate,
|
|
this.pvm.timeZoneName,
|
|
this.pvm.languageName,
|
|
this.pvm.hour12
|
|
),
|
|
priority: x.workorderItemPriorityId, //todo: get actual priority, color etc here
|
|
warranty: x.warrantyService,
|
|
tags: x.tags
|
|
};
|
|
});
|
|
},
|
|
formState: function() {
|
|
return this.pvm.formState;
|
|
},
|
|
formCustomTemplateKey: function() {
|
|
return this.pvm.formCustomTemplateKey;
|
|
},
|
|
canAdd: function() {
|
|
return (
|
|
!this.value.isLockedAtServer &&
|
|
this.pvm.rights.change &&
|
|
this.pvm.subRights.items.create
|
|
);
|
|
},
|
|
canDelete: function() {
|
|
return (
|
|
this.pvm.hasSelectedWoItem &&
|
|
!this.value.isLockedAtServer &&
|
|
this.pvm.rights.change &&
|
|
this.pvm.subRights.items.delete
|
|
);
|
|
}
|
|
}
|
|
};
|
|
</script>
|