Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[BO - Liste signalement] [Front] Structure en VueJS #2509

Merged
merged 3 commits into from
Apr 26, 2024
Merged

[BO - Liste signalement] [Front] Structure en VueJS #2509

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2caa426
init structure vuejs #2123
sfinx13 Apr 23, 2024
2ea4bf7
fix typo pagniation and space
sfinx13 Apr 25, 2024
f6ade75
fix spacing #2123
sfinx13 Apr 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions assets/app.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import './vue/index';
import './vue/front-stats';
import './vue/dashboard';
import './vue/signalement-form';
import './vue/signalement-list';

import './controllers/component_search_address';
import './controllers/form_account';
Expand Down
36 changes: 36 additions & 0 deletions assets/vue/components/signalement-list/TheHistoAppSignalementList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<template>
<TheHistoSignalementListFilter/>
<section class="fr-col-12 fr-background-alt--blue-france fr-mt-0">
<div class="fr-px-3w">
<TheHistoSignalementListHeader/>
<div class="fr-grid-row fr-my-2w" v-for="count in 25" :key="count">
<TheHistoSignalementListCard/>
</div>
<TheHistoSignalementListPagination/>
</div>
</section>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { store } from './store'
import { requests } from './requests'
import TheHistoSignalementListFilter from '../signalement-list/TheHistoSignalementListFilter.vue'
import TheHistoSignalementListHeader from '../signalement-list/TheHistoSignalementListHeader.vue'
import TheHistoSignalementListCard from '../signalement-list/TheHistoSignalementListCard.vue'
import TheHistoSignalementListPagination from '../signalement-list/TheHistoSignalementListPagination.vue'

export default defineComponent({
name: 'TheHistoAppSignalementList',
components: {
TheHistoSignalementListFilter,
TheHistoSignalementListHeader,
TheHistoSignalementListCard,
TheHistoSignalementListPagination
}
})
</script>

<style scoped>

</style>
65 changes: 65 additions & 0 deletions assets/vue/components/signalement-list/TheHistoSignalementListCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
<template>
<div class="fr-col-12">
<div class="fr-card">
<div class="fr-card__body">
<div class="fr-card__content fr-mb-1v">
<div class="fr-grid-row">
<div class="fr-col-xl-8 fr-col-lg-6 fr-col-12">
<h3 class="fr-card__title fr-my-1v">#2023-674 - DUPONT Philippe</h3>
<p class="fr-my-1v fr-text--bold fr-text--lg">17 boulevard saade - quai joliette, 13005 Marseille</p>
</div>
<div class="fr-col-xl-4 fr-col-lg-6 fr-col-12">
<p class="fr-my-1v fr-text--right">Dossier déposé le : 29/03/2023</p>
<p class="fr-my-1v fr-text--right">Déclarant : Occupant</p>
</div>
</div>
<div class="fr-grid-row fr-mt-1w">
<div class="fr-col-xl-8 fr-col-12">
<p class="fr-my-1w"><span class="fr-icon-lightbulb-line" aria-hidden="true"></span>
Procédure(s) suspectée(s):
<span class="fr-badge fr-badge--sm fr-badge--warning fr-badge--no-icon fr-mx-1w">Manquement à la salubrité</span>
<span class="fr-badge fr-badge--sm fr-badge--info fr-badge--no-icon fr-mx-1w">RSD / NON DÉCENCE</span>
</p>
<p class="fr-my-1w"><span class="fr-icon-briefcase-line" aria-hidden="true"></span>
Partenaire(s) affecté(s) : EHMA - Métropole, ADIL, SOLIHA-DALO, SCHS de
la commune</p>
<p class="fr-my-1w"><span class="fr-icon-discuss-line" aria-hidden="true"></span>
Dernier suivi par EMHA - Métropole le 30/03/2023
<span class="fr-badge fr-badge--sm fr-badge--no-icon">Suivi interne</span>
</p>
</div>
<div class="fr-col-xl-4 fr-col-12 fr-text--right">
<p class="fr-badge fr-badge--error fr-badge--no-icon">A VALIDER</p>
</div>
</div>
</div>
<div class="fr-card__footer">
<div class="fr-grid-row">
<div class="fr-col-12 fr-text--right">
<div class="fr-display-inline-flex">
<button class="fr-btn fr-btn--icon-left fr-icon-delete-line fr-btn--secondary fr-mx-1w">
Supprimer le signalement
</button>
<button class="fr-btn fr-btn--icon-right fr-icon-arrow-right-line fr-mx-1w">
Accéder au dossier
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
name: 'TheHistoSignalementListCard'
})
</script>

