Untitled
plain_text
2 months ago
7.9 kB
2
Indexable
Never
import { defineComponent, ref, computed } from 'vue' import styles from './duty.module.css' import { Table, TableCell, TableRow, TableHead, TableBody, InputSearch } from '@fe/ozi' const resultJson = { "groups": [ { "groupName": "cm_1c_closing_team", "duties": [ { "username": "ebrazhnikov@ozon.ru", "telephone": "79653900965", "isLead": false }, { "username": "itarlykov@ozon.ru", "telephone": "79179301511", "isLead": false }, { "username": "idukhan@ozon.ru", "telephone": "79778986400", "isLead": false } ] }, { "groupName": "cm_d365fo_closing_team", "duties": [ { "username": "alechernykh@ozon.ru", "telephone": "79265623637", "isLead": true }, { "username": "elensoldatova@ozon.ru", "telephone": "79031993244", "isLead": false }, { "username": "itarlykov@ozon.ru", "telephone": "79179301511", "isLead": false }, { "username": "idukhan@ozon.ru", "telephone": "79778986400", "isLead": false } ] }, { "groupName": "cm_metazon_closing_team", "duties": [ { "username": "vlmakarov@ozon.ru", "telephone": "79995139550", "isLead": false }, { "username": "itarlykov@ozon.ru", "telephone": "79179301511", "isLead": false }, { "username": "idukhan@ozon.ru", "telephone": "79778986400", "isLead": false } ] }, { "groupName": "cm_d365fo_operative_support_team", "duties": [ { "username": "eshashkin@ozon.ru", "telephone": "79166719913", "isLead": false }, { "username": "gstanivuk@ozon.ru", "telephone": "79255287778", "isLead": false } ] }, { "groupName": "cm_erp_operative_support_team", "duties": [ { "username": "atrokina@ozon.ru", "telephone": "79057953113", "isLead": false } ] }, { "groupName": "cm_1c_operative_support_team", "duties": [ { "username": "dsyusyukin@ozon.ru", "telephone": "7-9653756275", "isLead": false }, { "username": "vladislaponomarev@ozon.ru", "telephone": "79064939850", "isLead": false } ] }, { "groupName": "cm_d365fo_l2_support_team", "duties": [ { "username": "vantropov@ozon.ru", "telephone": "79175144941", "isLead": false } ] }, { "groupName": "cm_1c_support_team", "duties": [ { "username": "vkarnaukhov@ozon.ru", "telephone": "79096219990", "isLead": false } ] }, { "groupName": "cm_anaplan_support_team", "duties": [ { "username": "azolotkov@ozon.ru", "telephone": "79032827818", "isLead": false } ] }, { "groupName": "cm_metazonfinance_support_team", "duties": [ { "username": "aleksansergeev@ozon.ru", "telephone": "79150818195", "isLead": false } ] }, { "groupName": "cm_erpintegration_support_team", "duties": [ { "username": "pavandreev@ozon.ru", "telephone": "79154184611", "isLead": false } ] }, { "groupName": "cm_metazon_support_team", "duties": [ { "username": "albadmaev@ozon.ru", "telephone": "79680783761", "isLead": false } ] } ] } export default defineComponent({ name: 'DutyPage', setup() { const searchValue = ref(''); const getProfileLink = (username: string) => `https://staff.o3.ru/profile/${username.split('@')[0]}`; const getMattermostLink = (username: string) => `mattermost://msg.o3.ru/ozon/messages/@${username.split('@')[0]}`; const getUsernameFromEmail = (email: string) => email.split('@')[0]; return { searchValue, resultJson, getProfileLink, getMattermostLink, getUsernameFromEmail, }; }, render() { return ( <div> <InputSearch label={'Введите логин дежурного или название команды'} value={this.searchValue} whenChange={(x: string) => (this.searchValue = x)} whenClearIconClick={() => (this.searchValue = '')} /> <div class={styles.container}> <Table class={styles.table} size={600}> <TableHead> <TableRow> <TableCell bottomBorder class={styles.cell}>Имя группы</TableCell> <TableCell bottomBorder class={styles.cell}>Дежурные</TableCell> </TableRow> </TableHead> <TableBody> {this.resultJson.groups .filter((group) => group.groupName.toLowerCase().includes(this.searchValue.toLowerCase()) ) .map((group) => ( <TableRow key={group.groupName}> <TableCell bottomBorder class={styles.cell}>{group.groupName}</TableCell> <TableCell bottomBorder class={styles.cell}> {group.duties.map((duty) => ( <div key={duty.username} class={styles.dutyContainer}> <a class={styles.dutyName} href={this.getProfileLink(duty.username)} target="_blank" rel="noopener noreferrer" > {this.getUsernameFromEmail(duty.username)} </a> <a href={this.getMattermostLink(duty.username)} class={styles.czIcon}> <svg data-v-ee06a054="" data-v-34ecddb6="" xmlns="http://www.w3.org/2000/svg" width="16" height="16" transform="scale(1.2)" > <path data-v-ee06a054="" data-v-34ecddb6="" fill="currentColor" d="M.15 8.876C-.697 5.764 2.132 2.315 6.467 1.17c4.336-1.144 8.537.451 9.383 3.563.847 3.11-1.982 6.56-6.317 7.705-.612.161-1.20..." /> </svg> </a> </div> ))} </TableCell> </TableRow> ))} </TableBody> </Table> </div> </div> ); }, }); /* Duty */ .table{ margin: 40px auto; border-right: 0.3px solid gray; border-top: 0.3px solid gray; table-layout: auto; } .cell{ border-left:0.3px solid gray; } .czIcon{ margin-right: 10px; margin-bottom: 8px; margin-left: 10px; } .dutyName{ margin-bottom: 10px; } .dutyContainer { display: flex; align-items: center; }