Skip to content

Commit

Permalink
fix ts
Browse files Browse the repository at this point in the history
  • Loading branch information
@plduthoit
plduthoit committed Dec 11, 2024
1 parent 0424dff commit 22af8ee
Showing 1 changed file with 104 additions and 112 deletions.
216 changes: 104 additions & 112 deletions vue/src/views/resources/ResourceListView.vue
View file
Original file line number Diff line number Diff line change
@@ -1,51 +1,43 @@
<template>
<div class="ListView ListView--resource">
<ListHeader
:title="$t('resources.title')"
:description="$t('resources.desc')"
:search-placeholder="$t('resources.search')"
v-model="searchQuery"
/>
<ListHeader :title="$t('resources.title')" :description="$t('resources.desc')"
:search-placeholder="$t('resources.search')" v-model="searchQuery" />
<div class="ListView__filters">
<ListFilterBox>
<ListFilterSelect
v-model="selectedThematic"
:items="thematicsItems"
:label="$t('resources.thematic')"
/>
<div class="ListView__filters">
<ListFilterBox>
<ListFilterSelect v-model="selectedThematic" :items="thematicsItems" :label="$t('resources.thematic')"/>
<ListFilterSelect v-model="selectedResourceFormats" :items="Object.values(ResourceFormat)" :item-title="(item: ResourceFormat) => $t('resources.resourceFormat.' + item)" :item-value="(item: ResourceFormat) => item" :label="$t('resources.format')"/>
<ListFilterSelect v-model="selectedResourceTypes" :items="Object.values(ResourceType)" :item-title="(item: ResourceType) => $t('resources.resourceType.' + item)" :item-value="(item: ResourceType) => item" :label="$t('resources.type')"/>
</ListFilterBox>
<div class="ListView__actions">
<ListFilterResetButton
:items-count="resourceStore.resources.length"
:items-label-key="'resources.resources'"
:filtered-items-count="filteredResources.length"
:reset-function="resetFilters"
/>
<div>
<v-btn
variant="text"
class="fit-content font-weight-medium flex-basis-auto text-body-3"
:prepend-icon="arePassedEventsShown ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
@click="arePassedEventsShown = !arePassedEventsShown">{{ arePassedEventsShown ? $t('resources.hidePassedEvents') : $t('resources.showPassedEvents') }}</v-btn>
<ListSortBy>
<v-list-item @click="sortingResourcesSelectedMethod = SortMethod.NAME">{{ $t('resources.name') }}</v-list-item>
<v-list-item @click="sortingResourcesSelectedMethod = SortMethod.DATE">{{ $t('resources.date') }}</v-list-item>
<v-list-item @click="sortingResourcesSelectedMethod = SortMethod.UPDATED_AT">{{ $t('resources.updatedAt') }}</v-list-item>
</ListSortBy>
<v-btn class="fixed-btn" color="main-red" prepend-icon="mdi-plus" @click="resourceStore.isResourceFormShown = true" v-if="userStore.userIsAdmin() || userStore.userHasRole(UserRoles.EDITOR_RESSOURCES)">{{ $t('resources.add') }}</v-btn>
</div>
</div>
<ListFilterSelect v-model="selectedThematic" :items="thematicsItems" :label="$t('resources.thematic')" />
<ListFilterSelect v-model="selectedResourceFormats" :items="Object.values(ResourceFormat)"
:item-title="(item: ResourceFormat) => $t('resources.resourceFormat.' + item)"
:item-value="(item: ResourceFormat) => item" :label="$t('resources.format')" />
<ListFilterSelect v-model="selectedResourceTypes" :items="Object.values(ResourceType)"
:item-title="(item: ResourceType) => $t('resources.resourceType.' + item)"
:item-value="(item: ResourceType) => item" :label="$t('resources.type')" />
</ListFilterBox>
<div class="ListView__actions">
<ListFilterResetButton :items-count="resourceStore.resources.length" :items-label-key="'resources.resources'"
:filtered-items-count="filteredResources.length" :reset-function="resetFilters" />
<div>
<v-btn variant="text" class="fit-content font-weight-medium flex-basis-auto text-body-3"
:prepend-icon="arePassedEventsShown ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
@click="arePassedEventsShown = !arePassedEventsShown">{{ arePassedEventsShown ?
$t('resources.hidePassedEvents') : $t('resources.showPassedEvents') }}</v-btn>
<ListSortBy>
<v-list-item @click="sortingResourcesSelectedMethod = SortMethod.NAME">{{ $t('resources.name')
}}</v-list-item>
<v-list-item @click="sortingResourcesSelectedMethod = SortMethod.DATE">{{ $t('resources.date')
}}</v-list-item>
<v-list-item @click="sortingResourcesSelectedMethod = SortMethod.UPDATED_AT">{{ $t('resources.updatedAt')
}}</v-list-item>
</ListSortBy>
<v-btn class="fixed-btn" color="main-red" prepend-icon="mdi-plus"
@click="resourceStore.isResourceFormShown = true"
v-if="userStore.userIsAdmin() || userStore.userHasRole(UserRoles.EDITOR_RESSOURCES)">{{ $t('resources.add')
}}</v-btn>
</div>
</div>
</div>
<ListItems :items="sortedResources">
<template #card="{ item }">
<ResourceCard :resource="item as Resource" :key="item.id" />
<ResourceCard :resource="(item as Resource)" :key="item.id" />
</template>
</ListItems>
</div>
Expand Down Expand Up @@ -83,10 +75,10 @@ const selectedResourceFormats: Ref<ResourceFormat[]> = ref([]);
const selectedResourceTypes: Ref<ResourceType[]> = ref([]);
onMounted(async () => {
await resourceStore.getAll()
await thematicsStore.getAll()
await resourceStore.getAll()
await thematicsStore.getAll()
initRouteFilters()
initRouteFilters()
})
const filteredResources = computed(() => {
Expand All @@ -96,96 +88,96 @@ const filteredResources = computed(() => {
filteredResources = searchResources(filteredResources)
}
if (!arePassedEventsShown.value) {
const todayDate = new Date(new Date().setHours(0, 0, 0, 0)).getTime()
filteredResources = filteredResources.filter((resource: Resource) => {
if (resource.type === ResourceType.EVENTS) {
return new Date(resource.startAt).getTime() >= todayDate
} else {
return true
}
})
}
if (!arePassedEventsShown.value) {
const todayDate = new Date(new Date().setHours(0, 0, 0, 0)).getTime()
filteredResources = filteredResources.filter((resource: Resource) => {
if (resource.type === ResourceType.EVENTS) {
return new Date(resource.startAt).getTime() >= todayDate
} else {
return true
}
})
}
if (selectedThematic.value && selectedThematic.value.length > 0) {
filteredResources = filteredResources.filter((resource: Resource) => {
return resource.thematics.some((thematic) =>
(selectedThematic.value as string[]).includes(thematic['@id'])
)
})
}
if (selectedThematic.value && selectedThematic.value.length > 0) {
filteredResources = filteredResources.filter((resource: Resource) => {
return resource.thematics.some((thematic) =>
(selectedThematic.value as string[]).includes(thematic['@id'])
)
})
}
if (selectedResourceFormats.value && selectedResourceFormats.value.length > 0) {
filteredResources = filteredResources.filter((resource: Resource) => {
return selectedResourceFormats.value.includes(resource.format)
})
}
if (selectedResourceFormats.value && selectedResourceFormats.value.length > 0) {
filteredResources = filteredResources.filter((resource: Resource) => {
return selectedResourceFormats.value.includes(resource.format)
})
}
if (selectedResourceTypes.value && selectedResourceTypes.value.length > 0) {
filteredResources = filteredResources.filter((resource: Resource) => {
return selectedResourceTypes.value.includes(resource.type)
})
}
return filteredResources
if (selectedResourceTypes.value && selectedResourceTypes.value.length > 0) {
filteredResources = filteredResources.filter((resource: Resource) => {
return selectedResourceTypes.value.includes(resource.type)
})
}
return filteredResources
})
enum SortMethod {
NAME = "name",
DATE = "date",
UPDATED_AT = "updatedAt"
NAME = "name",
DATE = "date",
UPDATED_AT = "updatedAt"
}
const sortingResourcesSelectedMethod: Ref<SortMethod> = ref(SortMethod.NAME)
const sortedResources = computed(() => {
switch(sortingResourcesSelectedMethod.value) {
case SortMethod.DATE:
const eventResources = filteredResources.value.filter((resource: Resource) => {
return resource.type === ResourceType.EVENTS
})
const otherResources = filteredResources.value.filter((resource: Resource) => {
return resource.type !== ResourceType.EVENTS
})
return [
...(eventResources.slice().sort((a: Resource, b: Resource) => {
return new Date(a.startAt).getTime() - new Date(b.startAt).getTime();
})),
...otherResources
]
case SortMethod.NAME:
return filteredResources.value.slice().sort((a: Resource, b: Resource) => {
return a.name.localeCompare(b.name);
})
case SortMethod.UPDATED_AT:
default:
return filteredResources.value.slice().sort((a: Resource, b: Resource) => {
return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime();
})
}
switch (sortingResourcesSelectedMethod.value) {
case SortMethod.DATE:
const eventResources = filteredResources.value.filter((resource: Resource) => {
return resource.type === ResourceType.EVENTS
})
const otherResources = filteredResources.value.filter((resource: Resource) => {
return resource.type !== ResourceType.EVENTS
})
return [
...(eventResources.slice().sort((a: Resource, b: Resource) => {
return new Date(a.startAt).getTime() - new Date(b.startAt).getTime();
})),
...otherResources
]
case SortMethod.NAME:
return filteredResources.value.slice().sort((a: Resource, b: Resource) => {
return a.name.localeCompare(b.name);
})
case SortMethod.UPDATED_AT:
default:
return filteredResources.value.slice().sort((a: Resource, b: Resource) => {
return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime();
})
}
})
const initRouteFilters = () => {
if (Object.values(ResourceType).includes((route.query.type as ResourceType))) {
selectedResourceTypes.value = [(route.query.type as ResourceType)]
if (route.query.type === ResourceType.EVENTS) {
arePassedEventsShown.value = false
sortingResourcesSelectedMethod.value = SortMethod.DATE
}
if (Object.values(ResourceType).includes((route.query.type as ResourceType))) {
selectedResourceTypes.value = [(route.query.type as ResourceType)]
if (route.query.type === ResourceType.EVENTS) {
arePassedEventsShown.value = false
sortingResourcesSelectedMethod.value = SortMethod.DATE
}
}
}
const searchResources = (resources: Resource[]) => {
const searchText = searchQuery.value.toLowerCase();
return resources.filter(resource => (
resource.name.toLowerCase().indexOf(searchText) > -1
))
const searchText = searchQuery.value.toLowerCase();
return resources.filter(resource => (
resource.name.toLowerCase().indexOf(searchText) > -1
))
}
const resetFilters = () => {
searchQuery.value = ''
arePassedEventsShown.value = false
selectedThematic.value = []
selectedResourceFormats.value = []
selectedResourceTypes.value = []
searchQuery.value = ''
arePassedEventsShown.value = false
selectedThematic.value = []
selectedResourceFormats.value = []
selectedResourceTypes.value = []
}
</script>
Expand Down

0 comments on commit 22af8ee

Please sign in to comment.