<style scoped>

</style>
175 changes: 175 additions & 0 deletions assets/vue/components/signalement-list/TheHistoSignalementListFilter.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,175 @@
<template>
<section class="fr-background--white">
<div class="fr-grid-row fr-p-3w fr-pb-6w">
<div class="fr-col-12">
<h1 class="fr-mb-2w fr-h2">Liste des signalements</h1>
<div class="fr-container--fluid">
<div class="fr-grid-row fr-grid-row--gutters">
<div class="fr-col-12 fr-col-lg-6 fr-col-xl-3">
<select class="fr-select" aria-describedby="country-select-1-messages" id="country-select-1"
sfinx13 marked this conversation as resolved.
Show resolved Hide resolved
autocomplete="country" name="country">
<option value="" selected disabled hidden>Territoire</option>
<option value="01">01 - Ain</option>
<option value="02">02 - Aisne</option>
<option value="03">03 - Alpes de Haute Provence</option>
<option value="04">04 - Alpes Maritime</option>
</select>
</div>
<div class="fr-col-12 fr-col-lg-6 fr-col-xl-3">
<input class="fr-input" placeholder="Taper un nom, référence ou email" type="search"
id="search-784-input" name="search-784-input">
</div>
<div class="fr-col-12 fr-col-lg-6 fr-col-xl-3">
<input class="fr-input" placeholder="Commune ou code postal" spellcheck="false" name=""
id="" type="text">
</div>
<div class="fr-col-12 fr-col-lg-6 fr-col-xl-3">
<select class="fr-select" aria-describedby="country-select-1-messages" id="country-select-1"
autocomplete="country" name="country">
<option value="" selected disabled hidden>Statut</option>
<option value="FR">Nouveau</option>
<option value="DE">En cours</option>
<option value="IT">Fermé</option>
<option value="ES">Refusé</option>
</select>
</div>
</div>
<div class="fr-grid-row fr-grid-row--gutters">
<div class="fr-col-12 fr-col-lg-6 fr-col-xl-2">
<button class="fr-btn fr-btn--secondary">
Masquer les options
</button>
</div>
<div class="fr-col-12 fr-col-lg-6 fr-col-xl-8">
<span class="fr-badge fr-badge--info fr-badge--no-icon fr-badge--sm fr-mx-1v" v-for="count in 8" :key="count">Label badge</span>
</div>
<div class="fr-col-12 fr-col-lg-6 fr-col-xl-2">
<a href="/bo/partenaires/"
class="fr-link fr-link--icon-left fr-icon-close-circle-line fr-text--sm">Réinitialiser
les résultats</a>
</div>
</div>
<div class="fr-grid-row fr-grid-row--gutters">
<div class="fr-col-12 fr-col-lg-6 fr-col-xl-3">
<select class="fr-select" aria-describedby="country-select-1-messages" id="country-select-1"
autocomplete="country" name="country">
<option value="" selected disabled hidden>Etiquettes</option>
<option value="FR">Etiquette A</option>
</select>
</div>
<div class="fr-col-12 fr-col-lg-6 fr-col-xl-3">
<input class="fr-input" spellcheck="false" autocomplete="family-name" name="" id=""
type="date" placeholder="Date de dépôt">
</div>
<div class="fr-col-12 fr-col-lg-6 fr-col-xl-3">
<select class="fr-select" aria-describedby="country-select-1-messages" id="country-select-1"
autocomplete="country" name="country">
<option value="" selected disabled hidden>Procédure suspectée</option>
<option value="FR">Nouveau</option>
<option value="DE">En cours</option>
<option value="IT">Fermé</option>
<option value="ES">Refusé</option>
</select>
</div>
<div class="fr-col-12 fr-col-lg-6 fr-col-xl-3">
<select class="fr-select" aria-describedby="country-select-1-messages" id="country-select-1"
autocomplete="country" name="country">
<option value="" selected disabled hidden>Statut de la visite</option>
<option value="FR">Non planifiée</option>
<option value="DE">Planifiée</option>
<option value="IT">Conclusion à renseigner</option>
<option value="ES">Terminée</option>
</select>
</div>
<div class="fr-col-12 fr-col-lg-6 fr-col-xl-3">
<select class="fr-select" aria-describedby="country-select-1-messages" id="country-select-1"
autocomplete="country" name="country">
<option value="" selected disabled hidden>Type de dernier suivi</option>
<option value="FR">Non planifiée</option>
<option value="DE">Planifiée</option>
<option value="IT">Conclusion à renseigner</option>
<option value="ES">Terminée</option>
</select>
</div>
<div class="fr-col-12 fr-col-lg-6 fr-col-xl-3">
<input class="fr-input" spellcheck="false" autocomplete="family-name" name="" id=""
type="date" placeholder="Date de dernier suivi">
</div>
<div class="fr-col-12 fr-col-lg-4 fr-col-xl-2">
<select class="fr-select" aria-describedby="country-select-1-messages" id="country-select-1"
autocomplete="country" name="country">
<option value="" selected disabled hidden>Déclarant</option>
<option value="FR">Non planifiée</option>
<option value="DE">Planifiée</option>
<option value="IT">Conclusion à renseigner</option>
<option value="ES">Terminée</option>
</select>
</div>
<div class="fr-col-12 fr-col-lg-4 fr-col-xl-2">
<select class="fr-select" aria-describedby="country-select-1-messages" id="country-select-1"
autocomplete="country" name="country">
<option value="" selected disabled hidden>Natude du parc</option>
<option value="FR">Non planifiée</option>
<option value="DE">Planifiée</option>
<option value="IT">Conclusion à renseigner</option>
<option value="ES">Terminée</option>
</select>
</div>
<div class="fr-col-12 fr-col-lg-4 fr-col-xl-2">
<select class="fr-select" aria-describedby="country-select-1-messages" id="country-select-1"
autocomplete="country" name="country">
<option value="" selected disabled hidden>Allocataire</option>
<option value="FR">Non planifiée</option>
<option value="DE">Planifiée</option>
<option value="IT">Conclusion à renseigner</option>
<option value="ES">Terminée</option>
</select>
</div>
<div class="fr-col-12 fr-col-lg-4 fr-col-xl-2">
<select class="fr-select" aria-describedby="country-select-1-messages" id="country-select-1"
autocomplete="country" name="country">
<option value="" selected disabled hidden>Enfant de - 6 ans</option>
<option value="FR">Non planifiée</option>
<option value="DE">Planifiée</option>
<option value="IT">Conclusion à renseigner</option>
<option value="ES">Terminée</option>
</select>
</div>
<div class="fr-col-12 fr-col-lg-4 fr-col-xl-2">
<select class="fr-select" aria-describedby="country-select-1-messages" id="country-select-1"
autocomplete="country" name="country">
<option value="" selected disabled hidden>Situation</option>
<option value="FR">Non planifiée</option>
<option value="DE">Planifiée</option>
<option value="IT">Conclusion à renseigner</option>
<option value="ES">Terminée</option>
</select>
</div>
<div class="fr-col-12 fr-col-lg-4 fr-col-xl-3">
<select class="fr-select" aria-describedby="country-select-1-messages" id="country-select-1"
autocomplete="country" name="country">
<option value="" selected disabled hidden>Partenaire affectés</option>
<option value="FR">Non planifiée</option>
<option value="DE">Planifiée</option>
<option value="IT">Conclusion à renseigner</option>
<option value="ES">Terminée</option>
</select>
</div>
</div>
</div>
</div>
</div>
</section>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
name: 'TheHistoSignalementListFilter'
})
</script>

