Update Maintenance UI

This commit is contained in:
Louis Lam 2022-09-18 02:02:18 +08:00
parent 80698a58b8
commit a29eae3213
3 changed files with 80 additions and 31 deletions

View File

@ -268,7 +268,7 @@ export default {
toast.success(res.msg); toast.success(res.msg);
this.processing = false; this.processing = false;
this.$root.getMaintenanceList(); this.$root.getMaintenanceList();
this.$router.push("/maintenance/" + res.maintenanceID); this.$router.push("/maintenance");
}); });
}); });
} else { } else {
@ -285,6 +285,7 @@ export default {
this.processing = false; this.processing = false;
this.$root.toastRes(res); this.$root.toastRes(res);
this.init(); this.init();
this.$router.push("/maintenance");
}); });
}); });
} else { } else {

View File

@ -91,7 +91,7 @@ export default {
this.$root.deleteMaintenance(this.maintenance.id, (res) => { this.$root.deleteMaintenance(this.maintenance.id, (res) => {
if (res.ok) { if (res.ok) {
toast.success(res.msg); toast.success(res.msg);
this.$router.push("/dashboard"); this.$router.push("/maintenance");
} else { } else {
toast.error(res.msg); toast.error(res.msg);
} }

View File

@ -16,21 +16,37 @@
{{ $t("No maintenance") }} {{ $t("No maintenance") }}
</span> </span>
<router-link <div
v-for="(item, index) in sortedMaintenanceList" v-for="(item, index) in sortedMaintenanceList"
:key="index" :key="index"
:to="maintenanceURL(item.id)"
class="item" class="item"
:class="{ 'disabled': !$root.isActiveMaintenance(item.end_date) }" :class="{ 'ended': !$root.isActiveMaintenance(item.end_date) }"
> >
<div> <div class="left-part">
</div> <div
class="circle"
></div>
<div class="info"> <div class="info">
<div class="title">{{ item.title }}</div> <div class="title">{{ item.title }}</div>
<div>{{ item.description }}</div> <div>{{ item.description }}</div>
</div> </div>
</router-link>
</div> </div>
<div class="buttons">
<router-link :to="maintenanceURL(item.id)" class="btn btn-light">{{ $t("Details") }}</router-link>
<router-link :to="'/maintenance/edit/' + item.id" class="btn btn-secondary">
<font-awesome-icon icon="edit" /> {{ $t("Edit") }}
</router-link>
<button class="btn btn-danger" @click="deleteDialog(item.id)">
<font-awesome-icon icon="trash" /> {{ $t("Delete") }}
</button>
</div>
</div>
</div>
<Confirm ref="confirmDelete" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="deleteMaintenance">
{{ $t("deleteMaintenanceMsg") }}
</Confirm>
</div> </div>
</transition> </transition>
</template> </template>
@ -38,12 +54,17 @@
<script> <script>
import { getResBaseURL } from "../util-frontend"; import { getResBaseURL } from "../util-frontend";
import { getMaintenanceRelativeURL } from "../util.ts"; import { getMaintenanceRelativeURL } from "../util.ts";
import Confirm from "../components/Confirm.vue";
import { useToast } from "vue-toastification";
const toast = useToast();
export default { export default {
components: { components: {
Confirm,
}, },
data() { data() {
return { return {
selectedMaintenanceID: undefined,
}; };
}, },
computed: { computed: {
@ -107,6 +128,22 @@ export default {
maintenanceURL(id) { maintenanceURL(id) {
return getMaintenanceRelativeURL(id); return getMaintenanceRelativeURL(id);
}, },
deleteDialog(maintenanceID) {
this.selectedMaintenanceID = maintenanceID;
this.$refs.confirmDelete.show();
},
deleteMaintenance() {
this.$root.deleteMaintenance(this.selectedMaintenanceID, (res) => {
if (res.ok) {
toast.success(res.msg);
this.$router.push("/maintenance");
} else {
toast.error(res.msg);
}
});
},
}, },
}; };
</script> </script>
@ -121,6 +158,7 @@ export default {
text-decoration: none; text-decoration: none;
border-radius: 10px; border-radius: 10px;
transition: all ease-in-out 0.15s; transition: all ease-in-out 0.15s;
justify-content: space-between;
padding: 10px; padding: 10px;
min-height: 90px; min-height: 90px;
@ -128,18 +166,26 @@ export default {
background-color: $highlight-white; background-color: $highlight-white;
} }
&.active { &.ended {
background-color: #cdf8f4; .left-part {
opacity: 0.5;
.circle {
background-color: $dark-font-color;
}
}
} }
$logo-width: 70px; .left-part {
display: flex;
gap: 12px;
align-items: center;
.logo { .circle {
width: $logo-width; width: 25px;
height: $logo-width; height: 25px;
border-radius: 50rem;
background-color: $maintenance;
// Better when the image is loading
min-height: 1px;
} }
.info { .info {
@ -154,15 +200,17 @@ export default {
} }
} }
.buttons {
display: flex;
gap: 8px;
}
}
.dark { .dark {
.item { .item {
&:hover { &:hover {
background-color: $dark-bg2; background-color: $dark-bg2;
} }
&.active {
background-color: $dark-bg2;
}
} }
} }
</style> </style>