cief/exchange-2.0
1
0
Fork 0
mirror of https://gitlab.com/CIEFWorldwideSdnBhd/exchange-2.0.git synced 2026-08-19 12:33:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

update: FE vue announcementlist component. added compoment for attach and detach segment to announcement.

Browse Source
This commit is contained in:
weichien
2021-06-08 15:52:24 +08:00
parent d82f198199
commit a2cd744bb1
4 changed files with 167 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/assets/vue/components/announcements/elements/AnnouncementListComponent.vue
+40 -29
View File
File diff suppressed because one or more lines are too long
resources/assets/vue/components/announcements/forms/AssignAnnouncementToSegmentFormComponent.vue
+67
View File
@@ -0,0 +1,67 @@
<template>
<div class="row">
<div class="col">
<loading-component style="height: 50px; top: 0;" key="1" color="success" v-show="$store.getters.isLoading(section)"></loading-component>
<div class="row" v-show="!$store.getters.isLoading(section)">
<div class="col">
<div class="row m-b-10">
<div class="col">
<h3 class="all-caps m-b-5 bold no-margin">Assign Segment</h3>
<div class="fs-11">Select a segment to view annoucment with title <span class="bold">{{parameters.title | truncate(10) }}</span></div>
</div>
</div>
<div class="row m-b-5 animate__animated animate__fadeInUpBig animate__fast" v-if="error">
<div class="col">
<small class="bold fs-10 text-danger">{{error}}</small>
</div>
</div>
<div class="row m-b-15">
<div class="col">
<validation-wrapper-component selecatable :validator="$v.parameters.segment_id">
<label class="muted">Segment</label>
<selectable-component :endpoint="route('api.segment.list') + '?filters=' + JSON.stringify({'id_not_in': currentSegmentIds})" :section="'segmentsListSection_'+data.id" valueColumn="id" :labelColumn="['name']" v-model="parameters.segment_id"></selectable-component>
</validation-wrapper-component>
</div>
</div>
<div class="row">
<div class="col p-r-5">
<div class="btn btn-sm btn-default bg-master-lightest btn-block b-rad-none" data-dismiss="modal">Not Now</div>
</div>
<div class="col p-l-5">
<div class="btn btn-sm btn-success btn-block b-rad-none" @click="submit(route('api.announcement.segment.assign', data.id), 'post', section, true, false)">Assign Segment</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import ModalFormHandler from '../../../general/mixins/modalFormHandler';
import { required } from "vuelidate/lib/validators";
export default {
data(){
return {
parameters: {
segment_id: ''
}
}
},
validations: {
parameters: {
segment_id: {
required
}
}
},
computed: {
currentSegmentIds(){
return this.parameters.segments.map(function (value){
return value.id;
})
}
},
mixins: [ModalFormHandler]
}
</script>
resources/assets/vue/components/announcements/forms/DetachAnnouncementFromSegmentFormComponent.vue
+51
View File
@@ -0,0 +1,51 @@
<template>
<div class="row">
<div class="col">
<loading-component style="height: 300px; top: 0;" key="1" color="success" v-show="isLoading" ></loading-component>
<div class="row m-b-5 animate__animated animate__fadeInUpBig animate__fast" v-if="error">
<div class="col">
<small class="bold fs-10 text-danger">{{error}}</small>
</div>
</div>
<div class="row justify-content-center" v-show="!isLoading">
<div class="col">
<div class="row m-b-20">
<div class="col">
<h3 class="all-caps">Are you Sure?</h3>
<div class="fs-11">Are you sure you want to remove <span class="bold">{{this.item.name}}</span>from viewing this annoucment with title <span class="bold">{{ announcement_title | truncate(10)}}</span></div>
</div>
</div>
<div class="row">
<div class="col p-r-5">
<div class="btn btn-sm btn-success btn-block b-rad-none" data-dismiss="modal">Cancel</div>
</div>
<div class="col p-l-5">
<div class="btn btn-sm btn-danger btn-block b-rad-none" @click="submit(route('api.announcement.segment.detach', announcement_id, item.id), 'delete', section, true, true)">Remove Segment</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import componentHandler from '../../../general/mixins/componentHandler';
import ModalFormHandler from '../../../general/mixins/modalFormHandler';
export default {
props: {
announcement_id: {
required: true,
type: Number
},
announcement_title: {
required: true,
type: String
}
},
created() {
console.log("created detach");
},
mixins: [componentHandler, ModalFormHandler]
}
</script>
resources/assets/vue/components/companies/forms/AssignSegmentFormComponent.vue
+9 -1
View File
@@ -19,7 +19,7 @@
<div class="col">
<validation-wrapper-component selecatable :validator="$v.parameters.segment_id">
<label class="muted">Segment</label>
<selectable-component :endpoint="route('api.segment.list') + '?filters=' + JSON.stringify({'id_not_in': currentSegmentIds})" section="segmentsListSection" valueColumn="id" :labelColumn="['name']" v-model="parameters.segment_id"></selectable-component>
<selectable-component :endpoint="route('api.segment.list') + '?filters=' + JSON.stringify({'id_not_in': currentSegmentIds})" :section="multiple?'segmentsListSection_'+data.id:'segmentsListSection'" valueColumn="id" :labelColumn="['name']" v-model="parameters.segment_id"></selectable-component>
</validation-wrapper-component>
</div>
</div>
@@ -40,6 +40,12 @@
import ModalFormHandler from '../../../general/mixins/modalFormHandler';
import { required } from "vuelidate/lib/validators";
export default {
props: {
multiple: {
default: false,
type: Boolean
}
},
data(){
return {
parameters: {
@@ -56,6 +62,8 @@
},
computed: {
currentSegmentIds(){
console.log("compute");
console.log(this.parameters.segments);
return this.parameters.segments.map(function (value){
return value.id;
})