grafica modificata note maintenance
This commit is contained in:
Alessandro Francia
@@ -15,6 +15,7 @@
|
||||
@color-whitetwo: #f8f8f8;
|
||||
@color-white3: #dfdfdf;
|
||||
@color-white4:#f3f3f3;
|
||||
@color-white5:#f4f4f4;
|
||||
@color-whitegrey: #dddddd;
|
||||
@color-whitethree: #e7e7e7;
|
||||
@color-silver: #bbbcbc;
|
||||
|
||||
@@ -200,7 +200,65 @@
|
||||
color: @color-greyish-brown;
|
||||
}
|
||||
}
|
||||
.allattach, .allnotes{
|
||||
.message-box{
|
||||
width: 408px;
|
||||
height: 96px;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
.message-box-header{
|
||||
height: calc(~'100% - 20px');
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
.avatar{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-left: 16px;
|
||||
margin-top: 8px;
|
||||
float: left;
|
||||
}
|
||||
.text-message{
|
||||
margin-left: 8px;
|
||||
width: 328px;
|
||||
height: 40px;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 2px 0 @color-black-50;
|
||||
margin-top: 8px;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
.message-box-body{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 14px;
|
||||
margin-left: 132px;
|
||||
.text-date{
|
||||
font-size: 12px;
|
||||
color: @color-greyish-brown;
|
||||
float: left;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.groupbutton{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
button.btn-hidden{
|
||||
visibility: hidden;
|
||||
i{
|
||||
font-size: 26px;
|
||||
visibility: visible;
|
||||
margin: 0 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.allattach{
|
||||
display: flex;
|
||||
height: 64px;
|
||||
align-items: center;
|
||||
@@ -211,18 +269,66 @@
|
||||
color: @color-greyish-brown;
|
||||
}
|
||||
}
|
||||
.addattach, .addnote{
|
||||
.allnotes{
|
||||
display: flex;
|
||||
height: 20px;
|
||||
width: 408px;
|
||||
margin: 23px auto;
|
||||
span{
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
margin: 0 0 0 20px;
|
||||
color: @color-greyish-brown;
|
||||
}
|
||||
}
|
||||
.addattach{
|
||||
display: flex;
|
||||
height: 64px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-top: solid 1px @color-white;
|
||||
.group-button-add-attach, .group-button-add-note{
|
||||
.group-button-add-attach{
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
color: @color-greyish-brown;
|
||||
}
|
||||
}
|
||||
.addnote{
|
||||
height: 160px;
|
||||
width: 408px;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
border-top: solid 2px @color-white;
|
||||
.addnote-header{
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
height: 58px;
|
||||
.avatar-add-note{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-left: 16px;
|
||||
margin-top: 8px;
|
||||
float: left;
|
||||
}
|
||||
.text-add-note{
|
||||
margin-left: 8px;
|
||||
width: 328px;
|
||||
height: 40px;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 2px 0 @color-black-50;
|
||||
margin-top: 8px;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
.addnote-buttons{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -8158,35 +8158,135 @@ footer .container button.big:before {
|
||||
line-height: 1;
|
||||
color: #4b4b4b;
|
||||
}
|
||||
.accordion-maintenance section .dropdown .allattach,
|
||||
.accordion-maintenance section .dropdown .allnotes {
|
||||
.accordion-maintenance section .dropdown .message-box {
|
||||
width: 408px;
|
||||
height: 96px;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.accordion-maintenance section .dropdown .message-box .message-box-header {
|
||||
height: calc(100% - 20px);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
}
|
||||
.accordion-maintenance section .dropdown .message-box .message-box-header .avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-left: 16px;
|
||||
margin-top: 8px;
|
||||
float: left;
|
||||
}
|
||||
.accordion-maintenance section .dropdown .message-box .message-box-header .text-message {
|
||||
margin-left: 8px;
|
||||
width: 328px;
|
||||
height: 40px;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
|
||||
margin-top: 8px;
|
||||
float: right;
|
||||
}
|
||||
.accordion-maintenance section .dropdown .message-box .message-box-body {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 14px;
|
||||
margin-left: 132px;
|
||||
}
|
||||
.accordion-maintenance section .dropdown .message-box .message-box-body .text-date {
|
||||
font-size: 12px;
|
||||
color: #4b4b4b;
|
||||
float: left;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.accordion-maintenance section .dropdown .message-box .groupbutton {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.accordion-maintenance section .dropdown .message-box .groupbutton button.btn-hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
.accordion-maintenance section .dropdown .message-box .groupbutton button.btn-hidden i {
|
||||
font-size: 26px;
|
||||
visibility: visible;
|
||||
margin: 0 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.accordion-maintenance section .dropdown .allattach {
|
||||
display: flex;
|
||||
height: 64px;
|
||||
align-items: center;
|
||||
}
|
||||
.accordion-maintenance section .dropdown .allattach span,
|
||||
.accordion-maintenance section .dropdown .allattach span {
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
margin: 0 0 0 20px;
|
||||
color: #4b4b4b;
|
||||
}
|
||||
.accordion-maintenance section .dropdown .allnotes {
|
||||
display: flex;
|
||||
height: 20px;
|
||||
width: 408px;
|
||||
margin: 23px auto;
|
||||
}
|
||||
.accordion-maintenance section .dropdown .allnotes span {
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
margin: 0 0 0 20px;
|
||||
color: #4b4b4b;
|
||||
}
|
||||
.accordion-maintenance section .dropdown .addattach,
|
||||
.accordion-maintenance section .dropdown .addnote {
|
||||
.accordion-maintenance section .dropdown .addattach {
|
||||
display: flex;
|
||||
height: 64px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-top: solid 1px #fff;
|
||||
}
|
||||
.accordion-maintenance section .dropdown .addattach .group-button-add-attach,
|
||||
.accordion-maintenance section .dropdown .addnote .group-button-add-attach,
|
||||
.accordion-maintenance section .dropdown .addattach .group-button-add-note,
|
||||
.accordion-maintenance section .dropdown .addnote .group-button-add-note {
|
||||
.accordion-maintenance section .dropdown .addattach .group-button-add-attach {
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
color: #4b4b4b;
|
||||
}
|
||||
.accordion-maintenance section .dropdown .addnote {
|
||||
height: 160px;
|
||||
width: 408px;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
border-top: solid 2px #fff;
|
||||
}
|
||||
.accordion-maintenance section .dropdown .addnote .addnote-header {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
height: 58px;
|
||||
}
|
||||
.accordion-maintenance section .dropdown .addnote .addnote-header .avatar-add-note {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-left: 16px;
|
||||
margin-top: 8px;
|
||||
float: left;
|
||||
}
|
||||
.accordion-maintenance section .dropdown .addnote .addnote-header .text-add-note {
|
||||
margin-left: 8px;
|
||||
width: 328px;
|
||||
height: 40px;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
|
||||
margin-top: 8px;
|
||||
float: right;
|
||||
}
|
||||
.accordion-maintenance section .dropdown .addnote .addnote-buttons {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.depot-action-container {
|
||||
height: 490px;
|
||||
width: 704px;
|
||||
|
||||
@@ -5,6 +5,7 @@ import {maintenanceCard} from "src/modules/base-components/cards";
|
||||
import { MaintenanceService } from "../services/maintenanceService";
|
||||
import { store, AppModel } from "src/store";
|
||||
import moment from "moment";
|
||||
import { MaintenanceGetters } from "src/store/maintenance.store";
|
||||
|
||||
@Component({ components: { MaintenanceProgress, maintenanceCard } })
|
||||
export default class Maintenance extends Vue {
|
||||
@@ -13,8 +14,11 @@ export default class Maintenance extends Vue {
|
||||
|
||||
public enableMaintenance: boolean = true;
|
||||
|
||||
public selectedMaintenance: any = null;
|
||||
get selectedMaintenance() {
|
||||
return (this.$store.getters as MaintenanceGetters).getMaintenance(this.selectedMaintenanceId);
|
||||
}
|
||||
|
||||
selectedMaintenanceId : number = null;
|
||||
// public static selectedMaintenance: any = null;
|
||||
// public static currentSelected: any = null;
|
||||
|
||||
@@ -85,7 +89,7 @@ export default class Maintenance extends Vue {
|
||||
}
|
||||
|
||||
public createMaintenance(){
|
||||
this.selectedMaintenance = {};
|
||||
this.selectedMaintenanceId = null;
|
||||
ModalHelper.maintenanceModal.currentMaintenance = {};
|
||||
ModalHelper.ShowModal(CreateMaintenance);
|
||||
}
|
||||
@@ -93,7 +97,7 @@ export default class Maintenance extends Vue {
|
||||
public selectMaintenance(m){
|
||||
debugger
|
||||
this.enableMaintenance = false;
|
||||
this.selectedMaintenance = m;
|
||||
this.selectedMaintenanceId = m.id;
|
||||
}
|
||||
public modifyMaintenance(maintenance){
|
||||
debugger
|
||||
@@ -107,7 +111,7 @@ export default class Maintenance extends Vue {
|
||||
debugger
|
||||
if(maintenance){
|
||||
await new MaintenanceService().DeleteMaintenance(maintenance);
|
||||
this.selectedMaintenance = null;
|
||||
this.selectedMaintenanceId = null;
|
||||
this.enableMaintenance = true;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -48,20 +48,32 @@
|
||||
</accordion-maintenance>
|
||||
<accordion-maintenance :title="'Note'">
|
||||
<div class="dropdown">
|
||||
<div class="filename">
|
||||
<i class="fa fa-file-text-o"></i> <span>NomeFile.txt</span>
|
||||
</div>
|
||||
<div class="filename">
|
||||
<i class="fa fa-file-text-o"></i> <span>NomeFile.txt</span>
|
||||
</div>
|
||||
<div class="filename">
|
||||
<i class="fa fa-file-text-o"></i> <span>NomeFile.txt</span>
|
||||
<div class="message-box">
|
||||
<div class="message-box-header">
|
||||
<img class="avatar"/>
|
||||
<textarea class="text-message"></textarea>
|
||||
</div>
|
||||
<div v-if="enableModifyNote" class="message-box-body">
|
||||
<label class="text-date">Aggiunta</label>
|
||||
</div>
|
||||
<div class="groupbutton">
|
||||
<button class="btn-hidden" v-if="enableModifyNote" @click="onClickModifyNote"><i class="fa fa-pencil-square-o"></i></button>
|
||||
<button class="btn-hidden" v-if="enableModifyNote"><i class="fa fa-trash" ></i></button>
|
||||
<button class="btn" v-if="!enableModifyNote" @click="onClickCancelModifyNote">Cancel</button>
|
||||
<button class="btn" v-if="!enableModifyNote">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="allnotes">
|
||||
<span>Mostra tutte le note (13)</span>
|
||||
</div>
|
||||
<div class="addnote">
|
||||
<div class="group-button-add-note">Aggiungi una nota <button class="btn"><i class="fa fa-plus"></i></button></div>
|
||||
<div class="addnote-header">
|
||||
<img class="avatar-add-note">
|
||||
<textarea class="text-add-note"></textarea>
|
||||
</div>
|
||||
<div class="addnote-buttons">
|
||||
<button class="btn">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</accordion-maintenance>
|
||||
@@ -84,7 +96,13 @@ export default {
|
||||
props:{
|
||||
expiration: {default: ""},
|
||||
selectedMaintenance: {default: {}},
|
||||
canEdit:{ default: false }
|
||||
canEdit:{ default: false },
|
||||
// enableModifyNote: {default: true}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
enableModifyNote: true
|
||||
}
|
||||
},
|
||||
components: {
|
||||
cardmaintenancewizard, accordionMaintenance
|
||||
@@ -95,6 +113,13 @@ export default {
|
||||
},
|
||||
onClickDelete(){
|
||||
this.$emit("clickdelete");
|
||||
},
|
||||
onClickModifyNote(){
|
||||
debugger
|
||||
this.enableModifyNote = false;
|
||||
},
|
||||
onClickCancelModifyNote(){
|
||||
this.enableModifyNote = true;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -9,11 +9,18 @@ export interface MaintenanceActions {
|
||||
deleteMaintenance(context, model: server.Maintenance);
|
||||
}
|
||||
|
||||
export interface MaintenanceGetters{
|
||||
getMaintenance: (id) => server.Maintenance;
|
||||
}
|
||||
|
||||
export const maintenanceStore = {
|
||||
state: {
|
||||
maintenances: [],
|
||||
_maintenances: new Map<string, server.Maintenance>()
|
||||
} as MaintenanceStoreModel,
|
||||
getters:{
|
||||
getMaintenance: (state) => (id) : server.Maintenance => state.maintenances.find(m => m.id == id)
|
||||
},
|
||||
mutations: {
|
||||
UpdateMaintenance(store, model: server.Maintenance) {
|
||||
store._maintenances.set(model.id, model);
|
||||
|
||||
Reference in New Issue
Block a user