add: completed register view

src/components/ui/Cities.vue

@@ -0,0 +1,60 @@
+<script setup>
+    import { ref } from 'vue';
+    import VueMultiselect from 'vue-multiselect'
+    import { searchcities } from '../../services/public';
+
+    const options = ref([]);
+    const isLoading = ref(false);
+    
+    // defineProps(['selectedCities', 'multiple']);
+    defineProps({
+        selectedCities: {
+            type: Array
+        },
+        multiple: {
+            type: Boolean,
+            default: false
+        }
+    });
+    defineEmits(['update:selectedCities', 'clear-option'])
+
+    const searchState = async(query) => {
+        isLoading.value = true;
+        const resp = await searchcities(query);
+        options.value = resp;
+        isLoading.value = false;
+    }
+</script>
+
+<template>
+    <VueMultiselect
+        :value="selectedCities"
+        @input="$event => $emit('update:selectedCities', $event.target.value)"
+        :options="options"
+        :multiple="multiple"
+        :searchable="true"
+        :loading="isLoading"
+        :close-on-select="true"
+        @search-change="searchState"
+        @remove="$emit('clear-option')"
+        placeholder="Busca por ciudad"
+        label="city_name"
+        track-by="city_name"
+        selectLabel="Presione para seleccionar"
+        selectedLabel="Selecionado"
+        deselectLabel="Presione para remover selecion"
+    >
+        <template #noResult>
+            Oops! No se encontro coincidencias.
+        </template>
+        <template #noOptions>
+            Escriba para obtener lista.
+        </template>
+    </VueMultiselect>
+</template>
+
+<style src="vue-multiselect/dist/vue-multiselect.css"></style>
+
+<style scoped>
+
+</style>

src/components/ui/CustomInput.vue

@@ -7,6 +7,11 @@
             type: String,
             required: false,
         },
+        filled: {
+            type: Boolean,
+            required: false,
+            default: true,
+        },
         name: {
             type: String,
             required: true,
@@ -29,6 +34,7 @@
         <label class="custom-label" :for="name">{{ label }}</label>
         <input 
             class="custom-input"
+            :class="[!filled ? 'custom-input-light' : '']"
             :type="type" 
             :id="name"
             :name="name" 

src/components/ui/CustomRadioInput.vue

@@ -0,0 +1,101 @@
+<script setup>
+    defineProps({
+        typeselected: {
+            type: String
+        },
+        checked: {
+            type: Boolean
+        },
+        value: {
+            type: String
+        },
+        label: {
+            type: String,
+            required: false,
+        },
+        name: {
+            type: String,
+            required: true,
+        }
+    })
+
+    defineEmits(['update:typeselected'])
+</script>
+
+<template>
+    <label class="container">{{label}}
+    <input 
+        type="radio"
+        :checked="typeselected === value ? true : false"
+        :name="name" 
+        :value="value" 
+        @input="$event => $emit('update:typeselected', $event.target.value)"
+    >
+    <span class="checkmark"></span>
+    </label>
+</template>
+
+<style scoped>
+    .container {
+    display: block;
+    position: relative;
+    padding-left: 35px;
+    margin-bottom: 12px;
+    cursor: pointer;
+    font-size: 20px;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    }
+
+    /* Hide the browser's default radio button */
+    .container input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    }
+
+    /* Create a custom radio button */
+    .checkmark {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 25px;
+    width: 25px;
+    background-color: #eee;
+    border-radius: 50%;
+    }
+
+    /* On mouse-over, add a grey background color */
+    .container:hover input ~ .checkmark {
+    background-color: #ccc;
+    }
+
+    /* When the radio button is checked, add a blue background */
+    .container input:checked ~ .checkmark {
+    background-color: #2196F3;
+    }
+
+    /* Create the indicator (the dot/circle - hidden when not checked) */
+    .checkmark:after {
+    content: "";
+    position: absolute;
+    display: none;
+    }
+
+    /* Show the indicator (dot/circle) when checked */
+    .container input:checked ~ .checkmark:after {
+    display: block;
+    }
+
+    /* Style the indicator (dot/circle) */
+    .container .checkmark:after {
+        top: 9px;
+        left: 9px;
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: white;
+    }
+</style>

src/components/ui/Segments.vue

