cssd-doc/cssd-front
1
0
Fork 0
mirror of https://git.meshkee.com/cssd/cssd-front.git synced 2026-10-14 00:43:17 +03:30
Code Issues Packages Projects Releases Wiki Activity

fix duplicate by enter

Browse Source
This commit is contained in:
sajjad_talkhabi
2023-10-24 21:53:40 +03:30
parent 98aa208766
commit a5786f91d1
1 changed files with 222 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/Package/AddEdit.vue
+222 -157
View File
@@ -1,14 +1,20 @@
<template> <template>
<v-form ref="form"> <v-form ref="form">
<v-container grid-list-xs fluid> <v-container grid-list-xs fluid>
<material-card color="black" title="Add Package"> <material-card color="black" title="Add Package">
<v-layout wrap class="px-5 my-3"> <v-layout wrap class="px-5 my-3">
<v-flex xs12 md3 sm3 class="WM-FlexCenter"> <v-flex xs12 md3 sm3 class="WM-FlexCenter">
<v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon> <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
<v-text-field name="name" label="Name" color="black" v-model="formData.name" <v-text-field
:rules="[rules.required, rules.counter]" class="py-3 pr-3"></v-text-field> name="name"
</v-flex> label="Name"
<!-- <v-flex xs12 md3 sm3 class="WM-FlexCenter"> color="black"
v-model="formData.name"
:rules="[rules.required, rules.counter]"
class="py-3 pr-3"
></v-text-field>
</v-flex>
<!-- <v-flex xs12 md3 sm3 class="WM-FlexCenter">
<v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon> <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
<v-text-field <v-text-field
name="unique_id" name="unique_id"
@@ -19,70 +25,128 @@
class="py-3 pr-3" class="py-3 pr-3"
></v-text-field> ></v-text-field>
</v-flex> --> </v-flex> -->
<v-flex xs12 md12 sm12></v-flex> <v-flex xs12 md12 sm12></v-flex>
<!-- <v-row style="position: relative" v-for="(item, key) in formData.items" :key="key"> --> <!-- <v-row style="position: relative" v-for="(item, key) in formData.items" :key="key"> -->
<v-flex xs12 md3 sm3 class="WM-FlexCenter WM-DuplicateInput" style="position: relative" <v-flex
v-for="(item, key) in formData.items" :key="key"> xs12
<div class="Inner"> md3
<v-icon class="fas fa-check mr-2 WM-Margin-B-8"></v-icon> sm3
<v-autocomplete class="py-3 pr-3" :items="items" item-text="name" v-model="item.id" class="WM-FlexCenter WM-DuplicateInput"
item-value="id" label="Select Items For Package" color="black" :filter="customFilter"> style="position: relative"
<template v-slot:selection="{ item }"> v-for="(item, key) in formData.items"
{{ item.name }} - {{ item.udi }} :key="key"
</template> >
<div class="Inner">
<v-icon class="fas fa-check mr-2 WM-Margin-B-8"></v-icon>
<v-autocomplete
@keydown.enter.native.prevent="duplicateForm(key)"
:ref="`selectItem-${key}`"
class="py-3 pr-3"
:items="items"
item-text="name"
v-model="item.id"
item-value="id"
label="Select Items For Package"
color="black"
:filter="customFilter"
>
<template v-slot:selection="{ item }">
{{ item.name }} - {{ item.udi }}
</template>
<template v-slot:item="{ item }"> <template v-slot:item="{ item }">
{{ item.name }} - {{ item.udi }} {{ item.name }} - {{ item.udi }}
</template> </template>
</v-autocomplete> </v-autocomplete>
<v-btn absolute small right bottom color="cyan" @click="duplicateForm(key)"> <v-btn
<v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>ADD absolute
</v-btn> small
<v-btn v-if="key > 0" absolute small right top color="pink" @click="removeForm(key)"> right
<v-icon class="white--text mr-2 caption">fas fa-remove</v-icon>REMOVE bottom
</v-btn> color="cyan"
</div> @click="duplicateForm(key)"
</v-flex> >
<v-flex xs3 class="WM-FlexCenter"> <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>ADD
<v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon> </v-btn>
<v-text-field name="UDI" label="UDI" color="black" v-model="formData.udi" :rules="[rules.required]" <v-btn
class="py-3"></v-text-field> v-if="key > 0"
</v-flex> absolute
<!-- </v-row> --> small
<v-spacer></v-spacer> right
<v-flex xs12> top
<hr class="v-divider theme--light" style="margin-top:30px !important"> color="pink"
</v-flex> @click="removeForm(key)"
</v-layout> >
<v-layout align-center justify-center wrap class="px-5 mb-3"> <v-icon class="white--text mr-2 caption">fas fa-remove</v-icon
<v-flex xs12 sm12 md12> >REMOVE
<v-textarea color="black" v-model="formData.note" class="pa-2" name="address"> </v-btn>
<template v-slot:label> </div>
<div>description</div> </v-flex>
</template> <v-flex xs3 class="WM-FlexCenter">
</v-textarea> <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
</v-flex> <v-text-field
</v-layout> name="UDI"
<v-layout row wrap justify-center align-center> label="UDI"
<v-flex xs12 md2 sm2 class="text-md-center text-xs-center"> color="black"
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="submitForm()"> v-model="formData.udi"
<v-icon class="white--text mr-2 caption">fas fa-check</v-icon> :rules="[rules.required]"
<span class="white--text">SAVE</span> class="py-3"
</v-btn> ></v-text-field>
</v-flex> </v-flex>
<v-flex xs12 md2 sm2 class="text-md-center text-sm-center text-xs-center"> <!-- </v-row> -->
<router-link :to="{ name: 'AllPackage' }"> <v-spacer></v-spacer>
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black"> <v-flex xs12>
<v-icon class="black--text">keyboard_arrow_left</v-icon> <hr
<span class="black--text">Back</span> class="v-divider theme--light"
</v-btn> style="margin-top: 30px !important"
</router-link> />
</v-flex> </v-flex>
</v-layout> </v-layout>
</material-card> <v-layout align-center justify-center wrap class="px-5 mb-3">
</v-container> <v-flex xs12 sm12 md12>
</v-form> <v-textarea
color="black"
v-model="formData.note"
class="pa-2"
name="address"
>
<template v-slot:label>
<div>description</div>
</template>
</v-textarea>
</v-flex>
</v-layout>
<v-layout row wrap justify-center align-center>
<v-flex xs12 md2 sm2 class="text-md-center text-xs-center">
<v-btn
class="WM-CyanBlueGradient-BG"
style="padding: 10px 60px"
@click="submitForm()"
>
<v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
<span class="white--text">SAVE</span>
</v-btn>
</v-flex>
<v-flex
xs12
md2
sm2
class="text-md-center text-sm-center text-xs-center"
>
<router-link :to="{ name: 'AllPackage' }">
<v-btn
class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black"
>
<v-icon class="black--text">keyboard_arrow_left</v-icon>
<span class="black--text">Back</span>
</v-btn>
</router-link>
</v-flex>
</v-layout>
</material-card>
</v-container>
</v-form>
</template> </template>
<script> <script>
@@ -90,99 +154,100 @@ import { ApiService } from "@/services";
import { urls } from "@/config/urls"; import { urls } from "@/config/urls";
import { mapMutations } from "vuex"; import { mapMutations } from "vuex";
export default { export default {
data() { data() {
return { return {
formData: { formData: {
name: "", name: "",
result: "", result: "",
note: "", note: "",
items: [ items: [
{ {
name: '' name: "",
} },
] ],
}, },
items: [], items: [],
result: ["Pass", "Fail"], result: ["Pass", "Fail"],
rules: { rules: {
required: value => !!value || "Required.", required: (value) => !!value || "Required.",
counter: value => counter: (value) =>
!value || !value ||
value.length == 0 || value.length == 0 ||
value.length >= 5 || value.length >= 5 ||
"Min 5 characters" "Min 5 characters",
} },
}; };
}, },
created() { created() {
if (this.$route.params.package) { if (this.$route.params.package) {
this.load(this.$route.params.package); this.load(this.$route.params.package);
} }
this.loadItems(); this.loadItems();
}, },
methods: { methods: {
customFilter(item, queryText) { customFilter(item, queryText) {
const name = item.name.toLowerCase(); const name = item.name.toLowerCase();
const udi = item.udi ? item.udi.toLowerCase() : null; const udi = item.udi ? item.udi.toLowerCase() : null;
const searchText = queryText.toLowerCase(); const searchText = queryText.toLowerCase();
if (udi) { if (udi) {
return name.indexOf(searchText) > -1 || return name.indexOf(searchText) > -1 || udi.indexOf(searchText) > -1;
udi.indexOf(searchText) > -1 }
} return name.indexOf(searchText) > -1;
return name.indexOf(searchText) > -1 },
}, async load(id) {
async load(id) { const result = await ApiService.get(urls.editPackage(id));
const result = await ApiService.get(urls.editPackage(id)); if (result.status == 200) {
if (result.status == 200) { this.formData = result.data.data;
this.formData = result.data.data; }
} },
}, async loadItems() {
async loadItems() { const result = await ApiService.get(urls.listAllItem());
const result = await ApiService.get(urls.listAllItem()); if (result.status == 200) {
if (result.status == 200) { this.items = result.data.data;
this.items = result.data.data; }
} // this.items = [
}, // { name: "test", udi: "23" },
async submitForm() { // { name: "saj", udi: "43" },
let result; // ];
if (this.$route.params.package) { },
result = await ApiService.put( async submitForm() {
urls.updatePackage(this.$route.params.package), let result;
this.formData if (this.$route.params.package) {
); result = await ApiService.put(
} else { urls.updatePackage(this.$route.params.package),
result = await ApiService.post( this.formData
urls.storePackage, );
this.formData } else {
); result = await ApiService.post(urls.storePackage, this.formData);
} }
if (result && result.status == 200) { if (result && result.status == 200) {
this.$router.push({ name: "AllPackage" }); this.$router.push({ name: "AllPackage" });
} }
}, },
duplicateForm(infoIndex) { duplicateForm(infoIndex) {
this.formData.items.push({ this.formData.items.push({
name: "", name: "",
}); });
console.log(this.$refs[`selectItem-1`], infoIndex);
}, this.$refs[`selectItem-${infoIndex}`][0].focus();
removeForm(infoIndex) { },
this.formData.items.splice(infoIndex, 1); removeForm(infoIndex) {
}, this.formData.items.splice(infoIndex, 1);
} },
},
}; };
</script> </script>
<style media="screen"> <style media="screen">
.WM-DuplicateInput { .WM-DuplicateInput {
margin: 15px 0; margin: 15px 0;
} }
.WM-DuplicateInput .Inner { .WM-DuplicateInput .Inner {
padding: 15px 20px !important; padding: 15px 20px !important;
margin: 0 10px 0 0; margin: 0 10px 0 0;
width: 100%; width: 100%;
border: 1px solid rgba(0, 0, 0, .2); border: 1px solid rgba(0, 0, 0, 0.2);
} }
</style> </style>