mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange-2.0.git
synced 2026-08-19 04:23:55 +00:00
FE - add announcement setting component.
This commit is contained in:
weichien
@@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<div class="row m-b-15 parentContainer">
|
||||
<div class="col">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto p-r-0">
|
||||
<div class="padding-5 bg-master-lightest">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="35" height="35" viewBox="0 0 172 172" style=" fill:#000000;"><defs><linearGradient x1="99.4375" y1="43.33594" x2="99.4375" y2="60.14625" gradientUnits="userSpaceOnUse" id="color-1_43971_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="106.15625" y1="26.875" x2="106.15625" y2="146.16775" gradientUnits="userSpaceOnUse" id="color-2_43971_gr2"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="83.3125" y1="26.875" x2="83.3125" y2="146.16775" gradientUnits="userSpaceOnUse" id="color-3_43971_gr3"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="73.90625" y1="26.875" x2="73.90625" y2="146.16775" gradientUnits="userSpaceOnUse" id="color-4_43971_gr4"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="51.0625" y1="26.875" x2="51.0625" y2="146.16775" gradientUnits="userSpaceOnUse" id="color-5_43971_gr5"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="51.0625" y1="26.875" x2="51.0625" y2="146.16775" gradientUnits="userSpaceOnUse" id="color-6_43971_gr6"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="45.6875" y1="26.875" x2="45.6875" y2="146.16775" gradientUnits="userSpaceOnUse" id="color-7_43971_gr7"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="43" y1="26.875" x2="43" y2="146.16775" gradientUnits="userSpaceOnUse" id="color-8_43971_gr8"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient></defs><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g><path d="M112.875,59.125h-26.875c-1.4835,0 -2.6875,-1.204 -2.6875,-2.6875v-10.75c0,-1.4835 1.204,-2.6875 2.6875,-2.6875h26.875c1.4835,0 2.6875,1.204 2.6875,2.6875v10.75c0,1.4835 -1.204,2.6875 -2.6875,2.6875z" fill="url(#color-1_43971_gr1)"></path><path d="M155.875,96.75c0,-7.97381 -5.82381,-14.59581 -13.4375,-15.88313v-18.82325c0,-2.08819 -1.16906,-3.94525 -3.05031,-4.85094c-1.88125,-0.90031 -4.06081,-0.65575 -5.69481,0.64769l-21.48925,17.18925c-0.08062,0.0645 -0.13975,0.14781 -0.21769,0.21769h-31.36044c-7.40944,0 -13.4375,6.02806 -13.4375,13.4375h-5.375c-2.96431,0 -5.375,2.41069 -5.375,5.375v5.375c0,2.96431 2.41069,5.375 5.375,5.375h5.375c0,7.40944 6.02806,13.4375 13.4375,13.4375v16.125c0,5.92863 4.82138,10.75 10.75,10.75c5.92863,0 10.75,-4.82137 10.75,-10.75v-16.125h9.86044c0.07794,0.06988 0.13706,0.15319 0.22038,0.22037l21.48656,17.18925c0.98094,0.78475 2.16075,1.18519 3.35131,1.18519c0.79281,0 1.59369,-0.17738 2.3435,-0.5375c1.88125,-0.903 3.05031,-2.76275 3.05031,-4.84825v-18.82325c7.61369,-1.28731 13.4375,-7.90931 13.4375,-15.88312zM61.8125,99.4375v-5.375h5.375v5.375zM96.75,134.375c0,2.96431 -2.41069,5.375 -5.375,5.375c-2.96431,0 -5.375,-2.41069 -5.375,-5.375v-16.125h10.75zM80.625,112.875c-4.44513,0 -8.0625,-3.61738 -8.0625,-8.0625v-16.125c0,-4.44513 3.61737,-8.0625 8.0625,-8.0625h29.5625v32.25h-8.0625zM137.05175,131.46175l-21.48925,-17.19462v-35.04231l10.75,-8.59194v26.11713h5.375v-30.41175l5.375,-4.29462l0.00538,69.42887c0,0 -0.00538,-0.00269 -0.01613,-0.01075zM142.4375,107.11837v-20.73675c4.6225,1.20131 8.0625,5.375 8.0625,10.36838c0,4.99337 -3.44,9.16706 -8.0625,10.36838z" fill="url(#color-2_43971_gr2)"></path><path d="M77.9375,91.375v5.375h5.375v-5.375h5.375v-5.375h-5.375c-2.96431,0 -5.375,2.41069 -5.375,5.375z" fill="url(#color-3_43971_gr3)"></path><path d="M21.5,107.5v-67.1875c0,-4.44512 3.61737,-8.0625 8.0625,-8.0625h88.6875c4.44512,0 8.0625,3.61738 8.0625,8.0625v10.75h5.375v-10.75c0,-7.40944 -6.02806,-13.4375 -13.4375,-13.4375h-88.6875c-7.40944,0 -13.4375,6.02806 -13.4375,13.4375v67.1875c0,7.40944 6.02806,13.4375 13.4375,13.4375h32.25v-5.375h-32.25c-4.44513,0 -8.0625,-3.61737 -8.0625,-8.0625z" fill="url(#color-4_43971_gr4)"></path><path d="M32.25,43h37.625v5.375h-37.625z" fill="url(#color-5_43971_gr5)"></path><path d="M32.25,53.75h37.625v5.375h-37.625z" fill="url(#color-6_43971_gr6)"></path><path d="M32.25,64.5h26.875v5.375h-26.875z" fill="url(#color-7_43971_gr7)"></path><path d="M32.25,75.25h21.5v5.375h-21.5z" fill="url(#color-8_43971_gr8)"></path></g></g></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="row">
|
||||
<div class="col-auto p-r-10">
|
||||
<div class="font-heading all-caps fs-8 muted">Title</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="font-heading all-caps fs-10">{{item.title}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col-auto p-r-10">
|
||||
<div class="font-heading all-caps fs-8 muted">Message</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="font-heading all-caps fs-10">{{item.description}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto parentContainer">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto no-padding m-r-5">
|
||||
<button class="btn btn-xs btn-outline-danger b-rad-none m-r-5 requestModal" data-type="deleteAnnouncement">
|
||||
<i class="fa fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-auto no-padding">
|
||||
<button class="btn btn-xs btn-complete b-rad-none m-r-5 requestModal" data-type="editModal">
|
||||
Edit
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-auto no-padding">
|
||||
<button class="btn btn-xs btn-complete b-rad-none m-r-5 requestModal" data-type="viewAnnouncement">
|
||||
View
|
||||
</button>
|
||||
</div>
|
||||
<button class="btn btn-xs btn-default bg-master-lighter p-l-10 p-r-10 b-rad-none" @click="expanded = !expanded">
|
||||
<i class="fa" :class="[{'fa-angle-up': expanded}, {'fa-angle-down': !expanded}]"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="deleteAnnouncement">
|
||||
<delete-announcement-form-component :data="item" :section="section" class="text-center"></delete-announcement-form-component>
|
||||
</modal-component>
|
||||
|
||||
<modal-form-component :data="data" size="large" section="announcementListSection">
|
||||
<template slot="form" slot-scope="{section}">
|
||||
<announcement-form-component :data="data" :section="section"></announcement-form-component>
|
||||
</template>
|
||||
</modal-form-component>
|
||||
|
||||
<modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" section="announcementListSection" type="viewAnnouncement">
|
||||
<view-announcement-form-component :data="item" :section="section" class="text-center"></view-announcement-form-component>
|
||||
</modal-component>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" v-if="expanded">
|
||||
<div class="col-1"></div>
|
||||
<div class="col p-l-10 p-t-10 p-b-10">
|
||||
<div class="row m-b-20">
|
||||
<div class="col">
|
||||
<div class="row m-b-20">
|
||||
<div class="col">
|
||||
<div class="row align-items-center parentContainer">
|
||||
<div class="col-auto m-r-50">
|
||||
<div class="row m-b-5">
|
||||
<div class="col">
|
||||
<div class="font-heading fs-9 all-caps muted">Assigned Segment</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import componentHandler from '../../../general/mixins/componentHandler';
|
||||
export default {
|
||||
props: {
|
||||
section: {
|
||||
default: 'announcementsSection'
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
expanded: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
mixins: [componentHandler]
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,33 @@
|
||||
<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 justify-content-center bg-white" v-show="!isLoading">
|
||||
<div class="col">
|
||||
<div class="row m-b-20">
|
||||
<div class="col">
|
||||
<h3 class="all-caps">{{item.title}}</h3>
|
||||
<div class="fs-20"><b>{{item.description}}</b></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-3 p-r-5">
|
||||
<div class="btn btn-sm btn-success btn-block b-rad-none" data-dismiss="modal">OK</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.delete', item.id), 'delete', section, true, true)">Delete</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import componentHandler from '../../../general/mixins/componentHandler';
|
||||
import ModalFormHandler from '../../../general/mixins/modalFormHandler';
|
||||
export default {
|
||||
mixins: [componentHandler, ModalFormHandler]
|
||||
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,153 @@
|
||||
<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-20">
|
||||
<div class="col">
|
||||
<h6 class="all-caps m-b-5 bold no-margin">{{this.data?"Update":"Add"}} Announcement</h6>
|
||||
</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-10">
|
||||
<div class="col">
|
||||
<validation-wrapper-component :validator="$v.parameters.title">
|
||||
<label class="muted">Annouchement Title</label>
|
||||
<input type="text" class="form-control" v-model="parameters.title">
|
||||
</validation-wrapper-component>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row m-b-10">
|
||||
<div class="col">
|
||||
<validation-wrapper-component :validator="$v.parameters.description">
|
||||
<label class="muted">announcement Message.</label>
|
||||
<textarea class="form-control" v-model="parameters.description" rows="20"></textarea>
|
||||
</validation-wrapper-component>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="row m-b-20">
|
||||
<div class="col-5">
|
||||
<validation-wrapper-component selecatable :validator="$v.parameters.segment_id">
|
||||
<label class="muted">Segment</label>
|
||||
<selectable-component :endpoint="route('api.segment.list')" :options="{'type': 2}" section="segmentsListSection" valueColumn="id" :labelColumn="['name']" v-model="parameters.segment_id"></selectable-component>
|
||||
</validation-wrapper-component>
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<announcement-assign-to-segment-form-component :data="data" section="announcementEditSection"></announcement-assign-to-segment-form-component>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row m-b-20">
|
||||
<div class="col-auto no-padding m-r-10 m-b-5 m-t-5" v-for="segment in parameters.segments" v-bind:key="segment.id" v-if="segment.id !== 1">
|
||||
<div class="font-heading fs-10 lh-20 p-l-10 p-r-10 bg-master-lightest btn-rounded">
|
||||
{{segment.name}}
|
||||
<i class="fa fa-times muted m-l-10 pointer requestModal" data-type="announcementDetachSegment" ></i>
|
||||
</div>
|
||||
|
||||
<modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="announcementDetachSegment">
|
||||
<announcement-detach-segment-form-component :data="segment" :announcement_id="parameters.id" section="announcementEditSection"></announcement-detach-segment-form-component>
|
||||
</modal-component>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
|
||||
<div class="row m-b-20">
|
||||
<div class="col-6">
|
||||
<validation-wrapper-component :validator="$v.parameters.starting_on">
|
||||
<label class="muted">Start Date</label>
|
||||
<input type="date" v-model="parameters.starting_on">
|
||||
</validation-wrapper-component>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<validation-wrapper-component :validator="$v.parameters.ending_on">
|
||||
<label class="muted">End Date</label>
|
||||
<input type="date" v-model="parameters.ending_on">
|
||||
</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="closable ? 'modal' : ''" @click="$emit('close')">Cancel</div>
|
||||
</div>
|
||||
<div class="col p-l-5">
|
||||
<div class="btn btn-sm btn-success btn-block b-rad-none" @click="submitForm()">{{this.data?"Update":"Create"}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import ModalFormHandler from '../../../general/mixins/modalFormHandler';
|
||||
import { required, requiredIf } from "vuelidate/lib/validators";
|
||||
export default {
|
||||
props : {
|
||||
closable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
country_id: {
|
||||
type: Number,
|
||||
default: 1
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
parameters: {
|
||||
starting_on:'',
|
||||
ending_on:'',
|
||||
// segment_id: '',
|
||||
title: '',
|
||||
description: '',
|
||||
}
|
||||
}
|
||||
},
|
||||
validations: {
|
||||
parameters: {
|
||||
title: {
|
||||
required
|
||||
},
|
||||
description: {
|
||||
required
|
||||
},
|
||||
// segment_id: {
|
||||
// required
|
||||
// },
|
||||
starting_on:{
|
||||
required
|
||||
},
|
||||
ending_on:{
|
||||
required
|
||||
},
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
|
||||
},
|
||||
created(){
|
||||
console.log("lado form");
|
||||
},
|
||||
methods: {
|
||||
submitForm(){
|
||||
//this.submit(route('api.announcement.create'), 'post', this.section, true, false);
|
||||
this.submit((this.data ? this.route('api.announcement.update', this.data.id) : this.route('api.announcement.create')), (this.data ? 'put' : 'post'), this.section, true, false)
|
||||
},
|
||||
// successHandler(response){
|
||||
// this.closeModal();
|
||||
// //this.formHandler();
|
||||
// this.resetForm();
|
||||
// },
|
||||
// errorHandler(error){
|
||||
// this.formHandler(error.message);
|
||||
// }
|
||||
},
|
||||
mixins: [ModalFormHandler],
|
||||
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,33 @@
|
||||
<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 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 delete <b>{{item.title}}</b> announcement?</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.delete', item.id), 'delete', section, true, true)">Delete</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import componentHandler from '../../../general/mixins/componentHandler';
|
||||
import ModalFormHandler from '../../../general/mixins/modalFormHandler';
|
||||
export default {
|
||||
mixins: [componentHandler, ModalFormHandler]
|
||||
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user