add: Form create load

src/views/LoadsPublishedView.vue

@@ -0,0 +1,142 @@
+<script setup>
+    import { onMounted, ref, watch } from 'vue';
+    import { useCompanyStore } from '../stores/company';
+    import Spiner from '../components/ui/Spiner.vue';
+    import CardLoad from '../components/CardLoad.vue';
+    import AttachmentsModal from '../components/AttachmentsModal.vue';
+    import { useLoadsStore } from '../stores/loads';
+    import FormLoadModal from '../components/FormLoadModal.vue';
+
+    const companyStore = useCompanyStore();
+    const loadStore = useLoadsStore();
+    const loading = ref(false);
+    const query = ref('');
+    const filterQuery = ref([]);
+
+    onMounted(() =>{
+        getDataLoadsInit();
+    })
+
+    watch(query, () => {
+        if(query.value.length === 0){
+            filterQuery.value.search = "";
+            getLoadWithFilters(filterQuery.value);
+        }
+    });
+
+    const getDataLoadsInit = async() => {
+        filterQuery.value.status = "status[$ne]="+"Closed";
+        loading.value = true;
+        await companyStore.getCompanyLoads(filterQuery.value);
+        loading.value = false;
+    }
+    
+    const getLoadWithFilters = async(filter) => {
+        loading.value = true;
+        await companyStore.getCompanyLoads(filter);
+        loading.value = false;
+    }
+
+    const search = () => {
+        if(query.value.length >= 2){
+            // filterQuery.value = "company_name[$regex]=" + query.value + "&company_name[$options]=i";
+            filterQuery.value.search = "posted_by_name[$regex]="+query.value+"&posted_by_name[$options]=i";
+            getLoadWithFilters(filterQuery.value);
+        } 
+    
+    }
+
+    const clearFilter = () => {
+        filterQuery.value.search = ""
+        filterQuery.value.status = "status[$ne]="+"Closed";
+
+        if(query.value == ''){
+            getDataLoadsInit();
+        } else {
+            query.value = '';
+        }
+    }
+
+    const loadHistory = () => {
+        filterQuery.value.status = ""
+        filterQuery.value.status = "status="+ "Closed";
+        getLoadWithFilters(filterQuery.value);
+    }
+</script>
+
+<template>
+    <AttachmentsModal v-if="loadStore.currentLoad"/>
+    <FormLoadModal/>
+    <div>
+        <h2 class="title mb-5">Mis cargas publicadas</h2>
+        <div>
+            <div class="box-filters">
+                <div class="box-search">
+                    <input class="form-control custom-search" type="search" name="" placeholder="Nombre de la persona que publica" id="" @:input="search()" v-model="query" aria-label="Search">
+                </div>
+                <button 
+                    class="btn btn-danger bg-dark" type="button" @click="clearFilter">
+                    <i class="fa-solid fa-arrow-rotate-right"></i>
+                    <span class="clear-sm"> Reset</span><span class="clear-md"> filtros</span>
+                </button>
+                <button
+                    @click="loadHistory"
+                    class="btn-primary-sm radius-sm"
+                ><i class="fa-solid fa-clock-rotate-left"></i><span class="clear-sm"> Historial</span><span class="clear-md"> de cargas</span></button>
+                <button
+                    class="btn-primary-sm radius-sm"
+                    data-toggle="modal" data-target="#formLoadModal"
+                ><i class="fa-solid fa-plus"></i> <span class="clear-sm"> Crear</span><span class="clear-md"> carga</span></button>
+            </div>
+            <Spiner v-if="loading"/>
+            <CardLoad 
+                v-else
+                v-for="load in companyStore.loads"
+                :key="load._id"
+                :load="load" 
+            />
+        </div>
+    </div>
+</template>
+
+<style scoped>
+    .box-filters {
+        display: flex;
+        flex-direction: row;
+        justify-content: end;
+        gap: 1rem;
+    }
+
+    .box-search {
+        width: 40%;
+    }
+
+    .radius-sm{
+        border-radius: 5px;
+    }
+
+    .custom-search {
+        width: 100%;
+        padding: 12px 20px;
+    }
+
+    @media (max-width: 1024px) {
+        .box-search {
+            width: 50%;
+        }
+        .box-filters {
+            gap: .4rem;
+        }
+    }
+
+    @media (max-width: 768px) {
+
+        .box-search {
+            width: 100%;
+        }
+        .box-filters {
+            gap: .3rem;
+        }
+    }
+
+</style>

src/views/LoadsView.vue

@@ -1,13 +0,0 @@
-<script setup>
-
-</script>
-
-<template>
-    <div>
-        <h2 class="title">Cargas</h2>
-    </div>
-</template>
-
-<style scoped>
-
-</style>

src/views/LoginView.vue

@@ -8,7 +8,6 @@
     import { RouterLink, useRouter } from 'vue-router';
     import { useAuthStore } from '../stores/auth';
 
-
     const form = reactive({
         email: 'alexandrous.dev@gmail.com',
         password: 'Password0',
@@ -41,6 +40,8 @@
                 console.log(resp.data.user);
                 if(resp.data.user.first_name && resp.data.user.last_name) {
                     localStorage.setItem('session', resp.data.session_token);
+                    localStorage.setItem('access', resp.data.accessToken);
+                    localStorage.setItem('id', resp.data.user.company);
                     router.push({name: 'home'});
                     auth.$patch({
                         sesion: resp.data.session_token,

src/views/PublishedView.vue

@@ -1,13 +0,0 @@
-<script setup>
-
-</script>
-
-<template>
-    <div>
-        <h2 class="title">Mis publicaciones</h2>
-    </div>
-</template>
-
-<style scoped>
-
-</style>

src/views/TrucksPublishedView.vue

@@ -0,0 +1,36 @@
+<script setup>
+    import { onMounted, ref } from 'vue';
+    import { useCompanyStore } from '../stores/company';
+    import Spiner from '../components/ui/Spiner.vue';
+    import CardProposal from '../components/CardProposal.vue';
+
+    const companyStore = useCompanyStore();
+    const loading = ref(false);
+
+    onMounted(() =>{
+        getInitData();
+    })
+
+    const getInitData = async() => {
+        loading.value = true;
+        await companyStore.getProposalsCompany();
+        loading.value = false;
+    }
+</script>
+
+<template>
+    <div>
+        <h2 class="title mb-5">Mis vehiculos publicadas</h2>
+        <Spiner v-if="loading"/>
+        <CardProposal 
+            v-else
+            v-for="proposal in companyStore.proposals"
+            :key="proposal._id"
+            :proposal="proposal" 
+        />
+    </div>
+</template>
+
+<style scoped>
+
+</style>