Add pinia

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@tailwindcss/postcss": "^4.0.1",
         "@tailwindcss/vite": "^4.0.1",
+        "pinia": "^2.3.1",
         "vue": "^3.5.13",
         "vue-router": "^4.5.0"
       },
@@ -932,6 +933,28 @@
       "version": "1.1.1",
       "license": "ISC"
     },
+    "node_modules/pinia": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.3.1.tgz",
+      "integrity": "sha512-khUlZSwt9xXCaTbbxFYBKDc/bWAGWJjOgvxETwkTN7KRm66EeT1ZdZj6i2ceh9sP2Pzqsbc704r2yngBrxBVug==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.3",
+        "vue-demi": "^0.14.10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.4.4",
+        "vue": "^2.7.0 || ^3.5.11"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/postcss": {
       "version": "8.5.1",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.1.tgz",
@@ -1144,6 +1167,32 @@
         }
       }
     },
+    "node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.0.tgz",

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@tailwindcss/postcss": "^4.0.1",
     "@tailwindcss/vite": "^4.0.1",
+    "pinia": "^2.3.1",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0"
   },

src/components/NewProject.vue

@@ -483,15 +483,8 @@
 </template>
 
 <script setup>
-// const path = require('path');
-// export default {
-//   data() {
-//     return {
-//       // card: {
-//       //   border: '1px solid #3914AF',
-//       //   'border-radius': '12px',
-//       //   margin: '40px',
-//       // },
+  import { ref, computed, onMounted } from 'vue';
+
       let avatar = '';
       const close = ref(false);
       let title = "";