@@ -0,0 +1,61 @@
+<script setup>
+    import { ref } from 'vue';
+    import VueMultiselect from 'vue-multiselect'
+    import { searchcategories } from '../../services/public';
+
+    const options = ref([]);
+    const isLoading = ref(false);
+
+    // defineProps(['selectedCategory']);
+    defineProps({
+        selectedCategory: {
+            type: Array
+        },
+        multiple: {
+            type: Boolean,
+            default: false
+        }
+    });
+    defineEmits(['update:selectedCategory', 'clear-option'])
+
+    const searchCategory = async(query) => {
+        isLoading.value = true;
+        const resp = await searchcategories(query);
+        options.value = resp;
+        isLoading.value = false;
+        // truckTypes.value = resp;
+    }
+</script>
+
+<template>
+    <VueMultiselect
+        :value="selectedCategory"
+        @input="$event => $emit('update:selectedCategory', $event.target.value)"
+        :options="options"
+        :multiple="multiple"
+        :searchable="true"
+        :loading="isLoading"
+        :close-on-select="true"
+        @search-change="searchCategory"
+        @remove="$emit('clear-option')"
+        placeholder="Busca por segmento"
+        label="name"
+        track-by="name"
+        selectLabel="Presione para seleccionar"
+        selectedLabel="Selecionado"
+        deselectLabel="Presione para remover selecion"
+    >
+        <template #noResult>
+            Oops! No se encontro coincidencias.
+        </template>
+        <template #noOptions>
+            Lista vacia.
+        </template>
+    </VueMultiselect>
+</template>
+
+<style src="vue-multiselect/dist/vue-multiselect.css"></style>
+
+<style scoped>
+
+</style>

src/components/ui/States.vue

@@ -0,0 +1,63 @@
+<script setup>
+    import { ref } from 'vue';
+    import VueMultiselect from 'vue-multiselect'
+    import { searchstates } from '../../services/public';
+
+    const options = ref([]);
+    const isLoading = ref(false);
+    
+    // defineProps(['selectedState', 'multiple']);
+    defineProps({
+        selectedState: {
+            type: Array
+        },
+        multiple: {
+            type: Boolean,
+            default: false
+        }
+    });
+    defineEmits(['update:selectedState', 'clear-option'])
+
+    const searchState = async(query) => {
+        isLoading.value = true;
+        const resp = await searchstates(query);
+        options.value = resp;
+        isLoading.value = false;
+    }
+
+</script>
+
+<template>
+    <VueMultiselect
+        :value="selectedState"
+        @input="$event => $emit('update:selectedState', $event.target.value)"
+        id="states"
+        :options="options"
+        :multiple="multiple"
+        :searchable="true"
+        :loading="isLoading"
+        :close-on-select="true"
+        @search-change="searchState"
+        @remove="$emit('clear-option')"
+        placeholder="Busca por estado"
+        label="state_name"
+        track-by="state_name"
+        selectLabel="Presione para seleccionar"
+        selectedLabel="Selecionado"
+        deselectLabel="Presione para remover selecion"
+
+    >
+        <template #noResult>
+            Oops! No se encontro coincidencias.
+        </template>
+        <template #noOptions>
+            Escriba para obtener lista.
+        </template>
+    </VueMultiselect>
+</template>
+
+<style src="vue-multiselect/dist/vue-multiselect.css"></style>
+
+<style scoped>
+
+</style>

src/components/ui/TruckTypes.vue

@@ -0,0 +1,64 @@
+<script setup>
+    import { ref } from 'vue';
+    import VueMultiselect from 'vue-multiselect'
+    import { getSettingsQuery } from '../../services/public';
+
+    const options = ref([]);
+    const isLoading = ref(false);
+
+    // defineProps(['selectedTruckType']);
+    defineProps({
+        selectedTruckType: {
+            type: Array
+        },
+        multiple: {
+            type: Boolean,
+            default: false
+        }
+    });
+    defineEmits(['update:selectedTruckType', 'clear-option'])
+
+    const getTruckTypesQuery = async(query) => {
+        isLoading.value = true;
+        let filter = {
+            meta_key:'truck_type',
+            query: query
+        }
+        const resp = await getSettingsQuery(filter);
+        isLoading.value = false;
+        options.value = resp;
+    }
+</script>
+
+<template>
+    <VueMultiselect
+        :value="selectedTruckType"
+        @input="$event => $emit('update:selectedTruckType', $event.target.value)"
+        :options="options"
+        :multiple="multiple"
+        :loading="isLoading"
+        :searchable="true"
+        :close-on-select="true"
+        @search-change="getTruckTypesQuery"
+        @remove="$emit('clear-option')"
+        placeholder="Busca por tipo de transporte"
+        label="meta_value"
+        track-by="meta_value"
+        selectLabel="Presione para seleccionar"
+        selectedLabel="Selecionado"
+        deselectLabel="Presione para remover selecion"
+    >
+        <template #noResult>
+            Oops! No se encontro coincidencias.
+        </template>
+        <template #noOptions>
+            Lista vacia.
+        </template>
+    </VueMultiselect>
+</template>
+
+<style src="vue-multiselect/dist/vue-multiselect.css"></style>
+
+<style scoped>
+
+</style>