<commit_before><template>
  <div>
    <h1>properties...</h1>
    <div v-for="property in properties" :key="property.id">
      <div>{{ property.attributes.reference }}</div>
    </div>
  </div>
</template>
<script>
import useProperties from "../compose/useProperties.js";
export default {
  components: {},
  mounted: function () {
    this.getProperties()
      .then((response) => {
        this.properties = response.data.data
      })
      .catch((error) => {})
  },
  setup(props) {
    const { getProperties } = useProperties()
    return {
      getProperties,
    };
  },
  data() {
    return {
      // topListing: {},
      // bottomListing: {},
      properties: [],
    };
  },
};
</script>
<style></style><commit_msg>Use q-table to display properties list<commit_after><template>
  <div>
    <!-- <div v-for="property in properties" :key="property.id">
      <div>{{ property.attributes.reference }}</div>
    </div> -->
    <div class="q-pa-md">
      <q-table
        title="All properties"
        :rows="properties"
        :columns="columns"
        row-key="name"
      >
        <template v-slot:body="props">
          <q-tr @click="goToProp(props.row)" :props="props">
            <q-td key="ref" :props="props">
              {{ props.row.attributes.reference }}
            </q-td>
            <q-td key="beds" :props="props">
              {{ props.row.attributes["count-bedrooms"] }}
            </q-td>
            <q-td key="baths" :props="props">
              {{ props.row.attributes["count-bathrooms"] }}
            </q-td>
            <q-td key="visible" :props="props">
              {{ props.row.attributes["visible"] }}
            </q-td>
          </q-tr>
        </template>
      </q-table>
    </div>
  </div>
</template>

<script>
const columns = [
  {
    name: "ref",
    required: true,
    label: "Reference",
    align: "left",
    field: (row) => row.name,
    format: (val) => `${val}`,
    sortable: true,
  },
  {
    name: "beds",
    required: true,
    label: "Bedrooms",
    align: "left",
    field: (row) => row.name,
    format: (val) => `${val}`,
    sortable: true,
  },
  {
    name: "baths",
    required: true,
    label: "Bathrooms",
    align: "left",
    field: (row) => row.name,
    format: (val) => `${val}`,
    sortable: true,
  },
  {
    name: "visible",
    required: true,
    label: "Visible",
    align: "left",
    field: (row) => row.name,
    format: (val) => `${val}`,
    sortable: true,
  },
]
import useProperties from "../compose/useProperties.js"
export default {
  components: {},
  methods: {
    goToProp(propertyRow) {
      let targetRoute = {
        name: "rPropertyEdit",
        params: {
          prop_id: propertyRow.id,
        },
      }
      this.$router.push(targetRoute)
    },
  },
  mounted: function () {
    this.getProperties()
      .then((response) => {
        this.properties = response.data.data
      })
      .catch((error) => {})
  },
  setup(props) {
    const { getProperties } = useProperties()
    return {
      columns,
      getProperties,
    }
  },
  data() {
    return {
      properties: [],
    }
  },
}
</script>
<style></style>
{'fraction_non_alphanumeric': 0.18949699462195507, 'fraction_numerical': 0.0006327111673521037, 'mean_word_length': 2.0491803278688523, 'pattern_counts': {'":': 0, '<': 46, '<?xml version=': 0, '>': 58, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7054597', 'n_tokens_mistral': 1042, 'n_tokens_neox': 1043, 'n_words': 199}