@@ -848,19 +841,7 @@ function getGoal(e) {
 
     // }
   // },
-  // computed: {
-  //   projectEdit() {
-  //     if (this.mode) {
-  //       return this.mode;
-  //     } else {
-  //       return {}
-  //     }
-  //   },
-    // ...mapGetters({
-    //   projects: 'project/getProjects',
-    //   favProjects: 'project/getFavProjects',
-    // })
-  // },
+  
   // watch: {
   //   mode: {
   //     handler(newVal, oldVal) {

src/main.js

@@ -1,9 +1,13 @@
 import { createApp } from 'vue'
+import { createPinia } from 'pinia'
 import router from './router';
 import './style.css'
 import App from './App.vue'
 
+const pinia = createPinia();
+
 createApp(App)
+.use(pinia)
 .use(router)
 .mount('#app')
 

src/pages/project/list.vue

@@ -7,7 +7,7 @@
       <div  class="flex items-center justify-between my-8">
         <button type="submit" 
           class="block text-primary relative rounded-xl border border-primary focus:outline-none hover:bg-gray-100" @click="openNew">
-          <div class="absolute inset-y-0 left-5 flex items-center pl-3.5 pointer-events-none">
+          <div class="absolute inset-y-0 left-5 flex items-center pointer-events-none">
             <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
               <rect x="8.28259" y="0.75" width="1.43478" height="16.5" rx="0.717391" fill="#3914AF"/>
               <rect x="17.25" y="8.28262" width="1.43478" height="16.5" rx="0.717391" transform="rotate(90 17.25 8.28262)" fill="#3914AF"/>
@@ -71,9 +71,9 @@
         <div v-for="project in projectTable" :key="project?.id_project" 
           class="row-border flex items-center justify-end py-2 w-full">
           <div  class="py-0 flex items-center w-1/10 ">
-            <nuxt-link :to="`project/workbook/${project?.id_project}`" class="text-decoration-none bluedeep--text d-flex align-end">
+            <!-- <nuxt-link :to="`project/workbook/${project?.id_project}`" class="text-decoration-none bluedeep--text d-flex align-end">
               <img v-if="project?.href_avatar" :src="project?.href_avatar" max-height="25" max-width="25" class="rounded-lg d-inline-block mx-2"> 
-              {{ project?.title }}</nuxt-link>
+              {{ project?.title }}</nuxt-link> -->
             </div>
           <div class="py-0 w-4/10 flex items-center">
             <span class="center bluedeep--text font-weight-bold">
@@ -102,10 +102,10 @@
                 <div class=" px-5">
                 <!-- <v-tooltip top allow-overflow>
                 <template v-slot:activator="{ on, attrs }"> -->
-                  <nuxt-link :to="`project/about_project/${project?.id_project}`" :project="project">
+                  <!-- <nuxt-link :to="`project/about_project/${project?.id_project}`" :project="project">
                     <img v-bind="attrs"
                     v-on="on" height="18" src="/Summary.svg">
-                  </nuxt-link>
+                  </nuxt-link> -->
                 <!-- </template>
                 <span>О проекте</span>
                 </v-tooltip> -->
@@ -113,10 +113,10 @@
               <div class=" px-5">
                 <!-- <v-tooltip top class="px-2">
                 <template v-slot:activator="{ on, attrs }"> -->
-                  <nuxt-link :to="`project/statistics/${project?.id_project}`" :project="project">
+                  <!-- <nuxt-link :to="`project/statistics/${project?.id_project}`" :project="project">
                     <img v-bind="attrs"
                     v-on="on" height="23" src="/Statistics.svg">
-                  </nuxt-link>
+                  </nuxt-link> -->
                 <!-- </template>
                 <span>Статистика</span>
                 </v-tooltip> -->
@@ -226,63 +226,59 @@
   </template>
    
 <script setup>
-  import { ref, computed } from 'vue';
+  import { ref, computed, onMounted } from 'vue';
   import NewProject from "../../components/NewProject.vue";
  
   
-  // import { useProjectStore } from './store'
+  import { useProjectStore } from '../../stores/project'
   
   const prList = useProjectStore()
-  await prList.loadData()
+  // await prList.loadData()
   const loadData = computed(() => { return prList.getProjects });
+  
   console.log(loadData);
   // const { getProjects } = storeToRefs(prList)
   // const { loadData } = prList;
-    //  import { ProjectStore } from './project'
-    //  import NewProjectView from '../../components/NewProject.vue';
-   // This will work in both `<script setup>` and `<script>`
-  // export default {
-  //   data () {
-  //     return {
-        const showNew = ref(true);
-        let pageView = true;
-        let poisktext  = "";
-        let tab = null;
-        let valid = true;
-        let hovered = null;
-        let title = 'Проекты';
-        let picked_project = [];
-        let showSelection = false;
-        const filter = ref({
-          isAuthorFilter: true,
-          isParticipantFilter: false,
-          isFavoriteFilter: false,
-          isFinishedFilter: false,
-          isStoppedFilter: false,
-          isRunningFilter: false
-        });
-        const overlay = ref(false);
-        let absolute = true;
-        const dialog = ref(false);
-        const showMessage = ref(false);
-        let zIndex = 1;
-        let expanded = [];
-        let singleExpand = false;
-        let projectHeaders = [
-            {
-              text: 'Журнал проекта',
-              align: 'start',
-              sortable: false,
-              value: 'name',
-            },
-            { text: 'Модификация', value: 'mode' },
-            { text: 'Последние изменения', value: 'lastChange' }
-        ];
-        const alertType = ref('success');
-        const messageAlert = ref('');
-        const editPr = ref('');
-        const keyNew = ref(0);
-        const sendPanent = ref(0);
+    
+  const showNew = ref(false);
+  let pageView = true;
+  let poisktext  = "";
+  let tab = null;
+  let valid = true;
+  let hovered = null;
+  let title = 'Проекты';
+  let picked_project = [];
+  let showSelection = false;
+  const filter = ref({
+    isAuthorFilter: true,
+    isParticipantFilter: false,
+    isFavoriteFilter: false,
+    isFinishedFilter: false,
+    isStoppedFilter: false,
+    isRunningFilter: false
+  });
+  const overlay = ref(false);
+  let absolute = true;
+  const dialog = ref(false);
+  const showMessage = ref(false);
+  let zIndex = 1;
+  let expanded = [];
+  let singleExpand = false;
+  let projectHeaders = [
+      {
+        text: 'Журнал проекта',
+        align: 'start',
+        sortable: false,
+        value: 'name',
+      },
+      { text: 'Модификация', value: 'mode' },
+      { text: 'Последние изменения', value: 'lastChange' }
+  ];
+  const alertType = ref('success');
+  const messageAlert = ref('');
+  const editPr = ref('');
+  const keyNew = ref(0);
+  const sendPanent = ref(0);
       // }
     // },
   
@@ -309,11 +305,11 @@
         
         
         async function getData () {
-          // await loadData(); 
+          const { loadData } = prList;
+          await loadData(); 
         }
         onMounted(async () => {
           await getData();
-          console.log(loadData, 'getProjects after load in store')
         });
         
     // methods: {
@@ -437,7 +433,7 @@
         editPr.value = '';
         sendPanent.value = 0;
         showNew.value = true;
-        console.log(showNew.value, 'showNew is changed')
+        
       }
       function closeImage() {
         showNew.value = false;
@@ -449,11 +445,7 @@
   
       }
     // },
-    // computed: {
-      
-      
-      
-    // },
+    
   //  }
    
    </script>

src/pages/project/projectCard.vue

@@ -0,0 +1,12 @@
+<template>
+    <div class="pa-10">
+      <div>
+          <h3 class="text-xl font-medium">Страница проекта</h3>
+      </div>
+    </div>
+</template>
+
+<script setup>
+  import { ref, computed } from 'vue';
+
+</script>