<style scoped>

</style>
36 changes: 36 additions & 0 deletions assets/vue/components/signalement-list/TheHistoSignalementListHeader.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<template>
<div class="fr-grid-row fr-mb-1w">
<div class="fr-col fr-col-md-9"><h2>956 signalements trouvés</h2>
</div>
</div>
<div class="fr-grid-row fr-mb-1w">
<div class="fr-col-12 fr-col-lg-6 fr-col-xl-3">
<select class="fr-select" id="">
<option value="" selected disabled hidden>Ordre décroissant</option>
<option value="">Ordre décroissant</option>
<option value="">Ordre croissant : par référence</option>
<option value="">Ordre alphabétique (A -> Z)</option>
<option value="">Ordre alphabétique inversé (Z -> A)</option>
<option value="">Le plus récent</option>
<option value="">Le plus ancien</option>
</select>
</div>
<div class="fr-col-12 fr-col-lg-6 fr-col-xl-9 fr-text--right">
<button class="fr-btn fr-btn--secondary fr-btn--icon-left fr-icon-download-fill">
Exporter les résultats
</button>
</div>
</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
name: 'TheHistoSignalementListHeader'
})
</script>

<style scoped>

</style>
35 changes: 35 additions & 0 deletions assets/vue/components/signalement-list/TheHistoSignalementListPagination.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
name: 'TheHistoSignalementListPagination'
})
</script>

