Update dashboard
This commit is contained in:
Cagatay Civici
@@ -1,103 +0,0 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { CountryService } from '@/service/CountryService';
|
||||
|
||||
const countries = ref([]);
|
||||
const cities = ref([
|
||||
{ name: 'New York', code: 'NY' },
|
||||
{ name: 'Rome', code: 'RM' },
|
||||
{ name: 'London', code: 'LDN' },
|
||||
{ name: 'Istanbul', code: 'IST' },
|
||||
{ name: 'Paris', code: 'PRS' }
|
||||
]);
|
||||
const filteredCountries = ref(null);
|
||||
const value1 = ref(null);
|
||||
const value2 = ref(null);
|
||||
const value3 = ref(null);
|
||||
const value4 = ref(null);
|
||||
const value5 = ref(null);
|
||||
const value6 = ref(null);
|
||||
const value7 = ref(null);
|
||||
const value8 = ref(null);
|
||||
const value9 = ref(null);
|
||||
const value10 = ref(null);
|
||||
|
||||
onMounted(() => {
|
||||
CountryService.getCountries().then((data) => (countries.value = data));
|
||||
});
|
||||
|
||||
const searchCountry = (event) => {
|
||||
//in a real application, make a request to a remote url with the query and return filtered results, for demo we filter at client side
|
||||
const filtered = [];
|
||||
const query = event.query;
|
||||
for (let i = 0; i < countries.value.length; i++) {
|
||||
const country = countries.value[i];
|
||||
if (country.name.toLowerCase().indexOf(query.toLowerCase()) == 0) {
|
||||
filtered.push(country);
|
||||
}
|
||||
}
|
||||
filteredCountries.value = filtered;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Fluid class="card">
|
||||
<h5>Float Label</h5>
|
||||
<div class="flex flex-col md:flex-row gap-6">
|
||||
<FloatLabel class="md:w-1/3">
|
||||
<InputText type="text" id="inputtext" v-model="value1" />
|
||||
<label for="inputtext">InputText</label>
|
||||
</FloatLabel>
|
||||
<FloatLabel class="md:w-1/3">
|
||||
<AutoComplete id="autocomplete" v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" inputClass="w-full" />
|
||||
<label for="autocomplete">AutoComplete</label>
|
||||
</FloatLabel>
|
||||
<FloatLabel class="md:w-1/3">
|
||||
<DatePicker inputId="calendar" v-model="value3" />
|
||||
<label for="calendar">DatePicker</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col md:flex-row gap-6 mt-6">
|
||||
<FloatLabel class="md:w-1/3">
|
||||
<AutoComplete inputId="chips" v-model="value4" multiple :typeahead="false" />
|
||||
<label for="chips">Chips</label>
|
||||
</FloatLabel>
|
||||
<FloatLabel class="md:w-1/3">
|
||||
<InputMask id="inputmask" mask="99/99/9999" v-model="value5" fluid />
|
||||
<label for="inputmask">InputMask</label>
|
||||
</FloatLabel>
|
||||
<FloatLabel class="md:w-1/3">
|
||||
<InputNumber id="inputnumber" v-model="value6" />
|
||||
<label for="inputnumber">InputNumber</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col md:flex-row gap-6 mt-6">
|
||||
<InputGroup class="md:!w-1/3">
|
||||
<InputGroupAddon>
|
||||
<i class="pi pi-user"></i>
|
||||
</InputGroupAddon>
|
||||
<FloatLabel>
|
||||
<InputText type="text" id="inputgroup" v-model="value7" />
|
||||
<label for="inputgroup">InputGroup</label>
|
||||
</FloatLabel>
|
||||
</InputGroup>
|
||||
<FloatLabel class="md:w-1/3">
|
||||
<Select id="dropdown" :options="cities" v-model="value8" optionLabel="name" class="w-full" />
|
||||
<label for="dropdown">Select</label>
|
||||
</FloatLabel>
|
||||
<FloatLabel class="md:w-1/3">
|
||||
<MultiSelect id="multiselect" :options="cities" v-model="value9" optionLabel="name" :filter="false" />
|
||||
<label for="multiselect">MultiSelect</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col md:flex-row gap-6 mt-6">
|
||||
<FloatLabel class="md:w-1/3">
|
||||
<Textarea inputId="textarea" rows="3" cols="30" v-model="value10" />
|
||||
<label for="textarea">Textarea</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
</Fluid>
|
||||
</template>
|
||||
@@ -1,7 +1,7 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { CountryService } from '@/service/CountryService';
|
||||
import { NodeService } from '@/service/NodeService';
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
const floatValue = ref(null);
|
||||
const autoValue = ref(null);
|
||||
@@ -78,7 +78,7 @@ const searchCountry = (event) => {
|
||||
<Fluid class="flex flex-col md:flex-row gap-6">
|
||||
<div class="md:w-1/2">
|
||||
<div class="card flex flex-col gap-4">
|
||||
<h5>InputText</h5>
|
||||
<div class="font-semibold text-xl mb-4">InputText</div>
|
||||
<div class="flex flex-col md:flex-row gap-4">
|
||||
<InputText type="text" placeholder="Default" />
|
||||
<InputText type="text" placeholder="Disabled" :disabled="true" />
|
||||
|
||||
@@ -1,93 +0,0 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { CountryService } from '@/service/CountryService';
|
||||
|
||||
const countries = ref(null);
|
||||
const filteredCountries = ref(null);
|
||||
const value1 = ref(null);
|
||||
const value2 = ref(null);
|
||||
const value3 = ref(null);
|
||||
const value4 = ref(null);
|
||||
const value5 = ref(null);
|
||||
const value6 = ref(null);
|
||||
const value7 = ref(null);
|
||||
const value8 = ref(null);
|
||||
const value9 = ref(null);
|
||||
const value10 = ref(null);
|
||||
const cities = ref([
|
||||
{ name: 'New York', code: 'NY' },
|
||||
{ name: 'Rome', code: 'RM' },
|
||||
{ name: 'London', code: 'LDN' },
|
||||
{ name: 'Istanbul', code: 'IST' },
|
||||
{ name: 'Paris', code: 'PRS' }
|
||||
]);
|
||||
|
||||
onMounted(() => {
|
||||
CountryService.getCountries().then((data) => {
|
||||
countries.value = data;
|
||||
});
|
||||
});
|
||||
|
||||
const searchCountry = (event) => {
|
||||
setTimeout(() => {
|
||||
if (!event.query.trim().length) {
|
||||
filteredCountries.value = [...countries];
|
||||
} else {
|
||||
filteredCountries.value = countries.value.filter((country) => {
|
||||
return country.name.toLowerCase().startsWith(event.query.toLowerCase());
|
||||
});
|
||||
}
|
||||
}, 250);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Fluid class="card">
|
||||
<h5>Invalid State</h5>
|
||||
<div class="flex flex-col md:flex-row gap-6">
|
||||
<div class="md:w-1/2">
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="inputtext">InputText</label>
|
||||
<InputText id="inputtext" type="text" v-model="value1" invalid />
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="autocomplete">AutoComplete</label>
|
||||
<AutoComplete id="autocomplete" v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" invalid inputClass="w-full" />
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="calendar">DatePicker</label>
|
||||
<DatePicker id="calendar" v-model="value3" invalid :showIcon="true" />
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="chips">Chips</label>
|
||||
<AutoComplete id="chips" v-model="value4" invalid multiple :typeahead="false" />
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="password">Password</label>
|
||||
<Password id="password" v-model="value10" invalid />
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:w-1/2">
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="inputmask">InputMask</label>
|
||||
<InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" invalid />
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="inputnumber">InputNumber</label>
|
||||
<InputNumber id="inputnumber" v-model="value6" invalid />
|
||||
</div>
|
||||
<div class="flex flex-col gap-2"></div>
|
||||
<label for="dropdown">Select</label>
|
||||
<Select id="dropdown" v-model="value7" :options="cities" optionLabel="name" invalid />
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="multiselect">MultiSelect</label>
|
||||
<MultiSelect id="multiselect" v-model="value8" :options="cities" optionLabel="name" invalid />
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="textarea">Textarea</label>
|
||||
<Textarea id="textarea" v-model="value9" rows="3" invalid />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Fluid>
|
||||
</template>
|
||||
Reference in New Issue
Block a user