Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 1x | <template>
<div class="q-my-xl">
<div class="full-width row wrap justify-between items-center">
<div :class="haveRoles(roles) ? 'col-4' : 'col-6'">
<div
class="full-width"
style="
max-width: 600px;
position: relative;
display: flex;
align-items: center;
"
>
<svg
style="position: absolute; left: 20px"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.69724 16.3945C10.405 16.3941 12.0636 15.8224 13.4089 14.7704L17.6385 19L18.999 17.6395L14.7694 13.4099C15.822 12.0645 16.3941 10.4055 16.3945 8.69724C16.3945 4.45318 12.9413 1 8.69724 1C4.45318 1 1 4.45318 1 8.69724C1 12.9413 4.45318 16.3945 8.69724 16.3945ZM8.69724 2.92431C11.881 2.92431 14.4702 5.51347 14.4702 8.69724C14.4702 11.881 11.881 14.4702 8.69724 14.4702C5.51347 14.4702 2.92431 11.881 2.92431 8.69724C2.92431 5.51347 5.51347 2.92431 8.69724 2.92431Z"
fill="#A6A6A6"
/>
<path
d="M10.0556 7.33722C10.4203 7.70283 10.6214 8.18584 10.6214 8.6977H12.5457C12.5466 8.19202 12.4472 7.69118 12.2533 7.22415C12.0594 6.75711 11.7749 6.33313 11.4161 5.97673C9.95943 4.52195 7.43377 4.52195 5.97803 5.97673L7.33659 7.33914C8.06783 6.60983 9.32825 6.61175 10.0556 7.33722Z"
fill="#A6A6A6"
/>
</svg>
<input
type="text"
style="padding-left: 50px"
class="input-class-cst"
v-model="filter"
placeholder="Search..."
/>
</div>
</div>
<div class="col-5 row items-center justify-around">
<q-btn-dropdown
class="bg-white brx-rounded-8 brx-shadow-sm dropdown-pa"
flat
no-caps
icon="img:/filter-icon.svg"
dropdown-icon="img:/arrow-icon.svg"
label="Filter by"
>
<q-list class="q-mt-sm">
<q-item
v-for="opt in filterOptions"
:key="opt"
clickable
v-close-popup
>
<q-item-section>
<q-item-label>{{ opt }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
<div class="row items-center">
<div class="col-md-4 col-sm-12">Shows:</div>
<div class="col-md-4 col-sm-12">
<q-select
dense
class="bg-white brx-rounded-8 q-px-md q-py-xs"
borderless
style="color: #1f9ed3 !important"
v-model="show"
:options="showOptions"
/>
</div>
<div class="col-md-4 col-sm-12">Data</div>
</div>
</div>
<div class="col-3" v-if="haveRoles(roles)">
<q-btn
v-if="to && withIcon"
class="float-right add-btn text-white brx-rounded-8"
style="border: none"
color="blue-brand"
size="initial"
:label="label"
unelevated
icon="add"
:to="{
name: to,
}"
no-caps
/>
<q-btn
v-if="to && !withIcon"
class="float-right add-btn text-white brx-rounded-8"
style="border: none"
color="blue-brand"
size="initial"
:label="label"
unelevated
:to="{
name: to,
}"
no-caps
/>
</div>
</div>
</div>
</template>
<script lang="ts">
import { haveRoles } from "@/common/function";
import { defineComponent, reactive, ref, toRefs } from "vue";
export default defineComponent({
props: {
label: String,
to: String,
roles: {
type: String,
required: true,
},
withIcon: {
type: Boolean,
default: true,
},
},
watch: {
show(newData, __oldData) {
this.$emit("update:show", newData);
},
filter(newData, __oldData) {
this.$emit("update:filter", newData);
},
},
setup() {
const state = reactive({
showOptions: [5, 10, 20, 50],
filterOptions: ["Daily", "Weekly", "Monthly", "Annualy"],
filter: "",
show: 5,
});
return {
...toRefs(state),
haveRoles
};
},
});
</script>
|