<template>
<div class="fr-grid-row fr-mb-1w fr-grid-row--center">
<nav role="navigation" class="fr-pagination" aria-label="Pagination">
<ul class="fr-pagination__list">
<li><a class="fr-pagination__link fr-pagination__link--first" aria-disabled="true" role="link">
Première page </a></li>
<li><a class="fr-pagination__link fr-pagination__link--prev fr-pagination__link--lg-label"
aria-disabled="true" role="link"> Page précédente </a></li>
<li><a class="fr-pagination__link" aria-current="page" title="Page 1"> 1 </a></li>
<li><a class="fr-pagination__link" href="#" title="Page 2"> 2 </a></li>
<li><a class="fr-pagination__link fr-displayed-lg" href="#" title="Page 3"> 3 </a></li>
<li><a class="fr-pagination__link fr-displayed-lg"> … </a></li>
<li><a class="fr-pagination__link fr-displayed-lg" href="#" title="Page 130"> 130 </a></li>
<li><a class="fr-pagination__link fr-displayed-lg" href="#" title="Page 131"> 131 </a></li>
<li><a class="fr-pagination__link" href="#" title="Page 132"> 132 </a></li>
<li><a class="fr-pagination__link fr-pagination__link--next fr-pagination__link--lg-label"
href="#">
Page suivante </a></li>
<li><a class="fr-pagination__link fr-pagination__link--last" href="#"> Dernière page </a></li>
</ul>
</nav>
</div>
</template>

<style scoped>

</style>
3 changes: 3 additions & 0 deletions assets/vue/components/signalement-list/requests.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export const requests = {

}
3 changes: 3 additions & 0 deletions assets/vue/components/signalement-list/store.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export const store = {

}
8 changes: 8 additions & 0 deletions assets/vue/signalement-list.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { createApp } from 'vue'
import TheHistoAppSignalementList from './components/signalement-list/TheHistoAppSignalementList.vue'

const app = createApp(TheHistoAppSignalementList)
const signalementListComponent = document.getElementById('app-signalement-list')
if (signalementListComponent !== null) {
app.mount('#app-signalement-list')
}
Loading
Loading