exchange-2.0/resources/assets/vue/components/settings/elements/SegmentServiceComponent.vue

<template>
    <div class="row align-items-center m-b-15 parentContainer m-r-0">
        <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="30" height="30"
                     viewBox="0 0 172 172"
                     style=" fill:#000000;"><defs><linearGradient x1="29.5625" y1="81.51994" x2="29.5625" y2="137.9655" gradientUnits="userSpaceOnUse" id="color-1_SZIOLhqepltk_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="112.875" y1="22.70131" x2="112.875" y2="156.84519" gradientUnits="userSpaceOnUse" id="color-2_SZIOLhqepltk_gr2"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="86" y1="22.70131" x2="86" y2="156.84519" gradientUnits="userSpaceOnUse" id="color-3_SZIOLhqepltk_gr3"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="112.875" y1="22.70131" x2="112.875" y2="156.84519" gradientUnits="userSpaceOnUse" id="color-4_SZIOLhqepltk_gr4"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="51.00606" y1="15.45313" x2="51.00606" y2="61.15944" gradientUnits="userSpaceOnUse" id="color-5_SZIOLhqepltk_gr5"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></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><rect x="8" y="31" transform="scale(2.6875,2.6875)" width="6" height="19" fill="url(#color-1_SZIOLhqepltk_gr1)"></rect><path d="M112.875,75.25c8.89294,0 16.125,-7.23206 16.125,-16.125c0,-8.89294 -7.23206,-16.125 -16.125,-16.125c-8.89294,0 -16.125,7.23206 -16.125,16.125c0,8.89294 7.23206,16.125 16.125,16.125zM112.875,48.375c5.92863,0 10.75,4.82138 10.75,10.75c0,5.92862 -4.82137,10.75 -10.75,10.75c-5.92863,0 -10.75,-4.82138 -10.75,-10.75c0,-5.92862 4.82137,-10.75 10.75,-10.75z" fill="url(#color-2_SZIOLhqepltk_gr2)"></path><path d="M151.64756,104.31531c-2.51819,-1.86244 -5.88025,-2.40531 -9.23156,-1.47812l-41.08919,11.36006c0.50525,-1.247 0.79819,-2.60419 0.79819,-4.03394c0,-5.91519 -4.82137,-10.72581 -10.75,-10.72581h-25.20069c-1.78988,-2.6875 -6.34788,-10.75 -12.42431,-10.75h-10.75v-2.6875c0,-4.44513 -3.61738,-8.0625 -8.0625,-8.0625h-10.75c-4.44513,0 -8.0625,3.61737 -8.0625,8.0625v45.6875c0,4.44512 3.61737,8.0625 8.0625,8.0625h10.75c4.44512,0 8.0625,-3.61469 8.0625,-8.0625v-2.021l32.62356,22.04288c4.09575,2.7735 8.86338,4.16563 13.63906,4.16563c4.41287,0 8.83381,-1.18787 12.74412,-3.57706l48.83994,-29.83394c3.10138,-1.88931 5.02831,-5.32394 5.02831,-8.95744v-0.84119c0,-3.30831 -1.53994,-6.35056 -4.22744,-8.35006zM37.625,131.6875c0,1.4835 -1.20669,2.6875 -2.6875,2.6875h-2.6875v-10.75h-5.375v10.75h-2.6875c-1.48081,0 -2.6875,-1.204 -2.6875,-2.6875v-45.6875c0,-1.4835 1.20669,-2.6875 2.6875,-2.6875h10.75c1.48081,0 2.6875,1.20669 2.6875,2.6875zM150.5,113.50656c0,1.77375 -0.94063,3.44806 -2.45369,4.37256l-48.83994,29.83125c-6.35594,3.87806 -14.42919,3.70338 -20.57013,-0.45419l-35.63625,-24.07463v-29.11906h10.75c2.84606,0 6.63544,5.46637 8.299,9.16169l0.71487,1.58831h28.61113c2.96431,0 5.375,2.39994 5.375,5.34813c0,2.97775 -2.41069,5.40187 -5.375,5.40187h-26.875v5.375h26.875h5.375l47.09575,-12.91881c1.72269,-0.47837 3.44,-0.24994 4.59562,0.61544c1.30881,0.97019 2.05863,2.44025 2.05863,4.03125z" fill="url(#color-3_SZIOLhqepltk_gr3)"></path><path d="M86,69.875h0.9245l-0.65306,0.65306c-2.03175,2.02906 -3.14975,4.72731 -3.14975,7.60025c0,2.87025 1.118,5.5685 3.14975,7.60025c2.03175,2.03175 4.73,3.14975 7.60025,3.14975c2.87294,0 5.57119,-1.118 7.60025,-3.14975l0.65306,-0.65306v0.9245c0,5.92863 4.82137,10.75 10.75,10.75c5.92863,0 10.75,-4.82137 10.75,-10.75v-0.9245l0.65306,0.65306c2.02906,2.03175 4.72731,3.14975 7.60025,3.14975c2.87025,0 5.5685,-1.118 7.60025,-3.14975c2.03175,-2.03175 3.14975,-4.73 3.14975,-7.60025c0,-2.87294 -1.118,-5.57119 -3.14975,-7.60025l-0.65306,-0.65306h0.9245c5.92863,0 10.75,-4.82138 10.75,-10.75c0,-5.92862 -4.82137,-10.75 -10.75,-10.75h-0.9245l0.65306,-0.65306c2.03175,-2.02906 3.14975,-4.72731 3.14975,-7.60025c0,-2.87025 -1.118,-5.5685 -3.14975,-7.60025c-4.06619,-4.06619 -11.14506,-4.06081 -15.2005,0l-0.65306,0.65306v-0.9245c0,-5.92862 -4.82137,-10.75 -10.75,-10.75c-5.92863,0 -10.75,4.82138 -10.75,10.75v0.9245l-0.65306,-0.65306c-4.05544,-4.06081 -11.13969,-4.06619 -15.2005,0c-2.03175,2.03175 -3.14975,4.73 -3.14975,7.60025c0,2.87294 1.118,5.57119 3.14975,7.60025l0.65306,0.65306h-0.9245c-5.92862,0 -10.75,4.82138 -10.75,10.75c0,5.92862 4.82138,10.75 10.75,10.75zM97.67181,81.92844c-2.03175,2.03175 -5.5685,2.03175 -7.60025,0c-1.01587,-1.01588 -1.57487,-2.365 -1.57487,-3.80013c0,-1.43512 0.559,-2.78425 1.57487,-3.80013l0.40581,-0.40581c1.99412,3.02613 4.57412,5.60613 7.60025,7.60025zM135.67844,81.92844c-2.03175,2.03175 -5.5685,2.03175 -7.60025,0l-0.40581,-0.40581c3.02612,-1.99413 5.60612,-4.57413 7.60025,-7.60025l0.40581,0.40581c1.01587,1.01588 1.57487,2.365 1.57487,3.80013c0,1.43512 -0.559,2.78425 -1.57487,3.80012zM128.07819,36.32156c2.03175,-2.03175 5.5685,-2.03175 7.60025,0c1.01587,1.01588 1.57487,2.365 1.57487,3.80013c0,1.43512 -0.559,2.78425 -1.57487,3.80013l-0.40581,0.40581c-1.99412,-3.02612 -4.57412,-5.60612 -7.60025,-7.60025zM90.07156,36.32156c2.03175,-2.03175 5.5685,-2.03175 7.60025,0l0.40581,0.40581c-3.02612,1.99413 -5.60612,4.57413 -7.60025,7.60025l-0.40581,-0.40581c-1.01587,-1.01588 -1.57487,-2.365 -1.57487,-3.80013c0,-1.43512 0.559,-2.78425 1.57487,-3.80013zM86,53.75h5.99312l0.63156,-1.79256c2.17419,-6.13825 6.94181,-10.90856 13.08006,-13.08006l1.79525,-0.63425v-5.99312c0,-2.96431 2.41069,-5.375 5.375,-5.375c2.96431,0 5.375,2.41069 5.375,5.375v5.99312l1.79256,0.63156c6.13825,2.17419 10.90856,6.94181 13.08006,13.08006l0.63425,1.79525h5.99312c2.96431,0 5.375,2.41069 5.375,5.375c0,2.96431 -2.41069,5.375 -5.375,5.375h-5.99312l-0.63156,1.79256c-2.17419,6.13825 -6.94181,10.90856 -13.08006,13.08006l-1.79525,0.63425v5.99313c0,2.96431 -2.41069,5.375 -5.375,5.375c-2.96431,0 -5.375,-2.41069 -5.375,-5.375v-5.99313l-1.79256,-0.63156c-6.13825,-2.17419 -10.90856,-6.94181 -13.08006,-13.08006l-0.63425,-1.79525h-5.99312c-2.96431,0 -5.375,-2.41069 -5.375,-5.375c0,-2.96431 2.41069,-5.375 5.375,-5.375z" fill="url(#color-4_SZIOLhqepltk_gr4)"></path><path d="M68.47481,32.25h-0.56437c-1.45125,0 -2.17687,-1.74687 -1.15563,-2.76812l0.40312,-0.40313c1.58563,-1.58562 1.58563,-4.13875 0,-5.6975l-1.90812,-1.90812c-1.55875,-1.58563 -4.11188,-1.58563 -5.6975,0l-0.40312,0.40312c-1.02125,1.02125 -2.76812,0.29563 -2.76812,-1.15562v-0.56437c0,-2.23062 -1.80063,-4.03125 -4.03125,-4.03125h-2.6875c-2.23062,0 -4.03125,1.80063 -4.03125,4.03125v0.56437c0,1.45125 -1.74688,2.17687 -2.76813,1.15563l-0.40312,-0.40313c-1.58563,-1.58563 -4.13875,-1.58563 -5.6975,0l-1.90813,1.90812c-1.58562,1.55875 -1.58562,4.11187 0,5.6975l0.40313,0.40313c1.02125,1.02125 0.29563,2.76812 -1.15563,2.76812h-0.56437c-2.23062,0 -4.03125,1.80062 -4.03125,4.03125v2.6875c0,2.23063 1.80063,4.03125 4.03125,4.03125h0.56437c1.45125,0 2.17688,1.74687 1.15563,2.76813l-0.40313,0.40312c-1.58562,1.58563 -1.58562,4.13875 0,5.6975l1.90813,1.90813c1.55875,1.58563 4.11187,1.58563 5.6975,0l0.40312,-0.40312c1.02125,-1.02125 2.76813,-0.29563 2.76813,1.15563v0.56437c0,2.23062 1.80063,4.03125 4.03125,4.03125h2.6875c2.23062,0 4.03125,-1.80063 4.03125,-4.03125v-0.56437c0,-1.45125 1.74687,-2.17687 2.76812,-1.15563l0.40312,0.40312c1.58563,1.58563 4.13875,1.58563 5.6975,0l1.90812,-1.90813c1.58563,-1.55875 1.58563,-4.11187 0,-5.6975l-0.40312,-0.40312c-1.02125,-1.02125 -0.29563,-2.76813 1.15563,-2.76813h0.56437c2.23062,0 4.03125,-1.80062 4.03125,-4.03125v-2.6875c0,-2.23063 -1.80062,-4.03125 -4.03125,-4.03125zM51.00606,45.6875c-4.46125,0 -8.0625,-3.60125 -8.0625,-8.0625c0,-4.46125 3.60125,-8.0625 8.0625,-8.0625c4.46125,0 8.0625,3.60125 8.0625,8.0625c0,4.46125 -3.60125,8.0625 -8.0625,8.0625z" fill="url(#color-5_SZIOLhqepltk_gr5)"></path></g></g></svg>
            </div>
        </div>
        <div class="col-4">
            <div class="row">
                <div class="col-auto p-r-10">
                    <div class="font-heading all-caps fs-8 muted">Name</div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="font-heading all-caps fs-14 scalled scalled">{{item.name}}</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">Configuration Status</div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="font-heading all-caps fs-14 scalled scalled" :class="[{'text-success': item.configurations.active}, {'text-danger': !item.configurations.active}]">{{item.configurations.active ? 'Active':'Inactive'}}</div>
                </div>
            </div>
        </div>
        <div class="col-auto parentContainer">
            <div class="row align-items-center">
                <div class="col-auto no-padding">
                    <button class="btn btn-xs btn-complete b-rad-none requestModal" data-type="editModal">
                        Customize Service
                    </button>
                </div>
            </div>
            <modal-form-component :data="data" size="large" :section="section">
                <template slot="form" slot-scope="{section}">
                    <segment-service-form-component :segment_id="segment_id" :data="data" :section="section"></segment-service-form-component>
                </template>
            </modal-form-component>
        </div>
    </div>
</template>

<script>
    import componentHandler from '../../../general/mixins/componentHandler';
    export default {
        props: {
            section: {
                default: 'segmentsSection'
            },
            segment_id: {
                required: true,
                type: Number
            }
        },
        mixins: [componentHandler]
    }
</script>