exchange-2.0/resources/assets/vue/components/user/elements/UserComponent.vue

<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: rgb(0, 0, 0);"><defs><linearGradient x1="108.17188" y1="101.74069" x2="108.17188" y2="111.89675" gradientUnits="userSpaceOnUse" id="color-1_KpyVqYNRzRZq_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="77.9375" y1="79.95313" x2="77.9375" y2="91.83188" gradientUnits="userSpaceOnUse" id="color-2_KpyVqYNRzRZq_gr2"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="53.75" y1="79.95313" x2="53.75" y2="91.83188" gradientUnits="userSpaceOnUse" id="color-3_KpyVqYNRzRZq_gr3"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="65.84375" y1="96.33075" x2="65.84375" y2="107.41131" gradientUnits="userSpaceOnUse" id="color-4_KpyVqYNRzRZq_gr4"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="119.59375" y1="88.18494" x2="119.59375" y2="97.09131" gradientUnits="userSpaceOnUse" id="color-5_KpyVqYNRzRZq_gr5"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="86" y1="25.67369" x2="86" y2="144.96375" gradientUnits="userSpaceOnUse" id="color-6_KpyVqYNRzRZq_gr6"><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="M108.17188,111.32163v0c4.08231,0 7.39063,-3.30831 7.39063,-7.39062v-1.806h-14.78125v1.806c0,4.08231 3.30831,7.39063 7.39063,7.39063z" fill="url(#color-1_KpyVqYNRzRZq_gr1)"></path><circle cx="29" cy="32" transform="scale(2.6875,2.6875)" r="2" fill="url(#color-2_KpyVqYNRzRZq_gr2)"></circle><circle cx="20" cy="32" transform="scale(2.6875,2.6875)" r="2" fill="url(#color-3_KpyVqYNRzRZq_gr3)"></circle><path d="M65.30625,106.78244h1.075c4.15488,0 7.525,-3.37012 7.525,-7.525v-2.50744h-16.125v2.50744c0,4.15756 3.37013,7.525 7.525,7.525z" fill="url(#color-4_KpyVqYNRzRZq_gr4)"></path><circle cx="44.5" cy="34.5" transform="scale(2.6875,2.6875)" r="1.5" fill="url(#color-5_KpyVqYNRzRZq_gr5)"></circle><path d="M147.8125,114.26444v-18.54106c1.65281,-1.88931 2.6875,-4.33225 2.6875,-7.03588c0,-2.70363 -1.03469,-5.14388 -2.6875,-7.03587v-0.90031c0,-11.36812 -5.55506,-21.45969 -14.10937,-27.87206v-8.53012c0,-2.42144 -1.24969,-4.59294 -3.34594,-5.80769c-2.09625,-1.22013 -4.601,-1.22819 -6.708,-0.02419l-7.009,4.00438c-1.14756,-0.55094 -2.42144,-0.86538 -3.76519,-0.86538c-1.33031,0 -2.59881,0.32519 -3.74906,0.87613l-7.02781,-4.01512c-2.10431,-1.204 -4.60906,-1.19594 -6.708,0.02419c-1.33837,0.77669 -2.28438,1.96994 -2.82725,3.34325c-4.62519,-5.26213 -10.64519,-9.14556 -17.45531,-11.02681c-0.65844,-3.78669 -3.94256,-6.67038 -7.92006,-6.67038h-2.6875c-3.9775,0 -7.26162,2.88369 -7.92275,6.67038c-15.523,4.28656 -27.01475,19.006 -27.01475,36.507v3.22769c-4.67894,1.64475 -8.0625,6.08988 -8.0625,11.47294c0,6.40162 5.0525,11.60194 11.3735,11.9325c0.45419,2.32738 1.1395,4.57144 2.05862,6.69994c-11.80887,9.51644 -18.80712,24.07731 -18.80712,39.41219v7.70237h97.95131h1.48619h40.3125v-7.31269c0,-9.55944 -2.85412,-18.61631 -8.0625,-26.23537zM138.77712,104.43625c0.41388,-1.62056 0.70681,-3.28681 0.84656,-4.99875h0.12631c0.93256,0 1.82212,-0.15587 2.6875,-0.38163v8.7075c-1.15294,-1.16369 -2.37306,-2.27631 -3.66038,-3.32712zM96.75806,100.69794c0.91644,-2.1285 1.60444,-4.37256 2.05594,-6.69725c6.321,-0.33325 11.3735,-5.54163 11.3735,-12.12869c0,-2.11506 -0.59663,-4.07425 -1.56144,-5.80231c1.72806,-1.75763 3.14169,-3.75713 4.24894,-5.91519c4.01781,7.80181 12.13675,13.158 21.5,13.158v13.62025c0,12.84625 -9.72069,23.45112 -22.188,24.88356c-3.14169,-8.18881 -8.39844,-15.46119 -15.42894,-21.11837zM37.625,87.6985v-3.48569v-6.27531c4.44512,0 8.0625,-3.61737 8.0625,-8.0625v-5.375c0,-1.4835 1.20669,-2.6875 2.6875,-2.6875h34.9375c1.48081,0 2.6875,1.204 2.6875,2.6875v5.375c0,4.44513 3.61738,8.0625 8.0625,8.0625v9.761c0,15.36444 -12.65812,27.864 -28.21875,27.864c-15.56062,0 -28.21875,-12.49956 -28.21875,-27.864zM104.8125,82.0655c0,3.225 -2.31663,5.91787 -5.375,6.50375v-0.87075v-11.98356v-0.33863c3.05569,0.58856 5.375,3.29487 5.375,6.68919zM145.125,88.6875c0,2.96431 -2.41069,5.375 -5.375,5.375v-10.75c2.96431,0 5.375,2.41069 5.375,5.375zM142.3085,78.27881c-0.82237,-0.20156 -1.67162,-0.34131 -2.5585,-0.34131h-5.375c-10.37375,0 -18.8125,-8.44144 -18.8125,-18.8125h-5.375c0,4.85363 -1.85975,9.44387 -5.15194,12.91881c-0.88688,-0.62081 -1.8705,-1.08844 -2.91056,-1.45125v-3.225c0,-4.79719 -0.89763,-9.374 -2.46981,-13.60144c3.91031,-1.7415 8.17,-2.70363 12.49956,-2.70363c15.84819,0 28.86644,12.00238 30.15375,27.21631zM126.31788,43.18275c0.60738,-0.34669 1.14219,-0.11288 1.34375,0.00537c0.20156,0.11556 0.66919,0.46225 0.66919,1.161v5.19225c-2.49938,-1.25775 -5.16806,-2.22794 -7.96306,-2.87831c0.03763,-0.04569 0.0645,-0.09675 0.10481,-0.13975zM97.42188,48.762v-4.41287c0,-0.69875 0.46762,-1.04544 0.66919,-1.161c0.20156,-0.11556 0.73369,-0.34669 1.34375,-0.00537l5.68137,3.24381c-0.00269,0.00806 -0.00806,0.01344 -0.01075,0.0215c-2.63913,0.52406 -5.19763,1.333 -7.64594,2.42413c-0.0215,-0.03762 -0.04569,-0.07256 -0.0645,-0.11288h0.02687zM65.84375,34.9375c17.04144,0 30.90625,14.54744 30.90625,32.42738v5.19763h-2.6875c-1.48081,0 -2.6875,-1.204 -2.6875,-2.6875v-5.375c0,-4.44512 -3.61738,-8.0625 -8.0625,-8.0625h-34.9375c-4.44512,0 -8.0625,3.61738 -8.0625,8.0625v5.375c0,1.4835 -1.20669,2.6875 -2.6875,2.6875h-2.6875v-5.19763c0,-17.87994 13.86481,-32.42737 30.90625,-32.42737zM32.25,88.56925c-3.05837,-0.58856 -5.375,-3.30294 -5.375,-6.69725c0,-3.22231 2.31931,-5.90981 5.375,-6.49569v2.56119v6.27531v3.48569zM37.52825,105.50856c5.96894,9.25844 16.41794,15.42894 28.3155,15.42894c11.87606,0 22.30894,-6.14631 28.28325,-15.37519c1.677,1.41094 3.23306,2.91862 4.6655,4.52844c-7.87169,10.0405 -20.04337,15.98794 -32.94875,15.98794c-12.986,0 -25.09587,-5.934 -32.96756,-16.00675c1.43512,-1.62325 2.98313,-3.15244 4.65206,-4.56337zM110.1875,142.4375h-10.75v-5.375h-5.375v5.375h-56.4375v-5.375h-5.375v5.375h-10.75v-2.32737c0,-9.27725 2.87025,-18.232 7.98725,-25.6925c8.89562,10.73387 22.15844,17.03875 36.3565,17.03875c14.11744,0 27.46088,-6.31563 36.35919,-17.03338c5.13044,7.43094 7.98456,16.297 7.98456,25.68713zM150.5,142.4375h-8.0625v-5.375h-5.375v5.375h-21.5v-2.32737c0,-4.50425 -0.59663,-8.901 -1.70925,-13.115c10.18025,-1.53456 18.70769,-8.10819 22.96469,-17.11131c8.71019,7.81525 13.68206,18.76681 13.68206,30.616z" fill="url(#color-6_KpyVqYNRzRZq_gr6)"></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">Email</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="font-heading all-caps fs-14 scalled scalled">{{item.email}}</div>
                        </div>
                    </div>
                </div>
                <div class="col-auto">
                    <div class="row">
                        <div class="col">
                            <button class="btn btn-xs btn-outline-danger b-rad-none m-r-5 requestModal" data-type="deleteSupplier">
                                <i class="fa fa-times"></i>
                            </button>
                            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="deleteSupplier">
                                <delete-user-form-component :data="item" section="suppliersSection" class="text-center"></delete-user-form-component>
                            </modal-component>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import componentHandler from '../../../general/mixins/componentHandler';
    export default {
        data(){
            return {
                expanded: false,
            }
        },
        mixins: [componentHandler]
    }
</script>