src/router/index.js

@@ -1,7 +1,8 @@
-// import VueRouter from 'vue-router'
+
 import { createRouter, createWebHistory } from 'vue-router'
 
 import ProjectList from "../pages/project/list.vue";
+import ProjectPage from "../pages/project/projectCard.vue";
 
 
 
@@ -15,16 +16,18 @@ const routes = [
       pageTitle: 'Olimp',
     },
   },
-  { path: '/project', component: ProjectList },
-  
-  // {
-  //   path: '/project',
-  //   name: 'ProjectList',
-  //   component: ProjectList,
-  //   props: {
-  //     pageTitle: 'Проекты',
-  //   },
-  // },
+  { 
+    path: '/project/id', 
+    component: ProjectPage 
+  },
+  {
+    path: '/project',
+    name: 'ProjectList',
+    component: ProjectList,
+    props: {
+      pageTitle: 'Проекты',
+    },
+  },
   
 ]
 

src/stores/project.ts

@@ -0,0 +1,225 @@
+import { defineStore } from 'pinia';
+
+interface UserPayloadInterface {
+  username: string;
+  password: string;
+}
+
+export const useProjectStore = defineStore('ProjectStore', {
+  state: () => ({
+    projects: [],
+    errors: null,
+    loading: false,
+    address: 'http://94.228.121.18/api/projects',
+  }),
+  actions: {
+    async loadData() {
+      // 'http://127.0.0.1:8001'
+      
+      // const url = this.$config.REST_SERVER + '/projects';
+      // const token = useCookie('token');
+      console.log(this.address, 'url loadData');
+      
+      try {
+        const data = await fetch(this.address,{
+          method: 'get',
+          headers: { 'Authorization': `Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJjb20ub2xpbXAuZXBwbXMiLCJpYXQiOjE2OTg5NTUxOTksImV4cCI6NzY5ODk1NTE5OSwic2NvcGUiOiJhY2Nlc3MiLCJzdWIiOiI0In0.gxUvqJHywewKdjtvZN2betGvU7xFCe6CDPzA2dYpWR0` },
+        });
+        
+        
+        if (data?.data) this.projects = data.data;
+        console.log(this.projects, 'in store.projects');
+        // const json = data.json();
+        // if (Array.isArray(data)) {
+        //   data.forEach(function(a: Object) {
+        //     const date = new Date(a?.last_changed)
+        //     const year = date.getFullYear();
+        //     let month = date.getMonth() + 1;
+        //     let dt = date.getDate();
+        //     if (dt < 10) {
+        //       dt = "0" + dt;
+        //     }
+        //     if (month < 10) {
+        //       month = "0" + month;
+        //     }
+        //     a.last_changed = dt + '.' + month + ' ' + year
+        //   });
+        //   this.projects = data;
+        // } 
+      } catch(e) {
+        console.error('Во время запроса loadData возникли следующие ошибки:\n' + e);
+        // this.errors = e;
+      }
+    },
+    async fetchEditPr(project: Object) {
+      //  http://127.0.0.1:8001
+      const url = this.address+ '/' + project?.id_project;
+      try {
+        const data = await fetch(url, {
+          method: 'put',
+          // headers: { 'Authorization': `Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJjb20ub2xpbXAuZXBwbXMiLCJpYXQiOjE2OTg5NTUxOTksImV4cCI6NzY5ODk1NTE5OSwic2NvcGUiOiJhY2Nlc3MiLCJzdWIiOiI0In0.gxUvqJHywewKdjtvZN2betGvU7xFCe6CDPzA2dYpWR0` },
+          body: JSON.stringify(project),
+        });
+        
+        
+        let obj = Object.assign({}, project);
+        
+        if (data?.data?.id_project) {
+          // obj.id_project = data.id_project;
+          const json = data.json();
+
+          console.log(obj);
+          if (Array.isArray(this.projects)) {
+            let match = this.projects.findIndex(pr => pr.id_project == data.data.id_project);
+            if (match>=0) this.projects.splice(match, 1, data.data);
+          }
+          return json;
+        }
+      }
+      catch(e) {
+        console.error('Во время запроса возникли следующие ошибки:\n' + e);
+        // this.errors = e;
+        return [];
+      }
+    },
+    // async unFaveProject(project: Object) {
+      
+    //   project.is_favorites = false;
+    //   let res = await this.fetchEditPr(project);
+    //   return res;
+    // },
+    // async faveProject(project: Object) {
+    //   project.is_favorites = true;
+    //   let res = await this.fetchEditPr(project);
+    //   return res;
+    // },
+    // async deleteProject({ commit }, project) {
+  
+    //   if (!project.id_project) return false;
+    //   const url = this.$config.REST_SERVER + '/projects/' + project.id_project
+    //   try {
+    //     const response = await fetch(url, {
+    //       method: 'DELETE',
+    //       headers: {
+    //         'Content-Type': 'application/json; charset=UTF-8'
+    //       },
+    //     })
+    //     const json = await response.json();
+    //     console.log("json:", json)
+        
+    //     if (json.data) {
+    //       commit("DELETE_PROJECT", project);
+    //       return true;
+    //     }
+    //     return false;
+    //   }
+    //   catch(e) {
+    //     console.error('Во время запроса' + url + 'возникли следующие ошибки:\n' + e);
+    //     return false;
+    //   }
+    // },
+    // async stopProject({commit, dispatch}, project) {
+    //   await commit("STOP_PROJECT", project);
+    //   project.status = 2;
+    //   const res = await dispatch('fetchEditPr', project);
+    //   return res;
+    // },
+    // async runProject({commit, dispatch}, project) {
+    //   await commit("RUN_PROJECT", project);
+    //   project.status = 1;
+    //   const res = await dispatch('fetchEditPr', project);
+    //   return res;
+    // },
+  
+    // async editRpoject({ commit }, newProject) {
+    //   try {
+    //     const response = await fetch('http://127.0.0.1:8001/api/projects', {
+    //       method: 'PUT',
+    //       headers: {
+    //         'Content-Type': 'application/json; charset=UTF-8'
+    //       },
+    //       body: JSON.stringify(newProject),
+    //       })
+    //     const json = await response.json();
+    //     commit("EDIT_PROJECT", newProject);
+    //     return json;
+    //   }
+    //   catch(e) {
+    //     console.error('Во время запроса возникли следующие ошибки:\n' + e);
+    //     return [];
+        
+    //   }
+    // },
+    async addNew(newProject: Object) {
+      
+      // const url = this.$config.REST_SERVER + '/projects';
+      // const token = useCookie('token');
+      console.log(3, newProject, 'url & add NewPR');
+      try {
+        const data = await fetch(this.address,{
+          method: 'patch',
+          // headers: { 'Authorization': `Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJjb20ub2xpbXAuZXBwbXMiLCJpYXQiOjE2OTg5NTUxOTksImV4cCI6NzY5ODk1NTE5OSwic2NvcGUiOiJhY2Nlc3MiLCJzdWIiOiI0In0.gxUvqJHywewKdjtvZN2betGvU7xFCe6CDPzA2dYpWR0` },
+          body: JSON.stringify(newProject),
+        });
+        let obj = Object.assign({}, newProject);
+        
+        if (data?.data?.id_project) {
+          obj.id_project = data.data.id_project;
+          console.log(obj);
+          if (Array.isArray(this.projects)) this.projects.push(obj);
+        }
+        
+        console.log(data?.data, this.projects, 'add new to store.projects');
+        return data;
+      // try {
+      //   const response = await fetch(url, {
+      //     method: 'POST',
+      //     headers: {
+      //       'Content-Type': 'application/json; charset=UTF-8'
+      //     },
+      //     body: JSON.stringify(newProject),
+      //     })
+      //   const json = await response.json();
+  
+      //   if (json.data.id_project) {
+      //     newProject["id_project"] = json.data.id_project;
+      //     console.log(newProject)
+  
+      //   }
+      //   commit("ADD_PROJECT", newProject);
+      //   return json.data;
+      } catch(e) {
+        console.error('Во время запроса возникли следующие ошибки:\n' + e);
+        return [];
+  
+      }
+    },
+  },
+  getters: {
+    getProjects: state => state.projects || [],
+    getFavProjects: state => {
+      if (Array.isArray(state.projects)) state.projects.filter(a => a?.is_favorites)
+      else return [];
+    },
+    authorProjects: state => {
+      if (Array.isArray(state.projects)) state.projects.filter(a => a?.owner)
+      else return [];
+    },
+    participantProjects: state => {
+      if (Array.isArray(state.projects)) state.projects.filter(a => !a?.owner)
+      else return [];
+    },
+    finishedProjects: state => {
+      if (Array.isArray(state.projects)) state.projects.filter(a => a?.status === 3)
+      else return [];
+    },
+    stoppedProjects: state => {
+      if (Array.isArray(state.projects)) state.projects.filter(a => a?.status === 2)
+      else return [];
+    },
+    runningProjects: state => {
+      if (Array.isArray(state.projects)) state.projects.filter(a => a?.status === 1)
+      else return [];
+    }
+  }
+});

src/style.css

@@ -1,81 +1,2 @@
 
 @import "tailwindcss";
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-.card {
-  padding: 2em;
-}
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}