changes
This commit is contained in:
Viet An
@@ -1,157 +1,164 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="timeRanges || !enableTime"
|
||||
class="has-text-primary fixed-grid has-12-cols"
|
||||
style="border-bottom: 2px solid var(--bulma-grey-lighter)"
|
||||
class="block is-flex is-justify-content-space-between is-flex-wrap-wrap"
|
||||
style="gap: 0.5rem 0"
|
||||
>
|
||||
<div class="grid mb-3">
|
||||
<div
|
||||
v-if="enableTime"
|
||||
class="cell is-col-span-7 is-flex is-align-items-center is-flex-wrap-wrap"
|
||||
style="gap: 0.5rem 1rem"
|
||||
>
|
||||
<Caption
|
||||
:title="lang === 'vi' ? 'Thời gian' : 'Time'"
|
||||
type="has-text-orange"
|
||||
/>
|
||||
<div
|
||||
<div
|
||||
v-if="enableTime"
|
||||
class="is-flex is-align-items-center is-flex-wrap-wrap"
|
||||
style="gap: 0.5rem 0.75rem"
|
||||
>
|
||||
<span class="icon-text is-flex-wrap-nowrap font-semibold has-text-orange">
|
||||
<span class="icon">
|
||||
<Icon
|
||||
name="material-symbols:history-rounded"
|
||||
:size="18"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
v-if="this.store.viewport > 2"
|
||||
style="text-wrap: nowrap"
|
||||
>{{ lang === "vi" ? "Thời gian" : "Time" }}</span
|
||||
>
|
||||
</span>
|
||||
<div class="buttons has-addons">
|
||||
<button
|
||||
v-for="v in timeRanges"
|
||||
:key="v.code"
|
||||
:class="['is-flex is-align-items-center', v.code !== current && 'is-clickable']"
|
||||
style="gap: 0.35rem"
|
||||
:class="['timeRange button is-small fs-13 rounded-md is-light', v.code === current && 'is-orange']"
|
||||
style="gap: 0.4rem"
|
||||
@click="v.code !== current && changeOption(v)"
|
||||
>
|
||||
<span
|
||||
:class="v.code === current ? 'font-bold has-text-orange' : 'font-medium has-text-grey'"
|
||||
:class="v.code === current ? 'font-bold has-text-orange' : 'font-medium'"
|
||||
style="text-wrap: nowrap"
|
||||
>
|
||||
{{ v.name }}
|
||||
</span>
|
||||
<span
|
||||
:class="[
|
||||
'tag rounded-md w-5 h-6 fs-13',
|
||||
v.code === current
|
||||
? 'font-bold has-text-orange has-background-orange-90'
|
||||
: 'font-medium has-text-grey has-background-grey-white-ter',
|
||||
'count rounded-md h-full px-1',
|
||||
v.code === current ? 'font-bold has-text-orange has-background-orange-90' : 'font-medium has-text-grey',
|
||||
]"
|
||||
>{{ v.count }}</span
|
||||
>
|
||||
</div>
|
||||
<span
|
||||
v-if="newDataAvailable"
|
||||
class="has-text-danger-50 px-3 py-1.5 has-background-danger-95 rounded-md is-italic fs-14"
|
||||
>Có dữ liệu mới, vui lòng làm mới.</span
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="cell is-col-span-5 is-flex is-align-items-center is-flex-wrap-wrap"
|
||||
style="gap: 0.25rem 0.5rem"
|
||||
<span
|
||||
v-if="newDataAvailable"
|
||||
class="has-text-danger-50 px-3 py-1.5 has-background-danger-95 rounded-md is-italic fs-14"
|
||||
>
|
||||
<Caption
|
||||
:title="lang === 'vi' ? `Tìm ${this.store.viewport > 2 ? 'kiếm' : ''}` : 'Search'"
|
||||
type="has-text-orange"
|
||||
/>
|
||||
<input
|
||||
id="input"
|
||||
type="text"
|
||||
v-model="text"
|
||||
@keyup="startSearch"
|
||||
:placeholder="lang === 'vi' ? 'Nhập từ khóa...' : 'Enter keyword...'"
|
||||
class="input is-orange fs-12"
|
||||
:style="{
|
||||
maxWidth: '150px',
|
||||
width: this.store.viewport === 1 ? '150px' : 'auto',
|
||||
}"
|
||||
/>
|
||||
<div class="field has-addons is-flex-wrap-wrap is-align-items-center">
|
||||
<p
|
||||
v-if="importdata && $getEditRights()"
|
||||
class="control"
|
||||
Có dữ liệu mới, vui lòng làm mới.
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
:class="['is-flex is-align-items-center is-flex-wrap-wrap', !enableTime && 'ml-auto']"
|
||||
style="gap: 0.25rem 0.5rem"
|
||||
>
|
||||
<Caption
|
||||
:title="lang === 'vi' ? `Tìm ${this.store.viewport > 2 ? 'kiếm' : ''}` : 'Search'"
|
||||
type="has-text-orange"
|
||||
/>
|
||||
<input
|
||||
id="input"
|
||||
type="text"
|
||||
v-model="text"
|
||||
@keyup="startSearch"
|
||||
:placeholder="lang === 'vi' ? 'Nhập từ khóa...' : 'Enter keyword...'"
|
||||
class="input is-orange fs-12 max-w-50"
|
||||
:style="{
|
||||
width: this.store.viewport === 1 ? '150px' : 'auto',
|
||||
}"
|
||||
/>
|
||||
<div class="field has-addons is-flex-wrap-wrap is-align-items-center">
|
||||
<p
|
||||
v-if="importdata && $getEditRights()"
|
||||
class="control"
|
||||
>
|
||||
<button
|
||||
class="button is-ghost has-text-orange fs-14"
|
||||
@click="openImport()"
|
||||
>
|
||||
<button
|
||||
class="button is-ghost has-text-orange fs-14"
|
||||
@click="openImport()"
|
||||
>
|
||||
<span class="icon">
|
||||
<Icon
|
||||
name="material-symbols:upload-rounded"
|
||||
:size="22"
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
<span
|
||||
class="tooltiptext has-background-orange-soft has-text-orange-bold"
|
||||
style="top: 110%; bottom: unset; min-width: max-content; left: -45px"
|
||||
>
|
||||
Nhập dữ liệu
|
||||
<span class="icon">
|
||||
<Icon
|
||||
name="material-symbols:upload-rounded"
|
||||
:size="22"
|
||||
/>
|
||||
</span>
|
||||
</p>
|
||||
<p
|
||||
v-if="enableAdd && $getEditRights()"
|
||||
class="control"
|
||||
</button>
|
||||
<span
|
||||
class="tooltiptext has-background-orange-soft has-text-orange-bold"
|
||||
style="top: 110%; bottom: unset; min-width: max-content; left: -45px"
|
||||
>
|
||||
<button
|
||||
class="button is-ghost has-text-orange fs-14"
|
||||
@click="$emit('add')"
|
||||
>
|
||||
<span class="icon">
|
||||
<Icon
|
||||
name="material-symbols:add-rounded"
|
||||
:size="22"
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
<span
|
||||
class="tooltiptext has-background-orange-soft has-text-orange-bold"
|
||||
style="top: 110%; bottom: unset; min-width: max-content; left: -45px"
|
||||
>
|
||||
Thêm mới
|
||||
Nhập dữ liệu
|
||||
</span>
|
||||
</p>
|
||||
<p
|
||||
v-if="enableAdd && $getEditRights()"
|
||||
class="control"
|
||||
>
|
||||
<button
|
||||
class="button is-ghost has-text-orange fs-14"
|
||||
@click="$emit('add')"
|
||||
>
|
||||
<span class="icon">
|
||||
<Icon
|
||||
name="material-symbols:add-rounded"
|
||||
:size="22"
|
||||
/>
|
||||
</span>
|
||||
</p>
|
||||
<p class="control">
|
||||
<button
|
||||
class="button is-ghost has-text-orange fs-14"
|
||||
@click="$emit('excel')"
|
||||
>
|
||||
<span class="icon">
|
||||
<Icon
|
||||
name="mdi:microsoft-excel"
|
||||
:size="22"
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
<span
|
||||
class="tooltiptext has-background-orange-soft has-text-orange-bold"
|
||||
style="top: 110%; bottom: unset; min-width: max-content; left: -45px"
|
||||
>
|
||||
Xuất Excel
|
||||
</button>
|
||||
<span
|
||||
class="tooltiptext has-background-orange-soft has-text-orange-bold"
|
||||
style="top: 110%; bottom: unset; min-width: max-content; left: -45px"
|
||||
>
|
||||
Thêm mới
|
||||
</span>
|
||||
</p>
|
||||
<p class="control">
|
||||
<button
|
||||
class="button is-ghost has-text-orange fs-14"
|
||||
@click="$emit('excel')"
|
||||
>
|
||||
<span class="icon">
|
||||
<Icon
|
||||
name="mdi:microsoft-excel"
|
||||
:size="22"
|
||||
/>
|
||||
</span>
|
||||
</p>
|
||||
<p class="control">
|
||||
<button
|
||||
class="button is-ghost has-text-orange fs-14"
|
||||
@click="$emit('refresh-data')"
|
||||
>
|
||||
<span class="icon">
|
||||
<Icon
|
||||
name="material-symbols:refresh-rounded"
|
||||
:size="22"
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
<span
|
||||
class="tooltiptext has-background-orange-soft has-text-orange-bold"
|
||||
style="top: 110%; bottom: unset; min-width: max-content; left: -45px"
|
||||
>
|
||||
Làm mới
|
||||
</button>
|
||||
<span
|
||||
class="tooltiptext has-background-orange-soft has-text-orange-bold"
|
||||
style="top: 110%; bottom: unset; min-width: max-content; left: -45px"
|
||||
>
|
||||
Xuất Excel
|
||||
</span>
|
||||
</p>
|
||||
<p class="control">
|
||||
<button
|
||||
class="button is-ghost has-text-orange fs-14"
|
||||
@click="$emit('refresh-data')"
|
||||
>
|
||||
<span class="icon">
|
||||
<Icon
|
||||
name="material-symbols:refresh-rounded"
|
||||
:size="22"
|
||||
/>
|
||||
</span>
|
||||
</p>
|
||||
<Icon
|
||||
v-if="loading"
|
||||
name="svg-spinners:180-ring-with-bg"
|
||||
:size="22"
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
<span
|
||||
class="tooltiptext has-background-orange-soft has-text-orange-bold"
|
||||
style="top: 110%; bottom: unset; min-width: max-content; left: -45px"
|
||||
>
|
||||
Làm mới
|
||||
</span>
|
||||
</p>
|
||||
<Icon
|
||||
v-if="loading"
|
||||
name="svg-spinners:180-ring-with-bg"
|
||||
:size="22"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Modal
|
||||
@@ -443,3 +450,8 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.timeRange.is-orange:hover .count {
|
||||
background-color: var(--bulma-orange-85) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user