studio-variable/designtopack
3
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

add isProjectLoadingState

Browse source
This commit is contained in:
isUnknown 2025-02-05 11:52:54 +01:00
parent 7ce5878898
commit fd9db75f2a
2 changed files with 30 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

34
src/components/Projects.vue
View file

@ -10,6 +10,7 @@
tabindex="0" tabindex="0"
:aria-label="tabs[0].label" :aria-label="tabs[0].label"
class="flow" class="flow"
:class="{ loading: isProjectsLoading }"
> >
<Project <Project
v-for="project in currentProjects" v-for="project in currentProjects"
@ -24,7 +25,7 @@
tabindex="0" tabindex="0"
:aria-label="tabs[1].label" :aria-label="tabs[1].label"
class="flow" class="flow"
> >
<Project <Project
v-for="project in archivedProjects" v-for="project in archivedProjects"
:key="project.id" :key="project.id"
@ -33,30 +34,29 @@
</section> </section>
</template> </template>
<script setup> <script setup>
import Tabs from "./Tabs.vue"; import Tabs from './Tabs.vue';
import Project from "./project/Project.vue"; import Project from './project/Project.vue';
import { useProjectsStore } from "../stores/projects"; import { useProjectsStore } from '../stores/projects';
import { ref, computed } from "vue"; import { ref, computed } from 'vue';
import { storeToRefs } from "pinia"; import { storeToRefs } from 'pinia';
const { projects, currentProjects, archivedProjects } = storeToRefs( const { projects, currentProjects, archivedProjects, isProjectsLoading } =
useProjectsStore() storeToRefs(useProjectsStore());
);
const currentTab = ref("currentProjects"); const currentTab = ref('currentProjects');
const tabs = computed(() => { const tabs = computed(() => {
return [ return [
{ {
label: "Projets en cours", label: 'Projets en cours',
id: "currentProjects", id: 'currentProjects',
count: currentProjects.value.length, count: currentProjects.value.length,
isActive: currentTab.value === "currentProjects", isActive: currentTab.value === 'currentProjects',
}, },
{ {
label: "Projets archivés", label: 'Projets archivés',
id: "archivedProjects", id: 'archivedProjects',
count: archivedProjects.value.length, count: archivedProjects.value.length,
isActive: currentTab.value === "archivedProjects", isActive: currentTab.value === 'archivedProjects',
}, },
]; ];
}); });
@ -72,7 +72,7 @@ section {
min-height: calc(100vh - 8.5rem); min-height: calc(100vh - 8.5rem);
} }
section:empty::after { section:empty::after {
content: "Aucun projet pour le moment."; content: 'Aucun projet pour le moment.';
position: absolute; position: absolute;
inset: 0; inset: 0;
display: grid; display: grid;

23
src/stores/projects.js
View file

@ -1,24 +1,26 @@
import { defineStore } from "pinia"; import { defineStore } from 'pinia';
import { useApiStore } from "./api.js"; import { useApiStore } from './api.js';
import { ref, computed } from "vue"; import { ref, computed } from 'vue';
export const useProjectsStore = defineStore("projects", () => { export const useProjectsStore = defineStore('projects', () => {
const isProjectsLoading = ref(true);
const projects = ref([]); const projects = ref([]);
const currentProjects = computed(() => { const currentProjects = computed(() => {
return projects.value.filter((project) => project.status === "listed"); return projects.value.filter((project) => project.status === 'listed');
}); });
const draftProjects = computed(() => { const draftProjects = computed(() => {
return projects.value.filter((project) => project.status === "draft"); return projects.value.filter((project) => project.status === 'draft');
}); });
const archivedProjects = computed(() => { const archivedProjects = computed(() => {
return projects.value.filter((project) => project.status === "unlisted"); return projects.value.filter((project) => project.status === 'unlisted');
}); });
const api = useApiStore(); const api = useApiStore();
api api.fetchData('projects').then((json) => {
.fetchData("projects") isProjectsLoading.value = false;
.then((json) => (projects.value = json.page.children)); projects.value = json.page.children;
});
// Functions // Functions
function getProjectByUuid(uuid) { function getProjectByUuid(uuid) {
@ -32,5 +34,6 @@ export const useProjectsStore = defineStore("projects", () => {
archivedProjects, archivedProjects,
draftProjects, draftProjects,
getProjectByUuid, getProjectByUuid,
isProjectsLoading,
}; };
}); });