Untitled

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;
}