Господа профессиональные программисты!
Уже год занимаю программированием, хотелось бы выяснить, на что следует обращать внимания при оценке качества кода?
Код без рефакторинга.
<template>
<v-container fluid>
<v-row>
<v-col
class="pt-0"
cols="12"
>
<div class="text-right">
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn
outlined
small
color="indigo"
open-delay="2000"
v-on="on"
@click="restaurantsAddShowDialog"
>
{{ $t("pages.restaurants.toolbar.new_restaurant.title") }}
</v-btn>
</template>
<span>{{ $t("pages.restaurants.toolbar.new_restaurant.hint") }}</span>
</v-tooltip>
</div>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-simple-table
dense
class="table_dark"
>
<template v-slot:default>
<thead>
<tr>
<th class="text-left" style="width: 120px">
ID ресторана
</th>
<th class="text-left">
Наименование
</th>
<th />
</tr>
</thead>
<tbody>
<tr v-for="item in restaurants" :key="item.id">
<td class="text-left">
{{ item.id }}
</td>
<td style="width: auto">
{{ item.name }}
</td>
<td class="text-right" style="width: 50px; border-left: none">
<div class="text-center">
<v-menu offset-y>
<template v-slot:activator="{ on }">
<v-btn
fab
dark
x-small
text
color="black"
v-on="on"
>
<v-icon dark>
mdi-dots-horizontal
</v-icon>
</v-btn>
</template>
<v-list>
<v-list-item
v-for="(table_options_item, table_options_item_index) in table_options"
:key="table_options_item_index"
@click="table_options_item.action(item)"
>
<v-list-item-title>{{ table_options_item.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</div>
</td>
</tr>
</tbody>
</template>
</v-simple-table>
</v-col>
</v-row>
<!-- Dialog for add restaurant -->
<v-row justify="center">
<v-dialog v-model="dialog_add_restaurant" persistent max-width="600px">
<v-card>
<v-card-title>
<span class="headline">{{ $t("pages.restaurants.dialog.add.title") }}</span>
</v-card-title>
<v-card-text>
<v-container>
<v-row>
<v-col cols="12">
<v-text-field
v-model="restaurant_name"
:label="'* '+$t('pages.restaurants.dialog.add.restaurant_name_title')"
required
/>
<v-textarea
outlined
name="input-7-4"
:label="$t('pages.restaurants.dialog.add.restaurant_description_title')"
value=""
/>
</v-col>
</v-row>
</v-container>
<small>* {{ $t("this_field_is_required") }}</small>
</v-card-text>
<v-card-actions>
<v-spacer />
<v-tooltip
bottom
open-delay="1000"
>
<template v-slot:activator="{ on }">
<v-btn
color="blue darken-1"
text
v-on="on"
@click="dialog_add_restaurant = false"
>
{{ $t("pages.restaurants.dialog.add.actions.cancel.title") }}
</v-btn>
</template>
<span>{{ $t("pages.restaurants.dialog.add.actions.cancel.hint") }}</span>
</v-tooltip>
<v-tooltip
bottom
open-delay="1000"
>
<template v-slot:activator="{ on }">
<v-btn
color="blue darken-1"
text
v-on="on"
@click="restaurantsAdd"
>
{{ $t("pages.restaurants.dialog.add.actions.save.title") }}
</v-btn>
</template>
<span>{{ $t("pages.restaurants.dialog.add.actions.save.hint") }}</span>
</v-tooltip>
</v-card-actions>
</v-card>
</v-dialog>
</v-row>
<v-row>
<msg-dialog />
</v-row>
</v-container>
</template>
<script>
import MsgDialog from "../components/Dialog/MsgDialog"
export default {
name: "Restaurants",
components: { MsgDialog },
async asyncData ({ $axios }) {
let restaurants = []
await $axios.$get(`${process.env.api}/restaurants.get`, {
params: {
offset: 0,
count: 10
}
}).then(({ count, items }) => {
restaurants = items
}).catch((e) => {
// eslint-disable-next-line no-console
console.log(e)
})
return {
restaurants
}
},
data () {
return {
dialog_add_restaurant: false,
restaurant_name: "",
restaurant_description: "",
restaurants: []
}
},
computed: {
table_options () {
return [
{
title: this.$t("delete"),
action: (item) => {
this.showConfirmDialogDeleteRestaurants(item)
}
},
{
title: this.$t("edit"),
action: ({ id }) => {
}
}
]
}
},
methods: {
restaurantsAddShowDialog () {
this.dialog_add_restaurant = true
},
/**
* Add new restaurant
*/
restaurantsAdd () {
this.dialog_add_restaurant = false
this.$axios.$post(`${process.env.api}/restaurants.add`,
{
name: this.restaurant_name,
description: this.restaurant_description
}).then(({ code, msg }) => {
this.restaurant_name = ""
this.restaurant_description = ""
this.$toasted.show(msg, {
theme: "toasted-primary",
position: "top-right",
duration: 3000,
onComplete: () => {
this.$axios.$get(`${process.env.api}/restaurants.get`, {
params: {
offset: 0,
count: 10
}
}).then(({ count, items }) => {
this.restaurants = items
}).catch((e) => {
console.log(e)
})
}
})
}).catch((e) => {
console.log(e)
})
},
showConfirmDialogDeleteRestaurants ({ id }) {
this.$emit("msg-dialog-show", {
title: this.$t("confirmation_request"),
text: this.$t("are_you_sure_you_want_to_delete"),
buttons: [
{
action () {},
text: this.$t("no"),
color: "red darken-1"
},
{
action: () => {
this.restaurantsRemove(id)
},
text: this.$t("yes"),
color: "green darken-1"
}
]
})
},
/**
* Restaurant Removal
*/
restaurantsRemove (id) {
this.$axios.$get(`${process.env.api}/restaurants.remove`,
{
params: {
restaurant_id: id
}
}).then(({ code, msg }) => {
this.$toasted.show(msg, {
theme: "toasted-primary",
position: "top-right",
duration: 3000,
onComplete: () => {
this.$axios.$get(`${process.env.api}/restaurants.get`, {
params: {
offset: 0,
count: 10
}
}).then(({ count, items }) => {
this.restaurants = items
}).catch((e) => {
console.log(e)
})
}
})
}).catch((e) => {
console.log(e)
})
}
},
head () {
return {
title: "Мои рестораны"
}
}
}
</script>
<style scoped>
</style>
Всегда преследует сомнение.
Всегда кажется, что можно что-то улучшить.
Спасибо.
Простой
