class CustomMetadata(SimpleMetadata): def determine_actions(self, request, view): actions = {} action = view.action_map["get"] # Use the default serializer class directly serializer_class = view.get_serializer_class() # Assuming this returns the correct serializer class. serializer = serializer_class() # Initialize the serializer without referencing an action. actions[action] = self.get_serializer_info(serializer) return actions почему с этим кодом метадаты поля выводятся на русском языке class MaterialGetRequestMetadata(SimpleMetadata): def determine_actions(self, request, view): actions = {} action = view.action_map["get"] default_serializer_class = view.get_serializer_class() serializer_class = view.serializer_classes.get(action, default_serializer_class) serializer = serializer_class() actions[action] = self.get_serializer_info(serializer) return actionsа с этим на английйском <script setup>
import { ref, onBeforeMount, onMounted } from 'vue';
import { getOptions } from "@/api/default_api_promises";
import { useRoute } from 'vue-router';

const route = useRoute();
const material = ref(route.query.material_type);
const items = ref([]);
const loading = ref(false);
const metadata = ref({});

const iconMap = {
  audio: 'mdi-volume-high',
  image: 'mdi-image-outline',
  video: 'mdi-video-outline'
};

const getDisplayFields = (item) => {
  const metadataFields = metadata.value.actions?.list || {};
  return Object.entries(item.raw).map(([key, value]) => ({
    label: metadataFields[key]?.label || key,
    value: value
  }));
};

const fetchMetadataAndItems = () => {
  loading.value = true;

  getOptions({
    url: /api/${material.value}-materials/
  })()
    .then(response => {
      metadata.value = response.data;
      loading.value = false;
    })
    .catch(error => {
      console.error('Error fetching metadata:', error);
      loading.value = false;
    });
};

onBeforeMount(fetchMetadataAndItems);
onMounted(() => {
  material.value = route.query.material_type;
});
</script>

<template>
  <v-data-iterator :items="items" class="d-flex justify-center">
    <template v-slot:default="{ items }">
      <template v-for="(item, index) in items" :key="index">
        <div class="item">
          <div class="item-icon">
            <v-icon size="110" color="primary-violet">
              {{ iconMap[material] || 'mdi-file-document-outline' }}
            </v-icon>
          </div>
          <div class="item-content">
            <v-progress-circular
              v-if="loading"
              indeterminate
              color="primary"
            ></v-progress-circular>
            <template v-else>
              <div v-for="field in getDisplayFields(item)" :key="field.label" class="item-field">
                <span class="field-label">{{ field.label }}:</span>
                <span class="field-value">{{ field.value }}</span>
              </div>
            </template>
          </div>
        </div>
      </template>
    </template>
  </v-data-iterator>
</template>

<style scoped lang="scss">
.item {
  width: 900px;
  padding: 15px;
  margin-top: 15px;
  margin-bottom: 15px;
  border: 1px solid darkgray;
  border-radius: 8px;
  display: flex;
  overflow: hidden;
}

.item-icon {
  flex-shrink: 0;
  width: 110px;
}

.item-content {
  flex-grow: 1;
  margin-left: 20px;
  overflow: hidden;
}

.item-field {
  display: flex;
  align-items: flex-start;
  margin-bottom: 8px;
  line-height: 1.2;
}

.field-label {
  flex-shrink: 0;
  width: 150px;
  font-size: 14px;
  font-weight: bold;
  color: gray;
  margin-right: 10px;
}

.field-value {
  font-size: 14px;
  font-weight: normal;
}
</style>