Notes
Notes - notes.io |
<div class="modal fade" id="CreateMeetingModal" tabindex="-1" aria-labelledby="CreateMeetingModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header border">
<h6 class="modal-title" id="CreateMeetingModalLabel">Add Meeting</h6>
<button type="button" class="btn-close p" data-bs-dismiss="modal" aria-label="Close" id="closeModal"></button>
</div>
<div class="modal-body">
<select v-model="formData.meeting_type_id" class="form-select form-select-sm mt-4"
:class="{ 'border-red': errObj.meeting_type_id }">
<option value="" disabled selected>Select Meeting Type</option>
<option v-for="type in meetingTypes" :value="type.id" :key="type.id">
{{ type.name }}
</option>
</select>
<ErrInfo :message="errObj.meeting_type_id" v-if="errObj.meeting_type_id" />
<select v-model="formData.meeting_presidency_id" class="form-select form-select-sm mt-12"
:class="{ 'border-red': errObj.meeting_presidency_id }">
<option value="" disabled selected>
Select Meeting Presidency
</option>
<option v-for="type in presidencyTypes" :value="type.id" :key="type.id">
{{ type.name }}
</option>
</select>
<ErrInfo :message="errObj.meeting_presidency_id" v-if="errObj.meeting_presidency_id" />
<div class="d-flex mt-4 gap-16">
<TextInput label="Meeting Number" placeholder="Please Enter the Meeing Number" class="flex-fill"
v-model="formData.meeting_number" :errorText="errObj.meeting_number" />
<div class="flex-fill">
<label for="" class="form-label">Date From</label>
<NepaliDatePicker calenderType="English" classValue="datepicker" v-model="formData.meeting_date"
placeholder="YYYY/MM/DD" />
<ErrInfo :message="errObj.meeting_date" v-if="errObj.meeting_date" />
</div>
</div>
<div class="mt-16">
<h3>Decisions</h3>
<table class="table table-01 w-100 mt-4">
<thead>
<tr>
<th width="2%">S.N</th>
<th width="15%">Decision</th>
<th width="25%">Implementor Body</th>
<th width="20%">Reporting Nikaya</th>
<th width="17%">Reporting Duration</th>
<th width="18%">Subject Area</th>
<th width="3%">Action</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in formData.decisions">
<td>{{ index + 1 }}</td>
<td>
<textarea id="" cols="30" rows="10" class="form-control form-control-sm"
v-model="formData.decisions[index].decision"></textarea>
</td>
<td class="text-start">
<label for="implementing_nikaya">Implementing Nikaya</label>
{{ formData.decisions[index].implementing_nikaya }}
<Multiselect v-model="formData.decisions[index].implementing_nikaya" mode="tags"
id="implementing_nikaya" :close-on-select="false" :searchable="true" :create-option="true"
:options="options" />
<Multiselect v-model="value" mode="tags" placeholder="Select employees" track-by="name" label="name"
:close-on-select="false" :searchable="true" :options="[
{ value: 'judy', name: 'Judy', image: 'https://randomuser.me/api/portraits/med/women/1.jpg' },
{ value: 'jane', name: 'Jane', image: 'https://randomuser.me/api/portraits/med/women/2.jpg' },
{ value: 'john', name: 'John', image: 'https://randomuser.me/api/portraits/med/men/1.jpg' },
{ value: 'joe', name: 'Joe', image: 'https://randomuser.me/api/portraits/med/men/2.jpg' }
]">
<template v-slot:tag="{ option, handleTagRemove, disabled }">
<div class="multiselect-tag is-user" :class="{
'is-disabled': disabled
}">
<img :src="option.image">
{{ option.name }}
<span v-if="!disabled" class="multiselect-tag-remove"
@click="handleTagRemove(option, $event)">
<span class="multiselect-tag-remove-icon"></span>
</span>
</div>
</template>
</Multiselect>
<div class="flex-fill mt-4">
<label for="" class="form-label">कार्यन्वयन गर्ने मिति</label>
<NepaliDatePicker calenderType="English" classValue="datepicker"
v-model="formData.decisions[index].implementing_date" placeholder="YYYY/MM/DD" />
</div>
</td>
<td class="text-start">
<label for="reporting_nikaya">Reporting Nikaya</label>
{{ formData.decisions[index].reporting_nikaya }}
<Multiselect v-model="formData.decisions[index].reporting_nikaya" mode="tags" :close-on-select="false"
:searchable="true" id="reporting_nikaya" :create-option="true" :options="options" />
</td>
<td class="text-start">
<select v-model="formData.decisions[index].reporting_duration_id" class="form-select form-select-sm">
<option value="" disabled selected>
Select Reporting Duration
</option>
<option v-for="type in reportingDuration" :value="type.id" :key="type.id">
{{ type.name }}
</option>
</select>
</td>
<td class="text-start">
<select v-model="formData.decisions[index].subject_area_id" class="form-select form-select-sm">
<option value="" disabled selected>
Select Subject Area
</option>
<option v-for="type in subjectareaTypes" :value="type.id" :key="type.id">
{{ type.name }}
</option>
</select>
</td>
<td>
<button class="btn btn-primary" @click="addDecisions()">
<PhPlus />
</button>
<button class="btn btn-danger mx-2" @click="deleteDecisions()" v-if="index > 0">
<PhTrash />
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
Cancel
</button>
<button type="button" class="btn btn-primary" @click="submitForm()">
Submit
</button>
</div>
</div>
</div>
</div>
</template>
<script setup>
import NepaliDatePicker from "np-date-picker-vue-3/src/components/NepaliDatePicker.vue";
import TextInput from "@/components/UI/Forms/TextInput.vue";
// import MultiSelect from "@/components/UI/MultiSelect.vue";
import { PhTrash, PhPlus, PhInfo } from "@phosphor-icons/vue";
import {
reactive,
ref,
onMounted,
computed,
defineProps,
getCurrentInstance,
} from "vue";
import axios from "@/libs/axios";
import Multiselect from "@vueform/multiselect";
import Treeselect from "vue3-treeselect";
import "vue3-treeselect/dist/vue3-treeselect.css";
import { convertDate } from "@/constants/nikaya-members";
import { errToast } from "@/helpers/coloredtoast";
import { setErrObj, resetErrObj } from "@/helpers/Err";
import ErrInfo from "@/components/ErrInfo.vue";
const emitter = getCurrentInstance().appContext.provides.emitter;
const value = ref([
{ name: 'Javascript', code: 'js' }
]);
const testOptions = ref([
{ name: 'Vue.js', code: 'vu' },
{ name: 'Javascript', code: 'js' },
{ name: 'Open Source', code: 'os' }
]);
const defaultState = {
meeting_number: "",
meeting_date: "",
meeting_type_id: "",
meeting_presidency_id: "",
description: "",
title: "",
decisions: [
{
implementing_date: "",
decision: "",
implementing_nikaya: [],
reporting_nikaya: [],
reporting_duration_id: "",
subject_area_id: "",
},
],
};
const props = defineProps({
checkEmitEdit: {
type: String,
required: true,
},
checkEmitReset: {
type: String,
required: true,
},
});
const actionState = ref("Create");
const meetingTypes = ref([]);
const presidencyTypes = ref([]);
const reportingDuration = ref([]);
const subjectareaTypes = ref([]);
const nikayas = ref([]);
const options = ref({});
const errObj = reactive({});
const formData = reactive({ ...defaultState });
const addDecisions = () => {
formData.decisions.push({
implementing_date: "",
decision: "",
implementing_nikaya: [],
reporting_nikaya: [],
reporting_duration_id: "",
subject_area_id: "",
});
};
const deleteDecisions = (index) => {
formData.decisions.splice(index, 1);
};
const getMeetingType = async () => {
const {
data: {
response: { data },
},
} = await axios.get("api/presets/meetingtype/all", {
params: {
per_page: 10000,
},
});
meetingTypes.value = data;
console.log(meetingTypes.value);
};
const getPresidencyTypes = async () => {
const {
data: {
response: { data },
},
} = await axios.get("api/presets/presidencytype/all", {
params: {
per_page: 10000,
},
});
presidencyTypes.value = data;
console.log(presidencyTypes);
};
const getReportingDuration = async () => {
const {
data: {
response: { data },
},
} = await axios.get("api/presets/reportingduration/all", {
params: {
per_page: 10000,
},
});
reportingDuration.value = data;
console.log(reportingDuration);
};
const getSubjectAreaType = async () => {
const {
data: {
response: { data },
},
} = await axios.get("api/presets/subjectareatype/all", {
params: {
per_page: 10000,
},
});
subjectareaTypes.value = data;
console.log(subjectareaTypes);
};
const getNikayas = async () => {
const {
data: {
response: { data },
},
} = await axios.get("api/nikaya/all", {
params: {
per_page: 10000,
},
});
nikayas.value = data;
options.value = data.map((item) => {
return {
value: item.id,
label: item.name,
};
});
console.log("ioptions", options);
console.log(nikayas);
};
const submitForm = async () => {
formData.meeting_date = convertDate(formData.meeting_date);
formData.decisions.forEach((item) => {
item.implementing_date = convertDate(item.implementing_date);
});
const data = { ...formData };
try {
const response = await axios.post("api/meeting/store", data);
formData = { ...defaultState };
document.getElementById("closeModal").click();
} catch ({ response: { data } }) {
console.log(data);
errToast(data.message);
setErrObj(errObj, data.errors);
}
};
const resetFormData = () => {
for (const key in formData) {
if (formData.hasOwnProperty(key)) {
formData[key] = defaultState[key];
}
}
actionState.value = "Create";
emitter.emit(props.checkEmitReset);
};
onMounted(() => {
getMeetingType();
getPresidencyTypes();
getReportingDuration();
getSubjectAreaType();
getNikayas();
emitter.on(props.checkEmitEdit, (data) => {
actionState.value = "Edit";
for (const key in defaultState) {
if (data.hasOwnProperty(key)) {
formData[key] = data[key] == null ? "" : data[key];
}
}
formData.decisions.forEach((decision, i) => {
decision.implementing_nikaya = extractIds(
data.decisions[i].meeting_decision_imp_nikayas_relation
);
decision.reporting_nikaya = extractIds(
data.decisions[i].meeting_decision_rep_nikayas_relation
);
});
resetErrObj(errObj);
});
});
function extractIds(array) {
return array.map((item) => item.id);
return array.map((item) => {
return {
value: item.id,
label: item.name,
};
})
return array;
}
</script>
<style src="@vueform/multiselect/themes/default.css"></style>
<style>
.multiselect {
min-height: 32px;
}
.multiselect-wrapper {
min-height: 32px;
}
.multiselect-tags-search-wrapper {
margin: 0;
}
.multiselect-tag {
margin: 2px;
background-color: #e3f2fd;
font-size: 12px;
}
.multiselect-tag>span {
margin: 0;
color: #0d47a1;
padding: 4px;
font-size: 12px;
line-height: 100%;
}
.multiselect-tags {
margin: 0;
}
/* .multiselect-dropdown {
width: fit-content;
} */
</style>
|
Notes.io is a web-based application for taking notes. You can take your notes and share with others people. If you like taking long notes, notes.io is designed for you. To date, over 8,000,000,000 notes created and continuing...
With notes.io;
- * You can take a note from anywhere and any device with internet connection.
- * You can share the notes in social platforms (YouTube, Facebook, Twitter, instagram etc.).
- * You can quickly share your contents without website, blog and e-mail.
- * You don't need to create any Account to share a note. As you wish you can use quick, easy and best shortened notes with sms, websites, e-mail, or messaging services (WhatsApp, iMessage, Telegram, Signal).
- * Notes.io has fabulous infrastructure design for a short link and allows you to share the note as an easy and understandable link.
Fast: Notes.io is built for speed and performance. You can take a notes quickly and browse your archive.
Easy: Notes.io doesn’t require installation. Just write and share note!
Short: Notes.io’s url just 8 character. You’ll get shorten link of your note when you want to share. (Ex: notes.io/q )
Free: Notes.io works for 12 years and has been free since the day it was started.
You immediately create your first note and start sharing with the ones you wish. If you want to contact us, you can use the following communication channels;
Email: [email protected]
Twitter: http://twitter.com/notesio
Instagram: http://instagram.com/notes.io
Facebook: http://facebook.com/notesio
Regards;
Notes.io Team