|
|
@@ -6,70 +6,92 @@
|
|
|
<v-col cols="12" md="7">
|
|
|
<v-card>
|
|
|
<v-tabs v-model="tab" class="tabs-title">
|
|
|
- <v-tab value="future">{{$t('futur_event')}}</v-tab>
|
|
|
- <v-tab value="past">{{$t('past_event')}}</v-tab>
|
|
|
+ <v-tab value="future">{{ $t('futur_event') }}</v-tab>
|
|
|
+ <v-tab value="past">{{ $t('past_event') }}</v-tab>
|
|
|
</v-tabs>
|
|
|
|
|
|
- <v-btn color="primary" to="events/new" class="ml-5 mt-5">{{$t('add_event')}}</v-btn>
|
|
|
+ <v-btn color="primary" to="events/new" class="ml-5 mt-5">{{
|
|
|
+ $t('add_event')
|
|
|
+ }}</v-btn>
|
|
|
|
|
|
<v-tabs-window v-model="tab">
|
|
|
<v-tabs-window-item value="future">
|
|
|
- <UiLoadingPanel v-if="statusUpcomingEvents == FETCHING_STATUS.PENDING" />
|
|
|
+ <UiLoadingPanel
|
|
|
+ v-if="statusUpcomingEvents == FETCHING_STATUS.PENDING"
|
|
|
+ />
|
|
|
|
|
|
<UiEventList
|
|
|
- v-if="statusUpcomingEvents == FETCHING_STATUS.SUCCESS && upcomingEvents?.items"
|
|
|
+ v-if="
|
|
|
+ statusUpcomingEvents == FETCHING_STATUS.SUCCESS &&
|
|
|
+ upcomingEvents?.items
|
|
|
+ "
|
|
|
:events="upcomingEvents.items"
|
|
|
:pagination="upcomingEvents.pagination"
|
|
|
@load="loadUpcomingEvents"
|
|
|
@edit="editEvent"
|
|
|
/>
|
|
|
<span v-if="upcomingEvents.items.length == 0" class="no_event">
|
|
|
- {{$t('no_future_event')}}
|
|
|
+ {{ $t('no_future_event') }}
|
|
|
</span>
|
|
|
</v-tabs-window-item>
|
|
|
<v-tabs-window-item value="past">
|
|
|
- <UiLoadingPanel v-if="statusPastEvents == FETCHING_STATUS.PENDING" />
|
|
|
+ <UiLoadingPanel
|
|
|
+ v-if="statusPastEvents == FETCHING_STATUS.PENDING"
|
|
|
+ />
|
|
|
|
|
|
<UiEventList
|
|
|
- v-if="statusPastEvents == FETCHING_STATUS.SUCCESS && pastEvents?.items"
|
|
|
+ v-if="
|
|
|
+ statusPastEvents == FETCHING_STATUS.SUCCESS &&
|
|
|
+ pastEvents?.items
|
|
|
+ "
|
|
|
:events="pastEvents.items"
|
|
|
:pagination="pastEvents.pagination"
|
|
|
@load="loadPastEvents"
|
|
|
@edit="editEvent"
|
|
|
/>
|
|
|
<span v-if="pastEvents.items.length == 0" class="no_event">
|
|
|
- {{$t('no_past_event')}}
|
|
|
+ {{ $t('no_past_event') }}
|
|
|
</span>
|
|
|
</v-tabs-window-item>
|
|
|
</v-tabs-window>
|
|
|
-
|
|
|
</v-card>
|
|
|
</v-col>
|
|
|
|
|
|
<!-- Bloc structure -->
|
|
|
<v-col cols="12" md="5">
|
|
|
- <v-card v-if="statusOrganization == FETCHING_STATUS.SUCCESS" class="pa-5">
|
|
|
- <v-card-title class="text-h6" >
|
|
|
- <v-icon icon="fa fa-hotel" class="text-button icon-hotel" />
|
|
|
- <span class="organization_title">{{$t('my_organization')}}</span>
|
|
|
+ <v-card
|
|
|
+ v-if="statusOrganization == FETCHING_STATUS.SUCCESS"
|
|
|
+ class="pa-5"
|
|
|
+ >
|
|
|
+ <v-card-title class="text-h6">
|
|
|
+ <v-icon icon="fa fa-hotel" class="text-button icon-hotel" />
|
|
|
+ <span class="organization_title">{{
|
|
|
+ $t('my_organization')
|
|
|
+ }}</span>
|
|
|
</v-card-title>
|
|
|
<v-card-text>
|
|
|
- <div><strong>{{$t('name')}} :</strong> {{ organization?.name }}</div>
|
|
|
- <div><strong>{{$t('email')}} :</strong> {{ organization?.email }}</div>
|
|
|
+ <div>
|
|
|
+ <strong>{{ $t('name') }} :</strong> {{ organization?.name }}
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <strong>{{ $t('email') }} :</strong> {{ organization?.email }}
|
|
|
+ </div>
|
|
|
</v-card-text>
|
|
|
</v-card>
|
|
|
|
|
|
<v-btn block class="mb-2 btn btn_edit_orga" to="organization">
|
|
|
- <i class="fa fa-pen mr-2" />{{$t('edit_organization')}}
|
|
|
+ <i class="fa fa-pen mr-2" />{{ $t('edit_organization') }}
|
|
|
</v-btn>
|
|
|
|
|
|
<v-btn block class="text-black btn btn_trial" @click="startTrial">
|
|
|
- <span><v-icon icon="fa fa-ticket" /> {{$t('try_premium_light')}}<br /> {{$t('30_days_free')}}</span>
|
|
|
+ <span
|
|
|
+ ><v-icon icon="fa fa-ticket" /> {{ $t('try_premium_light')
|
|
|
+ }}<br />
|
|
|
+ {{ $t('30_days_free') }}</span
|
|
|
+ >
|
|
|
</v-btn>
|
|
|
-
|
|
|
</v-col>
|
|
|
</v-row>
|
|
|
-
|
|
|
</v-container>
|
|
|
|
|
|
<LayoutDialogTrialAlreadyDid
|
|
|
@@ -80,23 +102,26 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-
|
|
|
-import Query from "~/services/data/Query";
|
|
|
-
|
|
|
-import {type Ref, ref} from 'vue'
|
|
|
-import {useEntityFetch} from "~/composables/data/useEntityFetch";
|
|
|
-import Organization from "~/models/Freemium/Organization";
|
|
|
-import Event from "~/models/Freemium/Event";
|
|
|
-import type {AsyncData} from "#app";
|
|
|
-import OrderBy from "~/services/data/Filters/OrderBy";
|
|
|
-import {FETCHING_STATUS, ORDER_BY_DIRECTION, TIME_STRATEGY} from "~/types/enum/data";
|
|
|
-import PageFilter from "~/services/data/Filters/PageFilter";
|
|
|
-import TimeFilter from "~/services/data/Filters/TimeFilter";
|
|
|
-import Country from "~/models/Core/Country";
|
|
|
-import DateUtils from "~/services/utils/dateUtils";
|
|
|
-import UrlUtils from "~/services/utils/urlUtils";
|
|
|
-import {useApiLegacyRequestService} from "~/composables/data/useApiLegacyRequestService";
|
|
|
-import {useAdminUrl} from "~/composables/utils/useAdminUrl";
|
|
|
+import Query from '~/services/data/Query'
|
|
|
+
|
|
|
+import { type Ref, ref } from 'vue'
|
|
|
+import { useEntityFetch } from '~/composables/data/useEntityFetch'
|
|
|
+import Organization from '~/models/Freemium/Organization'
|
|
|
+import Event from '~/models/Freemium/Event'
|
|
|
+import type { AsyncData } from '#app'
|
|
|
+import OrderBy from '~/services/data/Filters/OrderBy'
|
|
|
+import {
|
|
|
+ FETCHING_STATUS,
|
|
|
+ ORDER_BY_DIRECTION,
|
|
|
+ TIME_STRATEGY,
|
|
|
+} from '~/types/enum/data'
|
|
|
+import PageFilter from '~/services/data/Filters/PageFilter'
|
|
|
+import TimeFilter from '~/services/data/Filters/TimeFilter'
|
|
|
+import Country from '~/models/Core/Country'
|
|
|
+import DateUtils from '~/services/utils/dateUtils'
|
|
|
+import UrlUtils from '~/services/utils/urlUtils'
|
|
|
+import { useApiLegacyRequestService } from '~/composables/data/useApiLegacyRequestService'
|
|
|
+import { useAdminUrl } from '~/composables/utils/useAdminUrl'
|
|
|
|
|
|
definePageMeta({
|
|
|
name: 'freemium_dashboard_page',
|
|
|
@@ -106,16 +131,24 @@ definePageMeta({
|
|
|
const runtimeConfig = useRuntimeConfig()
|
|
|
const { fetch, fetchCollection } = useEntityFetch()
|
|
|
const { apiRequestService } = useApiLegacyRequestService()
|
|
|
-const {makeAdminUrl} = useAdminUrl()
|
|
|
+const { makeAdminUrl } = useAdminUrl()
|
|
|
const tab = ref(null)
|
|
|
const upcomingPage = ref(1)
|
|
|
const pastPage = ref(1)
|
|
|
const showDialogTrialAlReadyDid: Ref<boolean> = ref(false)
|
|
|
|
|
|
//Fetch
|
|
|
-const { data: organization, status:statusOrganization } = fetch(Organization)
|
|
|
-const { data: upcomingEvents, status: statusUpcomingEvents, refresh: refreshUpcomingEvents } = fetchEvents()
|
|
|
-const { data: pastEvents, status: statusPastEvents, refresh: refreshPastEvents } = fetchEvents(true)
|
|
|
+const { data: organization, status: statusOrganization } = fetch(Organization)
|
|
|
+const {
|
|
|
+ data: upcomingEvents,
|
|
|
+ status: statusUpcomingEvents,
|
|
|
+ refresh: refreshUpcomingEvents,
|
|
|
+} = fetchEvents()
|
|
|
+const {
|
|
|
+ data: pastEvents,
|
|
|
+ status: statusPastEvents,
|
|
|
+ refresh: refreshPastEvents,
|
|
|
+} = fetchEvents(true)
|
|
|
|
|
|
/**
|
|
|
* Charge une page des événements à venir
|
|
|
@@ -147,14 +180,20 @@ function editEvent(eventId: number) {
|
|
|
* Récupère la liste des événements
|
|
|
* @param past
|
|
|
*/
|
|
|
-function fetchEvents(past:boolean = false){
|
|
|
+function fetchEvents(past: boolean = false) {
|
|
|
const today = computed(() => DateUtils.formatIsoShortDate(new Date()))
|
|
|
- const query =
|
|
|
- new Query(
|
|
|
- new OrderBy('datetimeStart', past ? ORDER_BY_DIRECTION.DESC : ORDER_BY_DIRECTION.ASC),
|
|
|
- new PageFilter(past ? pastPage : upcomingPage, ref(5)),
|
|
|
- new TimeFilter('datetimeStart', today, past ? TIME_STRATEGY.BEFORE : TIME_STRATEGY.AFTER)
|
|
|
- )
|
|
|
+ const query = new Query(
|
|
|
+ new OrderBy(
|
|
|
+ 'datetimeStart',
|
|
|
+ past ? ORDER_BY_DIRECTION.DESC : ORDER_BY_DIRECTION.ASC,
|
|
|
+ ),
|
|
|
+ new PageFilter(past ? pastPage : upcomingPage, ref(5)),
|
|
|
+ new TimeFilter(
|
|
|
+ 'datetimeStart',
|
|
|
+ today,
|
|
|
+ past ? TIME_STRATEGY.BEFORE : TIME_STRATEGY.AFTER,
|
|
|
+ ),
|
|
|
+ )
|
|
|
|
|
|
return fetchCollection(Event, null, query)
|
|
|
}
|
|
|
@@ -181,37 +220,34 @@ onUnmounted(() => {
|
|
|
useRepo(Event).flush()
|
|
|
useRepo(Country).flush()
|
|
|
})
|
|
|
-
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
-
|
|
|
-.tabs-title{
|
|
|
+.tabs-title {
|
|
|
margin-top: 20px;
|
|
|
padding-left: 20px;
|
|
|
background-color: rgb(var(--v-theme-neutral));
|
|
|
- .v-tab--selected{
|
|
|
+ .v-tab--selected {
|
|
|
color: rgb(var(--v-theme-on-neutral--clickable));
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-
|
|
|
.v-card {
|
|
|
margin-bottom: 16px;
|
|
|
color: rgb(var(--v-theme-on-neutral));
|
|
|
}
|
|
|
|
|
|
-.v-card-text{
|
|
|
- div{
|
|
|
+.v-card-text {
|
|
|
+ div {
|
|
|
line-height: 2;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.organization_title{
|
|
|
+.organization_title {
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
|
|
|
-.icon-hotel{
|
|
|
+.icon-hotel {
|
|
|
margin: 0 5px 4px 0;
|
|
|
}
|
|
|
|
|
|
@@ -245,7 +281,7 @@ onUnmounted(() => {
|
|
|
color: rgb(var(--v-theme-on-neutral)) !important;
|
|
|
}
|
|
|
|
|
|
-.no_event{
|
|
|
+.no_event {
|
|
|
padding: 25px;
|
|
|
font-size: 16px;
|
|
|
}
|
Olivier Massot