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

23
src/stores/projects.js
View file

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