XRoomDashboardFront/xroom-dashboard/src/components/TeamDetails.vue

<template>
  <div class="tab-content">
    <div class="team-logo">
      <div class="card-title">
        <h2>لوگوی تیم</h2>
        <p>این لوگو در اتاق‌های شما استفاده خواهد شد. توصیه می‌کنیم از یک تصویر شفاف با نسبت تصویر 2:1 استفاده کنید.</p>
      </div>
      <div class="logo-info">
        <img :src="teamLogo || require('@/assets/img/team-logo.jpg')" alt="team logo" />
        <label for="file-upload">
          <span>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="19"
              height="19"
              viewBox="0 0 16 16"
              fill="none"
            >
              <g clip-path="url(#clip0_312_7133)">
                <path
                  d="M2.66602 11.3333V12.6666C2.66602 13.0202 2.80649 13.3593 3.05654 13.6094C3.30659 13.8594 3.64573 13.9999 3.99935 13.9999H11.9993C12.353 13.9999 12.6921 13.8594 12.9422 13.6094C13.1922 13.3593 13.3327 13.0202 13.3327 12.6666V11.3333"
                  stroke="white"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <path
                  d="M4.66602 6.00008L7.99935 2.66675L11.3327 6.00008"
                  stroke="white"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <path
                  d="M8 2.66675V10.6667"
                  stroke="white"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </g>
              <defs>
                <clipPath id="clip0_312_7133">
                  <rect width="16" height="16" fill="white" />
                </clipPath>
              </defs>
            </svg>
          </span>
          <span>آپلود</span>
        </label>
        <input
          id="file-upload"
          type="file"
          accept="image/*"
          style="display: none;"
          @change="handleLogoUpload"
          ref="fileUpload"
        />
      </div>
      <div class="logo-sample">
        <div class="logo-sample-title">
          <h2>نمونه</h2>
          <span>به این ترتیب لوگوی تیم شما در اتاق‌های شما به نظر می‌رسد.</span>
        </div>
        <div class="sample-logos">
          <img
            v-for="(logo, index) in sampleLogos"
            :key="index"
            :src="require(`@/assets${logo.path}`)"
            :alt="logo.alt"
          />
        </div>
      </div>
    </div>
    <div class="team-info">
      <div class="card-title">
        <h2>جزئیات تیم</h2>
        <form @submit.prevent="submitForm">
          <div class="form-group">
            <label for="team_name">نام تیم</label>
            <input
              id="team_name"
              type="text"
              v-model="form.teamName"
            />
          </div>
          <div class="form-group">
            <label for="company_name">نام شرکت</label>
            <input
              id="company_name"
              type="text"
              v-model="form.companyName"
            />
          </div>
          <div class="form-group">
            <label for="type_activity">نوع فعالیت شرکت</label>
            <input
              id="type_activity"
              type="text"
              v-model="form.activityType"
            />
          </div>
          <button type="submit" class="submit-btn">تایید</button>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'TeamDetails',
  data() {
    return {
      form: {
        teamName: '',
        companyName: '',
        activityType: '',
        teamId: null,
      },
      teamLogo: null,
      uploadedLogoFile: null,
      sampleLogos: [
        { path: '/img/sample-logo.png', alt: 'نمونه لوگو' },
        { path: '/img/sample-logo.png', alt: 'نمونه لوگو' },
        { path: '/img/sample-logo.png', alt: 'نمونه لوگو' },
      ],
      baseUrl: 'http://my.xroomapp.com:8000',
    };
  },
  created() {
    // دریافت اطلاعات تیم در زمان ایجاد کامپوننت
    this.fetchTeamData();
  },
  methods: {
    /* دریافت اطلاعات تیم از API */
    async fetchTeamData() {
      try {
        const token = localStorage.getItem('token');
        const response = await axios.get(`${this.baseUrl}/get_team`, {
          headers: {
            Authorization: `Token ${token}`,
            'Content-Type': 'application/json',
          },
        });
        const team = response.data.teams[0];
        if (team) {
          this.form.teamName = team.name || '';
          this.form.activityType = team.description || '';
          this.form.teamId = team.id;
        } else {
          alert('هیچ اطلاعاتی برای تیم یافت نشد.');
        }
      } catch (error) {
        alert('خطا در بارگذاری اطلاعات تیم. لطفاً دوباره تلاش کنید.');
      }
    },

    handleLogoUpload(event) {
      const file = event.target.files[0];
      if (file) {
        this.teamLogo = URL.createObjectURL(file);
        this.uploadedLogoFile = file;
      }
    },

    /* ارسال فرم برای به‌روزرسانی اطلاعات تیم  */
    async submitForm() {
      const hasFormData = this.form.teamName || this.form.companyName || this.form.activityType;
      const hasLogo = !!this.uploadedLogoFile;

      if (!hasFormData && !hasLogo) {
        alert('لطفاً حداقل یک فیلد یا لوگو را وارد کنید.');
        return;
      }

      const formData = new FormData();
      if (this.form.teamName) formData.append('name', this.form.teamName);
      if (this.form.companyName) formData.append('company_name', this.form.companyName);
      if (this.form.activityType) formData.append('description', this.form.activityType);
      if (this.uploadedLogoFile) formData.append('logo', this.uploadedLogoFile);

      try {
        const token = localStorage.getItem('token');
        await axios.patch(`${this.baseUrl}/update_team/${this.form.teamId}/`, formData, {
          headers: {
            Authorization: `Token ${token}`,
            'Content-Type': 'multipart/form-data',
          },
        });
        this.$emit('update:teamData', {
          teamName: this.form.teamName,
          companyName: this.form.companyName,
          activityType: this.form.activityType,
          teamLogo: this.uploadedLogoFile,
        });
        alert('اطلاعات تیم با موفقیت به‌روزرسانی شد');

        // ریست فرم و لوگو
        this.form.teamName = '';
        this.form.companyName = '';
        this.form.activityType = '';
        this.teamLogo = null;
        this.uploadedLogoFile = null;
        const fileInput = this.$refs.fileUpload;
        if (fileInput) {
          fileInput.value = '';
        }
        await this.fetchTeamData();
      } catch (error) {
        alert('خطا در به‌روزرسانی اطلاعات تیم. لطفاً دوباره تلاش کنید.');
      }
    },
  },
};
</script>


