Коммит cb284d96 создал по автору avathar's avatar avathar
Просмотр файлов

Создан функционал ототбражения создания и удаления 

Не доделано удаление. И фильтрация отображения
владелец c5dc24f6
Скрыть пробелы
Построчно Рядом
universo-frontend/src/pages/CurrentProjectPage.vue
Просмотр файла @ cb284d96
<template> <template>
<q-page padding> <q-page padding>
<q-card class="my-card" v-if="currentProject"> <q-card class="my-card" flat v-if="currentProject">
<q-card-section> Lorem ipsum dolor sit amet </q-card-section>
<q-card-section> {{ projectUuid }}</q-card-section>
<q-card-section> <q-card-section>
{{ currentProject.nomo.enhavo }} <div class="text-center text-h5 text-bold text-capitalize">
{{ currentProject.nomo.enhavo }}
</div>
<div class="text-center text-h7 text-bold text-capitalize">
{{ currentProject.priskribo.enhavo }}
</div>
<q-card-actions align="right">
<div class="text-subtitle2 text-brown">
{{ projectUuid }}
</div>
<q-space />
<q-btn flat round color="primary" icon="edit" @click="editProject">
<q-tooltip> Редактирование проекта </q-tooltip>
</q-btn>
<q-btn flat round color="teal" icon="add" @click="addColumn">
<q-tooltip> Добавить колонку </q-tooltip>
</q-btn>
<q-btn flat round color="red" icon="delete" @click="deleteProject">
<q-tooltip> Удалить проект </q-tooltip>
</q-btn>
</q-card-actions>
</q-card-section> </q-card-section>
<q-card-section
class="q-pa-md row items-start q-gutter-md"
v-if="currentProject.kanvasoObjekto?.edges"
>
<q-card
flat
bordered
v-for="object in currentProject.kanvasoObjekto.edges"
:key="object.node.uuid"
>
<q-card-section horizontal
><div>
<div>{{ object.node.nomo.enhavo }}</div>
<div class="text-subtitle1">
{{ object.node.priskribo.enhavo }}
</div>
<div class="text-subtitle2 text-brown">
{{ object.node.uuid }}
</div>
<div class="text-subtitle2 text-green">
{{ object.node.tipo.nomo.enhavo }}
</div>
</div>
<q-card-actions align="right" vertical>
<q-btn
flat
round
color="primary"
icon="edit"
@click="editColumn(object)"
>
<q-tooltip> Редактирование колонки </q-tooltip>
</q-btn>
<q-btn
flat
round
color="teal"
icon="add"
@click="addCell(object)"
>
<q-tooltip> Добавить ячейку </q-tooltip>
</q-btn>
<q-btn
flat
round
color="red"
icon="delete"
@click="deleteColumn(object)"
>
<q-tooltip> Удалить колонку </q-tooltip>
</q-btn>
</q-card-actions>
</q-card-section>
<template
v-if="object.node.kanvasojKanvasoobjektoligiloLigilo.edges.length"
>
<q-card
v-for="ligilo in object.node.kanvasojKanvasoobjektoligiloLigilo
.edges"
:key="ligilo.node.uuid"
flat
bordered
>
<q-card-section
horizontal
style="border: tomato 2px solid; padding: 10px; margin: 10px"
>
<div>
<div>{{ ligilo.node.posedanto.nomo.enhavo }}</div>
<div class="text-subtitle1">
{{ ligilo.node.posedanto.priskribo.enhavo }}
</div>
<div class="text-subtitle2 text-brown">
{{ ligilo.node.posedanto.uuid }}
</div>
<div class="text-subtitle2 text-green">
{{ ligilo.node.posedanto.tipo.nomo.enhavo }}
</div>
</div>
<q-card-actions align="right" vertical>
<q-btn
flat
round
color="primary"
icon="edit"
@click="editCell(object, ligilo)"
>
<q-tooltip> Редактирование ячейки </q-tooltip>
</q-btn>
<q-btn
flat
round
color="red"
icon="delete"
@click="deleteCell(object, ligilo)"
>
<q-tooltip> Удалить ячейку </q-tooltip>
</q-btn>
</q-card-actions>
</q-card-section>
</q-card>
</template>
</q-card>
</q-card-section>
<!-- <q-card-section>
<pre> {{ currentProject }} </pre>
</q-card-section> -->
</q-card> </q-card>
<q-dialog v-model="deleteDialog" persistent @before-hide="cleanDialogs">
<q-card>
<q-card-section class="row items-center">
<q-avatar icon="warning" color="red" text-color="white" />
<span class="q-ml-sm">{{ dialogMessage }}</span>
</q-card-section>
<q-card-actions align="right">
<q-btn flat label="Отмена" color="positive" @click="cleanDialogs" />
<q-btn
flat
label="Удалить"
color="negative"
@click="dialogMethod(payload)"
/>
</q-card-actions>
</q-card>
</q-dialog>
<q-dialog v-model="addOrEditDialog" persistent @before-hide="cleanDialogs">
<q-card>
<q-card-section class="row items-center">
<q-avatar icon="edit" color="blue" text-color="white" />
<span class="q-ml-sm">{{ dialogMessage }}</span>
</q-card-section>
<q-card-section class="row items-center">
<q-input v-model="name" type="text" :label="nameLabel" />
<q-input
v-model="description"
type="text"
:label="descriptionLabel"
/>
</q-card-section>
<q-card-actions align="right">
<q-btn flat label="Отмена" color="positive" @click="cleanDialogs" />
<q-btn
flat
:disable="
!name ||
!description ||
(name === oldName && description === oldDescription)
"
label="Сохранить"
color="negative"
@click="dialogMethod(payload)"
/>
</q-card-actions>
</q-card>
</q-dialog>
</q-page> </q-page>
</template> </template>
...@@ -14,11 +190,33 @@ ...@@ -14,11 +190,33 @@
import { useKanvasoStore } from '../stores/kanvaso'; import { useKanvasoStore } from '../stores/kanvaso';
import { mapActions, mapState } from 'pinia'; import { mapActions, mapState } from 'pinia';
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import { useCurrentUserStore } from '../stores/current-user';
import { debugLog } from '../utils';
export default defineComponent({ export default defineComponent({
// name: 'PageName' // name: 'PageName'
data() {
return {
deleteDialog: false,
dialogMessage: '',
addOrEditDialog: false,
name: '',
nameLabel: '',
oldName: '',
description: '',
oldDescription: '',
descriptionLabel: '',
dialogMethod: null,
payload: {},
deleteProjectFlag: false,
};
},
computed: { computed: {
...mapState(useKanvasoStore, { project: 'getKanvaso' }), ...mapState(useKanvasoStore, { project: 'getKanvaso' }),
...mapState(useCurrentUserStore, { userId: 'getUserId' }),
currentProject() { currentProject() {
return this.project ? this.project[0].node : null; return this.project ? this.project[0].node : null;
}, },
...@@ -26,11 +224,273 @@ export default defineComponent({ ...@@ -26,11 +224,273 @@ export default defineComponent({
return this.$route?.params?.uuid || ''; return this.$route?.params?.uuid || '';
}, },
}, },
watch: {
name(val) {
this.name = val.trim();
if ('nomo' in this.payload) {
this.payload.nomo = val;
}
},
description(val) {
this.description = val.trim();
if ('priskribo' in this.payload) {
this.payload.priskribo = val;
}
},
},
methods: { methods: {
...mapActions(useKanvasoStore, ['onGetKanvaso']), ...mapActions(useKanvasoStore, [
'onGetKanvasoFull',
'onEditKanvasoObjekto',
'onEditKanvaso',
'onEditKanvasoLigilo',
]),
addColumn() {
this.dialogMessage = 'Добавление колонки';
this.nameLabel = 'Название колонки';
this.descriptionLabel = 'Описание колонки';
this.payload = {
nomo: this.name,
priskribo: this.description,
kanvasoUuid: this.projectUuid,
posedantoUzantoId: this.userId,
tipoId: 3,
};
this.dialogMethod = this.updateKanvasoObjekto;
this.addOrEditDialog = true;
},
addCell(objekto) {
this.dialogMessage = 'Добавление ячейки';
this.nameLabel = 'Название ячейки';
this.descriptionLabel = 'Описание ячейки';
this.payload = {
kanvasoUuid: this.projectUuid,
posedantoUzantoId: this.userId,
nomo: this.name,
priskribo: this.description,
ligiloId: objekto.node.objId,
tipoId: 4,
tipoLigiloId: 1,
};
this.dialogMethod = this.addKanvasoLigilo;
this.addOrEditDialog = true;
},
editProject() {
this.dialogMessage = 'Редактирование проекта';
this.nameLabel = 'Название проекта';
this.descriptionLabel = 'Описание проекта';
this.name = this.oldName = this.currentProject?.nomo?.enhavo || '';
this.description = this.oldDescription =
this.currentProject?.priskribo?.enhavo || '';
this.payload = {
nomo: this.name,
priskribo: this.description,
uuid: this.projectUuid,
posedantoUzantoId: this.userId,
};
this.dialogMethod = this.updateKanvaso;
this.addOrEditDialog = true;
},
editColumn(objekto) {
this.dialogMessage = 'Редактирование колонки';
this.nameLabel = 'Название колонки';
this.descriptionLabel = 'Описание колонки';
this.name = this.oldName = objekto.node?.nomo?.enhavo || '';
this.description = this.oldDescription =
objekto.node?.priskribo?.enhavo || '';
this.payload = {
nomo: this.name,
priskribo: this.description,
// kanvasoUuid: this.projectUuid,
posedantoUzantoId: this.userId,
// tipoId: 1,
uuid: objekto.node?.uuid,
};
this.dialogMethod = this.updateKanvasoObjekto;
this.addOrEditDialog = true;
},
editCell(objekto, ligilo) {
this.dialogMessage = 'Редактирование ячейки';
this.nameLabel = 'Название ячейки';
this.descriptionLabel = 'Описание ячейки';
this.name = this.oldName = ligilo.node?.posedanto?.nomo?.enhavo || '';
this.description = this.oldDescription =
ligilo.node?.posedanto?.priskribo?.enhavo || '';
this.payload = {
uuid: ligilo.node?.posedanto?.uuid,
nomo: this.name,
priskribo: this.description,
};
this.dialogMethod = this.updateKanvasoObjekto;
this.addOrEditDialog = true;
},
deleteProject() {
this.deleteProjectFlag = true;
this.dialogMessage = 'Удаление проекта';
this.nameLabel = 'Название проекта';
this.descriptionLabel = 'Описание проекта';
this.payload = {
uuid: this.projectUuid,
posedantoUzantoId: this.userId,
forigo: true,
};
this.dialogMethod = this.updateKanvaso;
this.deleteDialog = true;
},
deleteColumn(objekto) {
this.dialogMessage = 'Удаление колонки';
this.nameLabel = 'Название колонки';
this.descriptionLabel = 'Описание колонки';
this.payload = {
// kanvasoUuid: this.projectUuid,
posedantoUzantoId: this.userId,
// tipoId: 1,
uuid: objekto.node?.uuid,
forigo: true,
};
this.dialogMethod = this.updateKanvasoObjekto;
this.deleteDialog = true;
},
deleteCell(objekto, ligilo) {
this.dialogMessage = 'Удаление ячейки';
this.nameLabel = 'Название ячейки';
this.descriptionLabel = 'Описание ячейки';
this.payload = {
uuid: ligilo.node?.posedanto?.uuid,
forigo: true,
kanvasoUuid: this.projectUuid,
posedantoUzantoId: this.userId,
objektoId: ligilo.node?.ligilo?.objId,
ligiloId: ligilo.node?.posedanto?.objId,
};
this.dialogMethod = this.deleteKanvasoLigilo;
this.deleteDialog = true;
},
cleanDialogs() {
this.deleteDialog = false;
this.addOrEditDialog = false;
this.dialogMessage = '';
this.name = '';
this.nameLabel = '';
this.oldName = '';
this.description = '';
this.descriptionLabel = '';
this.oldDescription = '';
this.dialogMethod = null;
this.payload = {};
},
updateKanvaso(payload) {
this.onEditKanvaso(payload)
.then((result) => {
this.$q.notify({
message: 'Успешно',
color: 'positive',
});
this.onGetKanvasoFull({ uuid: this.projectUuid });
})
.catch((err) => {
this.$q.notify({
message: 'Ошибка',
color: 'negative',
});
});
this.cleanDialogs();
},
updateKanvasoObjekto(payload) {
this.onEditKanvasoObjekto(payload)
.then((result) => {
this.$q.notify({
message: 'Успешно',
color: 'positive',
});
if (this.deleteProjectFlag) {
this.$router.replace({ name: 'projects' });
}
this.onGetKanvasoFull({ uuid: this.projectUuid });
})
.catch((err) => {
this.$q.notify({
message: 'Ошибка',
color: 'negative',
});
});
this.cleanDialogs();
},
addKanvasoLigilo(payload) {
this.onEditKanvasoObjekto(payload)
.then((result) => {
payload.objektoId =
result.data?.redaktuKanvasojKanvasoObjekto?.kanvasoObjekto?.objId;
return this.onEditKanvasoLigilo(payload);
})
.then((result) => {
debugLog(result);
this.$q.notify({
message: 'Успешно',
color: 'positive',
});
return this.onGetKanvasoFull({ uuid: this.projectUuid });
})
.catch((err) => {
this.$q.notify({
message: 'Ошибка',
color: 'negative',
});
console.log(err);
});
this.cleanDialogs();
},
deleteKanvasoLigilo(payload) {
this.onEditKanvasoLigilo(payload)
.then((result) => {
// payload.objektoId =
// result.data?.redaktuKanvasojKanvasoObjekto?.kanvasoObjekto?.objId;
return this.onEditKanvasoObjekto(payload);
})
.then((result) => {
debugLog(result);
this.$q.notify({
message: 'Успешно',
color: 'positive',
});
return this.onGetKanvasoFull({ uuid: this.projectUuid });
})
.catch((err) => {
this.$q.notify({
message: 'Ошибка',
color: 'negative',
});
console.log(err);
});
this.cleanDialogs();
},
updateKanvasoLigilo(payload) {
this.onEditKanvasoLigilo(payload)
.then((result) => {
this.$q.notify({
message: 'Успешно',
color: 'positive',
});
this.onGetKanvasoFull({ uuid: this.projectUuid });
})
.catch((err) => {
this.$q.notify({
message: 'Ошибка',
color: 'negative',
});
});
this.cleanDialogs();
},
}, },
mounted() { mounted() {
this.onGetKanvaso({ uuid: this.projectUuid }); this.onGetKanvasoFull({ uuid: this.projectUuid });
this.deleteProjectFlag = false;
}, },
}); });
</script> </script>
universo-frontend/src/queries/mutations.js
Просмотр файла @ cb284d96
import gql from 'graphql-tag'; import gql from 'graphql-tag';
//Создаём связь:
export const kanvasoObjektoLigilo = gql`
mutation redaktuKanvasojKanvasoObjektoLigilo(
$publikigo: Boolean = true
$objektoId: Int
$ligiloId: Int
$tipoLigiloId: Int
$forigo: Boolean = false
$uuid: UUID
) {
redaktuKanvasojKanvasoObjektoLigilo(
publikigo: $publikigo
posedantoId: $objektoId
ligiloId: $ligiloId
tipoId: $tipoLigiloId
forigo: $forigo
uuid: $uuid
) {
status
message
kanvasoObjektoLigilo {
uuid
id
}
}
}
`;
// Создание объекта типа контейнер-доска:
export const kanvasoObjekto = gql`
mutation redaktuKanvasojKanvasoObjekto(
$nomo: String #"Первый"
$priskribo: String #"jgbcfybtgdf df gdfh"
$publikigo: Boolean = true
$kanvasoUuid: String #"[сюда uuid вставляем]"
$posedantoUzantoId: Int #[свой id]
$tipoId: Int = 1 #Тип объекта
$forigo: Boolean = false
$uuid: UUID
) {
redaktuKanvasojKanvasoObjekto(
nomo: $nomo
priskribo: $priskribo
publikigo: $publikigo
kanvasoUuid: $kanvasoUuid
posedantoUzantoId: $posedantoUzantoId
tipoId: $tipoId
forigo: $forigo
uuid: $uuid
) {
status
message
kanvasoObjekto {
uuid
objId
nomo {
enhavo
}
}
}
}
`;
//Изменение kanvaso. При отсутствие uuid - создание
export const kanvasoEdit = gql` export const kanvasoEdit = gql`
mutation ( mutation (
$publikigo: Boolean = true $publikigo: Boolean = true
......
universo-frontend/src/queries/queries.js
Просмотр файла @ cb284d96
import gql from 'graphql-tag'; import gql from 'graphql-tag';
//Получить канвас со всеми объектами в нём и со связями:
export const kanvasojKanvasoFull = gql`
query kanvasojKanvasoFull($objId: Float, $uuid: UUID) {
kanvasojKanvaso(objId: $objId, uuid: $uuid) {
edges {
node {
nomo {
enhavo
}
tipo {
id
}
objId
id
kategorio {
edges {
node {
id
uuid
nomo {
enhavo
}
priskribo {
enhavo
}
}
}
}
priskribo {
enhavo
}
pozicio
uuid
forigo
publikigo
kanvasoObjekto {
edges {
node {
pozicio
id
objId
uuid
forigo
publikigo
priskribo {
enhavo
}
nomo {
enhavo
}
tipo {
id
uuid
objId
nomo {
enhavo
}
}
kanvasojKanvasoobjektoligiloLigilo {
edges {
node {
ligilo {
objId
pozicio
priskribo {
enhavo
}
uuid
id
nomo {
enhavo
}
priskribo {
enhavo
}
}
posedanto {
objId
id
uuid
pozicio
nomo {
enhavo
}
priskribo {
enhavo
}
tipo {
uuid
id
nomo {
enhavo
}
priskribo {
enhavo
}
}
}
tipo {
id
priskribo {
enhavo
}
uuid
objId
nomo {
enhavo
}
}
}
}
}
kanvasojKanvasoobjektoligiloPosedanto {
edges {
node {
ligilo {
uuid
pozicio
objId
nomo {
enhavo
}
priskribo {
enhavo
}
}
posedanto {
pozicio
uuid
objId
kanvaso {
uuid
pozicio
}
id
priskribo {
enhavo
}
nomo {
enhavo
}
}
tipo {
uuid
id
priskribo {
enhavo
}
objId
nomo {
enhavo
}
}
}
}
}
}
}
}
posedanto {
edges {
node {
tipo {
uuid
nomo {
lingvo
enhavo
chefaVarianto
json
}
priskribo {
lingvo
enhavo
chefaVarianto
json
}
id
}
uuid
posedantoUzanto {
unuaNomo {
enhavo
}
duaNomo {
enhavo
}
uuid
sekso
avataro {
bildoF {
url
}
}
familinomo {
enhavo
}
objId
}
}
}
}
}
}
}
}
`;
// Получение kanvaso. Если нет uuid - все kanvaso
export const kanvaso = gql` export const kanvaso = gql`
query kanvaso($uuid: UUID) { query kanvaso($uuid: UUID) {
kanvasojKanvaso(forigo: false, publikigo: true, uuid: $uuid) { kanvasojKanvaso(forigo: false, publikigo: true, uuid: $uuid) {
......
universo-frontend/src/stores/kanvaso.js
Просмотр файла @ cb284d96
import { defineStore, acceptHMRUpdate } from 'pinia'; import { defineStore, acceptHMRUpdate } from 'pinia';
import { apollo } from 'src/boot/apollo'; import { apollo } from 'src/boot/apollo';
import { debugLog } from 'src/utils'; import { debugLog } from 'src/utils';
import { kanvaso } from '../queries/queries.js'; import { kanvaso, kanvasojKanvasoFull } from '../queries/queries.js';
import { kanvasoEdit } from 'src/queries/mutations.js'; import {
kanvasoEdit,
kanvasoObjekto,
kanvasoObjektoLigilo,
} from 'src/queries/mutations.js';
export const useKanvasoStore = defineStore('Kanvaso', { export const useKanvasoStore = defineStore('Kanvaso', {
state: () => ({ state: () => ({
kanvaso: null, kanvaso: null,
}), }),
getters: { getters: {
getKanvaso: (state) => { getKanvaso: (state) => {
...@@ -33,19 +36,24 @@ export const useKanvasoStore = defineStore('Kanvaso', { ...@@ -33,19 +36,24 @@ export const useKanvasoStore = defineStore('Kanvaso', {
return Promise.reject(err); return Promise.reject(err);
} }
}, },
async onGetKanvasoFull(payload) {
debugLog('on get kanvaso full');
try {
const response = await apollo.default.query({
query: kanvasojKanvasoFull,
variables: payload,
errorPolicy: 'all',
fetchPolicy: 'network-only',
});
debugLog('response: ', response);
this.kanvaso = response.data.kanvasojKanvaso.edges;
return Promise.resolve(response);
} catch (err) {
return Promise.reject(err);
}
},
async onEditKanvaso( async onEditKanvaso(payload) {
// {
// publikigo,
// nomo,
// priskribo,
// posedantoUzantoId,
// uuid,
// forigo
// }
payload
) {
debugLog('on edit kanvaso'); debugLog('on edit kanvaso');
try { try {
const response = await apollo.default.mutate({ const response = await apollo.default.mutate({
...@@ -61,6 +69,38 @@ export const useKanvasoStore = defineStore('Kanvaso', { ...@@ -61,6 +69,38 @@ export const useKanvasoStore = defineStore('Kanvaso', {
return Promise.reject(err); return Promise.reject(err);
} }
}, },
async onEditKanvasoObjekto(payload) {
debugLog('on edit kanvaso objekto');
try {
const response = await apollo.default.mutate({
mutation: kanvasoObjekto,
variables: payload,
errorPolicy: 'all',
fetchPolicy: 'network-only',
});
debugLog('response: ', response);
// this.kanvaso = response.data.kanvasojKanvaso.edges;
return Promise.resolve(response);
} catch (err) {
return Promise.reject(err);
}
},
async onEditKanvasoLigilo(payload) {
debugLog('on edit kanvaso ligilo');
try {
const response = await apollo.default.mutate({
mutation: kanvasoObjektoLigilo,
variables: payload,
errorPolicy: 'all',
fetchPolicy: 'network-only',
});
debugLog('response: ', response);
// this.kanvaso = response.data.kanvasojKanvaso.edges;
return Promise.resolve(response);
} catch (err) {
return Promise.reject(err);
}
},
}, },
}); });
......
Поддерживает Markdown
0% или .
You are about to add 0 people to the discussion. Proceed with caution.
Сначала завершите редактирование этого сообщения!
Пожалуйста, зарегистрируйтесь или чтобы прокомментировать