changes
This commit is contained in:
Simon Pocrnjič
@@ -7,7 +7,8 @@ import DecisionTable from './Partials/DecisionTable.vue';
|
||||
|
||||
const props = defineProps({
|
||||
actions: Array,
|
||||
decisions: Array
|
||||
decisions: Array,
|
||||
segments: Array
|
||||
});
|
||||
|
||||
const activeTab = ref('actions')
|
||||
@@ -21,10 +22,10 @@ const activeTab = ref('actions')
|
||||
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
|
||||
<fwb-tabs v-model="activeTab" variant="underline" >
|
||||
<fwb-tab name="actions" title="Actions">
|
||||
<ActionTable :actions="actions" :decisions="decisions" />
|
||||
<ActionTable :actions="actions" :decisions="decisions" :segments="segments" />
|
||||
</fwb-tab>
|
||||
<fwb-tab name="decisions" title="Decisions">
|
||||
<DecisionTable :decisions="decisions" />
|
||||
<DecisionTable :decisions="decisions" :actions="actions" />
|
||||
</fwb-tab>
|
||||
</fwb-tabs>
|
||||
</div>
|
||||
|
||||
@@ -12,26 +12,39 @@ import ActionMessage from '@/Components/ActionMessage.vue';
|
||||
|
||||
const props = defineProps({
|
||||
actions: Array,
|
||||
decisions: Array
|
||||
decisions: Array,
|
||||
segments: Array
|
||||
});
|
||||
|
||||
const menuDropdown = ref();
|
||||
|
||||
const drawerEdit = ref(false);
|
||||
const drawerCreate = ref(false);
|
||||
|
||||
const selectOptions = ref([]);
|
||||
const segmentOptions = ref([]);
|
||||
|
||||
const form = useForm({
|
||||
id: 0,
|
||||
name: '',
|
||||
color_tag: '',
|
||||
segment_id: null,
|
||||
decisions: []
|
||||
});
|
||||
|
||||
const createForm = useForm({
|
||||
name: '',
|
||||
color_tag: '',
|
||||
segment_id: null,
|
||||
decisions: []
|
||||
});
|
||||
|
||||
const openEditDrawer = (item) => {
|
||||
form.decisions = [];
|
||||
form.id = item.id;
|
||||
form.name = item.name;
|
||||
form.color_tag = item.color_tag;
|
||||
form.segment_id = item.segment ? item.segment.id : null;
|
||||
drawerEdit.value = true;
|
||||
|
||||
item.decisions.forEach((d) => {
|
||||
@@ -47,6 +60,16 @@ const closeEditDrawer = () => {
|
||||
form.reset();
|
||||
}
|
||||
|
||||
const openCreateDrawer = () => {
|
||||
createForm.reset();
|
||||
drawerCreate.value = true;
|
||||
}
|
||||
|
||||
const closeCreateDrawer = () => {
|
||||
drawerCreate.value = false;
|
||||
createForm.reset();
|
||||
}
|
||||
|
||||
const onColorPickerChange = () => {
|
||||
console.log(form.color_tag);
|
||||
}
|
||||
@@ -59,6 +82,12 @@ onMounted(() => {
|
||||
});
|
||||
|
||||
});
|
||||
props.segments.forEach((s) => {
|
||||
segmentOptions.value.push({
|
||||
name: s.name,
|
||||
id: s.id
|
||||
})
|
||||
})
|
||||
|
||||
});
|
||||
|
||||
@@ -70,8 +99,19 @@ const update = () => {
|
||||
});
|
||||
};
|
||||
|
||||
const store = () => {
|
||||
createForm.post(route('settings.actions.store'), {
|
||||
onSuccess: () => {
|
||||
closeCreateDrawer();
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div class="py-4 px-3">
|
||||
<PrimaryButton @click="openCreateDrawer">+ Dodaj akcijo</PrimaryButton>
|
||||
</div>
|
||||
<fwb-table>
|
||||
<fwb-table-head>
|
||||
<fwb-table-head-cell>#</fwb-table-head-cell>
|
||||
@@ -131,6 +171,20 @@ const update = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="segmentEdit" value="Segment"/>
|
||||
<multiselect
|
||||
id="segmentEdit"
|
||||
v-model="form.segment_id"
|
||||
:options="segmentOptions.map(s=>s.id)"
|
||||
:multiple="false"
|
||||
:searchable="true"
|
||||
:taggable="false"
|
||||
placeholder="Izberi segment"
|
||||
:custom-label="(opt) => (segmentOptions.find(s=>s.id===opt)?.name || '')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="decisions" value="Odločitve"/>
|
||||
<multiselect
|
||||
@@ -158,4 +212,78 @@ const update = () => {
|
||||
</form>
|
||||
</template>
|
||||
</Drawer>
|
||||
|
||||
<Drawer
|
||||
:show="drawerCreate"
|
||||
@close="closeCreateDrawer"
|
||||
>
|
||||
<template #title>
|
||||
<span>Dodaj akcijo</span>
|
||||
</template>
|
||||
<template #content>
|
||||
<form @submit.prevent="store">
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="nameCreate" value="Ime"/>
|
||||
<TextInput
|
||||
id="nameCreate"
|
||||
v-model="createForm.name"
|
||||
type="text"
|
||||
class="mt-1 block w-full"
|
||||
autocomplete="name"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="colorTagCreate" value="Barva"/>
|
||||
<div class="mt-1 w-full border flex p-1">
|
||||
<TextInput
|
||||
id="colorTagCreate"
|
||||
v-model="createForm.color_tag"
|
||||
type="color"
|
||||
class="mr-2"
|
||||
autocomplete="color-tag"
|
||||
/>
|
||||
<span>{{ createForm.color_tag }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="segmentCreate" value="Segment"/>
|
||||
<multiselect
|
||||
id="segmentCreate"
|
||||
v-model="createForm.segment_id"
|
||||
:options="segmentOptions.map(s=>s.id)"
|
||||
:multiple="false"
|
||||
:searchable="true"
|
||||
:taggable="false"
|
||||
placeholder="Izberi segment"
|
||||
:custom-label="(opt) => (segmentOptions.find(s=>s.id===opt)?.name || '')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="decisionsCreate" value="Odločitve"/>
|
||||
<multiselect
|
||||
id="decisionsCreate"
|
||||
v-model="createForm.decisions"
|
||||
:options="selectOptions"
|
||||
:multiple="true"
|
||||
track-by="id"
|
||||
:taggable="true"
|
||||
placeholder="Dodaj odločitev"
|
||||
label="name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end mt-4">
|
||||
<ActionMessage :on="createForm.recentlySuccessful" class="me-3">
|
||||
Shranjuje.
|
||||
</ActionMessage>
|
||||
|
||||
<PrimaryButton :class="{ 'opacity-25': createForm.processing }" :disabled="createForm.processing">
|
||||
Dodaj
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
</Drawer>
|
||||
</template>
|
||||
@@ -1,36 +1,238 @@
|
||||
<script setup>
|
||||
import BasicTable from '@/Components/BasicTable.vue';
|
||||
import { LinkOptions as C_LINK, TableColumn as C_TD, TableRow as C_TR} from '@/Shared/AppObjects';
|
||||
import { FwbTable, FwbTableBody, FwbTableHead, FwbTableHeadCell, FwbTableCell, FwbTableRow } from 'flowbite-vue';
|
||||
import { EditIcon } from '@/Utilities/Icons';
|
||||
import Drawer from '@/Components/Drawer.vue';
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useForm } from '@inertiajs/vue3';
|
||||
import InputLabel from '@/Components/InputLabel.vue';
|
||||
import TextInput from '@/Components/TextInput.vue';
|
||||
import Multiselect from 'vue-multiselect';
|
||||
import PrimaryButton from '@/Components/PrimaryButton.vue';
|
||||
import ActionMessage from '@/Components/ActionMessage.vue';
|
||||
|
||||
const props = defineProps({
|
||||
decisions: Array
|
||||
decisions: Array,
|
||||
actions: Array
|
||||
});
|
||||
|
||||
const header = [
|
||||
C_TD.make('#', 'header'),
|
||||
C_TD.make('Name', 'header'),
|
||||
C_TD.make('Color tag', 'header'),
|
||||
C_TD.make('Belongs to actions', 'header')
|
||||
];
|
||||
const drawerEdit = ref(false);
|
||||
const drawerCreate = ref(false);
|
||||
|
||||
const createBody = (data) => {
|
||||
let content = [];
|
||||
const actionOptions = ref([]);
|
||||
|
||||
data.forEach((a) => {
|
||||
const cols = [
|
||||
C_TD.make(a.id, 'body'),
|
||||
C_TD.make(a.name, 'body'),
|
||||
C_TD.make(a.color_tag, 'body'),
|
||||
C_TD.make(a.actions.length, 'body')
|
||||
];
|
||||
const form = useForm({
|
||||
id: 0,
|
||||
name: '',
|
||||
color_tag: '',
|
||||
actions: []
|
||||
});
|
||||
|
||||
content.push(C_TR.make(cols));
|
||||
});
|
||||
const createForm = useForm({
|
||||
name: '',
|
||||
color_tag: '',
|
||||
actions: []
|
||||
});
|
||||
|
||||
return content;
|
||||
const openEditDrawer = (item) => {
|
||||
form.actions = [];
|
||||
form.id = item.id;
|
||||
form.name = item.name;
|
||||
form.color_tag = item.color_tag;
|
||||
drawerEdit.value = true;
|
||||
|
||||
item.actions.forEach((a) => {
|
||||
form.actions.push({
|
||||
name: a.name,
|
||||
id: a.id
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
const closeEditDrawer = () => {
|
||||
drawerEdit.value = false;
|
||||
form.reset();
|
||||
}
|
||||
|
||||
const openCreateDrawer = () => {
|
||||
createForm.reset();
|
||||
drawerCreate.value = true;
|
||||
}
|
||||
|
||||
const closeCreateDrawer = () => {
|
||||
drawerCreate.value = false;
|
||||
createForm.reset();
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
props.actions.forEach((a) => {
|
||||
actionOptions.value.push({
|
||||
name: a.name,
|
||||
id: a.id
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
const update = () => {
|
||||
form.put(route('settings.decisions.update', { id: form.id }), {
|
||||
onSuccess: () => {
|
||||
closeEditDrawer();
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const store = () => {
|
||||
createForm.post(route('settings.decisions.store'), {
|
||||
onSuccess: () => {
|
||||
closeCreateDrawer();
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<BasicTable :header="header" :body="createBody(decisions)" />
|
||||
<div class="py-4 px-3">
|
||||
<PrimaryButton @click="openCreateDrawer">+ Dodaj odločitev</PrimaryButton>
|
||||
</div>
|
||||
<fwb-table>
|
||||
<fwb-table-head>
|
||||
<fwb-table-head-cell>#</fwb-table-head-cell>
|
||||
<fwb-table-head-cell>Name</fwb-table-head-cell>
|
||||
<fwb-table-head-cell>Color tag</fwb-table-head-cell>
|
||||
<fwb-table-head-cell>Belongs to actions</fwb-table-head-cell>
|
||||
<fwb-table-head-cell>
|
||||
<span class="sr-only">Edit</span>
|
||||
</fwb-table-head-cell>
|
||||
</fwb-table-head>
|
||||
<fwb-table-body>
|
||||
<fwb-table-row v-for="d in decisions" :key="d.id">
|
||||
<fwb-table-cell>{{ d.id }}</fwb-table-cell>
|
||||
<fwb-table-cell>{{ d.name }}</fwb-table-cell>
|
||||
<fwb-table-cell>{{ d.color_tag }}</fwb-table-cell>
|
||||
<fwb-table-cell>{{ d.actions.length }}</fwb-table-cell>
|
||||
<fwb-table-cell>
|
||||
<button class="px-2" @click="openEditDrawer(d)"><EditIcon size="md" css="text-gray-500" /></button>
|
||||
</fwb-table-cell>
|
||||
</fwb-table-row>
|
||||
</fwb-table-body>
|
||||
</fwb-table>
|
||||
|
||||
<Drawer
|
||||
:show="drawerEdit"
|
||||
@close="closeEditDrawer"
|
||||
>
|
||||
<template #title>
|
||||
<span>Spremeni odločitev</span>
|
||||
</template>
|
||||
<template #content>
|
||||
<form @submit.prevent="update">
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="name" value="Ime"/>
|
||||
<TextInput
|
||||
id="name"
|
||||
v-model="form.name"
|
||||
type="text"
|
||||
class="mt-1 block w-full"
|
||||
autocomplete="name"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="colorTag" value="Barva"/>
|
||||
<div class="mt-1 w-full border flex p-1">
|
||||
<TextInput
|
||||
id="colorTag"
|
||||
v-model="form.color_tag"
|
||||
type="color"
|
||||
class="mr-2"
|
||||
autocomplete="color-tag"
|
||||
/>
|
||||
<span>{{ form.color_tag }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="actionsSelect" value="Akcije"/>
|
||||
<multiselect
|
||||
id="actionsSelect"
|
||||
v-model="form.actions"
|
||||
:options="actionOptions"
|
||||
:multiple="true"
|
||||
track-by="id"
|
||||
:taggable="true"
|
||||
placeholder="Dodaj akcijo"
|
||||
label="name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end mt-4">
|
||||
<ActionMessage :on="form.recentlySuccessful" class="me-3">
|
||||
Shranjuje.
|
||||
</ActionMessage>
|
||||
|
||||
<PrimaryButton :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
|
||||
Shrani
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
</Drawer>
|
||||
|
||||
<Drawer
|
||||
:show="drawerCreate"
|
||||
@close="closeCreateDrawer"
|
||||
>
|
||||
<template #title>
|
||||
<span>Dodaj odločitev</span>
|
||||
</template>
|
||||
<template #content>
|
||||
<form @submit.prevent="store">
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="nameCreate" value="Ime"/>
|
||||
<TextInput
|
||||
id="nameCreate"
|
||||
v-model="createForm.name"
|
||||
type="text"
|
||||
class="mt-1 block w-full"
|
||||
autocomplete="name"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="colorTagCreate" value="Barva"/>
|
||||
<div class="mt-1 w-full border flex p-1">
|
||||
<TextInput
|
||||
id="colorTagCreate"
|
||||
v-model="createForm.color_tag"
|
||||
type="color"
|
||||
class="mr-2"
|
||||
autocomplete="color-tag"
|
||||
/>
|
||||
<span>{{ createForm.color_tag }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="actionsCreate" value="Akcije"/>
|
||||
<multiselect
|
||||
id="actionsCreate"
|
||||
v-model="createForm.actions"
|
||||
:options="actionOptions"
|
||||
:multiple="true"
|
||||
track-by="id"
|
||||
:taggable="true"
|
||||
placeholder="Dodaj akcijo"
|
||||
label="name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end mt-4">
|
||||
<ActionMessage :on="createForm.recentlySuccessful" class="me-3">
|
||||
Shranjuje.
|
||||
</ActionMessage>
|
||||
|
||||
<PrimaryButton :class="{ 'opacity-25': createForm.processing }" :disabled="createForm.processing">
|
||||
Dodaj
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
</Drawer>
|
||||
</template>
|
||||
Reference in New Issue
Block a user