<style scoped>
.tab-content {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.team-logo,
.team-info {
  width: 49%;
  background-color: #ffffff;
  border: none;
  border-radius: 16px;
  padding: 1.5rem;
}

.team-logo {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.card-title,
.logo-sample-title {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.card-title h2,
.logo-sample-title h2 {
  color: #101010;
  font-weight: 600;
  font-size: 20px;
}

.card-title p,
.logo-sample-title span {
  color: #5a6678;
  font-weight: 500;
  font-size: 17px;
  line-height: 190%;
  max-width: 90%;
}

.logo-sample-title {
  gap: 1rem !important;
}

.logo-sample {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem !important;
}

.logo-info {
  display: flex;
  align-items: center;
  gap: 3rem;
}

.logo-info img {
  border-radius: 12px;
  height: 150px;
  max-width: 150px;
  width: 100%;
  object-fit: cover;
}

.logo-info label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: #6dc993;
  padding: 10px 26px;
  border-radius: 10px;
  border: none;
  font-size: 18px;
  color: #fff;
  cursor: pointer;
}

.sample-logos {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.sample-logos img {
  height: 110px;
  width: 110px;
  border-radius: 12px;
}

.form-group {
  margin-bottom: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.form-group label {
  font-weight: 500;
  width: 70%;
  font-size: 16px;
}

.form-group input {
  width: 100%;
  padding: 8px;
  border: 1px solid #718096;
  border-radius: 8px;
  font-size: 1rem;
}

.form-group input:focus {
  outline: none;
}

.submit-btn {
  background-color: #3a57e8;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  height: 50px;
  width: 60%;
  font-weight: 500;
  font-size: 18px;
  text-align: center;
  float: left;
  margin-top: 0.5rem;
}
</style>